/* ==========================================================================
   Kuhlmann Training — gemeinsames Aussehen aller Seiten
   Farben und Schrift aus dem Brand Guide Kuhlmann Digital 04-2026.

   Diese Datei gilt für ALLE Workshop-Seiten. Eine Korrektur hier wirkt
   sofort überall. Bitte nichts in einzelne Seiten hineinschreiben.
   ========================================================================== */

/* --- Schrift ------------------------------------------------------------
   Poppins wird selbst ausgeliefert, nicht über das Google-CDN: sonst ginge
   die IP-Adresse jedes Teilnehmers an Google. Fehlen die Dateien unter
   /assets/poppins/, fällt der Browser still auf die Systemschrift zurück —
   die Seite bleibt in jedem Fall benutzbar.                              */

@font-face {
  font-family: "Poppins";
  src: url("/assets/poppins/poppins-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/assets/poppins/poppins-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- Farben und Maße ---------------------------------------------------- */

:root {
  --dunkelpetrol: #004856;
  --petrol:       #00798e;
  --hellpetrol:   #4aa0af;
  --mint:         #bfe2e0;
  --weiss:        #ffffff;
  --fastschwarz:  #000f14;

  --mint-hell:    #eaf6f5;   /* aufgehellt, für ruhige Flächen             */
  --linie:        #d4e6e6;
  --grau:         #5c6b6f;   /* Nebentext, erfüllt AA auf Weiß             */

  --schrift: "Poppins", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --schrift-fest: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --rand: 10px;
  --breite: 1500px;
  --schatten: 0 1px 2px rgba(0, 72, 86, .06), 0 6px 20px rgba(0, 72, 86, .07);
}

/* --- Grundlagen --------------------------------------------------------- */

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

html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--schrift);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--fastschwarz);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-weight: 700;
  color: var(--dunkelpetrol);
  line-height: 1.25;
  margin: 0 0 .6em;
  letter-spacing: -.01em;
}
h1 { font-size: 1.75rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }
h4 { font-size: .95rem; }

p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.3em; }
li { margin-bottom: .4em; }
strong { font-weight: 700; color: var(--dunkelpetrol); }

a { color: var(--petrol); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--dunkelpetrol); }

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

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

/* Sprungmarke für Tastaturbedienung */
.sprung {
  position: absolute; left: -9999px;
  background: var(--dunkelpetrol); color: var(--weiss);
  padding: .7rem 1.2rem; border-radius: 0 0 var(--rand) 0; z-index: 100;
}
.sprung:focus { left: 0; top: 0; }

/* --- Kopfzeile ---------------------------------------------------------- */

.kopf {
  position: sticky; top: 0; z-index: 40;
  background: var(--dunkelpetrol);
  color: var(--weiss);
  border-bottom: 3px solid var(--hellpetrol);
}
.kopf-innen {
  max-width: var(--breite);
  margin: 0 auto;
  padding: .85rem 1.5rem;
  display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap;
}
/* Seiten mit einspaltigem Fließtext — Startseite, Impressum, Datenschutz,
   Rückmeldungen. Dort läuft der Text in 46rem; die Kopfzeile richtet sich
   danach, damit Logo und Titel auf derselben Kante beginnen wie der Text
   darunter. Die Workshop-Seiten bleiben bei der vollen Breite, weil ihr
   dreispaltiges Raster sie braucht. */
.kopf-schmal .kopf-innen { max-width: 46rem; }

/* Der Titel steht mittig über der Textspalte, nicht dicht am Logo. Dafür drei
   Spalten: Logo und rechter Verweis bekommen gleich viel Platz (1fr), der
   Titel dazwischen genau so viel, wie er braucht. Nur so landet er wirklich
   in der Mitte und nicht bloß mittig zwischen zwei ungleich breiten Nachbarn.
   Unterhalb von 600px greift die Regel nicht mehr — dort bricht die Kopfzeile
   ohnehin um, und drei Spalten wären zu eng. */
