/* Bausteine. Teil 1: alle wiederverwendbaren Klassen aus dem Design (richtung-a-hell.html, Präfix .richtung-a entfernt,
   Werte unverändert). Teil 2: ergänzte Bausteine für die echte App (Druck-Feedback, Segment mit Daumen, Felder,
   Schalter, Ring, Leer-Zustand, Fotokopf, Sheet-Inhalte).
   Screen-spezifische Klassen aus dem Design (lead, verm, stepper, skala, video, module, frei, blase, aufgabe …) stehen
   ebenfalls in Teil 1, damit die Screens 3 bis 8 sie direkt nutzen können. Absolut positionierte Attrappen-Layouts
   (s1-*, s3-chips, s4-foto, s4-blatt, hoer-dock) sind bewusst NICHT übernommen. */

/* ───────────── Teil 1: aus dem Design ───────────── */
.kopf { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; padding:calc(var(--sat) + 6px) 20px 0;}
.ava { border-radius:50%; object-fit:cover; display:block; flex:none;}
.ava-44 { width:44px; height:44px; box-shadow:0 0 0 2px #fff, 0 4px 12px rgba(28,36,75,.14); object-position:50% 18%;}
.kopf .ava-44 { margin-bottom:2px;}
.ava-txt { width:44px; height:44px; border-radius:50%; flex:none; display:grid; place-items:center; background:var(--sand-hell); color:var(--navy); font:600 16px/1 var(--schrift);}
.ava-txt.mini { width:20px; height:20px; font-size:10.5px; background:var(--navy); color:#fff;}
.sek { display:flex; align-items:center; gap:8px; margin:20px 4px 8px;}
.sek > span { font:600 12px/16px var(--schrift); letter-spacing:.07em; text-transform:uppercase; color:var(--taupe-tief);}
.sek a { margin-left:auto; font:500 14px/16px var(--schrift); color:var(--navy); opacity:.7;}
.zahl { font:600 11px/18px var(--schrift); font-style:normal; min-width:18px; height:18px; border-radius:9px; padding:0 5px; text-align:center; background:var(--navy); color:#fff;}
.zahl.rot { background:var(--rot);}
.karte { background:#fff; border:1px solid var(--linie); border-radius:20px; box-shadow:var(--schatten);}
.pille { display:inline-flex; align-items:center; gap:4px; height:24px; padding:0 9px; border-radius:12px; font:600 12px/1 var(--schrift); white-space:nowrap;}
.pille.taupe { background:var(--taupe-bg); color:var(--taupe-tief);}
.pille.gruen { background:var(--gruen-bg); color:var(--gruen);}
.pille.rot { background:var(--rot-bg); color:var(--rot);}
.knopf { display:flex; align-items:center; justify-content:center; gap:8px; height:50px; border-radius:14px; font:600 16px/1 var(--schrift); letter-spacing:-.01em; white-space:nowrap;}
.knopf.primaer { background:var(--navy); color:#fff; box-shadow:0 1px 1px rgba(20,26,56,.2), 0 8px 18px -6px rgba(28,36,75,.45);}
.knopf.sekundaer { background:#fff; color:var(--navy); border:1px solid var(--linie); box-shadow:0 1px 2px rgba(28,36,75,.04);}
.knopf.gross { height:56px; font-size:17px;}
.knopf.klein { height:32px; padding:0 13px; border-radius:10px; font-size:13px; gap:6px;}
.knopf-reihe { display:flex; gap:10px; margin-top:12px;}
.knopf-reihe .primaer { flex:1;}
.knopf-reihe .sekundaer { padding:0 18px;}
.knopf-reihe.gleich { margin-top:18px;}
.knopf-reihe.gleich > * { flex:1; padding:0 10px; font-size:15px;}
.ichip { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:none;}
.ichip.rot { background:var(--rot-bg); color:var(--rot);}
.ichip.amber { background:var(--amber-bg); color:var(--amber);}
.ichip.taupe { background:var(--taupe-bg); color:var(--taupe-tief);}
.ichip.navy { background:#EEF0F5; color:var(--navy);}
.liste { padding:0 0 0 14px;}
.zeile { display:flex; align-items:center; gap:12px; min-height:58px; padding:9px 14px 9px 0; position:relative;}
.zeile + .zeile::before { content:""; position:absolute; top:0; right:0; left:46px; height:1px; background:var(--linie);}
.zt { flex:1; min-width:0;}
.zt .t1,
.zt .t2 { white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.chev { color:#C3C0C6;}
.punkt { width:8px; height:8px; border-radius:50%; background:var(--taupe); flex:none; margin-right:4px;}
.kpi3,
.kpi4 { display:flex; padding:16px 0 15px;}
.kpi3 > div,
.kpi4 > div { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; position:relative;}
.kpi3 > div + div::before,
.kpi4 > div + div::before { content:""; position:absolute; left:0; top:6px; bottom:6px; width:1px; background:var(--linie);}
.kpi3 b { font:700 30px/36px var(--schrift); letter-spacing:-.03em;}
.kpi3 span,
.kpi4 span { font:500 12.5px/16px var(--schrift); color:var(--text2);}
.termin { display:flex; gap:14px; padding:12px; align-items:center;}
.termin img { width:76px; height:76px; border-radius:14px; object-fit:cover; object-position:30% 50%; display:block; flex:none;}
.termin-t { flex:1; min-width:0;}
.termin-z { display:flex; align-items:center; justify-content:space-between; margin-bottom:3px;}
.termin-z b { font:700 22px/26px var(--schrift); letter-spacing:-.02em;}
.termin .t1 { white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.verb { margin-bottom:8px;}
.verb i { width:7px; height:7px; border-radius:50%; background:var(--gruen); margin-right:2px;}
.blase-meta { text-align:right; font:500 11.5px/14px var(--schrift); color:var(--text3); margin:14px 6px 6px 0;}
.blase { margin-left:34px; background:var(--navy); color:#fff; border-radius:20px 20px 6px 20px; padding:12px 15px; font:400 14.5px/20.5px var(--schrift); letter-spacing:-.005em;
  box-shadow:0 10px 24px -10px rgba(28,36,75,.5);}
.erkannt { display:flex; align-items:center; gap:7px; color:var(--taupe-tief); margin:16px 4px 9px;}
.erkannt b { font:700 15px/20px var(--schrift); color:var(--navy); letter-spacing:-.01em;}
.aufgabe { padding:12px 14px 13px;}
.aufgabe + .aufgabe { margin-top:8px;}
.auf-kopf { display:flex; align-items:center; gap:10px;}
.auf-kopf .t1 { flex:1; font-size:14.5px;}
.nr { width:22px; height:22px; border-radius:50%; background:var(--taupe-bg); color:var(--taupe-tief); display:grid; place-items:center; font:700 12px/1 var(--schrift); flex:none;}
.auf-meta { display:grid; grid-template-columns:1fr 1.15fr; gap:5px 10px; margin:9px 0 0 32px;}
.auf-meta span { display:flex; align-items:center; gap:6px; font:500 12.5px/16px var(--schrift); color:var(--text2); white-space:nowrap;}
.auf-meta .ic { color:var(--taupe);}
.chips { display:flex; gap:8px;}
.lauf { padding:0 16px; overflow-x:auto; overflow-y:hidden; white-space:nowrap; scrollbar-width:none; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; scroll-padding:0 16px; }
.lauf::-webkit-scrollbar { display:none; }
.lauf::after { content:""; flex:none; width:8px; }
.chip { display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 13px; border-radius:17px; background:#fff; border:1px solid var(--linie); font:500 13.5px/1 var(--schrift); color:var(--navy); flex:none;}
.chip .ic { color:var(--taupe-tief);}
.welle { display:flex; align-items:center; gap:3px; position:absolute; top:26px; height:34px;}
.welle i { display:block; width:3px; border-radius:2px; background:var(--taupe);}
.ort { display:flex; align-items:center; gap:5px; margin-top:4px; font:400 14px/19px var(--schrift); color:var(--text2);}
.ort .ic { color:var(--taupe);}
.preis-zeile { display:flex; align-items:center; justify-content:space-between; margin:12px 4px 14px;}
.preis-zeile b { font:700 28px/32px var(--schrift); letter-spacing:-.03em;}
.eck { display:flex; justify-content:space-between; padding:12px 14px;}
.eck > div { display:flex; flex-direction:column; gap:2px;}
.eck b { font:700 15px/19px var(--schrift); letter-spacing:-.02em;}
.eck span { font:500 11px/14px var(--schrift); color:var(--text2);}
.verm { margin-top:10px; padding:13px 14px 12px;}
.verm-kopf { display:flex; justify-content:space-between; align-items:center;}
.stepper { display:grid; grid-template-columns:1fr 1fr 1fr 1.55fr 1.1fr; position:relative; margin:12px -6px 0;}
.st-linie { position:absolute; left:9%; right:9%; top:10px; height:2px; background:var(--sand-hell); border-radius:1px;}
.st-linie i { position:absolute; left:0; top:0; bottom:0; width:66%; background:var(--taupe); border-radius:1px;}
.st { display:flex; flex-direction:column; align-items:center; gap:6px; position:relative;}
.sd { width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font:700 11px/1 var(--schrift);}
.sd.fertig { background:var(--taupe); color:#fff;}
.sd.jetzt { background:var(--navy); color:#fff; box-shadow:0 0 0 4px #fff, 0 0 0 5.5px var(--taupe-hell);}
.sd.offen { background:#fff; color:var(--text2); box-shadow:inset 0 0 0 1.5px var(--sand);}
.sl { font:500 11px/14px var(--schrift); color:var(--text2); white-space:nowrap;}
.st.jetzt .sl { color:var(--navy); font-weight:600;}
.verm-zahlen { display:flex; margin-top:12px; padding-top:10px; border-top:1px solid var(--linie);}
.verm-zahlen > div { flex:1; display:flex; flex-direction:column; gap:1px; position:relative; padding-left:12px;}
.verm-zahlen > div:first-child { padding-left:2px;}
.verm-zahlen > div + div::before { content:""; position:absolute; left:0; top:3px; bottom:3px; width:1px; background:var(--linie);}
.verm-zahlen b { font:700 22px/26px var(--schrift); letter-spacing:-.03em;}
.verm-zahlen span { font:500 11px/14px var(--schrift); color:var(--text2);}
.verm-zahlen > div:nth-child(2) { flex:1.2;}
.aktionen { display:flex; gap:8px; margin-top:12px;}
.aktionen .knopf { height:46px; font-size:14px; gap:6px; flex:1; padding:0 8px;}
.aktionen .primaer { flex:1.35;}
.nav { display:flex; align-items:center; justify-content:space-between; height:44px; margin-top:54px; padding:0 14px 0 8px; position:relative;}
.nav-zur { display:flex; align-items:center; gap:0; font:500 16px/1 var(--schrift); color:var(--navy);}
.nav-t { position:absolute; left:50%; transform:translateX(-50%); font:600 16px/1 var(--schrift); letter-spacing:-.01em;}
.nav-r { color:var(--navy);}
.obj-zeile { display:flex; align-items:center; gap:12px; padding:8px; margin-top:4px;}
.obj-zeile img { width:48px; height:48px; border-radius:12px; object-fit:cover; display:block;}
.wert { margin-top:12px; padding:16px 16px 6px;}
.wert-zahl { font:700 44px/50px var(--schrift); letter-spacing:-.035em; margin-top:4px;}
.wert-qm { font:500 14px/18px var(--schrift); color:var(--text2);}
.skala { margin-top:18px;}
.skala-spur { position:relative; height:8px; border-radius:4px; background:#F1ECE6;}
.skala-spur .band { position:absolute; left:14%; right:14%; top:0; bottom:0; border-radius:4px; background:linear-gradient(90deg,var(--taupe-hell),var(--taupe),var(--taupe-hell));}
.skala-spur .marke { position:absolute; left:50%; top:50%; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%; background:var(--navy); box-shadow:0 0 0 3px #fff, 0 3px 8px rgba(28,36,75,.35);}
.skala-l { display:flex; justify-content:space-between; margin:8px 0 0; padding:0 calc(14% - 34px); font:600 12px/16px var(--schrift); color:var(--navy);}
.skala-l .mitte { font-weight:500; color:var(--text3);}
.wert-reihe { display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--linie); margin-top:12px; padding:10px 0 8px; font:500 14px/18px var(--schrift); color:var(--text2);}
.wert-reihe b { font:700 17px/20px var(--schrift); color:var(--navy); letter-spacing:-.02em;}
.wert-reihe.daten { flex-direction:column; align-items:flex-start; gap:3px; margin-top:2px;}
.wert-reihe.daten > span:first-child { display:flex; align-items:center; gap:8px; color:var(--navy); font-weight:600;}
.wert-reihe.daten em { font-style:normal; color:var(--gruen);}
.balken4 { display:inline-flex; gap:3px; align-items:flex-end;}
.balken4 i { width:4px; border-radius:1px; background:var(--sand);}
.balken4 i:nth-child(1) {height:6px}
.balken4 i:nth-child(2) {height:9px}
.balken4 i:nth-child(3) {height:12px}
.balken4 i:nth-child(4) {height:15px}
.balken4 i.an { background:var(--gruen);}
.faktoren .zeile { min-height:42px; padding-top:7px; padding-bottom:7px;}
.faktoren .zeile + .zeile::before { left:36px;}
.vz { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; flex:none;}
.vz.plus { background:var(--gruen-bg); color:var(--gruen);}
.vz.minus { background:var(--rot-bg); color:var(--rot);}
.faktoren .t1 { font-weight:500; font-size:14.5px;}
.hinweis { margin-top:12px; text-align:center; font:500 11.5px/15px var(--schrift); color:var(--text3);}
.rund-knopf { width:40px; height:40px; border-radius:50%; background:#fff; border:1px solid var(--linie); display:grid; place-items:center; color:var(--navy); margin-bottom:2px; box-shadow:var(--schatten);}
.s6-chips { margin-top:14px;}
.s6-chips .chip { height:34px; gap:5px;}
.s6-chips .chip b { font-weight:600; color:var(--text3);}
.s6-chips .chip.an { background:var(--navy); border-color:var(--navy); color:#fff;}
.s6-chips .chip.an b { color:rgba(255,255,255,.6);}
.reakt { display:flex; align-items:center; gap:12px; padding:11px 14px; margin-top:14px;}
.reakt-z { font:600 14px/22px var(--schrift); color:var(--text2);}
.reakt-z b { font:700 22px/24px var(--schrift); color:var(--navy); letter-spacing:-.03em;}
.lead { padding:12px 14px 12px; margin-top:8px;}
.lead.ist-neu { border-color:var(--taupe-hell); box-shadow:0 0 0 3px rgba(158,139,119,.12), var(--schatten);}
.lead-o { display:flex; align-items:center; gap:7px;}
.neu { height:18px; padding:0 6px; border-radius:5px; background:var(--navy); color:#fff; font:700 10px/18px var(--schrift); letter-spacing:.06em; text-transform:uppercase;}
.lead-typ { font:600 12px/16px var(--schrift); letter-spacing:.06em; text-transform:uppercase; color:var(--taupe-tief);}
.quelle { margin-left:auto; display:flex; align-items:center; gap:4px; font:500 11.5px/14px var(--schrift); color:var(--text3);}
.lead-t { font:600 16px/21px var(--schrift); letter-spacing:-.015em; margin-top:4px;}
.lead-u { display:flex; align-items:center; justify-content:space-between; margin-top:6px; min-height:32px;}
.status-t { display:flex; align-items:center; gap:6px; font:600 12.5px/16px var(--schrift); color:var(--navy);}
.status-t.gruen { color:var(--gruen);}
.ansage { margin-bottom:6px;}
.kpi4 { margin-top:14px; padding:16px 0 15px;}
.kpi4 b { font:700 26px/31px var(--schrift); letter-spacing:-.03em;}
.kpi4 span { font-size:11px;}
.team-l { margin-top:10px;}
.team-l .zeile { align-items:flex-start; padding:15px 14px 15px 0;}
.team-l .zeile + .zeile::before { left:56px;}
.p-kopf { display:flex; align-items:center; gap:8px;}
.p-kopf .t1 { font-size:15.5px;}
.mini-p { height:18px; padding:0 7px; font-size:10.5px;}
.person .t2 { margin-top:1px; font-size:12.5px; white-space:nowrap;}
.person .t2 em { font-style:normal; color:var(--rot); font-weight:600;}
.mb { position:relative; height:5px; border-radius:3px; background:#F0EBE5; margin-top:8px; overflow:hidden; display:flex;}
.mb i { position:absolute; left:0; top:0; bottom:0; border-radius:3px; background:var(--navy);}
.mb i.b2 { background:var(--taupe);}
.mb i.t { background:var(--taupe);}
.mb.seg { gap:2px; background:none;}
.mb.seg i { position:static; background:var(--navy);}
.mb.seg i.o { background:var(--sand);}
.mb.seg i.r { background:var(--rot);}
.ziel { margin-top:12px; padding:14px 16px 16px;}
.ziel-o { display:flex; justify-content:space-between; align-items:flex-end;}
.ziel-z { font:600 16px/30px var(--schrift); color:var(--text2); margin-top:2px;}
.ziel-z b { font:700 28px/30px var(--schrift); color:var(--navy); letter-spacing:-.03em;}
.ziel-o .t3 { margin-bottom:5px;}
.ziel-seg { display:flex; gap:4px; margin-top:12px;}
.ziel-seg i { flex:1; height:8px; border-radius:4px; background:#F0EBE5;}
.ziel-seg i.an { background:var(--taupe);}
.fort { display:flex; align-items:center; gap:14px; padding:10px 14px; margin-top:12px;}
.ring-w { position:relative; width:58px; height:58px; flex:none;}
.ring-w svg { display:block;}
.ring-w b { position:absolute; inset:0; display:grid; place-items:center; font:700 14px/1 var(--schrift); letter-spacing:-.02em;}
.fort .t1 { font-size:16px;}
.wochen { display:flex; gap:3px; margin-top:8px;}
.wochen i { flex:1; height:4px; border-radius:2px; background:#F0EBE5;}
.wochen i.an { background:var(--taupe);}
.video { display:flex; overflow:hidden;}
.vid-bild { position:relative; width:124px; height:110px; flex:none; overflow:hidden; background:radial-gradient(120% 90% at 50% 100%, #E9E2D9, #CFC5B9);}
.vid-bild img { position:absolute; left:50%; bottom:-58px; width:124px; transform:translateX(-50%);}
.play { position:absolute; right:10px; bottom:10px; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.88); color:var(--navy); display:grid; place-items:center; padding-left:2px;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:0 6px 16px rgba(20,26,56,.25);}
.dauer { position:absolute; left:8px; bottom:8px; height:20px; padding:0 7px; border-radius:6px; background:rgba(20,26,56,.6); color:#fff; font:600 11px/20px var(--schrift);}
.vid-t { padding:12px 14px 11px; display:flex; flex-direction:column; gap:5px;}
.vid-t .t1 { font-size:15.5px; line-height:21px;}
.vid-t .t2 { display:flex; align-items:center; gap:5px; margin-top:auto;}
.module { padding:3px 14px;}
.mzeile { display:flex; align-items:center; gap:11px; height:28px; position:relative;}
.mzeile + .mzeile { border-top:1px solid #F2EEE9;}
.md { width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font:600 11px/1 var(--schrift); color:var(--text3); box-shadow:inset 0 0 0 1.25px var(--sand); flex:none;}
.md.fertig { background:var(--taupe); color:#fff; box-shadow:none;}
.md.laeuft { background:var(--navy); color:#fff; box-shadow:none;}
.mt { flex:1; font:500 13.5px/18px var(--schrift); color:var(--navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mzeile.fertig .mt { color:var(--text2);}
.mzeile.laeuft .mt { font-weight:600;}
.mzeile .pille { height:20px; font-size:11px;}
.mzeile:not(.fertig):not(.laeuft) .mt { color:#7D8197;}
.frei { display:flex; gap:8px;}
.fk { flex:1; background:#fff; border:1px solid var(--linie); border-radius:16px; padding:9px 10px 8px; display:flex; flex-direction:column; justify-content:space-between; height:64px; color:var(--text3); box-shadow:var(--schatten);}
.fk b { font:600 12px/15px var(--schrift); color:var(--navy); hyphens:manual;}
.fk span { display:flex; align-items:center; gap:4px; font:500 11px/14px var(--schrift);}
.fk.an { color:var(--gruen);}
.fk.an span { font-weight:600;}

/* ───────────── Teil 2: ergänzt ───────────── */

/* Pillen und Chips: weitere Farben */
.pille.amber { background:var(--amber-bg); color:var(--amber); }
.pille.navy { background:var(--navy); color:#fff; }
.pille.hell { background:var(--navy-bg); color:var(--navy); }
.pille.klein { height:20px; padding:0 7px; font-size:11px; border-radius:10px; }
.ichip.gruen { background:var(--gruen-bg); color:var(--gruen); }
.ichip.gross { width:44px; height:44px; border-radius:13px; }
.chip.an { background:var(--navy); border-color:var(--navy); color:#fff; }
.chip.an .ic { color:#fff; }
.chip b { font-weight:600; color:var(--text3); }
.chip.an b { color:rgba(255,255,255,.6); }
.chip { transition:background-color .2s, color .2s, border-color .2s, transform .25s var(--ios); }

/* Knöpfe: weitere Formen */
.knopf { width:auto; position:relative; transition:transform .25s var(--ios), opacity .25s, background-color .2s; }
.knopf.block { width:100%; }
.knopf.text { background:none; color:var(--navy); height:44px; font-weight:600; opacity:.78; }
.knopf.gefahr { color:var(--rot); }
.knopf.primaer.gefahr { background:var(--rot); color:#fff; box-shadow:0 8px 18px -6px rgba(180,81,58,.45); }
.knopf.gruen { background:var(--gruen); color:#fff; box-shadow:0 8px 18px -6px rgba(62,122,92,.45); }
.knopf.rund { width:50px; padding:0; border-radius:50%; }
.knopf[disabled], .knopf.aus { opacity:.4; pointer-events:none; }
.knopf .ic { flex:none; }
.rund-knopf { transition:transform .25s var(--ios); }

/* Glasknopf auf Fotos (Screen 4) */
.glas-knopf { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:var(--navy);
  background:rgba(255,255,255,.78); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 4px 14px rgba(20,26,56,.16);
  transition:transform .25s var(--ios), opacity .2s; }
.foto-zaehler { height:24px; padding:0 9px; border-radius:12px; background:rgba(20,26,56,.45); color:#fff; font:600 11.5px/24px var(--schrift);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }

/* Fotokopf (kopf: 'foto'): Screen rendert .held als erstes Element, danach .held-blatt */
.held { position:relative; height:290px; overflow:hidden; background:var(--sand-hell); }
.held > img, .held .held-bild { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform-origin:50% 100%; }
.held::before { content:""; position:absolute; inset:0 0 auto 0; height:110px; background:linear-gradient(rgba(20,26,56,.32), rgba(20,26,56,0)); z-index:1; pointer-events:none; }
.held .foto-zaehler { position:absolute; right:16px; bottom:34px; z-index:2; }
.held-blatt { position:relative; margin-top:-24px; background:var(--grund); border-radius:24px 24px 0 0; padding:20px 16px 0; z-index:1; }

/* Druck-Feedback: sofort beim Berühren (Klasse .gedrueckt setzt dom.js) */
.tippbar { cursor:pointer; }
.karte.tippbar, .tippbar.karte { transition:transform .3s var(--ios), box-shadow .3s; }
.karte.tippbar.gedrueckt { transform:scale(.982); transition-duration:.12s; }
.zeile.tippbar::after { content:""; position:absolute; inset:0 0 0 -14px; background:rgba(28,36,75,.045); opacity:0; transition:opacity .25s; pointer-events:none; border-radius:inherit; }
.zeile.tippbar.gedrueckt::after { opacity:1; transition-duration:0s; }
.liste { overflow:hidden; }
.knopf.gedrueckt, .chip.gedrueckt, .rund-knopf.gedrueckt, .glas-knopf.gedrueckt { transform:scale(.96); transition-duration:.1s; }
.knopf.primaer.gedrueckt { opacity:.88; }
.knopf.sekundaer.gedrueckt, .knopf.text.gedrueckt { background-color:#F4F1EC; }
.tippbar.gedrueckt:not(.karte):not(.zeile):not(.knopf):not(.chip), a.gedrueckt, .sek a.gedrueckt, [data-tipp].gedrueckt { opacity:.5; transition:opacity 0s; }
.tippbar:not(.karte):not(.zeile):not(.knopf):not(.chip), .sek a { transition:opacity .25s; }
.sek a { cursor:pointer; }
.ava.tippbar.gedrueckt { opacity:.7; }

/* Segment mit gleitendem Daumen: komponenten.segment() */
.segment { position:relative; display:flex; background:#ECE7E0; border-radius:10px; padding:2px; margin-top:16px; isolation:isolate; }
.segment > button, .segment > span { position:relative; z-index:1; flex:1; text-align:center; font:500 13px/30px var(--schrift); color:var(--text2); transition:color .2s; }
.segment > button.an, .segment > span.an { color:var(--navy); font-weight:600; }
.segment > button.gedrueckt { opacity:.6; }
.segment-daumen { position:absolute; z-index:0; top:2px; bottom:2px; left:2px; background:#fff; border-radius:8px;
  box-shadow:0 1px 3px rgba(28,36,75,.12), 0 0 0 .5px rgba(28,36,75,.06); transition:transform .35s var(--ios); will-change:transform; }
.segment.ohne-daumen > span.an { background:#fff; border-radius:8px; box-shadow:0 1px 3px rgba(28,36,75,.12), 0 0 0 .5px rgba(28,36,75,.06); }

/* Fortschritt: Balken (.mb wie Screen 7), Segmente (.ziel-seg, .wochen), Ring (komponenten.ring()) */
.balken { position:relative; height:6px; border-radius:3px; background:var(--spur); overflow:hidden; }
.balken > i { position:absolute; left:0; top:0; bottom:0; border-radius:3px; background:var(--navy); transform-origin:0 50%; transition:width .6s var(--ios); }
.balken.taupe > i { background:var(--taupe); }
.balken.gruen > i { background:var(--gruen); }
.mb i { transition:width .6s var(--ios); }
.ring-w .ring circle:last-child { transition:stroke-dasharray .8s var(--ios); }

/* Avatare: Foto oder Initiale */
.ava-32 { width:32px; height:32px; }
.ava-56 { width:56px; height:56px; box-shadow:0 0 0 2px #fff, 0 4px 12px rgba(28,36,75,.14); object-position:50% 18%; }
.ava-72 { width:72px; height:72px; box-shadow:0 0 0 3px #fff, 0 6px 16px rgba(28,36,75,.16); object-position:50% 18%; }
.ava-txt.ava-32 { font-size:13px; }
.ava-txt.ava-56 { font-size:20px; }
.ava-txt.ava-72 { font-size:26px; }

/* Zeilen: Varianten */
.zeile .chev { flex:none; }
.zeile .zwert { margin-left:auto; font:600 15px/20px var(--schrift); color:var(--navy); white-space:nowrap; }
.zeile .zwert.leise { font-weight:500; color:var(--text2); }
.zeile.kompakt { min-height:48px; padding-top:7px; padding-bottom:7px; }
.zeile.ohne-icon + .zeile.ohne-icon::before, .liste.ohne-icons .zeile + .zeile::before { left:0; }
.zeile .zt .t1 + .t2, .zeile .zt .t2 + .t1 { margin-top:1px; }

/* Leer-Zustand */
.leer { display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:28px 24px 26px; }
.leer .leer-icon { width:52px; height:52px; border-radius:16px; display:grid; place-items:center; background:var(--taupe-bg); color:var(--taupe-tief); margin-bottom:6px; }
.leer .t1 { font-size:16px; }
.leer .t2 { max-width:270px; }

/* Eingabefelder im iOS-Stil (gruppierte weiße Karte) */
.felder { background:#fff; border:1px solid var(--linie); border-radius:16px; overflow:hidden; }
.feld-zeile { display:flex; align-items:center; gap:12px; min-height:52px; padding:0 14px; position:relative; }
.feld-zeile + .feld-zeile::before { content:""; position:absolute; top:0; left:14px; right:0; height:1px; background:var(--linie); }
.feld-zeile > label, .feld-zeile > .feld-l { flex:none; width:84px; font:500 15px/20px var(--schrift); color:var(--navy); }
.feld-zeile input, .feld-zeile textarea { flex:1; min-width:0; height:50px; font:400 16px/20px var(--schrift); color:var(--navy); }
.feld-zeile textarea { height:auto; min-height:88px; padding:14px 0; resize:none; }
.feld-zeile input::placeholder, .feld-zeile textarea::placeholder { color:var(--text3); }
.feld { display:block; width:100%; height:50px; padding:0 14px; background:#fff; border:1px solid var(--linie); border-radius:14px; font:400 16px/20px var(--schrift); color:var(--navy); transition:border-color .2s, box-shadow .2s; }
.feld:focus { border-color:var(--taupe-hell); box-shadow:0 0 0 3px rgba(158,139,119,.14); }
textarea.feld { height:auto; min-height:110px; padding:13px 14px; resize:none; line-height:22px; }
.feld-titel { font:600 12px/16px var(--schrift); letter-spacing:.07em; text-transform:uppercase; color:var(--taupe-tief); margin:16px 4px 8px; display:block; }

/* Schalter (iOS-Toggle): komponenten.schalter() */
.schalter { position:relative; flex:none; width:51px; height:31px; border-radius:16px; background:#E5E1DC; transition:background-color .25s; cursor:pointer; }
.schalter::after { content:""; position:absolute; top:2px; left:2px; width:27px; height:27px; border-radius:50%; background:#fff;
  box-shadow:0 3px 8px rgba(0,0,0,.15), 0 1px 1px rgba(0,0,0,.06); transition:transform .3s var(--ios), width .2s var(--ios); }
.schalter.an { background:var(--gruen); }
.schalter.an::after { transform:translateX(20px); }
.schalter.gedrueckt::after { width:31px; }
.schalter.an.gedrueckt::after { transform:translateX(16px); }

/* Abschnittsabstände und Hilfen */
.abstand { height:16px; }
.abstand-gross { height:28px; }
.mitte-text { text-align:center; }
.hinweis { margin-top:12px; text-align:center; font:500 11.5px/15px var(--schrift); color:var(--text3); }
.trenner { height:1px; background:var(--linie); margin:12px 0; }

/* Wackeln (z. B. fehlgeschlagene Anmeldung) */
@keyframes dm-wackeln { 0%,100%{transform:translateX(0)} 15%{transform:translateX(-9px)} 30%{transform:translateX(8px)} 45%{transform:translateX(-6px)} 60%{transform:translateX(4px)} 75%{transform:translateX(-2px)} }
.wackeln { animation:dm-wackeln .5s var(--ios-aus); }

/* Sanftes Einblenden neuer Inhalte */
@keyframes dm-rein { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.rein { animation:dm-rein .45s var(--ios) both; }
@keyframes dm-raus { to { opacity:0; transform:scale(.97); } }
.raus { animation:dm-raus .3s var(--ios) both; pointer-events:none; }

/* Platzhalter (Welle 1) */
.platzhalter { margin-top:16px; }

/* Fälligkeitsauswahl (shell/faelligkeit.js) */
.faelligkeit .fw-chips { flex-wrap:wrap; }
.faelligkeit .fw-chips .chip { height:38px; padding:0 14px; font-size:14.5px; font-weight:500; }
.faelligkeit .fw-felder { margin-top:10px; }
.faelligkeit .fw-felder[hidden] { display:none; }
.faelligkeit input[type="date"], .faelligkeit input[type="time"] { text-align:left; min-height:50px; }
.faelligkeit .fw-hinweis { margin:8px 4px 0; }

/* Senden: Exposé, Wertermittlung, Zettel, Vertragslink (shell/senden.js, Paket 3) */
.es { display:flex; flex-direction:column; gap:10px; }
.es-objekt { display:flex; align-items:center; gap:12px; padding:0 4px; }
.es-objekt .zt { min-width:0; }
.es-an { margin:0 4px; }
.es-suche { width:100%; }
.es-treffer { display:flex; flex-direction:column; gap:6px; min-height:120px; }
.es-tipp { margin:2px 4px; white-space:normal; }
.es-fehlt { opacity:.5; }
.es-warnung { display:flex; align-items:flex-start; gap:8px; padding:10px 12px; border-radius:12px; background:var(--rot-bg); color:var(--rot); font:500 14px/1.4 var(--schrift); }
.es-warnung .ic { flex:none; margin-top:1px; }

/* „wartet auf onOffice“ (wartetMarke(), Betrieb ohne onOffice: Änderung liegt im Postausgang) */
.wartet { display:inline-flex; align-items:center; gap:3px; color:var(--amber); font:600 11.5px/14px var(--schrift); letter-spacing:-.005em; white-space:nowrap; vertical-align:-1px; }
.wartet .ic { flex:none; }