/* =====================================================================
   COMMON.CSS — gemeinsames Design-System, extrahiert aus dem bestehenden
   Template (20260609.html). Auf JEDER Seite der Website einbinden:
   <link rel="stylesheet" href="common.css">
   So bleibt Header, Footer, Farben & Typografie auf allen Seiten identisch.
   ===================================================================== */

:root{
  --navy:#0a1628;--navy-mid:#0f1e38;--navy-card:#132040;
  --teal:#0d9488;--teal-lt:#14b8a6;--teal-glow:rgba(13,148,136,.15);--teal-border:rgba(13,148,136,.28);
  --white:#fff;--body:rgba(255,255,255,.78);--muted:rgba(255,255,255,.44);--border:rgba(255,255,255,.08);
  --maxw:900px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Inter',sans-serif;background:var(--navy);color:var(--white);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
a{color:inherit;}

/* ─── HEADER ─── */
.site-header{background:#fff;border-bottom:1px solid #e5e7eb;box-shadow:0 1px 0 rgba(0,0,0,.06),0 2px 12px rgba(0,0,0,.08);}
.header-inner{max-width:1140px;margin:0 auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between;height:136px;flex-wrap:wrap;}
.header-logo img{height:120px;width:auto;display:block;}
.header-nav{display:flex;align-items:center;gap:24px;}
.header-nav a{font-size:13.5px;font-weight:500;color:#1e293b;text-decoration:none;transition:color .2s;white-space:nowrap;}
.header-nav a:hover{color:var(--teal);}
.header-nav a.active{color:var(--teal);font-weight:700;}
.header-cta{background:var(--teal) !important;color:#fff !important;padding:9px 18px;border-radius:5px;font-size:13px;font-weight:600;transition:background .2s;}
.header-cta:hover{background:#0f766e !important;}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:4px;}
.nav-toggle span{display:block;width:22px;height:2px;background:#1e293b;margin:5px 0;border-radius:2px;}

/* ─── BUTTONS ─── */
.btn-primary{display:inline-block;background:var(--teal);color:#fff;padding:15px 34px;border-radius:5px;font-weight:700;font-size:.95rem;text-decoration:none;box-shadow:0 4px 18px rgba(13,148,136,.30);transition:background .2s,transform .18s;border:none;cursor:pointer;}
.btn-primary:hover{background:#0f766e;transform:translateY(-2px);}
.btn-outline{display:inline-block;border:1px solid rgba(255,255,255,.22);color:#fff;padding:15px 28px;border-radius:5px;font-weight:500;font-size:.95rem;text-decoration:none;transition:border-color .2s,background .2s;}
.btn-outline:hover{border-color:var(--teal-lt);background:var(--teal-glow);}

/* ─── SECTION PATTERN ─── */
.section{padding:80px 32px;}
.section-alt{background:var(--navy-mid);}
.wrap{max-width:var(--maxw);margin:0 auto;}
.s-eye{font-size:10.5px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--teal-lt);margin-bottom:10px;display:block;}
.s-h{font-family:'Playfair Display',serif;font-size:clamp(1.65rem,3.8vw,2.55rem);font-weight:700;line-height:1.2;margin-bottom:14px;}
.s-h .hl{color:var(--teal-lt);}
.divider{width:48px;height:2px;background:linear-gradient(90deg,var(--teal),transparent);margin:16px 0 26px;}
.s-lead{font-size:.93rem;color:var(--body);max-width:600px;line-height:1.78;}

/* ─── HERO (generisch, für Unterseiten) ─── */
.hero{background:linear-gradient(155deg,#0a1628 0%,#0d1f3a 60%,#0a1628 100%);padding:72px 32px 56px;position:relative;overflow:hidden;}
.hero-inner{max-width:var(--maxw);margin:0 auto;}
.hero h1{font-family:'Playfair Display',serif;font-size:clamp(2rem,5vw,3.4rem);font-weight:900;line-height:1.1;margin-bottom:18px;letter-spacing:-.02em;}
.hero h1 .hl{color:var(--teal-lt);}
.hero-sub{font-size:clamp(.93rem,1.8vw,1.1rem);color:var(--body);max-width:620px;line-height:1.78;}
.breadcrumb{font-size:12.5px;color:var(--muted);margin-bottom:18px;}
.breadcrumb a{color:var(--teal-lt);text-decoration:none;}
.breadcrumb a:hover{text-decoration:underline;}

/* ─── FOOTER ─── */
footer{background:#060e1b;border-top:1px solid var(--border);padding:26px 32px;text-align:center;font-size:.76rem;color:var(--muted);}
footer a{color:var(--muted);text-decoration:none;transition:color .2s;}
footer a:hover{color:var(--teal-lt);}
footer .sep{margin:0 8px;opacity:.35;}

/* ─── MOBILE NAV ─── */
@media(max-width:768px){
  .header-inner{padding:0 16px;height:auto;min-height:90px;}
  .header-logo img{height:72px;}
  .header-nav{display:none;width:100%;}
  .header-nav.open{display:flex;flex-direction:column;align-items:flex-start;width:100%;order:3;flex-basis:100%;background:#fff;padding:14px 20px 18px;border-top:1px solid #e5e7eb;gap:12px;}
  .nav-toggle{display:block;}
  .hero{padding:44px 16px 36px;}
  .section{padding:52px 16px;}
}