/* ==========================================================================
   ADRIATIC – cc-adriatic.com
   Stylesheet. Aufbau:
     1 Schriften   2 Farben & Grundwerte   3 Grundlagen   4 Kopfzeile
     5 Hero        6 Bausteine             7 Fusszeile    8 Bildschirmgroessen
   ========================================================================== */

/* --- 1 Schriften (lokal, keine externen Dienste) ------------------------- */
@font-face{font-family:'Playfair';src:url('../schriften/playfair-400-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,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:'Playfair';src:url('../schriften/playfair-400-latin-ext.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Playfair';src:url('../schriften/playfair-500-latin.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,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:'Playfair';src:url('../schriften/playfair-500-latin-ext.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Playfair';src:url('../schriften/playfair-600-latin.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,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:'Playfair';src:url('../schriften/playfair-600-latin-ext.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

@font-face{font-family:'Inter';src:url('../schriften/inter-300-latin.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,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('../schriften/inter-300-latin-ext.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';src:url('../schriften/inter-400-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,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('../schriften/inter-400-latin-ext.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';src:url('../schriften/inter-500-latin.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,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('../schriften/inter-500-latin-ext.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';src:url('../schriften/inter-600-latin.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,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('../schriften/inter-600-latin-ext.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* --- 2 Farben & Grundwerte ---------------------------------------------- */
:root{
  --creme:#fdfbf7;
  --beige:#f2efe9;
  --beige-dunkel:#e8e3d9;
  --nacht:#0a1b2a;
  --nacht-weich:#122b40;
  --grau:#4a525a;
  --grau-hell:#7b838b;
  --gold:#c5b358;
  --gold-dunkel:#a8974a;

  --schrift-display:'Playfair',Georgia,'Times New Roman',serif;
  --schrift-text:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  --breite:1240px;
  --breite-schmal:820px;
  --rand:clamp(1.25rem,5vw,3rem);
  --abstand:clamp(4rem,9vw,7.5rem);
  /* Strecke vom Rand der Huelle bis zum Bildschirmrand – fuer randlose Bilder */
  --ausbruch:calc(max(0px,(100vw - var(--breite)) / 2) + var(--rand));
  --kopf-hoehe:92px;
  --radius:2px;
  --schatten:0 1px 3px rgba(10,27,42,.05),0 8px 30px rgba(10,27,42,.06);
  --schatten-tief:0 2px 6px rgba(10,27,42,.07),0 20px 50px rgba(10,27,42,.10);
  --uebergang:220ms cubic-bezier(.4,0,.2,1);
}

/* --- 3 Grundlagen ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body{
  margin:0;
  background:var(--creme);
  color:var(--nacht);
  font-family:var(--schrift-text);
  font-weight:400;
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block;}
a{color:inherit;}

h1,h2,h3,h4{
  font-family:var(--schrift-display);
  font-weight:400;
  line-height:1.12;
  letter-spacing:-.01em;
  margin:0 0 .6em;
  text-wrap:balance;
}
h1{font-size:clamp(2.5rem,1.6rem + 4.2vw,5rem);}
h2{font-size:clamp(1.95rem,1.35rem + 2.6vw,3.4rem);}
h3{font-size:clamp(1.35rem,1.15rem + .85vw,1.85rem);}
h4{font-size:clamp(1.1rem,1rem + .4vw,1.3rem);font-family:var(--schrift-text);font-weight:600;letter-spacing:0;}
p{margin:0 0 1.2em;text-wrap:pretty;}
p:last-child{margin-bottom:0;}

/* Sprungmarke fuer Tastaturnutzung */
.sprungmarke{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--nacht);color:var(--creme);
  padding:.9rem 1.4rem;text-decoration:none;
}
.sprungmarke:focus{left:0;}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

/* Layout-Helfer */
.huelle{width:100%;max-width:var(--breite);margin-inline:auto;padding-inline:var(--rand);}
.huelle-schmal{max-width:var(--breite-schmal);}
.abschnitt{padding-block:var(--abstand);}
.abschnitt--beige{background:var(--beige);}
.abschnitt--nacht{background:var(--nacht);color:var(--creme);}
.abschnitt--nacht h1,.abschnitt--nacht h2,.abschnitt--nacht h3{color:var(--creme);}

/* Augenbraue: die kleine Zeile ueber den Ueberschriften */
.augenbraue{
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold-dunkel);
  margin:0 0 1.1rem;
}
.abschnitt--nacht .augenbraue{color:var(--gold);}

.fuehrungstext{
  font-size:clamp(1.05rem,1rem + .35vw,1.2rem);
  color:var(--grau);
  max-width:60ch;
}
.abschnitt--nacht .fuehrungstext{color:rgba(253,251,247,.78);}
.zentriert{text-align:center;}
.zentriert .fuehrungstext,.zentriert .augenbraue{margin-inline:auto;}

/* Schaltflaechen */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:52px;
  padding:.85rem 1.9rem;
  font-family:var(--schrift-text);
  font-size:.78rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;
  border:1px solid var(--nacht);
  border-radius:var(--radius);
  background:var(--nacht);color:var(--creme);
  cursor:pointer;
  transition:background var(--uebergang),color var(--uebergang),border-color var(--uebergang),transform var(--uebergang);
}
.knopf:hover{background:var(--nacht-weich);border-color:var(--nacht-weich);transform:translateY(-1px);}
.knopf--leer{background:transparent;color:var(--nacht);}
.knopf--leer:hover{background:var(--nacht);color:var(--creme);}
.knopf--hell{background:var(--creme);color:var(--nacht);border-color:var(--creme);}
.knopf--hell:hover{background:transparent;color:var(--creme);}
.knopf--hell-leer{background:transparent;color:var(--creme);border-color:rgba(253,251,247,.5);}
.knopf--hell-leer:hover{background:var(--creme);color:var(--nacht);border-color:var(--creme);}
.knopf-reihe{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem;}
.zentriert .knopf-reihe{justify-content:center;}

/* Textlink mit Pfeil */
.pfeil-link{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.75rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;color:var(--nacht);
  padding-bottom:.35rem;
  border-bottom:1px solid var(--gold);
  transition:gap var(--uebergang),color var(--uebergang);
}
.pfeil-link::after{content:'→';font-size:1em;line-height:1;transition:transform var(--uebergang);}
.pfeil-link:hover{gap:.85rem;color:var(--gold-dunkel);}
.abschnitt--nacht .pfeil-link{color:var(--creme);}
.abschnitt--nacht .pfeil-link:hover{color:var(--gold);}

/* --- 4 Kopfzeile --------------------------------------------------------
   Wichtig: die Kopfzeile hat IMMER einen deckenden Hintergrund. Genau daran
   scheiterte die alte Fassung – dort lag das Logo ohne Grund ueber dem Text. */
.kopf{
  position:sticky;top:0;z-index:100;
  background:var(--creme);
  border-bottom:1px solid var(--beige-dunkel);
  transition:box-shadow var(--uebergang);
}
.kopf--gescrollt{box-shadow:0 1px 16px rgba(10,27,42,.08);}
.kopf__innen{
  max-width:var(--breite);margin-inline:auto;padding-inline:var(--rand);
  height:var(--kopf-hoehe);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}
.kopf__logo{display:flex;align-items:center;flex-shrink:0;}
.kopf__logo img{height:66px;width:auto;}

/* Hauptmenue (ab Tablet) */
.menue{display:none;}
.menue ul{display:flex;align-items:center;gap:.35rem;list-style:none;margin:0;padding:0;}
.menue a{
  display:block;padding:.65rem .9rem;
  font-size:.74rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;
  text-decoration:none;color:var(--nacht);
  position:relative;
  transition:color var(--uebergang);
}
.menue a::after{
  content:'';position:absolute;left:.9rem;right:.9rem;bottom:.35rem;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform var(--uebergang);
}
.menue a:hover::after,.menue a[aria-current="page"]::after{transform:scaleX(1);}
.menue a[aria-current="page"]{color:var(--gold-dunkel);}

/* Untermenue WORKS */
.menue__punkt{position:relative;}
.menue__auf{
  position:absolute;top:100%;left:0;min-width:230px;
  background:var(--creme);border:1px solid var(--beige-dunkel);
  box-shadow:var(--schatten);
  padding:.4rem;
  display:flex;flex-direction:column;gap:.1rem;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--uebergang),transform var(--uebergang),visibility var(--uebergang);
}
.menue__punkt:hover .menue__auf,
.menue__punkt:focus-within .menue__auf{opacity:1;visibility:visible;transform:translateY(0);}
.menue__auf a{letter-spacing:.08em;text-transform:none;font-size:.9rem;padding:.6rem .8rem;}
.menue__auf a::after{display:none;}
.menue__auf a:hover{background:var(--beige);}

.kopf__aktion{display:none;}


/* --- Sprachauswahl ------------------------------------------------------
   Globus in der Kopfzeile. Ohne Javascript klappt sie beim Tastatur-Fokus
   auf, mit Javascript zusaetzlich per Klick. */
.sprachen{position:relative;flex-shrink:0;}
.sprachen__knopf{
  display:flex;align-items:center;gap:.4rem;
  min-height:44px;padding:.5rem .7rem;
  background:none;border:1px solid transparent;border-radius:var(--radius);
  font-family:inherit;font-size:.74rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--nacht);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:border-color var(--uebergang),background var(--uebergang);
}
.sprachen__knopf:hover{border-color:var(--beige-dunkel);background:var(--beige);}
.sprachen__knopf svg{width:19px;height:19px;flex-shrink:0;}
.sprachen__pfeil{
  width:0;height:0;margin-left:.1rem;
  border-left:3.5px solid transparent;border-right:3.5px solid transparent;
  border-top:4px solid currentColor;
  transition:transform var(--uebergang);
}
.sprachen__knopf[aria-expanded="true"] .sprachen__pfeil{transform:rotate(180deg);}

.sprachen__liste{
  position:absolute;top:calc(100% + .4rem);right:0;z-index:10;
  min-width:190px;
  background:var(--creme);
  border:1px solid var(--beige-dunkel);
  box-shadow:var(--schatten);
  padding:.35rem;
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--uebergang),transform var(--uebergang),visibility var(--uebergang);
}
.sprachen:focus-within .sprachen__liste,
.sprachen__knopf[aria-expanded="true"] + .sprachen__liste{
  opacity:1;visibility:visible;transform:translateY(0);
}
.sprachen__liste a{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:44px;padding:.5rem .8rem;
  font-size:.92rem;text-decoration:none;color:var(--nacht);
  transition:background var(--uebergang);
}
.sprachen__liste a:hover{background:var(--beige);}
.sprachen__liste a[aria-current="true"]{color:var(--gold-dunkel);}
.sprachen__kuerzel{
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grau-hell);
}
.sprachen__liste a[aria-current="true"] .sprachen__kuerzel{color:var(--gold-dunkel);}

/* Im Handymenue steht die Sprachauswahl als eigener Block unten */
.handymenue .sprachen{margin-top:2rem;}
.handymenue .sprachen__titel{
  font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-dunkel);margin:0 0 .6rem;
}
.handymenue .sprachen__liste{
  position:static;opacity:1;visibility:visible;transform:none;
  border:0;box-shadow:none;padding:0;background:none;
  flex-direction:row;gap:.5rem;
}
.handymenue .sprachen__liste a{
  flex:1;justify-content:center;
  border:1px solid var(--beige-dunkel);
}
.handymenue .sprachen__liste a[aria-current="true"]{
  border-color:var(--gold);background:var(--beige);
}
.handymenue .sprachen__kuerzel{display:none;}

/* Menueschalter fuers Handy */
.schalter{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:48px;height:48px;margin-right:-12px;padding:0 11px;
  background:none;border:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.schalter span{display:block;height:1.5px;width:100%;background:var(--nacht);border-radius:2px;transition:transform var(--uebergang),opacity var(--uebergang);}
.schalter[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.schalter[aria-expanded="true"] span:nth-child(2){opacity:0;}
.schalter[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

/* Handy-Menue */
.handymenue{
  position:fixed;inset:var(--kopf-hoehe) 0 0;z-index:99;
  background:var(--creme);
  padding:1.5rem var(--rand) 3rem;
  overflow-y:auto;
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--uebergang),transform var(--uebergang),visibility var(--uebergang);
}
.handymenue[data-offen="ja"]{opacity:1;visibility:visible;transform:translateY(0);}
.handymenue ul{list-style:none;margin:0;padding:0;}
.handymenue > ul > li{border-bottom:1px solid var(--beige-dunkel);}
.handymenue > ul > li > a{
  display:block;padding:1.15rem 0;
  font-family:var(--schrift-display);font-size:1.55rem;
  text-decoration:none;color:var(--nacht);
}
.handymenue__unter{padding:0 0 1.1rem .2rem !important;}
.handymenue__unter a{
  display:block;padding:.7rem 0;min-height:44px;   /* bequeme Trefferflaeche */
  font-size:.98rem;color:var(--grau);text-decoration:none;
}
.handymenue__unter a::before{content:'– ';color:var(--gold);}
.handymenue .knopf{margin-top:2rem;width:100%;}
body[data-menue="offen"]{overflow:hidden;}


/* --- Seitenpfad ---------------------------------------------------------
   Zeigt, wo man sich befindet: Start › Works › Fuhrparkmanagement.
   Steht im Bildbereich ueber der Ueberschrift. */
.pfad{
  display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;
  font-size:.74rem;letter-spacing:.06em;
  color:var(--grau);
  margin:0 0 1.4rem;
}
.pfad a{
  color:inherit;text-decoration:none;
  padding:.2rem 0;
  border-bottom:1px solid transparent;
  transition:color var(--uebergang),border-color var(--uebergang);
}
.pfad a:hover{color:var(--nacht);border-bottom-color:var(--gold);}
.pfad__strich{
  display:inline-block;width:26px;height:1px;
  background:var(--gold);margin-right:.2rem;
}
.pfad__trenner{color:var(--grau-hell);}
.pfad [aria-current="page"]{color:var(--gold-dunkel);}

/* Im Bildbereich steht der Pfad auf dunklem Grund */
.pfad--hell{
  justify-content:center;
  color:rgba(253,251,247,.78);
  text-shadow:0 1px 10px rgba(10,27,42,.45);
}
.pfad--hell a:hover{color:var(--creme);border-bottom-color:var(--gold);}
.pfad--hell .pfad__trenner{color:rgba(253,251,247,.5);}
.pfad--hell [aria-current="page"]{color:var(--gold);}

/* --- 5 Hero -------------------------------------------------------------
   Das Bild ist ein echtes <img> und wird sofort geladen. Kein Einblenden
   per Skript: der Text ist da, sobald die Seite da ist. */
.hero{
  position:relative;
  min-height:min(88svh,760px);
  display:flex;align-items:center;
  padding-block:clamp(4rem,12vh,7rem);
  overflow:hidden;
  background:var(--nacht);
}
.hero__bild{position:absolute;inset:0;}
.hero__bild img{width:100%;height:100%;object-fit:cover;}
.hero__schleier{
  position:absolute;inset:0;
  background:
    linear-gradient(to bottom,rgba(10,27,42,.55) 0%,rgba(10,27,42,.28) 38%,rgba(10,27,42,.62) 100%),
    radial-gradient(120% 80% at 50% 45%,rgba(10,27,42,0) 30%,rgba(10,27,42,.42) 100%);
}
.hero__innen{position:relative;z-index:2;color:var(--creme);text-align:center;}
.hero h1{color:var(--creme);margin-bottom:.45em;text-shadow:0 2px 24px rgba(10,27,42,.4);}
.hero__augenbraue{
  font-size:.74rem;font-weight:500;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(253,251,247,.9);margin:0 0 1.6rem;
}
.hero__text{
  font-size:clamp(1.05rem,1rem + .45vw,1.3rem);
  color:rgba(253,251,247,.92);
  max-width:46ch;margin:0 auto;
  text-shadow:0 1px 16px rgba(10,27,42,.45);
}
.hero .knopf-reihe{justify-content:center;margin-top:2.4rem;}
.hero--kurz{min-height:min(70svh,600px);}

/* Hinunter-Hinweis – nur zeigen, wenn das Fenster hoch genug ist */
.hinunter{display:none;}
@media (min-height:720px){.hinunter{
  position:absolute;left:50%;bottom:2rem;transform:translateX(-50%);z-index:2;
  display:inline-flex;flex-direction:column;align-items:center;gap:.5rem;
  font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(253,251,247,.85);text-decoration:none;
}}
.hinunter::after{content:'';width:1px;height:34px;background:linear-gradient(rgba(253,251,247,.85),rgba(253,251,247,0));}
@media (prefers-reduced-motion:no-preference){
  .hinunter::after{animation:pulsieren 2.4s ease-in-out infinite;}
  @keyframes pulsieren{0%,100%{opacity:.35;}50%{opacity:1;}}
}

/* --- 6 Bausteine -------------------------------------------------------- */

/* Zweispalter Text + Bild.
   Das Bild ist randlos: es laeuft seitlich bis an den Bildschirmrand und
   fuellt seine Flaeche vollstaendig aus. */
.paar{--spalt:clamp(2rem,5vw,4.5rem);display:grid;gap:var(--spalt);align-items:center;}
.paar__bild{
  position:relative;
  margin-inline:calc(-1 * var(--ausbruch));
  height:clamp(300px,52vw,460px);
  overflow:hidden;
}
/* Das Bild liegt frei im Rahmen. So bestimmt es die Zeilenhoehe nicht mit,
   sondern fuellt genau die Flaeche, die der Text daneben vorgibt. */
.paar__bild img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
}


/* Bilder mit Schrift darin (Titelbilder, Cover) werden nie angeschnitten:
   Sie behalten ihr eigenes Seitenverhaeltnis und brechen nicht zum
   Bildschirmrand aus. */
.paar .paar__bild--voll{
  position:static;
  height:auto;
  min-height:0;
  width:100%;
  max-width:640px;
  margin-inline:auto;
  align-self:center;
  box-shadow:var(--schatten-tief);
}
.paar .paar__bild--voll img{position:static;height:auto;}

/* Die drei Welten */
.welten{
  display:grid;gap:1.5rem;
  margin-top:clamp(3rem,5vw,4.5rem);
  /* etwas breiter als der Textbereich, damit die Kacheln kraeftig wirken */
  width:min(1520px,100vw - 2 * var(--rand));
  margin-inline:calc(50% - min(1520px,100vw - 2 * var(--rand)) / 2);
}
.welt{
  position:relative;display:block;
  min-height:clamp(500px,60vh,700px);
  padding:clamp(2rem,2.6vw,2.75rem);
  color:var(--creme);text-decoration:none;
  overflow:hidden;
  isolation:isolate;
  display:flex;flex-direction:column;justify-content:flex-end;
}
.welt img{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;
  transition:transform 600ms cubic-bezier(.4,0,.2,1);
}
/* Der Schleier ist unten kraeftig genug, dass auch ein helles Bild die
   Schrift traegt - so wirken alle drei Kacheln gleich. */
.welt::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,
    rgba(10,27,42,.92) 0%,
    rgba(10,27,42,.78) 38%,
    rgba(10,27,42,.42) 70%,
    rgba(10,27,42,.25) 100%);
}
.welt:hover img{transform:scale(1.05);}
.welt__nummer{
  font-size:.68rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.9rem;
}
.welt__titel{font-family:var(--schrift-display);font-size:clamp(1.8rem,1.45rem + 1.1vw,2.35rem);line-height:1.12;margin:0 0 .8rem;}
.welt__text{
  font-size:1rem;line-height:1.65;
  color:rgba(253,251,247,.87);
  margin:0 0 1.6rem;
  /* Platz fuer vier Zeilen - so beginnen Ueberschrift und Text in allen
     drei Kacheln auf gleicher Hoehe, auch wenn ein Text kuerzer ist. */
  min-height:calc(4 * 1.65em);
}
.welt__mehr{
  font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.5rem;
}
.welt__mehr::after{content:'→';transition:transform var(--uebergang);}
.welt:hover .welt__mehr::after{transform:translateX(4px);}
/* Die dritte Kachel sieht aus wie die anderen - nur der Link ruht. */
.welt--bald .welt__mehr{color:rgba(253,251,247,.75);}

