/* ── Schriften, self-hosted, kein CDN ─────────────────────────────── */
@font-face{font-family:Manrope;src:url(/fonts/manrope-var.woff2)format("woff2");
 font-weight:200 800;font-display:swap;
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Manrope;src:url(/fonts/manrope-var-ext.woff2)format("woff2");
 font-weight:200 800;font-display:swap;
 unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;src:url(/fonts/inter-var.woff2)format("woff2");
 font-weight:100 900;font-display:swap;
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;src:url(/fonts/inter-var-ext.woff2)format("woff2");
 font-weight:100 900;font-display:swap;
 unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ── Grundwerte ───────────────────────────────────────────────────── */
:root{
 --tinte:#0a1f2f;          /* aus dem CSS der alten Seite */
 --tinte-80:#14303f;
 --tinte-60:#3c5566;
 --tinte-40:#6b8090;
 --gold:#c8952f;           /* aus dem Logo */
 --gold-hell:#e8b95c;
 /* Das Logo-Gold hat auf hellem Grund nur 2,5:1 Kontrast und ist damit für
    Text zu schwach. Diese abgedunkelte Fassung kommt auf 4,6:1 und wird
    überall dort benutzt, wo Goldtext auf heller Fläche steht. */
 --gold-tief:#8a6414;
 --aqua:#217886;
 --aqua-hell:#e6f2f3;
 --papier:#fff;
 --papier-warm:#f7f6f3;
 --linie:#e3e1dc;
 --schatten:0 1px 2px rgba(10,31,47,.06),0 8px 24px -12px rgba(10,31,47,.18);
 --breit:1200px;
 --schmal:760px;
 --rund:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--tinte);
 font:400 clamp(1rem,.97rem + .16vw,1.075rem)/1.68 Inter,system-ui,sans-serif;
 -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--aqua);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--tinte)}
h1,h2,h3,h4{font-family:Manrope,system-ui,sans-serif;line-height:1.15;
 letter-spacing:-.021em;margin:0 0 .5em;text-wrap:balance}
h1{font-weight:800;font-size:clamp(2.05rem,1.5rem + 2.4vw,3.5rem)}
h2{font-weight:700;font-size:clamp(1.55rem,1.28rem + 1.15vw,2.3rem);margin-top:0}
h3{font-weight:700;font-size:clamp(1.15rem,1.07rem + .38vw,1.4rem)}
p{margin:0 0 1.05em;text-wrap:pretty}
ul,ol{margin:0 0 1.15em;padding-left:1.3em}
li{margin-bottom:.45em}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:3px}

