/* mitanand Funnel — servus.mitanand.app */

/* ── Nunito (lokal, DSGVO) ── */
@font-face {
  font-family: 'Nunito'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('../fonts/nunito-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Nunito'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('../fonts/nunito-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Nunito'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('../fonts/nunito-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Nunito'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('../fonts/nunito-latin-ext.woff2') format('woff2');
  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: 'Nunito'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('../fonts/nunito-latin.woff2') format('woff2');
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Basis ── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #058ece; }
body {
  font-family: 'Nunito', 'Helvetica Neue', Helvetica, sans-serif;
  color: #ffffff;
}
a { color: #ffffff; }
a:hover { color: #dff2fb; }

/* ── Layout ── */
.page {
  --berge-h: clamp(90px, 20vh, 190px);
  position: relative;
  min-height: 100vh;
  background: #058ece;
  display: flex;
  flex-direction: column;
  /* nur seitlich clippen (Berg-Parallaxe); vertikal darf die Seite
     wachsen und scrollen — sonst rutscht der Inhalt bei niedrigen
     Fenstern (Laptop) oben aus dem Bild. */
  overflow-x: hidden;
}
.top {
  /* auto-Basis: schrumpft nie unter die eigene Inhaltshoehe */
  flex: 1 1 auto;
  display: flex;
  flex-direction: row-reverse;
  /* stretch: beide Spalten gleich hoch — dadurch hat die Logo-Spalte eine
     echte Container-Hoehe, an der sich das Logo ausrichten kann (kein vh). */
  align-items: stretch;
  justify-content: center;
  gap: 48px;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 16px 40px 8px;
}
.top .col-form {
  flex: 1.4 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(10px, 2vh, 20px);
}
/* Die Logo-Spalte ist ein Groessen-Container: Logo und Wortmarke messen
   sich per cq-Einheiten an IHRER Hoehe/Breite (die durch stretch von der
   Formular-Spalte kommt) — nie an der Bildschirmhoehe. */
.top .col-logo {
  flex: 1 1 0;
  min-width: 0;
  container-type: size;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(12px, 6cqh, 28px);
}
.logo {
  width: min(58cqh, 80cqw, 300px);
  height: auto;
  border-radius: 13%;
  box-shadow: 0 18px 40px rgba(3, 60, 90, 0.35), 0 6px 14px rgba(3, 60, 90, 0.25);
}
.dahoam {
  height: min(13cqh, 51px);
  width: auto;
  max-width: 90cqw;
  object-fit: contain;
}
/* Fallback fuer Browser ohne Container-Queries */
@supports not (width: 1cqh) {
  .logo { width: clamp(110px, 30vh, 300px); }
  .dahoam { width: clamp(170px, 36vh, 380px); height: auto; }
}
h1 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(24px, 4.5vh, 38px);
  font-weight: 800;
  line-height: 1.2;
}

/* ── Formular ── */
form.anfrage {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.6vh, 16px);
}
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, 1.6vh, 16px); }
.row-flex { display: flex; gap: clamp(8px, 1.6vh, 16px); }
input[type="text"], input[type="email"], input[type="tel"], select {
  height: clamp(38px, 6.5vh, 52px);
  border: none;
  border-radius: 8px;
  padding: 0 18px;
  font-size: 17px;
  font-family: inherit;
  color: #0b4d6e;
  background: #ffffff;
  width: 100%;
  min-width: 0;
}
select { padding: 0 10px; cursor: pointer; }
select.gemeinde-typ { flex: 0 0 26%; }
input.gemeinde-name { flex: 1; }
input.feld-mail { flex: 1; }
input.feld-tel { flex: 0 0 32%; }
input::placeholder { color: #8fb8cc; }
input:focus, select:focus { outline: 3px solid rgba(255, 255, 255, 0.55); outline-offset: 1px; }
select option { background: #ffffff; color: #0b4d6e; font-size: 16px; padding: 10px 14px; }
select option:checked { background: #058ece; color: #ffffff; }
button.absenden {
  flex: 0 0 auto;
  padding: 0 26px;
  height: clamp(38px, 6.5vh, 52px);
  border: none;
  border-radius: 8px;
  background: #ffffff;
  color: #058ece;
  font-size: 16px;
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
button.absenden .btn-text { font-size: 17px; font-weight: 600; white-space: nowrap; }
button.absenden:hover { background: #eaf6fc; }
button.absenden[disabled] { opacity: 0.6; cursor: wait; }
label.berechtigt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.45;
  cursor: pointer;
}
label.berechtigt input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  appearance: none;
  -webkit-appearance: none;
  background: #ffffff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  flex: 0 0 auto;
}
label.berechtigt input[type="checkbox"]:checked {
  background: #ffffff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M4 10.5 8.5 15 16 6" fill="none" stroke="%23058ece" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / 14px no-repeat;
}
.form-fehler {
  background: rgba(180, 30, 30, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 15px;
}
/* Honeypot: fuer Menschen unsichtbar */
.hp-feld { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Unterer Bereich: Text + Portraet ── */
.bottom {
  display: flex;
  align-items: center;
  gap: 48px;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 8px 40px 12px;
  position: relative;
  z-index: 2;
}
.bottom .text {
  flex: 1;
  color: #ffffff;
  font-size: clamp(13px, 2vh, 16px);
  line-height: 1.55;
}
.bottom .text .lead { margin: 0 0 14px; font-weight: 700; font-size: 19px; }
.bottom .text p { margin: 0 0 12px; }
.bottom .text p:last-child { margin: 0; }
.bottom .text p.kontakt { margin-top: 14px; font-weight: 600; }
.bottom .text p.kontakt a { text-decoration: underline; white-space: nowrap; }
.portrait-col {
  /* Breite folgt der Hoehe, faellt aber nie unter die Textbreite der
     Bildunterschrift — sonst bricht der Name unschoen um. */
  flex: 0 0 auto;
  width: clamp(150px, 22vh, 220px);
  min-width: 190px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.portrait-frame {
  width: 100%;
  aspect-ratio: 733 / 1070; /* Seitenverhaeltnis der Portraet-Datei */
  height: auto;
  position: relative;
}
.portrait-caption {
  margin: 0;
  text-align: center;
  color: #ffffff;
  line-height: 1.35;
}
.portrait-caption strong {
  display: block;
  font-size: clamp(12px, 1.7vh, 15px);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.portrait-caption span {
  display: block;
  font-size: clamp(11px, 1.5vh, 13px);
  opacity: 0.9;
  white-space: nowrap;
}
/* Freigestelltes Portraet mit eingebautem blauen Kreis — kein Crop noetig */
.portrait-clip {
  position: absolute;
  inset: 0;
}
.portrait-clip img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ── CPM-Gruppe-Claim ueber der Silhouette ── */
/* Sitzt frei ueber der Silhouette (nimmt keinen Layout-Platz weg) —
   Abstand von unten = Bandhoehe der Berge (--berge-h) + kleiner Abstand. */
/* Steht im Fluss direkt unter dem Textblock — schmal genug, um kaum
   Hoehe zu kosten, und damit nie ueber anderen Inhalten. */
.cpm-claim {
  flex: 0 0 auto;
  margin: 0;
  padding: 2px 40px 6px;
  text-align: center;
  position: relative;
  z-index: 3;
}
.cpm-claim img {
  width: min(190px, 44vw);
  height: auto;
  opacity: 0.92;
}

/* ── Pflichtangaben-Link (auf jeder Seite, direkt ueber der Silhouette) ── */
.rechtliches {
  flex: 0 0 auto;
  margin: 0;
  padding: 0 40px 6px;
  text-align: center;
  font-size: 13px;
  position: relative;
  z-index: 3;
}
.rechtliches a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
}
.rechtliches a:hover { color: #ffffff; text-decoration: underline; }

/* ── Landschafts-Silhouette (3 Schichten, Parallaxe) ── */
.berge {
  width: 100%;
  position: relative;
  /* feste Hoehe: haelt sich zurueck, wird aber nie zusammengequetscht */
  flex: 0 0 var(--berge-h);
  min-height: 90px;
  overflow: hidden;
  pointer-events: none;
}
.berge img {
  position: absolute;
  inset: 0;
  width: 104%;
  max-width: none;
  height: 100%;
  /* cover statt fill: die Silhouette wird beschnitten statt gestaucht,
     die Berge behalten also immer ihre Form. */
  object-fit: cover;
  object-position: center bottom;
}
.berge .hinten { animation: drift-back 26s ease-in-out infinite alternate; }
.berge .mitte  { animation: drift-mid 18s ease-in-out infinite alternate; }
.berge .vorne  { animation: drift-front 12s ease-in-out infinite alternate; }
@keyframes drift-back  { from { transform: translateX(0); }   to { transform: translateX(-4%); } }
@keyframes drift-mid   { from { transform: translateX(-4%); } to { transform: translateX(0); } }
@keyframes drift-front { from { transform: translateX(0); }   to { transform: translateX(-2%); } }

/* ── Danke-/Zugangs-Seite ── */
.center-card {
  /* auto-Basis: schrumpft nie unter die eigene Inhaltshoehe */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* "safe center": bei zu wenig Platz wird nach oben NICHT abgeschnitten
     (sonst verschwindet das Logo aus dem Bild), sondern gescrollt. */
  justify-content: safe center;
  overflow-y: auto;
  text-align: center;
  gap: clamp(8px, 1.8vh, 20px);
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
  padding: 20px 40px;
}
/* Fallback fuer Browser ohne "safe": lieber oben buendig als abgeschnitten */
@supports not (justify-content: safe center) {
  .center-card { justify-content: flex-start; }
  .center-card > :first-child { margin-top: auto; }
  .center-card > :last-child  { margin-bottom: auto; }
}
.center-card p.gross { font-size: clamp(16px, 2.6vh, 20px); line-height: 1.55; margin: 0; }

/* Rechtstexte (Impressum): laufender Text, deshalb durchgehend links-
   buendig und oben buendig statt zentriert — sonst springt die Seite.
   Drei Dinge muessen dafuer weg, sonst wirkt die Seite weiter mittig:
     align-items  — sonst sitzen die Kinder als schmale Bloecke mittig,
                    auch wenn ihr Text schon linksbuendig ist
     margin       — .center-card hat "margin: 0 auto", die Karte selbst
                    schwebt sonst mit gleichem Rand links und rechts
                    (auf 1280px waren das 292px Luft je Seite)
     text-align   — fuer den Text in den Bloecken
   max-width bleibt: laenger als ~680px wird eine Textzeile schlecht
   lesbar. Die Karte fuellt am Handy ohnehin die volle Breite. */
.center-card.rechtstext {
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  gap: 0;
  max-width: 680px;
  margin-left: 0;
  margin-right: auto;
}
.center-card.rechtstext h1 { margin: 8px 0 4px; }
.center-card.rechtstext h2 {
  font-size: 17px;
  margin: 22px 0 4px;
  color: rgba(255, 255, 255, 0.85);
}
.center-card.rechtstext p { margin: 0; line-height: 1.6; font-size: 15px; }
.center-card.rechtstext .btn-weiss { margin-top: 28px; }
/* Begruessung: "Willkommen" oben, Gemeindename darunter in einer Zeile.
   Lange Namen (z.B. "Verwaltungsgemeinschaft ...") skalieren mit der
   Viewport-Breite herunter statt umzubrechen. */
.center-card h1.willkommen { margin: 0; line-height: 1.15; }
.center-card h1.willkommen .zeile-gruss { font-size: clamp(17px, 2.4vh, 22px); font-weight: 700; }
/* QR-Code fuer den Zugang aufs Handy */
.qr-block { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.qr-bild {
  background: #ffffff;
  padding: 8px;
  border-radius: 10px;
  line-height: 0;
  box-shadow: 0 10px 24px rgba(3, 60, 90, 0.25);
}
.qr-bild svg { width: clamp(88px, 11vh, 128px); height: auto; }
.center-card h1.willkommen .zeile-gruss,
.center-card h1.willkommen .zeile-gemeinde { display: block; }
.center-card h1.willkommen .zeile-gemeinde {
  white-space: nowrap;
  /* Schriftgroesse aus der Namenslaenge (--gem-chars, von zugang.php
     gesetzt): lange Namen werden klein genug, um in eine Zeile zu passen. */
  /* nie groesser als "Willkommen" (1em), nach unten bis 12px */
  font-size: max(12px, min(1em, calc(min(76vw, 620px) / (var(--gem-chars, 20) * 0.56))));
}
.center-card .logo-klein {
  width: clamp(72px, 12vh, 130px);
  flex: 0 0 auto;
  height: auto;
  border-radius: 13%;
  box-shadow: 0 18px 40px rgba(3, 60, 90, 0.35), 0 6px 14px rgba(3, 60, 90, 0.25);
}
.btn-weiss {
  display: inline-block;
  background: #ffffff;
  color: #058ece;
  font-size: 19px;
  font-weight: 800;
  padding: 14px 34px;
  border-radius: 10px;
  text-decoration: none;
  border: none;
  cursor: pointer;
}
.btn-weiss:hover { background: #eaf6fc; color: #058ece; }

/* Countdown */
.countdown {
  display: flex;
  gap: clamp(10px, 2vw, 22px);
  justify-content: center;
}
.countdown .einheit {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 12px;
  min-width: clamp(72px, 10vw, 104px);
  padding: clamp(10px, 2vh, 18px) 8px;
}
.countdown .zahl {
  font-size: clamp(30px, 6vh, 52px);
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.countdown .label {
  font-size: clamp(12px, 1.8vh, 15px);
  opacity: 0.85;
  margin-top: 4px;
}
.countdown.abgelaufen .zahl { opacity: 0.5; }
.hinweis-klein { font-size: 14px; opacity: 0.8; margin: 0; }

/* Zwischenbereich (800–1000px Fensterhoehe): Layout bleibt wie gehabt,
   nur die vertikalen Abstaende und das Bergband werden leicht getrimmt,
   damit der CPM-Claim ohne Scrollen mit ins Bild passt. */
@media (min-height: 801px) and (max-height: 1000px) {
  .page { --berge-h: clamp(90px, 16vh, 160px); }
  .top { padding-bottom: 4px; }
  .bottom { padding: 4px 40px 6px; }
  .cpm-claim { padding: 0 40px 4px; }
  .cpm-claim img { width: min(170px, 40vw); }
}

/* Niedrige Fenster (Laptop-Displays): Startseite kompakter, damit sie
   ohne Scrollen ins Bild passt und die Berge unten nicht schrumpfen. */
@media (max-height: 800px) {
  /* Der obere Block darf den Restplatz nicht mehr aufsaugen — sonst
     klafft beim Zusammenziehen eine Luecke zwischen Formular und Text.
     Stattdessen sitzt der gesamte Inhalt mittig auf der Seite. */
  /* definierte Seitenhoehe: dadurch bekommt der obere Block eine echte
     Hoehe, an der sich das Logo ausrichten kann (statt vh). */
  .top { flex: 1 1 auto; min-height: 0; padding: 10px 40px 4px; gap: 36px; }
  .top .col-logo { gap: 12px; }
  h1 { font-size: clamp(20px, 3.4vh, 28px); }
  .bottom { padding: 4px 40px 8px; gap: 36px; }
  .bottom .text { font-size: clamp(12px, 1.7vh, 15px); line-height: 1.45; }
  .bottom .text .lead { font-size: 17px; margin-bottom: 8px; }
  .bottom .text p { margin-bottom: 8px; }
  .portrait-col { width: clamp(120px, 17vh, 170px); }
}

/* Erst bei deutlich kleineren Fenstern als Full HD: die Berge nehmen dem
   Inhalt keinen Platz mehr weg, sondern liegen dezent im Hintergrund am
   unteren Rand — dadurch bleiben sie in voller Form (kein Stauchen).
   Auf Full-HD-Schirmen bleibt der Hintergrund unveraendert deckend. */
@media (max-height: 800px) {
  .page {
    --berge-h: max(110px, 30vh);
    position: relative;
    /* Mindestabstand des Inhalts zum unteren Rand */
    padding-bottom: 6vh;
  }
  .berge {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    flex: 0 0 auto;
    /* Bandhoehe ~30% der Fensterhoehe, nie unter 110px */
    height: max(110px, 30vh);
    opacity: 0.55;
    z-index: 0;
  }
  .top, .bottom, .center-card { position: relative; z-index: 2; }
}

/* Sehr niedrige Fenster (kleine Handys, Notebook-Displays): auch die
   Zugangs-/Danke-Seite kompakter, damit Logo oben und QR unten passen. */
@media (max-height: 780px) {
  .center-card { gap: clamp(6px, 1.4vh, 14px); padding: 14px 24px; }
  .center-card .logo-klein { width: clamp(58px, 9vh, 92px); }
  .center-card p.gross { font-size: clamp(14px, 2vh, 17px); }
  .countdown .einheit { min-width: clamp(58px, 8vw, 84px); padding: 8px 6px; }
  .countdown .zahl { font-size: clamp(24px, 4.6vh, 38px); }
  .btn-weiss { padding: 11px 26px; font-size: 17px; }
  .qr-bild { padding: 6px; }
  .qr-bild svg { width: clamp(72px, 9vh, 104px); }
  .berge { flex: 0 0 clamp(80px, 15vh, 130px); }
}

/* ── Mobil ── */
@media (max-width: 820px) {
  .page { height: auto; min-height: 100vh; overflow: visible; }
  /* Am Handy stehen die Bereiche untereinander und die Seite scrollt.
     Sie duerfen deshalb NICHT auf die Resthoehe zusammenschrumpfen: mit
     "flex: 1 1 0" + "min-height: 0" fiel .top auf 0 Hoehe zusammen, sobald
     der Seiteninhalt hoeher als der Bildschirm wurde — Ueberschrift,
     Formular und Logo lagen dann uebereinander im Text darunter.
     "flex: 1 0 auto" = Hoehe nach Inhalt, darf wachsen, nie schrumpfen. */
  .top, .center-card { flex: 1 0 auto; min-height: auto; }
  .center-card { overflow: visible; }
  .top {
    flex-direction: column;
    gap: 22px;
    padding: 28px 22px 8px;
  }
  /* Am Handy hat die Spalte keine feste Hoehe -> Groessen-Containment
     wuerde sie auf 0 kollabieren lassen. Feste Bildbreiten stattdessen. */
  .top .col-logo { container-type: normal; flex-direction: row; gap: 16px; }
  .dahoam { height: auto; width: min(58vw, 240px); max-width: none; }
  .logo { width: 92px; }
  .dahoam { width: min(58vw, 240px); }
  h1 { font-size: 26px; }
  .row-flex { flex-wrap: wrap; }
  select.gemeinde-typ { flex: 0 0 100%; }
  input.feld-tel { flex: 1 1 100%; }
  button.absenden { flex: 1 1 100%; height: 48px; }
  .bottom { flex-direction: column; gap: 22px; padding: 8px 22px 16px; }
  .portrait-col { flex: 0 0 auto; width: min(60vw, 220px); }
  .berge { flex: 0 0 16vh; }
}