/* Werte / Merkmale als Raster */
.raster{display:grid;gap:1.5rem;}
.raster--2{grid-template-columns:1fr;}
.raster--3{grid-template-columns:1fr;}
.raster--4{grid-template-columns:1fr;}

.karte{
  background:var(--creme);
  border:1px solid var(--beige-dunkel);
  padding:clamp(1.6rem,3vw,2.25rem);
  height:100%;
}
.abschnitt--beige .karte{background:var(--creme);}
.abschnitt--nacht .karte{background:rgba(253,251,247,.05);border-color:rgba(253,251,247,.14);}
.karte h3,.karte h4{margin-bottom:.6rem;}
.karte p{color:var(--grau);font-size:.97rem;margin:0;}
.abschnitt--nacht .karte p{color:rgba(253,251,247,.75);}
.karte__marke{
  font-size:.66rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-dunkel);display:block;margin-bottom:.9rem;
}
.abschnitt--nacht .karte__marke{color:var(--gold);}

/* Nummerierte Funktionskarten: Nummer und Kennwort stehen in einer Zeile. */
.karte--nummer .zahl{
  font-family:var(--schrift-display);
  font-size:.95rem;color:var(--gold-dunkel);
  letter-spacing:.05em;
}
.karte--nummer .zahl::after{
  content:'·';margin:0 .5rem;color:var(--beige-dunkel);
}
.karte__kopf{
  display:flex;align-items:baseline;flex-wrap:wrap;
  margin:0 0 .9rem;
}
.karte__kopf .karte__marke{display:inline;margin:0;}

