/* =========================================================================
   KLASSE gedacht - Landingpage
   =========================================================================
   Farben kommen aus tokens.css (Kopie von shared/tokens.css).
   Keine externen Schriften, keine Tracker, keine Cookies - alles laedt
   ausschliesslich vom eigenen Server.
   ========================================================================= */

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--kg-ivory);
  color: var(--kg-slate);
  font-family: var(--kg-font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

.wrap {
  max-width: var(--kg-width);
  margin: 0 auto;
  padding: 0 22px;
}

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

/* ---------- Typografie --------------------------------------------- */

h1, h2, h3, h4 { color: var(--kg-navy); margin: 0; text-wrap: balance; }

h1 {
  font-size: clamp(34px, 5.4vw, 52px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 700;
}
h2 {
  font-size: clamp(25px, 3.2vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.013em;
  font-weight: 700;
}
h3 { font-size: 20px; line-height: 1.35; font-weight: 600; }

p { margin: 0; }
.lead { font-size: clamp(17px, 2vw, 20px); line-height: 1.6; }
.muted { color: var(--kg-muted); }
.small { font-size: 15px; }

a { color: var(--kg-berry-dark); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--kg-berry);
  outline-offset: 3px;
  border-radius: 4px;
}

.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kg-berry-dark);
  margin: 0 0 14px;
}

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

.bar {
  background: var(--kg-navy);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
}
.bar-inner {
  max-width: var(--kg-width);
  margin: 0 auto;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
  margin-right: auto;
}
.brand-badge {
  background: #fff;
  border-radius: var(--kg-radius-s);
  padding: 6px 10px;
  display: grid;
  place-items: center;
  flex: none;
}
.brand-badge img { height: 34px; width: auto; }
.brand-text { font-weight: 800; letter-spacing: 0.07em; line-height: 1.15; }
.brand-text small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  opacity: 0.72;
  letter-spacing: 0;
}

.nav { display: flex; align-items: center; gap: 26px; }
.nav a {
  color: rgba(255,255,255,0.86);
  text-decoration: none;
  font-size: 15.5px;
  font-weight: 500;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: #fff; border-bottom-color: var(--kg-berry); }
.nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--kg-berry); }

.bar-actions { display: flex; align-items: center; gap: 12px; }

.login-link {
  color: #fff;
  text-decoration: none;
  font-size: 15.5px;
  font-weight: 600;
  padding: 9px 4px;
}
.login-link:hover { text-decoration: underline; }

@media (max-width: 860px) {
  /*
    NICHT MEHR MITLAUFEN, Nadines Entscheidung vom 13.09.2026. Ihr Foto
    von /kuendigen am iPhone: „es klebt so komisch oben". Ab hier ist die
    Kopfzeile zweizeilig, gemessen 130 von 812 Pixeln, und der Text
    rutschte beim Lesen darunter durch. Zurück nach oben führt der runde
    Pfeil unten rechts, siehe nachoben.js. Breiter bleibt sie stehen,
    dort ist sie einzeilig.
  */
  .bar { position: static; }
  .bar-inner { padding: 12px 18px; gap: 12px; }
  .brand { margin-right: auto; }
  .nav {
    order: 3;
    width: 100%;
    gap: 20px;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
    border-top: 1px solid rgba(255,255,255,0.14);
    padding-top: 10px;
  }
  .nav a { white-space: nowrap; font-size: 15px; }
}

/*
  Am Telefon ist in der Kopfzeile kein Platz fuer alles. Ohne diese
  Regel braucht der Kopf drei Zeilen: Logo mit Schriftzug, darunter
  Anmelden und Registrieren, darunter das Menue.

  Der Schriftzug verschwindet deshalb fuers Auge, dann passen Logo,
  Anmelden und Registrieren nebeneinander.

  WARUM WEGGESCHOBEN UND NICHT AUSGEBLENDET: Das Logo traegt alt="",
  weil es Schmuck ist. Mit display:none waere der Link zur Startseite
  ein Link ohne jeden Namen, und ein Vorleseprogramm koennte nur noch
  "Link" sagen. Weggeschoben bleibt der Text im Dokument und wird
  vorgelesen, ist aber nicht zu sehen.
*/
@media (max-width: 560px) {
  .brand-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* ---------- Schaltflaechen ------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  padding: 14px 24px;
  border-radius: var(--kg-radius-m);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.14s ease, background 0.14s ease, border-color 0.14s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--kg-berry-knopf); color: #fff; }
