/* 24ideen · Seiten rund um den Planer (Startseite, Rechtliches, 404). Baut auf den Tokens und Bausteinen aus app.css auf.
   Rhythmus wie ein gedrucktes Magazin: große Überschrift, viel Luft, abwechselnd Papier- und weiße Bänder, ein dunkles Schlussband. */

html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.inhalt { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 var(--rand); }
.inhalt--schmal { max-width: 760px; }
.kicker { margin: 0; font-size: var(--t-mini); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--akzent); }
.dokument .kicker + h1 { margin-top: 10px; }   /* große Fraunces-Überschrift: Oberlängen kamen der Dachzeile zu nah (Audit 16.10.) */

/* ---------- Kopf ---------- */
.skopf { position: sticky; top: 0; z-index: 30; padding-top: env(safe-area-inset-top);
  background: rgba(246, 241, 233, .82); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); }
.skopf__zeile { display: flex; align-items: center; gap: 28px; height: 60px; }
.skopf .marke { margin-right: auto; padding: 0; }
.skopf__nav { display: none; gap: 4px; }
.skopf__nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 999px; color: var(--tinte-2);
  font-size: var(--t-klein); font-weight: 500; text-decoration: none; transition: color var(--t-kurz), background-color var(--t-kurz); }
.skopf__nav a:hover { color: var(--tinte); background: var(--flaeche-2); }
@media (min-width: 860px) { .skopf__nav { display: flex; } }
.knopf--pille { min-height: 44px; padding: 0 20px; border-radius: 999px; font-size: min(var(--t-klein), 17px); box-shadow: none; white-space: nowrap; }
.skopf .marke { font-size: min(1.1875rem, 22px); }
.knopf--honig { background: var(--honig); color: var(--tinte); box-shadow: 0 14px 30px -14px rgba(230, 179, 78, .7); }
.knopf--honig:hover { background: #EDBE62; }

/* ---------- Held ---------- */
.held { padding: clamp(36px, 6vw, 88px) 0 clamp(64px, 9vw, 120px); overflow: hidden; }
.held .inhalt { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(44px, 6vw, 72px); align-items: center; }
.held__text, .held__bild { min-width: 0; }
.held h1, .abschnittkopf h2, .dokument h1 { overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }
@media (min-width: 980px) { .held .inhalt { grid-template-columns: 1.08fr .92fr; } }
@media (min-width: 640px) and (max-width: 979px) { .held__bild { width: 100%; max-width: 560px; justify-self: center; } }
.held h1 { margin: 16px 0 20px; font-size: clamp(2.75rem, 1.6rem + 4.6vw, 5.125rem); line-height: .98; letter-spacing: -.036em; }
.held__lead { max-width: 33ch; font-size: clamp(1.125rem, 1.02rem + .45vw, 1.3125rem); line-height: 1.45; color: var(--tinte-2); }
.held__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.held__knoepfe .knopf { flex: 1 1 210px; max-width: 300px; }
.held__vertrauen { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 26px 0 0; padding: 0; list-style: none; font-size: var(--t-klein); color: var(--tinte-2); }
.held__vertrauen li { display: inline-flex; align-items: center; gap: 7px; }
.held__vertrauen .icon { width: 17px; height: 17px; color: var(--gut); stroke-width: 2.4; }

.planbild { position: relative; display: block; padding: clamp(18px, 3vw, 28px); border-radius: 28px; background: var(--flaeche); color: var(--tinte);
  text-decoration: none; box-shadow: 0 48px 90px -44px rgba(42, 33, 25, .5), 0 0 0 1px rgba(42, 33, 25, .05);
  transition: transform var(--t-mittel) var(--kurve), box-shadow var(--t-mittel); }
a.planbild:hover { transform: translateY(-3px); box-shadow: 0 56px 100px -44px rgba(42, 33, 25, .55), 0 0 0 1px rgba(42, 33, 25, .06); }
.planbild__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.planbild__kopf b { font: 600 clamp(1.375rem, 1.2rem + .7vw, 1.75rem)/1.1 var(--f-titel); letter-spacing: -.018em; }
.planbild__kopf span { font-size: var(--t-klein); color: var(--tinte-2); white-space: nowrap; }
.planbild .tuer { cursor: inherit; }
.planbild .tuer:hover { transform: none; box-shadow: var(--s-1); }
.planbild__fuss { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--linie); font-size: var(--t-klein); color: var(--tinte-2); }
.planbild__fuss b { font: 600 1.5rem/1.15 var(--f-titel); color: var(--tinte); letter-spacing: -.02em; white-space: nowrap; }   /* Zeilenhöhe 1 schnitt die Unterlängen ab (Audit 16.10.) */
.planbild__karte { position: relative; z-index: 2; display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: center;
  width: min(86%, 330px); margin: 16px 6% 0 auto; padding: 16px 18px; border-radius: var(--r-l); background: var(--flaeche);
  box-shadow: 0 24px 50px -24px rgba(42, 33, 25, .5), 0 0 0 1px rgba(42, 33, 25, .05); animation: auftauchen 700ms var(--feder) 1100ms both; }
