/* Taschen-KI - Stylesheet
   Ausgangszustand: Smartphone mit 360 Pixel Breite.
   Ergaenzungen ausschliesslich ueber min-width. Eine max-width-Abfrage
   kommt in dieser Datei nicht vor. */

/* Zwei Darstellungen. Die dunkle steht in :root und gilt, solange kein
   Merkmal data-theme gesetzt ist, also auch ohne JavaScript. Die helle
   Darstellung ueberschreibt in :root[data-theme="hell"] ausschliesslich
   Farbwerte. Alle Farben stehen als Variable, damit beide Darstellungen aus
   einer Quelle kommen.

   Getrennt gehalten sind Flaeche und Schrift: --linie faerbt Rahmen und
   Fokusrahmen, --linie-text faerbt Schrift. In der hellen Darstellung braucht
   Schrift einen dunkleren Wert als ein Rahmen, weil Schrift 4,5 zu 1 erreichen
   muss und ein Rahmen 3 zu 1. Dasselbe gilt fuer --aktion und --bestaetigung. */

:root {
  color-scheme: dark;

  --hintergrund: #08090B;
  --karte: #0E1116;
  --linie: #4FB3D9;
  --aktion: #F0741E;
  --bestaetigung: #2FA84F;
  --text: #D6DBE1;
  --sekundaer: #8A929C;

  --ueberschrift: #FFFFFF;
  --linie-text: #4FB3D9;
  --aktion-text: #F0741E;
  --bestaetigung-text: #2FA84F;

  --kopf-flaeche: rgba(8, 9, 11, 0.94);
  --huelle: rgba(8, 9, 11, 0.82);
  --feldflaeche: #0A0C10;
  --platzhalterfarbe: #5C646E;
  --knopfschrift: #14100C;
  --knopfschrift-fertig: #08120A;
  --gesperrt-flaeche: #2A2E34;
  --gesperrt-schrift: #7D858F;
  --schatten: rgba(0, 0, 0, 0.55);

  --tint-leise: rgba(79, 179, 217, 0.05);
  --tint-verlauf: rgba(79, 179, 217, 0.14);
  --tint-warn: rgba(240, 116, 30, 0.06);
  --rand-leise: rgba(79, 179, 217, 0.28);
  --rand-mittel: rgba(79, 179, 217, 0.35);
  --rand-feld: rgba(79, 179, 217, 0.45);

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  --rand: 16px;
  --kartenabstand: 20px;
  --karteninnen: 18px;
  --radius: 12px;
}

/* Helle Darstellung. Geprueft am 27.07.2026:
   Text auf Karte 17,6 zu 1. Sekundaertext 6,2 zu 1. Verweise 6,2 zu 1.
   Aktion als Schrift 5,8 zu 1. Bestaetigung als Schrift 6,0 zu 1.
   Schrift auf dem orangen Knopf 6,5 zu 1. Fokusrahmen 3,6 zu 1. */

:root[data-theme="hell"] {
  color-scheme: light;

  --hintergrund: #F4F6F8;
  --karte: #FFFFFF;
  --linie: #2E90BC;
  --aktion: #F0741E;
  --bestaetigung: #2FA84F;
  --text: #16191D;
  --sekundaer: #596170;

  --ueberschrift: #0B0D10;
  --linie-text: #14688C;
  --aktion-text: #A84A05;
  --bestaetigung-text: #1B7233;

  --kopf-flaeche: rgba(244, 246, 248, 0.94);
  --huelle: rgba(11, 13, 16, 0.55);
  --feldflaeche: #FFFFFF;
  --platzhalterfarbe: #6B7280;
  --knopfschrift: #14100C;
  --knopfschrift-fertig: #08120A;
  --gesperrt-flaeche: #E4E7EB;
  --gesperrt-schrift: #6B727C;
  --schatten: rgba(11, 13, 16, 0.18);

  --tint-leise: rgba(46, 144, 188, 0.07);
  --tint-verlauf: rgba(46, 144, 188, 0.13);
  --tint-warn: rgba(240, 116, 30, 0.09);
  --rand-leise: rgba(21, 43, 56, 0.16);
  --rand-mittel: rgba(21, 43, 56, 0.22);
  --rand-feld: rgba(21, 43, 56, 0.38);
}

* { box-sizing: border-box; }

html {
  background: var(--hintergrund);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--hintergrund);
  color: var(--text);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.65;
  overflow-x: hidden;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
  -webkit-font-smoothing: antialiased;
}

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