.btn-primary:hover { background: #8E4E57; }

.btn-secondary {
  background: var(--kg-white);
  color: var(--kg-navy);
  border-color: var(--kg-sand);
}
.btn-secondary:hover { border-color: var(--kg-berry); }

.btn-sm { padding: 10px 18px; font-size: 15px; border-radius: var(--kg-radius-s); }
.btn-block { width: 100%; }

.btn-group { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Abschnitte ---------------------------------------------- */

section { padding: clamp(56px, 8vw, 96px) 0; }
section.tight { padding: clamp(40px, 5vw, 64px) 0; }
.on-white { background: var(--kg-white); }
.on-blush { background: var(--kg-blush); }

.section-head { max-width: 60ch; margin-bottom: clamp(32px, 4vw, 48px); }
.section-head p { margin-top: 14px; }

/* ---------- Startseite: Hero ---------------------------------------- */

.hero { padding-top: clamp(48px, 7vw, 86px); padding-bottom: clamp(40px, 5vw, 64px); }
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(38px, 5vw, 60px);
  align-items: center;
}
@media (min-width: 940px) {
  .hero-grid { grid-template-columns: 1.02fr 1fr; }
}
.hero h1 { margin-bottom: 22px; }
.hero .lead { margin-bottom: 30px; max-width: 54ch; }

.trust {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding: 9px 15px 9px 12px;
  background: var(--kg-white);
  border: 1px solid var(--kg-sand);
  border-radius: var(--kg-radius-pill);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--kg-navy);
}
.trust svg { flex: none; color: var(--kg-berry); }

/* Bildschirmfoto im Rahmen */
.shot {
  background: var(--kg-white);
  border: 1px solid var(--kg-sand);
  border-radius: var(--kg-radius-l);
  overflow: hidden;
  box-shadow: 0 18px 44px -24px rgba(15, 33, 71, 0.4);
}
.shot-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 15px;
  background: var(--kg-ivory);
  border-bottom: 1px solid var(--kg-sand);
}
.shot-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--kg-sand); flex: none; }
.shot-url {
  margin-left: 8px;
  font-size: 12px;
  color: var(--kg-muted);
  letter-spacing: 0.01em;
}
.shot img { display: block; width: 100%; }
.shot-tall img { max-height: 460px; object-fit: cover; object-position: top center; }

/* ---------- Karten --------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 720px) { .cards { grid-template-columns: repeat(3, 1fr); } }

/*
  Zwei Karten statt drei, etwa auf der Startseite und der Kontaktseite.

  Untereinander, solange der Platz fehlt. Frueher stand die Spaltenzahl
  direkt am Element, und die gewinnt gegen jede Regel hier. Auf dem
  iPhone blieben die Karten deshalb nebeneinander und die Seite war
  breiter als der Bildschirm.
*/
.cards.zwei { grid-template-columns: 1fr; }
@media (min-width: 720px) { .cards.zwei { grid-template-columns: repeat(2, 1fr); } }

.card {
  background: var(--kg-white);
  border: 1px solid var(--kg-sand);
  border-radius: var(--kg-radius-l);
  padding: 30px 26px;
}
.card h3 { margin-bottom: 10px; }
.card p { color: var(--kg-slate); }

.card-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--kg-radius-m);
  background: var(--kg-blush);
  color: var(--kg-berry);
  display: grid;
  place-items: center;
  margin-bottom: 20px;
}

/* ---------- Zitat / Positionierung ----------------------------------- */

.statement {
  max-width: 42ch;
  font-size: clamp(21px, 2.6vw, 27px);
  line-height: 1.4;
  font-weight: 600;
  color: var(--kg-navy);
  letter-spacing: -0.01em;
}

/* ---------- Wechselnde Bild-Text-Bloecke ----------------------------- */

.feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 52px);
  align-items: center;
  padding: clamp(34px, 4vw, 52px) 0;
}
@media (min-width: 940px) {
  .feature { grid-template-columns: 1fr 1.15fr; }
  .feature.flip .feature-text { order: 2; }
  .feature.flip .feature-shot { order: 1; }
}
.feature + .feature { border-top: 1px solid var(--kg-sand); }
.feature h2 { margin-bottom: 14px; }
.feature ul { margin: 20px 0 0; padding-left: 20px; }
.feature li { margin-bottom: 9px; }
.feature li::marker { color: var(--kg-berry); }

/* ---------- Preise ---------------------------------------------------- */

/*
  GLEICH LANGE KACHELN, 30.08.2026, Nadines Wunsch.

  Vorher stand hier align-items:start. Damit war jede Kachel so hoch wie
  ihr eigener Inhalt: Die Vollversion hat einen Aufzaehlungspunkt weniger
  als die zwei anderen, also endete sie hoeher, und die drei Knoepfe
  standen auf drei verschiedenen Hoehen.

  Jetzt fuellt jede Kachel die Zeile, das ist die Voreinstellung von
  Grid und dafuer reicht es, align-items wegzulassen.

  Damit allein waere es aber nicht getan: Der Knopf saesse weiterhin
  gleich unter der Liste und darunter bliebe weisser Raum. Deshalb ist
  die Kachel selbst eine Spalte, und der Knopf bekommt margin-top:auto.
  Das schiebt ihn ans untere Ende, und alle drei Knoepfe stehen auf
  derselben Linie.
*/
.plans {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 780px)  { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .plans { grid-template-columns: repeat(3, 1fr); } }

/*
  UMGEBAUT AM 30.08.2026, Nadines Wunsch.

  VORHER trug die mittlere Karte, die Vollversion, dauerhaft eine rose
  Umrandung. Die zwei anderen waren sandfarben umrandet und ruehrten
  sich nicht.

  JETZT hebt sich die Karte, ueber die man faehrt. Sie bekommt die rose
  Umrandung, steigt vier Pixel und wirft einen weichen Schatten.

  DIE RANDSTAERKE IST IMMER 1.5 PIXEL, auch im Ruhezustand. Waere sie
  im Ruhezustand 1 Pixel und beim Zeigen 1.5, wuerde der Inhalt der
  Karte bei jeder Mausbewegung um einen halben Pixel springen.

  @media (hover: hover) schuetzt Telefone und Tablets. Ohne diese
  Klammer bleibt der Zustand am Touchgeraet nach dem Antippen kleben,
  bis man woanders hintippt.

  Die Bewegung selbst ist bereits abgesichert: ganz oben in dieser
  Datei schaltet @media (prefers-reduced-motion: reduce) alle
  Uebergaenge ab.
*/
.plan {
  background: var(--kg-white);
  border: 1.5px solid var(--kg-sand);
  border-radius: var(--kg-radius-l);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.18s ease, transform 0.18s ease,
              box-shadow 0.18s ease;
}
/* Der Knopf ganz unten, damit alle drei auf einer Linie stehen. */
.plan .btn-block { margin-top: auto; }
@media (hover: hover) {
  .plan:hover {
    border-color: var(--kg-berry);
    transform: translateY(-4px);
    box-shadow: 0 14px 34px -22px rgba(15, 33, 71, 0.35);
  }
}

/*
  Die Klasse "featured" steht weiterhin an der mittleren Karte in
  preise.html, traegt aber seit dem 30.08.2026 keine Gestaltung mehr.
  Sie bleibt stehen, damit die dauerhafte Hervorhebung der Vollversion
  mit einer einzigen Zeile wieder da waere:
  .plan.featured { border-color: var(--kg-berry); }
*/
.plan-tag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--kg-berry);
  background: var(--kg-blush);
  padding: 5px 11px;
  border-radius: var(--kg-radius-pill);
  margin-bottom: 16px;
}
.price { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 4px; }
.price strong { font-size: 42px; font-weight: 700; color: var(--kg-navy); letter-spacing: -0.02em; }
.price span { font-size: 16px; color: var(--kg-muted); }
.plan ul { list-style: none; margin: 24px 0 28px; padding: 0; }
.plan li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 9px 0;
  border-bottom: 1px solid var(--kg-line-soft);
}
.plan li:last-child { border-bottom: 0; }
.plan li svg { flex: none; color: var(--kg-berry); margin-top: 4px; }