.planbild__karte .karte__nr { grid-row: 1 / 3; background: var(--honig); }
.planbild__karte small { font-size: var(--t-mini); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--akzent); }
.planbild__karte b { font: 600 1.0625rem/1.25 var(--f-titel); }
@keyframes auftauchen { from { opacity: 0; transform: translateY(14px) scale(.96); } }
/* Breite Bildschirme: Karte überlappt nur den unteren Rand des Plans, die Fußzeile bleibt frei */
@media (min-width: 980px) { .planbild { padding-bottom: 60px; } .planbild__karte { margin: -36px -22px 0 auto; } }

/* ---------- Bänder ---------- */
.band { padding: clamp(68px, 9vw, 128px) 0; }
.band--weiss { background: var(--flaeche); }
.abschnittkopf { display: grid; gap: 12px; max-width: 660px; margin-bottom: clamp(32px, 5vw, 56px); }
.abschnittkopf h2 { font-size: clamp(2.05rem, 1.35rem + 2.7vw, 3.375rem); line-height: 1.03; letter-spacing: -.03em; }
.abschnittkopf p { font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); color: var(--tinte-2); }

.schritte { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 860px) { .schritte { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.schritt { display: grid; gap: 10px; align-content: start; padding: clamp(24px, 3vw, 34px); border-radius: var(--r-xl); background: var(--grund); }
.schritt__zahl { font: 600 clamp(3rem, 2.4rem + 2vw, 4.25rem)/1 var(--f-titel); letter-spacing: -.04em; color: var(--akzent); }
.schritt h3 { margin-top: 6px; font-size: 1.375rem; line-height: 1.2; letter-spacing: -.012em; }
.schritt p { color: var(--tinte-2); }

.zielgruppen { display: grid; gap: 10px; }
@media (min-width: 760px) { .zielgruppen { grid-template-columns: 1fr 1fr; gap: 14px; } }
.zielgruppe { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; min-height: 96px; padding: 18px 20px 18px 18px;
  border-radius: var(--r-xl); background: var(--flaeche); box-shadow: var(--s-1); color: var(--tinte); text-decoration: none;
  transition: box-shadow var(--t-mittel), transform var(--t-mittel) var(--kurve); }
.zielgruppe:hover { box-shadow: var(--s-2); transform: translateY(-2px); }
.zielgruppe:active { transform: scale(.99); }
.zielgruppe b { display: block; font: 600 1.3125rem/1.2 var(--f-titel); letter-spacing: -.012em; }
.zielgruppe small { display: block; margin-top: 4px; font-size: var(--t-klein); color: var(--tinte-2); }
.zielgruppe > .icon { color: var(--tinte-3); transition: transform var(--t-kurz); }
.zielgruppe:hover > .icon { transform: translateX(3px); }

.beispiele { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 980px) { .beispiele { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.bsp { display: grid; gap: 20px; align-content: start; padding: clamp(22px, 2.6vw, 28px); border-radius: var(--r-xl); background: var(--flaeche); box-shadow: var(--s-1); }
.bsp h3 { font-size: 1.625rem; line-height: 1.1; letter-spacing: -.018em; }
.bsp__fakten { margin-top: 6px; font-size: var(--t-klein); color: var(--tinte-2); }
.raster--mini { gap: 5px; }
.raster--mini .tuer { padding: 0; place-content: center; animation: none; box-shadow: inset 0 0 0 1px rgba(42, 33, 25, .09); }
.raster--mini .tuer--hoehepunkt, .raster--mini .tuer--gutschein { box-shadow: none; }
.raster--mini .tuer__nr { padding-top: 10%; font-size: .8125rem; }
.bsp__liste { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.bsp__liste li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center; font-size: var(--t-klein); line-height: 1.35; }
.bsp__nr { width: 34px; height: 40px; display: grid; place-items: center; padding-top: 4px; border-radius: 17px 17px 7px 7px; background: var(--grund);
  font: 600 .9375rem/1 var(--f-titel); font-variant-numeric: lining-nums; }
.bsp__nr--gut { background: var(--akzent-zart); color: var(--akzent); }
.bsp__nr--hoch { background: var(--honig); }
.bsp__fuss { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--linie); }
.bsp__fuss .preis { font: 600 1.5rem/1 var(--f-titel); letter-spacing: -.02em; }
.pfeillink { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--akzent); font-weight: 600; text-decoration: none; }
.pfeillink .icon { width: 18px; height: 18px; transition: transform var(--t-kurz); }
.pfeillink:hover .icon { transform: translateX(3px); }

.zweispaltig { display: grid; gap: 36px; }
@media (min-width: 980px) { .zweispaltig { grid-template-columns: .85fr 1.15fr; gap: 88px; align-items: start; }
  .zweispaltig > .abschnittkopf { position: sticky; top: 108px; margin-bottom: 0; } }
.regeln { display: grid; margin: 0; padding: 0; list-style: none; }
.regeln li { display: grid; grid-template-columns: 32px 1fr; gap: 18px; padding: 24px 0; border-top: 1px solid var(--linie); }
.regeln li:last-child { border-bottom: 1px solid var(--linie); }
.haken-rund { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--akzent-zart); color: var(--akzent); }
.haken-rund .icon { width: 17px; height: 17px; stroke-width: 2.6; }
.regeln b { display: block; margin-bottom: 4px; font: 600 1.25rem/1.3 var(--f-titel); letter-spacing: -.01em; }
.regeln p { color: var(--tinte-2); }

.sets { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 900px) { .sets { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.set { display: grid; grid-template-rows: auto auto 1fr auto; gap: 14px; padding: clamp(22px, 2.6vw, 28px); border-radius: var(--r-xl); background: var(--flaeche); box-shadow: var(--s-1); }
.set__kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.set h3 { font-size: 1.375rem; line-height: 1.2; letter-spacing: -.012em; }
.set > p { font-size: var(--t-klein); color: var(--tinte-2); }
.set ul { display: grid; gap: 8px; align-content: start; margin: 0; padding: 0; list-style: none; font-size: var(--t-klein); }
.set li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; }
.set li .icon { width: 17px; height: 17px; margin-top: 2px; color: var(--gut); stroke-width: 2.4; }
.set__kauf { display: grid; gap: 8px; justify-items: center; padding-top: 4px; }
.set__kauf .knopf { width: 100%; }
.set .preis { font: 600 1.25rem/1 var(--f-titel); }

.fragen { border-top: 1px solid var(--linie); }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary { display: flex; justify-content: space-between; align-items: center; gap: 18px; min-height: 68px; padding: 18px 0;
  font: 600 clamp(1.125rem, 1.05rem + .3vw, 1.25rem)/1.3 var(--f-titel); letter-spacing: -.008em; cursor: pointer; list-style: none; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary .icon { flex: none; color: var(--tinte-3); transition: transform var(--t-mittel) var(--kurve); }
.fragen details[open] summary .icon { transform: rotate(180deg); }
.fragen details p { max-width: 62ch; padding: 0 44px 24px 0; color: var(--tinte-2); }
.fragen summary:focus-visible { outline: 3px solid var(--akzent); outline-offset: 4px; border-radius: 6px; }

.band--dunkel { background: var(--tinte); color: #fff; }
.band--dunkel .inhalt { display: grid; justify-items: center; gap: 18px; text-align: center; }
.band--dunkel h2 { font-size: clamp(2.15rem, 1.4rem + 2.9vw, 3.625rem); line-height: 1.03; letter-spacing: -.03em; color: #fff; }
.band--dunkel p { max-width: 36ch; font-size: 1.125rem; color: rgba(255, 255, 255, .74); }
.band--dunkel .knopf { margin-top: 10px; min-width: 260px; }
.cta-tuer { width: 46px; height: 56px; margin-bottom: 6px; }

/* ---------- Illustrationen ---------- */
/* Ränder laufen weich in den Hintergrund aus (Maske) – keine sichtbaren Bildkanten, egal ob Papier- oder weißes Band. */
.illu { display: block; }
.illu img { display: block; width: 100%; height: auto;
  -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 58%, transparent 100%);
          mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 58%, transparent 100%); }
.illu--band { max-width: 760px; margin: 0 auto clamp(20px, 3vw, 36px); }
.illu--seite { max-width: 420px; margin-bottom: 12px; }
@media (min-width: 980px) { .kalender-kopf { display: grid; grid-template-columns: 1fr 380px; column-gap: 56px; }
  .kalender-kopf .illu--seite { grid-column: 2; grid-row: 1; align-self: end; margin: 0; }
  .kalender-kopf .abschnittkopf { grid-column: 1; grid-row: 1; }
  .kalender-kopf .sets { grid-column: 1 / -1; } }
.illu--artikel { margin: 0 0 20px; }

/* ---------- Ideen-Seiten ---------- */
.alterswahl { padding-bottom: 0; }
.alter-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 700px) { .alter-raster { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .alter-raster { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
.alter-kachel { display: grid; justify-items: center; gap: 2px; padding: 14px 4px 12px; border-radius: 28px 28px 12px 12px; background: var(--grund);
  color: var(--tinte); text-decoration: none; transition: background-color var(--t-kurz), transform var(--t-kurz) var(--kurve); }
.alter-kachel:hover { background: var(--akzent-zart); transform: translateY(-2px); }
.alter-kachel b { font: 600 1.625rem/1 var(--f-titel); font-variant-numeric: lining-nums; }
.alter-kachel span { font-size: var(--t-mini); color: var(--tinte-2); }
.held--klein { padding-bottom: clamp(48px, 7vw, 96px); }
.held--klein h1 { font-size: clamp(2.375rem, 1.5rem + 3.6vw, 4.25rem); }
.ideen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.idee, .bsp, .set, .gutscheine li { min-width: 0; overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }
@media (min-width: 700px) { .ideen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1040px) { .ideen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.idee { display: grid; grid-template-rows: auto auto 1fr auto; gap: 6px; padding: 20px; border-radius: var(--r-xl); background: var(--grund); }
.idee__kat { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-mini); color: var(--tinte-2); }
.idee__kat .icon { width: 15px; height: 15px; }
.idee b { font: 600 1.1875rem/1.25 var(--f-titel); letter-spacing: -.008em; }
.idee p { font-size: var(--t-klein); color: var(--tinte-2); }
.idee__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 6px; }
.ideen__mehr { margin-top: 24px; color: var(--tinte-2); }
.gutscheine { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .gutscheine { grid-template-columns: 1fr 1fr; } }
.gutscheine li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 18px 20px; border-radius: var(--r-l);
  background: var(--flaeche); box-shadow: var(--s-1); font: 500 1.125rem/1.35 var(--f-titel); }
.gutscheine .icon { color: var(--akzent); }
.weitere { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px; }

/* ---------- Fuß ---------- */
.sfuss { padding: 56px 0 calc(36px + env(safe-area-inset-bottom)); }
.sfuss__zeile { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--linie); }
@media (min-width: 980px) { .sfuss__zeile { grid-template-columns: minmax(240px, 1fr) minmax(0, 2.6fr); gap: 48px; } }
.sfuss .marke { padding: 0; }
.sfuss__marke p { max-width: 30ch; margin-top: 8px; font-size: var(--t-klein); color: var(--tinte-2); hyphens: manual; }
.sfuss__spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
@media (min-width: 700px) { .sfuss__spalten { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sfuss__spalten div { display: grid; align-content: start; }
.sfuss__spalten b { margin-bottom: 4px; font-size: var(--t-mini); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-2); }
.sfuss nav a { display: flex; align-items: center; min-height: 44px; color: var(--tinte); font-size: var(--t-klein); text-decoration: none; overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }   /* 200 % Schrift auf 320 px: lange Wörter umbrechen (16.10.) */
.sfuss nav a:hover { color: var(--akzent); }
.sfuss__klein { display: grid; gap: 8px; padding-top: 22px; font-size: var(--t-mini); color: var(--tinte-2); }

/* ---------- Rechtliches ---------- */
.dokument { padding: clamp(40px, 6vw, 80px) 0 clamp(64px, 8vw, 104px); }
.dokument h1 { margin-bottom: 10px; font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.375rem); line-height: 1.04; letter-spacing: -.03em; }
.dokument .stand { margin-bottom: 32px; color: var(--tinte-2); }
.dokument h2 { margin: 42px 0 10px; font-size: 1.375rem; line-height: 1.25; letter-spacing: -.012em; }
.dokument, .dokument .inhalt { min-width: 0; }
.dokument h2, .dokument h3, .dokument p, .dokument li, .dokument address { overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }

.dokument p, .dokument li { max-width: 68ch; }
.dokument p + p { margin-top: 12px; }
.dokument ul { display: grid; gap: 8px; margin: 12px 0 0; padding-left: 22px; }
.dokument address { font-style: normal; line-height: 1.6; }
.kurzgesagt { display: grid; gap: 10px; padding: 22px 24px; border-radius: var(--r-xl); background: var(--flaeche); box-shadow: var(--s-1); }
.kurzgesagt ul { margin: 0; padding: 0; list-style: none; }
.kurzgesagt li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; }
.kurzgesagt li .icon { width: 18px; height: 18px; margin-top: 3px; color: var(--gut); stroke-width: 2.4; }
.platzhalter { padding: 1px 7px; border-radius: 6px; background: var(--akzent-zart); color: var(--akzent); font-weight: 600; }

/* ---------- Ratgeber ---------- */
.artikel h2 { margin-top: 48px; }
.artikel h3 { margin: 30px 0 4px; font-size: 1.1875rem; line-height: 1.3; }
.artikel table { width: 100%; margin: 18px 0 8px; border-collapse: collapse; font-size: var(--t-klein); }
.artikel th, .artikel td { padding: 12px 6px; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; }
.artikel th { font-weight: 600; font-size: var(--t-mini); line-height: 1.3; color: var(--tinte-2); hyphens: manual; }
.artikel th:not(:first-child) { white-space: normal !important; }
.artikel td:first-child { padding-left: 0; }
.nw { white-space: nowrap; }
.artikel td:not(:first-child), .artikel th:not(:first-child) { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.artikel .tabelle { overflow-x: auto; max-width: 100%; }
.artikel ol, .artikel ul { display: grid; gap: 10px; margin: 14px 0 0; padding-left: 22px; }
.artikel li b { font-weight: 600; }
.artikel .klein { margin-top: 8px; font-size: var(--t-mini); color: var(--tinte-2); }
.artikel__cta { display: grid; gap: 10px; justify-items: start; margin-top: 56px; padding: 28px; border-radius: var(--r-xl); background: var(--flaeche); box-shadow: var(--s-1); }
.artikel__cta b { font: 600 1.5rem/1.2 var(--f-titel); letter-spacing: -.015em; }
.artikel__cta p { color: var(--tinte-2); }

/* ---------- 404 ---------- */
.fehlerseite { min-height: 66dvh; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 64px var(--rand); text-align: center; }
.fehlerseite__tuer { position: relative; width: 112px; height: 136px; display: grid; place-items: center; padding-top: 22px; border-radius: 56px 56px 14px 14px;
  background: var(--flaeche); box-shadow: var(--s-2); font: 600 2.75rem/1 var(--f-titel); color: var(--tinte-3); }
.fehlerseite h1 { margin-top: 12px; font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); letter-spacing: -.025em; }
.fehlerseite p { max-width: 34ch; color: var(--tinte-2); }
.fehlerseite .knopf { margin-top: 12px; }

@media print { .skopf, .sfuss nav, .held__knoepfe { display: none; } .band { padding: 24px 0; } }

/* Ratgeber (11.10.): echter Beispiel-Plan, Text-Tabellen, Weiterlesen, Übersicht */
.artikel-plan { display: grid; gap: 16px; margin: 20px 0 8px; padding: 20px; border-radius: var(--r-xl); background: var(--flaeche); box-shadow: var(--s-1); }
.artikel-plan__kopf { display: grid; gap: 2px; }
.artikel-plan__kopf b { font: 600 1.1875rem/1.25 var(--f-titel); letter-spacing: -.01em; }
.artikel-plan__kopf span { font-size: var(--t-mini); color: var(--tinte-2); }
.artikel .artikel-plan ol.bsp__liste { margin: 0; padding: 0; gap: 10px; }
@media (min-width: 640px) { .artikel .artikel-plan ol.bsp__liste { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(12, auto); grid-auto-flow: column; column-gap: 24px; } }
.artikel-plan__fuss { margin: 0; font-size: var(--t-klein); color: var(--tinte-2); }
.artikel .tabelle--text th, .artikel .tabelle--text td { text-align: left !important; white-space: normal !important; }
.artikel .tabelle--text .z { text-align: right !important; white-space: nowrap !important; font-variant-numeric: tabular-nums; }
.artikel .kurzgesagt { margin: 0 0 8px; }
.artikel .fragen { margin-top: 12px; }
.artikel .fragen details p { padding-right: 0; }
.artikel__mehr { display: grid; gap: 10px; margin-top: 36px; }
.artikel__mehr b { font-size: var(--t-mini); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-2); }
.artikel .artikel__mehr ul { margin: 0; padding: 0; list-style: none; gap: 6px; }
.artikel .ratgeber-liste { margin: 8px 0 0; padding: 0; list-style: none; gap: 12px; }
.ratgeber-liste a { display: grid; grid-template-columns: 1fr 22px; gap: 4px 14px; align-items: center; padding: 18px 20px; border-radius: var(--r-xl);
  background: var(--flaeche); box-shadow: var(--s-1); color: inherit; text-decoration: none; }
