/* ============================================================
   Atzgersdorfer Spielkinder
   Ein einziges Stylesheet. Keine externen Schriften, keine
   externen Skripte, kein Build-Schritt. Mobile zuerst.
   ============================================================ */

/* ---------- Schriften ----------
   Beide liegen lokal im Ordner assets/fonts und stehen unter der
   SIL Open Font License (Lizenztexte liegen daneben). Es wird nichts
   von einem fremden Server geladen.
   Baloo 2  = die runde, verspielte Schrift für Überschriften
   Nunito   = die runde, gut lesbare Schrift für den Fließtext        */

@font-face {
  font-family: "Baloo 2";
  src: url("../fonts/baloo2-latin.woff2") format("woff2");
  font-weight: 400 800; 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+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Baloo 2";
  src: url("../fonts/baloo2-latin-ext.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 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";
  src: url("../fonts/nunito-latin.woff2") format("woff2");
  font-weight: 400 800; 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+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito";
  src: url("../fonts/nunito-latin-ext.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --tuerkis:      #1B87A0;
  --tuerkis-hell: #E4F4F8;
  --orange:       #E8760B;
  --orange-hell:  #FFF0DC;
  --gruen:        #6E8C12;
  --gruen-hell:   #F1F6DC;
  --pink:         #C43E77;
  --pink-hell:    #FCE9F1;
  --gelb:         #F5B301;

  --papier:       #FFFCF5;
  --karte:        #FFFFFF;
  --text:         #2A2B26;
  --text-leise:   #5F6157;
  --linie:        #E6E2D6;

  --radius:       18px;
  --radius-gross: 28px;
  --schatten:     0 2px 4px rgba(42,43,38,.05), 0 8px 20px rgba(42,43,38,.07);
  --schatten-tief:0 4px 8px rgba(42,43,38,.07), 0 16px 36px rgba(42,43,38,.11);

  --schrift: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
  --schrift-titel: "Baloo 2", "Nunito", "Segoe UI", system-ui, sans-serif;
  --breite: 1080px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--papier);
  overflow-x: hidden;
}

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

a { color: var(--tuerkis); }
a:hover { color: var(--orange); }

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Grundbausteine ---------- */

.huelle {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: 18px;
}

.abschnitt { padding-block: 44px; }
.abschnitt--eng { padding-block: 30px; }

.abschnitt--tuerkis { background: var(--tuerkis-hell); }
.abschnitt--gruen   { background: var(--gruen-hell); }
.abschnitt--orange  { background: var(--orange-hell); }
.abschnitt--pink    { background: var(--pink-hell); }

h1, h2, h3 {
  font-family: var(--schrift-titel);
  line-height: 1.15;
  margin: 0 0 .5em;
  letter-spacing: 0;
  /* Lange deutsche Wörter wie "Datenschutzerklärung" duerfen umbrechen,
     statt am Handy über den Rand hinauszuragen. */
  overflow-wrap: break-word;
  hyphens: auto;
}
h1 { font-size: 2.15rem; color: var(--tuerkis); }
h2 { font-size: 1.6rem; color: var(--tuerkis); }
h3 { font-size: 1.2rem; color: var(--orange); }

h2.mit-punkt::after {
  content: "";
  display: block;
  width: 54px;
  height: 6px;
  margin-top: 12px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--orange), var(--gelb));
}

p { margin: 0 0 1em; }
p.vorspann { font-size: 1.12rem; color: var(--text-leise); }
.leise { color: var(--text-leise); }
.klein { font-size: .92rem; }

/* ---------- Kopf ---------- */

.kopf {
  background: var(--karte);
  border-bottom: 4px solid var(--tuerkis);
  position: relative;
  z-index: 5;
}

.kopf__zeile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 12px;
}

.kopf__logo { flex: 0 0 auto; }
.kopf__logo img {
  width: 54px; height: 54px;
  border-radius: 14px;
  box-shadow: var(--schatten);
}

