/* ============================================================
   Royal Rangers Rostock — Entwurf F
   Gemeinsame Basis für alle Seiten.
   Seitenspezifisches CSS steht im <style> der jeweiligen Seite.
   ============================================================ */

:root{
  --gelb:#FCE604; --rot:#E3000F; --schwarz:#1A1A18;
  --braun:#742B20; --beige:#AEA97D; --blau:#1E398F; --blau-a:#407A8C;
  --nacht:#0E1626; --nacht-2:#141F33;
  --kraft:#EFE7D3; --kraft-d:#E2D7BC; --creme:#FFFCF4;
  --grau:#5E594D;
  --head:"Playfair Display",Georgia,serif;
  --body:"Libre Franklin",system-ui,-apple-system,"Segoe UI",sans-serif;
  --hand:"Caveat","Segoe Script",cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--creme);color:var(--schwarz);line-height:1.62;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{width:min(1180px,92vw);margin-inline:auto}

/* ---- Entwurfs-Leiste (fliegt beim echten Bau raus) ---- */
.draftbar{position:fixed;top:0;left:0;right:0;z-index:99;background:#000;color:#fff;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;padding:7px 14px;display:flex;justify-content:space-between;gap:12px}
.draftbar a{color:var(--gelb);text-decoration:none}
.draftbar b{color:var(--gelb)}

/* ---- Header ---- */
header{position:absolute;top:34px;left:0;right:0;z-index:30}
@media(max-width:700px){header{top:64px}}
.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 0;gap:20px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:#fff}
.brand img{width:56px;height:56px;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(0,0,0,.6))}
.brand .t1{display:block;font-family:var(--head);font-weight:800;font-size:19px;line-height:1.1}
.brand .t2{display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;opacity:.72;margin-top:4px}
.nav ul{display:flex;gap:28px;list-style:none;font-size:14px;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.nav ul a{text-decoration:none;color:#fff;opacity:.85;padding-bottom:4px;border-bottom:2px solid transparent}
.nav ul a:hover{opacity:1;border-color:var(--gelb)}
.nav ul a.active{opacity:1;border-color:var(--gelb)}
@media(max-width:1000px){.nav ul{display:none}}

/* Header auf Unterseiten: fest im Fluss, dunkler Grund statt Hero darunter */
header.solid{position:static;background:var(--nacht);padding-top:28px}
@media(max-width:700px){header.solid{padding-top:56px}}

/* ---- Kopfbanner der Unterseiten ---- */
.subhero{background:var(--nacht);color:#F2EFE9;padding:clamp(40px,6vw,78px) 0 clamp(52px,7vw,92px);
  position:relative;overflow:hidden}
.subhero::before{content:"";position:absolute;right:-140px;top:50%;transform:translateY(-50%);
  width:460px;height:460px;background:url("../logo/Emblem_Weiss.png") center/contain no-repeat;
  opacity:.055;pointer-events:none}
.subhero .kicker{font-family:var(--hand);font-size:clamp(24px,3.4vw,38px);color:var(--gelb);
  transform:rotate(-1deg);display:inline-block}
.subhero h1{font-family:var(--head);font-weight:900;font-size:clamp(34px,6.4vw,74px);line-height:.98;
  letter-spacing:-.02em;text-transform:uppercase;margin-top:4px;max-width:18ch}
.subhero p{margin-top:20px;max-width:56ch;font-size:clamp(16px,1.9vw,19px);color:#C9C4B9;position:relative;z-index:2}

/* ---- Brotkrumen ---- */
.crumbs{background:var(--kraft-d);font-size:13px;padding:11px 0;letter-spacing:.06em}
.crumbs a{text-decoration:none;font-weight:600}
.crumbs a:hover{color:var(--braun)}
.crumbs span{opacity:.6;margin:0 8px}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 30px;font-weight:800;
  font-size:14px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border:2px solid transparent;transition:.16s}
.btn-primary{background:var(--gelb);color:var(--schwarz)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(252,230,4,.25)}
.btn-ghost{border-color:rgba(255,255,255,.45);color:#fff}
.btn-ghost:hover{border-color:var(--gelb);color:var(--gelb)}
.btn-dark{background:var(--schwarz);color:var(--gelb)}
.btn-dark:hover{background:var(--braun);color:#fff}

/* ---- Abschnitte ---- */
section{padding:clamp(60px,8vw,116px) 0}
section.tight{padding:clamp(44px,5.5vw,76px) 0}
.eyebrow{display:inline-block;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:800;
  color:#fff;background:var(--braun);padding:6px 16px;border-radius:999px;margin-bottom:18px}
h2{font-family:var(--head);font-weight:900;font-size:clamp(30px,4.8vw,58px);line-height:1.02;
  letter-spacing:-.015em;text-transform:uppercase}
h3{font-size:20px;font-weight:800}
.sub{max-width:56ch;margin-top:18px;font-size:17px;color:var(--grau)}
.center{text-align:center}.center .sub{margin-inline:auto}
.kraftzone{background:var(--kraft);
  background-image:radial-gradient(circle at 15% 20%,rgba(255,255,255,.55) 0,transparent 42%),
    repeating-linear-gradient(48deg,rgba(116,43,32,.035) 0 2px,transparent 2px 5px)}

/* ---- Fließtext ---- */
.prose{max-width:68ch}
.prose p{margin-top:18px;font-size:17.5px}
.prose p:first-child{margin-top:0}
.prose h3{font-family:var(--head);font-size:clamp(22px,2.8vw,30px);font-weight:800;margin-top:44px;
  text-transform:uppercase;letter-spacing:-.01em}
.prose h4{font-size:15px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;
  margin-top:32px;color:var(--braun)}
.prose ul{margin-top:16px;padding-left:22px}
.prose li{margin-top:9px;font-size:17px}
.prose a{font-weight:600;text-decoration:underline;text-decoration-color:var(--gelb);
  text-decoration-thickness:3px;text-underline-offset:3px}
.prose a:hover{color:var(--braun)}
.prose strong{font-weight:800}

/* Hervorgehobener Kasten im Fließtext */
.note{margin-top:26px;background:var(--kraft);border-left:8px solid var(--gelb);padding:20px 24px}
.note p{margin-top:8px;font-size:16.5px}
.note p:first-child{margin-top:0}
.note b{font-weight:800}

/* ---- Schluss-CTA ---- */
.final{background:var(--creme);text-align:center}
.finalbox{background:var(--gelb);border:3px solid var(--schwarz);padding:clamp(38px,5.5vw,74px);
  box-shadow:10px 11px 0 var(--braun);position:relative}
.finalbox::after{content:"";position:absolute;inset:12px;border:2px dashed rgba(26,26,24,.38);pointer-events:none}
.finalbox .hand{font-family:var(--hand);font-size:clamp(28px,3.8vw,44px);color:var(--braun);
  transform:rotate(-1deg);display:inline-block}
.finalbox p{max-width:52ch;margin:16px auto 0;font-size:18px}
.finalbox .btn{margin-top:30px}
.kontaktzeile{margin-top:26px;font-size:15px;color:#403C33;position:relative;z-index:2}
.kontaktzeile a{font-weight:700}

/* ---- Footer ---- */
footer{background:#080D16;padding:64px 0 40px;font-size:15px;color:#8C8880}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:44px}
footer img{width:130px;margin-bottom:18px}
footer h4{color:#E6E2DA;font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:14px}
footer a{color:#8C8880;text-decoration:none;display:block;padding:3px 0}
footer a:hover{color:var(--gelb)}
.fbot{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08);font-size:12px}
@media(max-width:760px){.fgrid{grid-template-columns:1fr}}

/* ---- Baustellen-Marker (nur im Entwurf, fliegt beim Bau raus) ---- */
.baustelle{margin-top:26px;border:2px dashed var(--rot);background:#FFF4F4;padding:16px 20px;font-size:15px}
.baustelle b{display:block;color:var(--rot);font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;font-weight:800;margin-bottom:6px}
.baustelle p{margin-top:6px}
.baustelle p:first-of-type{margin-top:0}

/* ---- Zweispalter für Unterseiten ---- */
.split{display:grid;grid-template-columns:1.35fr .95fr;gap:clamp(34px,5vw,68px);align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.aside{background:var(--kraft);border:2px solid var(--schwarz);padding:26px 26px 28px}
.aside h4{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:var(--braun)}
.aside h4+*{margin-top:12px}
.aside dl div{display:flex;justify-content:space-between;gap:14px;padding:10px 0;
  border-bottom:1px dashed #C9C2AE;flex-wrap:wrap}
.aside dl div:last-child{border-bottom:0}
.aside dt{font-weight:700;font-size:15px}
.aside dd{font-size:15px;color:var(--grau);text-align:right}