@media (min-width: 601px) {
  .kopf-schmal .kopf-innen {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  .kopf-schmal .kopf-titel { text-align: center; }
  .kopf-schmal .kopf-rechts { justify-self: end; }
}
.kopf a { color: var(--mint); }
.kopf .logo { display: block; height: 34px; width: auto; flex: none; }
.kopf-titel { flex: 1 1 16rem; min-width: 0; }
.kopf-titel h1 {
  color: var(--weiss); font-size: 1.1rem; margin: 0; letter-spacing: 0;
}
.kopf-titel .zusatz {
  display: block; font-size: .82rem; color: var(--mint);
  font-weight: 500; margin-top: .15rem;
}
.kopf-rechts { display: flex; align-items: center; gap: 1rem; font-size: .85rem; }

/* --- Dreispaltiges Raster ----------------------------------------------- */

.raster {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 1.75rem 1.5rem 4rem;
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr) 21rem;
  gap: 2rem;
  align-items: start;
}

.spalte-titel {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--petrol);
  margin: 0 0 .9rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--mint);
}

/* --- Linke Spalte: Agenda ----------------------------------------------- */

.agenda { position: sticky; top: 5.5rem; }

/* Oben der Ablauf des Kurses, darunter die Sprungliste dieser Seite.
   Zwei verschiedene Dinge, deshalb zwei Überschriften. */
.agenda-ablauf { margin-bottom: 1.6rem; }
.agenda-ablauf ul { list-style: none; margin: 0; padding: 0; }
.agenda-ablauf li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: .45rem;
  font-size: .88rem;
  line-height: 1.4;
  color: var(--fastschwarz);
}
.agenda-ablauf li::before {
  content: "";
  position: absolute; left: 0; top: .55em;
  width: .35rem; height: .35rem; border-radius: 50%;
  background: var(--hellpetrol);
}
/* Unterpunkte der Agenda. Kein Punkt davor, sondern ein Strich — damit man
   auf einen Blick sieht, dass es eine Ebene tiefer geht. */
.agenda-ablauf li ul { list-style: none; margin: .35rem 0 0; padding: 0; }
.agenda-ablauf li li {
  font-size: .82rem;
  color: var(--grau);
  padding-left: .85rem;
  margin-bottom: .25rem;
}
.agenda-ablauf li li:last-child { margin-bottom: 0; }
.agenda-ablauf li li::before {
  width: .38rem;
  height: 0;
  border-radius: 0;
  border-top: 1.5px solid var(--hellpetrol);
  background: none;
  top: .72em;
}

.agenda-ablauf p { font-size: .85rem; color: var(--grau); margin-bottom: .6rem; }
.agenda-ablauf strong { color: var(--dunkelpetrol); }
.agenda-ablauf .hinweiskasten {
  margin: 0; padding: .6rem .7rem; font-size: .8rem;
  border-left-width: 3px;
}

.agenda ol { list-style: none; margin: 0; padding: 0; }
.agenda li { margin: 0; }
.agenda a {
  display: block;
  padding: .5rem .7rem .5rem 1.4rem;
  position: relative;
  color: var(--fastschwarz);
  text-decoration: none;
  border-left: 3px solid var(--linie);
  font-size: .92rem;
  line-height: 1.35;
}
.agenda a:hover { background: var(--mint-hell); border-left-color: var(--hellpetrol); }
.agenda a.hier {
  background: var(--mint-hell);
  border-left-color: var(--petrol);
  color: var(--dunkelpetrol);
  font-weight: 700;
}
.agenda-schalter { display: none; }

/* --- Mittlere und rechte Spalte ----------------------------------------- */

.abschnitt { scroll-margin-top: 5.5rem; margin-bottom: 1.1rem; }

/* Einstiegskasten „Hier beginnen" */
.einstieg {
  background: var(--mint-hell);
  border: 2px solid var(--mint);
  border-radius: var(--rand);
  padding: 1.4rem 1.6rem;
  margin-bottom: 1.75rem;
}
.einstieg h2 { margin-top: 0; }
.einstieg > :last-child { margin-bottom: 0; }

/* --- Praxisbeispiel: äußeres Akkordeon ---------------------------------- */

/* --- Gruppenüberschrift über mehreren Praxisbeispielen ------------------- */