/* ---------- FAQ ------------------------------------------------------- */

.faq-group + .faq-group { margin-top: 46px; }
.faq-group > h3 {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kg-muted);
  margin-bottom: 14px;
}

/*
  Die Schlagwortsuche ueber der FAQ, angelegt am 30.08.2026.

  Das Feld entsteht in faq.js und nicht im HTML: Ohne JavaScript koennte
  man hineintippen, und es passierte nichts. Diese Regeln greifen also
  nur, wenn das Feld auch wirklich da ist.
*/
.faq-suche { margin: 0 0 clamp(28px, 4vw, 42px); max-width: 520px; }
.faq-suche input {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  color: var(--kg-navy);
  background: var(--kg-white);
  border: 1.5px solid var(--kg-sand);
  border-radius: var(--kg-radius-m);
  padding: 14px 18px;
}
.faq-suche input::placeholder { color: var(--kg-muted); }
.faq-suche input:focus-visible {
  outline: 2px solid var(--kg-berry);
  outline-offset: 2px;
  border-color: var(--kg-berry);
}
.faq-suche-stand {
  margin: 10px 0 0;
  font-size: 15px;
  color: var(--kg-muted);
}

details.qa {
  background: var(--kg-white);
  border: 1px solid var(--kg-sand);
  border-radius: var(--kg-radius-m);
  margin-bottom: 10px;
  overflow: hidden;
}
details.qa summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 22px;
  font-weight: 700;
  color: var(--kg-navy);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary::after {
  content: "+";
  flex: none;
  font-size: 21px;
  font-weight: 400;
  line-height: 1;
  color: var(--kg-berry);
  margin-top: 2px;
}
details.qa[open] summary::after { content: "\2212"; }
details.qa .qa-body { padding: 0 22px 20px; }
details.qa .qa-body p + p { margin-top: 12px; }

/* ---------- Formulare ------------------------------------------------- */

.form-page { display: grid; place-items: center; padding: clamp(40px, 7vw, 80px) 0; }
.form-card {
  width: 100%;
  max-width: 460px;
  background: var(--kg-white);
  border: 1px solid var(--kg-sand);
  border-radius: var(--kg-radius-l);
  padding: clamp(28px, 4vw, 40px);
}
.form-card h1 { font-size: 29px; margin-bottom: 8px; }

.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--kg-navy);
  margin-bottom: 7px;
}
.field input, .field textarea, .field select {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  color: var(--kg-navy);
  padding: 12px 14px;
  border: 1px solid var(--kg-sand);
  border-radius: var(--kg-radius-m);
  background: var(--kg-white);
}
.field textarea { min-height: 130px; resize: vertical; line-height: 1.5; }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--kg-berry);
  box-shadow: 0 0 0 3px rgba(185, 113, 122, 0.14);
}
.field .hint { font-size: 13.5px; color: var(--kg-muted); margin-top: 6px; }

/* Fehlermeldung in einem Formular. Bewusst nicht nur rote Schrift,
   sondern ein eigener Kasten: Farbe allein waere fuer Menschen mit
   Farbsehschwaeche zu wenig. */
.fehlermeldung {
  background: var(--kg-blush);
  border: 1px solid var(--kg-berry);
  border-radius: var(--kg-radius-m);
  padding: 12px 15px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--kg-navy);
}

.check {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 14.5px;
  line-height: 1.5;
  margin-bottom: 20px;
}
.check input { margin-top: 3px; flex: none; width: 17px; height: 17px; accent-color: var(--kg-berry); }

.form-note {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--kg-line-soft);
  font-size: 14.5px;
  text-align: center;
}

.notice {
  background: var(--kg-blush);
  border: 1px solid var(--kg-sand);
  border-radius: var(--kg-radius-m);
  padding: 15px 18px;
  font-size: 14.5px;
  line-height: 1.55;
  margin-bottom: 24px;
}
.notice strong { color: var(--kg-navy); }

