@font-face{font-family:"Nunito";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/nunito-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/nunito-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/nunito-latin-800-normal.woff2) format("woff2")}

:root{
  /* Farbtoken wortgleich mit /assets/style.css der Hauptseite (17.09.2026).
     Abweichung vorher: --steel war #4A5563 statt #5A6573, und die Amber-Toene,
     der Schatten und der Markenverlauf fehlten ganz. */
  --cyan:#00D4E0; --cyan-deep:#00B6CB; --lime:#A8E63A; --amber:#FFC107; --orange:#FF8A00;
  --amber-soft:#FFF4D6; --amber-line:#F3DFA0; --amber-text:#8A6508; --amber-dark:#D9A406;
  --space:#08111F; --steel:#5A6573; --fog:#C7D0DA; --mist:#F4F6F8; --white:#FFFFFF;
  --shadow:0 6px 24px rgba(8,17,31,.07);
  --link:#006B78; --focus:#FF8A00;
  /* Rahmen von Bedienelementen. WCAG 1.4.11 verlangt fuer sie 3:1 gegen den
     Hintergrund - --fog (#C7D0DA) kommt auf 1,56:1 und begrenzte bis zum
     19.09.2026 alle Kacheln, Reiter und Knoepfe dieser Seite. Fuer die
     Zielgruppe ist das der falsche Wert. Die neuen Toene liegen bei 3,5
     und 4,9:1 und bleiben farblich im Rahmen. */
  --rahmen:#7F8B9A;        /* 3,46:1 auf Weiss */
  --rahmen-aktiv:#007C8A;  /* 4,94:1 auf Weiss, CI-Cyan abgedunkelt */
  --ok:#1B6E3A; --warn:#8A5A00; --bad:#A3261A;
  --radius:16px;
  --fs:20px;
}
html[data-size="2"]{--fs:23px}
html[data-size="3"]{--fs:27px}
*{box-sizing:border-box}
html{font-size:var(--fs);-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.55;color:var(--space);background:var(--mist)}
a{color:var(--link);text-underline-offset:.15em}
:focus-visible{outline:3px solid var(--space);outline-offset:3px;
  box-shadow:0 0 0 7px rgba(255,138,0,.5);border-radius:6px}
.wrap{max-width:52rem;margin:0 auto;padding:0 16px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--white);padding:.5rem 1rem;z-index:10}
.skip:focus{left:8px}
[hidden]{display:none!important}

/* Kopf */
/* Kopf wie header.site auf senio-tec.de: weiss, duenne Linie, klebend.
   Vorher dunkelblau - das war der auffaelligste Unterschied zur Hauptseite. */
