/* ============ TOKENS ============ */
:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);

  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem;
  --space-12:3rem; --space-16:4rem; --space-20:5rem; --space-24:6rem; --space-32:8rem;

  --radius-sm:.375rem; --radius-md:.5rem; --radius-lg:.75rem; --radius-xl:1rem; --radius-full:9999px;
  --transition-interactive:180ms cubic-bezier(.16,1,.3,1);

  --content-narrow:660px; --content-default:980px; --content-wide:1200px;

  --font-display:'Fraunces','Georgia',serif;
  --font-body:'General Sans','Inter',system-ui,sans-serif;
}

/* Light (default) */
:root, [data-theme="light"] {
  --color-bg:#faf8f4;
  --color-surface:#fdfcf9;
  --color-surface-2:#ffffff;
  --color-surface-offset:#f1ede5;
  --color-divider:#e4ded3;
  --color-border:#d9d2c5;

  --color-text:#221f1a;
  --color-text-muted:#6c675e;
  --color-text-faint:#a9a399;
  --color-text-inverse:#faf8f4;

  --color-primary:#1f3a5f;
  --color-primary-hover:#16294a;
  --color-primary-active:#0f1d35;
  --color-primary-highlight:#d7dee8;

  --color-accent:#7d6b4f; /* warm taupe/gold for small details */

  --shadow-sm:0 1px 2px rgba(40,35,25,.06);
  --shadow-md:0 4px 14px rgba(40,35,25,.08);
  --shadow-lg:0 14px 36px rgba(40,35,25,.12);
}
[data-theme="dark"] {
  --color-bg:#15140f;
  --color-surface:#1b1a14;
  --color-surface-2:#201e17;
  --color-surface-offset:#211f18;
  --color-divider:#2a2820;
  --color-border:#3a382e;

  --color-text:#e9e6df;
  --color-text-muted:#9d988d;
  --color-text-faint:#6a665c;
  --color-text-inverse:#15140f;

  --color-primary:#8fb0d6;
  --color-primary-hover:#a9c4e3;
  --color-primary-active:#c2d6ec;
  --color-primary-highlight:#23303f;

  --color-accent:#c2ab83;

  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 4px 14px rgba(0,0,0,.4);
  --shadow-lg:0 14px 36px rgba(0,0,0,.5);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]){
    --color-bg:#15140f; --color-surface:#1b1a14; --color-surface-2:#201e17;
    --color-surface-offset:#211f18; --color-divider:#2a2820; --color-border:#3a382e;
    --color-text:#e9e6df; --color-text-muted:#9d988d; --color-text-faint:#6a665c;
    --color-text-inverse:#15140f; --color-primary:#8fb0d6; --color-primary-hover:#a9c4e3;
    --color-primary-active:#c2d6ec; --color-primary-highlight:#23303f; --color-accent:#c2ab83;
  }
}

/* ============ BASE ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;scroll-behavior:smooth;scroll-padding-top:5rem}
body{min-height:100dvh;line-height:1.65;font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);background:var(--color-bg)}
img,picture,video,svg{display:block;max-width:100%;height:auto}
ul[role="list"]{list-style:none}
input,button,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4{text-wrap:balance;line-height:1.15;font-family:var(--font-display);font-weight:560}
p,li,figcaption{text-wrap:pretty}
a{color:var(--color-primary);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:color-mix(in oklab,var(--color-primary) 22%,transparent)}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm)}
button{cursor:pointer;background:none;border:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
a,button,input,textarea,select{transition:color var(--transition-interactive),background var(--transition-interactive),border-color var(--transition-interactive),box-shadow var(--transition-interactive)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}

/* ============ LAYOUT ============ */
.wrap{width:min(100% - 2.5rem,var(--content-wide));margin-inline:auto}
.wrap-narrow{width:min(100% - 2.5rem,var(--content-narrow));margin-inline:auto}
.wrap-default{width:min(100% - 2.5rem,var(--content-default));margin-inline:auto}
section{padding-block:clamp(var(--space-12),8vw,var(--space-24))}
.eyebrow{font-family:var(--font-body);font-size:var(--text-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--color-accent);font-weight:600;margin-bottom:var(--space-3)}

/* ============ HEADER ============ */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--color-bg) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--color-divider)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);padding-block:var(--space-4)}
.brand{display:flex;align-items:center;gap:var(--space-3);font-family:var(--font-display);font-size:var(--text-lg);font-weight:600;color:var(--color-text)}
.brand:hover{text-decoration:none}
.brand .logo{width:34px;height:34px;flex:none;color:var(--color-primary)}
.brand .avatar{width:38px;height:38px;flex:none;border-radius:var(--radius-full);object-fit:cover;border:2px solid var(--color-border)}
.nav-links{display:flex;align-items:center;gap:var(--space-6);list-style:none}
.nav-links a{color:var(--color-text-muted);font-size:var(--text-sm);font-weight:500}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--color-text);text-decoration:none}
.theme-toggle{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-full);color:var(--color-text-muted);border:1px solid var(--color-border)}
.theme-toggle:hover{color:var(--color-text);background:var(--color-surface-offset)}
.menu-btn{display:none}

