/* ============================================================
   UpGrade, Teaser-Startseite (08.10.2026)
   Gilt fuer index.html (Teaser), impressum.html und datenschutz-kurz.html.
   Vorlage: Entwurf teaser-20261008, Richtung A "Aushang" plus aus Richtung B
   der Aufkleber "Beta startet in Kuerze" und die Grusszeilen im
   Sprachen-Abschnitt.

   Laedt NACH brand.css und nutzt dessen Tokens (--ink, --lilac, --sand ...).
   Neu ist nur --wand, siehe unten.

   CSP: style-src 'self'. Keine style-Attribute im Markup, keine
   Inline-Styles aus JavaScript; Zustaende laufen ueber Klassen und das
   hidden-Attribut.
   ============================================================ */

/* ---------- Schriften ---------- */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
/* Kyrillisch (Ukrainisch, Russisch). Die Latein-Datei oben hat keine
   kyrillischen Zeichen, Poppins hat gar keine. Diese Datei ist ein Auszug aus
   Inter 4.001 (OFL, dieselbe Fassung wie assets/fonts/Inter-Variable.ttf der
   App), nur der Kyrillisch-Bereich, opsz auf 14 fixiert, wght 100-900.
   Wegen unicode-range laedt der Browser sie nur, wenn kyrillischer Text auf
   der Seite steht. Poppins-Ueberschriften fallen fuer diese Zeichen
   automatisch auf "Inter" zurueck (zweiter Eintrag in --font-head). */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-cyrillic-var.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Die Wandfarbe im Abby-Bild (gemessen #f8efe0). Zwei Stufen waermer als
     --cream; nur als Flaeche hinter dem Bild, damit Bildkante und Kachel
     nicht sichtbar springen. */
  --wand: #f8efe0;
}

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

html { scroll-behavior: smooth; }
body.teaser {
  margin: 0;
  /* Sicherheitsnetz gegen eine horizontale Scrollleiste: Aufkleber und
     Zettel ragen absichtlich ueber die Kachelkante hinaus. */
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--text-16)/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
.teaser h1, .teaser h2, .teaser h3, .teaser p, .teaser ol, .teaser ul, .teaser figure { margin: 0; }
.teaser h1, .teaser h2, .teaser h3 {
  color: var(--ink);
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.teaser h1 { font-size: clamp(2.45rem, 6.6vw, 5.6rem); line-height: .98; }
.teaser h2 { font-size: clamp(1.9rem, 3.9vw, 3.3rem); line-height: 1.05; }
.teaser h3 { font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.18; }
.teaser p { color: var(--ink-soft); }
.teaser a { color: inherit; }
.teaser img { display: block; max-width: 100%; height: auto; }
.teaser :focus-visible { outline: 3px solid var(--lilac-deep); outline-offset: 4px; }
.teaser :lang(uk), .teaser :lang(ru) { font-family: var(--font-body); }

.wrap { width: min(var(--content), calc(100% - 3rem)); margin-inline: auto; }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 10;
  padding: .7rem 1rem;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
}
.skip-link:focus { top: 1rem; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1.1rem;
  font-size: var(--text-12);
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1.3;
  text-transform: uppercase;
}
.teaser .eyebrow { color: var(--lilac-deep); }
.eyebrow > span {
  flex: none;
  width: .65rem;
  height: .65rem;
  border-radius: 50%;
  background: var(--peach-deep);
  box-shadow: 0 0 0 5px rgba(244, 196, 173, .55);
}

