/* Schwungstunden, Fassung 3 (Auftrag 222, 18.10.2026), nach Richard Grimms Konzept vom 18.10.2026; Fassung 3b mit der
   Geschichte in Bildern, der Fläche Aus StundenFreund wird Schwungstunden und den Punkten vom alten Flyer.
   Schlicht: Sand als Grund, Tinte als Schrift, je Angebot eine Akzentfarbe aus der Farbkarte (FARBKARTE.md).
   Grundschrift 18 Pixel (html 112,5 Prozent, also 1rem = 18px); nichts im Fließtext darunter.
   Knöpfe mindestens 48 Pixel hoch, kein Querscrollen bei 375 Pixeln, kein Inline-Stil, Symbole nie ohne Wort.
   Der Block FARBEN wird von werkzeug\bauen3.py aus farben.json geschrieben; alles andere hier ist von Hand. */

@font-face{font-family:"Fraunces";src:url("schriften/fraunces-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("schriften/inter-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

/* FARBEN:START  von werkzeug\bauen3.py aus farben.json geschrieben, hier nicht von Hand aendern */
:root{
  --grund:#F4F0E8;
  --flaeche:#FFFFFF;
  --tinte:#1E2226;
  --tinte2:#4A4F55;
  --rand:#7D766C;
  --zart:#DDD5C7;
  --himmel:#E6EAEA;
  --boden:#E8DFCF;
  --huegel-fern:#CDD2C6;
  --huegel-nah:#B4BEA6;
  --weg:#D8C5A3;
  --stein:#B9B3A8;
}
.st--lesen{--st-haupt:#28501A;--st-satt:#4F8A2B;--st-dunkel:#2F5A1E;--st-hell:#E5EDDA;--st-knopf:#28501A;--st-knopftext:#FFFFFF}
.st--unterwegs{--st-haupt:#094B59;--st-satt:#13808F;--st-dunkel:#0B5566;--st-hell:#DDEEF0;--st-knopf:#094B59;--st-knopftext:#FFFFFF}
.st--mitnehmen{--st-haupt:#1F3A8A;--st-satt:#3456B8;--st-dunkel:#1F3A8A;--st-hell:#E3E8F7;--st-knopf:#1F3A8A;--st-knopftext:#FFFFFF}
.st--zu-zweit{--st-haupt:#7A2C1B;--st-satt:#C4573A;--st-dunkel:#8A3320;--st-hell:#F6E0D7;--st-knopf:#7A2C1B;--st-knopftext:#FFFFFF}
.st--erledigungen{--st-haupt:#4A2366;--st-satt:#7E4BA3;--st-dunkel:#5A2D7A;--st-hell:#EEE5F5;--st-knopf:#4A2366;--st-knopftext:#FFFFFF}
.st--kochen{--st-haupt:#174A3A;--st-satt:#2E8B64;--st-dunkel:#1F5C46;--st-hell:#DDF0E6;--st-knopf:#174A3A;--st-knopftext:#FFFFFF}
.st--zusammen{--st-haupt:#5C4300;--st-satt:#F2B705;--st-dunkel:#B98600;--st-hell:#FBEDC2;--st-knopf:#F2B705;--st-knopftext:#1E2226}
.st--zuhause{--st-haupt:#5E3A1A;--st-satt:#B07A45;--st-dunkel:#7A4E28;--st-hell:#EFE3D4;--st-knopf:#5E3A1A;--st-knopftext:#FFFFFF}
.st--beratung{--st-haupt:#094B59;--st-satt:#13808F;--st-dunkel:#0B5566;--st-hell:#DDEEF0;--st-knopf:#094B59;--st-knopftext:#FFFFFF}
.st--thema-musik{--st-haupt:#7A1F2E;--st-satt:#E07A1F;--st-dunkel:#8E2436;--st-hell:#F7E1D3;--st-knopf:#7A1F2E;--st-knopftext:#FFFFFF}
.st--thema-natur{--st-haupt:#28501A;--st-satt:#4F8A2B;--st-dunkel:#7A5230;--st-hell:#E5EDDA;--st-knopf:#28501A;--st-knopftext:#FFFFFF}
/* FARBEN:ENDE */

/* TAKT:START  von werkzeug\bauen3.py aus konzept.json (geschichte, takt_sekunden) geschrieben, hier nicht von Hand aendern */
:root{--geschichte-takt:12s}
/* TAKT:ENDE */

:root{
  --beraten:#094B59;
  --hinweis:#FCEFC4;
  --rund:16px;
  --kopf-schrift:"Fraunces", Georgia, "Times New Roman", serif;
  --lauf-schrift:"Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --schatten:0 2px 0 var(--zart), 0 12px 28px rgba(30,34,38,.10);
  --st-haupt:var(--tinte); --st-satt:var(--rand); --st-hell:var(--flaeche); --st-knopf:var(--tinte); --st-knopftext:#FFFFFF;
}

*,*::before,*::after{box-sizing:border-box}
html{font-size:112.5%;-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* Auftrag 229: overflow-x:hidden am body gestrichen; es hätte bei starkem Zoom überstehenden Inhalt unerreichbar versteckt
   (bei 320 Pixeln war das der Menüknopf). Nachgemessen mit werkzeug\pruefen3-barrierefreiheit.py: nichts steht über. */
body{margin:0;background:var(--grund);color:var(--tinte);font:400 1rem/1.6 var(--lauf-schrift);padding-bottom:96px;overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:2px}
a:hover{text-decoration-thickness:3px}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:4px solid var(--tinte);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--kopf-schrift);font-weight:600;line-height:1.2;margin:0 0 .5em;color:var(--tinte)}
h1{font-size:clamp(1.75rem, 1.35rem + 2vw, 2.6rem)}
h2{font-size:clamp(1.35rem, 1.15rem + 1vw, 1.9rem)}
h3{font-size:1.15rem}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em}
.wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 16px}
@media (min-width:768px){.wrap{padding:0 32px}}
.vh{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprung{position:absolute;left:12px;top:-200px;z-index:100;background:var(--tinte);color:var(--flaeche);padding:.6em 1em;border-radius:12px;font-weight:700}
.sprung:focus{top:12px}
.ico{width:1.2em;height:1.2em;flex:none}

/* Hinweisband im Muster (225b): Preise sind Vorschläge, Rechtsseiten Entwurf */
.vorschau-hinweis{margin:0;padding:10px 16px;background:var(--hinweis);color:var(--tinte);border-bottom:2px solid var(--zart);font-weight:600;font-size:1rem;line-height:1.4;text-align:center}

/* Schutz: das Attribut hidden schlägt jede Klasse, die display setzt (website-regeln, Auftrag 122) */
[hidden]{display:none !important}

/* Fläche ganz oben: Aus StundenFreund wird Schwungstunden (Fassung 3b). Farbe aus der Farbkarte, Familie Musik
   (warmes Orange und Weinrot, Block FARBEN: .st--thema-musik). Schrift mindestens 20 Pixel. Zugeklappt nur die Leiste. */
.umbenannt{background:var(--st-hell);color:var(--tinte);border-bottom:4px solid var(--st-satt)}
.umbenannt__leiste{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;min-height:56px;padding:6px 0}
.umbenannt__satz{margin:0;font-size:1.15rem;line-height:1.35;font-weight:600}
.umbenannt__link{color:var(--st-haupt);font-weight:700;white-space:nowrap}
.umbenannt__auf{display:none;align-items:center;gap:6px;min-height:48px;margin-left:auto;padding:0 16px;border:2px solid var(--st-haupt);border-radius:999px;background:var(--flaeche);color:var(--st-haupt);font:700 1.15rem var(--lauf-schrift);cursor:pointer}
.js .umbenannt__auf{display:inline-flex}
@media (max-width:599px){.js .umbenannt__auf{display:none}}
.umbenannt__voll{padding:22px 0 24px}
/* Auftrag 229: der Titel ist ein p (kein h2 vor dem h1 der Seite), sieht aber aus wie vorher */
.umbenannt__titel{margin:0 0 .4em;color:var(--st-haupt);font-family:var(--kopf-schrift);font-weight:600;line-height:1.2;font-size:clamp(1.45rem, 1.2rem + 1.2vw, 2rem)}
.umbenannt__text{max-width:44em;margin:0 0 16px;font-size:1.15rem;line-height:1.5}
.umbenannt__knoepfe{display:flex;flex-wrap:wrap;gap:12px}
.umbenannt .knopf{font-size:1.15rem}
.umbenannt__ok{display:none}
.js .umbenannt__ok{display:inline-flex}
@media (min-width:960px){
  .umbenannt__voll{display:grid;grid-template-columns:1fr auto;column-gap:40px;align-items:center}
  .umbenannt__titel,.umbenannt__text{grid-column:1}
  .umbenannt__text{margin:0}
  .umbenannt__knoepfe{grid-column:2;grid-row:1 / 3;flex-direction:column}
}

/* Kopf mit Marke und Menü */
.kopf{background:var(--flaeche);border-bottom:2px solid var(--zart)}
.kopf__innen{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:76px;position:relative}
.marke{display:flex;align-items:center;min-height:48px;text-decoration:none;color:var(--tinte)}
.logo{width:200px;height:auto}
.logo__wort{font-family:var(--kopf-schrift);font-weight:650;font-size:64px;fill:var(--tinte)}
.menueknopf{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 18px;border:2px solid var(--tinte);border-radius:999px;background:var(--flaeche);color:var(--tinte);font:600 1rem var(--lauf-schrift);cursor:pointer}
.menueknopf__striche{display:inline-flex;flex-direction:column;gap:4px}
.menueknopf__striche span{display:block;width:18px;height:3px;border-radius:2px;background:currentColor}
.menue{display:none;list-style:none;margin:0;padding:8px 0;position:absolute;right:0;top:calc(100% + 2px);z-index:50;min-width:240px;background:var(--flaeche);border:2px solid var(--zart);border-radius:var(--rund);box-shadow:var(--schatten)}
.menue--offen{display:block}
.menue a{display:flex;align-items:center;min-height:56px;padding:0 22px;font-weight:600;text-decoration:none}
.menue a:hover,.menue a[aria-current="page"]{text-decoration:underline}
/* Auftrag 229: bei 320 Pixeln (400 Prozent Zoom) ragte der Menüknopf 25 Pixel über den Rand; Marke und Knopf rücken
   zusammen */
@media (max-width:359px){.logo{width:150px}.menueknopf{gap:8px;padding:0 12px}}
@media (min-width:960px){
  .logo{width:230px}
  .menueknopf{display:none}
  .menue{display:flex;position:static;min-width:0;padding:0;border:0;box-shadow:none;background:none;gap:2px}
  .menue a{min-height:52px;padding:0 14px}
}

/* Knöpfe */
.knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 0}
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;max-width:100%;padding:10px 24px;border:2px solid transparent;border-radius:999px;font:700 1rem/1.25 var(--lauf-schrift);text-align:center;text-decoration:none;cursor:pointer}
.knopf:hover{text-decoration:underline}
.knopf--voll{background:var(--beraten);color:#FFFFFF}
.knopf--hell{background:var(--flaeche);color:var(--beraten);border-color:var(--beraten)}
.knopf--station{background:var(--st-knopf);color:var(--st-knopftext)}
.knopf--beraten{background:var(--flaeche);color:var(--beraten);border-color:var(--beraten)}
.knopf--rand{background:var(--flaeche);color:var(--tinte);border-color:var(--tinte)}
.knopf--gross{min-height:64px;font-size:1.15rem;padding:12px 28px}

/* Griff "Beraten lassen", fest unten rechts auf jeder Seite */
.griff{position:fixed;right:16px;bottom:16px;z-index:60;display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 22px;border-radius:999px;background:var(--beraten);color:#FFFFFF;font-weight:700;text-decoration:none;box-shadow:0 6px 18px rgba(9,75,89,.35)}
.griff:hover{text-decoration:underline}
/* Startseite: solange die Geschichte und die zwei Knöpfe zu sehen sind, tritt der Griff zurück (muster3.js), damit er
   Weiter und Für mich nicht verdeckt */
.griff--weg{visibility:hidden;opacity:0}
.griff{transition:opacity .3s ease, visibility .3s}

/* Hero (Fassung 3b): oben fest Marke, Richard Grimm, Slogan; darunter die Geschichte in Bildern, von Hand weitergeschaltet;
   direkt darunter die zwei Knöpfe Für mich und Für meine Eltern. Die kleine Überschrift steht im Bild auf einer
   Sandfläche (Tinte darauf mindestens 7:1, auch über dunklem Bild), der Satz steht unter dem Bild.
   Ohne Skript (keine Klasse js am html) stehen alle Bilder untereinander. */
.hero{padding:18px 0 8px;background:var(--grund)}
.hero__kopf{margin:0 0 14px}
.hero__marke{font-family:var(--kopf-schrift);font-weight:650;font-size:clamp(1.9rem, 1.15rem + 3.4vw, 3rem);line-height:1.05;margin:0 0 .15em;overflow-wrap:normal;hyphens:none}
.hero__wer{margin:0;font-size:1rem;font-weight:600;color:var(--tinte2)}
.hero__slogan{margin:.1em 0 0;font-family:var(--kopf-schrift);font-size:clamp(1.25rem, 1.1rem + .9vw, 1.7rem);line-height:1.25}
@media (min-width:960px){
  .hero{padding-top:20px}
  .hero__kopf{display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px 32px}
  .hero__marke{margin:0;font-size:2.6rem}
  .hero__slogan{font-size:1.55rem}
  .hero__zeilen{padding-bottom:4px}
}

.geschichte{position:relative}
.geschichte__liste{list-style:none;margin:0;padding:0;display:grid;gap:28px}
.geschichte__figur{margin:0;display:flex;flex-direction:column;height:100%}
/* Bildzone (Fassung 3d, Beschnitt): Bild, Fortschrittsbalken und Überschrift in einer Hülle. Am Handy (unter 600 Pixel)
   löst sich die Hülle auf: Bild, Balken, darunter die Überschrift als Zeile, dann der Satz; so liegt nie Schrift auf
   einem Gesicht. Ab 600 Pixel liegt die Überschrift als Sandfläche oben links im Bild. */
.geschichte__zone{display:contents}
/* Fortschrittsbalken unter dem Bild (Fassung 3c): zeigt die Sekunden bis zum nächsten Bild. Sichtbar nur, solange die
   Automatik läuft (Klasse geschichte--auto, gesetzt von muster3.js); bei Bewegung reduzieren und ohne Skript nie. */
.geschichte__balken{display:none}
.js .geschichte__balken{display:block;height:6px;margin:0 -16px;background:var(--zart);overflow:hidden;visibility:hidden}
.geschichte--auto .geschichte__balken{visibility:visible}
.geschichte__balken-fuell{display:block;width:100%;height:100%;background:var(--tinte2);transform:scaleX(0);transform-origin:0 50%}
.geschichte--auto .geschichte__bild.ist-an .geschichte__balken-fuell{animation:geschichte-balken var(--geschichte-takt) linear forwards}
.geschichte--halt .geschichte__balken-fuell{animation-play-state:paused}
@keyframes geschichte-balken{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* Das Bild zeigt sich immer ganz: Rahmen und Bilddatei sind beide 16:9, kein Beschnitt (Fassung 3d). */
.geschichte__rahmen{position:relative;aspect-ratio:16/9;overflow:hidden;margin:0 -16px;background:var(--zart)}
.geschichte__rahmen img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.geschichte__titel{margin:0;padding:10px 0 0;color:var(--tinte);font-family:var(--kopf-schrift);font-weight:650;font-size:1.4rem;line-height:1.2}
.geschichte__satz{flex:1;margin:0;padding:4px 0 0;background:var(--grund);font-size:1.2rem;line-height:1.45;text-wrap:balance}
@media (min-width:600px){
  .geschichte__zone{display:block;position:relative;container-type:inline-size;margin:0 -16px}
  .geschichte__rahmen{margin:0}
  .js .geschichte__balken{margin:0}
  /* Überschrift im Bild: oben links, fester Abstand, eine Zeile, Größe folgt der Bildbreite (höchstens 45 Prozent davon,
     Bildbreite ab 524 Pixel), so reicht sie nie in das rechte Drittel, wo die Menschen stehen. Tinte auf Sand über 7:1. */
  .geschichte__bild:not(.geschichte__bild--titel-unten) .geschichte__titel{position:absolute;left:14px;top:14px;padding:5px 14px 7px;border-radius:12px;background:rgba(244,240,232,.92);white-space:nowrap;box-shadow:0 2px 10px rgba(30,34,38,.18);font-size:1.3rem;font-size:clamp(1.05rem, 3.55cqw, 2rem)}
}
@media (min-width:600px) and (max-width:767px){
  .geschichte__bild--titel-unten .geschichte__titel{padding-left:16px;padding-right:16px}
}
@media (min-width:768px){
  .geschichte__zone{margin:0}
  .js .geschichte__balken{margin:6px 0 0;border-radius:3px}
  .geschichte__rahmen{border-radius:var(--rund)}
}

/* Mit Skript: immer ein Bild, die übrigen liegen unsichtbar in derselben Zelle (so springt die Höhe nicht).
   Bilder, die nicht dran sind, werden nicht angezeigt und darum auch nicht geladen (loading=lazy). */
.js .geschichte__liste{gap:0}
.js .geschichte__bild{grid-area:1 / 1;visibility:hidden}
.js .geschichte__bild img{display:none}
.js .geschichte__bild.ist-an,.js .geschichte__bild.war-an{visibility:visible}
.js .geschichte__bild.ist-an img,.js .geschichte__bild.war-an img{display:block}
.js .geschichte__bild.ist-an{z-index:2}
.js .geschichte__bild.war-an{z-index:1}
/* Fassung 3e: Es blendet nur das Bild über (Rahmen), nie die Überschrift und der Satz. Vorher blendete das ganze Bild ein,
   und während der 0,6 Sekunden lagen die Überschrift des alten und des neuen Bildes übereinander (am Handy unlesbar; blieb
   die Animation stehen, etwa im Stromsparmodus, blieb die Überschrift sogar ganz unsichtbar). Jetzt: keine Deckkraft 0 für
   Text, kein Fill-Modus, und Überschrift und Satz des alten Bildes verschwinden sofort. */
.geschichte--bewegt .geschichte__bild.ist-an .geschichte__rahmen{animation:geschichte-ein .6s ease}
.js .geschichte__bild.war-an .geschichte__titel,.js .geschichte__bild.war-an .geschichte__satz{visibility:hidden}
@keyframes geschichte-ein{from{opacity:0}to{opacity:1}}

.geschichte__steuer{display:none}
.js .geschichte__steuer{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:14px 0 0}
.geschichte__wo{order:-1;flex:1 0 100%;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.geschichte__gruppe{display:flex;align-items:center;gap:16px}
/* Pause-Knopf (Fassung 3c): klein, neben Weiter; Symbol und Wort wechseln mit aria-pressed */
.geschichte__pause{margin-left:auto;min-height:48px;padding:6px 16px;font-size:1rem;gap:8px}
.geschichte__pause .ico--play{display:none}
.geschichte__pause[aria-pressed="true"] .ico--pause{display:none}
.geschichte__pause[aria-pressed="true"] .ico--play{display:block}
.geschichte__stand{margin:0;font-weight:700;font-size:1.15rem;white-space:nowrap}
.geschichte__punkte{margin:0;display:flex;align-items:center;gap:8px}
.geschichte__punkt{display:block;width:14px;height:14px;border:2px solid var(--tinte);border-radius:7px;background:transparent;transition:width .3s ease}
.geschichte__punkt.ist-gesehen{background:var(--rand);border-color:var(--rand)}
.geschichte__punkt.ist-an{width:30px;background:var(--tinte);border-color:var(--tinte)}
.geschichte__zurueck,.geschichte__weiter,.geschichte__ende{min-height:56px;font-size:1.15rem}
.geschichte__weiter,.geschichte__ende{flex:1;white-space:nowrap}
@media (max-width:599px){.geschichte__ende{flex-basis:100%}}

/* Desktop ab 960 Pixel (Fassung 3d, Beschnitt): zwei Spalten. Links das ganze Bild in 16:9 (Breite 724 Pixel bei einer
   Inhaltsbreite von 1096, nie über 1100), darunter Balken und Satz. Rechts, 344 Pixel breit: Stand, Punkte, Pause,
   Zurück, Weiter und darunter die zwei Türen. So kommt bei 1280 x 800 alles ohne Scrollen ins Bild, ohne das Bild
   oben und unten zu beschneiden. Die Geschichte löst dafür ihre Hülle auf (display: contents), ihre Teile sitzen
   direkt im Raster der Hero-Hülle. Ohne Skript stehen die Bilder links untereinander, die Türen rechts oben. */
@media (min-width:960px){
  .hero > .wrap{display:grid;grid-template-columns:minmax(0, 1fr) 344px;grid-template-rows:auto auto 1fr;column-gap:28px;align-items:start}
  .hero__kopf{grid-column:1 / -1}
  .geschichte{display:contents}
  .geschichte__liste{grid-column:1;grid-row:2 / 4}
  .js .geschichte__satz{min-height:76px}
  .js .geschichte__steuer{grid-column:2;grid-row:2;margin:0}
  .geschichte__wo{justify-content:space-between}
  .geschichte__gruppe{flex-direction:column;align-items:flex-start;gap:6px}
  .geschichte__pause{margin-left:0}
  .geschichte__weiter{min-width:0}
}

/* Die zwei Türen direkt unter der Geschichte */
.hero__tueren{display:flex;flex-direction:column;gap:12px;margin:18px 0 0;padding-bottom:6px;scroll-margin:24px}
@media (min-width:600px){.hero__tueren{flex-direction:row;flex-wrap:wrap}.hero__tueren .knopf{min-width:240px}}
@media (min-width:960px){.hero__tueren{grid-column:2;grid-row:3;flex-direction:column;flex-wrap:nowrap;margin:36px 0 0;padding-bottom:0}.hero__tueren .knopf{min-width:0}}

/* Normalität direkt unter dem Hero */
.normal{padding:30px 0 6px}
.normal__text{max-width:40em;margin:0;font-size:1.1rem}
.normal__quelle{white-space:nowrap}

/* Angebotskacheln */
.kachelbereich{padding:38px 0 16px}
.kacheln{list-style:none;margin:0;padding:0;display:grid;gap:22px}
@media (min-width:760px){.kacheln{grid-template-columns:1fr 1fr;gap:28px}}
/* Auftrag 229: kein overflow:hidden mehr am Kasten (bei 200 Prozent Zoom würde sonst Text abgeschnitten), min-height
   statt height; die runden Ecken trägt jetzt das Bild selbst (innerer Radius: 16 minus Rand 2 waagerecht, minus 8 oben). */
.kachel{display:flex;flex-direction:column;min-height:100%;background:var(--flaeche);border:2px solid var(--zart);border-top:8px solid var(--st-satt);border-radius:var(--rund);box-shadow:var(--schatten);color:var(--tinte);text-decoration:none;transition:transform .2s ease}
.kachel:hover{transform:translateY(-3px)}
.kachel:hover .kachel__mehr{text-decoration-thickness:3px}
.kachel__bild{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--st-hell);border-radius:14px 14px 0 0 / 8px 8px 0 0}
.kachel__text{display:flex;flex-direction:column;flex:1;gap:10px;padding:18px 20px 22px}
.kachel__titel{font-family:var(--kopf-schrift);font-weight:650;font-size:1.45rem;line-height:1.2;color:var(--st-haupt)}
.kachel__satz{font-size:1rem}
.kachel__mehr{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:4px;font-weight:700;color:var(--st-haupt);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}
.kacheln--dezent{margin-top:26px}
@media (min-width:760px){.kacheln--dezent{grid-template-columns:1fr}}
.kachel--dezent{flex-direction:row;align-items:center;border-top-width:2px;border-left:8px solid var(--st-satt);box-shadow:none}
.kachel--dezent .kachel__bild{width:112px;flex:none;align-self:stretch;height:auto;border-radius:8px 0 0 8px / 14px 0 0 14px}
.kachel--dezent .kachel__text{padding:12px 16px;gap:4px}
.kachel--dezent .kachel__titel{font-size:1.15rem}
@media (min-width:760px){.kachel--dezent .kachel__bild{width:160px}.kachel--dezent .kachel__text{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:14px}.kachel--dezent .kachel__mehr{margin-top:0;margin-left:auto}}

/* Vorstellung mit Foto, das Videoskript zum Aufklappen */
.vorstellung{margin-top:30px;padding:40px 0 34px;background:var(--flaeche);border-top:2px solid var(--zart);border-bottom:2px solid var(--zart)}
.vorstellung__text{max-width:44em}
/* Das Bild als gezeichnetes Medaillon (Fassung 3b): klein, rund, breiter Sandrand, dünner Ring in der Farbe des Blocks
   (Terrakotta, wie Einzelstunde). Der erste Satz steht groß daneben, am Handy darunter. */
.vorstellung__kopf{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin:0 0 18px}
.vorstellung__medaillon{flex:none;width:120px;height:120px;object-fit:cover;object-position:50% 30%;border-radius:50%;border:8px solid var(--grund);box-shadow:0 0 0 3px var(--st-satt), 0 6px 16px rgba(30,34,38,.12);background:var(--grund)}
.vorstellung__satz{margin:0;max-width:24em;font-family:var(--kopf-schrift);font-size:1.25rem;line-height:1.35}
@media (min-width:700px){
  .vorstellung__kopf{flex-direction:row;align-items:center;gap:28px}
  .vorstellung__medaillon{width:180px;height:180px;border-width:12px}
}
.vorstellung__text .mehr{max-width:36em}

/* Aufklappen, wie auf allen Seiten */
.mehr{margin:0 0 1em;border:2px solid var(--zart);border-radius:var(--rund);background:var(--flaeche)}
.mehr summary{display:flex;align-items:center;gap:12px;min-height:56px;padding:6px 18px;font-weight:700;cursor:pointer;list-style:none}
.mehr summary::-webkit-details-marker{display:none}
.mehr summary::after{content:"";margin-left:auto;flex:none;width:12px;height:12px;margin-top:-6px;border-right:3px solid var(--tinte);border-bottom:3px solid var(--tinte);transform:rotate(45deg)}
.mehr[open] summary::after{transform:rotate(225deg);margin-top:6px}
.mehr__inhalt{padding:0 18px 8px}
.mehr p{margin:0 0 1em}
.mehr > p{padding:0 18px}

/* Ganz unten groß: Telefon, Erfurt, Mail */
.anruf{padding:46px 0 36px;text-align:center}
.anruf__titel{margin:0 0 .3em}
.anruf__nummer{margin:0}
.anruf__nummer a{display:inline-flex;align-items:center;gap:14px;min-height:64px;padding:4px 12px;font-family:var(--kopf-schrift);font-weight:700;font-size:clamp(2rem, 1.3rem + 3.4vw, 3.3rem);line-height:1.1;color:var(--beraten);text-decoration:none}
.anruf__nummer a:hover{text-decoration:underline}
.anruf__nummer .ico{width:.9em;height:.9em}
.anruf__ort{margin:.15em 0 .5em;font-size:1.35rem;font-weight:600}
.anruf__mail{margin:0}
.anruf__mail a{display:inline-flex;align-items:center;gap:10px;min-height:48px;font-weight:600}

/* Fußzeile */
.fuss{padding:18px 0 26px;background:var(--flaeche);border-top:2px solid var(--zart)}
.fuss__recht{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 10px;margin:0 0 6px;padding:0;list-style:none}
.fuss__recht a{display:inline-flex;align-items:center;min-height:48px;padding:0 10px;font-weight:600}
.fuss__zeile{margin:0;text-align:center;color:var(--tinte2)}

/* Stufe 2: eine Seite je Angebot */
.wrap.stufe2{padding-top:18px;padding-bottom:24px}
.zurueck{margin:0 0 10px}
.zurueck a{display:inline-flex;align-items:center;gap:8px;min-height:48px;font-weight:600}
.stufe2__raster{display:grid;gap:22px}
@media (min-width:860px){.stufe2__raster{grid-template-columns:minmax(0, 5fr) minmax(0, 6fr);gap:44px;align-items:start}}
.stufe2__bild{margin:0}
.stufe2__bild img{width:100%;border-top:8px solid var(--st-satt);border-radius:var(--rund);background:var(--st-hell)}
.dach{margin:0 0 .3em;font-weight:700;color:var(--st-haupt)}
.stufe2__absatz{font-size:1.05rem}
.stufe2__zeile{color:var(--tinte2);font-weight:600}
.stufe2__extra a{display:inline-flex;align-items:center;gap:8px;min-height:48px;font-weight:700;color:var(--st-haupt)}

/* Darunter: Abschnitte, Heft, Angebote, Formular (übernommen aus 225b, Schrift größer) */
.abschnitte{max-width:38em;margin:36px 0 0}
.abschnitt{margin:0 0 40px;scroll-margin-top:16px}
.abschnitt h2{margin:0 0 .45em}
.abschnitt h2::before,.traeger__teil h2::before{content:"";display:block;width:56px;height:6px;margin:0 0 12px;border-radius:3px;background:var(--st-satt)}
.abschnitt h3{margin:1.1em 0 .4em}
.abschnitt ul,.abschnitt ol{padding:0 0 0 1.3em}
.abschnitt li{margin:0 0 .45em}
.abschnitt li::marker{color:var(--st-haupt);font-weight:700}
.abschnitt .knoepfe{margin:16px 0 0}
.abschnitt__fuss{margin:18px 0 0;color:var(--tinte2)}
.abschnitt__fuss a{font-weight:600}
.preis{margin:0 0 1em;padding:12px 16px;border-left:6px solid var(--st-satt);border-radius:0 12px 12px 0;background:var(--flaeche);font-weight:600}
/* Kennenlerngespräch (Fassung 3e): der feste Satz, ruhig gesetzt. Block ganz oben auf beraten.html (wie die Preiszeile, nur
   in Normalschrift), eine Zeile unter dem Preis, der letzte Satz vor dem Knopf im Formular, eine Zeile unter den zwei Türen. */
.kennen{margin:0 0 1em;padding:12px 16px;border-left:6px solid var(--st-satt);border-radius:0 12px 12px 0;background:var(--flaeche)}
.kennen p{margin:0;font-size:1.05rem}
.stufe2__zeile--kennen{font-weight:500}
.formular__kennen{margin:0 0 14px;color:var(--tinte2);font-weight:500}
.hero__kennen{margin:4px 0 0;font-size:1.125rem;line-height:1.4;color:var(--tinte2)}
@media (min-width:600px){.hero__kennen{flex:1 0 100%}}
@media (min-width:960px){.hero__kennen{flex:0 0 auto;margin:2px 0 0}}
.heft{display:flex;flex-direction:column;gap:22px}
.buch{position:relative;flex:none;width:min(260px, 72%);margin:8px 0 6px 10px;transform:rotate(-2deg);border-radius:4px 10px 10px 4px;background:var(--flaeche);box-shadow:12px 16px 26px rgba(30,34,38,.22), 3px 4px 0 var(--zart)}
.buch img{width:100%;border-radius:4px 10px 10px 4px}
@media (min-width:700px){.heft{flex-direction:row;align-items:flex-start}}
.inhalt{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;background:var(--flaeche);border:2px solid var(--zart);border-radius:var(--rund);line-height:1.45}
.inhalt th,.inhalt td{padding:9px 12px;text-align:left;vertical-align:top;border-top:1px solid var(--zart)}
.inhalt thead th{border-top:0}
.inhalt th:last-child,.inhalt td:last-child{width:4em;text-align:right;white-space:nowrap}
.angebote-liste,.abschnitt .angebote{list-style:none;margin:0 0 1em;padding:0}
.angebot{margin:0 0 14px;padding:14px 18px;background:var(--flaeche);border:2px solid var(--zart);border-left:6px solid var(--st-satt);border-radius:var(--rund)}
.abschnitt .angebot h3{margin:0 0 .45em}
.angebot dl{display:grid;grid-template-columns:1fr;gap:0 14px;margin:0 0 .6em}
@media (min-width:600px){.angebot dl{grid-template-columns:auto 1fr}}
.angebot dt{font-weight:700}
.angebot dd{margin:0 0 .3em;min-width:0}
.angebot p{margin:0 0 .4em}
.angebot__quelle{color:var(--tinte2);overflow-wrap:anywhere}

.formular{margin:8px 0 0;padding:18px;background:var(--flaeche);border:2px solid var(--zart);border-radius:var(--rund)}
.feld{display:flex;flex-direction:column;gap:6px;margin:0 0 16px}
.feld label{font-weight:700}
.feld input,.feld select,.feld textarea{width:100%;min-height:56px;padding:.5em .65em;font:1rem/1.4 var(--lauf-schrift);color:var(--tinte);background:var(--flaeche);border:2px solid var(--rand);border-radius:12px}
.feld textarea{min-height:7em;resize:vertical}
/* Auftrag 229: Haken 32 Pixel, das Label schließt ohne Lücke an und ist mindestens 44 Pixel hoch, so ist Haken samt
   Label eine Trefferfläche von mindestens 44 mal 44 Pixeln */
.feld--haken{flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:0}
.feld--haken input{flex:none;width:32px;height:32px;min-height:32px;margin:6px 0 0;accent-color:var(--tinte);cursor:pointer}
.feld--haken label{flex:1 1 12em;min-height:44px;padding:6px 0 6px 12px;font-weight:400;cursor:pointer}
.feld__frei,.feld__pflicht{font-weight:400;color:var(--tinte2)}
/* Pflichtangaben und Fehler (Auftrag 229): oben ein Satz, was gebraucht wird; der Fehlerbereich (aria-live) bleibt leer und
   flach, bis muster3.js ihn füllt; je Feld eine Zeile darunter. Nie nur Farbe: Rahmen, Wort und Satz kommen zusammen. */
:root{--fehler:#8E1B1B}
.formular__pflicht{margin:0 0 14px;color:var(--tinte2)}
.formular__fehler{margin:0 0 16px;padding:12px 14px;border:2px solid var(--fehler);border-left-width:8px;border-radius:12px;background:var(--flaeche);color:var(--tinte);font-weight:700}
.formular__fehler:empty{margin:0;padding:0;border:0}
.feld__fehler{display:block;font-weight:700;color:var(--fehler)}
.feld--haken .feld__fehler{flex-basis:100%;padding-left:44px}
.feld [aria-invalid="true"]{border-color:var(--fehler);border-width:3px}
.feld__hinweis{margin:0 0 8px}
.feld--wahl{margin:0 0 16px;padding:12px 14px 4px;border:2px solid var(--rand);border-radius:12px}
.feld--wahl legend{padding:0 6px;font-weight:700}
.feld--wahl .feld--haken{display:flex;margin:0 0 12px}
.honig{position:absolute !important;left:-9999px;width:1px;height:1px;opacity:0}
.formular__meldung{margin:12px 0 0;padding:12px 14px;border-radius:12px;background:var(--st-hell);color:var(--tinte);font-weight:600}

/* Quellen mit dem gezeichneten Pfeil darüber */
.quellen-hinweis{display:flex;align-items:flex-end;gap:10px;max-width:36em;margin:34px 0 4px}
.quellen-hinweis .pfeil{order:2;flex:none;width:110px;height:auto}
.quellen-hinweis__satz{order:1;margin:0 0 12px;font-family:var(--kopf-schrift);font-weight:600;font-size:1.1rem;color:var(--st-haupt)}
.quellen{max-width:36em;background:var(--flaeche);border:2px solid var(--zart);border-radius:var(--rund)}
.quellen summary{display:flex;align-items:center;gap:.6em;min-height:60px;padding:0 18px;font-weight:700;cursor:pointer;list-style:none}
.quellen summary::-webkit-details-marker{display:none}
.quellen summary::after{content:"";margin-left:auto;width:14px;height:14px;margin-top:-6px;border-right:3px solid var(--tinte);border-bottom:3px solid var(--tinte);transform:rotate(45deg)}
.quellen[open] summary::after{transform:rotate(225deg);margin-top:6px}
.quellen__zahl{display:inline-flex;align-items:center;justify-content:center;min-width:1.8em;height:1.8em;border-radius:999px;background:var(--st-hell);color:var(--tinte)}
.quellen__liste{margin:0;padding:0 18px 16px 2.2em;line-height:1.5}
.quellen__liste li{margin:0 0 .6em;overflow-wrap:anywhere}
/* Auftrag 229: Ziffer etwas größer, und eine unsichtbare Trefferfläche von 44 mal 44 Pixeln um die Mitte (::after gehört
   zum Link), ohne dass die Zeile höher wird */
.ziffer{position:relative;font-size:.9em;font-weight:700;text-decoration:none;vertical-align:.25em;padding:0 .2em}
.ziffer::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%, -50%)}

/* Trägerseite */
.traeger__spalte{max-width:38em;margin:36px 0 0}
.traeger__teil{margin:0 0 32px}
.traeger__teil ul{padding:0 0 0 1.2em}
.traeger__teil li{margin:0 0 .45em}
.traeger__teil li::marker{color:var(--st-haupt)}

/* Rechtsseiten */
.recht__text h2{font-size:clamp(1.2rem, 1.05rem + .7vw, 1.5rem);margin-top:1.4em}
.recht__text h3{margin-top:1.1em}
.kasten{margin:0 0 1em;padding:14px 18px;background:var(--flaeche);border-left:6px solid var(--rand);border-radius:0 12px 12px 0}
.kasten p{margin:0}
.luecke{padding:0 .2em;border-radius:4px;background:var(--hinweis)}

/* Für mich, Für meine Eltern */
.ziel__bild{max-width:760px;margin:6px 0 4px}
.ziel__bild img{width:100%;border-radius:var(--rund);border-top:8px solid var(--st-satt)}
.punkte{list-style:none;display:grid;gap:16px;max-width:40em;margin:22px 0 0;padding:0}
.punkt{padding:18px 20px 12px;background:var(--flaeche);border:2px solid var(--zart);border-left:8px solid var(--st-satt);border-radius:var(--rund)}
.punkt h2{font-size:1.3rem;margin:0 0 .35em}
.punkt p{margin:0 0 .5em}
.weiter{display:inline-flex;align-items:center;gap:8px;min-height:48px;font-weight:700;color:var(--st-haupt)}

/* Über mich */
.ueber-mich__raster{display:grid;gap:24px}
@media (min-width:860px){.ueber-mich__raster{grid-template-columns:minmax(240px, 360px) 1fr;gap:44px;align-items:start}}
.ueber-mich__bild{margin:0;max-width:360px}
.ueber-mich__bild img{width:100%;border-radius:var(--rund)}
.ueber-mich__text p{max-width:36em;font-size:1.05rem}

/* Blog: die Beiträge als Liste */
.beitraege{list-style:none;display:grid;gap:12px;margin:0 0 1em;padding:0}
.beitraege a{display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 18px;background:var(--flaeche);border:2px solid var(--zart);border-left:8px solid var(--st-satt);border-radius:var(--rund);font-weight:600;text-decoration:none}
.beitraege a:hover{text-decoration:underline}

/* Die vier Punkte vom alten StundenFreund-Flyer (Für mich, Zu zweit) */
.flyer{max-width:40em;margin:22px 0 18px;padding:16px 20px 8px;background:var(--flaeche);border:2px solid var(--zart);border-left:8px solid var(--st-satt);border-radius:var(--rund)}
.flyer__titel{margin:0 0 .45em;font-size:1.3rem}
.flyer__liste{margin:0 0 .6em;padding:0 0 0 1.2em}
.flyer__liste li{margin:0 0 .45em}
.flyer__liste li::marker{color:var(--st-haupt)}

/* Neu im Blog und Bald auch per Video (Fassung 3c): der Blog ist das Herz der Seite, darum drei Karten in Kachelgröße
   direkt nach den Angeboten; darunter ein Fenster, das die Beratung per Video vormerkt. Das Bild auf beraten.html
   (abschnitt__bild) ist dasselbe. */
.blogneu{padding:30px 0 10px}
.blogneu__satz{max-width:40em;margin:0 0 20px;font-size:1.1rem}
.kacheln--blog{margin:0}
@media (min-width:980px){.kacheln--blog{grid-template-columns:repeat(3,1fr)}}
.kacheln--blog .kachel__bild{aspect-ratio:16/9}
.kacheln--blog .kachel__titel{font-size:1.25rem}
.kachel__zeit{font-size:1rem;font-weight:600;color:var(--tinte2)}
.blogneu__knopf{margin:24px 0 0}
.blogneu__knopf .knopf{width:100%}
@media (min-width:600px){.blogneu__knopf .knopf{width:auto;min-width:320px}}
.videofenster{padding:30px 0 10px}
.videofenster__karte{display:grid;overflow:hidden;background:var(--flaeche);border:2px solid var(--zart);border-top:8px solid var(--st-satt);border-radius:var(--rund);box-shadow:var(--schatten)}
.videofenster__bild{margin:0}
.videofenster__bild img{width:100%;height:auto;background:var(--st-hell)}
.videofenster__text{padding:20px 22px 24px}
.videofenster__text h2{margin:0 0 .4em}
.videofenster__text p{margin:0 0 1em}
.videofenster__text .knopf{margin-top:4px}
@media (min-width:860px){.videofenster__karte{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}.videofenster__text{padding:28px 34px}}
.abschnitt__bild{margin:0 0 1em;max-width:560px}
.abschnitt__bild img{width:100%;height:auto;border-radius:var(--rund);background:var(--st-hell)}
.abschnitt__bild figcaption{margin-top:8px;font-size:1rem;color:var(--tinte2)}

/* Auftrag 227 (19.10.2026): die alten StundenFreund-Angebote zurück. Ein Satz unter den Kacheln, Zum Mitnehmen unter
   Neu im Blog (das Heft statt der Kachel Ratgeber), Gut zu wissen als Klappliste unten auf der Startseite und auf den
   Türen, der Kasten Keine Pflege und die vier Schritte auf Für meine Eltern. */
.kacheln__satz{max-width:40em;margin:24px 0 0;font-size:1.1rem;font-weight:600;color:var(--tinte2)}
.mitnehmen{padding:30px 0 10px}
.mitnehmen__karte{display:flex;flex-direction:column;gap:22px;padding:22px 22px 24px;background:var(--flaeche);border:2px solid var(--zart);border-top:8px solid var(--st-satt);border-radius:var(--rund);box-shadow:var(--schatten)}
.mitnehmen__buch{width:min(200px, 60%);margin:4px 0 4px 8px}
.mitnehmen__text{max-width:36em}
.mitnehmen__text h2{margin:0 0 .4em;color:var(--st-haupt)}
.mitnehmen__text p{margin:0 0 1em;font-size:1.05rem}
@media (min-width:700px){.mitnehmen__karte{flex-direction:row;align-items:center;gap:36px;padding:28px 34px}}
.fragen{padding:40px 0 10px}
.fragen__liste{max-width:44em}
.frage{margin:0 0 12px}
.frage summary{line-height:1.35}
.frage .mehr__inhalt p{margin:0 0 1em}
.fragen--tuer .frage{margin:0 0 10px}
.keinepflege{max-width:40em;margin:22px 0 0;padding:16px 20px 6px;background:var(--flaeche);border:2px solid var(--zart);border-left:8px solid var(--tinte2);border-radius:var(--rund)}
.keinepflege__titel{margin:0 0 .45em;font-size:1.3rem}
.keinepflege__liste{margin:0 0 .7em;padding:0 0 0 1.2em}
.keinepflege__liste li{margin:0 0 .35em}
.keinepflege__satz{margin:0 0 .8em}
.schritte li::marker{font-family:var(--kopf-schrift)}

/* Wer im System weniger Bewegung eingestellt hat: nichts gleitet, nichts blendet */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}
  .geschichte__balken,.geschichte__pause{display:none !important}
  .kachel:hover{transform:none}
}

/* Auftrag 232 (20.10.2026), von Hand: Halbsatz im Knopf Für meine Eltern, Steuerhinweis, Einleitung auf Für meine Eltern, Feld Für wen */
.knopf--zusatz{flex-direction:column;gap:2px;line-height:1.2}
.knopf__wort{display:block}
.knopf__zusatz{display:block;font-size:.85rem;font-weight:600}
.steuer__satz{margin:10px 0 6px}
.steuer{margin:6px 0 14px}
.steuer ul{margin:0 0 1em;padding-left:1.2em}
.steuer li{margin:0 0 .5em}
.steuer__zitat{font-style:italic}
.steuer__quelle,.steuer__schluss{color:var(--tinte2)}
.steuer__quelle a{overflow-wrap:anywhere}
.ziel__einleitung{margin:0 0 18px}
.ziel__vorweg{margin:0 0 8px;font-family:var(--kopf-schrift);font-size:1.35rem;font-weight:700;color:var(--tinte)}
.feld__hinweis{display:block;margin:4px 0 0;font-size:.95rem;color:var(--tinte2)}
@media print{details.steuer > *{display:block}}

/* Auftrag 238 (20.10.2026), von Hand: Warum zu mir. Startseite: eine Liste mit sechs Karten (Überschrift h3, ein Satz) und der
   Karte Ehrlich gesagt über die ganze Breite; Text in Tinte auf Weiß wie die Kacheln. Absatz auf zu-zweit und Für meine Eltern:
   ein normaler Abschnitt. Satz an der Preisstelle: stufe2__zeile mit preis-satz. Text in konzept.json, warum_zu_mir. */
.warum{padding:34px 0 6px}
.gruende{list-style:none;margin:0;padding:0;display:grid;gap:16px}
@media (min-width:600px){.gruende{grid-template-columns:1fr 1fr;gap:20px}}
@media (min-width:1000px){.gruende{grid-template-columns:repeat(3,1fr)}}
.grund{padding:18px 20px 8px;background:var(--flaeche);border:2px solid var(--zart);border-top:6px solid var(--tinte2);border-radius:var(--rund)}
.grund__titel{margin:0 0 .4em;font-size:1.25rem}
.grund__text{margin:0 0 .7em}
.grund__richard{margin:0 0 .7em}
.grund--ehrlich{grid-column:1 / -1;border-top-width:2px;border-left:8px solid var(--tinte2)}
.grund--ehrlich .grund__text{max-width:46em}
.grund--ehrlich a{overflow-wrap:anywhere}
.preis-satz{margin-top:4px}