/* ---------- Kopfbereich ---------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 var(--rand);
  padding-left: calc(var(--rand) + env(safe-area-inset-left));
  padding-right: calc(var(--rand) + env(safe-area-inset-right));
  background: var(--kopf-flaeche);
  border-bottom: 1px solid var(--rand-leise);
  backdrop-filter: saturate(140%) blur(8px);
}

.kopf-name {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.kopf-name b { color: var(--aktion-text); font-weight: 700; }

.kopf-zurueck {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 10px;
  font-size: 16px;
  color: var(--linie-text);
  text-decoration: none;
  border-radius: 8px;
}

/* ---------- Grundraster ---------- */

.huelle {
  padding: 0 var(--rand);
  padding-left: calc(var(--rand) + env(safe-area-inset-left));
  padding-right: calc(var(--rand) + env(safe-area-inset-right));
}

h1 {
  font-family: var(--serif);
  font-size: 27px;
  line-height: 1.25;
  font-weight: 700;
  margin: 24px 0 10px;
  color: var(--ueberschrift);
}

h2 {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.3;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--ueberschrift);
}

h3 {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.35;
  margin: 22px 0 8px;
  color: var(--ueberschrift);
}

p { margin: 0 0 14px; }

a { color: var(--linie-text); }

.vorspann {
  font-size: 18px;
  color: var(--text);
  margin-bottom: 20px;
}

.leise {
  color: var(--sekundaer);
  font-size: 16px;
}

.brotkrume {
  font-size: 15px;
  color: var(--sekundaer);
  margin: 14px 0 0;
}

.brotkrume a { color: var(--sekundaer); }

/* ---------- Disclaimer ---------- */

.disclaimer {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 0 0 var(--kartenabstand);
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
  background: var(--tint-leise);
}

.disclaimer b {
  display: block;
  font-weight: 700;
  margin-bottom: 6px;
  font-size: 17px;
}

.disclaimer p { margin: 0; }

/* ---------- Warnstufen ---------- */

.warn2 {
  font-size: 16px;
  color: var(--text);
  border-left: 3px solid var(--linie);
  padding: 6px 0 6px 12px;
  margin: 0 0 16px;
}

.warn3 {
  border: 2px solid var(--aktion);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.6;
  background: var(--tint-warn);
}

.warn3 b {
  display: block;
  font-weight: 700;
  margin-bottom: 6px;
  font-size: 17px;
}

.warn3 p { margin: 0; }

.stufe3-zeichen {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border: 1px solid var(--aktion);
  border-radius: 999px;
  color: var(--aktion-text);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  vertical-align: middle;
  white-space: nowrap;
}

.kartenhinweis {
  font-size: 16px;
  color: var(--sekundaer);
  margin: 0 0 14px;
}

/* ---------- Kacheln ---------- */

.kacheln {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.kachel {
  display: block;
  min-height: 88px;
  padding: 16px;
  border: 1px solid var(--rand-mittel);
  border-radius: var(--radius);
  background: var(--karte);
  color: var(--text);
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.kachel-name {
  display: block;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 700;
  color: var(--ueberschrift);
  line-height: 1.3;
}

.kachel-unter {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  color: var(--sekundaer);
}

.kachel-frei {
  display: inline-block;
  margin-top: 8px;
  padding: 1px 8px;
  border: 1px solid var(--bestaetigung);
  border-radius: 999px;
  color: var(--bestaetigung-text);
  font-size: 15px;
  font-weight: 700;
}

.kachel:active { border-color: var(--aktion); }

/* ---------- Karte ---------- */

.karte {
  background: var(--karte);
  border: 1px solid var(--rand-leise);
  border-radius: var(--radius);
  padding: var(--karteninnen);
  margin: 0 0 var(--kartenabstand);
}

.versprechen {
  font-size: 17px;
  color: var(--text);
  margin: 0 0 14px;
}

/* ---------- Eingabefelder ---------- */

.feld { margin: 0 0 16px; }

.feld label {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.feld input,
.feld textarea {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 13px 14px;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--feldflaeche);
  border: 1px solid var(--rand-feld);
  border-radius: 10px;
  -webkit-appearance: none;
  appearance: none;
}

.feld textarea {
  resize: vertical;
  overflow: hidden;
  min-height: 84px;
}

.feld input::placeholder,
.feld textarea::placeholder { color: var(--platzhalterfarbe); }

.feld input:focus,
.feld textarea:focus {
  outline: 3px solid var(--linie);
  outline-offset: 1px;
  border-color: var(--linie);
}

/* ---------- Knoepfe ---------- */

.knoepfe { margin-top: 4px; }

.knopf-reihe {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Abstaende knapp gehalten, damit die laengste Beschriftung
     ("Kopieren und Gemini oeffnen") bei 360 Pixel einzeilig bleibt. */
  gap: 8px;
  width: 100%;
  min-height: 64px;
  padding: 12px 10px;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  color: var(--knopfschrift);
  background: var(--aktion);
  border: 2px solid var(--aktion);
  border-radius: 12px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}

.knopf svg { flex: 0 0 auto; }

.knopf:active { transform: translateY(1px); filter: brightness(0.9); }

.knopf-neben {
  margin-top: 12px;
  min-height: 52px;
  font-size: 16px;
  font-weight: 600;
  color: var(--linie-text);
  background: transparent;
  border: 2px solid var(--linie);
}

.knopf.fertig {
  background: var(--bestaetigung);
  border-color: var(--bestaetigung);
  color: var(--knopfschrift-fertig);
}

.knopf-neben.fertig { color: var(--knopfschrift-fertig); }

.knopf:focus-visible,
.kachel:focus-visible,
.kopf-zurueck:focus-visible,
a:focus-visible,
summary:focus-visible,
input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--linie);
  outline-offset: 2px;
  border-radius: 8px;
}