/* Zahlenband */
.zahlen{display:grid;gap:2rem 1.5rem;grid-template-columns:repeat(2,1fr);margin-top:3rem;}
.zahl-block{text-align:center;}
.zahl-block dt{
  font-family:var(--schrift-display);
  font-size:clamp(2rem,1.4rem + 2.2vw,2.9rem);
  line-height:1;color:var(--nacht);margin-bottom:.6rem;
}
.abschnitt--nacht .zahl-block dt{color:var(--gold);}
.zahl-block dd{
  margin:0;font-size:.68rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;
  color:var(--grau-hell);line-height:1.5;
}
.abschnitt--nacht .zahl-block dd{color:rgba(253,251,247,.6);}

/* Ablauf in Schritten */
.schritte{display:grid;gap:2rem;counter-reset:schritt;margin-top:3rem;}
.schritt{position:relative;padding-top:1.6rem;border-top:1px solid var(--beige-dunkel);}
.abschnitt--nacht .schritt{border-top-color:rgba(253,251,247,.18);}
.schritt::before{
  counter-increment:schritt;content:'0' counter(schritt);
  font-family:var(--schrift-display);font-size:.95rem;color:var(--gold);
  display:block;margin-bottom:.7rem;
}
.schritt h3{font-size:1.25rem;margin-bottom:.5rem;}
.schritt p{color:var(--grau);font-size:.95rem;margin:0;}
.abschnitt--nacht .schritt p{color:rgba(253,251,247,.75);}