/* Keine Kachel, sondern eine Beschriftung: Sie trennt die Praxisbeispiele in
   Gruppen, ohne eine weitere Ebene zum Aufklappen einzuziehen. */
.gruppe {
  margin: 2.4rem 0 1.1rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--mint);
}
.gruppe:first-child { margin-top: 0; }
.gruppe h2 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--dunkelpetrol);
}
.gruppe-unter {
  margin: .25rem 0 0;
  font-size: .88rem;
  color: var(--grau);
}

/* In der Sprungliste steht die Gruppe als Zwischenzeile, ohne laufende Nummer. */
.agenda li.gruppe { margin-top: .7rem; }
.agenda li.gruppe a {
  padding-left: .7rem;
  padding-bottom: .25rem;
  border-left-color: transparent;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--petrol);
}
.agenda li.gruppe a:hover { background: transparent; color: var(--dunkelpetrol); }

.beispiel {
  border: 1px solid var(--linie);
  border-radius: var(--rand);
  background: var(--weiss);
  box-shadow: var(--schatten);
  overflow: hidden;
}
.beispiel + .beispiel { margin-top: 1.1rem; }
.beispiel[open] { border-color: var(--hellpetrol); }

.beispiel > summary {
  cursor: pointer;
  list-style: none;
  padding: 1.05rem 1.4rem 1.05rem 3rem;
  position: relative;
  background: var(--weiss);
}
.beispiel > summary::-webkit-details-marker { display: none; }
.beispiel > summary:hover { background: var(--mint-hell); }
.beispiel[open] > summary {
  background: var(--dunkelpetrol);
  border-bottom: 3px solid var(--hellpetrol);
}
.beispiel[open] > summary .beispiel-titel,
.beispiel[open] > summary .beispiel-unter { color: var(--weiss); }
.beispiel[open] > summary .beispiel-unter { color: var(--mint); }

.beispiel > summary::before {
  content: "";
  position: absolute; left: 1.3rem; top: 1.45rem;
  width: .55rem; height: .55rem;
  border-right: 2.5px solid var(--petrol);
  border-bottom: 2.5px solid var(--petrol);
  transform: rotate(-45deg);
  transition: transform .18s ease;
}
.beispiel[open] > summary::before {
  transform: rotate(45deg);
  border-color: var(--mint);
}
.beispiel-titel {
  display: block; font-weight: 700; font-size: 1.05rem; color: var(--dunkelpetrol);
}
.beispiel-unter {
  display: block; font-size: .85rem; color: var(--grau); margin-top: .1rem;
}
.beispiel-inhalt { padding: 1.4rem; }

/* --- Baustein: inneres Akkordeon ---------------------------------------- */

.baustein { border-top: 1px solid var(--linie); }
.baustein:first-child { border-top: 0; }

.baustein > summary {
  cursor: pointer;
  list-style: none;
  padding: .85rem .5rem .85rem 1.8rem;
  position: relative;
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
}
.baustein > summary::-webkit-details-marker { display: none; }
.baustein > summary:hover .baustein-titel { color: var(--petrol); }
.baustein > summary::before {
  content: "";
  position: absolute; left: .35rem; top: 1.2rem;
  width: .45rem; height: .45rem;
  border-right: 2px solid var(--hellpetrol);
  border-bottom: 2px solid var(--hellpetrol);
  transform: rotate(-45deg);
  transition: transform .18s ease;
}
.baustein[open] > summary::before { transform: rotate(45deg); }

.baustein-titel { font-weight: 700; color: var(--dunkelpetrol); font-size: .98rem; }
.baustein-hinweis { font-size: .78rem; color: var(--grau); }
.baustein-inhalt { padding: 0 .5rem 1.2rem 1.8rem; }
.baustein-inhalt > :last-child { margin-bottom: 0; }

/* --- Kopierblock -------------------------------------------------------- */