.knopf[disabled],
.knopf[aria-disabled="true"] {
  background: var(--gesperrt-flaeche);
  border-color: var(--gesperrt-flaeche);
  color: var(--gesperrt-schrift);
  cursor: default;
}

.knopf[aria-disabled="true"]:active { transform: none; filter: none; }

.kauf-zustellung {
  font-size: 16px;
  color: var(--text);
  margin: 0 0 16px;
}

.knopf-zusatz {
  margin: 10px 0 0;
  font-size: 15px;
  color: var(--sekundaer);
  text-align: center;
}

/* ---------- Rueckmeldungen ---------- */

.melder {
  margin: 12px 0 0;
  font-size: 16px;
  color: var(--bestaetigung-text);
  min-height: 1px;
}

.melder:empty { margin: 0; }

.ersatzkopie {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--linie);
  border-radius: 10px;
  font-size: 16px;
  white-space: pre-wrap;
  -webkit-user-select: all;
  user-select: all;
}

/* ---------- Vorschau ---------- */

.vorschau {
  margin-top: 16px;
  border-top: 1px solid var(--rand-leise);
  padding-top: 10px;
}

.vorschau summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: 16px;
  color: var(--linie-text);
  cursor: pointer;
  list-style: none;
  touch-action: manipulation;
}

.vorschau summary::-webkit-details-marker { display: none; }

.vorschau summary::before {
  content: "+";
  display: inline-block;
  width: 22px;
  font-weight: 700;
}

.vorschau[open] summary::before { content: "-"; }

.vorschau pre {
  margin: 6px 0 0;
  padding: 12px;
  background: var(--feldflaeche);
  border: 1px solid var(--rand-leise);
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* ---------- Kaufbereich ---------- */

.kauf {
  border: 2px solid var(--aktion);
  border-radius: var(--radius);
  padding: var(--karteninnen);
  margin: 0 0 var(--kartenabstand);
  background: var(--karte);
}

.kauf h2 { margin-bottom: 10px; }

.preis-zeile {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  margin: 8px 0 6px;
}

.preis-gross {
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ueberschrift);
}

.preis-anker {
  font-size: 20px;
  color: var(--sekundaer);
  text-decoration: line-through;
}

.preis-frist { font-size: 16px; color: var(--aktion-text); margin: 0 0 4px; }

.preis-ust { font-size: 15px; color: var(--sekundaer); margin: 0 0 16px; }

.kaufhaken {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 8px 0;
  margin-bottom: 6px;
  font-size: 16px;
  line-height: 1.5;
  cursor: pointer;
  touch-action: manipulation;
}

.kaufhaken input[type="checkbox"] {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin: 4px 0 0;
  accent-color: var(--aktion);
}

.gesperrt-hinweis {
  font-size: 15px;
  color: var(--sekundaer);
  margin: 10px 0 0;
  text-align: center;
}

.kauf-gesperrt {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: var(--karteninnen);
  margin: 0 0 var(--kartenabstand);
  font-size: 17px;
}

.gesperrte-routine {
  border-top: 1px dashed var(--rand-leise);
  margin-top: 16px;
  padding-top: 14px;
  font-size: 16px;
  color: var(--sekundaer);
}

/* ---------- App-Verweis ---------- */