/* Aufzaehlung mit Haken */
.haken{list-style:none;margin:1.6rem 0 0;padding:0;}
.haken li{position:relative;padding:.55rem 0 .55rem 1.8rem;border-bottom:1px solid var(--beige-dunkel);font-size:.97rem;}
.haken li:last-child{border-bottom:0;}
.haken li::before{
  content:'';position:absolute;left:0;top:1.15em;
  width:9px;height:9px;border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
  transform:rotate(45deg) translateY(-50%);
}
.abschnitt--nacht .haken li{border-bottom-color:rgba(253,251,247,.14);}

/* Preistafeln (Soul) */
.tafeln{display:grid;gap:1.5rem;margin-top:3.5rem;align-items:start;}
.tafel{
  background:var(--creme);border:1px solid var(--beige-dunkel);
  padding:clamp(1.75rem,3vw,2.4rem);
  display:flex;flex-direction:column;height:100%;position:relative;
}
.tafel--betont{border-color:var(--gold);box-shadow:var(--schatten-tief);}
.tafel__band{
  position:absolute;top:0;right:clamp(1.75rem,3vw,2.4rem);transform:translateY(-50%);
  background:var(--gold);color:var(--nacht);
  font-size:.62rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  padding:.4rem .9rem;
}
.tafel__stufe{font-size:.68rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dunkel);margin-bottom:.8rem;}
.tafel__titel{font-family:var(--schrift-display);font-size:1.85rem;line-height:1.1;margin:0 0 .35rem;}
.tafel__preis{font-family:var(--schrift-display);font-size:2.1rem;color:var(--nacht);margin:.8rem 0 1rem;}
.tafel__text{color:var(--grau);font-size:.95rem;}
.tafel .haken{flex:1;}
.tafel .knopf{margin-top:1.8rem;width:100%;}