.kopierblock {
  border: 1px solid var(--mint);
  border-radius: var(--rand);
  background: var(--mint-hell);
  margin: 0 0 1.1rem;
  overflow: hidden;
}
.kopierblock-kopf {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .6rem .8rem;
  background: var(--mint);
}
.kopierblock-marke {
  font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--dunkelpetrol);
  margin-right: auto;
}
.kopierblock-text {
  padding: 1rem 1.1rem;
  max-height: 22rem;
  overflow-y: auto;
  background: var(--weiss);
  font-size: .92rem;
}
.kopierblock-text > :last-child { margin-bottom: 0; }
.kopierblock-text.fest {
  font-family: var(--schrift-fest);
  font-size: .86rem;
  white-space: pre-wrap;
  line-height: 1.55;
}
.kopierblock-text.hoch { max-height: 34rem; }

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

.knopf {
  font-family: inherit; font-size: .82rem; font-weight: 700;
  line-height: 1.2;
  padding: .5rem .9rem;
  border-radius: 999px;
  border: 1.5px solid var(--petrol);
  background: var(--weiss);
  color: var(--petrol);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.knopf:hover { background: var(--petrol); color: var(--weiss); }
.knopf.voll { background: var(--petrol); color: var(--weiss); }
.knopf.voll:hover { background: var(--dunkelpetrol); border-color: var(--dunkelpetrol); }
.knopf.fertig {
  background: var(--dunkelpetrol); border-color: var(--dunkelpetrol); color: var(--weiss);
}
.knopf[disabled] { opacity: .5; cursor: default; }

.knopf-reihe { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }

/* Download-Verweis */
.datei {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .84rem; color: var(--grau);
  text-decoration: none;
  border-bottom: 1px dotted var(--hellpetrol);
  padding-bottom: 1px;
}
.datei:hover { color: var(--petrol); border-bottom-style: solid; }
.datei::before { content: "↓"; font-weight: 700; color: var(--hellpetrol); }

/* --- Rechte Spalte ------------------------------------------------------ */

.danach { position: sticky; top: 5.5rem; }
.karte {
  border: 1px solid var(--linie);
  border-radius: var(--rand);
  padding: 1.1rem 1.2rem;
  margin-bottom: 1rem;
  background: var(--weiss);
}
.karte h3 { margin-bottom: .35rem; font-size: .98rem; }
.karte p { font-size: .88rem; margin-bottom: .6rem; color: var(--grau); }
.karte > :last-child { margin-bottom: 0; }
.karte.folgt { background: var(--mint-hell); border-style: dashed; }

/* Der Hinweis auf das umgezogene Rückmeldeformular. Hebt sich ab, weil er
   genau dort gefunden werden muss, wo vorher das Formular stand. */
.karte-verweis { background: var(--mint-hell); border-color: var(--hellpetrol); }
a.knopf { display: inline-block; text-decoration: none; }
.karte.folgt h3 { color: var(--grau); }

.marke-folgt {
  display: inline-block;
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--petrol); background: var(--mint);
  padding: .12rem .5rem; border-radius: 999px;
  vertical-align: middle; margin-left: .4rem;
}

/* --- Gemeinsame Ablage --------------------------------------------------- */

.baustein-ablage > summary .baustein-titel { color: var(--petrol); }
.beispiel-ablage { border-style: dashed; }

.ablage-feld { margin-bottom: 1.2rem; }

/* Umschalter Datei/Text — über verdeckte Radioschalter, damit er auch ohne
   JavaScript funktioniert. */
.ablage-wahl { display: grid; grid-template-columns: auto auto 1fr; gap: .4rem .5rem; }
.ablage-schalter { position: absolute; opacity: 0; width: 0; height: 0; }
.ablage-wahl > label {
  grid-row: 1;
  padding: .35rem .9rem;
  border: 1.5px solid var(--linie);
  border-radius: 999px;
  font-size: .82rem; font-weight: 700; color: var(--grau);
  cursor: pointer;
}
.ablage-wahl > label:hover { border-color: var(--hellpetrol); color: var(--petrol); }
.ablage-schalter:checked + label {
  background: var(--petrol); border-color: var(--petrol); color: var(--weiss);
}
.ablage-schalter:focus-visible + label { outline: 3px solid var(--petrol); outline-offset: 2px; }

.ablage-blatt { grid-column: 1 / -1; display: none; }
.ablage-wahl > .ablage-schalter:nth-of-type(1):checked ~ .ablage-blatt-datei { display: block; }
.ablage-wahl > .ablage-schalter:nth-of-type(2):checked ~ .ablage-blatt-text { display: block; }