.app-verweis {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 12px 16px;
  margin: 0 0 var(--kartenabstand);
  border: 1px dashed var(--linie);
  border-radius: var(--radius);
  color: var(--linie-text);
  text-decoration: none;
  font-size: 16px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- Fussbereich ---------- */

.fuss {
  margin-top: 32px;
  padding: 20px var(--rand) 8px;
  padding-left: calc(var(--rand) + env(safe-area-inset-left));
  padding-right: calc(var(--rand) + env(safe-area-inset-right));
  border-top: 1px solid var(--rand-leise);
}

.fuss ul {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}

.fuss a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 16px;
  color: var(--linie-text);
  text-decoration: none;
}

.fuss p { font-size: 15px; color: var(--sekundaer); margin: 0; }

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

.rechtstext { font-size: 17px; }
.rechtstext ul { padding-left: 22px; }
.rechtstext li { margin-bottom: 8px; }
.platzhalter { color: var(--aktion-text); font-weight: 700; }

/* ---------- App ---------- */

.app-ebene[hidden] { display: none; }

.app-hinweis {
  font-size: 16px;
  color: var(--sekundaer);
  margin: 0 0 16px;
}

.ablegen {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  padding: 14px var(--rand);
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
  background: var(--karte);
  border-top: 2px solid var(--aktion);
}

.ablegen p { margin: 0 0 10px; font-size: 16px; }

.ablegen-karte {
  border: 1px solid var(--aktion);
  border-radius: var(--radius);
  padding: var(--karteninnen);
  margin: 0 0 var(--kartenabstand);
  background: var(--karte);
}

.ablegen-karte ol { margin: 10px 0 0; padding-left: 22px; font-size: 16px; }
.ablegen-karte li { margin-bottom: 8px; }

.ablegen-schliessen {
  min-height: 44px;
  margin-top: 12px;
  padding: 0 14px;
  font-size: 16px;
  color: var(--sekundaer);
  background: transparent;
  border: 1px solid var(--sekundaer);
  border-radius: 8px;
  cursor: pointer;
  touch-action: manipulation;
}

/* ---------- Farbverlauf ---------- */

.verlauf {
  background-image: linear-gradient(160deg,
    var(--tint-verlauf) 0%,
    transparent 62%);
}

/* ---------- Ergaenzung ab 700 Pixel ---------- */

@media (min-width: 700px) {
  :root { --rand: 24px; }

  .kacheln { grid-template-columns: 1fr 1fr; gap: 16px; }

  .knopf-reihe { grid-template-columns: 1fr 1fr; }

  .fuss ul { grid-template-columns: repeat(4, auto); gap: 24px; }

  h1 { font-size: 32px; }
}

/* ---------- Ergaenzung ab 1100 Pixel ---------- */

@media (min-width: 1100px) {
  .kacheln { grid-template-columns: 1fr 1fr 1fr; }

  .huelle-thema { max-width: 720px; margin-left: auto; margin-right: auto; }

  .huelle-start { max-width: 1100px; margin-left: auto; margin-right: auto; }

  .fuss-innen { max-width: 1100px; margin-left: auto; margin-right: auto; }
}

/* ---------- Zeigergeraete ---------- */

@media (hover: hover) and (pointer: fine) {
  .knopf:hover { filter: brightness(1.08); }
  .kachel:hover { border-color: var(--aktion); }
  .app-verweis:hover { border-style: solid; }
  .fuss a:hover { text-decoration: underline; }
}

/* ---------- Reduzierte Bewegung ---------- */

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .knopf:active { transform: none; }
  .verlauf { background-image: none; }
}

/* ---------- Einwilligung: Leiste, Fenster und Fusszeilen-Knopf ---------- */

.einwilligung-leiste {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--karte);
  border-top: 2px solid var(--linie);
  padding: 16px var(--rand) calc(16px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 24px var(--schatten);
}

.einwilligung-innen {
  max-width: 720px;
  margin: 0 auto;
}

.einwilligung-titel {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.35;
  color: var(--ueberschrift);
}

.einwilligung-text {
  margin: 0 0 14px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
}

.einwilligung-knoepfe {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.einwilligung-knoepfe .knopf {
  width: 100%;
  margin: 0;
}

.einwilligung-mehr {
  min-height: 44px;
  background: none;
  border: 0;
  padding: 4px;
  font-family: var(--sans);
  font-size: 17px;
  color: var(--linie-text);
  text-decoration: underline;
  cursor: pointer;
}

.einwilligung-verweise {
  margin: 12px 0 0;
  font-size: 15px;
  color: var(--sekundaer);
}

.einwilligung-verweise a {
  color: var(--sekundaer);
  margin-right: 14px;
}

/* Fenster fuer die Einstellungen */

.einwilligung-huelle {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--huelle);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  overflow-y: auto;
}