/* ---------- Knoepfe und Links ---------- */
.knopf {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  padding: .9rem 1.3rem;
  border: 2px solid var(--lilac-deep);
  border-radius: 16px;
  background: var(--lilac);
  box-shadow: 0 5px 0 var(--lilac-deep);
  color: var(--white);
  font-family: inherit;
  font-size: var(--text-15);
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.teaser .knopf { color: var(--white); }
.knopf:hover { background: var(--lilac-deep); box-shadow: 0 3px 0 var(--lilac-deep); transform: translateY(2px); }
.knopf--klein { min-height: 46px; padding: .75rem 1rem; font-size: var(--text-14); }
.textlink {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  font-weight: 750;
  text-decoration: underline;
  text-decoration-color: var(--lilac);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.teaser .textlink { color: var(--ink); }
.aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 2rem; }

/* ---------- Kopf ---------- */
.kopf { border-bottom: 1px solid rgba(31, 41, 71, .09); background: rgba(255, 253, 250, .93); }
.kopf__in { display: flex; align-items: center; gap: 1.4rem; min-height: 78px; }
.marke {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  gap: .6rem;
  font: 700 1.25rem/1 var(--font-head);
  letter-spacing: -.04em;
  text-decoration: none;
  white-space: nowrap;
}
.teaser .marke { color: var(--ink); }
.marke img { width: 2.35rem; height: 2.35rem; object-fit: contain; transition: transform .3s ease; }
.marke:hover img, .marke:focus-visible img { transform: rotate(-8deg) scale(1.08); }
.kopf__link {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  margin-left: auto;
  font-size: var(--text-15);
  font-weight: 750;
  text-decoration: none;
}
.teaser .kopf__link { color: var(--ink); }
.kopf__link:hover { text-decoration: underline; text-decoration-color: var(--lilac); text-underline-offset: 6px; }

/* ---------- Hero ---------- */
.hero { padding: clamp(2.5rem, 5.5vw, 5rem) 0 clamp(3.5rem, 7vw, 6.5rem); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: center;
}
.hero h1 { max-width: 11ch; }
.unterstrich { position: relative; display: inline-block; isolation: isolate; white-space: nowrap; }
.teaser .unterstrich { color: var(--lilac-deep); }
.unterstrich svg {
  position: absolute;
  z-index: -1;
  left: -.03em;
  bottom: -.06em;
  width: calc(100% + .06em);
  height: .3em;
  overflow: visible;
}
.unterstrich path {
  fill: none;
  stroke: var(--sun);
  stroke-width: .17em;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: strich .9s .45s cubic-bezier(.6, .05, .3, 1) forwards;
}
@keyframes strich { to { stroke-dashoffset: 0; } }
.teaser .hero__lead { margin-top: 1.6rem; max-width: 44ch; font-size: 1.1875rem; line-height: 1.6; }
.teaser .hero__lead2 { margin-top: .9rem; max-width: 44ch; color: var(--ink); font-weight: 650; }
.teaser .fakten {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .55rem;
  max-width: 36rem;
  margin-top: 2.2rem;
  padding-top: 1.1rem;
  border-top: 2px solid var(--ink);
  color: var(--ink);
  font-size: var(--text-14);
  font-weight: 650;
}
.fakten i { font-style: normal; color: var(--lilac); }

.kachel { position: relative; }
.kachel__flaeche {
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 32px 12px 32px 12px;
  background: var(--wand);
  box-shadow: 12px 12px 0 var(--lilac);
}
.kachel__flaeche img { width: 100%; aspect-ratio: 1080 / 1230; object-fit: cover; object-position: 50% 100%; }
.zettel {
  position: absolute;
  left: -1.8rem;
  top: 2.2rem;
  display: grid;
  gap: .15rem;
  max-width: 13.5rem;
  padding: .75rem 1rem .85rem;
  border: 2px solid var(--ink);
  border-radius: 16px 5px 16px 5px;
  background: var(--sun);
  box-shadow: 4px 4px 0 var(--ink);
  transform: rotate(-3deg);
}
.zettel span { color: var(--ink); font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.zettel strong { font: 700 1.05rem/1.2 var(--font-head); letter-spacing: -.02em; }

/* Aufkleber aus Richtung B: wird einmal aufgedrueckt, dann steht er. */
.aufkleber {
  position: absolute;
  top: -2.4rem;
  right: -.3rem;
  display: grid;
  place-content: center;
  width: 9rem;
  height: 9rem;
  padding: 1rem;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 5px 5px 0 var(--ink);
  color: var(--ink);
  font: 700 1rem/1.15 var(--font-head);
  letter-spacing: -.02em;
  text-align: center;
  transform: rotate(10deg);
  animation: aufkleben .65s .9s cubic-bezier(.2, .9, .3, 1.25) both;
}
.aufkleber span { display: block; font-size: 1.9rem; line-height: 1; letter-spacing: -.04em; }
@keyframes aufkleben {
  from { opacity: 0; transform: rotate(24deg) scale(1.3); box-shadow: 16px 16px 0 rgba(24, 33, 61, 0); }
  45% { opacity: 1; }
  to { opacity: 1; transform: rotate(10deg) scale(1); box-shadow: 5px 5px 0 var(--ink); }
}

/* ---------- Was euch erwartet ---------- */
.erwartet { padding: clamp(3.5rem, 8vw, 7rem) 0; background: var(--cream); border-block: 2px solid var(--ink); }
.kopfzeile {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap: 2rem;
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.kopfzeile h2 { max-width: 16ch; }
.teaser .kopfzeile > p { max-width: 30ch; font-size: var(--text-17); }
.liste { display: grid; gap: 2.2rem; margin: 0; padding: 0; list-style: none; }
.karte {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 2rem;
  overflow: hidden;
  padding-left: clamp(1.5rem, 4.5vw, 3.75rem);
  border: 2px solid var(--ink);
  border-radius: 28px 10px 28px 10px;
  box-shadow: 8px 8px 0 var(--ink);
}
.karte:nth-child(even) { grid-template-columns: 380px minmax(0, 1fr); padding-left: 0; padding-right: clamp(1.5rem, 4.5vw, 3.75rem); }
.karte:nth-child(even) .karte__text { order: 2; }
.karte--lavender { background: var(--lavender); }
.karte--peach { background: var(--peach); }
.karte--mint { background: var(--mint); }
.karte--yellow { background: var(--yellow); }
.karte__text { align-self: center; max-width: 31rem; padding: clamp(2rem, 4vw, 3rem) 0; }
.karte__text h3 { margin-top: 1rem; }
.teaser .karte__text p { margin-top: .7rem; color: #2f3956; }
.nr {
  display: inline-grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font: 700 var(--text-14)/1 var(--font-head);
}
.bald {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.3rem;
  padding: .35rem .85rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: var(--text-13);
  font-weight: 750;
}
.bald span { width: .5rem; height: .5rem; border-radius: 50%; background: var(--coral); }
.karte__tel { position: relative; height: 330px; align-self: end; }

/* Handy: oben angeschnitten, die Karte schneidet den Rest ab
   (overflow: hidden an .karte). Das Bild hat das iPhone-Format 1206 x 2622;
   object-position top haelt die Statusleiste sichtbar, auch wenn ein
   spaeterer Screenshot ein anderes Format haben sollte. */
.tel {
  position: absolute;
  left: 50%;
  top: 46px;
  width: 250px;
  border: 7px solid #171c35;
  border-radius: var(--radius-device);
  background: #171c35;
  transform: translateX(-50%) rotate(-3deg);
}
.karte:nth-child(even) .tel { transform: translateX(-50%) rotate(3deg); }
.tel__screen { position: relative; overflow: hidden; border-radius: 31px; background: var(--paper); }
.tel__screen img { width: 100%; aspect-ratio: 1206 / 2622; object-fit: cover; object-position: 50% 0; }
/* Dynamic Island: echte iOS-Screenshots enthalten sie nicht. */
.tel__screen::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 9px;
  left: 50%;
  width: 32%;
  height: 17px;
  border-radius: 999px;
  background: #171c35;
  transform: translateX(-50%);
}

/* ---------- Sprachen (Grusszeilen aus Richtung B) ---------- */
.sprachen { padding: clamp(3.5rem, 8vw, 7rem) 0; }
.sprachen__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.gruss { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.gruss li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem 0 .7rem;
  border-bottom: 2px solid var(--ink);
}
.gruss__wort { color: var(--ink); font: 700 clamp(2.5rem, 5.6vw, 4.6rem)/1.05 var(--font-head); letter-spacing: -.045em; }
.gruss li:lang(uk) .gruss__wort,
.gruss li:lang(ru) .gruss__wort { font-family: var(--font-body); letter-spacing: -.03em; }
.gruss li:nth-child(3) .gruss__wort { color: var(--lilac-deep); }
.gruss__sprache { color: var(--ink-soft); font-size: var(--text-14); font-weight: 700; }
.sprachen__text h2 { max-width: 17ch; }
.teaser .sprachen__text > p:last-child { margin-top: 1.4rem; max-width: 48ch; font-size: var(--text-17); }

/* ---------- Beta-Formular ---------- */
.bescheid { padding: clamp(3.5rem, 8vw, 7rem) 0; background: var(--sand); }
.bescheid__grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(360px, 1fr);
  gap: clamp(2.5rem, 7vw, 6rem);
  align-items: center;
}
.bescheid__copy h2 { max-width: 13ch; }
.teaser .bescheid__copy > p:not(.eyebrow) { margin-top: 1.3rem; max-width: 44ch; color: #5f513f; font-size: var(--text-17); }
.schritte { display: grid; gap: .7rem; margin: 1.6rem 0 1.4rem; padding: 0; counter-reset: schritt; list-style: none; }
.schritte li { position: relative; min-height: 2rem; padding: .2rem 0 0 2.7rem; color: var(--ink); font-weight: 650; counter-increment: schritt; }
.schritte li::before {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  content: counter(schritt);
  font: 700 var(--text-14)/1 var(--font-head);
}
.teaser .bescheid__copy .bescheid__eltern { color: var(--ink); font-size: var(--text-14); font-weight: 700; }
.formkarte {
  padding: 2.2rem 2rem 2rem;
  border: 2px solid var(--ink);
  border-radius: 32px 12px 32px 12px;
  background: var(--paper);
  box-shadow: 12px 12px 0 var(--lilac);
}
.formbanner {
  margin-bottom: 1.2rem;
  padding: .9rem 1rem;
  border: 2px solid var(--coral-ink);
  border-radius: var(--radius-small);
  background: #fde9e1;
  color: var(--ink);
  font-size: var(--text-14);
  font-weight: 650;
  line-height: 1.5;
}
.formbanner:empty { display: none; }
.beta-form { display: grid; gap: 1rem; }
.form-row { display: grid; gap: .4rem; }
.form-row label, .beta-form legend { color: var(--ink); font-size: var(--text-13); font-weight: 750; }
.beta-form input,
.beta-form select {
  width: 100%;
  min-height: 50px;
  padding: .7rem .8rem;
  border: 1.5px solid #8c92a5;
  border-radius: var(--radius-small);
  background: #fff;
  color: var(--ink);
  font: inherit;
}
.beta-form fieldset { margin: 0; padding: 0; border: 0; }
.beta-form legend { margin-bottom: .45rem; padding: 0; }
.device-options { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.device-options label { position: relative; display: block; }
.device-options input { position: absolute; inset: 0; opacity: 0; }
.device-options span {
  display: grid;
  min-height: 50px;
  place-items: center;
  border: 1.5px solid #8c92a5;
  border-radius: var(--radius-small);
  color: var(--ink);
  font-size: var(--text-14);
  font-weight: 700;
  cursor: pointer;
}
.device-options input:checked + span { border-color: var(--mint-deep); background: var(--mint); }
.device-options input:focus-visible + span { outline: 3px solid var(--lilac-deep); outline-offset: 3px; }
.form-check {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  min-height: 44px;
  padding: .2rem 0;
  color: var(--ink);
  font-size: var(--text-14);
  font-weight: 600;
  line-height: 1.45;
  cursor: pointer;
}
.beta-form .form-check input { flex: none; width: 22px; height: 22px; min-height: 0; margin: .1rem 0 0; padding: 0; accent-color: var(--lilac-deep); }
.teaser .form-note { color: var(--ink-soft); font-size: var(--text-12); line-height: 1.5; }
.form-note a { color: var(--lilac-deep); font-weight: 700; text-decoration: underline; }
/* Honeypot: fuer Menschen unsichtbar, fuer Bots ein normales Feld. */
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Zustand nach dem Absenden (Double-Opt-in): ersetzt das Formular am selben Platz. */
.wartet { display: grid; gap: .9rem; align-content: start; }
.wartet[hidden], .beta-form[hidden] { display: none; }
.post {
  display: grid;
  place-items: center;
  width: 4.2rem;
  height: 4.2rem;
  border: 2px solid var(--ink);
  border-radius: 18px 6px 18px 6px;
  background: var(--sun);
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}
.post svg { width: 2.2rem; height: 2.2rem; }
.wartet h3 { margin-top: .4rem; }
.wartet h3:focus { outline: none; }
.schritte--klein { margin: .4rem 0 .2rem; gap: .55rem; }
.schritte--klein li { font-size: var(--text-15); }
.schritte--klein li.erledigt::before { content: "✓"; background: var(--mint-deep); }
.schritte--klein li.jetzt::before { background: var(--lilac); }
.schritte--klein li.jetzt { color: var(--lilac-deep); }
.schritte--klein li:not(.erledigt):not(.jetzt) { color: var(--ink-soft); }
.schritte--klein li:not(.erledigt):not(.jetzt)::before { background: var(--paper); color: var(--ink-soft); box-shadow: inset 0 0 0 2px #b9bfd0; }

/* ---------- Fuss ---------- */
.fuss { padding: 4rem 0 1.5rem; background: var(--ink); color: #fff; }
.fuss__grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 3rem; align-items: start; }
.teaser .marke--hell { color: #fff; }
.teaser .fuss__grid > div:first-child p { max-width: 30ch; margin-top: 1rem; color: #d2d6e4; font-size: var(--text-14); }
.fuss nav { display: grid; gap: .65rem; }
.teaser .fuss nav a { color: #fff; font-size: var(--text-14); font-weight: 700; text-decoration: none; }
.fuss nav a:hover { text-decoration: underline; text-decoration-color: var(--sun); text-underline-offset: 4px; }
.fuss__kontakt { display: grid; justify-self: end; gap: .5rem; }
.fuss__kontakt span { color: #b9c0d6; font-size: var(--text-12); }
.teaser .fuss__kontakt a { color: var(--mint); font-size: var(--text-14); font-weight: 700; text-decoration: none; }
.fuss__unten {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, .2);
  color: #c3c9db;
  font-size: var(--text-12);
}
.teaser .team-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  color: #9aa2bb;
  font-size: var(--text-12);
  font-weight: 600;
  text-decoration: none;
}
.teaser .team-link:hover { color: #fff; text-decoration: underline; }

/* ---------- Rechtsseiten (Impressum, Datenschutz kurz) ---------- */
.recht { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3.5rem, 8vw, 6.5rem); }
.recht__grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 6vw, 5rem);
  align-items: start;
}
.teaser .recht__kopf h1 { font-size: clamp(2.3rem, 5vw, 4rem); }
.teaser .recht__kopf > p { margin-top: .8rem; font-size: var(--text-15); }
.teaser .recht__zurueck {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  margin-bottom: 1.2rem;
  color: var(--lilac-deep);
  font-size: var(--text-14);
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.recht__text {
  max-width: 62ch;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border: 2px solid var(--ink);
  border-radius: 28px 10px 28px 10px;
  background: #fff;
  box-shadow: 8px 8px 0 var(--lavender);
}
.teaser .recht__text h2 { margin-top: 1.6rem; font-size: var(--text-17); letter-spacing: -.02em; line-height: 1.3; }
.teaser .recht__text h2:first-child { margin-top: 0; }
.teaser .recht__text p,
.teaser .recht__text li { margin-top: .4rem; color: #2f3956; font-size: var(--text-15); }
.recht__text ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.teaser .recht__text a { color: var(--lilac-deep); font-weight: 700; overflow-wrap: anywhere; }

/* ---------- Handy ---------- */
@media (max-width: 760px) {
  .wrap { width: calc(100% - 2rem); }
  .kopf__in { min-height: 64px; gap: 1rem; }
  .kopf__cta { display: none; }
  .marke { font-size: 1.125rem; }
  .marke img { width: 2rem; height: 2rem; }
  .kopf__link { font-size: var(--text-14); }

  .hero__grid, .kopfzeile, .sprachen__grid, .bescheid__grid, .fuss__grid, .recht__grid { grid-template-columns: minmax(0, 1fr); }
  .hero { padding: 2rem 0 3.5rem; }
  /* "Bald geht's los." darf nicht umbrechen (nowrap wegen des Strichs) und ist
     rund 7,1 em breit. Unter 320 px wuerde es aus der Spalte ragen, darum
     waechst die Schrift dort mit der Breite mit. */
  .teaser h1 { font-size: min(2.45rem, calc((100vw - 2rem) / 7.4)); line-height: 1; }
  .teaser h2 { font-size: 1.9rem; }
  .teaser .hero__lead { font-size: var(--text-17); }
  .aktionen { margin-top: 1.6rem; }
  .aktionen .knopf { width: 100%; }
  .kachel { margin: 1.4rem .5rem 0 0; }
  .zettel { left: -.4rem; top: -1rem; max-width: 11.5rem; padding: .6rem .8rem; }
  .zettel strong { font-size: var(--text-15); }
  .aufkleber { top: auto; bottom: -1.2rem; right: -.5rem; width: 6.6rem; height: 6.6rem; padding: .6rem; font-size: var(--text-12); }
  .aufkleber span { font-size: 1.35rem; }

  .kopfzeile { gap: 1rem; }
  .liste { gap: 1.6rem; }
  .karte,
  .karte:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; box-shadow: 6px 6px 0 var(--ink); }
  .karte:nth-child(even) .karte__text { order: 0; }
  .karte__text { padding: 1.6rem 1.4rem 0; }
  .karte__tel { height: 250px; }
  .tel { top: 30px; left: 60%; width: 200px; }

  .gruss__wort { font-size: 2.5rem; }
  .sprachen__grid { gap: 2.4rem; }

  .formkarte { padding: 1.6rem 1.2rem 1.4rem; box-shadow: 8px 8px 0 var(--lilac); }
  .bescheid__grid { gap: 2rem; }
  .fuss__grid { gap: 1.8rem; }
  .fuss__kontakt { justify-self: start; }
  .fuss__unten { margin-top: 2rem; }

  .teaser .recht__zurueck { margin-bottom: .6rem; }
  .recht__text { box-shadow: 6px 6px 0 var(--lavender); }
}

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .unterstrich path { animation: none; stroke-dashoffset: 0; }
  .aufkleber { animation: none; }
  .knopf, .marke img { transition: none; }
  .knopf:hover { transform: none; }
  .marke:hover img, .marke:focus-visible img { transform: none; }
}