/* ============ HERO ============ */
.hero{padding-block:clamp(var(--space-16),10vw,var(--space-32))}
.hero-grid{display:grid;grid-template-columns:1.3fr .9fr;gap:clamp(var(--space-8),5vw,var(--space-20));align-items:center}
.hero h1{font-size:var(--text-2xl);font-weight:600;line-height:1.08;margin-bottom:var(--space-5)}
.hero .lede{font-size:var(--text-lg);color:var(--color-text-muted);max-width:48ch;margin-bottom:var(--space-8)}
.hero-portrait{border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);aspect-ratio:4/5;object-fit:cover;width:100%;border:1px solid var(--color-border)}
.btn-row{display:flex;gap:var(--space-4);flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:.7rem 1.3rem;border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:600}
.btn-primary{background:var(--color-primary);color:var(--color-text-inverse)}
.btn-primary:hover{background:var(--color-primary-hover);text-decoration:none}
.btn-ghost{border:1px solid var(--color-border);color:var(--color-text)}
.btn-ghost:hover{background:var(--color-surface-offset);text-decoration:none}

/* ============ SECTION HEADINGS ============ */
.section-head{margin-bottom:var(--space-10)}
.section-head h2{font-size:var(--text-xl);font-weight:560}
.section-head p{color:var(--color-text-muted);margin-top:var(--space-2);max-width:60ch}

/* ============ VALUES ============ */
.values-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--space-6)}
.value-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-8)}
.value-card .ico{width:40px;height:40px;color:var(--color-primary);margin-bottom:var(--space-4)}
.value-card h3{font-family:var(--font-body);font-weight:600;font-size:var(--text-lg);margin-bottom:var(--space-2)}
.value-card p{color:var(--color-text-muted);font-size:var(--text-sm)}

/* ============ BLOG CARDS ============ */
.posts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-8)}
.post-card{display:flex;flex-direction:column;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;transition:transform var(--transition-interactive),box-shadow var(--transition-interactive)}
.post-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.post-card a{color:inherit}.post-card a:hover{text-decoration:none}
.post-card .thumb{aspect-ratio:16/10;object-fit:cover;width:100%;background:var(--color-surface-offset)}
.post-card .body{padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3);flex:1}
.post-meta{display:flex;gap:var(--space-3);font-size:var(--text-xs);color:var(--color-text-faint);text-transform:uppercase;letter-spacing:.08em}
.post-card h3{font-family:var(--font-display);font-size:var(--text-lg);font-weight:560;line-height:1.25}
.post-card .excerpt{color:var(--color-text-muted);font-size:var(--text-sm)}
.post-card .more{margin-top:auto;font-size:var(--text-sm);font-weight:600;color:var(--color-primary)}

/* ============ ARTICLE ============ */
.article-hero{padding-block:clamp(var(--space-12),8vw,var(--space-20)) var(--space-8)}
.article-hero .post-meta{margin-bottom:var(--space-4)}
.article-hero h1{font-size:var(--text-2xl);font-weight:600;line-height:1.1}
.article-cover{border-radius:var(--radius-xl);margin-block:var(--space-10);box-shadow:var(--shadow-md);width:100%;aspect-ratio:16/9;object-fit:cover}
.prose{font-size:var(--text-base);color:var(--color-text)}
.prose p,.prose ul,.prose ol{max-width:68ch;margin-block:var(--space-5)}
.prose h2{font-size:var(--text-xl);margin-block:var(--space-10) var(--space-4)}
.prose h3{font-family:var(--font-body);font-weight:600;font-size:var(--text-lg);margin-block:var(--space-8) var(--space-3)}
.prose ul,.prose ol{padding-left:var(--space-6)}
.prose li{margin-block:var(--space-2)}
.prose blockquote{border-left:3px solid var(--color-primary);padding-left:var(--space-5);margin-block:var(--space-8);font-family:var(--font-display);font-size:var(--text-lg);color:var(--color-text);font-style:italic;max-width:62ch}
.prose figure{margin-block:var(--space-10)}
.prose figure img{border-radius:var(--radius-lg);width:100%}
.prose figcaption{font-size:var(--text-xs);color:var(--color-text-faint);margin-top:var(--space-2);text-align:center}
.video-embed{position:relative;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface-offset);border:1px solid var(--color-border);display:grid;place-items:center;text-align:center;padding:var(--space-8)}
.video-embed .ico{width:56px;height:56px;color:var(--color-primary);margin-bottom:var(--space-3)}
.video-embed p{color:var(--color-text-muted);font-size:var(--text-sm);max-width:42ch}

