/* =========================================================
   tolga-unold.de — Professional Design System
   Target: Business partners & employers
   Palette: Deep navy · Electric blue · Clean white
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ── Tokens ─────────────────────────────────────────────── */
:root {
    --navy:        #0d1b2a;
    --navy-mid:    #162236;
    --navy-light:  #1e3152;
    --accent:      #0ea5e9;
    --accent-dark: #0077b6;
    --accent-glow: rgba(14, 165, 233, 0.18);
    --white:       #ffffff;
    --off-white:   #f8fafc;
    --gray-100:    #f1f5f9;
    --gray-200:    #e2e8f0;
    --gray-500:    #64748b;
    --gray-700:    #334155;
    --text:        #1e293b;
    --text-muted:  #64748b;
    --shadow-sm:   0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08);
    --shadow-md:   0 4px 16px rgba(0,0,0,.12);
    --shadow-lg:   0 8px 32px rgba(0,0,0,.16);
    --radius:      10px;
    --radius-sm:   6px;
    --font:        'Inter', system-ui, -apple-system, sans-serif;
    --transition:  0.22s ease;

    /* legacy compat */
    --captioncolor: var(--navy-light);
    --h3:           var(--accent-dark);
    --header_text:  var(--white);
    --footer_bg:    var(--navy);
    --footer_text_color: #cbd5e1;
    --bg4:          var(--gray-100);
    --a_unused:     var(--accent-dark);
    --a_hover:      var(--accent);
    --a_used:       var(--gray-500);
    --a_active:     var(--accent);
    --font1: var(--font);
    --font2: var(--font);
    --font3: var(--font);
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

html, body {
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background: var(--off-white);
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ── Typography ─────────────────────────────────────────── */
h1 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700; letter-spacing: -0.02em; color: var(--navy); margin-bottom: .5em; }
body > header h1 { color: var(--white); }
h2 { font-size: clamp(1.2rem, 2.2vw, 1.7rem); font-weight: 600; color: var(--navy); margin: 1.4em 0 .5em; }
h3 { font-size: 1.15rem; font-weight: 600; color: var(--navy-light); margin: 1.1em 0 .4em; }
h4 { font-size: 1rem;    font-weight: 600; color: var(--gray-700); margin: .9em 0 .3em; }
h5, h6 { font-size: .875rem; font-weight: 600; color: var(--gray-700); }

p { color: var(--text); margin-bottom: .9em; max-width: 72ch; }
p + p { margin-top: 0; }
p:last-of-type { margin-bottom: 1.5rem; }

/* ── Page header (body-level only) ──────────────────────── */
body > header {
    position: relative;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 60%, var(--navy-light) 100%);
    border-bottom: 3px solid var(--accent);
    color: var(--white);
    padding: 2rem 2rem 0;
    width: 100%;
}

body > header::after {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-dark) 100%);
}

body > header p {
    color: #94b4cc;
    font-size: .95rem;
    max-width: 65ch;
    margin-bottom: 1.2rem;
}

/* ── Article / blog section header ──────────────────────── */
header.blog {
    background: none;
    border: none;
    padding: 0;
    margin: 0 0 .75rem;
    width: 100%;
}

header.blog::after { display: none; }

header.blog h2 {
    color: var(--navy);
    border-bottom: 2px solid var(--gray-200);
    padding-bottom: .5rem;
}

.header-content { position: relative; z-index: 2; }

#gearCanvas {
    position: absolute;
    top: 0; right: 0;
    height: 100%;
    opacity: .07;
    z-index: 1;
}

/* ── Navigation ─────────────────────────────────────────── */
nav, .nav_container {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: .6rem 0 0;
    font-family: var(--font);
    width: 100%;
}

.navigation {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .55rem 1.3rem;
    font-size: .875rem;
    font-weight: 500;
    color: #94b4cc;
    text-decoration: none;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    border: 1px solid transparent;
    border-bottom: none;
    transition: background var(--transition), color var(--transition);
    min-width: 80px;
}

.navigation:hover,
.navigation:focus {
    background: var(--accent-glow);
    color: var(--white);
}

.navigation.active {
    background: var(--off-white);
    color: var(--navy);
    border-color: var(--gray-200);
    font-weight: 600;
}

nav a { color: #94b4cc; text-decoration: none; }

/* ── Main ────────────────────────────────────────────────── */
main {
    flex: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2.5rem 2rem;
}

main.blog { max-width: 960px; }
main.project { max-width: 1100px; }

/* ── Sections ────────────────────────────────────────────── */
section {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 2rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition);
    max-width: 860px;
}