.kopf__namen { min-width: 0; }
.kopf__marke {
  display: block;
  font-family: var(--schrift-titel);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--tuerkis);
  text-decoration: none;
  line-height: 1.1;
}
.kopf__spruch {
  display: block;
  font-size: .82rem;
  color: var(--pink);
  font-style: italic;
}

/* Navigation: umbrechende Pillen, immer sichtbar, ohne JavaScript */
.nav { padding-bottom: 12px; }
.nav ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.nav a {
  padding: 8px 13px;
  border-radius: 999px;
  background: var(--tuerkis-hell);
  color: #14606F;
  text-decoration: none;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.3;
  min-height: 42px;
  display: flex;
  align-items: center;
}
.nav a:hover { background: var(--tuerkis); color: #fff; }
.nav a[aria-current="page"] { background: var(--tuerkis); color: #fff; }

/* ---------- Sprungmarke für Tastatur ---------- */
.sprung {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--orange);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 var(--radius) 0;
  z-index: 50;
  text-decoration: none;
  font-weight: 700;
}
.sprung:focus { left: 0; }

/* ---------- Startkopf ----------
   Bewusst ohne Foto: die vorhandenen Handyfotos sind für eine Fläche
   dieser Größe zu klein und zu unscharf. Stattdessen Farbe, Logo und
   die fünf Gruppengrafiken. Bleibt in jeder Auflösung gestochen scharf. */

.held {
  position: relative;
  /* Zwei weich auslaufende Farbwolken über dem Grundverlauf – reines CSS, kein Bild */
  background:
    radial-gradient(440px 440px at 88% -10%, rgba(255,178,0,.38), rgba(255,178,0,0) 68%),
    radial-gradient(380px 380px at -8% 106%, rgba(155,186,31,.40), rgba(155,186,31,0) 68%),
    linear-gradient(160deg, #2AA3BE 0%, #1B87A0 55%, #14707F 100%);
  color: #fff;
  overflow: hidden;
  padding-block: 34px 30px;
}
.held .huelle { position: relative; z-index: 1; }

.held__logo {
  width: 96px; height: 96px;
  border-radius: 26px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  margin-bottom: 18px;
}
.held h1 { color: #fff; margin-bottom: .3em; font-size: 2.3rem; }
.held p  { color: #E4F4F8; margin-bottom: 0; }

/* Reihe der fünf Gruppengrafiken unter dem Startkopf */
.gruppenreihe {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 26px;
}
.gruppenreihe a {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(255,255,255,.14);
  box-shadow: 0 4px 14px rgba(0,0,0,.14);
  text-decoration: none;
}
.gruppenreihe img:not(.gruppenreihe__portrait) {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  background: #fff;
}
.gruppenreihe span {
  display: block;
  padding: 9px 10px;
  font-size: .84rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  line-height: 1.25;
}
.gruppenreihe a:hover span { color: var(--gelb); }

/* Rahmen um das Gruppenbild – nur damit das Portraitfoto darauf sitzen kann */
.gruppenreihe__bild { display: block; position: relative; padding: 0; }
/* Portraitfoto: rund, rechts unten auf dem Gruppenbild. Ohne Foto ist die
   Markierung leer – dann sieht die Reihe aus wie vorher. */
.gruppenreihe img.gruppenreihe__portrait {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  aspect-ratio: auto;
  background: #fff;
}

/* ---------- Gruppenkopf auf den Tagesmutter-Seiten ---------- */

.gruppenkopf {
  border-radius: var(--radius-gross);
  padding: 22px 20px;
  box-shadow: var(--schatten);
  display: grid;
  gap: 18px;
  align-items: center;
}
/* Rahmen um die Gruppengrafik. Er ist genau so breit wie die Grafik selbst –
   nur deshalb kann das Portrait später sauber auf ihrer Ecke sitzen. */
.gruppenkopf__bild {
  position: relative;
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
}
.gruppenkopf img {
  width: 100%;
  max-width: 300px;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--schatten);
  margin-inline: auto;
}
.gruppenkopf__bild img { max-width: none; margin-inline: 0; display: block; }
.gruppenkopf h1 { margin-bottom: .2em; }
.gruppenkopf .gruppe {
  font-family: var(--schrift-titel);
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 4px;
}
.gruppenkopf--regenbogen   { background: linear-gradient(150deg, #FFF6DC, #FFE9B8); }
.gruppenkopf--regenbogen h1, .gruppenkopf--regenbogen .gruppe { color: #A85B07; }
.gruppenkopf--baerchen     { background: linear-gradient(150deg, #E7F6F1, #CFEDE6); }
.gruppenkopf--baerchen h1, .gruppenkopf--baerchen .gruppe { color: #16736A; }
.gruppenkopf--tierchen     { background: linear-gradient(150deg, #EDF7DC, #DCEEC0); }
.gruppenkopf--tierchen h1, .gruppenkopf--tierchen .gruppe { color: #4C6108; }
.gruppenkopf--schmetterling{ background: linear-gradient(150deg, #FDF3E0, #F6E7C8); }
.gruppenkopf--schmetterling h1, .gruppenkopf--schmetterling .gruppe { color: #8A5A12; }
.gruppenkopf--kuschel      { background: linear-gradient(150deg, #E4F4F8, #C6E8F1); }
.gruppenkopf--kuschel h1, .gruppenkopf--kuschel .gruppe { color: #14606F; }

/* Nummerierte Schritte, z. B. „So läuft die Anmeldung“ */
.schritte { padding-left: 22px; }
.schritte li { margin-bottom: 12px; }
.schritte li:last-child { margin-bottom: 0; }

/* ---------- Knöpfe ---------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  min-height: 48px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  text-align: center;
  border: 3px solid transparent;
  transition: transform .12s ease;
  font-family: var(--schrift-titel);
  /* Lange E-Mail-Adressen dürfen umbrechen, statt die Seite breiter zu machen */
  max-width: 100%;
  overflow-wrap: anywhere;
}
.knopf:hover { transform: translateY(-2px); }
.knopf--orange { background: var(--orange); color: #fff; }
.knopf--orange:hover { background: #C96305; color: #fff; }
.knopf--tuerkis { background: var(--tuerkis); color: #fff; }
.knopf--tuerkis:hover { background: #146F84; color: #fff; }
.knopf--rand {
  background: #fff;
  color: var(--tuerkis);
  border-color: var(--tuerkis);
}
.knopf--rand:hover { background: var(--tuerkis-hell); color: var(--tuerkis); }

.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- Karten ---------- */

.karte {
  background: var(--karte);
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten);
  overflow: hidden;
}
.karte__inhalt { padding: 20px 18px 22px; }
.karte__inhalt > :last-child { margin-bottom: 0; }
/* Weiterführende Links in Karten sind Navigation, nicht Fließtext – also antippbar */
.karte__inhalt .klein a,
.kasten .klein a { display: inline-block; padding: 9px 0; }

.raster {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}

/* Kachel einer Tagesmutter */
.tm-kachel {
  display: flex;
  flex-direction: column;
  background: var(--karte);
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten);
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  transition: transform .14s ease, box-shadow .14s ease;
  height: 100%;
}
.tm-kachel:hover {
  transform: translateY(-4px);
  box-shadow: var(--schatten-tief);
  color: var(--text);
}
.tm-kachel__bild {
  width: 100%;
  aspect-ratio: 3 / 2;
  /* "contain", nicht "cover": in den Bandengrafiken steht der Gruppenname im Bild.
     Jasmins Grafik ist hochformatig – mit "cover" wäre ihr Name weggeschnitten. */
  object-fit: contain;
  background: var(--tuerkis-hell);
}
.tm-kachel__text { padding: 16px 18px 20px; }

/* Rahmen um das Gruppenbild der Kachel – nur damit das Portraitfoto
   auf seiner Ecke sitzen kann, genau wie oben auf der eigenen Seite. */
.tm-kachel__bildrahmen { position: relative; }

/* Portraitfoto in der Kachel: rund, rechts unten auf dem Gruppenbild.
   Ohne Foto ist die Markierung leer – dann sieht die Kachel aus wie bisher. */
.tm-kachel__portrait {
  position: absolute;
  right: 10px;
  bottom: -34px;
  width: 78px;
  height: 78px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid var(--karte);
  box-shadow: var(--schatten);
  z-index: 2;
}
/* Platz für das Foto schaffen, aber nur wenn eines da ist */
.tm-kachel:has(.tm-kachel__portrait) .tm-kachel__text { padding-top: 42px; }
/* Dasselbe für die Karten auf „Freie Plätze“ – dort heißt der Inhalt anders */
.karte:has(.tm-kachel__portrait) .karte__inhalt { padding-top: 40px; }
.tm-kachel__name {
  font-family: var(--schrift-titel);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--tuerkis);
  margin: 0 0 2px;
}
.tm-kachel__gruppe {
  font-family: var(--schrift-titel);
  font-size: 1.05rem;
  color: var(--pink);
  font-weight: 600;
  margin: 0 0 8px;
}
.tm-kachel__ort { font-size: .93rem; color: var(--text-leise); margin: 0; }
.tm-kachel__mehr {
  margin-top: 12px;
  font-weight: 700;
  color: var(--orange);
  font-size: .95rem;
}

/* ---------- Portraitfoto der Tagesmutter ----------
   Vier mögliche Positionen. Welche gilt, entscheidet jede Tagesmutter
   im Redaktionsbereich – hier steht nur, wie jede davon aussieht. */

.portrait { margin: 0; }
.portrait img { display: block; }
.portrait figcaption {
  margin-top: 8px;
  font-size: .9rem;
  color: var(--text-leise);
}

/* A · rund auf der Ecke der Gruppengrafik.
   Sitzt an der Grafik, nicht am Kasten – deshalb rutscht es am Handy
   nicht weg, sondern bleibt immer an derselben Stelle des Bildes. */
.portrait--auf-grafik {
  position: absolute;
  right: -10px;
  bottom: -14px;
  width: 104px;
  z-index: 2;
}
.portrait--auf-grafik img {
  width: 104px;
  height: 104px;
  object-fit: cover;
  border-radius: 50%;
  border: 5px solid var(--karte);
  box-shadow: var(--schatten);
}

/* B · im farbigen Kopf, links vom Namen bzw. rechts außen */
.portrait--kopf-links,
.portrait--kopf-rechts { margin-inline: auto; }
.portrait--kopf-links img,
.portrait--kopf-rechts img {
  width: 136px;
  height: 136px;
  object-fit: cover;
  border-radius: 50%;
  border: 5px solid var(--karte);
  box-shadow: var(--schatten);
}

/* C · eine Zeile tiefer, beim Vorstellungstext */
.portrait--text { margin-bottom: 18px; }
.portrait--text img {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten);
}

/* ---------- Statusanzeige freie Plätze ---------- */

.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.35;
}
.status::before {
  content: "";
  width: 11px; height: 11px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.status--voll   { background: #FDE7E7; color: #9B2226; }
.status--voll::before   { background: #C1272D; }
.status--pause  { background: var(--orange-hell); color: #93500A; }
.status--pause::before  { background: var(--orange); }
.status--frei   { background: var(--gruen-hell); color: #4C6108; }
.status--frei::before   { background: #7FA015; }

/* ---------- Infokasten ---------- */

.kasten {
  border-radius: var(--radius-gross);
  padding: 22px 20px;
  border: 3px solid transparent;
}
.kasten > :last-child { margin-bottom: 0; }
.kasten--gruen  { background: var(--gruen-hell);  border-color: #C9DC8A; }
.kasten--orange { background: var(--orange-hell); border-color: #F7CE94; }
.kasten--tuerkis{ background: var(--tuerkis-hell);border-color: #A9DCE8; }
.kasten--pink   { background: var(--pink-hell);   border-color: #F0BCD3; }

.kasten__titel {
  margin: 0 0 10px;
  font-size: 1.25rem;
  color: var(--gruen);
}
.kasten--orange .kasten__titel { color: #A85B07; }
.kasten--tuerkis .kasten__titel{ color: var(--tuerkis); }
.kasten--pink .kasten__titel   { color: var(--pink); }

/* Überschrift und Preiszeile nehmen die Farbe des jeweiligen Kastens an */
.kasten--gruen  h3, .kasten--gruen  .preis { color: #4C6108; }
.kasten--orange h3, .kasten--orange .preis { color: #93500A; }
.kasten--tuerkis h3, .kasten--tuerkis .preis { color: #14606F; }
.kasten--pink   h3, .kasten--pink   .preis { color: var(--pink); }

.preis {
  font-family: var(--schrift-titel);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 .25em;
}
.preis--wort { font-size: 1.1rem; }

/* ---------- Öffnungszeiten / Datenlisten ---------- */

.zeiten { margin: 0; }
.zeiten div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--linie);
}
.zeiten div:last-child { border-bottom: 0; }
.zeiten dt { font-weight: 600; margin: 0; }
.zeiten dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Kontaktzeile ---------- */

.kontaktband {
  background: var(--orange);
  color: #fff;
  padding-block: 22px;
}
.kontaktband h2 { color: #fff; }
.kontaktband p  { color: #FFF2E0; }
.kontaktband a.knopf--rand { background: #fff; border-color: #fff; color: #A85B07; }
.kontaktband a.knopf--rand:hover { background: #FFF2E0; color: #A85B07; }

.kontaktliste {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 10px;
}
.kontaktliste a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 16px;
  background: var(--karte);
  border: 2px solid var(--linie);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
}
.kontaktliste a:hover { border-color: var(--orange); color: var(--orange); }
.kontaktliste .wer {
  font-weight: 700;
  color: var(--tuerkis);
  min-width: 92px;
  flex: 0 0 auto;
}
.kontaktliste .nummer { font-variant-numeric: tabular-nums; }

/* Adressen und E-Mails dürfen niemals die Seite aufblähen */
address, .rechtstext a, .fuss address a { overflow-wrap: anywhere; }

/* ---------- Fotostrecken ---------- */

.fotos {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, 1fr);
}
.fotos img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}
.fotos figure { margin: 0; }
.fotos figcaption {
  font-size: .85rem;
  color: var(--text-leise);
  margin-top: 6px;
}

.galerie {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, 1fr);
}
.galerie a { display: block; border-radius: var(--radius); overflow: hidden; }
.galerie img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform .2s ease;
  background: var(--tuerkis-hell);
}
.galerie a:hover img { transform: scale(1.05); }

/* ---------- Urlaubsliste ---------- */

.urlaub-block { margin-bottom: 26px; }
.urlaub-block:last-child { margin-bottom: 0; }
.urlaub-block h3 { margin-bottom: 10px; }
.termine { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.termine li {
  background: var(--karte);
  border-left: 6px solid var(--orange);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 9px 14px;
  box-shadow: var(--schatten);
}

/* ---------- Fließtextlisten ---------- */

.haken { list-style: none; margin: 0 0 1em; padding: 0; display: grid; gap: 9px; }
.haken li { padding-left: 30px; position: relative; }
.haken li::before {
  content: "";
  position: absolute;
  left: 0; top: .45em;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--gruen);
}

/* ---------- Querverweise ---------- */

.verweise {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding: 0; margin: 0;
  list-style: none;
}
.verweise a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--karte);
  border: 2px solid var(--tuerkis);
  color: var(--tuerkis);
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
}
.verweise a:hover { background: var(--tuerkis); color: #fff; }

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

.rechtstext { max-width: 68ch; }
.rechtstext h2 { font-size: 1.3rem; margin-top: 1.8em; }
.rechtstext h2:first-of-type { margin-top: 0; }
.rechtstext h3 { font-size: 1.05rem; margin-top: 1.4em; color: var(--tuerkis); }
.rechtstext ul { padding-left: 22px; }
.rechtstext li { margin-bottom: .4em; }
.rechtstext address { font-style: normal; }

/* Hinweis für Pascal – erscheint sichtbar, damit nichts übersehen wird */
.offen {
  background: repeating-linear-gradient(135deg, #FFF8E1, #FFF8E1 12px, #FFF3CC 12px, #FFF3CC 24px);
  border: 3px dashed #D9A400;
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 18px 0;
}
.offen > :last-child { margin-bottom: 0; }
.offen strong { color: #8A6800; }

/* ---------- Fuß ---------- */

.fuss {
  background: var(--tuerkis);
  color: #DFF3F8;
  padding-block: 32px;
  margin-top: 10px;
}
.fuss h2 { color: #fff; font-size: 1.15rem; }
.fuss a { color: #fff; }
.fuss a:hover { color: var(--gelb); }
.fuss__gitter { display: grid; gap: 26px; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
/* Navigationslinks brauchen am Handy eine Fläche, die man mit dem Daumen trifft */
.fuss ul a { display: inline-block; padding: 9px 0; }
.fuss__unten {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.25);
  font-size: .88rem;
}
.fuss address { font-style: normal; }

/* ============================================================
   Ab Tablet
   ============================================================ */
@media (min-width: 620px) {
  body { font-size: 18px; }
  h1 { font-size: 2.5rem; }
  h2 { font-size: 1.85rem; }
  .abschnitt { padding-block: 60px; }
  .huelle { padding-inline: 28px; }
  .raster--2 { grid-template-columns: repeat(2, 1fr); }
  .nav a { font-size: .95rem; padding: 9px 16px; min-height: 44px; }
  .fotos { grid-template-columns: repeat(3, 1fr); }
  .galerie { grid-template-columns: repeat(3, 1fr); }
  .held { padding-block: 52px 46px; }
  .held h1 { font-size: 3rem; }
  .held__logo { width: 118px; height: 118px; }
  .gruppenreihe { grid-template-columns: repeat(5, 1fr); }
  .gruppenkopf { grid-template-columns: 300px 1fr; padding: 28px; }
  .gruppenkopf img { margin-inline: 0; }
  .gruppenkopf__bild { margin-inline: 0; }
  /* Steht das Portrait im Kopf, braucht es dort eine eigene Spalte.
     Reihenfolge im HTML: Grafik, [Portrait links], Text, [Portrait rechts]. */
  .gruppenkopf:has(.portrait--kopf-links)  { grid-template-columns: 300px auto 1fr; }
  .gruppenkopf:has(.portrait--kopf-rechts) { grid-template-columns: 300px 1fr auto; }
  .portrait--kopf-links, .portrait--kopf-rechts { margin-inline: 0; }
  .kontaktliste { grid-template-columns: repeat(2, 1fr); }
  .fuss__gitter { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   Ab Desktop
   ============================================================ */
@media (min-width: 900px) {
  .kopf__zeile { padding-block: 16px; }
  .kopf__logo img { width: 62px; height: 62px; }
  .kopf__marke { font-size: 1.4rem; }
  .raster--3 { grid-template-columns: repeat(3, 1fr); }
  .galerie { grid-template-columns: repeat(4, 1fr); }
  .zwei-spalten {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 40px;
    align-items: start;
  }
  .zwei-spalten--gleich { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   Druck
   ============================================================ */
@media print {
  .nav, .kontaktband, .sprung { display: none; }
  body { background: #fff; font-size: 12pt; }
  .karte, .kasten { box-shadow: none; border: 1px solid #ccc; }
}

/* Bewegung reduzieren */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
  .knopf:hover, .tm-kachel:hover { transform: none; }
}