/* ============ FEATURE ENTRIES (Sport / Projekte) ============ */
.entry{display:grid;grid-template-columns:1fr 1fr;gap:clamp(var(--space-6),4vw,var(--space-12));align-items:center;padding-block:clamp(var(--space-8),4vw,var(--space-12))}
.entry + .entry{border-top:1px solid var(--color-divider)}
.entry.flip .entry-media{order:2}
.entry-body h3{font-family:var(--font-display);font-size:var(--text-xl);font-weight:560;margin-bottom:var(--space-3)}
.entry-body .kicker{font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent);font-weight:600;margin-bottom:var(--space-2)}
.entry-body p{color:var(--color-text-muted);margin-bottom:var(--space-4)}
.entry-media img{border-radius:var(--radius-lg);box-shadow:var(--shadow-md);width:100%;object-fit:cover}
.media-stack{display:flex;flex-direction:column;gap:var(--space-4)}
.media-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.media-row img{border-radius:var(--radius-md);box-shadow:var(--shadow-sm);aspect-ratio:4/3;object-fit:cover;width:100%}
.img-small{max-width:300px}
.value-list{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-2) var(--space-4);margin-top:var(--space-3)}
.value-list li{display:flex;gap:var(--space-2);align-items:baseline;font-size:var(--text-sm);color:var(--color-text)}
.value-list li span{color:var(--color-accent);font-weight:700;font-family:var(--font-display)}
.caption{font-size:var(--text-xs);color:var(--color-text-faint);margin-top:var(--space-2)}

/* ============ CONTACT FORM ============ */
.contact-form{display:grid;gap:var(--space-4);max-width:560px;margin:0 auto;text-align:left}
.field{display:flex;flex-direction:column;gap:var(--space-2)}
.field label{font-size:var(--text-sm);font-weight:600}
.field input,.field textarea{padding:.75rem 1rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-2);color:var(--color-text);font-size:var(--text-base)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-highlight)}
.field textarea{resize:vertical;min-height:130px}
.form-note{font-size:var(--text-xs);color:var(--color-text-faint);text-align:center}

/* ============ ABOUT ============ */
.about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(var(--space-8),5vw,var(--space-16));align-items:start}
.about-portrait{border-radius:var(--radius-xl);box-shadow:var(--shadow-md);position:sticky;top:6rem;aspect-ratio:4/5;object-fit:cover;width:100%}
.timeline{list-style:none;border-left:2px solid var(--color-divider);padding-left:var(--space-6);display:flex;flex-direction:column;gap:var(--space-8)}
.timeline li{position:relative}
.timeline li::before{content:"";position:absolute;left:calc(-1 * var(--space-6) - 6px);top:.45rem;width:11px;height:11px;border-radius:50%;background:var(--color-primary);box-shadow:0 0 0 4px var(--color-bg)}
.timeline .yr{font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent);font-weight:600}
.timeline h3{font-family:var(--font-body);font-weight:600;font-size:var(--text-lg);margin-top:var(--space-1)}
.timeline p{color:var(--color-text-muted);font-size:var(--text-sm);margin-top:var(--space-1)}

/* ============ CONTACT / CTA ============ */
.cta{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:clamp(var(--space-8),5vw,var(--space-16));text-align:center}
.cta h2{font-size:var(--text-xl);margin-bottom:var(--space-3)}
.cta p{color:var(--color-text-muted);max-width:50ch;margin:0 auto var(--space-6)}

/* ============ FOOTER ============ */
.site-footer{border-top:1px solid var(--color-divider);padding-block:var(--space-12);margin-top:var(--space-8)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:var(--space-6);flex-wrap:wrap;color:var(--color-text-muted);font-size:var(--text-sm)}
.footer-inner a{color:var(--color-text-muted)}
.footer-inner a:hover{color:var(--color-text)}

/* ============ RESPONSIVE ============ */
@media (max-width:820px){
  .hero-grid{grid-template-columns:1fr;text-align:left}
  .entry{grid-template-columns:1fr}
  .entry.flip .entry-media{order:0}
  .entry-media{max-width:480px}
  .value-list{grid-template-columns:1fr}
  .hero-portrait{max-width:340px}
  .about-grid{grid-template-columns:1fr}
  .about-portrait{position:static;max-width:340px}
  .nav-links{position:fixed;inset:0 0 0 auto;width:min(78%,320px);flex-direction:column;align-items:flex-start;background:var(--color-surface);padding:var(--space-20) var(--space-8);transform:translateX(100%);transition:transform .3s cubic-bezier(.16,1,.3,1);box-shadow:var(--shadow-lg);gap:var(--space-5)}
  .nav-links.open{transform:translateX(0)}
  .menu-btn{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-md);color:var(--color-text);z-index:60}
}