.ratgeber-liste b { font: 600 1.125rem/1.3 var(--f-titel); letter-spacing: -.01em; }
.ratgeber-liste span { grid-column: 1; font-size: var(--t-klein); color: var(--tinte-2); }
.ratgeber-liste .icon { grid-column: 2; grid-row: 1 / span 2; color: var(--tinte-3); }
.ratgeber-liste a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.ratgeber-liste a:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; }
.artikel .zusatz { color: var(--tinte-2); }

/* Ratgeber-Karten (Startseite, Ideen-Seiten) */
.ratgeber-karten { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .ratgeber-karten { grid-template-columns: repeat(3, 1fr); } }
.ratgeber-karten a { display: grid; grid-template-columns: 1fr 22px; gap: 6px 12px; height: 100%; padding: 20px; border-radius: var(--r-xl);
  background: var(--flaeche); box-shadow: var(--s-1); color: inherit; text-decoration: none; }
.ratgeber-karten b { font: 600 1.125rem/1.3 var(--f-titel); letter-spacing: -.01em; }
.ratgeber-karten span { grid-column: 1; font-size: var(--t-klein); color: var(--tinte-2); }
.ratgeber-karten .icon { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--tinte-3); }
.ratgeber-karten a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.ratgeber-karten a:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; }
.ratgeber-alle { margin-top: 16px; }

