/* Retro-Design: Play Blue, Nude Stone, Stained Cork – ueberschreibt style.css */
:root{
  --papier:#FDF4EC;
  --gruen:#43589B;
  --bordeaux:#B44B28;
  --blau:#43589B;
  --gelb:#FFD7B9;
  --orange:#B44B28;
  --flieder:#FFD7B9;
  --nude:#FFD7B9;
  --cork:#B44B28;
}
body{background:var(--papier)}
header{background:rgba(253,244,236,.92)}
.wordmark small{color:var(--cork)}
nav a:hover,nav a:focus-visible{background:var(--nude)}
nav a.aktiv{background:var(--blau);color:#FFFFFF}
/* Footer bleibt auf dem dunklen --tinte (#2E2A26) aus style.css – so gewollt.
   Nur die Akzente kommen aus der Palette. */
footer .logo-svg,footer .wordmark,footer .wordmark small,footer a{color:var(--nude)}

/* Kurze Seiten (z.B. Für Zuweiser) endeten vor dem unteren Bildschirmrand,
   darunter blitzte der helle Seitenhintergrund als Streifen durch.
   Body als Spalte: der Inhalt dehnt sich, der Footer sitzt immer unten. */
body{min-height:100vh;display:flex;flex-direction:column}
body>main,body>section{flex:1 0 auto}
body>footer{flex-shrink:0}

/* Inhaltskarten als Kiesel – als Zyklus, damit auch eine 5. oder 8. Karte
   eine Form bekommt und nicht ploetzlich als Rechteck dasteht. */
.kartenreihe .karte:nth-child(4n+1){border-radius:58px 40px 64px 36px / 44px 62px 38px 58px;transform:rotate(-.6deg)}
.kartenreihe .karte:nth-child(4n+2){border-radius:42px 60px 38px 62px / 60px 40px 58px 42px;transform:rotate(.5deg)}
.kartenreihe .karte:nth-child(4n+3){border-radius:62px 38px 56px 44px / 40px 60px 42px 62px;transform:rotate(-.5deg)}
.kartenreihe .karte:nth-child(4n+4){border-radius:38px 58px 42px 60px / 58px 42px 60px 40px;transform:rotate(.6deg)}
main>.karte:nth-of-type(3n+1){border-radius:64px 40px 58px 38px / 42px 60px 40px 62px;transform:rotate(-.4deg)}
main>.karte:nth-of-type(3n+2){border-radius:40px 62px 38px 60px / 60px 40px 62px 42px;transform:rotate(.4deg)}
main>.karte:nth-of-type(3n+3){border-radius:58px 42px 62px 40px / 44px 58px 40px 60px;transform:rotate(-.3deg)}

/* Kartenfarben positionsbasiert – so kollidieren nie zwei Nachbarn,
   egal welche Original-Klasse die Karte hat.
   1=Blau, 2=Cork, 3=Nude (rotierend) */
.kartenreihe .karte:nth-child(3n+1),
main>.karte:nth-of-type(3n+1){background:var(--blau);color:#FFFFFF}
.kartenreihe .karte:nth-child(3n+2),
main>.karte:nth-of-type(3n+2){background:var(--cork);color:#FFFFFF}
.kartenreihe .karte:nth-child(3n+3),
main>.karte:nth-of-type(3n+3){background:var(--nude);color:var(--blau)}
/* Listen-Trennlinien: hell auf dunklen Karten, dunkel auf Nude */
.kartenreihe .karte:nth-child(3n+1) li,
.kartenreihe .karte:nth-child(3n+2) li,
main>.karte:nth-of-type(3n+1) li,
main>.karte:nth-of-type(3n+2) li{border-color:rgba(255,255,255,.3)}
.kartenreihe .karte:nth-child(3n+3) li,
main>.karte:nth-of-type(3n+3) li{border-color:rgba(31,36,33,.18)}

/* Team-Raster: erste Kachel jeder Reihe rotiert die Farbe.
   Basis (1 & 2 Spalten): einfacher 3er-Zyklus – Spalte 1 wechselt automatisch. */
.team-grid .karte:nth-child(3n+1){background:var(--blau);color:#FFFFFF}
.team-grid .karte:nth-child(3n+2){background:var(--cork);color:#FFFFFF}
.team-grid .karte:nth-child(3n+3){background:var(--nude);color:var(--blau)}
/* Ab 3 Spalten: diagonal verschobenes Muster, damit Spalte 1 = Blau, Cork, Nude … */
@media(min-width:821px){
  .team-grid{grid-template-columns:repeat(3,1fr)}
  .team-grid .karte:nth-child(9n+1),
  .team-grid .karte:nth-child(9n+6),
  .team-grid .karte:nth-child(9n+8){background:var(--blau);color:#FFFFFF}
  .team-grid .karte:nth-child(9n+2),
  .team-grid .karte:nth-child(9n+4),
  .team-grid .karte:nth-child(9n+9){background:var(--cork);color:#FFFFFF}
  .team-grid .karte:nth-child(9n+3),
  .team-grid .karte:nth-child(9n+5),
  .team-grid .karte:nth-child(9n+7){background:var(--nude);color:var(--blau)}
}

/* ---------- Barrierefreiheit: Fokus sichtbar machen ----------
   style.css setzt bei nav-Links, Kacheln und Willkommen-Kachel outline:none.
   Fuer Tastaturbedienung bleibt sonst nur eine Animation als Hinweis –
   und die faellt bei prefers-reduced-motion komplett weg. */
a:focus-visible,
button:focus-visible,
nav a:focus-visible,
.kachel:focus-visible,
.zurueck:focus-visible,
.akkordeon-button:focus-visible,
.innen-karte:focus-visible,
footer a:focus-visible{
  outline:3px solid var(--cork);
  outline-offset:3px;
}
/* Auf dunklen Flaechen ist Cork zu leise – dort heller umranden */
.kachel:focus-visible,
footer a:focus-visible,
.karte a:focus-visible{
  outline-color:#FFFFFF;
}
.k-claim:focus-visible,
.k-impressionen:focus-visible{
  outline-color:var(--cork);
}
/* Fokus-Ring darf nicht vom overflow:hidden der Kachel abgeschnitten werden */
.kachel:focus-visible{outline-offset:-4px}

/* Akkordeon als Kiesel, blaue Toene */
.akkordeon .akkordeon-item:nth-child(1){border-radius:32px 22px 28px 20px / 22px 30px 20px 28px}
.akkordeon .akkordeon-item:nth-child(2){border-radius:22px 32px 20px 30px / 30px 20px 28px 22px}
.akkordeon .akkordeon-item:nth-child(3){border-radius:30px 22px 34px 24px / 22px 30px 24px 32px}
.akkordeon-button:hover{background:rgba(67,88,155,.08)}
.akkordeon-button[aria-expanded="true"]{background:rgba(67,88,155,.12)}
.akkordeon-inhalt{background:rgba(67,88,155,.04)}
.karte .akkordeon-inhalt a{color:var(--cork)}

/* Zugeklappter Akkordeon-Inhalt war nur optisch versteckt: Links darin
   blieben per Tab erreichbar und wurden von Screenreadern vorgelesen.
   visibility:hidden nimmt sie aus Tab-Reihenfolge und Vorlese-Baum.
   Die Verzoegerung sorgt dafuer, dass die Aufklapp-Animation sichtbar bleibt. */
.akkordeon-inhalt{
  visibility:hidden;
  transition:max-height .3s ease,visibility 0s linear .3s;
}
.akkordeon-button[aria-expanded="true"]+.akkordeon-inhalt{
  visibility:visible;
  transition:max-height .3s ease,visibility 0s linear 0s;
  /* style.css kappt bei 500px – lange Antworten wurden auf dem Handy abgeschnitten */
  max-height:1600px;
}

/* Innen-Karten (Buecher) als Kiesel */
.innen-karte{border-radius:36px 24px 32px 22px / 24px 34px 22px 32px}
.innen-grid .innen-karte:nth-child(2n){border-radius:24px 36px 22px 34px / 34px 22px 32px 24px}
.innen-karte h4{color:var(--blau)}

/* Google-Maps-Platzhalter auf der Kontaktseite (Zwei-Klick-Loesung) */
.karten-platzhalter:focus-visible{outline:3px solid var(--cork);outline-offset:3px}

/* Startseite: Kacheln als Steine */
.grid{grid-auto-rows:unset;gap:26px;max-width:1100px;margin:0 auto;align-items:center;justify-items:center}
.grid .kachel{aspect-ratio:1/1;width:100%;max-width:330px;padding:14%}
.grid .kachel:nth-child(1){border-radius:54% 46% 48% 52% / 49% 56% 44% 51%}
.grid .kachel:nth-child(2){border-radius:46% 54% 52% 48% / 55% 47% 53% 45%}
.grid .kachel:nth-child(3){border-radius:51% 49% 44% 56% / 47% 52% 48% 53%}
.grid .kachel:nth-child(4){border-radius:48% 52% 56% 44% / 52% 46% 54% 48%}
.grid .kachel:nth-child(5){border-radius:55% 45% 47% 53% / 45% 54% 46% 55%}
.grid .kachel:nth-child(6){border-radius:47% 53% 50% 50% / 53% 48% 52% 47%}
@media(max-width:620px){
  .grid{gap:18px}
  .grid .kachel{max-width:240px;padding:12%}
  .kachel h2{font-size:20px}
}
.k-claim{background:var(--nude);color:var(--blau)}
.k-logo{background:var(--blau);color:var(--nude)}
.k-logo .unterzeile{color:var(--nude)}
.k-logo .logo-svg{color:var(--nude)}
.k-team{background:var(--cork);color:#FFFFFF}
.k-kontakt{background:var(--blau);color:#FFFFFF}
.k-zuweiser{background:var(--cork);color:#FFFFFF}
.k-impressionen{background:var(--nude);color:var(--cork)}