/* ============================================================
   NEUSTART-Serie — base.css
   Zentrales Chrome: Fonts, Tokens, Reset, Navigation, Footer,
   Consent-Banner, Layout-Primitive. Wird auf JEDER Seite via
   header.php eingebunden. Seitenspezifisches CSS bleibt inline
   in der jeweiligen Seite.
   ============================================================ */

/* — Web Fonts — */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/playfair-display-700.woff2') format('woff2');}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:900;font-display:swap;src:url('/fonts/playfair-display-900.woff2') format('woff2');}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:700;font-display:swap;src:url('/fonts/playfair-display-700italic.woff2') format('woff2');}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:300;font-display:swap;src:url('/fonts/source-sans-3-300.woff2') format('woff2');}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/source-sans-3-400.woff2') format('woff2');}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/source-sans-3-600.woff2') format('woff2');}

/* — Design-Tokens — */
:root{
  --db:#1A2E4A; --or:#F28C28; --or-soft:#D69960; --or-light:#FDF0E0;
  --white:#FFFFFF; --gray:#666666; --light:#F6F5F1; --border:#E0E8F0;
}

/* — Reset / Basis — */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:50px;}
body{font-family:'Source Sans 3',sans-serif;color:var(--db);background:var(--light);overflow-x:hidden;}

/* — Navigation — */
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(26,46,74,0.97);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:space-between;padding:0 40px;height:64px;border-bottom:2px solid var(--or);}
.nav-logo{font-family:'Playfair Display',serif;font-size:1.3rem;font-weight:900;color:var(--white);letter-spacing:0.05em;text-decoration:none;}
.nav-logo span{color:var(--or);}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;width:44px;height:44px;}
.nav-toggle span{display:block;width:26px;height:2px;background:var(--or);margin:5px auto;transition:transform 0.3s,opacity 0.3s;}
.nav-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.active span:nth-child(2){opacity:0;}
.nav-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
nav ul{list-style:none;display:flex;gap:28px;margin:0;padding:0;}
nav ul a{color:rgba(255,255,255,0.8);text-decoration:none;font-size:0.85rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;transition:color 0.2s;}
nav ul a:hover{color:var(--or);}
nav > ul{align-items:center;}
nav > ul > li:not(.nav-dropdown) > a{position:relative;top:-1px;}
.nav-dropdown{position:relative;}
.nav-dropdown > a{display:inline-block;padding:23px 0;}
.nav-dropdown > a::after{content:"";display:inline-block;margin-left:7px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;vertical-align:middle;opacity:0.7;}
.nav-submenu{display:none;position:absolute;top:100%;left:-18px;background:rgba(26,46,74,0.98);list-style:none;min-width:210px;padding:6px 0;margin:0;border:1px solid rgba(255,255,255,0.1);border-top:2px solid var(--or);}
.nav-dropdown:hover .nav-submenu,.nav-dropdown:focus-within .nav-submenu{display:block;}
.nav-submenu li{list-style:none;}
.nav-submenu a{display:block;padding:11px 18px;}
nav ul a.active{color:var(--or);}
.nav-search svg{vertical-align:middle;display:inline-block;}
.nav-search-label{display:none;}

/* — Layout-Primitive — */
.container{max-width:900px;margin:0 auto;}
.section{padding:70px 40px 90px;}
.section-label{font-size:0.75rem;color:var(--or);letter-spacing:0.15em;text-transform:uppercase;font-weight:600;margin-bottom:12px;}
.section-title{font-family:'Playfair Display',serif;font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:900;line-height:1.15;color:var(--db);margin-bottom:8px;}
.divider{width:60px;height:4px;background:var(--or);margin:24px 0 32px;}
.section-intro{font-size:1.05rem;color:var(--gray);line-height:1.8;margin-bottom:8px;}

/* — Hero (Standard-Inhaltsseite; Startseite überschreibt inline) — */
.hero{background:var(--db);padding:120px 40px 80px;position:relative;overflow:hidden;}
.hero-inner{max-width:1100px;margin:0 auto;position:relative;}
.hero-badge{display:inline-block;background:var(--or);color:var(--white);font-size:0.75rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;padding:6px 16px;margin-bottom:20px;}
.hero h1{font-family:'Playfair Display',serif;font-size:clamp(2rem,4vw,3.4rem);font-weight:900;line-height:1.1;color:var(--white);margin-bottom:24px;}
.hero h1 em{font-style:italic;color:var(--or);}
.hero-sub{font-size:1.15rem;color:rgba(255,255,255,0.7);line-height:1.8;max-width:640px;}

