/* ============================================================
   base.css — Zentrales Design-System ("eine Wahrheit").
   Wird site-weit VOR jeder Seiten-CSS geladen (functions.php).
   Enthaelt: Farb-/Groessen-Tokens, Reset, Typografie, Buttons,
   Nav + Footer. Hier – und nur hier – werden diese Grundlagen
   gepflegt; alle Seiten erben sie. Die assets/css/<slug>.css
   enthalten danach nur noch seiten-spezifisches Sektions-Layout.
   Werte 1:1 aus dem bisher in jeder Seiten-CSS duplizierten,
   inhaltlich identischen Mockup-Boilerplate.
   ============================================================ */

    :root {
      --white:      #FFFFFF;
      --sand:       #F7F4F0;
      --warm-100:   #EDE9E3;
      --warm-200:   #DDD8D0;
      --warm-300:   #C5BFB5;
      --warm-400:   #9E978C;
      --warm-500:   #7A7469;
      --warm-600:   #5C574F;
      --warm-700:   #3D3A36;
      --warm-800:   #2A2825;
      --warm-900:   #1A1917;
      --orange:       #E67508;
      --orange-hover:  #D06A06;
      --orange-soft:   #FDF3E8;
      --blue:         #2BABE3;
      --blue-soft:    #EBF6FC;
      --font-display:  'Syne', sans-serif;
      --font-serif:    'DM Sans', system-ui, sans-serif;
      --font-body:     'DM Sans', system-ui, sans-serif;
      --page-width:  1440px;
      --pad:         40px;
      --radius-sm:   12px;
      --radius-md:   20px;
      --radius-lg:   28px;
      --radius-xl:   40px;
      --radius-pill:  999px;
    }

    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    html { font-size: 16px; -webkit-font-smoothing: antialiased; }

    body {
      width: var(--page-width);
      margin: 0 auto;
      background: var(--white);
      color: var(--warm-600);
      font-family: var(--font-body);
      font-weight: 400;
      font-size: 16px;
      line-height: 1.7;
      overflow-x: hidden;
    }

    img { display: block; width: 100%; height: 100%; object-fit: cover; }
    a { color: inherit; text-decoration: none; }

    /* — TYPOGRAPHY — */
    .t-hero { font-family: var(--font-display); font-size: 128px; font-weight: 800; line-height: 0.88; letter-spacing: -4px; text-transform: uppercase; }
    .t-brand { font-family: var(--font-display); font-size: 180px; font-weight: 800; line-height: 0.85; letter-spacing: -6px; text-transform: uppercase; color: var(--warm-900); }
    .t-xl { font-family: var(--font-display); font-size: 64px; font-weight: 700; line-height: 1.0; letter-spacing: -2px; color: var(--warm-900); }
    .t-lg { font-family: var(--font-display); font-size: 44px; font-weight: 700; line-height: 1.1; letter-spacing: -1px; color: var(--warm-900); }
    .t-md { font-family: var(--font-display); font-size: 28px; font-weight: 600; line-height: 1.2; color: var(--warm-900); }
    .t-quote { font-family: var(--font-serif); font-size: 40px; font-weight: 300; font-style: italic; line-height: 1.4; color: var(--warm-800); }
    .t-editorial { font-family: var(--font-serif); font-size: 22px; font-weight: 400; line-height: 1.7; color: var(--warm-600); }
    .label { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: var(--warm-400); }
    .label-orange { color: var(--orange); }
    .text-lg { font-size: 18px; line-height: 1.8; color: var(--warm-500); font-weight: 300; }
    .text-md { font-size: 15px; line-height: 1.8; color: var(--warm-500); }
    .text-sm { font-size: 13px; line-height: 1.6; color: var(--warm-400); }

    /* — BUTTONS — */
    .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 14px; font-weight: 500; border: none; cursor: pointer; transition: all 0.3s ease; border-radius: var(--radius-pill); }
    .btn-primary { padding: 16px 36px; background: var(--warm-900); color: var(--white); }
    .btn-primary:hover { background: var(--warm-700); }
    .btn-accent { padding: 16px 36px; background: var(--orange); color: var(--white); }
    .btn-accent:hover { background: var(--orange-hover); }
    .btn-outline { padding: 14px 32px; background: transparent; color: var(--warm-800); border: 1.5px solid var(--warm-200); }
    .btn-outline:hover { border-color: var(--warm-800); }
    .btn-outline-light { padding: 14px 32px; background: transparent; color: var(--white); border: 1.5px solid rgba(255,255,255,0.3); }
    .btn-outline-light:hover { border-color: var(--white); background: rgba(255,255,255,0.1); }
    .btn-ghost { padding: 8px 0; background: none; color: var(--warm-800); font-weight: 500; position: relative; }
    .btn-ghost::after { content: ''; position: absolute; bottom: 4px; left: 0; width: 100%; height: 1px; background: var(--warm-300); transition: background 0.3s; }
    .btn-ghost:hover::after { background: var(--orange); }
    .arrow-icon { font-size: 18px; transition: transform 0.3s; }
    a:hover .arrow-icon { transform: translateX(3px); }

    /* — NAVIGATION — */
    .nav {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 28px var(--pad);
      max-width: var(--page-width);
      
    }
    .nav-logo img { height: 40px; width: auto; object-fit: contain; }
    .nav-links { display: flex; align-items: center; gap: 24px; list-style: none; background: rgba(255,255,255,0.1); backdrop-filter: blur(12px); padding: 12px 28px; border-radius: var(--radius-pill); border: 1px solid rgba(255,255,255,0.12); white-space: nowrap; }
    .nav-links a { font-size: 14px; font-weight: 400; color: rgba(255,255,255,0.7); transition: color 0.3s; }
    .nav-links a:hover, .nav-links a.active { color: var(--white); }
    .nav-cta { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; background: var(--white); color: var(--warm-900); font-size: 13px; font-weight: 600; border-radius: var(--radius-pill); transition: all 0.3s; white-space: nowrap; }
    .nav-cta:hover { background: var(--orange); color: var(--white); }
    .deco-star { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; font-size: 18px; color: var(--orange); }

    /* — FOOTER — */
    .footer { background: var(--warm-900); margin: 0 var(--pad); border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 80px 80px 40px; color: var(--warm-400); }
    .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 60px; margin-bottom: 80px; }
    .footer-brand img { height: 36px; width: auto; object-fit: contain; margin-bottom: 20px; }
    .footer-brand p { font-size: 14px; line-height: 1.8; color: var(--warm-300); max-width: 280px; }
    .ft-title { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--white); margin-bottom: 20px; }
    .ft-links { list-style: none; display: flex; flex-direction: column; gap: 12px; }
    .ft-links a, .ft-links li { font-size: 14px; color: var(--warm-300); transition: color 0.3s; }
    .ft-links a:hover { color: var(--white); }
    .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 12px; color: var(--warm-400); }
    .footer-bottom-links { display: flex; gap: 24px; }
    .footer-bottom-links a { color: var(--warm-400); }
    .footer-bottom-links a:hover { color: var(--white); }