/* Podcast-Folgen */
.folgen{display:grid;gap:1.5rem;margin-top:3.5rem;}
.folge{
  background:var(--creme);border:1px solid var(--beige-dunkel);
  padding:clamp(1.6rem,3vw,2.1rem);
  display:flex;flex-direction:column;height:100%;
}
.folge__marke{font-size:.66rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-dunkel);margin-bottom:.9rem;}
.folge h3{font-size:1.2rem;margin-bottom:.7rem;}
.folge p{color:var(--grau);font-size:.94rem;}
.folge > p:not(.folge__marke){flex:1;}
.folge .pfeil-link{margin-top:1.4rem;align-self:flex-start;}

/* Kontaktkarten */
.kontaktkarten{display:grid;gap:1.5rem;margin-top:3rem;}
.kontaktkarte{
  background:var(--creme);border:1px solid var(--beige-dunkel);
  padding:clamp(1.6rem,3vw,2.2rem);
  text-decoration:none;display:block;
  transition:border-color var(--uebergang),transform var(--uebergang),box-shadow var(--uebergang);
}
.kontaktkarte:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:var(--schatten);}
.kontaktkarte__marke{font-size:.66rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dunkel);display:block;margin-bottom:.8rem;}
.kontaktkarte__wert{font-family:var(--schrift-display);font-size:1.3rem;word-break:break-word;display:block;}
.kontaktkarte__zusatz{color:var(--grau);font-size:.9rem;margin:.6rem 0 0;}

/* Aufruf-Abschnitt – alles darin steht mittig, auch die Schaltflaechen */
.aufruf{text-align:center;}
.aufruf h2{max-width:22ch;margin-inline:auto;}
.aufruf .augenbraue,
.aufruf .fuehrungstext{margin-inline:auto;}
.aufruf .knopf-reihe{justify-content:center;}


/* --- Kontaktformular ----------------------------------------------------- */
.formularblock{
  background:var(--creme);
  border:1px solid var(--beige-dunkel);
  padding:clamp(1.75rem,4vw,3rem);
  margin-top:clamp(3rem,6vw,4.5rem);
}
.formularblock h2{font-size:clamp(1.6rem,1.3rem + 1.4vw,2.2rem);margin-bottom:.5rem;}
.formularblock .fuehrungstext{margin-bottom:2rem;}

.formular{display:grid;gap:1.25rem;}
.formular .breit{grid-column:1 / -1;}
.feld{display:flex;flex-direction:column;gap:.45rem;}
.feld label{
  font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grau);
}
.pflicht{color:var(--gold-dunkel);}
.feld input,
.feld textarea{
  font-family:inherit;font-size:1rem;color:var(--nacht);
  background:#fff;
  border:1px solid var(--beige-dunkel);
  border-radius:var(--radius);
  padding:.85rem 1rem;
  min-height:52px;
  width:100%;
  transition:border-color var(--uebergang),box-shadow var(--uebergang);
}
.feld textarea{min-height:150px;resize:vertical;line-height:1.6;}
.feld input:hover,.feld textarea:hover{border-color:var(--grau-hell);}
.feld input:focus,.feld textarea:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(197,179,88,.18);
}
.formular button{width:100%;}
.formular__hinweis{
  margin:1rem 0 0;
  font-size:.82rem;color:var(--grau-hell);
}
.formular__hinweis a{color:var(--grau);text-decoration-color:var(--gold);text-underline-offset:3px;}