section:hover { box-shadow: var(--shadow-md); }

section.wide {
    max-width: 100%;
    padding: 2rem;
    overflow: hidden;
}

section.download_section {
    margin: 0 auto 1.5rem;
    padding: 1.5rem 2rem;
}

section.presentation_section {
    font-size: .9375rem;
    line-height: 1.65;
    margin-bottom: 1.5rem;
    padding: 2rem;
}

section.iframe { margin: auto; max-width: 100%; }

section.blog {
    max-width: 100%;
    border-radius: var(--radius-sm);
    margin-bottom: 3rem;
    padding: 1.5rem 2rem;
}

section img  { max-width: 100%; height: auto; display: block; border-radius: var(--radius-sm); margin: 1rem auto; }
section.wide img { width: 100%; height: auto; object-fit: cover; }

/* About page */
.about-intro {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    flex-wrap: wrap;
}
.about-intro img {
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    max-width: 260px;
    object-fit: cover;
    flex-shrink: 0;
}
.about-list { list-style: none; padding: 0; }
.about-list li {
    padding: .7rem 0;
    border-bottom: 1px solid var(--gray-200);
    font-size: .9375rem;
    color: var(--text);
    width: auto;
    max-width: 100%;
}
.about-list li:last-child { border-bottom: none; }

/* ── Blog – Dreams (category grid) ──────────────────────── */
.flex-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
    padding: 0;
}

.interactive_dream {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-top: 3px solid var(--accent);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    min-width: 0;
    min-height: 0;
    margin: 0;
}

.interactive_dream:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-top-color: var(--accent-dark);
}

.interactive_dream img,
.interactive_dream video {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    border-radius: 0;
    margin: 0;
    box-shadow: none;
}

.interactive_dream a { display: block; overflow: hidden; }

.textpart {
    padding: 1rem 1.25rem 1.25rem;
    flex: 1;
    max-width: 100%;
}

.textpart h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 .5rem;
    letter-spacing: .01em;
}

.textpart p {
    font-size: .85rem;
    color: var(--text-muted);
    margin: .15rem 0;
    max-width: 100%;
}

/* ── Blog articles ───────────────────────────────────────── */
.blog-content {
    margin: 0 auto;
    padding: 1rem 0;
    max-width: 760px;
    line-height: 1.7;
}

article {
    margin: 0 auto 2rem;
    max-width: 100%;
}

header.blog {
    width: 100%;
    margin-bottom: 1.5rem;
}

.blog p {
    font-size: 1rem;
    line-height: 1.75;
    letter-spacing: .01em;
    margin-bottom: 1.1em;
    color: var(--text);
}

.blog h2 {
    font-size: 1.5rem;
    color: var(--navy);
    margin: 1.5rem 0 .6rem;
}

.blog img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }

/* ── Table of Contents ───────────────────────────────────── */
.toc {
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
    max-width: 100%;
}

.toc h3 {
    font-size: .8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--accent-dark);
    margin: 0 0 .75rem;
}

.toc ol { padding-left: 1.25rem; }
.toc ul { list-style: none; padding-left: 0; }
.toc li { margin: .35rem 0; }

.toc a {
    color: var(--navy-light);
    text-decoration: none;
    font-size: .9rem;
    display: block;
    word-break: break-word;
    transition: color var(--transition);
}

.toc a:hover, .toc a:active { color: var(--accent); text-decoration: underline; }

/* Floating TOC */
.floating_toc {
    position: fixed;
    top: 30%;
    left: 1%;
    background: var(--navy);
    border: 1px solid var(--navy-light);
    border-radius: var(--radius-sm);
    padding: 1rem;
    max-height: 60vh;
    overflow-y: auto;
    z-index: 100;
    width: fit-content;
    min-width: 140px;
    max-width: 200px;
    word-wrap: break-word;
}

.floating_toc h3 { font-size: .75rem; color: var(--accent); text-align: center; margin-bottom: .5rem; }
.floating_toc ul { list-style: none; padding: 0; }
.floating_toc ol { padding-left: 1rem; }
.floating_toc li { margin: .2rem 0; }

.floating_toc a {
    display: block;
    color: #94b4cc;
    background: transparent;
    padding: .35rem .5rem;
    margin: 2px 0;
    border-radius: 4px;
    font-size: .8rem;
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
    word-wrap: break-word;
}