.ablage-zone {
  border: 2px dashed var(--hellpetrol);
  border-radius: var(--rand);
  background: var(--mint-hell);
  padding: 1.1rem 1rem;
  text-align: center;
}
.ablage-zone.bereit { background: var(--mint); border-color: var(--petrol); }
.ablage-zone p { margin: 0 0 .3rem; font-size: .9rem; }
.ablage-zone .ablage-formate { font-size: .75rem; color: var(--grau); margin: 0; }
.ablage-eingabe { position: absolute; opacity: 0; width: 0; height: 0; }

.ablage-fortschritt {
  height: 6px; border-radius: 3px; background: var(--weiss);
  overflow: hidden; margin-top: .7rem;
}
.ablage-balken { height: 100%; width: 0; background: var(--petrol); transition: width .15s linear; }
.ablage-meldung { font-size: .82rem; margin: .5rem 0 0 !important; min-height: 1.2em; }
.ablage-meldung.schlecht { color: #8c1f1f; font-weight: 700; }
.ablage-meldung.gut { color: var(--petrol); font-weight: 700; }

.ablage-textform textarea {
  width: 100%; font-family: var(--schrift-fest); font-size: .86rem; line-height: 1.5;
  padding: .6rem .7rem; border: 1.5px solid var(--linie); border-radius: 8px;
  resize: vertical; min-height: 6rem; color: var(--fastschwarz);
}
.ablage-textform textarea:focus { border-color: var(--petrol); outline: none; }

.ablage-zeile-unten { display: flex; gap: .6rem; margin-top: .6rem; flex-wrap: wrap; }
.ablage-zeile-unten input[type="text"] {
  flex: 1 1 12rem; min-width: 0;
  font-family: inherit; font-size: .86rem;
  padding: .5rem .7rem; border: 1.5px solid var(--linie); border-radius: 8px;
}
.ablage-zeile-unten input[type="text"]:focus { border-color: var(--petrol); outline: none; }

.ablage-hinweis {
  font-size: .78rem; color: var(--grau);
  background: var(--mint-hell); border-radius: 8px;
  padding: .55rem .7rem; margin: .8rem 0 0;
}
.ablage-zu {
  font-size: .85rem; color: var(--grau);
  background: var(--mint-hell); border-left: 4px solid var(--hellpetrol);
  border-radius: 0 8px 8px 0; padding: .7rem .9rem; margin: 0 0 1rem;
}
.ablage-leer { font-size: .85rem; color: var(--grau); font-style: italic; margin: 0; }

.ablage-liste { display: flex; flex-direction: column; gap: .9rem; }

.beitrag { margin: 0; }
.beitrag.kopierblock { margin: 0; }
.beitrag-zeile, .beitrag-fuss {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  font-size: .84rem;
}
.beitrag-name { font-weight: 700; color: var(--dunkelpetrol); }
.beitrag-herkunft { color: var(--grau); font-size: .78rem; }
.beitrag-hinweis { font-size: .76rem; color: var(--grau); margin: .5rem 0 0; }

.beitrag.bild {
  border: 1px solid var(--linie); border-radius: var(--rand);
  overflow: hidden; background: var(--mint-hell);
}
.beitrag.bild img {
  display: block; width: 100%; max-height: 22rem;
  object-fit: contain; background: var(--weiss);
}
.beitrag-fuss { padding: .6rem .8rem; }
.beitrag-fuss .beitrag-name { margin-right: auto; }

.knopf.klein { padding: .3rem .7rem; font-size: .75rem; }
.knopf.entfernen { border-color: #c98b8b; color: #8c1f1f; }
.knopf.entfernen:hover { background: #8c1f1f; border-color: #8c1f1f; color: var(--weiss); }
.verborgen { display: none; }

/* Tabelle aus einer geteilten CSV */
/* Ein Bild in einer Aufgabe — etwa der Ausschnitt einer Fehlermeldung.
   Der helle Rahmen trennt den Screenshot sichtbar von der Seite darunter,
   sonst verschwimmt weisser Excel-Hintergrund mit weisser Kachel. */
.bild {
  margin: .9rem 0 0;
  padding: .5rem;
  border: 1px solid var(--linie);
  border-radius: var(--rand);
  background: var(--mint-hell);
}
.bild img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: calc(var(--rand) - 2px);
}

.tabellenrahmen { overflow-x: auto; }
.tabellenrahmen table { border-collapse: collapse; font-size: .82rem; min-width: 100%; }
.tabellenrahmen th, .tabellenrahmen td {
  border: 1px solid var(--linie); padding: .3rem .55rem;
  text-align: left; white-space: nowrap;
}
.tabellenrahmen th { background: var(--mint); color: var(--dunkelpetrol); font-weight: 700; }
.tabellenrahmen tr:nth-child(even) td { background: var(--mint-hell); }

/* --- Feedback ----------------------------------------------------------- */

.feedback { border-color: var(--hellpetrol); }

/* Das Formular steht in der breiten mittleren Spalte. Ohne Begrenzung würden
   die fünf Skalenknöpfe auf Handbreite auseinandergezogen und die Fragen
   liefen über die ganze Zeile — beides liest sich schlecht. */
.feedback form { max-width: 34rem; }
.feedback fieldset { border: 0; padding: 0; margin: 0 0 1.3rem; }
.feedback legend {
  font-weight: 700; font-size: .88rem; color: var(--dunkelpetrol);
  padding: 0; margin-bottom: .4rem;
}
/* Fünf benannte Stufen, untereinander. Waagerecht ginge der Text nicht auf:
   „deutlich zu anspruchsvoll" braucht mehr Platz als ein Fünftel der Zeile. */
.auswahl { display: flex; flex-direction: column; gap: .3rem; }
.auswahl input { position: absolute; opacity: 0; width: 0; height: 0; }
.auswahl label {
  display: block;
  padding: .45rem .75rem;
  border: 1.5px solid var(--linie);
  border-radius: 6px;
  font-size: .88rem;
  color: var(--fastschwarz);
  cursor: pointer;
}
.auswahl label:hover { border-color: var(--hellpetrol); color: var(--petrol); }
.auswahl input:checked + label {
  background: var(--petrol); border-color: var(--petrol);
  color: var(--weiss); font-weight: 700;
}
.auswahl input:focus-visible + label { outline: 3px solid var(--petrol); outline-offset: 2px; }

.skala { display: flex; gap: .3rem; }
.skala input { position: absolute; opacity: 0; width: 0; height: 0; }
.skala label {
  flex: 1;
  text-align: center;
  padding: .4rem 0;
  border: 1.5px solid var(--linie);
  border-radius: 6px;
  font-size: .85rem; font-weight: 700; color: var(--grau);
  cursor: pointer;
}
.skala label:hover { border-color: var(--hellpetrol); color: var(--petrol); }
.skala input:checked + label {
  background: var(--petrol); border-color: var(--petrol); color: var(--weiss);
}
.skala input:focus-visible + label { outline: 3px solid var(--petrol); outline-offset: 2px; }
.skala-enden {
  display: flex; justify-content: space-between;
  font-size: .72rem; color: var(--grau); margin-top: .2rem;
}

.feedback label.feld { display: block; font-size: .88rem; font-weight: 700; margin-bottom: .3rem; color: var(--dunkelpetrol); }
.feedback textarea {
  width: 100%; font-family: inherit; font-size: .88rem; line-height: 1.5;
  padding: .6rem .7rem; border: 1.5px solid var(--linie); border-radius: 8px;
  resize: vertical; min-height: 4.5rem; color: var(--fastschwarz);
}
.feedback textarea:focus { border-color: var(--petrol); }

/* Die Mittelwertzeile der Leseansichten — je Skala Name, Zahl und die
   Lesehilfe dahinter, damit „3,0" bei Tempo nicht als mittelmaessig gilt. */
.mittelwerte { line-height: 2; }
.mittelwerte .baustein-hinweis { margin-left: .15rem; }

.hinweis-anonym {
  font-size: .78rem; color: var(--grau);
  background: var(--mint-hell); border-radius: 8px;
  padding: .6rem .7rem; margin-bottom: .9rem;
}

/* --- Anmeldung und einfache Seiten -------------------------------------- */

.mitte {
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 2rem 1.25rem;
  background: var(--mint-hell);
}
.tafel {
  width: 100%; max-width: 27rem;
  background: var(--weiss);
  border-radius: 14px;
  box-shadow: var(--schatten);
  padding: 2.2rem 2rem;
  text-align: left;
}
.tafel .logo { height: 40px; width: auto; margin-bottom: 1.4rem; }
.tafel h1 { font-size: 1.35rem; }
.tafel .kunde { color: var(--grau); font-size: .9rem; margin-bottom: 1.4rem; }
.tafel label.feld { display: block; font-weight: 700; font-size: .88rem; margin-bottom: .35rem; color: var(--dunkelpetrol); }
.tafel input[type="text"] {
  width: 100%; font-family: inherit; font-size: 1.05rem;
  letter-spacing: .04em;
  padding: .7rem .8rem;
  border: 1.5px solid var(--linie); border-radius: 8px;
  color: var(--fastschwarz);
}
.tafel input[type="text"]:focus { border-color: var(--petrol); outline: none; box-shadow: 0 0 0 3px rgba(0,121,142,.15); }
.tafel .knopf { width: 100%; padding: .75rem; font-size: .95rem; margin-top: 1.1rem; }
.tafel .fusszeile { margin-top: 1.6rem; font-size: .78rem; color: var(--grau); }
.tafel .fusszeile a { color: var(--grau); }

.fehler {
  background: #fdecec; border: 1px solid #f3c3c3; color: #8c1f1f;
  border-radius: 8px; padding: .6rem .8rem; font-size: .86rem; margin-bottom: 1rem;
}

/* --- Startseite: Bühne und Zugangsfeld ----------------------------------- */

.buehne { background: var(--dunkelpetrol); color: var(--weiss); }
.buehne-innen {
  max-width: 46rem; margin: 0 auto;
  padding: 4rem 1.5rem 3.5rem;
}
.buehne-vorspann {
  font-size: .74rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mint);
  margin-bottom: 1rem;
}
.buehne h1 {
  color: var(--weiss);
  font-size: clamp(1.8rem, 4.5vw, 2.7rem);
  line-height: 1.15; margin-bottom: 1rem;
}
.buehne-text { font-size: 1.05rem; color: var(--mint); max-width: 34rem; }
.buehne-knoepfe { display: flex; gap: .8rem; flex-wrap: wrap; margin: 2rem 0 0; }

.knopf.gross { padding: .75rem 1.4rem; font-size: .92rem; text-decoration: none; display: inline-block; }
.buehne .knopf { border-color: var(--mint); color: var(--mint); background: transparent; }
.buehne .knopf:hover { background: var(--mint); color: var(--dunkelpetrol); }
.buehne .knopf.voll { background: var(--hellpetrol); border-color: var(--hellpetrol); color: var(--dunkelpetrol); }
.buehne .knopf.voll:hover { background: var(--mint); border-color: var(--mint); }

.zugang { background: var(--mint-hell); border-bottom: 1px solid var(--linie); }
.zugang-innen { max-width: 46rem; margin: 0 auto; padding: 2.5rem 1.5rem; }
.zugang h2 { margin-top: 0; }

.zugang-form {
  display: flex; align-items: stretch; gap: .5rem; flex-wrap: wrap;
  margin: 1.2rem 0 .8rem;
}
.zugang-vorsatz {
  display: flex; align-items: center;
  font-size: .95rem; color: var(--grau); white-space: nowrap;
}
.zugang-form input[type="text"] {
  flex: 1 1 9rem; min-width: 0;
  font-family: inherit; font-size: 1.05rem; font-weight: 700;
  letter-spacing: .04em;
  padding: .6rem .8rem;
  border: 1.5px solid var(--hellpetrol); border-radius: 8px;
  background: var(--weiss); color: var(--dunkelpetrol);
}
.zugang-form input[type="text"]:focus {
  outline: none; border-color: var(--petrol);
  box-shadow: 0 0 0 3px rgba(0, 121, 142, .15);
}
.zugang-form .knopf { padding: .6rem 1.3rem; }
.zugang-hinweis { font-size: .84rem; color: var(--grau); margin: 0; }

/* Der leise Hinweis am Fuß der Startseite: Wer kein Teilnehmer ist, findet
   hier den Weg zum Angebot — deutlich zurückgenommen, damit er den
   Teilnehmenden nicht im Weg steht. */
.abschlusshinweis {
  margin-top: 3rem; padding-top: 1.2rem;
  border-top: 1px solid var(--linie);
  font-size: .86rem; color: var(--grau);
}

.dreier {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem; margin: 1.5rem 0 2.5rem;
}
.dreier article { border-top: 3px solid var(--mint); padding-top: .9rem; }
.dreier h3 { margin-bottom: .4rem; }
.dreier p { font-size: .92rem; margin-bottom: 0; }

@media (max-width: 600px) {
  .buehne-innen { padding: 2.5rem 1.25rem 2.25rem; }
  .zugang-vorsatz { font-size: .82rem; }
  .zugang-form input[type="text"] { flex-basis: 100%; }
}

/* --- Öffentliche Seiten (Startseite, Impressum, Datenschutz) ------------- */

.seite {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}
.seite h1 { font-size: 2rem; margin-bottom: 1.2rem; }
.seite h2 { margin-top: 2.2rem; }
.seite h3 { margin-top: 1.5rem; }
.platzhalter {
  background: #fff6e0; border: 1px dashed #e0b34a; border-radius: 8px;
  padding: .15rem .45rem; font-size: .92rem; color: #7a5400; font-weight: 700;
}
.hinweiskasten {
  background: var(--mint-hell); border-left: 4px solid var(--hellpetrol);
  border-radius: 0 8px 8px 0; padding: 1rem 1.2rem; margin: 1.5rem 0;
  font-size: .92rem;
}
.hinweiskasten > :last-child { margin-bottom: 0; }

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

.fuss {
  border-top: 1px solid var(--linie);
  background: var(--mint-hell);
  padding: 1.5rem;
  font-size: .82rem;
  color: var(--grau);
}
.fuss-innen {
  max-width: var(--breite); margin: 0 auto;
  display: flex; gap: 1.25rem; flex-wrap: wrap; align-items: center;
}
.fuss a { color: var(--grau); }
.fuss .rechts { margin-left: auto; }

/* --- Umbruch für schmale Bildschirme ------------------------------------ */

@media (max-width: 1180px) {
  .raster { grid-template-columns: 13rem minmax(0, 1fr); }
  .danach { grid-column: 1 / -1; position: static; }
  .danach .karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
  .danach .karte { margin-bottom: 0; }
}

@media (max-width: 800px) {
  .raster { grid-template-columns: minmax(0, 1fr); padding: 1.25rem 1rem 3rem; gap: 1.25rem; }
  .agenda { position: static; }
  .agenda-schalter {
    display: block; width: 100%;
    text-align: left; padding: .75rem 1rem;
    background: var(--mint-hell); border: 1px solid var(--mint);
    border-radius: var(--rand);
    font-family: inherit; font-weight: 700; font-size: .9rem;
    color: var(--dunkelpetrol); cursor: pointer;
  }
  .agenda-innen { display: none; margin-top: .5rem; }
  .agenda.offen .agenda-innen { display: block; }
  .spalte-titel { display: none; }
  .agenda .spalte-titel { display: block; }
  .danach .spalte-titel { display: block; }
  .kopf-innen { padding: .7rem 1rem; gap: .8rem; }
  .beispiel-inhalt { padding: 1rem .9rem; }
  .baustein-inhalt { padding: 0 0 1.1rem 1.5rem; }
  h1 { font-size: 1.4rem; }
}

/* --- Druck -------------------------------------------------------------- */

@media print {
  .kopf, .agenda, .knopf, .fuss, .feedback { display: none !important; }
  .raster { display: block; max-width: none; padding: 0; }
  .beispiel-inhalt, .baustein-inhalt { display: block !important; }
  .kopierblock-text { max-height: none; overflow: visible; }
  body { font-size: 11pt; }
}