/* ---------- Fliesstext-Seiten (Datenschutz, AGB, Impressum) ---------- */

.prose { max-width: 68ch; }
.prose h2 { font-size: 25px; margin: 44px 0 14px; }
.prose h3 { font-size: 18px; margin: 30px 0 10px; }
.prose p { margin-bottom: 15px; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 21px; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--kg-berry); }
.prose dl { margin: 0 0 18px; }
.prose dt { font-weight: 700; color: var(--kg-navy); margin-top: 14px; }
.prose dd { margin: 4px 0 0; }

.placeholder {
  border: 1.5px dashed var(--kg-berry);
  border-radius: var(--kg-radius-m);
  background: var(--kg-white);
  padding: 20px 22px;
  margin: 22px 0;
  font-size: 15px;
}
.placeholder strong { color: var(--kg-berry-dark); }

/* ---------- Aufruf zum Handeln --------------------------------------- */

.cta {
  background: var(--kg-navy);
  color: rgba(255,255,255,0.86);
  border-radius: var(--kg-radius-l);
  padding: clamp(38px, 5vw, 60px) clamp(26px, 4vw, 52px);
  text-align: center;
}
.cta h2 { color: #fff; margin-bottom: 14px; }
.cta p { max-width: 52ch; margin: 0 auto 28px; }
.cta .btn-group { justify-content: center; }
.cta .btn-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
.cta .btn-secondary:hover { border-color: #fff; }

/* ---------- Fusszeile ------------------------------------------------- */

.foot {
  background: var(--kg-white);
  border-top: 1px solid var(--kg-sand);
  padding: 52px 0 34px;
  font-size: 15px;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-bottom: 36px;
}
@media (min-width: 720px) { .foot-grid { grid-template-columns: 1.6fr 1fr 1fr; } }

.foot h4 {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kg-muted);
  margin-bottom: 14px;
}
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 9px; }
.foot a { color: var(--kg-slate); text-decoration: none; }
.foot a:hover { color: var(--kg-berry-dark); text-decoration: underline; }

.foot-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.foot-brand img { height: 36px; width: auto; }
.foot-brand span { font-weight: 800; letter-spacing: 0.06em; color: var(--kg-navy); }

.foot-bottom {
  border-top: 1px solid var(--kg-line-soft);
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: var(--kg-muted);
}

/* =========================================================================
   Seitentitel: semantisch h1, optisch wie h2

   WARUM ES DIESE KLASSE GIBT, gefunden beim Check-up am 28.08.2026:
   Auf vier Seiten (Funktionen, Preise, FAQ, Kontakt) war die oberste
   Überschrift ein h2, es gab gar kein h1. Mit den Augen fällt das nicht
   auf, jede Vorlesefunktion aber kündigt eine Seite über ihre
   Hauptüberschrift an, und die fehlte.

   Ein echtes h1 wäre deutlich größer geworden und hätte das Aussehen
   verändert. Diese Klasse macht die Überschrift semantisch richtig und
   lässt sie aussehen wie vorher.
   ========================================================================= */
h1.seitentitel {
  font-size: clamp(25px, 3.2vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.013em;
}

/* =========================================================================
   Sprungmarke zum Inhalt

   Für alle, die mit der Tastatur bedienen: Der erste Tabulatorsprung
   führt am Menü vorbei direkt zum Inhalt. Sichtbar wird der Link nur,
   wenn er den Fokus hat.
   ========================================================================= */
.zum-inhalt {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--kg-navy);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 var(--kg-radius-s) 0;
  z-index: 100;
  text-decoration: none;
}
.zum-inhalt:focus {
  left: 0;
}

/* =========================================================================
   Zwei Felder nebeneinander, etwa PLZ und Ort
   ========================================================================= */
.feld-paar { display: grid; gap: 0 14px; grid-template-columns: 1fr; }
@media (min-width: 520px) { .feld-paar { grid-template-columns: 120px 1fr; } }