/* Kalender zum Befüllen: Vergleich der Arten als Karten (eine Tabelle war auf dem Handy zu gequetscht – Sichtprüfung 16.10.) */
.arten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0 0 14px; padding: 0; list-style: none; }
@media (min-width: 640px) { .arten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .arten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.art a { display: grid; gap: 6px; height: 100%; padding: 18px 20px; border-radius: var(--r-xl); background: var(--flaeche); box-shadow: var(--s-1); color: var(--tinte); text-decoration: none; min-width: 0; overflow-wrap: anywhere; }
.art a:hover { box-shadow: var(--s-1), 0 0 0 2px rgba(31, 61, 47, .25); }
.art__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.art__kopf b { font: 600 1.1875rem/1.25 var(--f-titel); letter-spacing: -.008em; min-width: 0; }
.art__kopf .preis { flex: none; white-space: nowrap; font: 600 1.0625rem/1.25 var(--f-titel); }
.art__gut { font-size: var(--t-klein); color: var(--tinte-2); }
.art__mehr { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-mini); font-weight: 600; color: var(--gut); }
.art__mehr .icon { width: 16px; height: 16px; }

/* Alters-Seiten: Ideen für Mädchen / für Jungen nebeneinander (ab 900 px), darunter Planer-Knopf mit Vorauswahl */
.geschlecht-spalten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
@media (min-width: 900px) { .geschlecht-spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }
.geschlecht-spalte { display: grid; gap: 14px; align-content: start; min-width: 0; padding: clamp(18px, 2.4vw, 24px); border-radius: var(--r-xl); background: var(--flaeche); box-shadow: var(--s-1); }
.geschlecht-spalte .idee { background: var(--grund); }
.geschlecht-spalte h3 { font: 600 1.375rem/1.2 var(--f-titel); letter-spacing: -.012em; }
.geschlecht-spalte > .knopf { justify-self: start; }
@media (max-width: 599px) { .geschlecht-spalte > .knopf { justify-self: stretch; } }
.ideen--kompakt { grid-template-columns: minmax(0, 1fr) !important; }
@media (min-width: 600px) and (max-width: 899px) { .ideen--kompakt { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* ---------- Kontaktformular (/kontakt/, 16.10.) – nutzt .feld/.eingabe/.knopf aus app.css ---------- */
.kontakt { display: grid; gap: 22px; margin-top: 8px; padding: clamp(20px, 4vw, 32px); border-radius: var(--r-xl); background: var(--flaeche); box-shadow: var(--s-1); min-width: 0; }
.kontakt .feld { min-width: 0; }
.kontakt .eingabe { min-width: 0; }
.kontakt .feld__hilfe { display: block; }   /* app.css blendet Hilfetexte auf kleinen Handys für den Planer aus – hier immer zeigen */
.kontakt__text { height: auto; min-height: 168px; padding: 14px 16px; line-height: 1.5; resize: vertical; }
.kontakt__hinweis { font-size: var(--t-klein); color: var(--tinte-2); }
.kontakt__senden { justify-self: start; }
@media (max-width: 599px) { .kontakt__senden { justify-self: stretch; } }
/* Falle für Programme: für Menschen weder sichtbar noch per Tastatur erreichbar */
.kontakt__falle { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* Meldung nach dem Absenden (Server leitet auf #gesendet bzw. #fehler zurück) – ohne JavaScript per :target */
.kontakt__anker { display: none; }
.kontakt__meldung { display: none; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; margin: 0 0 22px; padding: 16px 18px; border-radius: var(--r-l); }
#gesendet:target ~ .kontakt__meldung--ok, #fehler:target ~ .kontakt__meldung--fehler { display: grid; }
.kontakt__meldung .icon { width: 22px; height: 22px; margin-top: 1px; }
.kontakt__meldung b { display: block; margin-bottom: 2px; }
.kontakt__meldung span { display: block; overflow-wrap: anywhere; }
.kontakt__meldung--ok { background: var(--gut-zart); color: var(--tinte); }
.kontakt__meldung--ok .icon { color: var(--gut); }
.kontakt__meldung--fehler { background: var(--fehler-zart); color: var(--tinte); }
.kontakt__meldung--fehler .icon { color: var(--fehler); }
#gesendet:target ~ .kontakt { display: none; }