/* Gestaltung — eine Datei, keine Abhängigkeiten.
   Farben, Maße und Schriftgrade sind an den drei Designvorlagen gemessen
   (Bildschirmbreite 393 px). Alles Wiederkehrende steht oben als Variable. */

@font-face { font-family: "Roboto"; src: url("fonts/roboto.186886b65688.woff2") format("woff2"); font-weight: 300 800; font-stretch: 75% 100%; font-style: normal; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("fonts/caveat.2d9de14f93a2.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Caveat Brush"; src: url("fonts/caveat-brush.7e1fba9b1090.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --blau: #12304F;
  --text: #1C3350;
  --grau: #667487;
  --grau-hell: #8E99A8;
  --gruen: #345B48;
  --gruen-dunkel: #284838;
  --gruen-schrift: #3F6B54;
  --grund: #F7F3ED;
  --karte: #FCF9F5;
  --creme: #FFFCF7;
  --mint: #E1ECDC;
  --hellblau: #DFEAF2;
  --sand: #F7E8D1;
  --lavendel: #E7E7F5;
  --plakette: #FBE7C6;
  --braun: #7A4E14;
  --rot: #A8432F;
  --linie: rgba(18, 48, 79, .09);
  --schatten: 0 1px 2px rgba(18, 48, 79, .04), 0 8px 22px rgba(18, 48, 79, .055);
  --schatten-stark: 0 2px 6px rgba(18, 48, 79, .08), 0 14px 34px rgba(18, 48, 79, .12);
  --radius: 22px;
  --radius-mittel: 16px;
  --radius-klein: 12px;
  --rand: 10px;
  --leiste: 60px;
  --unten: env(safe-area-inset-bottom, 0px);
  --oben: env(safe-area-inset-top, 0px);
  --schrift: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand: "Caveat", "Segoe Print", cursive;
  --pinsel: "Caveat Brush", "Caveat", cursive;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--grund); }
body {
  margin: 0; font-family: var(--schrift); font-size: 15px; line-height: 1.42; color: var(--text);
  background: var(--grund); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  overflow-x: clip; overscroll-behavior-y: none;
}
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--gruen); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }

.app { position: relative; max-width: 430px; min-height: 100dvh; margin: 0 auto; background: var(--grund); padding-bottom: calc(var(--leiste) + var(--unten) + 18px); }
@media (min-width: 480px) { body { background: #EFEAE2; } .app { box-shadow: 0 0 0 1px var(--linie), 0 20px 60px rgba(18, 48, 79, .12); } }

.icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon--klein { width: 17px; height: 17px; stroke-width: 1.8; }
.icon--mini { width: 14px; height: 14px; stroke-width: 2; }
.icon--gross { width: 30px; height: 30px; stroke-width: 1.5; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------------------------------------------------------------- Seitenkopf */
.kopf { position: relative; padding: calc(var(--oben) + 16px) 22px 0; min-height: calc(var(--oben) + 150px); isolation: isolate; }
.kopf--start { min-height: calc(var(--oben) + 222px); }
.kopf--treffen { min-height: calc(var(--oben) + 132px); }
.kopf--coach { min-height: calc(var(--oben) + 138px); }
.kopf--klein { min-height: calc(var(--oben) + 118px); }
.kopf__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; z-index: -2; }
.kopf::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46px; z-index: -1; background: linear-gradient(to bottom, rgba(247, 243, 237, 0), var(--grund)); }
.kopf__zurueck { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: -8px 0 -6px -14px; color: var(--gruen-dunkel); }
.kopf__zurueck .icon { width: 28px; height: 28px; stroke-width: 2; }
.kopf__zurueck + .titel { margin-left: 14px; }
.kopf__zurueck ~ .untertitel { margin-left: 14px; }
.kopf--coach .kopf__zurueck { position: absolute; left: 22px; top: calc(var(--oben) + 22px); margin: 0 0 0 -14px; }
.kopf--coach .titel, .kopf--coach .untertitel { margin-left: 34px; }
.titel { display: flex; align-items: flex-start; gap: 6px; font-family: var(--pinsel); font-weight: 400; font-size: 46px; line-height: .98; color: var(--blau); letter-spacing: .2px; }
.titel--mittel { font-size: 40px; }
.titel__zier { width: 30px; height: 30px; margin-top: -6px; flex: none; color: #8FA56B; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.titel__zier--birne { color: var(--blau); width: 36px; height: 36px; margin-top: -4px; }
.untertitel { margin-top: 5px; font-size: 15.5px; color: #5C6B7D; }

.profilkarte { position: absolute; left: 14px; bottom: 30px; display: flex; align-items: center; gap: 11px; width: 221px; min-height: 84px; padding: 10px 12px 10px 10px; background: rgba(252, 249, 245, .94); border-radius: 20px; box-shadow: var(--schatten); }
.profilkarte__bild, .rund { width: 62px; height: 62px; flex: none; border-radius: 50%; object-fit: cover; background: var(--sand); }
.rund--platz { display: flex; align-items: center; justify-content: center; font-family: var(--pinsel); font-size: 30px; color: var(--braun); }
.profilkarte__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.profilkarte__name { font-weight: 700; font-size: 15px; color: var(--blau); }
.profilkarte__geb { display: flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 11.5px; color: var(--text); white-space: nowrap; }
.profilkarte__zeile { display: flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 11.5px; color: #55647A; }
.profilkarte__zeile .icon { width: 12px; height: 12px; color: #8FA56B; fill: #8FA56B; }

/* -------------------------------------------------------------------- Karten */
.inhalt { position: relative; padding: 0 var(--rand); display: flex; flex-direction: column; gap: 9px; }
.inhalt--hoch { margin-top: -22px; }
.karte { position: relative; background: var(--karte); border-radius: var(--radius); box-shadow: var(--schatten); padding: 14px; }
.karte--flach { box-shadow: none; border: 1px solid var(--linie); }
.karte__kopf { display: flex; align-items: center; gap: 12px; }
.karte__kopf--oben { align-items: flex-start; }
.karte__titel { font-size: 19px; font-weight: 700; font-stretch: 94%; line-height: 1.2; color: var(--blau); letter-spacing: -.1px; }
.karte__unter { margin-top: 1px; font-size: 13px; color: var(--grau); }
.abschnitt { display: flex; align-items: center; gap: 12px; padding: 12px 4px 2px 12px; }
.plakette { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--plakette); color: var(--braun); }
.plakette--blau { background: var(--hellblau); color: #2F5574; }
.plakette--mint { background: var(--mint); color: var(--gruen); }
.plakette--lavendel { background: var(--lavendel); color: #3D3F86; }
.plakette--sand { background: var(--plakette); color: var(--braun); }
.plakette--dunkel { color: var(--blau); }
.plakette--klein { width: 30px; height: 30px; }
.plakette--klein .icon { width: 18px; height: 18px; }
.hand { font-family: var(--hand); font-size: 16px; line-height: 1.05; color: var(--blau); transform: rotate(-11deg); transform-origin: left bottom; white-space: nowrap; }

/* ---------------------------------------------------------- Karte: Treffen */
.treffenkarte { display: grid; grid-template-columns: minmax(0, 1fr) 118px; column-gap: 4px; padding: 12px 12px 14px; }
.treffenkarte__daten { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 12px 55px; }
.treffenkarte__zeile { display: flex; align-items: center; gap: 9px; font-size: 15px; color: #45556B; }
.treffenkarte__zeile--stark { font-weight: 700; color: var(--blau); }
.treffenkarte__zeile .icon { width: 16px; height: 16px; color: var(--blau); stroke-width: 1.8; }
.treffenkarte__seite { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.treffenkarte__seite img { width: 116px; height: auto; }
.treffenkarte__seite .hand { margin: 10px 0 2px 6px; font-size: 15px; }
.leer-zeile { margin: 4px 0 12px 55px; font-size: 14.5px; color: var(--grau); }

/* ----------------------------------------------------------- Karte: Impuls */
.impuls { display: grid; grid-template-columns: minmax(0, 1fr) 96px; column-gap: 4px; padding: 12px 12px 14px; }
.impuls__satz { margin: 2px 0 0 55px; font-size: 15.5px; font-weight: 700; line-height: 1.32; color: var(--blau); }
.impuls__grund { grid-column: 1; margin: 8px 0 0 8px; font-size: 13px; line-height: 1.35; color: var(--grau); }
.impuls__seite { grid-column: 2; grid-row: 1 / span 3; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.impuls__seite img { width: 86px; height: auto; }
.impuls__seite .hand { margin: 6px 0 0 4px; font-size: 14.5px; white-space: normal; text-align: center; transform-origin: center; }

/* ----------------------------------------------------------- Schnellzugriff */
.schnell { padding: 13px 8px 9px; }
.schnell__kopf { padding: 0 4px 9px; }
.schnell__titel { font-size: 18px; font-weight: 700; font-stretch: 94%; color: var(--blau); }
.schnell__unter { font-size: 13px; color: var(--grau); }
.kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.kachel { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 127px; padding: 14px 6px 22px 8px; border-radius: 15px; background: var(--mint); color: var(--gruen-dunkel); }
.kachel--blau { background: var(--hellblau); color: #1F3E5E; }
.kachel--sand { background: var(--sand); color: #6A4312; }
.kachel--lavendel { background: var(--lavendel); color: #2E2F6E; }
.kachel .icon--gross { margin-bottom: 9px; }
.kachel__titel { font-size: 14px; font-weight: 700; font-stretch: 92%; line-height: 1.15; text-align: center; }
.kachel__text { align-self: flex-start; margin-top: 7px; font-size: 11.2px; line-height: 1.28; color: #5A6778; hyphens: auto; }
.kachel__pfeil { position: absolute; right: 7px; bottom: 7px; width: 13px; height: 13px; stroke-width: 2.2; }

/* --------------------------------------------------------------- Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 9px 20px; border-radius: 999px; font-size: 16px; font-weight: 600; line-height: 1.15; text-align: center; transition: transform .12s ease, background-color .15s ease, opacity .15s ease; }
.btn:active { transform: scale(.985); }
.btn[disabled] { opacity: .55; pointer-events: none; }
.btn--gruen { background: var(--gruen); color: #fff; box-shadow: 0 2px 6px rgba(40, 72, 56, .22); }
.btn--gruen:active { background: var(--gruen-dunkel); }
.btn--weit { width: 100%; }
.btn--pfeil { justify-content: space-between; padding: 9px 16px 9px 22px; }
.btn--hell { background: var(--creme); color: var(--gruen-dunkel); border: 1px solid rgba(52, 91, 72, .28); }
.btn--mint { background: var(--mint); color: var(--gruen-dunkel); }
.btn--still { min-height: 40px; padding: 6px 12px; font-size: 14.5px; font-weight: 600; color: var(--gruen-schrift); }
.btn--rot { color: var(--rot); }
.btn--klein { min-height: 36px; padding: 6px 14px; font-size: 14px; }
.btn--rund { width: 42px; height: 42px; min-height: 0; padding: 0; border-radius: 50%; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.knopfreihe--rechts { justify-content: flex-end; }
.unten-fest { position: sticky; bottom: calc(var(--leiste) + var(--unten) + 8px); z-index: 20; padding: 6px 4px 0; }

/* ----------------------------------------------------- Zeilen (Planungsdetails) */
.zeilen { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.zeile { display: grid; grid-template-columns: 30px 96px minmax(0, 1fr) 18px; align-items: center; column-gap: 12px; width: 100%; min-height: 37px; padding: 3px 10px 3px 9px; background: var(--creme); border: 1px solid rgba(18, 48, 79, .05); border-radius: 13px; text-align: left; font-size: 14.5px; color: var(--blau); }
.zeile__name { font-weight: 700; }
.zeile__wert { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zeile__wert--leer { color: var(--grau-hell); }
.zeile > .icon { width: 17px; height: 17px; color: #55647A; stroke-width: 2; }

/* -------------------------------------------------------- Vorschlagskarten */
.vorschlag { position: relative; display: grid; grid-template-columns: 105px minmax(0, 1fr) 20px; column-gap: 11px; align-items: center; padding: 6px 8px 6px 6px; min-height: 88px; border: 1.5px solid transparent; }
.vorschlag:has(input:checked) { border-color: var(--gruen); background: #F6F8F1; }
.vorschlag__wahl { position: absolute; opacity: 0; pointer-events: none; }
.vorschlag__bild { width: 105px; height: 76px; border-radius: 11px; object-fit: cover; background: var(--sand); }
.vorschlag__text { min-width: 0; padding: 1px 0; }
.vorschlag__titel { padding-right: 74px; font-size: 15.5px; font-weight: 700; font-stretch: 94%; line-height: 1.2; color: var(--blau); }
.vorschlag__kurz { margin-top: 2px; font-size: 12.6px; line-height: 1.32; color: var(--grau); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vorschlag__meta { display: flex; flex-wrap: wrap; gap: 3px 14px; margin-top: 4px; font-size: 11.6px; color: #55647A; }
.vorschlag__meta span { display: inline-flex; align-items: center; gap: 5px; }
.vorschlag__auf { display: flex; align-items: center; justify-content: center; width: 30px; height: 44px; margin-left: -8px; color: #45556B; }
.vorschlag__auf .icon { width: 18px; height: 18px; stroke-width: 2; }
.vorschlag .marke { position: absolute; top: 8px; right: 30px; }
.vorschlag__flaeche { position: absolute; inset: 0; border-radius: inherit; cursor: pointer; }
.vorschlag__auf, .vorschlag .marke { z-index: 1; }
.marke { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 7px; border-radius: 999px; background: var(--mint); color: var(--gruen-dunkel); font-size: 11.5px; font-weight: 500; line-height: 1.1; max-width: 104px; }
.marke .icon { width: 14px; height: 14px; stroke-width: 1.8; }
.marke--lavendel { background: var(--lavendel); color: #2E2F6E; }
.marke--blau { background: var(--hellblau); color: #1F3E5E; }
.marke--sand { background: var(--sand); color: #6A4312; }
.marke--grau { background: #ECE8E1; color: #55647A; }

/* ------------------------------------------------------------------ Listen */
.liste { display: flex; flex-direction: column; gap: 8px; }
.eintrag { display: grid; grid-template-columns: auto minmax(0, 1fr) 18px; column-gap: 12px; align-items: center; padding: 11px 10px 11px 12px; }
.eintrag__titel { font-size: 15.5px; font-weight: 700; font-stretch: 95%; line-height: 1.25; color: var(--blau); }
.eintrag__text { margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--grau); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.eintrag__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 5px; font-size: 12px; color: #55647A; align-items: center; }
.eintrag > .icon { width: 17px; height: 17px; color: #55647A; stroke-width: 2; }
.datum { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 46px; height: 50px; border-radius: 13px; background: var(--sand); color: #6A4312; line-height: 1; }
.datum b { font-size: 19px; font-weight: 700; }
.datum span { margin-top: 3px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; }
.datum--blau { background: var(--hellblau); color: #1F3E5E; }
.datum--mint { background: var(--mint); color: var(--gruen-dunkel); }
.zwischentitel { margin: 12px 4px 0; font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--grau); }
.fliess { font-size: 14.5px; line-height: 1.5; color: var(--text); }
.fliess p + p { margin-top: 8px; }
.fliess--klein { font-size: 13px; color: var(--grau); }
.frage { margin-top: 12px; font-size: 12.5px; font-weight: 700; color: var(--gruen-schrift); }
.frage:first-child { margin-top: 0; }
.antwort { margin-top: 2px; white-space: pre-line; overflow-wrap: anywhere; }
.hinweis { display: flex; gap: 9px; padding: 10px 12px; border-radius: var(--radius-mittel); background: var(--hellblau); color: #274766; font-size: 12.8px; line-height: 1.4; }
.hinweis .icon { width: 17px; height: 17px; margin-top: 1px; }
.hinweis--mint { background: var(--mint); color: var(--gruen-dunkel); }
.hinweis--sand { background: var(--sand); color: #6A4312; }
.hinweis a { text-decoration: underline; text-underline-offset: 2px; }
.leer { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 18px 20px; text-align: center; color: var(--grau); }
.leer img { width: 92px; }
.leer__titel { font-family: var(--hand); font-size: 22px; line-height: 1.1; color: var(--blau); }
.leer p { font-size: 13.5px; max-width: 280px; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chips--zeile { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--rand)); padding: 2px var(--rand) 4px; scrollbar-width: none; }
.chips--zeile::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 13px; border-radius: 999px; background: var(--creme); border: 1px solid var(--linie); font-size: 13.5px; color: var(--text); white-space: nowrap; }
.chip--an, .chip:has(input:checked) { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip--weg { padding-right: 6px; }
.chip__weg { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; color: var(--grau); }
.schritte { display: flex; flex-direction: column; }
.schritt { display: grid; grid-template-columns: 86px minmax(0, 1fr); column-gap: 10px; padding: 9px 0; border-top: 1px solid var(--linie); }
.schritt:first-child { border-top: 0; }
.schritt__zeit { font-size: 13px; font-weight: 600; color: var(--gruen-schrift); font-variant-numeric: tabular-nums; }
.schritt__titel { font-weight: 600; color: var(--blau); }
.schritt__hinweis { font-size: 13px; color: var(--grau); }
.zeilenwerte { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 14px; font-size: 14.5px; }
.zeilenwerte dt { color: var(--grau); }
.zeilenwerte dd { color: var(--blau); font-weight: 500; overflow-wrap: anywhere; }

/* --------------------------------------------------------------- Formulare */
.feld { display: flex; flex-direction: column; gap: 4px; }
.feld + .feld, .feld + .felder, .felder + .feld { margin-top: 12px; }
.felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.felder .feld + .feld { margin-top: 0; }
.feld__name { font-size: 13px; font-weight: 600; color: var(--blau); }
.feld__hilfe { font-size: 12px; color: var(--grau); }
.feld__fehler { font-size: 12.5px; color: var(--rot); font-weight: 500; }
.feld__eingabe { width: 100%; min-height: 44px; padding: 10px 12px; background: var(--creme); border: 1px solid rgba(18, 48, 79, .16); border-radius: var(--radius-klein); font-size: 16px; line-height: 1.3; color: var(--blau); appearance: none; -webkit-appearance: none; }
.feld__eingabe:focus { outline: none; border-color: var(--gruen); box-shadow: 0 0 0 3px rgba(52, 91, 72, .14); }
.feld__eingabe--text { min-height: 74px; resize: vertical; }
select.feld__eingabe { padding-right: 34px; background-image: linear-gradient(45deg, transparent 50%, #55647A 50%), linear-gradient(135deg, #55647A 50%, transparent 50%); background-position: calc(100% - 18px) 19px, calc(100% - 13px) 19px; background-size: 5px 5px; background-repeat: no-repeat; }
.haken { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; }
.haken input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--gruen); }
.wahl { display: flex; flex-direction: column; gap: 7px; }
.wahl__punkt { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--linie); border-radius: var(--radius-klein); background: var(--creme); }
.wahl__punkt:has(input:checked) { border-color: var(--gruen); background: #F4F8F0; }
.wahl__punkt input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--gruen); }
.wahl__name { font-weight: 600; color: var(--blau); }
.wahl__text { font-size: 12.5px; color: var(--grau); }
.suche { display: flex; align-items: center; gap: 8px; padding: 0 6px 0 12px; min-height: 44px; background: var(--creme); border: 1px solid var(--linie); border-radius: 999px; }
.suche input { flex: 1; min-width: 0; border: 0; background: none; font-size: 16px; outline: none; }
.suche .icon { width: 18px; height: 18px; color: var(--grau); }
.ablaufzeile { display: grid; grid-template-columns: 78px 78px minmax(0, 1fr); gap: 6px; padding: 8px 0; border-top: 1px solid var(--linie); }
.ablaufzeile:first-of-type { border-top: 0; }
.ablaufzeile .feld__eingabe { min-height: 40px; padding: 8px 9px; font-size: 15px; }
.ablaufzeile__text { grid-column: 1 / -1; }

/* --------------------------------------------------------------- Dialoge */
dialog { border: 0; padding: 0; color: inherit; max-width: none; max-height: none; }
dialog::backdrop { background: rgba(18, 48, 79, .32); }
.blatt { position: fixed; inset: auto 0 0 0; width: 100%; max-width: 430px; margin: 0 auto; max-height: 88dvh; overflow-y: auto; padding: 8px 16px calc(18px + var(--unten)); border-radius: 24px 24px 0 0; background: var(--grund); box-shadow: var(--schatten-stark); overscroll-behavior: contain; }
.blatt[open] { animation: blatt-auf .22s ease-out; }
@keyframes blatt-auf { from { transform: translateY(24px); opacity: .4; } to { transform: none; opacity: 1; } }
.blatt__griff { width: 40px; height: 4px; margin: 2px auto 10px; border-radius: 4px; background: rgba(18, 48, 79, .18); }
.blatt__kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.blatt__titel { font-size: 19px; font-weight: 700; font-stretch: 94%; color: var(--blau); line-height: 1.2; }
.blatt__zu { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: -6px -8px 0 0; border-radius: 50%; color: var(--grau); }
.blatt__fuss { display: flex; gap: 8px; margin-top: 16px; }
.blatt__fuss .btn { flex: 1; }
.blatt--mitte { inset: 0; margin: auto; width: calc(100% - 32px); max-width: 360px; height: fit-content; border-radius: 22px; padding: 18px 16px 16px; }

/* ------------------------------------------------------------- Meldungen */
.toasts { position: fixed; z-index: 60; left: 0; right: 0; top: calc(var(--oben) + 10px); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 12px; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 9px; width: 100%; max-width: 406px; padding: 11px 12px; border-radius: 16px; background: #24423A; color: #fff; font-size: 14px; line-height: 1.35; box-shadow: var(--schatten-stark); animation: toast-auf .25s ease-out; }
.toast--error { background: #8E3A2A; }
.toast--warning { background: #7A5A1E; }
.toast .icon { width: 18px; height: 18px; margin-top: 1px; }
.toast__zu { margin-left: auto; opacity: .8; }
.toast--weg { opacity: 0; transform: translateY(-8px); transition: opacity .25s ease, transform .25s ease; }
@keyframes toast-auf { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* ----------------------------------------------------- Warten und Skelett */
.warten { position: fixed; z-index: 70; inset: 0; display: flex; align-items: flex-end; justify-content: center; background: rgba(18, 48, 79, .28); }
.warten__karte { width: 100%; max-width: 430px; padding: 18px 18px calc(22px + var(--unten)); border-radius: 24px 24px 0 0; background: var(--grund); box-shadow: var(--schatten-stark); }
.warten__titel { font-family: var(--hand); font-size: 24px; color: var(--blau); line-height: 1.1; }
.warten__text { margin-top: 4px; font-size: 13.5px; color: var(--grau); }
.skelett { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.skelett__karte { display: grid; grid-template-columns: 74px 1fr; gap: 10px; padding: 8px; border-radius: 16px; background: var(--karte); }
.skelett__bild, .skelett__zeile { border-radius: 9px; background: linear-gradient(90deg, #ECE6DC 25%, #F6F1E9 37%, #ECE6DC 63%); background-size: 400% 100%; animation: schimmer 1.4s ease infinite; }
.skelett__bild { height: 54px; }
.skelett__zeile { height: 11px; margin-top: 7px; }
.skelett__zeile--kurz { width: 55%; }
.skelett__zeile--mittel { width: 80%; }
.skelett--text .skelett__zeile { height: 12px; margin: 0; }
@keyframes schimmer { from { background-position: 100% 50%; } to { background-position: 0 50%; } }
.warten__fehler { display: flex; gap: 10px; padding: 12px; margin-top: 12px; border-radius: 16px; background: #F8E4DC; color: #7A2E1F; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ------------------------------------------------------------- Untere Leiste */
.leiste { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; }
.leiste__innen { display: grid; grid-template-columns: repeat(5, 1fr); max-width: 430px; margin: 0 auto; padding: 0 6px var(--unten); height: calc(var(--leiste) + var(--unten)); background: rgba(247, 242, 234, .96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid rgba(18, 48, 79, .07); }
.leiste__punkt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding-top: 4px; font-size: 11.5px; color: #66758A; }
.leiste__punkt .icon { width: 25px; height: 25px; stroke-width: 1.6; }
.leiste__punkt--an { color: var(--gruen); font-weight: 600; }
.leiste__punkt--an .icon { fill: var(--gruen); stroke: var(--gruen); }
.leiste__punkt--an .icon--offen { fill: none; stroke-width: 2; }
body.tippt .leiste { display: none; }

/* -------------------------------------------------------------------- Coach */
.seite-coach .app { padding-bottom: 0; display: flex; flex-direction: column; min-height: 100dvh; }
.chat { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 4px var(--rand) 14px; }
.blase { display: flex; gap: 8px; align-items: flex-start; }
.blase--ich { justify-content: flex-end; padding-left: 68px; }
.blase--ich .blase__text { position: relative; padding: 11px 14px 20px; background: #E2EAF2; border-radius: 20px 20px 6px 20px; font-size: 15.5px; line-height: 1.38; color: var(--blau); overflow-wrap: anywhere; white-space: pre-line; }
.blase__zeit { position: absolute; right: 12px; bottom: 5px; font-size: 10.5px; color: #7C8898; }
.blase__ich-bild { width: 46px; height: 46px; flex: none; border-radius: 50%; object-fit: cover; }
.blase--coach { padding-right: 34px; }
.blase__coach-bild { width: 62px; height: 62px; flex: none; margin-left: -2px; border-radius: 50%; }
.blase--coach .blase__text { position: relative; flex: 1; min-width: 0; padding: 13px 14px 22px 13px; background: var(--karte); border-radius: 20px; box-shadow: var(--schatten); font-size: 15px; line-height: 1.42; color: var(--blau); overflow-wrap: anywhere; }
.blase__text p + p, .blase__text p + .punkte, .blase__text .punkte + p, .blase__text p + .striche, .blase__text .striche + p { margin-top: 10px; }
.blase__roh { white-space: pre-wrap; }
.punkte { display: flex; flex-direction: column; gap: 12px; }
.punkt { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 11px; }
.punkt__nr { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--mint); color: var(--gruen); font-size: 14.5px; font-weight: 700; }
.punkt__nr--2 { background: var(--plakette); color: var(--braun); }
.punkt__nr--3 { background: var(--hellblau); color: #2F5574; }
.punkt__nr--4 { background: var(--lavendel); color: #3D3F86; }
.punkt__titel { display: block; font-size: 14.5px; font-weight: 700; color: var(--blau); }
.punkt__text { display: block; margin-top: 1px; font-size: 13px; line-height: 1.4; color: #45556B; }
.striche { padding-left: 16px; list-style: disc; }
.striche li + li { margin-top: 4px; }
.blase__fuss { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 11.5px; color: var(--grau); }
.blase__fuss summary { cursor: pointer; list-style: none; }
.blase__fuss summary::-webkit-details-marker { display: none; }
.tippen { display: inline-flex; gap: 5px; padding: 6px 0; }
.tippen i { width: 7px; height: 7px; border-radius: 50%; background: #9FB0A6; animation: tippen 1.1s ease-in-out infinite; }
.tippen i:nth-child(2) { animation-delay: .15s; }
.tippen i:nth-child(3) { animation-delay: .3s; }
@keyframes tippen { 0%, 80%, 100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.probier { position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr) 20px; column-gap: 6px; align-items: center; padding: 10px 10px 12px 8px; border-radius: 20px; background: linear-gradient(120deg, #E6EFDF, #EFF2E2 60%, #F4F1E4); }
.probier img { width: 84px; }
.probier__titel { display: flex; align-items: center; gap: 6px; font-family: var(--pinsel); font-size: 22px; line-height: 1; color: var(--gruen-schrift); }
.probier__titel .icon { width: 18px; height: 18px; color: #7FA05C; fill: #7FA05C; }
.probier__text { margin-top: 6px; padding: 8px 12px; border-radius: 14px; background: rgba(255, 252, 247, .85); font-size: 14.5px; line-height: 1.35; color: var(--blau); }
.probier__los { display: flex; align-items: center; justify-content: center; width: 36px; height: 44px; margin-left: -10px; color: var(--blau); }
.schreiben { position: sticky; bottom: calc(var(--leiste) + var(--unten)); z-index: 30; padding: 8px var(--rand) 8px; background: linear-gradient(to bottom, rgba(247, 243, 237, 0), var(--grund) 28%); }
body.tippt .schreiben { bottom: 0; padding-bottom: calc(8px + var(--unten)); }
.schreiben__zeile { display: grid; grid-template-columns: 36px minmax(0, 1fr) 42px; gap: 6px; align-items: end; }
.schreiben__anhang { position: relative; display: flex; align-items: center; justify-content: center; width: 36px; height: 42px; color: #6C7A8C; }
.schreiben__anhang b { position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--gruen); color: #fff; font-size: 10.5px; line-height: 16px; text-align: center; }
.schreiben__feld { width: 100%; min-height: 42px; max-height: 132px; padding: 10px 16px; border: 1px solid rgba(18, 48, 79, .1); border-radius: 21px; background: var(--creme); font-size: 16px; line-height: 1.35; resize: none; outline: none; }
.schreiben__feld:focus { border-color: rgba(52, 91, 72, .5); }
.schreiben__feld::placeholder { color: #A3ACB8; }
.schreiben__senden { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--gruen); color: #fff; box-shadow: 0 2px 6px rgba(40, 72, 56, .25); }
.schreiben__senden .icon { width: 20px; height: 20px; fill: #fff; stroke: #fff; stroke-width: 1.4; transform: translate(-1px, 1px); }
.schreiben__senden[disabled] { opacity: .5; }
.schreiben__hinweis { margin-top: 5px; text-align: center; font-size: 10.8px; color: var(--grau-hell); }
.schreiben__hinweis a { text-decoration: underline; }
.einstieg { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 10px 4px; text-align: center; }
.einstieg img { width: 76px; }
.einstieg__titel { font-family: var(--hand); font-size: 23px; color: var(--blau); line-height: 1.1; }
.einstieg p { font-size: 13.5px; color: var(--grau); max-width: 290px; }
.fragen { display: flex; flex-direction: column; gap: 7px; width: 100%; margin-top: 8px; }
.fragen button { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 44px; padding: 9px 12px 9px 15px; border-radius: 15px; background: var(--karte); box-shadow: var(--schatten); font-size: 14.5px; font-weight: 500; color: var(--blau); text-align: left; }
.fragen .icon { width: 16px; height: 16px; color: var(--grau); }

/* ------------------------------------------------------------ Anmeldung */
.anmelden { display: flex; flex-direction: column; min-height: 100dvh; max-width: 430px; margin: 0 auto; background: var(--grund); }
.anmelden__bild { width: 100%; height: 38dvh; min-height: 200px; object-fit: cover; object-position: center top; }
.anmelden__karte { margin: -34px 14px 24px; padding: 20px 16px 18px; }
.anmelden__titel { font-family: var(--pinsel); font-size: 34px; line-height: 1; color: var(--blau); margin-bottom: 12px; }

/* ------------------------------------------------------- Kleinigkeiten */
.luft { margin-top: 12px; }
.luft-klein { margin-top: 8px; }
.mittig { text-align: center; }
.zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.trenner { height: 1px; margin: 12px 0; background: var(--linie); }
.menue { padding: 4px 6px; }
.menue__punkt { display: grid; grid-template-columns: 42px minmax(0, 1fr) 18px; align-items: center; column-gap: 12px; padding: 9px 6px; border-top: 1px solid var(--linie); }
.menue__punkt:first-child { border-top: 0; }
.menue__name { font-size: 15.5px; font-weight: 700; font-stretch: 95%; color: var(--blau); }
.menue__text { font-size: 12.5px; color: var(--grau); }
.menue__punkt > .icon { width: 17px; height: 17px; color: #55647A; stroke-width: 2; }
.bildwahl { display: flex; align-items: center; gap: 14px; }
.bildwahl .rund { width: 76px; height: 76px; }
.kennung { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--mint); color: var(--gruen-dunkel); }
.kennung--ki { background: var(--lavendel); color: #2E2F6E; }
.kennung--beob { background: var(--hellblau); color: #1F3E5E; }
.kennung--verm { background: var(--sand); color: #6A4312; }
.kennung .icon { width: 12px; height: 12px; stroke-width: 2.2; }
.merkerzeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; align-items: start; padding: 10px 0; border-top: 1px solid var(--linie); }
.merkerzeile:first-child { border-top: 0; padding-top: 2px; }
.merkerzeile__text { font-size: 14.5px; color: var(--blau); overflow-wrap: anywhere; }
.merkerzeile__meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.zahl { font-variant-numeric: tabular-nums; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabelle th, .tabelle td { padding: 6px 0; text-align: left; border-top: 1px solid var(--linie); }
.tabelle th { font-weight: 600; color: var(--grau); border-top: 0; }
.tabelle td:last-child, .tabelle th:last-child { text-align: right; }


@media print {
  .leiste, .schreiben, .toasts, .kopf__bild { display: none; }
  .app { max-width: none; padding-bottom: 0; }
}

/* Nachträge */
.btn--mitte { position: relative; justify-content: center; }
.btn--mitte .icon { position: absolute; right: 16px; }
.seite-planen .kopf { padding-bottom: 54px; }
.seite-planen .inhalt { margin-top: -50px; }

/* ------------------------------------------------------------------------------------------
   Abgleich mit den Designvorlagen: Schriftgrade und Maße, an 38 Textstellen der drei Mockups
   gemessen (Bildschirmbreite 393 px). Kleinste Schriften sind leicht aufgerundet, damit sie
   lesbar bleiben; Eingabefelder behalten 16 px (darunter zoomt das iPhone beim Antippen). */
:root { --leiste: 50px; }
.titel { font-size: 43px; }
.kopf--start .titel { font-size: 48px; }
.titel--mittel { font-size: 36px; }
.titel__zier { width: 28px; height: 28px; margin-top: -8px; }
.untertitel { margin-top: 2px; font-size: 14px; }
.profilkarte { width: 220px; min-height: 83px; padding: 10px 10px 10px 10px; gap: 11px; }
.profilkarte__bild, .profilkarte .rund { width: 63px; height: 63px; }
.profilkarte__name { font-size: 13.2px; }
.profilkarte__geb, .profilkarte__zeile { font-size: 10.4px; }
.karte__titel { font-size: 16px; font-stretch: 100%; letter-spacing: 0; }
.karte__unter { font-size: 11.2px; }
.plakette { width: 43px; height: 43px; }
.plakette .icon { width: 23px; height: 23px; }
.plakette--klein { width: 30px; height: 30px; }
.plakette--klein .icon { width: 17px; height: 17px; }
.btn { min-height: 42px; }
.treffenkarte { grid-template-columns: minmax(0, 1fr) 122px; padding: 11px 12px 14px; }
.treffenkarte__daten { gap: 9px; margin: 3px 0 13px 60px; }
.treffenkarte__zeile { font-size: 12.5px; gap: 8px; }
.treffenkarte__zeile .icon { width: 14px; height: 14px; }
.treffenkarte .btn { padding-left: 21px; padding-right: 12px; white-space: nowrap; }
.treffenkarte__seite .hand { font-size: 13.5px; }
.leer-zeile { margin: 6px 0 14px 60px; font-size: 12.5px; }
.impuls { padding: 11px 12px 14px; }
.impuls__satz { margin: 0 0 0 55px; font-size: 13.5px; line-height: 1.4; }
.impuls__grund { margin: 7px 0 0 9px; font-size: 11.3px; line-height: 1.42; }
.impuls__seite .hand { font-size: 13px; }
.schnell { padding: 11px 9px 9px; }
.schnell__kopf { padding: 0 3px 8px; }
.schnell__titel { font-size: 15.5px; font-stretch: 100%; }
.schnell__unter { font-size: 11.3px; }
.kachel { min-height: 126px; padding: 17px 5px 20px 14px; align-items: stretch; }
.kachel .icon--gross { align-self: center; margin: 0 9px 10px 0; width: 31px; height: 31px; }
.kachel__titel { margin-right: 9px; font-size: 11.4px; font-stretch: 100%; line-height: 1.2; }
.kachel__text { margin-top: 8px; font-size: 9.5px; line-height: 1.38; hyphens: none; }
.leiste__punkt { gap: 5px; font-size: 9.8px; }
.leiste__punkt .icon { width: 24px; height: 24px; }
.zeile { font-size: 11.4px; grid-template-columns: 30px 91px minmax(0, 1fr) 16px; }
.zeile__name { font-size: 10.9px; }
.vorschlag__titel { font-size: 12.6px; font-stretch: 100%; padding-right: 62px; }
.vorschlag__kurz { font-size: 10.3px; line-height: 1.42; }
.vorschlag__meta { font-size: 9.6px; }
.marke { font-size: 9px; padding: 4px 8px 4px 6px; }
.marke .icon { width: 12px; height: 12px; }
.blase--ich .blase__text { font-size: 13px; line-height: 1.38; }
.blase--coach .blase__text { font-size: 13.2px; line-height: 1.38; }
.punkt__titel { font-size: 12px; }
.punkt__text { font-size: 10.8px; line-height: 1.42; }
.punkt__nr { font-size: 13px; }
.blase__zeit { font-size: 8.8px; }
.probier__titel { font-size: 19px; }
.probier__text { font-size: 11.3px; }
.schreiben__feld::placeholder { font-size: 13px; }
.schreiben__hinweis { font-size: 9.6px; }
/* Seiten ohne Designvorlage: dieselbe Dichte, aber Lesetext nicht kleiner als 13 px. */
body { font-size: 14px; }
.fliess { font-size: 13.5px; }
.fliess--klein { font-size: 12.2px; }
.eintrag__titel { font-size: 13.6px; }
.eintrag__text { font-size: 11.6px; }
.eintrag__meta { font-size: 10.6px; }
.menue__name { font-size: 13.6px; }
.menue__text { font-size: 11.2px; }
.hinweis { font-size: 11.8px; }
.zwischentitel { font-size: 10.6px; }
.feld__name { font-size: 12px; }
.feld__hilfe { font-size: 11px; }
.chip { font-size: 12.4px; min-height: 32px; }
.kennung { font-size: 10.4px; }
.blatt__titel { font-size: 17px; }
.btn--still { font-size: 13.4px; }
.btn--klein { font-size: 13px; }
.leer p { font-size: 12.4px; }
.leer__titel { font-size: 21px; }
.merkerzeile__text, .zeilenwerte { font-size: 13.4px; }
.schritt__zeit { font-size: 12px; }
.schritt__hinweis { font-size: 12px; }
.frage { font-size: 11.6px; }
.toast { font-size: 13px; }
.einstieg p { font-size: 12.4px; }
.fragen button { font-size: 13.2px; }
.wahl__text { font-size: 11.4px; }

/* Abgleich 2: Lagen und Abstände, per Überlagerung mit den Designvorlagen nachgezogen. */
.kopf--start { min-height: calc(var(--oben) + 232px); }
.profilkarte { bottom: 46px; }
.treffenkarte { padding: 8.5px 12px 14px; }
.treffenkarte .karte__kopf { align-items: flex-start; }
.treffenkarte .karte__titel { margin-top: 11px; line-height: 19px; }
.treffenkarte__daten { margin: -5px 0 13.5px 58px; gap: 6px; }
.treffenkarte__zeile { line-height: 19px; }
.treffenkarte .btn { min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
.treffenkarte__seite img { width: 118px; }
.leer-zeile { margin: 0 0 17px 67px; }
.impuls { padding: 7px 12px 13px; }
.impuls__satz { margin-top: -3.5px; line-height: 19px; }
.impuls__grund { margin-top: 6.5px; line-height: 16.5px; }
.schnell { padding: 7px 9px 9px; }
.schnell__kopf { padding: 0 3px 11px; }
.schnell__titel { line-height: 20px; }
.schnell__unter { margin-top: 1px; line-height: 16px; }
.kachel { padding: 11px 4px 16px 14px; }
.kachel .icon--gross { margin: 0 0 10px -10px; }
.kachel__titel { margin: 0 0 0 -10px; }
.kachel__text { margin-top: 7px; font-size: 9.4px; line-height: 13px; }
.leiste__punkt { gap: 3px; padding-top: 2px; }

.kopf__zurueck { height: 40px; margin: -24px 0 -17px -14px; }
.seite-planen .kopf { min-height: calc(var(--oben) + 165px); padding-bottom: 0; }
.seite-planen #details .karte { padding: 7px 10px 11px; }
.zeilen { gap: 3px; margin-top: 8px; }
.zeile { min-height: 35px; padding-top: 2px; padding-bottom: 2px; }
.seite-planen .liste { gap: 5px; }
.vorschlag { min-height: 87px; }
.vorschlag__kurz { padding-right: 56px; }

.kopf--coach { padding-top: calc(var(--oben) + 12px); }
.kopf--coach .kopf__zurueck { left: 15px; top: calc(var(--oben) + 7px); margin: 0 0 0 -14px; }
.kopf--coach .titel, .kopf--coach .untertitel { margin-left: 28px; }
.titel__zier--birne { width: 40px; height: 40px; margin-top: -12px; }
.blase--ich { padding-left: 98px; }
.blase--ich .blase__text { padding: 10px 26px 18px 14px; }
.probier { padding-bottom: 14px; }
.probier__vor { margin: 5px 0 0 2px; font-size: 10.6px; color: #45556B; }
.probier__vor + .probier__text { display: inline-block; margin: 3px 0 0 34px; }
.wegweiser { position: absolute; right: 18px; top: calc(var(--oben) + 52px); z-index: -1; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 62px; }
.wegweiser::before { content: ""; position: absolute; left: 50%; top: -9px; bottom: -30px; width: 5px; margin-left: -1px; border-radius: 2px; background: linear-gradient(#8A6742, #6B4F33); z-index: -1; }
.wegweiser span { display: block; padding: 1px 11px 2px 7px; background: #B98D5B; color: #33241A; font-family: var(--hand); font-weight: 700; font-size: 11.5px; line-height: 1.2; white-space: nowrap; clip-path: polygon(0 0, 86% 0, 100% 50%, 86% 100%, 0 100%); transform: rotate(-6deg); }
.wegweiser span:nth-child(2) { background: #C39B69; transform: rotate(4deg) translateX(4px); }
.wegweiser span:nth-child(3) { padding: 1px 7px 2px 11px; clip-path: polygon(14% 0, 100% 0, 100% 100%, 14% 100%, 0 50%); transform: rotate(-3deg) translateX(-3px); }

/* Abgleich 3 */
.kopf__zurueck { display: flex; margin-bottom: -15px; }
.kopf--coach { min-height: calc(var(--oben) + 129px); }
.kopf--coach .kopf__zurueck { margin-bottom: 0; }
.titel__zier--birne { width: 52px; height: 52px; margin: -14px 0 0 -6px; }
.punkte { gap: 10px; }
.punkt__text { line-height: 1.3; }
.treffenkarte__seite .hand { transform: rotate(-13deg); margin: 6px 0 4px 10px; line-height: 1.02; }
.impuls__seite .hand { transform: rotate(-13deg); line-height: 1.02; }
.leer .leer__titel { font-size: 21px; }
.unten-fest { padding: 14px 4px 2px; background: linear-gradient(to bottom, rgba(247, 243, 237, 0), var(--grund) 45%); }
.kopf--klein { min-height: calc(var(--oben) + 122px); }

/* ---------------------------------------------------------------- Schmale Telefone (unter 360 px)
   Steht bewusst ganz am Ende, damit es die Maße von oben überstimmt. */
.kopf__bild { object-position: right top; }
@media (max-width: 359px) {
  .titel { font-size: 36px; }
  .kopf--start .titel { font-size: 39px; }
  .titel--mittel { font-size: 30px; }
  .untertitel { font-size: 12.5px; }
  .profilkarte { width: 206px; }
  .treffenkarte { grid-template-columns: minmax(0, 1fr) 78px; }
  .treffenkarte__seite img { width: 78px; }
  .treffenkarte__seite .hand { font-size: 11.5px; margin-left: 0; }
  .treffenkarte__daten { margin-left: 50px; }
  .treffenkarte__zeile { font-size: 12px; gap: 6px; }
  .treffenkarte .btn { padding-left: 16px; font-size: 15px; }
  .impuls { grid-template-columns: minmax(0, 1fr) 70px; }
  .impuls__seite img { width: 64px; }
  .impuls__seite .hand { font-size: 11.5px; }
  .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kachel { min-height: 104px; }
  .kachel__titel br { display: none; }
  .vorschlag { grid-template-columns: 84px minmax(0, 1fr) 20px; }
  .vorschlag__bild { width: 84px; height: 66px; }
  .vorschlag__kurz { padding-right: 0; }
  .zeile { grid-template-columns: 30px 78px minmax(0, 1fr) 16px; column-gap: 9px; }
  .felder { grid-template-columns: 1fr; }
  .felder .feld + .feld { margin-top: 12px; }
  .blase--ich { padding-left: 40px; }
  .blase--coach { padding-right: 8px; }
  .blase__coach-bild { width: 46px; height: 46px; }
  .probier { grid-template-columns: 60px minmax(0, 1fr) 20px; }
  .probier img { width: 60px; }
  .probier__vor + .probier__text { margin-left: 8px; }
  .wegweiser { right: 8px; transform: scale(.86); transform-origin: right top; }
}