/* ==========================================================================
   Kindertagespflege Funty, Maryna Rutz, Hungen
   Ein Stylesheet fuer den Onepager und die beiden Rechtstexte.

   Leitgedanke: schlicht, viel Luft, alles mittig, EINE Hintergrundfarbe
   auf der ganzen Seite. Keine wechselnden Streifen, keine Kaesten um
   jeden Text, keine leuchtenden Knoepfe.

   Aufbau:
     1  Schriften, selbst gehostet
     2  Farben und Grundwerte
     3  Grundgeruest
     4  Kopfbereich und Navigation
     5  Knoepfe
     6  Abschnitte und Ueberschriften
     7  Startbereich
     8  Bausteine
     9  Fragen und Antworten
    10  Kontakt und Formular
    11  Fussbereich und mobile Leiste
    12  Rechtstexte
    13  Bewegung und Barrierefreiheit
    14  Groessere Bildschirme
   ========================================================================== */

/* ---------- 1  Schriften ------------------------------------------------- */

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/quicksand-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;
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/quicksand-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 700;
  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;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 700;
  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;
}

/* ---------- 2  Farben und Grundwerte ------------------------------------- */

:root {
  /* Die eine Hintergrundfarbe der ganzen Seite. Nur hier aendern. */
  --grund:        #FAF6F0;

  --text:         #3E3A36;
  --leise:        #6E675F;
  --linie:        #E9E1D6;
  --linie-zart:   #F0E9DF;

  /* Akzente, bewusst gedeckt. Kein Leuchten. */
  --rose:         #A8514B;
  --rose-dunkel:  #8F443F;
  --rose-zart:    #F6E7E5;
  --gruen:        #3E6B4B;
  --gruen-zart:   #E8EFE6;
  --weiss:        #FFFFFF;

  --breite:       960px;
  --breite-text:  560px;
  --rund:         18px;
  --rund-gross:   24px;

  --kopfhoehe:    76px;
  --leiste:       0px;

  /* Abstaende. Grosszuegig, das ist der Kern des Entwurfs. */
  --luft:         76px;
  --auge-abstand: 26px;
}

*, *::before, *::after { box-sizing: border-box; }

/* ---------- 3  Grundgeruest ---------------------------------------------- */

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopfhoehe) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 16.5px;
  line-height: 1.75;
  overflow-x: hidden;
  padding-bottom: var(--leiste);
  text-align: center;
}

img, svg, picture { max-width: 100%; }
img { display: block; height: auto; }

/* Keine Worttrennung, nirgends. Woerter bleiben am Stueck. */
h1, h2, h3, h4, p, li, a, span, label, blockquote, figcaption, address {
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

h1, h2, h3, h4 {
  font-family: 'Quicksand', 'Segoe UI', system-ui, sans-serif;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  margin: 0 0 20px;
  letter-spacing: -.015em;
}

h1 { font-size: clamp(1.85rem, 5vw, 2.6rem); line-height: 1.18; }
h2 { font-size: clamp(1.4rem, 3.8vw, 1.85rem); }
h3 { font-size: 1.06rem; letter-spacing: 0; }
h4 { font-size: 1rem; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--rose);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--text); }

ul { padding: 0; list-style: none; margin: 0; }
li { margin: 0; }

/* Der Seitenrand ist bewusst grosszuegig, damit der Text auf dem Handy
   nicht bis an die Kante laeuft. */
.huelle {
  width: min(100% - 64px, var(--breite));
  margin-inline: auto;
}

.schmal { max-width: var(--breite-text); margin-inline: auto; }