.einwilligung-fenster {
  position: relative;
  width: 100%;
  max-width: 640px;
  background: var(--karte);
  border-top: 2px solid var(--linie);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 22px var(--rand) calc(22px + env(safe-area-inset-bottom));
}

.einwilligung-fenster h2 {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-size: 22px;
  color: var(--ueberschrift);
}

.einwilligung-gruppe {
  border-top: 1px solid var(--rand-leise);
  padding: 14px 0;
}

.einwilligung-gruppe label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  color: var(--text);
  cursor: pointer;
}

.einwilligung-gruppe input {
  width: 22px;
  height: 22px;
  accent-color: var(--linie);
  flex: none;
}

.einwilligung-gruppe p {
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--sekundaer);
}

.einwilligung-schliessen {
  position: absolute;
  top: 10px;
  right: 10px;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: 0;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--sekundaer);
  cursor: pointer;
}

.fuss-einstellungen {
  display: flex;
  align-items: center;
  background: none;
  border: 0;
  padding: 0;
  min-height: 44px;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--linie-text);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.fuss-einstellungen:hover { text-decoration: underline; }

.einwilligung-mehr:focus-visible,
.einwilligung-schliessen:focus-visible,
.fuss-einstellungen:focus-visible,
.einwilligung-gruppe input:focus-visible {
  outline: 3px solid var(--linie);
  outline-offset: 2px;
}

@media (min-width: 700px) {
  .einwilligung-knoepfe {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }
  .einwilligung-knoepfe .knopf {
    width: auto;
    flex: 1 1 220px;
  }
  .einwilligung-mehr {
    flex: 0 0 auto;
  }
  .einwilligung-huelle {
    align-items: center;
    padding: var(--rand);
  }
  .einwilligung-fenster {
    border-radius: var(--radius);
    border: 2px solid var(--linie);
  }
}

/* ---------- Umschalter fuer helle und dunkle Darstellung ---------- */

.kopf-rechts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
}

.kopf-rechts .kopf-zurueck { margin-left: 0; }

.kopf-darstellung {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 10px;
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--linie-text);
  cursor: pointer;
}

.kopf-darstellung svg { flex: none; }

/* Beide Sinnbilder und beide Beschriftungen stehen im Quelltext. Sichtbar ist
   jeweils die Fassung, die den naechsten Schritt ankuendigt: in der dunklen
   Darstellung die Sonne mit "Helle Ansicht", in der hellen der Mond mit
   "Dunkle Ansicht". */
.sinnbild { display: inline-flex; align-items: center; }
.sinnbild-mond { display: none; }

:root[data-theme="hell"] .sinnbild-sonne { display: none; }
:root[data-theme="hell"] .sinnbild-mond { display: inline-flex; }

/* Auf schmalen Geraeten traegt der Knopf allein das Sinnbild. Die
   Beschriftung bleibt fuer Vorleseprogramme ueber aria-label erhalten. */
.kopf-darstellung-wort { display: none; }

.kopf-darstellung:focus-visible {
  outline: 3px solid var(--linie);
  outline-offset: 2px;
}

@media (min-width: 700px) {
  .wort-hell { display: inline; }
  .wort-dunkel { display: none; }
  :root[data-theme="hell"] .wort-hell { display: none; }
  :root[data-theme="hell"] .wort-dunkel { display: inline; }
  .kopf-darstellung:hover { border-color: var(--rand-mittel); }
}

/* ---------- Leitsatz auf der Startseite ---------- */

.leitsatz {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.4;
  color: var(--ueberschrift);
  margin: 0 0 18px;
}

@media (min-width: 700px) {
  .leitsatz { font-size: 24px; }
}

/* ---------- Sektion "Andere KI-Dienste" unter den Knoepfen ---------- */

.knoepfe .knopf + .knopf { margin-top: 12px; }

.dienste {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--rand-leise);
}

.dienste h3 {
  margin: 0 0 8px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--sekundaer);
}

.dienste-liste {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}

.dienste-liste a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--rand-mittel);
  border-radius: 999px;
  font-size: 16px;
  color: var(--linie-text);
  text-decoration: none;
}

.dienste-liste a:focus-visible {
  outline: 3px solid var(--linie);
  outline-offset: 2px;
}

.partnerhinweis {
  margin-left: 5px;
  font-size: 14px;
  color: var(--sekundaer);
}

@media (min-width: 700px) {
  .dienste-liste a:hover { border-color: var(--linie); }
}