:root{--bg:#f6f4ee;--fg:#16221b;--card:#fff;--line:#d9d4c7;--acc:#1f6f43;--red:#b3261e;--amb:#a86a00;--grn:#1f6f43;--fs:min(24px,6.8vw);--back:#3d4f5c}
:root[data-fs="2"]{--fs:min(28px,7.6vw)}:root[data-fs="3"]{--fs:min(33px,8.3vw)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:var(--fs)/1.4 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
#app{max-width:760px;margin:0 auto;padding:16px}
h1{font-size:1.25em;margin:8px 0 14px}h2{font-size:1.1em;margin:18px 0 8px}
.big{display:flex;align-items:center;gap:16px;width:100%;min-height:96px;margin:0 0 16px;padding:18px 20px;border:0;border-radius:22px;font:inherit;font-weight:700;color:#fff;background:var(--acc);text-align:start;cursor:pointer}
.big.b2{background:#2c5d8f}.big.b3{background:#7a4a1a}
.big svg{width:1.5em;height:1.5em;flex:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:64px;padding:12px 22px;border:0;border-radius:16px;font:inherit;font-weight:700;color:#fff;background:var(--acc);cursor:pointer}
.btn.alt{background:#e4e0d3;color:var(--fg)}.btn.red{background:var(--red)}.btn[disabled]{opacity:.55}
.btn.full{width:100%;margin:6px 0}
.top{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.top .btn{min-height:56px;padding:8px 16px;white-space:nowrap;flex:none}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px 18px;margin:0 0 14px}
.row{display:flex;align-items:center;gap:12px;width:100%;padding:16px 18px;margin:0 0 12px;background:var(--card);border:1px solid var(--line);border-radius:18px;font:inherit;text-align:start;cursor:pointer;color:inherit}
.row .t{flex:1;min-width:0}.row .s{font-size:.75em;color:#55605a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dot{flex:none;width:22px;height:22px;border-radius:50%;background:#bbb}.dot.rot{background:var(--red)}.dot.gelb{background:#e0a100}.dot.gruen{background:var(--grn)}
.amp{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:18px;margin:0 0 14px;font-weight:700;color:#fff}
.amp.rot{background:var(--red)}.amp.gelb{background:#a86a00}.amp.gruen{background:var(--grn)}
.test{background:#fff3c4;border:2px solid #d9a800;border-radius:14px;padding:10px 14px;margin:0 0 14px;font-size:.7em;font-weight:700}
.note{font-size:.72em;color:#4a554f;margin:10px 0}
.opt{display:block;width:100%;text-align:start;font:inherit;background:var(--card);border:3px solid var(--line);border-radius:20px;padding:16px 18px;margin:0 0 12px;cursor:pointer;color:inherit}
.opt.on{border-color:var(--acc);background:#eaf5ee}
.opt b{display:block;font-size:1.05em}
.opt .sm{font-size:.7em;color:#4a554f;margin-top:6px;white-space:pre-wrap}
.txt{white-space:pre-wrap;font-size:.8em;background:#faf8f2;border:1px solid var(--line);border-radius:12px;padding:12px;margin:8px 0}
textarea,input,select{width:100%;font:inherit;padding:14px;margin:6px 0 12px;border:2px solid var(--line);border-radius:14px;background:#fff;color:var(--fg)}
textarea{min-height:200px}
label{display:block;font-size:.8em;font-weight:700;margin-top:6px}
.photo{width:100%;border-radius:12px;margin:0 0 10px;border:1px solid var(--line)}
.thumbs{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}.thumbs .photo{width:calc(33.3% - 7px);max-height:170px;object-fit:cover;margin:0}
.err{background:#fde7e5;border:2px solid var(--red);border-radius:14px;padding:12px 14px;margin:10px 0;font-size:.8em}
.ok{background:#e3f4e8;border:2px solid var(--grn);border-radius:14px;padding:12px 14px;margin:10px 0;font-size:.85em;font-weight:700}
.spin{padding:30px;text-align:center;color:#55605a}
html[dir=rtl] .big,html[dir=rtl] .row,html[dir=rtl] .opt{text-align:right}

.qr{background:#fff;padding:12px;border-radius:14px;max-width:320px;margin:10px auto}.qr svg{display:block;width:100%;height:auto}
.dev{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--line)}.dev .dn{flex:1 1 100%;font-weight:700}.dev .btn{min-height:50px;padding:6px 14px;font-size:.8em}

.camwrap{position:fixed;inset:0;background:#000;z-index:50}.camvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.camframe{position:absolute;left:6%;right:6%;top:16%;bottom:24%;border:8px solid #d93025;border-radius:22px;transition:border-color .2s,box-shadow .2s;box-shadow:0 0 0 2000px rgba(0,0,0,.28)}
.camframe.f-wait{border-color:#e0a100}.camframe.f-ok{border-color:#1fb85a;box-shadow:0 0 0 2000px rgba(0,0,0,.18),0 0 26px #1fb85a}
.camframe{background:none!important;padding:0;margin:0}   /* innen durchsichtig – die alte Klasse „ok“ hatte den Rahmen hell gefüllt */
.camtop{position:absolute;left:0;right:0;top:0;padding:calc(12px + env(safe-area-inset-top)) 16px 10px;background:linear-gradient(#000a,#0000);color:#fff}
.camtxt{font-size:1em;font-weight:700;text-align:center;text-shadow:0 1px 4px #000}
.campbar{height:10px;border-radius:6px;background:#fff4;margin-top:8px;overflow:hidden}#campb{height:100%;width:0;background:#1fb85a;transition:width .14s}
.cambot{position:absolute;left:0;right:0;bottom:0;display:flex;gap:12px;padding:12px 16px calc(14px + env(safe-area-inset-bottom));background:linear-gradient(#0000,#000b)}.cambot .btn{flex:1}

#app{padding-bottom:120px}
.backbar{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:10px 16px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(#f6f4ee00,#f6f4ee 28%)}
.backbar .backbtn{display:flex;width:100%;max-width:728px;margin:0 auto;min-height:80px;font-size:1.15em;background:var(--back);color:#fff;border:3px solid #fff;box-shadow:0 4px 14px #0003}
.big.b4{background:#b3590a}

/* Lange Wörter (Russisch, Türkisch, Polnisch …) dürfen umbrechen, nichts läuft über den Rand */
body{overflow-wrap:anywhere;hyphens:auto}
h1,h2,.big,.btn,.row,.opt,.card,.amp,.note,.txt,.dev,.test,.ok,.err,button,label{overflow-wrap:anywhere;min-width:0}
.big span,.row .t,.amp span,.top h1{min-width:0}
.btn,.big{white-space:normal}.top .btn{white-space:normal}
.top{flex-wrap:wrap}
html,body{max-width:100%;overflow-x:hidden}

/* Erklärung, Frist und Hinweis: deutlich größer, das muss ohne Brille lesbar sein */
.erkl h2{font-size:1.15em;margin-bottom:10px}
.erkl .et{font-size:1.22em;line-height:1.45;margin:4px 0 14px}
.erkl>b{font-size:1.1em}
.amp{font-size:1.1em}
.txt{font-size:.9em;line-height:1.45}
.opt b{font-size:1.1em}

/* Oben auf den Seiten: Überschrift, Testhinweis und Hilfetexte größer und dunkler */
h1{font-size:1.5em;line-height:1.2}
.note{font-size:.9em;color:#26302a;line-height:1.4}
.test{font-size:.85em}
.row .s{font-size:.85em;color:#3a4540}

/* Fortschrittsanzeige bei der Auswertung */
.spinner{display:inline-block;width:1.1em;height:1.1em;border:.18em solid #c9d9cf;border-top-color:var(--acc);border-radius:50%;animation:spin 0.9s linear infinite;vertical-align:middle}
.spinner.lg{width:3.2em;height:3.2em;border-width:.3em}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
.work .puzzle{text-align:center;margin:6px 0 14px;animation:pulse 1.6s ease-in-out infinite}
.bar{height:16px;border-radius:10px;background:#e4e0d3;overflow:hidden}.barin{height:100%;background:var(--acc);border-radius:10px;transition:width 1s linear}
.stp{display:flex;align-items:center;gap:12px;padding:8px 2px;font-size:.95em}.stp.next{color:#8a918c}.stp.now{font-weight:700}.stp.done{color:var(--grn)}
.stic{flex:none;display:inline-flex;width:1.5em;justify-content:center;font-weight:700}
.wait{font-size:1.5em;font-weight:800;text-align:center;color:var(--acc);margin:0 0 8px}
.blink{animation:blink 1s step-start infinite}
@keyframes blink{50%{opacity:.15}}

/* Eigene Kamera: große Knöpfe, „Weiter“ groß und grün */
.cambot .camb{min-height:84px;font-size:1.15em;flex:1}
.cambot .camok{flex:2;background:#1fa355;color:#fff;font-size:1.3em;border:3px solid #fff}
.cambot .camb.alt{flex:0 0 34%;padding:8px 6px;overflow-wrap:normal;word-break:normal;hyphens:none;font-size:1.05em}
.cambot .camok{flex:1;font-size:1.2em;overflow-wrap:normal;word-break:normal;hyphens:none;white-space:nowrap}

/* Gewählte Antwort steht noch einmal groß direkt über dem Brieftext; der Text leuchtet kurz auf, wenn er sich ändert */
.chosen{background:#eaf5ee;border:3px solid var(--acc);border-radius:16px;padding:12px 16px;margin:16px 0 8px;font-weight:800;font-size:1.05em;color:var(--acc)}
.chosen span{display:block;font-size:.72em;font-weight:700;color:#26302a;margin-bottom:2px}
@keyframes flash{0%{background:#fff3c4;border-color:#d9a800}100%{background:#faf8f2;border-color:var(--line)}}
.txt.flash{animation:flash 1.8s ease-out}

/* Schritt „Wie stehen Sie dazu?“: großer Sprechknopf, darunter das Textfeld */
.stance .big{margin:4px 0 10px}.big.red{background:var(--red)}
.stance textarea{min-height:130px}

/* Startseite: „Brief abfotografieren“ ist der Hauptknopf, die anderen deutlich kleiner */
.big.main{min-height:170px;font-size:1.2em;gap:20px;margin-bottom:20px}.big.main svg{width:2.1em;height:2.1em}
.big.sm{min-height:74px;padding:12px 18px;font-size:.92em;margin-bottom:12px}
.btn.fambtn{overflow-wrap:normal;hyphens:none;white-space:nowrap}
/* „Selbst sagen, was Sie möchten“ hebt sich von den Vorschlägen ab */
.opt.speak{border-color:var(--acc);background:#eaf5ee}
/* Großer Vorlese-Knopf über der Erklärung */
.big.readbtn{margin:0 0 14px}

/* Startseite: gleich große Kacheln (2 Spalten), Symbol oben, Text darunter */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 18px}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:190px;padding:14px 10px;border:0;border-radius:24px;color:#fff;font:inherit;font-weight:800;font-size:.95em;line-height:1.2;text-align:center;cursor:pointer;box-shadow:0 4px 10px #0002;overflow-wrap:normal;hyphens:auto}
.tile svg{width:3.2em;height:3.2em;flex:none}
.tile span{min-width:0}
.tile.t1{background:#1f6f43}.tile.t2{background:#2c5d8f}.tile.t3{background:#7a4a1a}.tile.t4{background:#b3590a}.tile.t5{background:#6a3d8f}
/* Kamera: beide Knöpfe gleich groß, Text passt hinein */
.cambot .camb,.cambot .camb.alt,.cambot .camok{flex:1 1 0;min-width:0;min-height:84px;padding:8px 6px;font-size:1.05em;overflow-wrap:normal;word-break:normal;hyphens:none;white-space:normal;line-height:1.15;text-align:center}
.cambot .camb.alt{border:3px solid #fff}

/* Schritt 2: alle Knöpfe gleich breit und gleich hoch, unten genug Platz über der Zurück-Leiste */
.btn.full{min-height:72px;margin:0 0 12px;display:flex}
.btn.full[data-act="send"],.btn.full[data-act="dosend"]{min-height:84px;font-size:1.1em}
#app{padding-bottom:170px}

/* Wichtiger Hinweis: zugeklappt ganz unten, Antwort kommt zuerst */
.hintd{background:#fff;border:2px solid #d9a800;border-radius:16px;padding:12px 16px;margin:0 0 14px}
.hintd summary{font-weight:800;cursor:pointer;font-size:.95em}
.hintd .et{font-size:1.05em;line-height:1.45;margin-top:10px}

/* Familie und Freunde: oben „zur Freigabe gesendet“, darunter „freigegeben“ etwas kräftiger */
.card.fl .s,.card.fl2 .s{font-size:.8em;color:#2f3a34;margin-top:4px}
.card.fl{border:2px solid #d9a800}
.card.fl2{border:4px solid var(--grn);background:#f1faf4;font-size:1.08em;padding:18px 20px}
.card.fl2.nein{border-color:var(--red);background:#fdf1f0}
.card.fl2 b:first-child{font-size:1.1em}
.btn.full.frei{background:#6a3d8f}
.opt.speak{background:#1f6f43;border-color:#1f6f43;color:#fff}.opt.speak svg{stroke:#fff}

.famok{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:28px}
.famok-ring{width:170px;height:170px;border-radius:50%;background:#2e9e4f;display:grid;place-items:center;box-shadow:0 0 0 0 rgba(46,158,79,.55);animation:famglow 1.8s ease-in-out infinite}
@keyframes famglow{0%{box-shadow:0 0 0 0 rgba(46,158,79,.55),0 0 24px 6px rgba(46,158,79,.45)}70%{box-shadow:0 0 0 38px rgba(46,158,79,0),0 0 36px 12px rgba(46,158,79,.6)}100%{box-shadow:0 0 0 0 rgba(46,158,79,0),0 0 24px 6px rgba(46,158,79,.45)}}
.famok h1{font-size:2.2em;color:#1e7a3a;margin:22px 0 8px}
.famok-t{font-size:1.45em;font-weight:700;line-height:1.3;margin:0 0 10px}
.famok .big{margin-top:26px;width:100%}
@media (prefers-reduced-motion:reduce){.famok-ring{animation:none;box-shadow:0 0 28px 8px rgba(46,158,79,.5)}}

html,body{touch-action:pan-x pan-y;-webkit-text-size-adjust:100%}
:root[data-fs="0"]{--fs:min(20px,5.8vw)}:root[data-fs="4"]{--fs:min(38px,9vw)}
#fsbar{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;justify-content:flex-end;gap:10px;padding:calc(6px + env(safe-area-inset-top)) 14px 6px;background:var(--bg);border-bottom:1px solid var(--line)}
#fsbar button{min-width:64px;min-height:44px;border:2px solid var(--line);border-radius:12px;background:var(--card);color:var(--fg);font:700 20px system-ui,-apple-system,sans-serif;cursor:pointer}
#app{padding-top:58px}

.giro .et{font-size:1.05em;line-height:1.45;margin-bottom:8px}.girobild{display:block;width:min(100%,360px);margin:10px auto;background:#fff;border-radius:12px;image-rendering:pixelated}

.girored{color:#c62828;font-weight:800;font-size:1.05em;text-align:center;margin:10px 0 2px}

/* Einheitlicher Zurück-Knopf überall: Schiefergrau, weiße Schrift (Oliver 23.10.2026) */
.backbtn,.cambot .camb.alt,.cambot .camb.back{background:var(--back)!important;color:#fff!important;border:3px solid #fff}
/* Farbsystem (Oliver 23.10.2026): grün = weiter/ja, weiß mit Rahmen = Auswahl, beige = Nebenweg (nein/fertig), schiefergrau = zurück, rot = stopp/nochmal */
.big.b2{background:var(--acc);color:#fff}
.big.b3{background:#e4e0d3;color:var(--fg)}.big.b3 svg{stroke:var(--fg)}
.big{justify-content:flex-start}

/* Meine Briefe blinkt bei neuer Post (30.10.2026) */
.tile.neu svg{animation:blink 1s step-start infinite}
.tile.neu{outline:4px solid #d32f2f;outline-offset:-4px}
.neubadge{display:inline-block;margin-left:8px;padding:2px 10px;border-radius:12px;background:#d32f2f;color:#fff;font-size:.8em;vertical-align:middle;animation:blink 1s step-start infinite}