/* =========================================================================
   Zahlenfelder, die sich nicht aus Versehen verstellen

   Nadines Beobachtung beim Durchspielen der Schullizenz: Die Anzahl der
   Plätze ließ sich mit dem Mausrad verschieben, wenn man über dem Feld
   nur scrollen wollte. Bei einer Bestellung ist das ärgerlich, weil man
   es leicht übersieht.

   Die kleinen Pfeile fallen deshalb weg, und das Rad wird abgefangen
   (siehe das Skript unten auf der Bestellseite).
   ========================================================================= */
.nur-zahl::-webkit-outer-spin-button,
.nur-zahl::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.nur-zahl { -moz-appearance: textfield; appearance: textfield; }

/* =========================================================================
   Der Pfeil zurück nach oben

   Unten rechts, außerhalb des Textes. Auf schmalen Bildschirmen etwas
   näher an den Rand, damit er nicht über dem Inhalt klebt.

   44 mal 44 Pixel, also groß genug für einen Finger. Der Kontrast ist
   weiß auf Navy und liegt bei 15,8 zu 1.
   ========================================================================= */
.nach-oben {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--kg-navy);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(15, 33, 71, 0.22);
  z-index: 60;
}

.nach-oben:hover { background: #16305f; }

.nach-oben:focus-visible {
  outline: 2px solid var(--kg-berry-dark);
  outline-offset: 3px;
}

@media (max-width: 560px) {
  .nach-oben { right: 14px; bottom: 14px; }
}

/* Wer reduzierte Bewegung eingestellt hat, bekommt keinen Übergang. */
@media (prefers-reduced-motion: reduce) {
  .nach-oben { transition: none; }
}

/* ---------- Hinweis unter den Bildschirmfotos ------------------------- */

/*
  Nadines Frage vom 28.08.2026: "sollten wir wo vermerken, unter allen
  bildern ganz klein, dass es sich um beispiel bilder handelt?"

  Ja, und zwar aus zwei Gruenden. Erstens sieht man den Bildern nicht an,
  dass die Kinder erfunden sind, und eine App fuer Schuelerdaten sollte
  darueber keinen Zweifel lassen. Zweitens waeren Werbebilder mit echten
  Kindernamen genau das, was wir auf jeder zweiten Seite ausschliessen.

  Bewusst vier Woerter und in gedaempftem Grau: Der Satz soll auffindbar
  sein, aber nicht lauter als das Bild.
*/
.shot-hinweis {
  margin: 9px 2px 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--kg-muted);
}

/* Rechtstexte in der Fassung des Anwalts, seit 10.09.2026: nummerierte
   Absaetze aus der Word-Nummerierung. Die Nummer ist Teil des Textes,
   die Klasse macht nur den Einzug. */
.prose p.nr { padding-left: 1.6em; text-indent: -1.6em; }
.prose p.nr-1 { margin-left: 1.6em; }
.prose p.nr-2 { margin-left: 3.2em; }

/* ---------------------------------------------------------------------
   Lange Woerter in den Ueberschriften der Rechtstexte
   ---------------------------------------------------------------------
   NEU AM 12.09.2026. Im Browser auf 375 Pixel Breite gemessen, also auf
   einem gewoehnlichen iPhone:

     AVV            673 Pixel breit statt 375
     AGB            419
     Datenschutz    400

   Ursache sind einzelne sehr lange Woerter, die nicht umbrechen:
   "AUFTRAGSVERARBEITUNGSVERTRAG", "Geschaeftsbedingungen",
   "Datenschutzerklaerung". Die Seite liess sich dadurch seitlich
   schieben, und die Ueberschrift war abgeschnitten. Ausgerechnet auf den
   Seiten, die rechtlich zaehlen.

   Am Text des Anwalts aendert sich nichts, das hier ist nur Gestaltung.
   --------------------------------------------------------------------- */
.prose h1,
.prose h2,
.prose h3 {
  overflow-wrap: break-word;
  hyphens: auto;
}

@media (max-width: 560px) {
  /* !important, weil die fuenf Rechtstexte ihre Schriftgroesse direkt im
     h1-Tag tragen (style="font-size:38px"). Ohne !important kaeme eine
     Regel aus dieser Datei nicht dagegen an. */
  .prose h1 { font-size: 27px !important; }
}