.floating_toc a:hover { background: var(--navy-light); color: var(--white); }

/* ── Pagination ──────────────────────────────────────────── */
.pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 2.5rem 0 1rem;
}

.pagination a, .pagination .current-page {
    padding: .5rem 1rem;
    border-radius: var(--radius-sm);
    font-size: .875rem;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid var(--gray-200);
    background: var(--white);
    color: var(--navy-light);
    transition: background var(--transition), color var(--transition);
}

.pagination a:hover { background: var(--accent); color: var(--white); border-color: var(--accent); }

.pagination .current-page {
    background: var(--navy);
    color: var(--white);
    border-color: var(--navy);
    pointer-events: none;
}

/* ── Back to top ─────────────────────────────────────────── */
.back-button-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 500;
}

.scroll_up, .back-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .6rem 1.2rem;
    background: var(--navy);
    color: var(--white);
    border: 1px solid var(--navy-light);
    border-radius: var(--radius-sm);
    font-size: .875rem;
    font-family: var(--font);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition), box-shadow var(--transition);
    box-shadow: var(--shadow-md);
    text-decoration: none;
}

.scroll_up:hover, .back-button:hover {
    background: var(--accent-dark);
    box-shadow: var(--shadow-lg);
    color: var(--white);
}

/* ── CTA ─────────────────────────────────────────────────── */
.cta {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
    color: var(--white);
    padding: 3rem 2rem;
    text-align: center;
    border-radius: var(--radius);
    margin: 2rem auto;
    max-width: 760px;
    box-shadow: var(--shadow-lg);
}

.cta h2 { font-size: 2rem; color: var(--white); margin: 0 0 .75rem; }
.cta p  { font-size: 1.05rem; color: #94b4cc; margin: 0 auto 1.75rem; max-width: 56ch; }

.contact-button {
    display: inline-block;
    background: var(--accent);
    color: var(--white);
    padding: .8rem 2.2rem;
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--font);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition), box-shadow var(--transition);
}

.contact-button:hover {
    background: var(--accent-dark);
    color: var(--white);
    box-shadow: 0 4px 16px rgba(14,165,233,.4);
}

/* ── Images ──────────────────────────────────────────────── */
.download_section_image,
.presentation_section_image {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    margin: .75rem;
    transition: box-shadow var(--transition);
    object-fit: cover;
}

.download_section_image:hover { box-shadow: var(--shadow-md); }

.small_download_section_image {
    display: block;
    max-width: 30%;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    margin: .5rem;
}

.dl_img { max-width: 100%; border-radius: var(--radius-sm); box-shadow: var(--shadow-md); }
.intext_image { max-width: 60%; display: block; margin: 1rem auto; height: auto; border-radius: var(--radius-sm); }

/* ── Video ───────────────────────────────────────────────── */
.video-container {
    width: 100%;
    max-width: 100%;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    margin: 1rem 0;
}

.video-container video,
.section_video video {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.section_video { max-width: 100%; margin: 1rem auto; }

.video-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--navy);
    color: #94b4cc;
    font-size: 1.1rem;
    font-weight: 500;
    padding: 3rem;
    border-radius: var(--radius);
    animation: pulse 2.5s ease infinite;
}

@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .75; } }

/* ── Footer ──────────────────────────────────────────────── */
footer {
    background: var(--navy);
    color: var(--footer_text_color);
    font-family: var(--font);
    padding: 2rem;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
    flex-shrink: 0;
    border-top: 1px solid var(--navy-light);
}

footer div { text-align: left; }

footer p { color: var(--footer_text_color); margin-bottom: .4rem; font-size: .875rem; max-width: none; }

footer a:link, footer a:visited { color: var(--accent); text-decoration: none; transition: color var(--transition); }
footer a:hover { color: var(--white); }