/* Spamfalle: fuer Menschen unsichtbar, fuer Maschinen verlockend.
   Nicht display:none – manche Roboter fuellen dann trotzdem aus. */
.spamfalle{
  position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;
}

/* Rueckmeldung nach dem Absenden */
.meldung{
  border-left:3px solid var(--gold);
  background:var(--beige);
  padding:1.25rem 1.5rem;
  margin-bottom:2rem;
}
.meldung--fehler{border-left-color:#8a1c2b;}
.meldung p{margin:0;color:var(--grau);}
.meldung strong{color:var(--nacht);}

@media (min-width:640px){
  .formular{grid-template-columns:1fr 1fr;}
  .formular button{width:auto;min-width:260px;}
}

/* Rechtstexte */
.rechtstext{max-width:var(--breite-schmal);}
.rechtstext h2{font-size:clamp(1.4rem,1.2rem + .8vw,1.85rem);margin-top:2.6rem;}
.rechtstext h2:first-of-type{margin-top:0;}
.rechtstext ul{padding-left:1.2rem;color:var(--grau);}
.rechtstext li{margin-bottom:.35rem;}
.rechtstext p{color:var(--grau);}
.rechtstext a:not(.knopf){color:var(--nacht);text-decoration-color:var(--gold);text-underline-offset:3px;}
/* Schaltflaechen behalten ihre eigenen Farben - sonst faerbt die Regel
   darueber den hellen Text dunkelblau auf dunkelblauen Grund. */
.rechtstext .knopf{color:var(--creme);text-decoration:none;}
.rechtstext .knopf--leer{color:var(--nacht);}
.rechtstext .knopf--leer:hover{color:var(--creme);}

/* Titelzeile schmaler Seiten */
.seitentitel{padding-block:clamp(3rem,8vw,5rem) clamp(2rem,4vw,3rem);background:var(--beige);}

/* --- 7 Fusszeile --------------------------------------------------------
   So knapp wie moeglich: eine Zeile mit Logo, Links und Rechtszeile.
   Sie soll die Seite abschliessen, nicht selbst eine Seite sein. */
.fuss{background:var(--nacht);color:rgba(253,251,247,.62);padding-block:1.5rem 1.25rem;}
.fuss__innen{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:1rem 2rem;text-align:center;
}
.fuss__logo{display:block;flex-shrink:0;}
.fuss__logo img{height:44px;width:auto;}
.fuss__links{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem 1.4rem;
}
.fuss__links a{
  display:flex;align-items:center;
  min-height:44px;           /* bequem mit dem Finger zu treffen */
  color:rgba(253,251,247,.72);text-decoration:none;
  font-size:.85rem;letter-spacing:.06em;
  transition:color var(--uebergang);
}
@media (min-width:900px){
  /* am Rechner darf es wieder kompakt sein */
  .fuss__links a{min-height:0;font-size:.78rem;padding:.25rem 0;}
}
.fuss__links a:hover{color:var(--creme);}
.fuss__recht{
  width:100%;margin:0;
  font-size:.7rem;color:rgba(253,251,247,.4);
}


/* --- Karten auf gemeinsame Linien bringen -------------------------------
   In einer Reihe nebeneinander sollen Titel, Text und Link jeweils auf
   gleicher Hoehe beginnen, auch wenn eine Ueberschrift zwei Zeilen braucht.
   Deshalb bekommen die Ueberschriften eine Mindesthoehe von zwei Zeilen.
   Nur ab Tablet: untereinander waere das nur unnoetiger Leerraum. */
/* Karten einer Reihe teilen sich dieselben Zeilen: Ueberschrift, Text und
   Link beginnen ueberall auf gleicher Hoehe. Braucht eine Ueberschrift zwei
   Zeilen, ruecken alle mit – sind alle einzeilig, entsteht keine Luecke.
   Genau das leistet "subgrid"; ohne es sieht die Seite nur etwas
   ungleichmaessiger aus, kaputt geht nichts. */
@supports (grid-template-rows: subgrid) {
  @media (min-width:640px){
    /* Die Zahl muss zur Anzahl der Elemente in einer Karte passen. Stimmt sie
       nicht, quetschen sich zwei Elemente in dieselbe Zeile und ueberlagern
       sich. Weicht eine Karte ab, steht die richtige Zahl im HTML am Raster:
       style="--zeilen:4" */
    .raster--4 > .karte{grid-row:span var(--zeilen,2);}
    .raster--3 > .karte{grid-row:span var(--zeilen,3);}
    .folgen > .folge{grid-row:span var(--zeilen,4);}
    .raster--4 > .karte,
    .raster--3 > .karte,
    .folgen > .folge{
      display:grid;
      grid-template-rows:subgrid;
      align-content:start;
    }
  }
}

/* Ein Hinweis in der Optik der Pfeil-Links, aber ohne Ziel. */
.pfeil-link--ruht{
  border-bottom-color:var(--beige-dunkel);
  color:var(--grau-hell);
  cursor:default;
}
.pfeil-link--ruht::after{content:'';}

/* Die Karten sind gleich hoch und der Link sitzt immer unten.
   Dehnen darf sich nur der Fliesstext – nicht die kleine Zeile darueber,
   sonst rutschen die Ueberschriften auf unterschiedliche Hoehen. */
.folge,.karte{display:flex;flex-direction:column;}
.folge > p:not(.folge__marke),
.karte > p:not(.karte__marke):not(.karte__kopf){flex:1;}
.folge__marke,.karte__marke,.karte__kopf{flex:0 0 auto;}


/* --- Bequeme Trefferflaechen auf dem Handy -------------------------------
   Mit dem Finger will man mindestens 44 Pixel treffen. Am Rechner darf es
   wieder kompakt sein, dort zielt die Maus genauer. */
@media (max-width:899px){
  .pfeil-link{
    min-height:44px;
    align-items:center;
    padding-block:.5rem;
  }
  .pfad a{
    min-height:44px;
    display:inline-flex;align-items:center;
    padding-inline:.15rem;
  }
  .pfad{gap:.35rem;}
}


/* ==========================================================================
   Landingpage der Postkartenkampagne (/postkarte/)
   Eigene Klassen, damit keine andere Seite beruehrt wird. Farben, Schriften,
   Abstaende und Schaltflaechen kommen aus den Variablen weiter oben.
   ========================================================================== */

/* Der Auftakt darf luftig sein - die Seite wird meist am Handy geoeffnet,
   direkt nachdem jemand den Code auf der Postkarte gescannt hat. */
.postkarte-hero{padding-block:clamp(3.5rem,9vw,7rem) clamp(3rem,7vw,5.5rem);}
.postkarte-hero h1{
  font-size:clamp(2.4rem,1.5rem + 4vw,4.6rem);
  max-width:16ch;margin-inline:auto;
}
.postkarte-hero .fuehrungstext{max-width:54ch;margin-inline:auto;}

/* Der kleine goldene Strich zwischen Ueberschrift und Text */
.goldstrich{
  display:block;width:44px;height:2px;
  background:var(--gold);
  margin:clamp(1.5rem,3vw,2.2rem) auto;
}

/* --- Die beiden Welten --------------------------------------------------
   Am Handy untereinander, ab Tablet nebeneinander ueber die volle Breite. */
.wahl{display:grid;grid-template-columns:1fr;}

.wahl__seite{
  position:relative;
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(440px,68vh,640px);
  padding:clamp(2rem,4vw,3.5rem);
  color:var(--creme);text-decoration:none;
  overflow:hidden;isolation:isolate;
}
.wahl__seite img{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;
  transition:transform 900ms cubic-bezier(.22,.61,.36,1);
}
.wahl__seite::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,
    rgba(10,27,42,.92) 0%,
    rgba(10,27,42,.74) 38%,
    rgba(10,27,42,.34) 72%,
    rgba(10,27,42,.14) 100%);
  transition:opacity var(--uebergang);
}
@media (prefers-reduced-motion:no-preference){
  .wahl__seite:hover img,
  .wahl__seite:focus-visible img{transform:scale(1.035);}
}
.wahl__seite:hover::after{opacity:.88;}