/* — CTA / Buttons — */
.cta-section{background:var(--or);padding:80px 40px;text-align:center;}
.cta-title{font-family:'Playfair Display',serif;font-size:clamp(1.8rem,3vw,2.4rem);font-weight:900;color:var(--white);margin-bottom:16px;}
.cta-sub{font-size:1.1rem;color:rgba(255,255,255,0.85);margin-bottom:40px;}
.btn-white{display:inline-block;background:var(--white);color:var(--or);padding:14px 36px;font-size:0.95rem;font-weight:600;letter-spacing:0.04em;text-decoration:none;transition:all 0.2s;border:2px solid var(--white);margin:0 8px 12px;}
.btn-white:hover{background:transparent;color:var(--white);}
.btn-outline-white{display:inline-block;background:transparent;color:var(--white);padding:14px 36px;font-size:0.95rem;font-weight:600;letter-spacing:0.04em;text-decoration:none;transition:all 0.2s;border:2px solid rgba(255,255,255,0.6);margin:0 8px 12px;}
.btn-outline-white:hover{border-color:var(--white);}

/* — Footer — */
footer{background:var(--db);color:rgba(255,255,255,0.7);padding:40px 40px 32px;}
.footer-inner{max-width:1100px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;font-size:0.82rem;}
.footer-logo{font-family:'Playfair Display',serif;font-size:1.1rem;font-weight:900;color:var(--white);}
.footer-logo span{color:var(--or);}
.footer-links{display:flex;gap:24px;flex-wrap:wrap;}
.footer-links a{color:rgba(255,255,255,0.5);text-decoration:none;transition:color 0.2s;}
.footer-links a:hover{color:var(--or);}

/* — Animation — */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
.hero-badge{animation:fadeUp 0.4s ease both;}
.hero h1{animation:fadeUp 0.4s 0.1s ease both;}
.hero-sub{animation:fadeUp 0.4s 0.2s ease both;}

/* — Consent-Banner — */
#ns-consent-banner{position:fixed;bottom:0;left:0;right:0;background:rgba(26,46,74,0.97);backdrop-filter:blur(8px);border-top:2px solid var(--or);padding:16px 24px;z-index:1000;font-family:'Source Sans 3',sans-serif;transform:translateY(100%);transition:transform 0.4s ease;}
#ns-consent-banner.visible{transform:translateY(0);}
.ns-consent-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.ns-consent-text{font-size:0.9rem;line-height:1.5;flex:1;min-width:240px;color:rgba(255,255,255,0.85);}
.ns-consent-text a{color:var(--or);text-decoration:underline;}
.ns-consent-text a:hover{color:var(--white);}
.ns-consent-buttons{display:flex;gap:12px;flex-shrink:0;}
.ns-consent-btn{padding:10px 24px;font-size:0.85rem;font-weight:600;letter-spacing:0.04em;cursor:pointer;transition:all 0.2s;font-family:inherit;border:2px solid transparent;}
.ns-consent-accept{background:var(--or);color:var(--white);border-color:var(--or);}
.ns-consent-accept:hover{background:transparent;color:var(--or);}
.ns-consent-reject{background:transparent;color:var(--white);border-color:rgba(255,255,255,0.4);}
.ns-consent-reject:hover{border-color:var(--white);}

/* — Responsive (universelle Teile) — */
@media (max-width:768px){
  nav{padding:0 20px;}
  nav ul{display:none;position:fixed;top:64px;left:0;right:0;background:rgba(26,46,74,0.98);flex-direction:column;padding:12px 20px 20px;gap:0;border-bottom:2px solid var(--or);max-height:calc(100vh - 64px);overflow-y:auto;}
  nav ul.active{display:flex;}
  nav ul li{width:100%;list-style:none;}
  nav ul a{display:block;padding:16px 12px;border-bottom:1px solid rgba(255,255,255,0.08);font-size:0.95rem;}
  nav ul li:last-child a{border-bottom:none;}
  .nav-toggle{display:block;}
  nav > ul{align-items:stretch;}
  nav > ul > li:not(.nav-dropdown) > a{top:0;}
  .nav-dropdown > a{padding:16px 12px;}
  .nav-dropdown > a::after{content:none;}
  .nav-submenu{display:block;position:static;background:transparent;border:none;min-width:0;padding:0;max-height:none;}
  .nav-submenu a{padding:12px 12px 12px 34px;font-size:0.85rem;color:rgba(255,255,255,0.6);}
  .nav-search-label{display:inline;margin-left:10px;}
  .nav-search svg{width:15px;height:15px;}
  .hero{padding:100px 20px 60px;}
  .section{padding:50px 20px 70px;}
  .cta-section{padding:60px 20px;}
}

/* — Brotkrumen-Leiste (sichtbar; Standard: hell auf dunklem Hero) — */
.breadcrumb{font-size:0.78rem;letter-spacing:0.03em;margin-bottom:18px;}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:0;margin:0;padding:0;}
.breadcrumb li{display:flex;align-items:center;}
.breadcrumb li:not(:last-child)::after{content:'\203A';margin:0 10px;color:var(--or);}
.breadcrumb a{color:rgba(255,255,255,0.6);text-decoration:none;transition:color 0.2s;}
.breadcrumb a:hover{color:var(--or);}
.breadcrumb li:last-child span{color:rgba(255,255,255,0.85);font-weight:600;}
/* dunkle Variante für Seiten ohne dunklen Hero: <div class="breadcrumb breadcrumb-dark"> */
.breadcrumb-dark a{color:var(--gray);}
.breadcrumb-dark li:last-child span{color:var(--db);}