.nur-lesen {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.weiter-zum-inhalt {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 200;
  background: var(--weiss);
  color: var(--text);
  padding: 12px 18px;
  font-weight: 700;
}
.weiter-zum-inhalt:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- 4  Kopfbereich und Navigation -------------------------------- */

/* Leiste ganz oben mit den freien Plaetzen. Farblich hervorgehoben, weil
   die freien Plaetze der wichtigste Grund fuer eine Anfrage sind.
   Die Zahl setzt main.js aus einer einzigen Stelle ein. */
.leiste-oben {
  display: block;
  padding: 15px 16px;
  min-height: 50px;
  background: #E1EBDD;
  border-bottom: 1px solid #D0DDCB;
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  font-size: clamp(.8rem, 3.7vw, .88rem);
  line-height: 1.4;
  color: var(--gruen);
  text-decoration: none;
  white-space: nowrap;
}
.leiste-oben:hover { color: var(--gruen); background: #D7E4D2; }
.leiste-oben .punkt {
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--gruen);
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.leiste-oben .mehr {
  margin-left: 4px;
  color: var(--text);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.kopf {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--grund);
  border-bottom: 1px solid var(--linie-zart);
}

.kopf-reihe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: var(--kopfhoehe);
  text-align: left;
}

.marke {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 6px 2px;
  min-height: 48px;
  text-decoration: none;
  color: var(--text);
  flex-shrink: 0;
}
.marke img { width: 44px; height: 44px; }

/* Zwischen Wortmarke und Zusatz liegt bewusst mehr Luft. */
.marke-text { display: flex; flex-direction: column; gap: 8px; }
.marke-name {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 1.24rem;
  line-height: 1;
  letter-spacing: .005em;
}
/* Funty in bunten Buchstaben: klare Grundfarben, leicht gedeckt, damit es
   sauber und nicht grell wirkt. Gilt in Kopf, Startueberschrift und Fuss. */
.funty-bunt span:nth-child(1) { color: #E04F4F; }
.funty-bunt span:nth-child(2) { color: #2F9B55; }
.funty-bunt span:nth-child(3) { color: #3A7FD5; }
.funty-bunt span:nth-child(4) { color: #E8A317; }
.funty-bunt span:nth-child(5) { color: #9361C9; }

.marke-zusatz {
  font-size: .6rem;
  line-height: 1;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--leise);
  font-weight: 700;
}

.navi-schalter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--linie);
  border-radius: 999px;
  padding: 0;
  color: var(--text);
  cursor: pointer;
}
.navi-schalter { position: relative; }
.navi-schalter .strich {
  position: absolute;
  left: 50%; top: 50%;
  width: 18px; height: 1.8px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.navi-schalter .strich:nth-child(1) { transform: translate(-50%, -4px); }
.navi-schalter .strich:nth-child(2) { transform: translate(-50%, 2.2px); }
.navi-schalter[aria-expanded="true"] .strich:nth-child(1) { transform: translate(-50%, -.9px) rotate(45deg); }
.navi-schalter[aria-expanded="true"] .strich:nth-child(2) { transform: translate(-50%, -.9px) rotate(-45deg); }

/* Mobiles Menue: gleitet weich von oben herein und blendet dabei ein.
   Die einzelnen Eintraege folgen ganz leicht versetzt. Beim Schliessen
   laeuft es rueckwaerts. */
.navi {
  display: block;
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  background: var(--grund);
  border-bottom: 1px solid var(--linie);
  box-shadow: 0 22px 30px -26px rgba(62, 58, 54, .28);
  padding: 6px 0 18px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-14px);
  pointer-events: none;
  transition: opacity .3s ease, transform .4s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .4s;
}
.navi.offen {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition: opacity .3s ease, transform .4s cubic-bezier(.2, .7, .2, 1), visibility 0s;
}

.navi ul {
  width: min(100% - 64px, var(--breite));
  margin-inline: auto;
}
.navi li {
  border-bottom: 1px solid var(--linie-zart);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .3s ease, transform .35s cubic-bezier(.2, .7, .2, 1);
}
.navi.offen li { opacity: 1; transform: none; }
.navi.offen li:nth-child(1) { transition-delay: .05s; }
.navi.offen li:nth-child(2) { transition-delay: .09s; }
.navi.offen li:nth-child(3) { transition-delay: .13s; }
.navi.offen li:nth-child(4) { transition-delay: .17s; }
.navi li:last-child { border-bottom: 0; }

.navi a {
  display: block;
  padding: 15px 2px;
  min-height: 48px;
  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--text);
  text-decoration: none;
  text-align: left;
}
.navi a:hover,
.navi a[aria-current="page"] { color: var(--rose); }

/* ---------- 5  Knoepfe ---------------------------------------------------- */
/* Bewusst zurueckhaltend: kleiner, ohne Schlagschatten, hoechstens ein
   gefuellter Knopf pro Bildausschnitt.                                     */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 12px 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: 'Quicksand', sans-serif;
  font-size: .97rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.knopf svg { width: 18px; height: 18px; flex-shrink: 0; }

.knopf--haupt { background: var(--rose); color: var(--weiss); }
.knopf--haupt:hover { background: var(--rose-dunkel); color: var(--weiss); }

.knopf--rand {
  background: none;
  color: var(--text);
  border-color: var(--linie);
}
.knopf--rand:hover { background: var(--weiss); color: var(--text); border-color: #D9CEBE; }

.knopf--wa { background: none; color: var(--gruen); border-color: #C6D6C2; }
.knopf--wa:hover { background: var(--gruen-zart); color: var(--gruen); }

.knopf-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

/* Ruhiger Textlink mit kleinem Pfeil */
.textlink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: .97rem;
  text-decoration: none;
  color: var(--rose);
  min-height: 44px;
}
.textlink svg { width: 16px; height: 16px; }
.textlink:hover { color: var(--rose-dunkel); }

/* ---------- 6  Abschnitte und Ueberschriften ----------------------------- */

.abschnitt { padding: var(--luft) 0; }
.abschnitt--schmal { padding: calc(var(--luft) * .62) 0; }

/* Trenner zwischen den Abschnitten: eine ruhige Reihe kleiner Elefanten,
   angelehnt an die Marienkaefer der Kindertagespflege Inheiden.
   Die Reihe ist 40 Pixel hoch und gleitet langsam und endlos nach rechts.
   Ausnahme: zwischen Startbereich und "Wo wir sind" steht bewusst nur eine
   feine Linie, siehe .abschnitt--fein. */
/* overflow-x: clip schneidet die gleitende Reihe seitlich ab, ohne sie oben
   und unten abzuschneiden. So entsteht nie ein seitliches Scrollen. */
.abschnitt--linie { position: relative; overflow-x: clip; }
.abschnitt--linie::before {
  content: "";
  position: absolute;
  top: -20px;
  /* Eine Kachel breiter als der Bildschirm, damit beim Gleiten links nie
     eine Luecke entsteht. */
  left: -60px; right: 0;
  height: 40px;
  /* Eine Kachel = ein Elefant plus Abstand, 60 Pixel breit. */
  background: url("../img/elefant-reihe-36.png") left top / 60px 40px repeat-x;
  pointer-events: none;
  /* Endlos gleiten von links nach rechts: genau eine Kachel weit, dann
     beginnt die Bewegung nahtlos von vorn. Ueber transform, das laeuft auf
     dem Handy fluessig und schont den Akku. */
  animation: elefanten-gleiten 3.2s linear infinite;
  will-change: transform;
}
@keyframes elefanten-gleiten {
  from { transform: translateX(0); }
  to   { transform: translateX(60px); }
}

/* Jede zweite Reihe gleitet in die Gegenrichtung, also von rechts nach links.
   Welche das sind, legt main.js der Reihe nach fest. Ohne JavaScript gleiten
   einfach alle nach rechts. */
.trenner-rueckwaerts::before { animation-direction: reverse; }

/* Feine Linie statt Elefanten, nur direkt unter dem Startbereich */
.abschnitt--fein { border-top: 1px solid var(--linie-zart); }

.kopfzeile {
  max-width: var(--breite-text);
  margin: 0 auto 44px;
}
.kopfzeile p {
  color: var(--leise);
  margin: 0;
  max-width: 440px;
  margin-inline: auto;
}

/* Kleine Ueberschrift ueber der grossen. Der Abstand darunter ist
   absichtlich gross, damit beide nicht aneinanderkleben. */
.auge {
  display: block;
  font-family: 'Quicksand', sans-serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--leise);
  margin: 0 0 var(--auge-abstand);
}

/* Drei kurze Angaben unter den Knoepfen. Jede bleibt in einer Zeile,
   die Schrift waechst mit der Bildschirmbreite mit. Die erste Zeile ist
   hervorgehoben, weil sie der Grund fuer eine Anfrage ist. */
.hinweispunkte {
  display: grid;
  gap: 11px;
  justify-content: center;
}
.hinweispunkte li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: clamp(.79rem, 3.85vw, .93rem);
  font-weight: 600;
  color: var(--leise);
}
.hinweispunkte svg { width: 14px; height: 14px; color: var(--gruen); flex-shrink: 0; }
.hinweispunkte li:first-child { color: var(--gruen); font-weight: 700; font-size: clamp(.9rem, 4.2vw, 1.02rem); }

/* ---------- 7  Startbereich ---------------------------------------------- */

.start {
  padding: 62px 0 54px;
}
.start h1 { margin-bottom: 22px; }
.start-lead {
  color: var(--leise);
  font-size: 1.06rem;
  max-width: 400px;
  margin: 0 auto 30px;
}
.start .knopf-reihe { margin-bottom: 34px; }

/* Statische Karte. Bewusst schmaler als die Fotobaender, damit der
   Seitenanfang ruhig bleibt und die Karte nicht wie ein Hero wirkt. */
.karte {
  max-width: 540px;
  margin-inline: auto;
  border-radius: var(--rund);
  overflow: hidden;
  border: 1px solid var(--linie);
}
.karte img { width: 100%; }

/* ---------- 8  Bausteine -------------------------------------------------- */

/* Vier kurze Merkmale, ohne Kasten */
.merkmale {
  display: grid;
  grid-template-columns: 1fr;
  gap: 46px;
  max-width: 800px;
  margin-inline: auto;
}
.merkmal h3 { margin-bottom: 8px; }
.merkmal p { color: var(--leise); font-size: .97rem; margin: 0 auto; max-width: 270px; }

.symbol {
  width: 42px; height: 42px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  color: var(--gruen);
}
.symbol svg { width: 26px; height: 26px; }

/* Etwas Farbe: jedes Merkmal in einer der Farben aus dem Schriftzug,
   auf einem zarten runden Grund in derselben Farbe. */
.symbol--rot, .symbol--gruen, .symbol--blau, .symbol--gelb {
  width: 58px; height: 58px;
  border-radius: 50%;
}
.symbol--rot   { color: #D94A45; background: #FBE6E4; }
.symbol--gruen { color: #2F9B55; background: #E2F2E7; }
.symbol--blau  { color: #3A7FD5; background: #E3EDFA; }
.symbol--gelb  { color: #D9930B; background: #FCF0D4; }

/* Tagesmutter */
.person { max-width: 560px; margin-inline: auto; }
.person-bild {
  width: min(100%, 320px);
  margin: 0 auto 34px;
  border-radius: var(--rund-gross);
  overflow: hidden;
}
.person-bild img { width: 100%; }
.person p { color: var(--leise); }
.person .netzwerk { font-size: .9rem; margin: 26px auto 0; max-width: 360px; }
.person .zitat {
  color: var(--text);
  font-size: 1.08rem;
  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
  max-width: 440px;
  margin: 0 auto 28px;
}

/* Kurze Punkteliste, mittig.
   Jede Angabe steht in genau EINER Zeile. Die Schrift waechst mit der
   Bildschirmbreite mit, damit auch die laengste Zeile
   "Qualifizierung zur Kindertagespflegeperson" bei 320 Pixel noch passt.
   Gemessen bei 375 Pixel: die Zeile braucht 281 Pixel, Platz sind 311.
   overflow:hidden ist die Notbremse, damit eine zu lange Zeile die Seite
   niemals breiter machen kann. */
.punkte {
  display: grid;
  gap: 13px;
  margin: 0 auto;
  text-align: center;
}
.punkte li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(.79rem, 3.85vw, .93rem);
  color: var(--leise);
}

/* Qualifikationen: zart gruen hinterlegt mit weichem gruenem Schatten,
   damit Eltern sie sofort sehen. Auf dem Handy ragt der Kasten ein wenig in
   den Seitenrand, damit jede Angabe weiterhin in eine Zeile passt. */
.punkte--hervor {
  background: #E8EFE6;
  border-radius: 22px;
  padding: 20px 14px;
  margin-inline: -12px !important;
  box-shadow: 0 14px 34px -16px rgba(62, 107, 75, .34), 0 0 0 1px rgba(62, 107, 75, .05);
}
.punkte--hervor li { color: var(--text); }

/* Tagesablauf */
.ablauf {
  display: grid;
  gap: 0;
  max-width: 430px;
  margin: 0 auto;
  text-align: left;
}
.ablauf li {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--linie-zart);
  align-items: baseline;
}
.ablauf li:last-child { border-bottom: 0; }
.ablauf-zeit {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: .9rem;
  color: var(--gruen);
  white-space: nowrap;
}
.ablauf-was { font-size: .99rem; }

/* Bildraster fuer Spielzimmer und Draussen: oben ein breites Foto ueber
   die ganze Breite, darunter quadratische Fotos, zwei nebeneinander. */
.bildraster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 800px;
  margin-inline: auto;
}
.bildraster picture { display: block; }
.bildraster img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--rund);
}
.bildraster .breit { grid-column: 1 / -1; }
.bildraster .breit img { aspect-ratio: 3 / 2; }