.huelle{width:min(100% - 2.5rem,var(--breit));margin-inline:auto}
.schmal{width:min(100% - 2.5rem,var(--schmal));margin-inline:auto}
.abschnitt{padding:clamp(3.5rem,2.4rem + 4vw,6.5rem) 0}
.abschnitt--eng{padding:clamp(2.5rem,1.9rem + 2.6vw,4.25rem) 0}
.warm{background:var(--papier-warm)}
.dunkel{background:var(--tinte);color:#eef3f6}
.dunkel h2,.dunkel h3{color:#fff}
.dunkel a{color:var(--gold-hell)}

/* Überzeile über den Überschriften, das wiederkehrende Gestaltungsmittel */
.ueberzeile{font:600 .755rem/1 Manrope,sans-serif;letter-spacing:.15em;
 text-transform:uppercase;color:var(--gold);margin:0 0 .95rem;display:flex;
 align-items:center;gap:.6rem}
.ueberzeile::before{content:"";width:26px;height:2px;background:var(--gold);flex:none}
.dunkel .ueberzeile{color:var(--gold-hell)}
.dunkel .ueberzeile::before{background:var(--gold-hell)}

/* ── Kopf ─────────────────────────────────────────────────────────── */
.rand{background:var(--tinte);color:#c3d2da;font-size:.815rem}
.rand .huelle{display:flex;justify-content:space-between;align-items:center;
 gap:1rem;min-height:40px;flex-wrap:wrap}
.rand a{color:#c3d2da;text-decoration:none}
.rand a:hover{color:#fff}
.rand__gebiet{opacity:.75}
.rand__kontakt{display:flex;gap:1.35rem;align-items:center}

.kopf{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.93);
 backdrop-filter:blur(12px);border-bottom:1px solid var(--linie)}
.kopf .huelle{display:flex;align-items:center;gap:1.5rem;min-height:76px}
.marke{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:inherit;flex:none}
.marke img{width:44px;height:auto}
.marke__wort{font:800 1.16rem/1 Manrope,sans-serif;letter-spacing:-.02em}
.marke__zusatz{display:block;font:500 .655rem/1.3 Inter,sans-serif;
 letter-spacing:.07em;text-transform:uppercase;color:var(--tinte-40);margin-top:.2rem}
.menue{margin-left:auto;display:flex;align-items:center;gap:.35rem}
.menue a{font:600 .93rem/1 Manrope,sans-serif;color:var(--tinte);text-decoration:none;
 padding:.62rem .78rem;border-radius:8px}
.menue a:hover{background:var(--papier-warm)}
.menue a[aria-current=page]{color:var(--aqua);background:var(--aqua-hell)}
.kopf__cta{background:var(--gold);color:var(--tinte)!important;padding:.68rem 1.1rem!important;
 border-radius:9px;font-weight:700!important}
.kopf__cta:hover{background:var(--gold-hell)}

/* Menü auf kleinen Schirmen: ein echtes details-Element, kein Skript */
.klapp{margin-left:auto}
.klapp>summary{list-style:none;cursor:pointer;display:flex;align-items:center;
 gap:.5rem;padding:.6rem .8rem;border:1px solid var(--linie);border-radius:9px;
 font:600 .9rem/1 Manrope,sans-serif}
.klapp>summary::-webkit-details-marker{display:none}
.klapp[open]>summary{background:var(--papier-warm)}
.klapp__inhalt{position:absolute;right:1.25rem;left:1.25rem;margin-top:.6rem;
 background:#fff;border:1px solid var(--linie);border-radius:var(--rund);
 box-shadow:var(--schatten);padding:.6rem;display:grid;gap:.15rem}
.klapp__inhalt a{padding:.78rem .85rem;border-radius:8px;text-decoration:none;
 color:var(--tinte);font:600 .96rem/1 Manrope,sans-serif}
.klapp__inhalt a:hover{background:var(--papier-warm)}

/* ── Schaltflächen ────────────────────────────────────────────────── */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
 padding:.92rem 1.5rem;border-radius:10px;font:700 .985rem/1 Manrope,sans-serif;
 text-decoration:none;border:1.5px solid transparent;transition:transform .12s ease,background .18s ease}
.knopf:active{transform:translateY(1px)}
.knopf--gold{background:var(--gold);color:var(--tinte)}
.knopf--gold:hover{background:var(--gold-hell);color:var(--tinte)}
.knopf--rand{border-color:currentColor;color:var(--tinte)}
.knopf--rand:hover{background:var(--tinte);color:#fff}
/* Der Umriss-Knopf nimmt seine Farbe vom Grund: dunkel auf hell, hell auf
   dunkel. Beim Umbau des Aufmachers von dunkel auf hell muss diese Regel
   mitwandern, sonst steht der Knopf unsichtbar auf gleichfarbigem Grund.
   Der Aufmacher ist jetzt hell und braucht deshalb keine Sonderregel mehr. */
.dunkel .knopf--rand{color:#eef3f6}
.dunkel .knopf--rand:hover{background:#fff;color:var(--tinte)}
.knopf--wa{background:#25d366;color:#04310f}
.knopf--wa:hover{background:#4ade80;color:#04310f}
.knopfreihe{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem}

/* ── Aufmacher ────────────────────────────────────────────────────── */
/* Heller Aufmacher. Der Verlauf geht von einem kühlen Hauch oben in warmes
   Papier und endet weiß, damit der Übergang zum folgenden Abschnitt bruchlos
   ist. Eine flache Goldlinie am oberen Rand hält die Verbindung zur Marke. */
.auf{position:relative;color:var(--tinte);overflow:hidden;
 background:linear-gradient(168deg,#e9f1f3 0%,var(--papier-warm) 52%,#fff 100%);
 border-top:3px solid var(--gold)}
.auf__raster{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(2rem,1rem + 4vw,4.5rem);
 align-items:center;padding:clamp(3.25rem,2.2rem + 4vw,5.75rem) 0}
.auf h1{color:var(--tinte);margin-bottom:.6rem}
.auf__vor{font-size:clamp(1.06rem,1rem + .3vw,1.22rem);color:var(--tinte-60);max-width:52ch}
.auf .ueberzeile{color:var(--gold-tief)}
.auf .ueberzeile::before{background:var(--gold-tief)}
.auf__bild{position:relative;border-radius:var(--rund);overflow:hidden;
 box-shadow:0 26px 54px -30px rgba(10,31,47,.5);aspect-ratio:3/2}
.auf__bild img{width:100%;height:100%;object-fit:cover}
.auf__marker{position:absolute;left:0;right:0;bottom:0;padding:1.6rem 1.4rem .95rem;
 background:linear-gradient(transparent,rgba(10,31,47,.86));font:600 .84rem/1.4 Manrope,sans-serif;color:#fff}
.auf--klein .auf__raster{padding:clamp(2.5rem,1.9rem + 2.4vw,4rem) 0}

/* Merkmalzeile unter dem Aufmacher */
/* Steht auf hellem Grund und braucht deshalb einen kräftigeren Schatten als
   früher auf der dunklen Fläche, sonst verschwimmt die Karte mit dem Verlauf. */
.merkmale{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linie);
 border:1px solid var(--linie);border-radius:var(--rund);overflow:hidden;margin-top:-2.6rem;
 position:relative;z-index:5;
 box-shadow:0 1px 2px rgba(10,31,47,.05),0 18px 40px -22px rgba(10,31,47,.35)}
.merkmale div{background:#fff;padding:1.35rem 1.25rem}
.merkmale dt{font:800 1.42rem/1 Manrope,sans-serif;color:var(--aqua);margin-bottom:.3rem}
.merkmale dd{margin:0;font-size:.885rem;color:var(--tinte-60);line-height:1.5}

/* ── Karten ───────────────────────────────────────────────────────── */
.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:1.4rem}
.karte{background:#fff;border:1px solid var(--linie);border-radius:var(--rund);
 overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s ease,transform .2s ease}
.karte:hover{box-shadow:var(--schatten);transform:translateY(-2px)}
.karte__bild{aspect-ratio:3/2;overflow:hidden;background:var(--papier-warm)}
.karte__bild img{width:100%;height:100%;object-fit:cover}
.karte__text{padding:1.35rem 1.4rem 1.5rem;display:flex;flex-direction:column;flex:1}
.karte h3{margin-bottom:.45rem;font-size:1.14rem}
.karte p{color:var(--tinte-60);font-size:.945rem;margin-bottom:1.1rem}
.karte__mehr{margin-top:auto;font:700 .9rem/1 Manrope,sans-serif;color:var(--aqua);
 text-decoration:none;display:inline-flex;align-items:center;gap:.4rem}
.karte__mehr::after{content:"→";transition:transform .15s ease}
.karte:hover .karte__mehr::after{transform:translateX(3px)}
.marke-neu{display:inline-block;background:var(--gold);color:var(--tinte);
 font:700 .68rem/1 Manrope,sans-serif;letter-spacing:.08em;text-transform:uppercase;
 padding:.32rem .55rem;border-radius:5px;margin-bottom:.6rem;align-self:flex-start}

/* Textkacheln ohne Bild */
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1.1rem;margin:1.8rem 0}
.kachel{background:#fff;border:1px solid var(--linie);border-left:3px solid var(--aqua);
 border-radius:10px;padding:1.3rem 1.35rem;text-decoration:none;color:inherit;display:block}
.kachel:hover{border-left-color:var(--gold);box-shadow:var(--schatten);color:inherit}
.kachel h3{font-size:1.06rem;margin-bottom:.4rem}
.kachel p{color:var(--tinte-60);font-size:.925rem;margin:0}

/* ── Firmenvideo ──────────────────────────────────────────────────── */
/* Kein autoplay und kein loop (Hausregel). Das Video trägt Ton, wird also
   bewusst gestartet und bekommt deshalb Bedienelemente. preload="none" hält
   die 6,9 MB aus dem ersten Seitenaufbau heraus, geladen wird erst beim Klick.
   Das Poster ist ein WebP und damit das, was der Seitenaufbau wirklich kostet. */
.film{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.8rem,1rem + 3vw,3.4rem);
 align-items:center}
.film__rahmen{position:relative;border-radius:var(--rund);overflow:hidden;
 background:var(--tinte);box-shadow:0 26px 54px -30px rgba(10,31,47,.5);aspect-ratio:16/9}
.film__rahmen video{width:100%;height:100%;display:block;object-fit:cover;background:var(--tinte)}
.film p{color:var(--tinte-60)}
.dunkel .film p{color:#b9cbd6}
.film__hinweis{font-size:.85rem;color:var(--tinte-40);margin-top:1.2rem}
@media(max-width:860px){.film{grid-template-columns:1fr}}

/* ── Grundsätze ───────────────────────────────────────────────────── */
.saetze{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:1.6rem 2.2rem}
.satz{border-top:2px solid var(--gold);padding-top:1.1rem}
.satz h3{font-size:1.04rem;margin-bottom:.35rem}
.satz p{font-size:.925rem;color:var(--tinte-60);margin:0}
.dunkel .satz p{color:#b9cbd6}

/* ── Inhaltsblöcke ────────────────────────────────────────────────── */
.inhalt{max-width:var(--schmal)}
.inhalt h2{margin-top:2.9rem}
.inhalt h2:first-child{margin-top:0}
.inhalt figure{margin:2.2rem 0}
.inhalt figure img{border-radius:var(--rund)}
.inhalt figcaption{font-size:.85rem;color:var(--tinte-40);margin-top:.6rem}

.kasten{background:var(--aqua-hell);border-radius:var(--rund);padding:1.65rem 1.75rem;
 margin:0 0 2.4rem;border-left:3px solid var(--aqua)}
.kasten h2{font-size:1.1rem;margin:0 0 .85rem;font-family:Manrope,sans-serif;font-weight:700}
.kasten ul{margin:0;padding-left:1.15rem}
.kasten li{font-size:.955rem;margin-bottom:.5rem}
.kasten li:last-child{margin-bottom:0}

.schritte{list-style:none;counter-reset:s;padding:0;margin:1.9rem 0}
.schritte li{counter-increment:s;position:relative;padding-left:3.4rem;margin-bottom:1.7rem}
.schritte li::before{content:counter(s);position:absolute;left:0;top:-.1rem;width:2.35rem;
 height:2.35rem;border-radius:50%;background:var(--tinte);color:var(--gold);
 display:grid;place-items:center;font:800 .96rem/1 Manrope,sans-serif}
.schritte h3{font-size:1.06rem;margin-bottom:.3rem}
.schritte p{margin:0;color:var(--tinte-60);font-size:.955rem}

.tafel{width:100%;overflow-x:auto;margin:1.8rem 0;border:1px solid var(--linie);border-radius:var(--rund)}
table{border-collapse:collapse;width:100%;min-width:420px;font-size:.935rem}
th,td{text-align:left;padding:.92rem 1.05rem;border-bottom:1px solid var(--linie);vertical-align:top}
th{background:var(--papier-warm);font:700 .82rem/1.3 Manrope,sans-serif;
 letter-spacing:.04em;text-transform:uppercase;color:var(--tinte-60)}
tr:last-child td{border-bottom:0}

.quelle{font-size:.85rem;color:var(--tinte-40);border-left:2px solid var(--linie);
 padding-left:.95rem;margin:1.6rem 0 2rem}

details.frage{border-bottom:1px solid var(--linie)}
details.frage>summary{cursor:pointer;list-style:none;padding:1.15rem 2.2rem 1.15rem 0;
 font:700 1.02rem/1.4 Manrope,sans-serif;position:relative}
details.frage>summary::-webkit-details-marker{display:none}
details.frage>summary::after{content:"+";position:absolute;right:.3rem;top:1rem;
 font-size:1.4rem;font-weight:400;color:var(--aqua);transition:transform .2s ease}
details.frage[open]>summary::after{transform:rotate(45deg)}
details.frage>div{padding:0 0 1.35rem;color:var(--tinte-60)}
details.frage>div p:last-child{margin-bottom:0}

/* ── Handlungsband ────────────────────────────────────────────────── */
.band{background:var(--tinte);color:#fff;border-radius:var(--rund);
 padding:clamp(2rem,1.5rem + 2vw,3.1rem);display:grid;
 grid-template-columns:1.35fr 1fr;gap:2.2rem;align-items:center}
.band h2{color:#fff;margin-bottom:.55rem}
.band p{color:#c8d8e1;margin:0}
.band__wege{display:grid;gap:.7rem}
.band__weg{display:flex;align-items:center;gap:.85rem;background:rgba(255,255,255,.07);
 border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:.88rem 1.1rem;
 text-decoration:none;color:#fff;font:600 .96rem/1.3 Manrope,sans-serif}
.band__weg:hover{background:rgba(255,255,255,.14);color:#fff}
.band__weg span{display:block;font:400 .78rem/1.3 Inter,sans-serif;color:#a9c0cd;margin-top:.15rem}
.band__weg svg{flex:none;width:20px;height:20px;fill:var(--gold-hell)}

/* ── Fuß ──────────────────────────────────────────────────────────── */
.fuss{background:var(--tinte);color:#a9c0cd;padding:clamp(3rem,2.4rem + 2vw,4.25rem) 0 0;
 font-size:.925rem}
.fuss__raster{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.4rem}
.fuss h3{color:#fff;font-size:.815rem;letter-spacing:.13em;text-transform:uppercase;
 margin-bottom:1.05rem;font-weight:700}
.fuss ul{list-style:none;padding:0;margin:0}
.fuss li{margin-bottom:.6rem}
.fuss a{color:#a9c0cd;text-decoration:none}
.fuss a:hover{color:#fff;text-decoration:underline}
.fuss__marke{display:flex;align-items:center;gap:.7rem;margin-bottom:1.1rem}
.fuss__marke img{width:46px}
.fuss__marke b{color:#fff;font:800 1.1rem/1.2 Manrope,sans-serif;display:block}
.fuss__unten{border-top:1px solid rgba(255,255,255,.12);margin-top:3rem;padding:1.5rem 0;
 display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.865rem}

/* ── Kleine Schirme ───────────────────────────────────────────────── */
@media(max-width:960px){
 .auf__raster{grid-template-columns:1fr;gap:2.2rem}
 .band{grid-template-columns:1fr}
 .fuss__raster{grid-template-columns:1fr 1fr;gap:2rem}
 .merkmale{grid-template-columns:1fr 1fr;margin-top:0}
}
@media(max-width:720px){
 .menue{display:none}
 .rand__gebiet{display:none}
}
@media(min-width:721px){.klapp{display:none}}
@media(max-width:520px){
 .merkmale{grid-template-columns:1fr}
 .fuss__raster{grid-template-columns:1fr}
 .knopfreihe .knopf{width:100%}
}
@media(prefers-reduced-motion:reduce){
 *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ── Druck ────────────────────────────────────────────────────────── */
@media print{
 .kopf,.rand,.band,.fuss__raster,.klapp{display:none}
 body{font-size:11pt}
 a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}