/* ===================================================================
   Gestaltung der Unterseiten von /anfrage.

   EINE DATEI STATT SECHS KOPIEN. Die Landingpage traegt ihr CSS im
   Dokument, weil sie allein steht. Hier sind es sechs Seiten mit
   derselben Gestaltung; sechsmal dasselbe CSS waere sechsmal zu
   pflegen und fuenfmal zu vergessen.

   Erlaubt ist die Datei, weil die Richtlinie style-src 'self' sagt.
   Sie liegt auf demselben Server, es kommt nichts von aussen dazu.

   Die Farben sind dieselben wie auf /anfrage und index.html und dort
   gerechnet, nicht geschaetzt. Siehe den Kopf von index.html.
   =================================================================== */
@font-face{font-family:'Marcellus';font-style:normal;font-weight:400;font-display:swap;
  src:url('/schriften/marcellus-latin.woff2') format('woff2');}
@font-face{font-family:'Karla';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('/schriften/karla-latin.woff2') format('woff2');}

:root{
  --papier:#F8F5EF;--papier-2:#F0EADF;--papier-3:#E9E1D4;
  --tinte:#241E1A;--tinte-2:#4E443D;
  --messing:#6E5427;--messing-knopf:#75582A;--messing-hell:#D6B475;
  --dunkel:#2A231F;
  --linie:rgba(36,30,26,.16);
  --linie-messing:rgba(110,84,39,.34);
  --linie-hell:rgba(248,245,239,.22);
  --karten-radius:12px;
  --maxw:1060px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:'Karla',system-ui,sans-serif;background:var(--papier);color:var(--tinte);
  font-size:18.5px;line-height:1.7;overflow-x:hidden}
h1,h2,h3{font-family:'Marcellus',Georgia,serif;font-weight:400;line-height:1.16}
a{color:inherit}
a:focus-visible{outline:2px solid var(--messing);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.augenbraue{font-size:13px;letter-spacing:.26em;text-transform:uppercase;color:var(--messing);font-weight:700}

header{background:var(--papier);border-bottom:1px solid var(--linie)}
.kopf{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;
  padding-top:11px;padding-bottom:11px}
.marke{font-family:'Marcellus',Georgia,serif;font-size:20px;letter-spacing:.13em;text-transform:uppercase;
  text-decoration:none;display:flex;align-items:center;min-height:48px}
.kopf-tel{display:inline-flex;align-items:center;gap:9px;font-size:20px;font-weight:700;
  text-decoration:none;color:var(--messing);border:1px solid var(--linie-messing);border-radius:2px;
  padding:10px 18px;min-height:50px;white-space:nowrap;transition:background .25s,color .25s,border-color .25s}
.kopf-tel:hover{background:var(--messing-knopf);color:var(--papier);border-color:var(--messing-knopf)}
.kopf-tel .wort{font-size:12.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;opacity:.9}

.knoepfe{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  text-decoration:none;font-weight:700;font-size:1.22rem;padding:17px 30px;min-height:62px;border-radius:2px;
  transition:background .25s,color .25s,transform .25s,border-color .25s}
.knopf-voll{background:var(--messing-knopf);color:var(--papier);border:1px solid var(--messing-knopf)}
.knopf-voll:hover{background:var(--tinte);border-color:var(--tinte);transform:translateY(-1px)}
.knopf-umriss{background:transparent;color:var(--messing);border:1px solid var(--linie-messing)}
.knopf-umriss:hover{background:var(--papier-3);border-color:var(--messing);transform:translateY(-1px)}
.knopf .wort{font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  padding-right:13px;border-right:1px solid var(--linie-hell)}
.knopf-umriss .wort{border-right-color:var(--linie-messing)}

.oben{padding:46px 0 50px;position:relative}
.oben::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;
  background:linear-gradient(90deg,var(--messing) 0%,rgba(110,84,39,.12) 62%,transparent 100%)}
.oben h1{font-size:clamp(1.85rem,4.6vw,2.9rem);margin:16px 0 18px;max-width:22ch}
.oben .fuehrung{font-size:1.1rem;color:var(--tinte-2);max-width:56ch}

section{padding:52px 0}
section.zweiter{background:var(--papier-2);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}

.liste{list-style:none;max-width:74ch;border-top:1px solid var(--linie)}
.liste li{padding:19px 0 19px 42px;border-bottom:1px solid var(--linie);position:relative;color:var(--tinte-2)}
.liste li::before{content:"";position:absolute;left:4px;top:30px;width:13px;height:7px;
  border-left:2px solid var(--messing);border-bottom:2px solid var(--messing);transform:rotate(-45deg)}

.schritte{border-top:1px solid var(--linie)}
.schritt{display:flex;gap:22px;padding:22px 0;border-bottom:1px solid var(--linie)}
.schritt .nr{font-family:'Marcellus',Georgia,serif;font-size:1.65rem;color:var(--messing);
  line-height:1;flex:0 0 auto;width:42px;padding-top:3px}
.schritt h2{font-size:1.18rem;margin-bottom:6px}
.schritt p{color:var(--tinte-2);max-width:58ch}

.hinweiszeile{margin-top:30px;padding-left:22px;border-left:2px solid var(--linie-messing);
  font-size:1.02rem;color:var(--tinte-2);max-width:64ch}

.zurueck{padding:0 0 48px}
.zurueck a{display:inline-flex;align-items:center;gap:10px;min-height:48px;
  text-decoration:none;color:var(--messing);font-weight:700;font-size:1.04rem;
  border-bottom:1px solid var(--linie-messing);transition:color .2s,border-color .2s}
.zurueck a:hover{color:var(--tinte);border-color:var(--tinte)}