/* ---------- 9  Fragen und Antworten --------------------------------------- */

/* Fragen schmaler, damit die Zeilen angenehm kurz bleiben */
.fragen {
  max-width: 580px;
  margin: 0 auto;
  text-align: left;
}
.frage {
  border-bottom: 1px solid var(--linie-zart);
}
.frage:first-child { border-top: 1px solid var(--linie-zart); }

.frage summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 2px;
  min-height: 56px;
  cursor: pointer;
  list-style: none;
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--text);
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: '';
  width: 11px; height: 11px;
  border-right: 2px solid var(--leise);
  border-bottom: 2px solid var(--leise);
  transform: translateY(-2px) rotate(45deg);
  flex-shrink: 0;
  transition: transform .45s cubic-bezier(.2, .7, .2, 1), border-color .3s ease;
}
.frage summary { transition: color .3s ease; }
.frage summary:hover { color: var(--rose); }
.frage summary:hover::after { border-color: var(--rose); }

/* Ohne JavaScript zeigt [open] den Zustand. Mit JavaScript setzt main.js
   sofort beim Klick die Klasse ist-offen, damit sich der Pfeil gleichzeitig
   mit der Antwort dreht und nicht erst am Ende des Zuklappens. */
.frage[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.js .frage summary::after { transform: translateY(-2px) rotate(45deg); }
.js .frage.ist-offen summary::after { transform: translateY(2px) rotate(-135deg); }

/* Der Abstand unter der Antwort steckt in ::after statt im Innenabstand.
   So kann main.js die Hoehe sauber von 0 an aufziehen, ohne dass am Anfang
   ein Rest stehen bleibt. */
.frage-text {
  padding: 0 2px;
  overflow: hidden;
  color: var(--leise);
  font-size: .97rem;
}
.frage-text::after { content: ''; display: block; height: 24px; }
.frage-text p { margin-bottom: .9em; }

.fragen-mehr { margin: 40px 0 0; }

/* Eigene Fragenseite: vier Themen, jedes mit einem Farbpunkt aus dem
   bunten Schriftzug. */
.fragen-gruppe + .fragen-gruppe { margin-top: 64px; }
.fragen-thema {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 22px;
  font-size: 1.22rem;
}
.thema-punkt {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.thema-punkt--rot   { background: #E04F4F; }
.thema-punkt--gruen { background: #2F9B55; }
.thema-punkt--blau  { background: #3A7FD5; }
.thema-punkt--gelb  { background: #E8A317; }

/* ---------- 10  Kontakt und Formular -------------------------------------- */

.wege {
  display: grid;
  gap: 10px;
  max-width: 400px;
  margin: 0 auto 44px;
}
.weg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 52px;
  padding: 12px 18px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  font-size: .99rem;
  background: none;
  transition: background-color .18s ease;
}
.weg:hover { background: var(--weiss); color: var(--text); }
.weg svg { width: 18px; height: 18px; color: var(--gruen); flex-shrink: 0; }

.formular {
  max-width: 430px;
  margin: 0 auto;
  text-align: left;
}

.feld { margin-bottom: 16px; }
.feld label {
  display: block;
  font-weight: 700;
  font-size: .88rem;
  margin-bottom: 7px;
  color: var(--text);
}
.feld .pflicht { color: var(--rose); }
.feld input,
.feld select,
.feld textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;
  color: var(--text);
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: 12px;
  padding: 12px 14px;
  min-height: 48px;
}
.feld textarea { min-height: 104px; resize: vertical; }
.feld select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%278%27 viewBox=%270 0 12 8%27%3E%3Cpath d=%27M1 1.5l5 5 5-5%27 fill=%27none%27 stroke=%27%236E675F%27 stroke-width=%271.8%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}
.feld-hinweis { font-size: .84rem; color: var(--leise); margin-top: 6px; }
.feld input::placeholder,
.feld textarea::placeholder { color: #A79E93; }
.feld input:focus,
.feld select:focus,
.feld textarea:focus {
  border-color: var(--gruen);
  outline: 1px solid var(--gruen-zart);
}
.feld--fehler input,
.feld--fehler textarea { border-color: var(--rose); }
.feld-fehler {
  display: none;
  color: var(--rose);
  font-size: .87rem;
  font-weight: 700;
  margin-top: 6px;
}
.feld--fehler .feld-fehler { display: block; }

.feld-paar { display: grid; gap: 0; }

.zustimmung {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 11px;
  align-items: start;
  margin: 20px 0;
  font-size: .89rem;
  color: var(--leise);
}
.zustimmung input {
  width: 24px; height: 24px;
  min-height: 0;
  margin: 2px 0 0;
  accent-color: var(--gruen);
  padding: 0;
}
.zustimmung label { font-weight: 400; margin: 0; font-size: .89rem; }

.honigtopf {
  position: absolute;
  left: -5000px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.formular-hinweis {
  font-size: .84rem;
  color: var(--leise);
  margin-top: 14px;
  text-align: center;
}

.meldung {
  border-radius: 12px;
  padding: 13px 16px;
  margin-bottom: 18px;
  font-weight: 600;
  font-size: .95rem;
}
.meldung--gut { background: var(--gruen-zart); }
.meldung--schlecht { background: var(--rose-zart); }
.meldung[hidden] { display: none; }

.formular button[type="submit"] { width: 100%; }
.formular button[disabled] { opacity: .55; cursor: progress; }

/* ---------- 11  Fussbereich und mobile Leiste ----------------------------- */

/* Fussbereich im selben zarten Gruen wie die Leiste ganz oben. Er hebt
   sich farblich ab, deshalb steht darueber keine Elefantenreihe.
   Zwei Spalten: Funty und Kontakt. Am Handy untereinander, ab 800 px
   nebeneinander. Bewusst kompakt gehalten. Die Kontaktangaben stehen als
   kleiner Block mittig, innen linksbuendig, damit die Symbole sauber
   untereinander stehen. Ganz unten eine eigene Zeile fuer Copyright und
   Rechtliches. */
.fuss {
  padding-top: 48px;
  background: #E1EBDD;
  border-top: 1px solid #D0DDCB;
  font-size: .95rem;
  line-height: 1.65;
  color: #4F4A45;
}
.fuss a { color: #4F4A45; text-decoration: none; }
.fuss a:hover { color: var(--text); text-decoration: underline; }
.fuss address { font-style: normal; }

.fuss-raster {
  display: grid;
  gap: 36px;
  padding-bottom: 40px;
}

.fuss .fuss-marke {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  color: var(--text);
  text-align: left;
}
.fuss .fuss-marke:hover { text-decoration: none; }
.fuss-marke img { width: 52px; height: 52px; }
.fuss-spalte--marke p { margin: 0; }

.fuss-titel {
  margin: 0 0 16px;
  font-family: 'Quicksand', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gruen);
}

.fuss-liste {
  display: inline-grid;
  gap: 10px;
  text-align: left;
}
.fuss-liste li {
  display: grid;
  grid-template-columns: 18px auto;
  column-gap: 12px;
  align-items: start;
}
.fuss-liste svg {
  width: 18px; height: 18px;
  margin-top: 3.5px;
  color: var(--gruen);
}
.fuss-liste a { display: inline-block; padding: 3px 0; margin: -3px 0; }

.fuss-unten {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 0 22px;
  border-top: 1px solid #D0DDCB;
  font-size: .86rem;
}
.fuss-unten p { margin: 0; }
.fuss-rechtliches {
  order: -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 24px;
}
.fuss-rechtliches a { display: inline-flex; align-items: center; min-height: 36px; }
.fuss .fuss-insta { justify-content: center; min-width: 36px; }
.fuss-insta svg { width: 20px; height: 20px; }

@media (min-width: 800px) {
  .fuss { padding-top: 56px; }
  .fuss-raster {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    align-items: center;
    padding-bottom: 48px;
  }
  .fuss-unten { flex-direction: row; justify-content: space-between; padding: 12px 0 16px; }
  .fuss-rechtliches { order: 0; }
}

.mobilleiste {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  display: none;
  gap: 9px;
  padding: 8px 14px calc(8px + env(safe-area-inset-bottom));
  background: var(--grund);
  border-top: 1px solid var(--linie);
  transition: transform .25s ease;
}
.mobilleiste .knopf { flex: 1 1 0; min-height: 44px; font-size: .92rem; padding: 10px 8px; }
.mobilleiste.versteckt { transform: translateY(130%); }

/* ---------- 12  Rechtstexte ----------------------------------------------- */

.recht {
  max-width: var(--breite-text);
  margin-inline: auto;
  text-align: left;
}
.recht h2 { font-size: 1.16rem; margin-top: 2.2em; }
.recht h2:first-of-type { margin-top: 0; }
.recht p, .recht li { color: var(--leise); font-size: .97rem; }
.recht ul { list-style: disc; padding-left: 1.2em; margin: 0 0 1.15em; }
.recht li { margin-bottom: .4em; }
.recht strong { color: var(--text); }
.recht address { font-style: normal; color: var(--leise); line-height: 1.9; }
.recht .merke {
  border-left: 2px solid var(--linie);
  padding-left: 18px;
  margin: 26px 0;
}

/* ---------- 13  Bewegung und Barrierefreiheit ----------------------------- */

.js .zeigen {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .7s ease, transform .7s ease;
}
.js .zeigen.sichtbar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .abschnitt--linie::before { animation: none !important; }
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .js .zeigen { opacity: 1; transform: none; }
}

/* ---------- 14  Groessere Bildschirme ------------------------------------- */

@media (max-width: 799px) {
  :root { --leiste: 66px; }
  .mobilleiste { display: flex; }
}

@media (max-width: 359px) {
  .huelle { width: min(100% - 40px, var(--breite)); }
}

@media (max-width: 389px) {
  :root { --kopfhoehe: 68px; }
  .marke img { width: 40px; height: 40px; }
  .marke-name { font-size: 1.12rem; }
  .knopf { padding: 11px 20px; font-size: .93rem; }
  .ablauf li { grid-template-columns: 92px 1fr; gap: 12px; }
}

@media (min-width: 640px) {
  .punkte--hervor { max-width: 470px; margin-inline: auto !important; padding: 24px 28px; }
  .merkmale { grid-template-columns: repeat(2, 1fr); gap: 50px 40px; }
  .feld-paar { grid-template-columns: 1fr 1fr; gap: 0 14px; }
}

@media (min-width: 900px) {
  :root {
    --luft: 120px;
    --auge-abstand: 28px;
  }
  body { font-size: 17px; }

  .start { padding: 96px 0 80px; }
  .start-lead { font-size: 1.1rem; margin-bottom: 34px; }

  .navi-schalter { display: none; }
  /* Auf grossen Bildschirmen steht das Menue fest in der Kopfzeile,
     die Gleitbewegung wird hier ausgeschaltet. */
  .navi {
    display: block;
    position: static;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition: none;
  }
  .navi ul {
    display: flex;
    align-items: center;
    gap: 6px;
    width: auto;
    margin: 0;
  }
  .navi li { border: 0; opacity: 1; transform: none; transition: none; }
  .navi a {
    padding: 10px 14px;
    min-height: 44px;
    font-size: .96rem;
    font-weight: 600;
    border-radius: 999px;
  }
  .navi a:hover { background: var(--weiss); color: var(--text); }

  .merkmale { grid-template-columns: repeat(4, 1fr); gap: 44px 30px; }
  .kopfzeile { margin-bottom: 58px; }
  .person-bild { width: 340px; margin-bottom: 40px; }
  .wege {
    display: flex;
    justify-content: center;
    max-width: none;
    gap: 10px;
    flex-wrap: wrap;
  }
  .weg { min-width: 210px; }
}