.wahl__marke{
  font-size:.7rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);margin:0 0 1rem;
}
.wahl__titel{
  font-family:var(--schrift-display);font-weight:400;
  font-size:clamp(1.85rem,1.4rem + 1.9vw,2.9rem);
  line-height:1.1;margin:0 0 1rem;
  color:var(--creme);
  max-width:16ch;
}
.wahl__text{
  font-size:1rem;line-height:1.65;
  color:rgba(253,251,247,.88);
  max-width:46ch;margin:0 0 1.8rem;
  /* Platz fuer vier Zeilen, damit beide Seiten gleich aufgebaut wirken */
  min-height:calc(4 * 1.65em);
}
.wahl__mehr{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.74rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  padding-bottom:.55rem;
  border-bottom:1px solid rgba(253,251,247,.5);
}
.wahl__mehr::after{content:'→';font-size:1.1em;transition:transform var(--uebergang);}
.wahl__seite:hover .wahl__mehr::after{transform:translateX(5px);}

/* --- Verbindungsbereich ------------------------------------------------- */
.unterschrift{
  font-family:var(--schrift-display);font-style:italic;
  font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem);
  color:var(--nacht);
  margin:clamp(1.75rem,4vw,2.5rem) 0 0;
}

/* --- Formular auf dunklem Grund ----------------------------------------- */
.formularblock--hell{
  background:var(--creme);
  border-color:transparent;
  margin-top:0;
}
.formularblock--hell .fuehrungstext{color:var(--grau);}

/* Auswahlfeld im selben Stil wie die uebrigen Felder */
.feld select{
  font-family:inherit;font-size:1rem;color:var(--nacht);
  background:#fff;
  border:1px solid var(--beige-dunkel);
  border-radius:var(--radius);
  padding:.85rem 1rem;
  min-height:52px;width:100%;
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--grau) 50%),
                   linear-gradient(135deg,var(--grau) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
  transition:border-color var(--uebergang),box-shadow var(--uebergang);
}
.feld select:hover{border-color:var(--grau-hell);}
.feld select:focus{
  outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(197,179,88,.18);
}

/* Zustimmung zum Datenschutz */
.zustimmung{display:flex;align-items:flex-start;gap:.75rem;}
.zustimmung input{
  width:22px;height:22px;flex-shrink:0;margin-top:.15rem;
  accent-color:var(--nacht);
}
.zustimmung label{
  font-size:.86rem;line-height:1.55;color:var(--grau);
  text-transform:none;letter-spacing:0;font-weight:400;
  margin:0;
}
.zustimmung a{color:var(--nacht);text-decoration-color:var(--gold);text-underline-offset:3px;}

@media (min-width:900px){
  .wahl{grid-template-columns:1fr 1fr;}
  .postkarte-hero .fuehrungstext{font-size:1.2rem;}
}


/* --- Lageplan (Adriatic Living) -----------------------------------------
   Ein Plan mit Beschriftungen: wird nie angeschnitten, sondern vollstaendig
   gezeigt. Auf dem Handy darf er waagerecht gescrollt werden, sonst waere
   die Schrift darin nicht mehr lesbar. */