.abschluss{background:var(--dunkel);color:var(--papier);padding:58px 0}
.abschluss h2{color:var(--papier);font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:16px}
.abschluss p{color:var(--papier);opacity:.88;max-width:56ch}
.abschluss .knopf-voll{background:var(--messing-hell);color:var(--tinte);border-color:var(--messing-hell)}
.abschluss .knopf-voll:hover{background:var(--papier);border-color:var(--papier)}
.abschluss .knopf-voll .wort{border-right-color:rgba(36,30,26,.28)}
.abschluss .knopf-umriss{color:var(--messing-hell);border-color:rgba(214,180,117,.5)}
.abschluss .knopf-umriss:hover{background:rgba(214,180,117,.12);border-color:var(--messing-hell)}
.abschluss .knopf-umriss .wort{border-right-color:rgba(214,180,117,.5)}
.mailzeile{margin-top:22px;font-size:1.04rem}
.mailzeile a{color:var(--messing-hell)}

footer{background:var(--papier);border-top:1px solid var(--linie);padding:38px 0 32px}
.fuss{display:flex;flex-wrap:wrap;gap:6px 28px;align-items:center;justify-content:space-between}
.fuss-links{display:flex;flex-wrap:wrap;gap:4px 26px}
.fuss a{text-decoration:none;color:var(--tinte-2);font-size:.99rem;display:inline-flex;align-items:center;
  min-height:48px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.fuss a:hover{color:var(--messing);border-color:var(--linie-messing)}
.fuss-marke{font-size:.97rem;color:var(--tinte-2)}

/* DIE FESTE LEISTE UNTEN, Fassung vom 11.10.2026.
   Links die Frage, rechts die Nummer, beides ohne Umbruch. Die Frage
   verschwindet unter 360 Pixeln: Lieber nur die Nummer als zwei
   abgeschnittene Zeilen. */
.leiste{display:none}
@media (max-width:860px){
  body{padding-bottom:72px}
  .leiste{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:80;
    border-top:1px solid rgba(36,30,26,.2)}
  .leiste a{display:flex;align-items:center;justify-content:center;gap:9px;min-height:64px;
    text-decoration:none;font-weight:700;font-size:1.06rem;padding:0 10px;text-align:center}
  .leiste{grid-template-columns:1fr auto}
  .leiste .sprechen{display:flex;align-items:center;padding:0 14px;
    background:var(--papier-2);color:var(--tinte);font-weight:600;font-size:.97rem;
    white-space:nowrap;overflow:hidden}
  .leiste .anrufen{background:var(--messing-knopf);color:var(--papier);
    flex-direction:column;gap:1px;line-height:1.15;white-space:nowrap;padding:0 18px}
  /* Die Nummer steht seit dem 09.10.2026 IN der Leiste und nicht nur hinter
     dem Wort "Anrufen": Wer sie sieht, kann sie auch vorlesen oder notieren,
     und ein Knopf, der eine Nummer zeigt, wird eher gedrueckt als einer, der
     sie verspricht. Zweizeilig, weil 390 Pixel geteilt durch zwei keine
     Zeile mit Wort UND vierzehnstelliger Nummer tragen. */
  .leiste .wort{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
    font-weight:700;opacity:.82}
  .leiste .mailen{display:none}
  .kopf-tel .wort{display:none}
  .kopf-tel{font-size:18.5px;padding:10px 14px}
  .marke{font-size:16.5px;letter-spacing:.1em}
  section{padding:42px 0}
  .knoepfe{gap:12px}
  .knopf{width:100%;font-size:1.13rem;padding:15px 20px;min-height:58px}
}
/* Die Kopfzeile zwei Punkt kleiner, seit die Rufnummer 14 Zeichen hat.
   Dieselbe Begruendung wie auf den uebrigen Seiten des Auftritts: nowrap
   waere der falsche Weg, es tauscht den Umbruch gegen einen Ueberlauf. */
@media (max-width:420px){
  .kopf{min-height:64px;padding-top:9px;padding-bottom:9px}
  .marke{font-size:14.5px;letter-spacing:.08em}
  .kopf-tel{font-size:16px;padding:9px 12px;min-height:46px}
  .augenbraue{font-size:11.5px;letter-spacing:.17em}
  .oben{padding:26px 0 36px}
  .oben h1{font-size:1.8rem;margin:11px 0 13px;max-width:none}
  .oben .fuehrung{font-size:1.02rem;line-height:1.56}
  .wrap{padding:0 22px}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

/* ---- KOSTENEINSCHAETZUNG. Ergaenzt am 05.10.2026. ----------------------
   ALLE KONTRASTE GERECHNET, nicht geschaetzt, Grund Papier #F8F5EF:
   Legende Messing 6,5 zu 1; Text Tinte 15,1; Text Tinte-2 8,7; gewaehlte
   Karte Papier auf Messing-Knopf 6,1; ungewaehlte Karte Tinte auf Papier-2
   13,8; Feldrahmen Messing auf Weiss 7,1.

   DER FELDRAHMEN IST --messing UND NICHT --linie-messing. Die Hauslinie ist
   zu 34 Prozent deckend und erreicht auf Papier nur 2,1 zu 1; ein
   Bedienelement braucht nach WCAG 1.4.11 ein Verhaeltnis von 3 zu 1. Als
   Trennlinie taugt sie, als Rahmen eines Eingabefelds nicht.

   DIE AUSWAHL ARBEITET OHNE SKRIPT. Die radio-Eingabe steht aus dem Bild
   geschoben, bleibt aber fokussierbar; sichtbar ist das Label, und
   "input:checked + label" faerbt es. Das kann der Browser selbst, und die
   Seite traegt ohnehin kein script-src.

   TIPPZIELE: Karten 56 px hoch, Felder 48, Knopf 60. Der Auftrag verlangt
   "mit dem Daumen bedienbar", und drei Viertel der Besucher kommen vom
   Handy. ---- */

/* ======================================================================
   DER FRAGEBOGEN, Fassung vom 11.10.2026.
   ======================================================================

   DIE VORIGE FASSUNG WAREN BILDKACHELN, und der Inhaber nannte sie verspielt,
   wie von Kindern gemalt. Der Fehler lag nicht an den Zeichnungen allein: Eine
   Wand aus sechs grossen Bildern sieht aus wie ein Spiel, nicht wie ein
   Fragebogen. Jetzt sind es ruhige ZEILEN ueber die volle Breite, wie in den
   Unterlagen eines Maklerhauses: links eine kleine Zeichnung, daneben die
   Beschriftung, rechts der Auswahlring.

   KONTRASTE GERECHNET, auf dem Zeilengrund #FCFAF6:
     Tinte   #241E1A   15,8 zu 1
     Tinte-2 #4E443D    9,1 zu 1
     Messing #6E5427    6,8 zu 1   (Rahmen und Ring, > 3 fuer Bedienteile)

   BERUEHRUNGSFLAECHEN: Jede Zeile ist mindestens 76 Pixel hoch, jedes Feld 54,
   jede Pille 44. Die Vorgabe sind 56 fuer die Auswahl. */

.rechner{margin-top:0}

.frage{border:0;padding:0;margin:0 0 54px;min-width:0}
/* min-width:0 AM FIELDSET. Ein fieldset hat von sich aus
   min-inline-size:min-content, und das ist bei einer Legende wie "In
   welchem Zustand ist sie?" breiter als ein 320 Pixel schmales Fenster:
   Die Seite lief dort um acht Pixel ueber. Die Regel wirkt nur, wo es eng
   wird. */
.frage legend{display:block;float:left;width:100%;padding:0;margin:0 0 18px}
.frage legend + *{clear:both}

.zaehlung{display:block;font-size:.73rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--messing)}
.frage-titel{display:block;margin-top:7px;font-family:'Marcellus',Georgia,serif;
  font-weight:400;font-size:clamp(21px,3vw,27px);line-height:1.22;color:var(--tinte)}

/* ---- Die Auswahlzeilen ------------------------------------------------ */

/* GRID-AUTO-ROWS 1FR: Jede Zeile der Gruppe ist so hoch wie die hoechste.
   Auf dem Handy ist jede Karte eine eigene Rasterzeile, und ohne diese Zeile
   richtete sich jede nach ihrem eigenen Inhalt: gemessen 78 gegen 112 Pixel
   in derselben Gruppe. */
.zeilen{display:grid;grid-template-columns:1fr;grid-auto-rows:1fr;gap:10px}

/* DIE KARTE FUELLT IHRE RASTERZELLE AUS.
   Ohne das richtet sich jede Karte nach ihrem eigenen Inhalt, und in einer
   Gruppe standen bis zum 11.10.2026 Karten von 78 und 112 Pixeln
   nebeneinander. Das Raster streckt die ZELLE; die Karte darin muss die
   Streckung uebernehmen. */
/* min-width:0 UND TRENNBARE WOERTER.
   Ein Rasterkind hat von sich aus min-width:auto, also die Mindestbreite
   seines Inhalts, und "Renovierungsbedürftig" ist ein unteilbares Wort:
   Bei 320 Pixeln war die Zeile 306 breit in einem 276 breiten Elternteil.
   min-width:0 erlaubt ihr zu schrumpfen, overflow-wrap erlaubt dem Wort
   zu brechen. Ohne das zweite waere der Ueberlauf nur von der Zeile in die
   Beschriftung gewandert. Ueber 320 Pixeln aendert sich dadurch nichts;
   npm run nachlass:ausrichtung misst das bei 360, 390, 430 und 1440. */
.zeile{position:relative;display:flex;min-width:0}
/* NUR overflow-wrap, KEIN hyphens:auto.
   hyphens trennt, wann immer der Browser meint, die Zeile werde dadurch
   voller: Bei 390 Pixeln stand in den Auswahlkarten "Über-gabe" und
   "Ver-wertung", obwohl der Platz reichte. overflow-wrap bricht nur das
   Wort, das sonst nicht passt, und das ist unterhalb von 360 Pixeln
   hoechstens eines.

   UND "anywhere", NICHT "break-word". Der Unterschied steht in keinem
   Tutorial gross da und entscheidet hier alles: break-word bricht ein zu
   langes Wort beim Umbrechen, verkleinert aber die MINDESTBREITE des
   Kastens nicht. Die Zeile blieb damit 306 Pixel breit in einem 276
   breiten Elternteil, und der Ueberlauf bei 320 war zurueck. anywhere
   wirkt auch auf die Mindestbreite. Gemessen, nachdem break-word nicht
   geholfen hatte. */
.zeile .name,.zeile .erk{overflow-wrap:anywhere}
/* "Premium" ueber dem Titel der zweiten Karte. Die EINZIGE Vorzeile des
   Auftritts, und das Wort steht auf dieser Seite genau einmal: Es ordnet
   ein, es wirbt nicht. Dieselbe Groesse und Sperrung wie die Augenbraue
   ueber den Ueberschriften, damit es nicht wie ein Siegel aussieht. */
.zeile .vorzeile{display:block;margin-bottom:3px;font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;font-weight:700;color:var(--messing)}
/* Die Liste im bedingten Hinweiskasten. Dieselben Ringe wie die Liste der
   dunklen Karte auf der Startseite, nur in Tinte statt in Messing. */
.kastenliste{margin:8px 0 0;padding:0;list-style:none}
.kastenliste li{position:relative;padding:0 0 0 22px;margin-top:6px;
  font-size:.92rem;line-height:1.5;color:var(--tinte-2)}
.kastenliste li::before{content:"";position:absolute;left:2px;top:.56em;
  width:8px;height:8px;border:1px solid var(--messing);border-radius:50%}
.wertkasten .kastenliste + .erk{margin-top:10px}
.zeile label{flex:1 1 auto}
/* Das Auswahlfeld bleibt ein echtes Auswahlfeld und wird nur unsichtbar.
   display:none naehme es der Tastatur und dem Vorlesegeraet. */
.zeile input{position:absolute;left:16px;top:16px;width:1px;height:1px;opacity:0;margin:0}
.zeile label{display:flex;align-items:center;gap:16px;min-height:76px;
  padding:14px 16px;cursor:pointer;
  background:#FCFAF6;border:1px solid var(--linie);border-radius:12px;
  transition:border-color .15s ease, background-color .15s ease}
.zeile:hover label{border-color:var(--linie-messing)}

.zeile .bild{flex:0 0 auto;display:block;width:50px;height:50px}
.zg{display:block;width:100%;height:100%;color:var(--tinte)}
.zg .a{stroke:var(--messing)}

.zeile .wort{flex:1 1 auto;min-width:0}
.zeile .name{display:block;font-size:1.02rem;font-weight:600;line-height:1.3;color:var(--tinte)}
.zeile .erk{display:block;margin-top:3px;font-size:.87rem;line-height:1.4;color:var(--tinte-2)}

/* Der Auswahlring. Gefuellt mit weissem Punkt, sobald gewaehlt. */
.zeile .ring{flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  border:1.5px solid var(--linie-messing);background:transparent;
  transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease}
.zeile input:checked + label{border-color:var(--messing);background:rgba(110,84,39,.055)}
.zeile input:checked + label .ring{border-color:var(--messing);background:var(--messing);
  box-shadow:inset 0 0 0 4.5px #FCFAF6}
.zeile input:focus-visible + label{outline:2px solid var(--messing);outline-offset:3px}

/* DIESER BLOCK STEHT HINTER DEN GRUNDREGELN, nicht davor.
   .zeilen-3 label und .zeile label haben dieselbe Spezifitaet; bei gleicher
   Spezifitaet gewinnt die spaetere Regel. Stand der Block oben, setzte
   .zeile label{align-items:center} die Linksbuendigkeit der Dreierreihe
   wieder ausser Kraft, und die Beschriftungen sassen bei 23,11 / 33,06 / 17
   Pixeln. Derselbe Fehler war am 10.10.2026 schon einmal da, mit karten-2.
*/
@media(min-width:680px){
  .zeilen{grid-template-columns:repeat(2,1fr)}
  /* DREI ANTWORTEN BEKOMMEN DREI SPALTEN, und dort steht die Zeichnung ueber
     dem Text: Nebeneinander waere die Zeile zu schmal fuer Bild, Wort und
     Ring in einer Reihe. */
  .zeilen-3{grid-template-columns:repeat(3,1fr)}
  /* ZEICHNUNG OBEN LINKS, TEXT DARUNTER, ALLES LINKSBUENDIG.
     Zentriert ergab sich die linke Kante aus der Textbreite, und jede
     Beschriftung sass woanders: gemessen 23,11 / 33,06 / 17 Pixel in
     derselben Gruppe. Mit flex-start ist der Abstand fest. */
  .zeilen-3 label{flex-direction:column;align-items:flex-start;text-align:left;
    padding:18px 16px 18px}
  .zeilen-3 .bild{margin:0 0 12px}
  .zeilen-3 .wort{flex:1 1 auto}
  /* Der Ring steht auch hier rechts und senkrecht mittig, wie in den
     Zweierreihen. Oben festgenagelt sass er je nach Kartenhoehe anderswo. */
  .zeilen-3 .ring{position:absolute;top:50%;right:16px;margin-top:-11px}
}


/* ---- Der Kasten, der nur bei "Ja" erscheint ---------------------------- */
/*
   OHNE SKRIPT, ueber :has() am Fragenblock. Das ausloesende Auswahlfeld
   traegt die Klasse `loest-aus`; eine Kennung statt der Klasse waere an die
   Reihenfolge der Antworten gebunden und zeigte nach dem naechsten
   Umsortieren bei der falschen.

   VERBORGEN IST DER AUSGANGSZUSTAND. Kennt ein Browser :has() nicht, bleibt
   der Kasten weg. Das ist der harmlosere der beiden Fehlschlaege: lieber eine
   Zusage, die jemand nicht liest, als eine, die neben "Nein" steht.

   Er traegt den Messingrahmen, den sonst nur die GEWAEHLTE Zeile hat. Das ist
   Absicht: Er gehoert zur Wahl, die der Besucher gerade getroffen hat.
*/
.wertkasten{display:none;gap:14px;margin-top:12px;padding:16px 18px;
  border:1px solid var(--messing);border-radius:12px;background:rgba(110,84,39,.055)}
.frage:has(input.loest-aus:checked) .wertkasten{display:flex}
.wertkasten .bild{flex:0 0 auto;display:block;width:40px;height:40px}
.wertkasten .wort{flex:1 1 auto;min-width:0}
.wertkasten .name{display:block;font-size:1rem;font-weight:700;line-height:1.3;color:var(--tinte)}
.wertkasten .erk{display:block;margin-top:5px;font-size:.92rem;line-height:1.55;color:var(--tinte-2)}

/* ---- Der Hilfebalken --------------------------------------------------- */
/*
   IMMER SICHTBAR, kein Aufklappen. Was man aufklappen muss, liest niemand,
   und diese Saetze nehmen dem Besucher genau die Sorgen, die ihn sonst vom
   Absenden abhalten.
*/
.hilfe{display:flex;align-items:flex-start;gap:10px;margin:12px 0 0;
  padding:12px 14px;background:var(--papier-2);border-radius:10px;
  font-size:14.5px;line-height:1.55;color:var(--tinte-2)}
.hilfe .info{flex:0 0 auto;width:18px;height:18px;margin-top:1px;color:var(--messing)}

/* ---- Freiwillige Anhaenge ---------------------------------------------- */

/* GLEICHER ABSTAND ZWISCHEN DEN BLOECKEN EINER FRAGE.
   Die Pillen hatten 16 Pixel Luft nach oben, das Bemerkungsfeld darunter
   keine: Es klebte an ihnen. Achtzehn Pixel gelten jetzt fuer jeden
   Folgeblock, gleich welcher Art. */
.anhang{margin-top:18px}
.frage .anhang + .felder,
.frage .felder + .felder{margin-top:18px}
.anhang-titel{margin:0 0 9px;font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;
  font-weight:700;line-height:21px;color:var(--tinte-2)}

/* BEIM GRUPPENTITEL STEHT DER ZUSATZ IMMER AUF EIGENER ZEILE.
   Ein Feldname wie "E-Mail (freiwillig)" passt gemessen auf jede Breite, ein
   Gruppentitel wie "Gehoert ausserdem dazu (freiwillig, mehrere moeglich)"
   nicht: Er brach bei 360 und 390 um und stand bei 430 in einer Zeile, also
   je nach Geraet anders. Kuerzen waere der andere Weg gewesen, aber von den
   gemessenen Varianten passte bei 360 nur "Gehoert dazu (freiwillig,
   mehrere)", und das ist kein Deutsch. Eine Regel am Element ist besser als
   eine am Zeichenzaehlen: zwei Zeilen, immer, auf jeder Breite. */
.anhang-titel .frei{display:block;margin-top:1px}
/* "(freiwillig)" steht ueberall in Klammern, in grauer NORMALER Schrift.
   Als Kapitaelchen sah es aus wie ein zweiter Teil der Beschriftung und
   machte sie laenger als ihre Zeile. */
.frei{text-transform:none;letter-spacing:0;font-weight:400;font-size:.8rem;
  color:var(--tinte-2)}

/* Die Zeile unter jedem Bereich mit Pflichtfeld. Klein und grau: Sie erklaert
   ein Zeichen, sie wirbt nicht. */
.pflichthinweis{margin:14px 0 0;font-size:.82rem;color:var(--tinte-2)}

.pillen{display:flex;flex-wrap:wrap;gap:9px}
.pille{position:relative}
.pille input{position:absolute;left:10px;top:10px;width:1px;height:1px;opacity:0;margin:0}
.pille label{display:flex;align-items:center;min-height:44px;padding:9px 18px;cursor:pointer;
  background:#FCFAF6;border:1px solid var(--linie);border-radius:22px;
  font-size:.96rem;font-weight:600;color:var(--tinte);
  transition:border-color .15s ease, background-color .15s ease}
.pille:hover label{border-color:var(--linie-messing)}
.pille input:checked + label{border-color:var(--messing);background:rgba(110,84,39,.07);
  color:var(--messing)}
.pille input:focus-visible + label{outline:2px solid var(--messing);outline-offset:3px}

/* ---- Felder: feiner Rahmen, 54 Pixel hoch ------------------------------ */

.felder{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.felder-drei{grid-template-columns:repeat(3,1fr)}
.feld-breit{grid-column:1 / -1}
/* DIE ZEILENHOEHE STEHT ALS FESTE LAENGE, nicht als Vielfaches.
   In der Beschriftung stehen zwei Schriftgroessen nebeneinander: die
   Beschriftung selbst in Kapitaelchen und "(freiwillig)" eine Spur groesser.
   Mit einem Vielfachen rechnet jedes Kind seine eigene Zeilenhoehe aus, die
   Zeilenbox wuchs um einen halben Pixel, und das Feld darunter sass 0,53
   Pixel tiefer als seine Nachbarn. Eine Laenge wird unveraendert vererbt. */
.rechner .feld label{display:block;margin-bottom:6px;font-size:.78rem;letter-spacing:.13em;
  line-height:17px;text-transform:uppercase;font-weight:700;color:var(--tinte-2)}
.rechner .pflicht{color:var(--messing);font-weight:700}
.rechner input[type=text],.rechner input[type=tel],.rechner input[type=email],
.rechner textarea{
  width:100%;min-height:54px;padding:13px 14px;
  background:#FCFAF6;color:var(--tinte);
  border:1px solid var(--linie);border-radius:10px;
  font-family:inherit;font-size:1.02rem;line-height:1.45}
.rechner textarea{min-height:5.5rem;resize:vertical}
.rechner input::placeholder,.rechner textarea::placeholder{color:#8A8178}
.rechner input:focus,.rechner textarea:focus{outline:none;border-color:var(--messing);
  box-shadow:0 0 0 2px rgba(110,84,39,.16)}

.einwilligung{display:flex;gap:14px;align-items:flex-start;margin:30px 0 26px;
  padding:18px 20px;background:var(--papier-2);border-radius:10px}
.einwilligung input{flex:0 0 auto;width:22px;height:22px;margin:2px 0 0;
  accent-color:var(--messing-knopf)}
.einwilligung label{font-size:.92rem;line-height:1.6;color:var(--tinte-2);cursor:pointer}

/* Aus dem Bild geschoben, nicht mit display:none versteckt: Ein
   Fuellprogramm, das auf display achtet, uebersieht ein verstecktes Feld;
   eins, das nach Eingabefeldern sucht, fuellt dieses hier. */
.rechner .falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* DER ABSENDEKNOPF IST DUNKEL, nicht messing. Messing traegt auf dieser Seite
   die Akzente; waere auch der Knopf messing, waere nichts mehr Akzent. */
.knopf-senden{display:block;width:100%;min-height:62px;padding:18px 28px;border:0;
  cursor:pointer;background:var(--tinte);color:var(--papier);border-radius:12px;
  font-family:inherit;font-size:1.1rem;font-weight:700;letter-spacing:.01em;text-align:center}
.knopf-senden:hover{background:var(--dunkel)}
.knopf-senden:focus-visible{outline:3px solid var(--messing);outline-offset:3px}
.unter-knopf-hinweis{margin-top:12px;text-align:center;font-size:.9rem;color:var(--tinte-2)}
.rechner .formhinweis{margin-top:16px;font-size:.86rem;line-height:1.65;
  color:var(--tinte-2);max-width:60ch}
.rechner .formhinweis a{color:var(--messing)}

/* ---- Kopf der Seite ---------------------------------------------------- */

.zusagen{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:9px}
.zusagen li{position:relative;padding-left:28px;font-size:1rem;color:var(--tinte)}
.zusagen li::before{content:"";position:absolute;left:3px;top:.42em;width:12px;height:6px;
  border-left:2px solid var(--messing);border-bottom:2px solid var(--messing);
  transform:rotate(-45deg)}

.ablauf{margin-top:26px;padding:20px 22px;background:var(--papier-2);border-radius:12px}
.ablauf h2{font-family:'Marcellus',Georgia,serif;font-weight:400;font-size:1.18rem;
  color:var(--tinte);margin:0 0 14px}
.ablauf ol{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:schritt}
.ablauf li{position:relative;padding-left:40px;font-size:.97rem;line-height:1.5;
  color:var(--tinte-2)}
.ablauf li::before{counter-increment:schritt;content:counter(schritt);
  position:absolute;left:0;top:-1px;display:grid;place-items:center;
  width:26px;height:26px;border-radius:50%;border:1px solid var(--linie-messing);
  color:var(--messing);font-size:.85rem;font-weight:700}
.ablauf b{display:block;color:var(--tinte);font-weight:600}

/* Der Kasten "Von A bis Z aus einer Hand". Ruhiger als der Ablaufkasten:
   Er beantwortet eine Frage, die der Besucher sich stellt, und draengt nicht. */
.azkasten{margin-top:22px;padding:18px 20px;border-left:2px solid var(--linie-messing)}
.azkasten h2{font-family:'Marcellus',Georgia,serif;font-weight:400;font-size:1.12rem;
  color:var(--tinte);margin:0 0 7px}
.azkasten p{margin:0;font-size:.96rem;line-height:1.6;color:var(--tinte-2);max-width:62ch}

/* ---- Haeufige Fragen --------------------------------------------------- */

.fragen-liste{margin-top:10px;border-top:1px solid var(--linie)}
.fragen-liste details{border-bottom:1px solid var(--linie)}
.fragen-liste summary{list-style:none;cursor:pointer;padding:17px 34px 17px 0;position:relative;
  font-size:1.01rem;font-weight:600;color:var(--tinte)}
.fragen-liste summary::-webkit-details-marker{display:none}
.fragen-liste summary::after{content:"";position:absolute;right:6px;top:50%;
  width:9px;height:9px;margin-top:-6px;
  border-right:2px solid var(--messing);border-bottom:2px solid var(--messing);
  transform:rotate(45deg);transition:transform .15s ease}
.fragen-liste details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.fragen-liste summary:focus-visible{outline:2px solid var(--messing);outline-offset:2px}
.fragen-liste p{margin:0 0 18px;font-size:.97rem;line-height:1.65;color:var(--tinte-2);
  max-width:66ch}

/* ---- Verweis auf das andere Formular ----------------------------------- */

.andere{margin-top:30px;padding:20px 22px;border:1px solid var(--linie-messing);
  border-radius:12px}
.andere p{margin:0 0 12px;font-size:.98rem;color:var(--tinte-2)}
.andere a{display:inline-flex;align-items:center;min-height:48px;padding:11px 20px;
  border:1px solid var(--messing);border-radius:10px;color:var(--messing);
  text-decoration:none;font-weight:700;font-size:.98rem}
.andere a:hover{background:rgba(110,84,39,.06)}

@media(max-width:560px){
  .frage{margin-bottom:44px}
  .felder,.felder-drei{grid-template-columns:1fr}
  .zeile label{gap:13px;padding:13px 14px}
}
/* DIE DREI ECKDATEN STAPELN SICH AUF SCHMALEN SCHIRMEN.
   Sie standen bis zum 11.10.2026 auch auf dem Handy nebeneinander, mit
   kleinerer Beschriftung. Gemessen bei 360 Pixeln: "Wohnfläche in m²
   (freiwillig)" brauchte DREI Zeilen in einer 98 Pixel breiten Spalte, und
   die Reihe kippte um 18 Pixel aus der Waagerechten. Drei Spalten auf 360
   Pixeln und eine Beschriftung in genau einer Zeile schliessen einander aus;
   die eine Zeile ist die wichtigere Vorgabe.
   Die Regel steht unter der allgemeinen eine Zeile weiter oben, damit sie
   gewinnt: gleiche Spezifitaet, spaetere Regel. */

/* ======================================================================
   DIE DANKSEITEN, Fassung vom 10.10.2026.
   ======================================================================

   SIE SIND IN DER ICH-FORM GESCHRIEBEN, die Formulare in der Wir-Form. Das
   ist kein Versehen: Beim Ausfuellen spricht das Haus, nach dem Absenden der
   Mensch, der zurueckruft. Wer das angleicht, nimmt der Seite ihren besten
   Satz.

   DER DRINGEND-ABSCHNITT STEHT UEBER DER ZUSAMMENFASSUNG und muss ohne
   Scrollen sichtbar sein. Gemessen wird das, nicht geschaetzt: siehe den
   Bericht zum Block. Wer gerade abgesendet hat und doch lieber spricht, soll
   nicht an seinen eigenen Antworten vorbeiscrollen. */

.dank-haken{display:block;width:56px;height:56px;margin:0 0 20px;color:var(--tinte)}
@media(max-width:560px){ .dank-haken{width:48px;height:48px;margin-bottom:16px} }

/* Abgesetzt, aber kein Kasten: eine getoente Flaeche mit einer Messinglinie
   oben. Ein Rahmen ringsum waere ein Hinweiskasten, und Hinweiskaesten
   ueberliest man. */
.dringend{margin-top:30px;padding:24px 0 4px;border-top:2px solid var(--linie-messing)}
.dringend h2{font-family:'Marcellus',Georgia,serif;font-weight:400;
  font-size:clamp(21px,3vw,27px);line-height:1.2;color:var(--tinte);margin:0}
.dringend p.auffordern{margin:4px 0 20px;font-size:1.08rem;color:var(--tinte-2)}
.dringend .knoepfe{margin-top:0}
.dringend .ich{margin-top:16px;font-size:.92rem;line-height:1.6;color:var(--tinte-2);
  max-width:46ch}

/* ---- ERGEBNISSEITE der Kosteneinschaetzung. ----------------------------
   Die Seite kommt aus der CRM-Anwendung, laedt aber dieses Stylesheet: Sie
   liegt unter derselben Herkunft, und Traefik leitet /anfrage/stil.css an den
   statischen Auftritt. Deshalb steht ihr CSS hier und nicht in der Route; zwei
   Fassungen desselben Entwurfs waeren zwei Gelegenheiten, dass eine veraltet.

   KONTRASTE GERECHNET: Spanne-Zahl Tinte auf Papier-2 13,8 zu 1;
   Spanne-Angaben Tinte-2 auf Papier-2 7,9; Zeile "Ihre erste Einschaetzung"
   Messing auf Papier-2 5,9; Rahmen Messing auf Papier-2 5,9;
   Besichtigungssatz Messing auf Papier 6,5. ---- */

.ergebnis{margin:14px 0 0;max-width:46rem}
.ergebnis-zeile{display:grid;grid-template-columns:1fr auto;gap:10px 18px;
  padding:13px 0;border-bottom:1px solid var(--linie)}
.ergebnis-zeile:first-child{border-top:1px solid var(--linie)}
.ergebnis dt{color:var(--tinte-2);font-size:1rem}
.ergebnis dd{margin:0;text-align:right;font-weight:700;color:var(--tinte);font-size:1rem}

/* DIESE REGELN STANDEN SEIT DEM 08.10.2026 HIER UND WAREN BIS ZUM 11.10.2026
   TOT: Kein HTML trug je die Klasse .spanne, denn die Zahl war abgeschaltet.
   npm run klassen meldet so etwas nicht, es prueft nur die Gegenrichtung
   (benutzt, aber nicht definiert). Jetzt werden sie benutzt, und zwar an
   derselben Stelle weitergeschrieben statt ein zweites Mal daneben: Zwei
   Definitionen derselben Klasse haetten sich gegenseitig ueberschrieben, und
   gewonnen haette die weiter unten.

   RAHMEN RUNDUM UND ZWEI PIXEL, nicht einer. Der Dringend-Kasten darunter
   traegt eine Linie oben; waeren beide gleich gezeichnet, saehe die Zahl aus
   wie der naechste Absatz. Sie ist aber der Grund, warum der Besucher das
   Formular ausgefuellt hat. */
.spanne{margin-top:26px;max-width:46rem;padding:22px 22px 18px;
  background:var(--papier-2);border:2px solid var(--messing);border-radius:14px}
.spanne-zeile{margin:0;font-size:.78rem;letter-spacing:.13em;line-height:17px;
  text-transform:uppercase;font-weight:700;color:var(--messing)}
/* Die Zahl in der Serifenschrift des Hauses, so gross wie eine Ueberschrift.
   clamp statt fester Groesse: Bei 360 px passt "1.500 bis 3.200 €" sonst
   nicht in eine Zeile, und eine umgebrochene Zahl liest sich wie zwei. */
.spanne-zahl{margin:8px 0 0;font-family:'Marcellus',Georgia,serif;font-weight:400;
  font-size:clamp(1.75rem,7.4vw,2.9rem);line-height:1.15;color:var(--tinte)}
/* Die Einschraenkung direkt unter der Zahl, in Messing: Sie gehoert zur
   Zahl und nicht zum Kleingedruckten darunter. */
.spanne-grenze{margin:8px 0 0;font-size:.95rem;line-height:1.5;font-weight:700;
  color:var(--messing)}
.spanne-angaben{margin:10px 0 0;font-size:.98rem;line-height:1.55;color:var(--tinte-2)}
/* Der Hilfebalken erbt sein Aussehen von .hilfe; hier steht nur der Abstand,
   weil er im Kasten enger sitzt als zwischen zwei Fragen. */
.spanne .hilfe{margin-top:14px}

.besichtigung{margin-top:14px;font-size:1.06rem;font-weight:700;color:var(--messing)}

/* Die Vertrauenszeile unter den beiden Knoepfen: Name des Inhabers und die
   Erlaubnis nach § 34c GewO. Sie steht auf JEDER Seite unter /anfrage.

   WARUM NICHT GRAU UND KLEIN. Eine Zulassung ist der Grund, einem Fremden
   eine geerbte Immobilie anzuvertrauen; sie als Kleingedrucktes zu setzen,
   verschenkt sie. --tinte-2 auf --papier misst 8,70:1 und bleibt damit auch
   bei 0,95rem deutlich ueber den geforderten 4,5:1.

   Die Linie oben trennt sie von den Knoepfen, ohne einen Kasten zu bauen:
   Sie gehoert zum Kopfbereich und ist kein eigener Abschnitt. */
.vertrauen{margin-top:18px;padding-top:14px;border-top:1px solid var(--linie-messing);
  font-size:.95rem;line-height:1.5;color:var(--tinte-2);max-width:48ch}

@media(max-width:520px){
  .ergebnis-zeile{grid-template-columns:1fr}
  .ergebnis dd{text-align:left}
}

/* Der Verweis auf die Kosteneinschaetzung. Gleiches Gewicht wie der
   Anrufknopf, eigene Farbe: Zwei gefuellte Knoepfe in derselben Farbe sehen
   nach einer Handlung aus, die man zweimal anklicken kann.
   Papier auf Dunkel = 14,2 zu 1, gerechnet. */
.knopf-rechner{background:var(--dunkel);color:var(--papier);border:1px solid var(--dunkel)}
.knopf-rechner:hover{background:var(--tinte);border-color:var(--tinte)}
.knopf-rechner .wort{border-right-color:rgba(248,245,239,.3)}
.abschluss .knopf-rechner{background:var(--papier);color:var(--tinte);border-color:var(--papier)}

/* Die Groessenangabe unter dem Namen der Objektart. Dazugekommen am
   08.10.2026 mit den neuen sechs Karten: "3-Zimmer-Wohnung" allein laesst den
   Besucher raten, ob seine 68 Quadratmeter gemeint sind. Die Angabe ist eine
   Richtschnur und keine Grenze, deshalb "etwa".
   Tinte-2 auf Weiss = 9,6 zu 1, gerechnet. */
.wahl label{flex-direction:column;align-items:flex-start;gap:3px}
.wahl .umriss{font-weight:400;font-size:.86rem;color:var(--tinte-2)}

/* ---- Verweise auf die beiden Formulare, Fassung vom 11.10.2026 ---------
   Sie stehen auf JEDER Seite des Auftritts: in einer schmalen Leiste unter
   dem Kopf und in der Fusszeile. Wer irgendwo auf temple-nachlass.de landet,
   soll von dort aus zu beiden Formularen kommen, ohne zu suchen.

   AUF DEM HANDY BRECHEN SIE UM, statt zu scrollen. Zwei Beschriftungen mit
   zusammen 51 Zeichen passen bei 390 Pixeln nicht in eine Zeile; eine
   waagerecht scrollende Leiste uebersieht man, eine zweite Zeile nicht. */
.formularnav{border-bottom:1px solid var(--linie);background:var(--papier-2)}
.formularnav .wrap{display:flex;flex-wrap:wrap;gap:4px 26px;padding-top:11px;padding-bottom:11px}
.formularnav a{display:inline-flex;align-items:center;min-height:30px;
  color:var(--messing);text-decoration:none;font-size:.95rem;font-weight:600}
.formularnav a:hover{text-decoration:underline}

/* Die beiden Knoepfe im Einstieg der Startseite. Gleichrangig und beide
   heller als der Anrufknopf: Der Anruf bleibt das erste Ziel. */
.formular-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.formular-knoepfe a{display:inline-flex;align-items:center;justify-content:center;
  flex:1 1 240px;min-height:56px;padding:14px 22px;
  border:1px solid var(--messing);border-radius:12px;
  color:var(--messing);text-decoration:none;font-weight:700;font-size:1.01rem;
  text-align:center}
.formular-knoepfe a:hover{background:rgba(110,84,39,.06)}

/* Die beiden Karten weiter unten auf der Startseite. */
.formular-karten .karten-paar{display:grid;grid-template-columns:1fr;gap:16px;margin-top:22px}
@media(min-width:680px){ .formular-karten .karten-paar{grid-template-columns:repeat(2,1fr)} }
.formular-karte{display:block;padding:24px 22px;background:#FCFAF6;
  border:1px solid var(--linie);border-radius:12px;text-decoration:none}
.formular-karte:hover{border-color:var(--linie-messing)}
.formular-karte .zg{display:block;width:44px;height:44px;color:var(--tinte);margin-bottom:14px}
.formular-karte .zg .a{stroke:var(--messing)}
.formular-karte h3{font-family:'Marcellus',Georgia,serif;font-weight:400;font-size:1.3rem;
  line-height:1.2;color:var(--tinte);margin:0 0 8px}
.formular-karte p{margin:0 0 14px;font-size:.98rem;line-height:1.55;color:var(--tinte-2)}
.formular-karte .pfeil{color:var(--messing);font-weight:700;font-size:.97rem}

/* KOMPLETTCSS:ANFANG */
/* --- KOMPLETTSERVICE, die einzige dunkle Karte. Erzeugt, nicht von Hand
   gepflegt: scripts/nachlass-formular-bauen.mjs schreibt diesen Block in
   BEIDE Stylesheets. Aenderungen dort, nicht hier. --- */
.komplett{margin-top:44px;padding:30px 28px;background:var(--tinte);
  border:1px solid rgba(214,180,117,.38);border-radius:var(--karten-radius,12px);
  color:var(--papier)}
.komplett-bild{width:56px;height:56px;color:var(--messing-hell);display:block}
.komplett-marke{margin:16px 0 0;font-size:.74rem;letter-spacing:.22em;
  text-transform:uppercase;font-weight:700;color:var(--messing-hell)}
.komplett h2{margin:8px 0 0;color:var(--papier)}
.komplett-text{margin:14px 0 0;font-size:1.02rem;line-height:1.65;color:var(--papier)}
.komplett-liste{margin:18px 0 0;padding:0;list-style:none}
.komplett-liste li{position:relative;padding:0 0 0 26px;margin-top:9px;
  font-size:.98rem;line-height:1.55;color:var(--papier)}
.komplett-liste li::before{content:"";position:absolute;left:4px;top:.62em;
  width:9px;height:9px;border:1px solid var(--messing-hell);border-radius:50%}
.komplett-preis{margin:20px 0 0;font-size:.88rem;line-height:1.55;
  color:var(--messing-hell)}
.komplett-knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:24px}
/* AUF DEM HANDY VOLL BREIT. Bei 360 px brach "Komplettservice anfragen"
   sonst in zwei Zeilen, und ein Knopf mit umgebrochener Beschriftung sieht
   aus wie zwei Knoepfe. Voll breit passt der Text in eine Zeile und die
   Trefferflaeche wird groesser; ab 680 px schrumpft er auf seinen Inhalt.
   Der schmale Innenabstand von 10 px ist gemessen und nicht geschaetzt: Bei
   360 px bleiben innerhalb der Karte 248 px, und "Komplettservice anfragen"
   braucht davon 208. Mit 20 px Abstand brach es um. */
.komplett-knopf{display:block;width:100%;padding:15px 10px;min-height:52px;
  background:var(--messing-hell);color:var(--tinte);font-weight:700;
  text-align:center;text-decoration:none;border-radius:var(--karten-radius,12px);
  box-sizing:border-box}
.komplett-zweit{color:var(--papier);text-decoration:underline;
  text-underline-offset:4px;font-weight:700}
/* UNTER 400 PIXEL ENGER. Die Startseite setzt ihren Inhaltsrand auf 28 px,
   die Formularseiten auf 22; bei 360 px bleiben in der Karte dadurch 248
   statt 260 Pixel, und genau an diesen zwoelf Pixeln brach die
   Knopfbeschriftung auf der Startseite um, waehrend sie auf den anderen
   beiden Seiten stand. Gemessen, nicht geschaetzt. */
@media(max-width:400px){
  .komplett{padding:26px 20px}
}
@media(min-width:680px){
  .komplett{padding:38px 36px}
  .komplett-bild{width:64px;height:64px}
  .komplett-knopf{display:inline-block;width:auto;padding:15px 28px}
}
/* KOMPLETTCSS:ENDE */