footer details summary { cursor: pointer; color: var(--accent); font-weight: 500; font-size: .875rem; }
footer address { margin-top: .5rem; font-style: normal; font-size: .875rem; color: #94b4cc; }

/* ── Links ───────────────────────────────────────────────── */
a:link    { color: var(--accent-dark); text-decoration: none; }
a:visited { color: var(--gray-500);    text-decoration: none; }
a:active  { color: var(--accent);      text-decoration: none; }
a:hover   { color: var(--accent);      text-decoration: none; }

a.navigation:link, a.navigation:visited, a.navigation:active, a.navigation:hover {
    color: #94b4cc;
    text-decoration: none;
    font-size: .875rem;
}

a.intext:link    { color: var(--accent-dark); font-weight: 600; }
a.intext:visited { color: var(--gray-500); }
a.intext:active  { color: var(--accent); }
a.intext:hover   { color: var(--accent); text-decoration: underline; }

/* ── Tables ──────────────────────────────────────────────── */
table.normal {
    width: 100%;
    border-collapse: collapse;
    font-size: .9375rem;
}

th, td {
    border: 1px solid var(--gray-200);
    padding: .65rem 1rem;
    text-align: left;
}

th {
    background: var(--gray-100);
    font-weight: 600;
    color: var(--navy);
    font-size: .875rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

tr:hover td { background: var(--off-white); }

/* ── Text window ─────────────────────────────────────────── */
div.text_window {
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: 1.25rem;
    margin: .75rem 0;
    box-shadow: var(--shadow-sm);
}

/* ── Lists ───────────────────────────────────────────────── */
ul { list-style: none; padding: .25rem 0; }
li {
    font-size: .9375rem;
    color: var(--text);
    padding: .3rem 0;
    max-width: 100%;
}

ul.styled { list-style: disc; padding-left: 1.5rem; }
ul.styled li { color: var(--text); padding: .2rem 0; }

/* ── Forms & Buttons ─────────────────────────────────────── */
label { display: block; margin-bottom: .4rem; font-size: .875rem; font-weight: 500; color: var(--gray-700); }

input, select, textarea {
    padding: .55rem .85rem;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: .9375rem;
    color: var(--text);
    background: var(--white);
    width: 100%;
    margin-bottom: 1rem;
    transition: border-color var(--transition);
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .6rem 1.4rem;
    background: var(--accent);
    color: var(--white);
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: .9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition), box-shadow var(--transition);
}

button:hover { background: var(--accent-dark); box-shadow: 0 3px 10px rgba(14,165,233,.35); }

/* ── Misc project-specific ───────────────────────────────── */
.project-image, .project-video { max-width: 100%; height: auto; display: block; margin: 1.25rem 0; border-radius: var(--radius-sm); }

#bladeDesignForm { display: flex; flex-direction: column; margin: auto; width: fit-content; }

#airfoilCanvas {
    display: block;
    margin: auto;
    background: var(--white);
    padding: 1rem;
    min-width: 50%;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
}

#pointsTable { border-collapse: collapse; width: 100%; }
#pointsTable th, #pointsTable td { border: 1px solid var(--gray-200); padding: .5rem .75rem; text-align: center; }

.content-container { display: flex; gap: 1.5rem; flex-wrap: wrap; }

#gearResearchCanvas { display: block; background: var(--gray-100); position: relative; height: 100%; }
#canvas_controls { display: flex; position: absolute; left: 20px; top: 120px; z-index: 2; gap: .5rem; }

#uam_canvas { display: block; width: 100%; height: 100vh; }
#uam_project_div { display: flex; flex-direction: column; width: 100%; }
#uam_floating_nav { position: fixed; top: 5px; left: 5px; width: 90%; z-index: 200; }
#uam_floating_footer {
    background: var(--navy);
    border: 1px solid var(--navy-light);
    position: fixed; bottom: 5px; left: 5px;
    padding: .5rem .75rem;
    border-radius: var(--radius-sm);
    font-size: .8rem;
    color: #94b4cc;
    z-index: 200;
}

#small_footer { padding: 2rem; position: absolute; bottom: 0; width: 50vw; }

#clock_div, #money_div {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .4rem .85rem;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--navy);
}

.banner { display: block; background-size: contain; object-fit: contain; }
.rock { color: var(--navy-light); font-size: 1.5rem; font-weight: 700; }
.error-code { font-size: 5rem; font-weight: 700; color: var(--navy); }

details:hover { cursor: pointer; }
details summary:hover { color: var(--accent); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
    main { padding: 1.5rem 1rem; }
    header { padding: 1.5rem 1rem 0; }

    .flex-container { grid-template-columns: 1fr; }
    .interactive_dream { min-width: 0; }

    .toc { position: static; }
    .floating_toc { display: none; }

    .about-intro { flex-direction: column; }
    .about-intro img { max-width: 100%; }

    section { padding: 1.25rem; }

    .back-button-container { bottom: 1rem; right: 1rem; }

    footer { gap: 1.5rem; }

    nav, .nav_container { gap: 1px; }
    .navigation { padding: .5rem .85rem; font-size: .8125rem; }
}