.lageplan{margin:clamp(2.5rem,5vw,4rem) 0 0;}
.lageplan img{
  width:100%;height:auto;
  background:var(--creme);
  box-shadow:var(--schatten-tief);
}
.lageplan figcaption{
  margin-top:.9rem;
  font-size:.82rem;color:var(--grau-hell);
  text-align:center;
}
@media (max-width:640px){
  /* Unter 640 Pixeln wird der Plan sonst unleserlich klein */
  .lageplan{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .lageplan img{min-width:620px;}
  .lageplan figcaption{min-width:0;padding-inline:var(--rand);}
}


/* --- Entfernungsangaben (Adriatic Living) --------------------------------
   Die Zahl in goldener Schreibschrift, die Einheit in gesperrten
   Grossbuchstaben darunter. */
.entfernung__wert{
  display:flex;flex-direction:column;
  margin:0 0 1.1rem;
}
.entfernung__zahl{
  font-family:var(--schrift-display);
  font-style:italic;
  font-size:clamp(3rem,2.2rem + 2.6vw,4.2rem);
  line-height:1;
  color:var(--gold);
}
.entfernung__einheit{
  font-size:.68rem;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-dunkel);
  margin-top:.5rem;
}
/* Auf dunklem Grund heller, damit es ruhig bleibt */
.abschnitt--nacht .entfernung__einheit{color:var(--gold);}
.entfernung h3{margin-bottom:.6rem;}

/* --- 8 Bildschirmgroessen ----------------------------------------------- */
@media (min-width:640px){
  .raster--2,.raster--4{grid-template-columns:repeat(2,1fr);}
  .zahlen{grid-template-columns:repeat(4,1fr);}
  .schritte{grid-template-columns:repeat(2,1fr);}
}

@media (min-width:900px){
  :root{--kopf-hoehe:112px;}
  .kopf__logo img{height:84px;}
  .menue{display:block;}
  .schalter{display:none;}
  .handymenue{display:none;}
  .kopf__aktion{display:inline-flex;}

  .paar{grid-template-columns:1fr 1fr;align-items:stretch;}
  .paar__text{align-self:center;}
  .paar--gedreht .paar__text{order:2;}
  /* Bild bricht nur nach aussen aus, nicht zwischen die Spalten */
  .paar__bild{margin-inline:0 calc(-1 * var(--ausbruch));}
  .paar--gedreht .paar__bild{margin-inline:calc(-1 * var(--ausbruch)) 0;}

  /* Die innere Kante eines randlosen Bildes liegt genau auf der Seitenmitte.
     So treffen sich die Bilder zweier aufeinanderfolgender Abschnitte auf
     einer Linie, statt um den halben Spalt versetzt zu sein. Der Abstand
     zwischen Text und Bild bleibt dabei unveraendert.
     Paare ohne randloses Bild (Text + Formular) bleiben bei 1fr 1fr. */
  .paar:has(> .paar__bild:not(.paar__bild--voll)){
    grid-template-columns:calc(50% - var(--spalt)) 1fr;
  }
  .paar--gedreht:has(> .paar__bild:not(.paar__bild--voll)){
    grid-template-columns:1fr calc(50% - var(--spalt));
  }
  .paar .paar__bild--voll,
  .paar--gedreht .paar__bild--voll{margin-inline:auto;align-self:center;min-height:0;height:auto;}

  /* Breite Titelbilder bekommen mehr Platz als der Text und duerfen dabei bis
     zum Bildschirmrand laufen – angeschnitten werden sie trotzdem nie. */
  .paar--breitbild{grid-template-columns:1fr 1.3fr;}
  .paar--breitbild .paar__bild--voll{
    max-width:none;
    width:auto;   /* sonst bliebe es auf der Spaltenbreite stehen */
    margin-inline:0 calc(-1 * var(--ausbruch));
  }
  .paar--breitbild.paar--gedreht .paar__bild--voll{
    width:auto;
    margin-inline:calc(-1 * var(--ausbruch)) 0;
  }
  /* Das Bild ist genau so hoch wie der Textblock daneben. */
  .paar__bild{height:auto;align-self:stretch;min-height:380px;}

  /* Steht ein Bild-Text-Paar allein im Abschnitt, schliesst das Bild oben und
     unten buendig mit der Abschnittskante ab – der Text daneben bleibt mittig. */
  .huelle > .paar:only-child > .paar__bild{
    margin-block:calc(-1 * var(--abstand));
  }

  .welten{grid-template-columns:repeat(3,1fr);}
  .raster--3{grid-template-columns:repeat(3,1fr);}
  .raster--4{grid-template-columns:repeat(4,1fr);}
  .schritte{grid-template-columns:repeat(4,1fr);}
  .tafeln{grid-template-columns:repeat(3,1fr);}
  .folgen{grid-template-columns:repeat(2,1fr);}
  .kontaktkarten{grid-template-columns:repeat(2,1fr);}

}

@media (min-width:1000px){
  .fuss__innen{flex-wrap:nowrap;justify-content:space-between;text-align:left;gap:2rem;}
  .fuss__links{justify-content:center;flex:1;}
  .fuss__recht{width:auto;flex-shrink:0;text-align:right;}
}

@media (min-width:1100px){
  .folgen{grid-template-columns:repeat(3,1fr);}
}

/* Bewusst KEIN Einblenden beim Scrollen.
   Jeder Text ist sichtbar, sobald er auf dem Bildschirm ist – ohne Wartezeit
   und ohne dass ein Skript das erst erlauben muss. Genau daran krankte die
   alte Fassung: Inhalte blieben unsichtbar, wenn die Animation nicht ausloeste. */

@media print{
  .kopf,.handymenue,.hinunter,.knopf-reihe{display:none !important;}
  body{background:#fff;}
}