.top{background:var(--white);color:var(--space);border-bottom:1px solid #E7EBEF;position:sticky;top:0;z-index:40}
.top-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px}
.brand{color:var(--space);text-decoration:none;display:flex;flex-direction:column}
.wordmark{display:inline-flex;align-items:center;font-weight:800;letter-spacing:-.01em;font-size:1.6rem;line-height:1}
.wordmark .grad{background:linear-gradient(90deg,var(--cyan) 0%,var(--cyan-deep) 25%,var(--lime) 55%,var(--amber) 80%,var(--orange) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.colon{display:inline-flex;flex-direction:column;justify-content:center;gap:.14em;width:.2em;height:1em;margin:0 .045em;position:relative;top:.02em}
.colon i{display:block;width:.2em;height:.2em;border-radius:50%;background:radial-gradient(circle at 68% 28%,#A8F5FF 0%,var(--cyan) 42%,var(--cyan-deep) 100%);box-shadow:0 0 .12em rgba(0,212,224,.65)}
.claim{font-size:.7rem;color:var(--steel);margin-top:4px}
.top-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fontsize{display:flex;border:2px solid var(--fog);border-radius:999px;overflow:hidden}
.fontsize button{background:var(--white);color:var(--space);border:0;font:inherit;font-weight:800;font-size:.8rem;min-width:48px;min-height:44px;cursor:pointer}
.fontsize button+button{border-left:2px solid var(--fog)}
.fontsize button[aria-pressed="true"]{background:var(--deepspace,#08111F);color:var(--white)}
.call{color:var(--space);background:var(--amber);font-weight:800;text-decoration:none;padding:.45rem 1.1rem;border-radius:999px;font-size:.85rem;min-height:44px;display:inline-flex;align-items:center;gap:.4rem;box-shadow:0 3px 0 var(--amber-dark)}
.call:hover{background:#FFCE33}

/* Inhalt */
/* Sanfter Amber-Verlauf am Seitenanfang, wie .hero auf senio-tec.de */
main{padding-top:1.1rem;padding-bottom:2rem;background:linear-gradient(180deg,var(--amber-soft) 0%,var(--mist) 165px)}

/* Wichtig: style.css setzt fuer die Hauptseite section{padding:62px 0}. Das
   galt bisher auch hier und legte um JEDEN Abschnitt 124 Pixel tote Flaeche -
   bei sechs Abschnitten ueber 700 Pixel, die niemand sieht und durch die alle
   scrollen mussten. Die Karten haben es nicht gezeigt, weil .card ein eigenes
   padding setzt; bei .einstieg und .umfeld schlug es voll durch.
   Die Abstaende stehen jetzt hier, wo sie hingehoeren. (19.09.2026) */
main>section{padding:0}
main>section+section{margin-top:1.1rem}
h1{font-size:2rem;line-height:1.15;margin:.2rem 0 .6rem;letter-spacing:-.01em}
h2{font-size:1.35rem;line-height:1.25;margin:0 0 .6rem}
h3{font-size:1.05rem;margin:1rem 0 .4rem}
.lead{font-size:1.05rem;margin:0 0 1rem}
.ai-note{background:var(--amber-soft);border:1px solid var(--amber-line);border-left:6px solid var(--amber);color:var(--amber-text);padding:.8rem 1.1rem;border-radius:12px;margin:0 0 1.2rem}
.card{background:var(--white);border:1px solid #E7EBEF;border-radius:18px;padding:1.2rem 1.3rem;margin:0;box-shadow:var(--shadow)}
/* Nummernkreise wie .known .k .q auf der Hauptseite: Amber statt Dunkelblau */
.num{display:inline-flex;align-items:center;justify-content:center;width:1.8em;height:1.8em;border-radius:50%;background:var(--amber-soft);border:1px solid var(--amber-line);color:var(--amber-text);font-size:.8em;font-weight:900;margin-right:.35em}

/* Tabs */
.tabs{display:flex;gap:8px;margin:0 0 .8rem;flex-wrap:wrap;align-items:center}
.tab-oder{font-weight:700;color:var(--steel);font-size:.85rem;flex:1 1 100%;text-align:center}
.tabs button{flex:1 1 12rem;font:inherit;font-weight:800;min-height:50px;border-radius:12px;border:2px solid var(--rahmen);background:var(--mist);color:var(--space);cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--amber);color:var(--space);border-color:var(--amber);box-shadow:0 3px 0 var(--amber-dark)}

/* Formular */
fieldset{border:0;padding:0;margin:0 0 1rem}
legend{font-weight:800;margin-bottom:.5rem;padding:0}
.device-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,8.5rem),1fr));gap:8px}
.device-grid label{position:relative;cursor:pointer}
.device-grid input{position:absolute;opacity:0;inset:0}
.device-grid span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:52px;padding:.3rem .6rem;border:2px solid var(--rahmen);border-radius:12px;font-weight:700;background:var(--white)}
.device-grid input:checked+span{border-color:var(--cyan-deep);background:#E6F9FB;box-shadow:inset 0 0 0 2px var(--cyan-deep)}
.device-grid input:focus-visible+span{outline:3px solid var(--space);outline-offset:2px;box-shadow:0 0 0 7px rgba(255,138,0,.5)}
.field{margin:0 0 .8rem}
.field>label{display:block;font-weight:800;margin-bottom:.35rem}
textarea,input[type=email]{width:100%;font:inherit;padding:.7rem .9rem;border:2px solid var(--rahmen);border-radius:12px;background:var(--white);color:var(--space)}
textarea{min-height:5.5rem;resize:vertical}
/* Die Betrugspruefung bekommt mehr Platz: Dort wird eine ganze
   Nachricht hineinkopiert, keine einzelne Frage. */
html[data-modus="betrug"] #q{min-height:8rem}
textarea:focus,input[type=email]:focus{border-color:var(--rahmen-aktiv);outline:3px solid rgba(0,182,203,.35);outline-offset:0}
.q-wrap{position:relative}
.mic{margin-top:8px;display:inline-flex;align-items:center;gap:.4rem;font:inherit;font-weight:700;min-height:48px;padding:.3rem .9rem;border-radius:12px;border:2px solid var(--fog);background:var(--white);cursor:pointer}
.mic svg{width:1.2em;height:1.2em;fill:currentColor}
.mic[aria-pressed="true"]{background:#FFE9E6;border-color:var(--bad);color:var(--bad)}
/* Was hinter dem gewaehlten Reiter passiert. Bewusst in voller Lesegroesse
   und nicht als Kleingedrucktes: Wer nicht weiss, wofuer das Feld da ist,
   tippt gar nichts erst hinein. */
.was-hier{margin:0 0 1.3rem;color:var(--steel);line-height:1.5;
  border-left:4px solid var(--amber);padding-left:.8rem}
.privacy-hint{font-size:.85rem;color:var(--steel);margin:.5rem 0 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;font:inherit;font-weight:800;min-height:52px;padding:.4rem 1.4rem;border-radius:999px;border:2px solid var(--fog);background:var(--white);color:var(--space);text-decoration:none;cursor:pointer;margin:.2rem .3rem .2rem 0}
.btn:hover{border-color:var(--cyan-deep);color:var(--cyan-deep)}
/* Handlungsfarbe der Marke ist Amber, nicht Dunkelblau - wie .btn-call auf der Hauptseite */
.btn.primary{background:var(--amber);color:var(--space);border-color:var(--amber);box-shadow:0 3px 0 var(--amber-dark),var(--shadow)}
.btn.primary:hover{background:#FFCE33;border-color:#FFCE33;color:var(--space)}
.btn.primary:active{box-shadow:0 1px 0 var(--amber-dark);transform:translateY(1px)}
.btn.ghost{border-color:var(--fog)}
.btn.big{width:100%;min-height:64px;font-size:1.1rem}
.btn[disabled]{opacity:.6;cursor:wait}
.status{min-height:1.5em;margin:.6rem 0 0;font-weight:700}
.status.err{color:var(--bad)}
.status.ok{color:var(--ok)}

/* Antwort */
.answer{border-top:8px solid var(--cyan-deep)}
.answer-head{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:.6rem}
.ai-badge,.demo-badge{font-size:.75rem;font-weight:800;padding:.2rem .6rem;border-radius:999px;background:var(--space);color:var(--white)}
.demo-badge{background:var(--amber);color:var(--space)}
.verdict{font-weight:800;padding:.7rem 1rem;border-radius:10px;margin-bottom:.8rem;font-size:1.05rem}
.verdict.v-bad{background:#FDE8E6;color:var(--bad);border-left:8px solid var(--bad)}
.verdict.v-mid{background:#FFF4D6;color:var(--warn);border-left:8px solid var(--amber)}
.verdict.v-ok{background:#E7F5EC;color:var(--ok);border-left:8px solid var(--ok)}
/* Eigener Name statt .steps: style.css belegt .steps fuer die dreispaltige
   Schrittleiste der Startseite. Beide Stylesheets liegen auf dieser Seite
   uebereinander, und das Raster gewann - die Anleitungsschritte einer Antwort
   standen dadurch NEBENEINANDER. Eine Anleitung, die man der Reihe nach
   befolgt, muss untereinander stehen: Man liest einen Schritt, fuehrt ihn am
   Geraet aus und sucht dann den naechsten. (19.09.2026) */
.anleitung-schritte{counter-reset:s;list-style:none;padding:0;margin:1rem 0;
  display:block}
.anleitung-schritte li{counter-increment:s;position:relative;padding:.6rem .6rem .6rem 3.2rem;margin-bottom:.5rem;background:var(--mist);border-radius:12px}
.anleitung-schritte li::before{content:counter(s);position:absolute;left:.6rem;top:.55rem;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--cyan);color:var(--space);font-weight:800;display:flex;align-items:center;justify-content:center}
.tip{background:#FFF4D6;border-radius:10px;padding:.6rem .9rem}
.escalate{background:#FDE8E6;border-radius:12px;padding:.2rem 1rem .6rem;margin:1rem 0}
.small{font-size:.8rem;color:var(--steel)}
.answer-actions{display:flex;flex-wrap:wrap;margin:1rem 0}
/* Wie .tax-box auf senio-tec.de: weiss, Schatten, cyanfarbene Kante links.
   Dort hat Cyan seinen Platz als Akzent - Amber bleibt der Handlung vorbehalten. */
.human{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:var(--white);color:var(--space);border-radius:18px;box-shadow:var(--shadow);
  border-left:6px solid var(--cyan-deep);padding:1.1rem 1.3rem}
.human h3{margin:0 0 .3rem}
.human p{margin:0;color:#D4DCE4}
.human .btn.primary{background:var(--cyan);color:var(--space);border-color:var(--cyan)}

/* Newsletter */
.newsletter{border-left:8px solid var(--lime)}
.seg label{display:flex;align-items:center;gap:.5rem;min-height:44px;cursor:pointer}
.seg input,.consent input{width:1.4em;height:1.4em;flex:none;accent-color:var(--space)}
.consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.85rem;margin:0 0 1rem;cursor:pointer}
.consent input{margin-top:.2em}
.assist{border-left:8px solid var(--amber)}
.faq summary{font-weight:800;cursor:pointer;min-height:44px}
.faq li{margin-bottom:.4rem}
.foot{background:var(--space);color:var(--fog);padding:1.4rem 0;font-size:.85rem}
.foot a{color:var(--cyan)}

@media (max-width:560px){
  h1{font-size:1.6rem}
  .top-actions{width:100%;justify-content:space-between}
  .human .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Druck: nur der Spickzettel */
#printsheet{display:none}
@media print{
  @page{size:A4;margin:16mm}
  body{background:#fff}
  body>*:not(#printsheet){display:none!important}
  #printsheet{display:block;font-size:15pt;color:#000}
  #printsheet .wordmark{font-size:24pt;color:#08111F}
  #printsheet .colon i{box-shadow:none;background:#00B6CB;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .ps-head{display:flex;justify-content:space-between;align-items:center;border-bottom:3px solid #08111F;padding-bottom:6pt;margin-bottom:12pt}
  .ps-tag{font-weight:800;font-size:12pt;border:2px solid #08111F;border-radius:6pt;padding:2pt 8pt}
  #printsheet h1{font-size:22pt;margin:0 0 8pt}
  #ps-steps{padding-left:1.4em}
  #ps-steps li{margin-bottom:8pt;padding-left:4pt}
  #ps-steps li::marker{font-weight:800}
  .ps-foot{margin-top:18pt;border-top:1px solid #999;padding-top:8pt}
  .ps-small{font-size:10pt;color:#333}
}

/* ---------- Foto-Feld (Stufe 3, eingebaut 17.09.2026) ---------- */
/* Die Dateifelder liegen unsichtbar hinter den beiden Knoepfen: <label for>
   loest sie aus. Nicht display:none verwenden - manche Vorleseprogramme
   finden das Feld dann nicht mehr. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Der Fotobereich ist jetzt zugeklappt (<details>). Aufgeklappt sah die
   Seite nach sehr viel Arbeit aus, obwohl bei einer Technik-Frage kaum
   jemand ein Foto braucht. Die Zusammenfassung bleibt eine grosse,
   gut treffbare Flaeche. */
.foto-feld{margin-top:.8rem;padding-top:.7rem;border-top:2px dashed var(--fog)}
.foto-titel{margin:0;font-weight:800;cursor:pointer;list-style:none;
  display:flex;align-items:center;gap:.5rem;min-height:44px;padding:.2rem 0}
.foto-titel::-webkit-details-marker{display:none}
.foto-titel::before{content:"+";display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;flex:0 0 28px;border-radius:50%;border:2px solid var(--fog);
  background:var(--mist);font-weight:800;line-height:1}
.foto-feld[open] .foto-titel::before{content:"\2212"}
.foto-titel:focus-visible{outline:3px solid var(--space);outline-offset:2px;box-shadow:0 0 0 7px rgba(255,138,0,.5);border-radius:8px}
.foto-feld[open] .foto-titel{margin-bottom:.4rem}
.foto-frei{font-weight:400;color:var(--steel)}
.foto-erklaerung{margin:0 0 .7rem;color:var(--steel)}
.foto-knoepfe{display:flex;gap:.5rem;flex-wrap:wrap}
.foto-knoepfe .btn{margin:0}
.foto-vorschau{display:flex;gap:1rem;align-items:flex-start;margin-top:.9rem;flex-wrap:wrap}
.foto-vorschau img{max-width:220px;max-height:220px;border-radius:12px;border:2px solid var(--fog);background:var(--mist)}
.foto-daneben{display:flex;flex-direction:column;gap:.5rem}
.foto-info{margin:0;color:var(--steel);font-weight:700}
.foto-feld .privacy-hint{margin-top:.8rem}
@media print{.foto-feld{display:none}}

/* ---------- Rueckfrage nach der Marke ---------- */
.rueckfrage{margin:.9rem 0 1.1rem;padding:1rem;border-radius:12px;
  background:var(--amber-soft);border:2px solid var(--amber-line)}
.rf-frage{display:block;font-weight:800;margin-bottom:.6rem;color:var(--amber-text)}
.rf-zeile{display:flex;gap:.6rem;flex-wrap:wrap}
.rf-zeile input{flex:1 1 12rem;font:inherit;padding:.7rem .9rem;border:2px solid #8C97A4;
  border-radius:12px;background:var(--white);color:var(--space);min-height:52px}
.rf-zeile .btn{margin:0}
.rf-hinweis{margin:.6rem 0 0;color:var(--amber-text);font-size:.95rem}
@media print{.rueckfrage{display:none}}

/* Fremdes Thema: sachlicher Hinweis, kein Alarmrot - es ist ja kein Fehler,
   sondern nur nicht unser Gebiet. */
.escalate.fremd{background:var(--mist);border-left:6px solid var(--steel)}

/* Fundstelle beim Hersteller - die weiterfuehrende Hilfe steht VOR dem Hinweis,
   dass es nicht unser Gebiet ist. Wer eine Frage hat, will zuerst die Antwort. */
.fund{background:var(--amber-soft);border:1px solid var(--amber-line);border-radius:14px;
  padding:1rem 1.2rem;margin:1rem 0}
.fund h3{margin:0 0 .4rem;font-size:1.05rem;color:var(--amber-text)}
.fund p{margin:0 0 .7rem}
.fund .btn{margin:0 .4rem .3rem 0}
.umfang{background:var(--mist);border-radius:10px;padding:.7rem 1rem;margin:.6rem 0 1.2rem;
  font-size:.95rem;color:var(--space)}

/* Teaserbild in der Technikhilfe: klein und seitlich, der Text bleibt die
   Hauptsache. Auf schmalen Bildschirmen rueckt es unter den Text. */
/* --- Einstieg und Umfeld (19.09.2026) ---
   Vorher stand oben ein Block aus Ueberschrift, drei Zeilen Einleitung,
   einem vierzeiligen KI-Kasten, einem Bild und einem Absatz "Womit wir
   helfen" - zusammen fast eine Bildschirmhoehe, bevor ueberhaupt ein
   Eingabefeld zu sehen war. Auf einer Seite, deren Zweck das Eingabefeld
   ist, gehoert das Eingabefeld nach oben. Der erklaerende Teil steht
   jetzt unter dem Formular, wo er niemanden aufhaelt. */
.einstieg{margin:0}
.einstieg h1{margin:0 0 .3em}
.einstieg .lead{margin:0 0 .6rem;max-width:44rem}

/* Der Pflichthinweis nach Artikel 50 KI-VO - eine Zeile statt eines Kastens.
   Er muss vor der Nutzung zu sehen sein, nicht gross sein. */
.ki-strich{margin:0;padding:.55rem 0 .55rem .9rem;border-left:5px solid var(--amber);
  color:var(--amber-text);font-size:.98rem;background:var(--amber-soft);
  border-radius:0 10px 10px 0}
.ki-strich strong{color:var(--amber-text)}

.umfeld{margin:0}
.umfeld-raster{display:grid;grid-template-columns:1fr minmax(220px,300px);gap:1.6rem;
  align-items:start}
.umfeld-raster>div>*:first-child{margin-top:0}
.ki-teaser{margin:0}
.ki-lang{margin:1rem 0 0;font-size:.95rem;color:var(--steel);
  padding-left:.9rem;border-left:3px solid var(--fog)}
.ki-lang a{color:var(--link);font-weight:700;white-space:nowrap}
@media(max-width:760px){
  .umfeld-raster{grid-template-columns:1fr}
  .ki-teaser{max-width:320px;margin:0 auto}
}

/* Hinweis zum Datenschutz direkt ueber dem Absendeknopf - dort, wo die
   Entscheidung faellt, und nicht im Kleingedruckten am Seitenende. */
.datenschutz{margin:1rem 0 .8rem;padding:.7rem .9rem;background:var(--mist);
  border-radius:10px;font-size:.92rem;color:var(--space);line-height:1.5}
.datenschutz a{color:var(--link);font-weight:700}
.leise{font-weight:400;color:var(--steel);font-size:.9rem}
.ki-teaser img{width:100%;height:auto;border-radius:14px;box-shadow:var(--shadow);display:block}

/* Hinweis auf das Einfuegen aus der Zwischenablage. Wer einen Bildschirm-
   ausschnitt macht, hat ihn dort - nicht als Datei. (18.09.2026) */
.foto-einfuegen{display:inline-block;margin-top:.35rem;font-size:.92rem;color:var(--steel)}
.foto-einfuegen kbd{font:inherit;font-weight:700;background:var(--white);color:var(--space);
  border:1px solid var(--fog);border-bottom-width:2px;border-radius:6px;padding:.05em .4em}

/* ==========================================================================
   Gestaltungsdurchgang 19.09.2026
   Die Seite soll die erste Anlaufstelle sein, wenn jemand eine Technikfrage
   hat. Drei Dinge entscheiden darüber: Man muss sofort sehen, wo man tippt;
   man muss wissen, was passiert, wenn man tippt; und man darf nicht vor
   einem leeren Feld stehen und nicht wissen, was man hineinschreiben soll.
   ========================================================================== */


/* --- Gerätewahl ----------------------------------------------------------
   Vorher ein auto-fit-Raster: sieben Kacheln ergaben 5 + 2, und die einzige
   zweizeilige Beschriftung machte ihre Kachel doppelt so hoch. Feste vier
   Spalten ergeben 4 + 3 und eine ruhige Kante. */
.device-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.device-grid span{min-height:54px;white-space:nowrap}
.device-grid input:checked+span{border-color:var(--rahmen-aktiv);background:#E6F9FB;
  box-shadow:inset 0 0 0 2px var(--rahmen-aktiv)}
@media(max-width:760px){
  .device-grid{grid-template-columns:repeat(2,1fr)}
  .device-grid span{white-space:normal}
}

/* --- Datenschutzhinweis --------------------------------------------------
   Als grauer Kasten nahm er dem Absendeknopf direkt darüber das Gewicht.
   Jetzt eine ruhige Zeile: gelesen wird sie trotzdem, weil sie an der
   Stelle steht, an der die Entscheidung fällt. */
.datenschutz{display:flex;gap:.6rem;align-items:flex-start;background:none;padding:0;
  margin:.9rem 0 .8rem;font-size:.88rem;color:var(--steel);line-height:1.5}
.dz-zeichen{flex:0 0 1.3rem;width:1.3rem;height:1.3rem;border-radius:50%;
  background:var(--mist);border:1px solid var(--fog);color:var(--steel);
  font-weight:900;font-size:.8rem;display:inline-flex;align-items:center;
  justify-content:center;margin-top:.1rem}
.datenschutz a{color:var(--link);font-weight:700;white-space:nowrap}

/* --- So läuft es ---------------------------------------------------------
   Drei Schritte, damit klar ist, was nach dem Antippen passiert. */
.ablauf h2{font-size:1.1rem;margin:0 0 .7rem}
.ablauf-schritte{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:1rem}
.ablauf-schritte li{background:var(--white);border:1px solid #E7EBEF;border-radius:14px;
  padding:.9rem 1rem;font-size:.92rem;color:var(--steel);line-height:1.5}
.ablauf-schritte strong{display:block;color:var(--space);font-size:1rem;margin:.35rem 0 .2rem}
.ablauf-schritte .nr{display:inline-flex;align-items:center;justify-content:center;
  width:1.9rem;height:1.9rem;border-radius:50%;background:var(--amber-soft);
  border:1px solid var(--amber-line);color:var(--amber-text);font-weight:900;font-size:.85rem}
.ablauf-schritte a{color:var(--link);font-weight:700;white-space:nowrap}
@media(max-width:760px){ .ablauf-schritte{grid-template-columns:1fr} }

/* ==========================================================================
   Gewichtung, 19.09.2026
   Bis hierher waren alle fünf Abschnitte gleich gestaltete weiße Karten auf
   grauem Grund. Dadurch sagte nichts, was die Hauptsache ist – man sah eine
   Liste gleichwertiger Kästen und musste selbst herausfinden, wo man tippt.
   Eine Seite hat eine Hauptsache. Hier ist es das Eingabefeld.
   ========================================================================== */

/* Das Werkzeug: kräftiger Schatten, amberfarbene Oberkante als Signal der
   Marke, etwas mehr Luft innen. */
.card.werkzeug{border:1px solid #DDE3EA;border-top:5px solid var(--amber);
  border-radius:18px;padding:1.3rem 1.4rem 1.4rem;
  box-shadow:0 10px 30px rgba(8,17,31,.10)}

/* Alles Nachgeordnete wird ruhiger: keine Schatten, nur eine Haarlinie.
   So bleibt der Blick oben. */
.ablauf-schritte li,.card.assist{box-shadow:none;border:1px solid #E2E7EC}

/* Reiter: Der aktive Reiter war amberfarben – dieselbe Signalfarbe wie der
   Absendeknopf. Zwei amberfarbene Flächen in einer Karte heben sich
   gegenseitig auf. Der aktive Reiter ist jetzt dunkel, das Amber bleibt dem
   Knopf vorbehalten, auf den es ankommt. */
.tabs button[aria-selected="true"]{background:var(--space);color:var(--white);
  border-color:var(--space);box-shadow:none}
.tabs button[aria-selected="true"]:hover{background:#16233a;border-color:#16233a}

/* Vorschläge: sichtbar sekundär gegenüber dem Eingabefeld, aber mit einem
   Rahmen, der die Schwelle von 3:1 hält. */

/* Das Eingabefeld ist die Hauptsache und darf danach aussehen. */
.field>label{font-size:1.05rem}
#q{min-height:6rem;font-size:1.02rem;padding:.85rem 1rem}

/* Die Gerätewahl ist Schritt 2 und freiwillig – kleiner und leiser. */
.devices legend{font-size:.98rem}
.device-grid span{min-height:48px;font-size:.92rem;font-weight:600;border-width:1px}
.device-grid input:checked+span{border-width:2px;font-weight:800}

/* Ein Knopf, der nicht zu übersehen ist. */
.btn.primary.big{width:100%;min-height:62px;font-size:1.08rem;border-radius:14px}

/* Die nachgeordneten Abschnitte bekommen eine gemeinsame, leise Überschrift. */
.ablauf h2,.umfeld h2{font-size:1rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--steel);font-weight:800}

/* ==========================================================================
   Nach dem ersten Blick auf die gerenderte Seite, 19.09.2026
   Bis hierher war die Seite nur im Quelltext beurteilt worden. Vier Dinge
   sieht man erst im Bild.
   ========================================================================== */

/* 1. Die amberfarbene KI-Leiste und die amberfarbene Oberkante der Karte
      stießen aneinander und verschmolzen zu einem Block. Die Karte bekommt
      eine ruhige Oberkante; das Signal-Amber bleibt dem Hinweis und dem
      Absendeknopf. */
.card.werkzeug{border-top:1px solid #DDE3EA}
.einstieg{margin-bottom:.3rem}

/* 2. Die Überschrift klebte am Seitenkopf. */
main{padding-top:1.6rem}

/* 3. Der Sprechen-Knopf stand als eigene Zeile unter dem Eingabefeld und sah
      aus wie ein vergessenes Bedienelement. Er gehört an das Feld. */
.q-wrap{position:relative}
.mic{position:absolute;right:.6rem;bottom:.6rem;margin:0;min-height:42px;
  padding:.25rem .8rem;font-size:.85rem;border-width:1px;border-color:var(--rahmen);
  background:var(--white);box-shadow:0 2px 6px rgba(8,17,31,.08)}
#q{padding-bottom:3.4rem}
@media(max-width:560px){
  .mic{position:static;margin-top:.5rem}
  #q{padding-bottom:.85rem}
}

/* 4. Der Datenschutzhinweis zerfiel durch nowrap und fettgesetzte Teile in
      Fetzen mit großen Lücken. Eine Zeile, die umbrechen darf. */
.datenschutz{display:block;padding-left:1.9rem;position:relative;text-wrap:pretty}
.datenschutz .dz-zeichen{position:absolute;left:0;top:.15rem}
.datenschutz a{white-space:normal}

/* Feinschliff nach dem zweiten Blick */
/* Die Überschrift saß im amberfarbenen Band, ohne Luft nach oben. */
main{padding-top:2.2rem}
/* Ein leerer Statusabsatz hinterließ am Kartenende eine tote Zeile. */
.status:empty{display:none}
/* Das Eingabefeld war höher als nötig, weil unten Platz für den
   Sprechen-Knopf reserviert war. Der Knopf darf überlappen. */
#q{min-height:5.5rem;padding-bottom:3rem}

/* --- Handybreite, nach dem Blick auf 390 Pixel --- */
/* Die Zusammenfassung des Fotobereichs: Plus-Zeichen, Text, Zusatz.
   Als Flexzeile mit Umbruch zerfiel sie auf schmalen Bildschirmen in drei
   Zeilen. Als Raster bleibt das Plus links stehen, der Text daneben, der
   Zusatz darunter. */
.foto-titel{display:grid;grid-template-columns:auto 1fr;gap:.1rem .6rem;
  align-items:center;flex-wrap:nowrap}
.foto-titel::before{grid-row:1 / span 2}
.foto-titel .foto-wort{font-weight:800;grid-column:2}
.foto-titel .foto-frei{grid-column:2;font-weight:400;font-size:.9rem;color:var(--steel)}
@media(max-width:560px){
  /* Die Reiter dürfen nebeneinander bleiben, sie sind kurz genug. */
  .tabs button{flex:1 1 8rem;font-size:.92rem}
  .foto-titel{font-size:.95rem}
}

/* Einwilligung in die KI-Verarbeitung. Kein Kleingedrucktes: Wer zustimmen
   soll, muss lesen koennen, wozu. Das Kaestchen ist gross genug fuer
   ungenaue Finger und traegt einen sichtbaren Fokusrahmen. */
.einwilligung{display:flex;gap:.7rem;align-items:flex-start;margin:1rem 0 1.1rem;
  padding:.9rem 1rem;background:var(--mist);border:2px solid var(--rahmen);border-radius:12px}
.einwilligung input[type=checkbox]{width:26px;height:26px;flex:0 0 26px;margin:.15rem 0 0;
  accent-color:var(--amber-dark);cursor:pointer}
.einwilligung label{line-height:1.5;cursor:pointer}
.einwilligung:focus-within{border-color:var(--rahmen-aktiv)}

/* Nachfrage vor dem Vorlesen - erscheint erst beim Antippen. */
.ton-einwilligung{margin:0 0 1rem;padding:.9rem 1rem;background:var(--mist);
  border-left:5px solid var(--amber);border-radius:12px;line-height:1.5}
.ton-einwilligung p{margin:0 0 .7rem}
.ton-zeile{display:flex;gap:.6rem;flex-wrap:wrap}