/* ad2stay – Erscheinungsbild des Kunden über der Begleit-App (app.html)
   Aufbau: 1 Farben und Schriften (aus window.A2: --a2-marke, --a2-akzent) · 2 Grundlage · 3 Kopfbereich · 4 Farbwirkung ruhig/kräftig/knallig
   Regel: Farben nur über Variablen. Die App-eigenen Rollen (--teal, --bg, --card …) werden hier auf die Marke gelegt. */

/* ===== 1 Farben und Schriften ===== */
@font-face{font-family:"Zettelschrift";src:url("fonts/zettel.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
html.a2{
  --a2-auf-marke:#FFFFFF; --a2-auf-marke-leise:rgba(255,255,255,.82); --a2-auf-marke-linie:rgba(255,255,255,.38);
  --a2-auf-akzent:#1C1C1C;
  --a2-papier:#FFFDF6; --a2-papier-text:#1C1C1C; --a2-papier-leise:#6B6457; --a2-strich:#CFC8B6;
  --a2-schatten:0 18px 34px rgba(10,20,40,.22);
  --a2-hand:"Zettelschrift","Segoe Print","Bradley Hand",cursive;
  --a2-rund:26px;
  --a2-flaeche:var(--a2-marke);
  --serif:var(--sans);                         /* Überschriften wie in den Mockups: Manrope statt Serifenschrift */
}
html.a2.dm{ --a2-papier:#F1ECDD; --a2-schatten:0 18px 34px rgba(0,0,0,.5); }

/* ===== 2 Grundlage ===== */
html.a2 h1,html.a2 h2,html.a2 h3{font-weight:800;letter-spacing:-.02em}
html.a2 .zettel .txt,html.a2 .impuls .txt,html.a2 .lesbar button{font-family:var(--a2-hand);font-weight:400;letter-spacing:0}
html.a2 .zettel .txt{font-size:clamp(1.6rem,7.2vw,2rem);line-height:1.18}
html.a2 .zettel{background:var(--a2-papier);color:var(--a2-papier-text);border-color:transparent;border-radius:6px;box-shadow:var(--a2-schatten);transform:rotate(-.8deg)}
html.a2 .zettel .muted,html.a2 .zettel small{color:var(--a2-papier-leise)}
/* Themen-Bildschirm: Kopf der Coaching-Fassung weg – Marke und Zettel des Tages stehen im ad2stay-Kopf */
html.a2 #s-themen > .topbar .eyebrow,html.a2 #team-chip,html.a2 #s-themen .logo-zeile{display:none}
html.a2 #s-themen > .topbar{position:absolute;right:20px;top:14px;background:transparent;padding:0;margin:0;z-index:6}
html.a2 #s-themen{position:relative}

/* ===== 3 Kopfbereich ===== */
#a2-kopf{margin:-16px -20px 0}
.a2-flaeche{position:relative;overflow:hidden;isolation:isolate;background:var(--a2-flaeche);color:var(--a2-auf-marke);padding:22px 20px 20px;border-radius:0 0 var(--a2-rund) var(--a2-rund);display:flex;flex-direction:column;gap:16px}
.a2-flaeche::before{content:"";position:absolute;z-index:-1;right:-80px;top:-80px;width:220px;height:220px;border-radius:50%;background:var(--a2-akzent)}
.a2-flaeche::after{content:"";position:absolute;z-index:-1;right:36px;top:150px;width:64px;height:64px;border-radius:50%;border:2px solid var(--a2-auf-marke-linie)}
.a2-firma{display:flex;align-items:center;gap:12px;min-height:48px;padding-right:44px}
.a2-logo{flex:0 0 auto;width:48px;height:48px;border-radius:14px;border:0;background:var(--a2-auf-marke);color:var(--a2-marke);font:800 17px/1 var(--sans);display:flex;align-items:center;justify-content:center;padding:0;overflow:hidden;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.12)}
.a2-logo img{width:100%;height:100%;object-fit:contain}
.a2-logo.breit{width:auto;height:58px;padding:6px 10px;border-radius:14px}
.a2-logo.breit img{width:auto;height:100%}
.a2-name b{display:block;font-size:17px;font-weight:800;letter-spacing:-.3px;line-height:1.2}
.a2-name small{display:block;font-size:12px;font-weight:600;color:var(--a2-auf-marke-leise)}
.a2-label{display:block;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--a2-auf-marke-leise)}
.a2-titel h1{margin:6px 0 6px;font-size:32px;line-height:1.08;letter-spacing:-.03em;color:var(--a2-auf-marke)}
.a2-titel p{margin:0;font-size:15px;line-height:1.45;color:var(--a2-auf-marke-leise);max-width:330px}

.a2-block{background:var(--a2-papier);color:var(--a2-papier-text);border-radius:6px;box-shadow:var(--a2-schatten);transform:rotate(-1.2deg)}
.a2-block .a2-label{color:var(--a2-marke)}
.a2-block-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:14px 16px 12px;border-bottom:2px dashed var(--a2-strich)}
.a2-klein{font-size:12px;font-weight:700;color:var(--a2-papier-leise);text-align:right}
.a2-streifen{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));height:160px}
.a2-st{all:unset;box-sizing:border-box;cursor:pointer;border-right:2px dashed var(--a2-strich);display:flex;align-items:center;justify-content:center;transition:transform .35s ease,opacity .35s ease}
.a2-st:last-child{border-right:0}
.a2-st span{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--a2-hand);font-size:19px;white-space:nowrap}
.a2-st.heute{background:color-mix(in srgb,var(--a2-akzent) 28%,transparent)}
.a2-st.heute span{font-size:21px;color:var(--a2-marke)}
.a2-st.spaeter span{color:var(--a2-papier-leise)}
.a2-st.weg{background:none;opacity:.35}
.a2-st.leer{cursor:default}
.a2-st:focus-visible{outline:2px solid var(--a2-akzent);outline-offset:-4px}
.a2-block.nur-text{padding:16px 18px;transform:rotate(-1deg)}
.a2-hand{font-family:var(--a2-hand);font-size:23px;line-height:1.15;margin:6px 0 0}

.a2-unten{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:4px}
.a2-woche small{display:block;font-size:12px;font-weight:600;color:var(--a2-auf-marke-leise)}
.a2-woche b{font-size:17px;font-weight:800}
.a2-knopf{min-height:48px;padding:0 20px;border-radius:999px;border:0;background:var(--a2-auf-marke);color:var(--a2-marke);font:800 15px/1 var(--sans);cursor:pointer;white-space:nowrap}
.a2-knopf:hover{background:var(--a2-akzent);color:var(--a2-auf-akzent)}

/* Ansprechpartner unter den Themen */
.a2-ansprech{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px 16px;font:inherit;color:inherit;cursor:pointer}
.a2-ansprech-bild{flex:0 0 auto;width:52px;height:52px;border-radius:50%;overflow:hidden;background:var(--a2-marke);color:var(--a2-auf-marke);display:flex;align-items:center;justify-content:center;font-weight:800}
.a2-ansprech-bild img{width:100%;height:100%;object-fit:cover}
.a2-ansprech-text{display:flex;flex-direction:column;min-width:0;flex:1}
.a2-ansprech-text small{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.a2-ansprech-text b{font-size:16px}
.a2-ansprech-text span{font-size:14px;color:var(--muted)}
.a2-ansprech em{font-style:normal;font-size:24px;color:var(--muted)}

/* ===== 4 Farbwirkung ===== */
/* ruhig: wie die Coaching-App – Kopf als weiße Karte mit Markenstreifen */
html.w-ruhig .a2-flaeche{--a2-flaeche:var(--card);color:var(--ink);border-top:6px solid var(--a2-marke);border-radius:0 0 18px 18px;box-shadow:var(--shadow)}
html.w-ruhig .a2-flaeche::before,html.w-ruhig .a2-flaeche::after{display:none}
html.w-ruhig .a2-label,html.w-ruhig .a2-titel p,html.w-ruhig .a2-name small,html.w-ruhig .a2-woche small{color:var(--muted)}
html.w-ruhig .a2-titel h1{color:var(--ink)}
html.w-ruhig .a2-knopf{background:var(--a2-marke);color:var(--a2-auf-marke)}
html.w-ruhig .a2-logo{box-shadow:0 0 0 1px var(--line)}

/* kräftig (Standard): Kopf in Firmenfarbe mit Akzent-Kreis, Themen-Kacheln mit Markenfarbe */
html.w-kraeftig .thema{border-color:transparent;box-shadow:0 6px 18px rgba(10,20,40,.07)}
html.w-kraeftig .thema .ic{color:var(--a2-marke)}

/* knallig: auch die Kacheln farbig, Hintergrund leicht getönt */
html.w-knallig{--bg:color-mix(in srgb,var(--a2-marke) 9%,#FFFFFF)}
html.w-knallig body{background:var(--bg)}
html.w-knallig .thema{background:var(--a2-marke);border-color:transparent;color:var(--a2-auf-marke)}
html.w-knallig .thema:nth-child(3n+2){background:var(--a2-akzent);color:var(--a2-auf-akzent)}
html.w-knallig .thema .ic,html.w-knallig .thema small{color:inherit;opacity:.9}
html.w-knallig .werkzeug,html.w-knallig .a2-ansprech{border-color:transparent}
html.w-knallig.dm{--bg:color-mix(in srgb,var(--a2-marke) 14%,#0F1A1E)}

/* Beamer gibt es nur bei Mitarbeiter-Teams mit Teamrunde */
html.a2:not(.a2-beamer) #f-beamer,html.a2:not(.a2-beamer) #zum-beamer{display:none!important}
/* Keine Technik in der Oberfläche: Team-Code nicht anzeigen; beim Zettel des Tages kein „Nächster Zettel“ */
html.a2 #task-chip{visibility:hidden}
html.a2-saisonzettel #next{display:none}
/* Einstellungen: Team-Code und Teamrunden-Anrede sind Technik bzw. nur für Mitarbeiter-Teams */
html.a2 #einst-code,html.a2 #team-wechseln,html.a2 #einst-team > .eyebrow{display:none}
html.a2:not(.a2-beamer) #einst-team > .schalter-zeile,html.a2:not(.a2-beamer) #einst-team > .schalter-zeile + .muted{display:none}

/* Startbildschirm (zeitgesteuert) */
#a2-start,#a2-start-vorschau{position:fixed;inset:0;z-index:2147482000;background:var(--a2-marke);color:var(--a2-auf-marke);display:flex;align-items:center;justify-content:center;padding:28px 24px;overflow-x:hidden;overflow-x:clip;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;transition:opacity .3s ease,transform .3s ease;isolation:isolate}
#a2-start::before,#a2-start-vorschau::before{content:"";position:fixed;z-index:-1;right:-90px;top:-90px;width:260px;height:260px;border-radius:50%;background:var(--a2-akzent)}
#a2-start.weg{opacity:0;transform:scale(1.03)}
.a2-start-innen{max-width:440px;width:100%;display:flex;flex-direction:column;gap:18px}
.a2-start-innen .a2-logo{cursor:default}
.a2-start-bild{width:100%;max-height:42vh;object-fit:cover;border-radius:18px;box-shadow:var(--a2-schatten)}
#a2-start-vorschau h1,#a2-start h1{margin:0;font-size:34px;line-height:1.1;letter-spacing:-.03em;color:var(--a2-auf-marke)}
.a2-start-text{margin:0;font-size:17px;line-height:1.5;color:var(--a2-auf-marke-leise);white-space:pre-line}
.a2-start-los{align-self:flex-end;min-height:52px;padding:0 26px;font-size:16px}
html.w-ruhig #a2-start-vorschau,html.w-ruhig #a2-start{background:var(--card);color:var(--ink)}
html.w-ruhig #a2-start-vorschau::before,html.w-ruhig #a2-start::before{display:none}
html.w-ruhig #a2-start-vorschau h1,html.w-ruhig #a2-start h1{color:var(--ink)}
html.w-ruhig .a2-start-text{color:var(--muted)}
html.w-ruhig .a2-start-los{background:var(--a2-marke);color:var(--a2-auf-marke)}
/* Startseite ohne Code: keine Coaching-Hinweise */
html.a2 #s-start .start-kopf,html.a2 #start-punkte,html.a2 #s-start .privat,html.a2 #zur-probe,html.a2 #st-begleitung{display:none!important}
.a2-start-innen .a2-logo{align-self:flex-start}
/* Teilen und Drucken (je Team im Studio schaltbar) */
html.a2-ohne-druck #druck-open,html.a2-ohne-teilen #teilen-auf,html.a2-ohne-teilen .a2-teilen,html.a2-ohne-teilen #a2-erfolg{display:none!important}
.a2-teilen{margin-left:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;border:0;border-radius:999px;padding:8px 14px;background:var(--a2-auf-marke);color:var(--a2-marke);font:700 14px/1 var(--sans);cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.12);position:relative;z-index:1}
.a2-teilen svg{width:17px;height:17px}
#erledigt-ok[hidden]~#a2-erfolg{display:none}
.a2-erfolg{width:100%;background:var(--a2-akzent);color:var(--ink);font-weight:800;animation:a2ErfolgRein .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes a2ErfolgRein{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.a2-erfolg{animation:none}}
/* Kein Team-Code in der Oberfläche: im Weitergeben-Fenster nur QR und Link */
#teilen #teilen-qr+span,#teilen #teilen-code{display:none!important}
/* Neuigkeiten & Termine */
.a2-neu-kachel{width:100%;display:flex;align-items:center;gap:12px;text-align:left;background:var(--card);border:1px solid var(--line);border-left:5px solid var(--a2-akzent);border-radius:16px;padding:14px 16px;cursor:pointer;color:var(--ink);box-shadow:0 2px 10px rgba(0,0,0,.05)}
.a2-neu-kachel .ic{width:26px;height:26px;color:var(--a2-marke);flex:0 0 auto}
.a2-neu-k-t{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.a2-neu-k-t b{font-size:1rem}
.a2-neu-k-t span{font-size:.88rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a2-neu-zahl{font-style:normal;font-weight:800;font-size:.8rem;background:var(--a2-marke);color:var(--a2-auf-marke,#fff);border-radius:999px;padding:4px 10px;white-space:nowrap}
.a2-neu-pfeil{font-style:normal;font-size:1.5rem;color:var(--muted)}
.a2-neu-fenster .fenster{max-width:520px;max-height:88vh;overflow:auto}
.a2-neu-liste{display:flex;flex-direction:column;gap:12px}
.a2-neu-karte{border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:6px;background:var(--card)}
.a2-neu-karte.termin{border-left:5px solid var(--a2-marke)}
.a2-neu-kopf{display:flex;justify-content:space-between;gap:8px;font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.a2-neu-bald{color:var(--a2-marke)}.a2-neu-bald.heute{background:var(--a2-marke);color:var(--a2-auf-marke,#fff);border-radius:999px;padding:2px 8px}
.a2-neu-karte h3{margin:0;font-size:1.15rem;line-height:1.25}
.a2-neu-wann{margin:0;font-weight:700;color:var(--a2-marke)}
.a2-neu-text{margin:0;color:var(--ink);line-height:1.45}
.a2-neu-knoepfe{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.a2-neu-knoepfe .btn{flex:1 1 140px;text-decoration:none;justify-content:center}
/* Dank & Belohnung */
.a2-gabe{display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.a2-gabe-zeichen{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--a2-marke);color:var(--a2-auf-marke,#fff);font:800 13px/1 var(--sans);display:flex;align-items:center;justify-content:center;overflow:hidden}
.a2-gabe-zeichen img{width:100%;height:100%;object-fit:contain;background:#fff}
.a2-gabe-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.a2-gabe-t small{font-size:.8rem;color:var(--muted)}
.a2-gabe-t b{font-size:.98rem;color:var(--a2-marke)}
.a2-danke{border-radius:16px;background:var(--a2-marke);color:var(--a2-auf-marke,#fff);padding:16px;display:flex;flex-direction:column;gap:6px;animation:a2ErfolgRein .45s cubic-bezier(.2,1.4,.4,1)}
.a2-danke>b{font-size:1.1rem}.a2-danke p{margin:0;font-weight:700;font-size:1.05rem;line-height:1.35}
.a2-danke-person{display:flex;align-items:center;gap:10px;margin-top:6px;background:rgba(255,255,255,.16);border:0;border-radius:999px;padding:6px 14px 6px 6px;color:inherit;text-align:left;cursor:pointer;align-self:flex-start}
.a2-danke-person img,.a2-danke-ini{width:36px;height:36px;border-radius:50%;object-fit:cover;background:#fff;color:var(--a2-marke);font:800 13px/36px var(--sans);text-align:center}
.a2-danke-person span{display:flex;flex-direction:column}.a2-danke-person small{font-size:.75rem;opacity:.85}
/* ---------- Form der App (App-Design → Form, Oliver 23.10.): eine Rundung für alles, „aus einem Topf“ ----------
   rund = Vorgabe (keine Klasse nötig). --a2-r Karten/Kacheln, --a2-rk Knöpfe, --a2-rund Kopf-Fläche */
html.a2.f-eckig{--a2-r:3px;--a2-rk:3px;--a2-rund:4px}
html.a2.f-leicht{--a2-r:9px;--a2-rk:9px;--a2-rund:14px}
html.a2.f-sehr{--a2-r:28px;--a2-rk:999px;--a2-rund:48px}
html.a2:is(.f-eckig,.f-leicht,.f-sehr) :is(.thema,.impuls,.vz-kachel,.wochenziel,.er-frage,.fenster,.probe-banner,.hinweis-ablauf,.notiz,.a2-neu-kachel,.a2-neu-karte,.a2-danke,.a2-ansprech,.a2-start-bild,.a2-logo,.st-zahlen>div,#lesbar-knopf){border-radius:var(--a2-r)}
html.a2:is(.f-eckig,.f-leicht,.f-sehr) :is(.btn,.a2-knopf,.a2-teilen,.a2-danke-person,.a2-start-los){border-radius:var(--a2-rk)}
/* ---------- Gestalt der Themen-Kacheln: Karte (Vorgabe) · Kompakt · Groß ---------- */
html.a2.k-kompakt #grid{grid-template-columns:1fr;gap:8px}
html.a2.k-kompakt .thema{flex-direction:row;align-items:center;min-height:0;padding:12px 14px;gap:12px}
html.a2.k-kompakt .thema small{display:none}
html.a2.k-kompakt .thema b{flex:1}
html.a2.k-kompakt .thema .ic{width:22px;height:22px;flex:0 0 auto}
html.a2.k-gross .thema{min-height:156px;align-items:center;justify-content:center;text-align:center;gap:10px;padding:18px 12px}
html.a2.k-gross .thema .ic{width:44px;height:44px}
html.a2.k-gross .thema b{font-size:1.12rem}
/* Mini-Spiele */
html.a2{--a2-ok:#1E8A4C;--a2-ok-hell:#E7F6EC;--a2-ok-text:#14532D;--a2-falsch:#C0392B;--a2-falsch-hell:#FBEAE8;--a2-falsch-text:#7F1D1D}
.a2-spiel{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.a2-spiel-label{font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.a2-quiz,.a2-suche,.a2-folge{display:flex;flex-direction:column;gap:8px}
.a2-quiz-a,.a2-paar,.a2-suche-p,.a2-folge-p{width:100%;text-align:left;background:var(--card);border:2px solid var(--line);border-radius:var(--a2-r,14px);padding:13px 16px;font:700 1rem/1.3 var(--sans);color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s,transform .1s}
.a2-quiz-a:active,.a2-paar:active,.a2-suche-p:active{transform:scale(.98)}
.a2-quiz-a.richtig,.a2-paar.passt{border-color:var(--a2-ok);background:var(--a2-ok-hell);color:var(--a2-ok-text)}
.a2-quiz-a.falsch,.a2-paar.falsch,.a2-folge-p.falsch{border-color:var(--a2-falsch);background:var(--a2-falsch-hell);color:var(--a2-falsch-text);animation:a2Wackeln .4s}
.a2-quiz-a:disabled{cursor:default}
.a2-paare{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.a2-paare-sp{display:flex;flex-direction:column;gap:8px}
.a2-paar{text-align:center;padding:12px 8px;font-size:.95rem;min-height:52px}
.a2-paar.gewaehlt{border-color:var(--a2-marke);background:color-mix(in srgb,var(--a2-marke) 10%,var(--card))}
.a2-paar.passt{opacity:.75;cursor:default}
.a2-suche-p{display:flex;align-items:center;gap:12px}
.a2-suche-k{flex:0 0 auto;width:24px;height:24px;border:2px solid var(--line);border-radius:7px;display:flex;align-items:center;justify-content:center}
.a2-suche-p.an .a2-suche-k{background:var(--a2-marke);border-color:var(--a2-marke)}
.a2-suche-p.an .a2-suche-k::after{content:"";width:10px;height:6px;border:solid var(--a2-auf-marke,#fff);border-width:0 0 2.5px 2.5px;transform:rotate(-45deg) translate(1px,-1px)}
.a2-suche-p.an span:last-child{text-decoration:line-through;color:var(--muted)}
.a2-folge-p{display:flex;align-items:center;gap:12px}
.a2-folge-nr{flex:0 0 auto;width:28px;height:28px;border:2px dashed var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem}
.a2-folge-p.passt{border-color:var(--a2-ok);background:var(--a2-ok-hell);color:var(--a2-ok-text);cursor:default}
.a2-folge-p.passt .a2-folge-nr{border:0;background:var(--a2-ok);color:#fff}
.a2-bild{position:relative;border:2px solid var(--line);border-radius:var(--a2-r,14px);overflow:hidden;background:var(--card);cursor:crosshair;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.a2-bild img{display:block;width:100%;height:auto;pointer-events:none}
.a2-bild.falsch{border-color:var(--a2-falsch);animation:a2Wackeln .4s}
.a2-bild-m{position:absolute;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}
.a2-bild-m.richtig{border:4px solid var(--a2-ok);background:color-mix(in srgb,var(--a2-ok) 28%,transparent);box-shadow:0 0 0 3px var(--card);animation:a2BildDa .35s ease-out}
.a2-bild-m.falsch{width:38px;border:3px solid var(--a2-falsch);background:color-mix(in srgb,var(--a2-falsch) 30%,transparent);box-shadow:0 0 0 2px var(--card);animation:a2BildWeg .7s forwards}
@keyframes a2BildDa{from{transform:translate(-50%,-50%) scale(.4);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
@keyframes a2BildWeg{0%{opacity:1}70%{opacity:1}100%{opacity:0}}
.a2-spiel-ok{margin:0;font-weight:800;color:var(--a2-ok);font-size:1.05rem;text-align:center}
@keyframes a2Wackeln{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){.a2-quiz-a.falsch,.a2-paar.falsch,.a2-folge-p.falsch,.a2-bild.falsch,.a2-bild-m.richtig{animation:none}}
/* Hauptknopf rechts (Regel wie im Coachinator): nach „Gemacht!“ steht „Nächster Zettel“ rechts, ein einzelner Hauptknopf (Saison-Zettel) ebenfalls rechts */
html.a2 .reihe2 > .btn-main{order:2}
html.a2 .reihe2 > #other.btn-main{grid-column:2}
/* Belohnung mit Bedingung */
#a2-bel{display:flex;flex-direction:column;gap:8px;margin:10px 0 4px}
.a2-bel-z{display:flex;align-items:center;gap:12px;background:var(--card);border:1.5px solid var(--line);border-radius:var(--a2-r,14px);padding:10px 14px}
.a2-bel-z.frei{border-color:var(--a2-marke);background:color-mix(in srgb,var(--a2-akzent,#F2B43C) 18%,var(--card));cursor:pointer;animation:a2BelPuls 2.2s ease-in-out infinite}
.a2-bel-z.ein{opacity:.65}
.a2-bel-sym{font-size:1.5rem;flex:0 0 auto}
.a2-bel-t{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.a2-bel-t small{color:var(--muted)}
.a2-bel-bar{display:block;height:6px;border-radius:3px;background:var(--line);overflow:hidden;margin-top:4px}
.a2-bel-bar i{display:block;height:100%;background:var(--a2-marke)}
.a2-bel-o{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.45)}
.a2-bel-k{background:var(--card);border-radius:var(--a2-r,18px);padding:26px 22px;max-width:380px;width:100%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.a2-bel-gross{font-size:3.4rem;line-height:1}
.a2-bel-h{display:block;font-size:1.25rem;margin:10px 0 6px}
.a2-bel-titel{font-size:1.1rem;font-weight:700;color:var(--a2-marke);margin:0 0 16px}
.a2-bel-o.voll{background:var(--a2-marke);align-items:stretch}
.a2-bel-gs{background:var(--card);border-radius:var(--a2-r,18px);padding:28px 22px;max-width:420px;width:100%;margin:auto;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.a2-bel-logo{max-width:180px;max-height:70px;object-fit:contain}
.a2-bel-gs-t{font-size:1.6rem;margin:0;line-height:1.2}
.a2-bel-gs-x{margin:0;color:var(--muted)}
.a2-bel-uhr{font:800 1.05rem/1.2 var(--sans);font-variant-numeric:tabular-nums;padding:8px 14px;border-radius:999px;background:color-mix(in srgb,var(--a2-marke) 12%,var(--card));color:var(--a2-marke)}
.a2-bel-stand{margin:0;font-size:.9rem;color:var(--muted)}
.a2-bel-gs .reihe2{width:100%}
.a2-bel-o.ist-ein .a2-bel-gs{opacity:.85}.a2-bel-o.ist-ein .a2-bel-stand{color:var(--a2-ok,#1E8A4C);font-weight:800}
@keyframes a2BelPuls{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--a2-marke) 30%,transparent)}50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--a2-marke) 0%,transparent)}}
@media (prefers-reduced-motion:reduce){.a2-bel-z.frei{animation:none}}
/* Teilen-Fenster (Erlebnis/Erfolg teilen, auf Wunsch mit Notiz) */
.a2-teilen-fenster .fenster{gap:12px}
.a2-tf-bild{display:block;width:100%;max-width:260px;aspect-ratio:1080/1350;margin:0 auto;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.18);background:var(--soft)}
.a2-tf-notiz{display:flex;align-items:center;gap:10px;font-weight:700;justify-content:center}
.a2-tf-notiz input{width:20px;height:20px;accent-color:var(--a2-marke)}
.a2-tf-los{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.a2-tf-los:disabled{opacity:.55}
#impuls-fenster .a2-teilen{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.a2-druck-tipp{display:block;margin-top:10px;padding:10px 12px;border-radius:var(--a2-rk,12px);background:color-mix(in srgb,var(--a2-akzent,#F2B43C) 22%,var(--card));color:var(--ink);font-weight:700;font-size:.92rem}
/* Ansprechpersonen in der Visitenkarte */
.a2-personen{display:flex;flex-direction:column;gap:10px;margin:8px 0 4px;max-height:52vh;overflow:auto}
.a2-p{border:1px solid var(--line);border-radius:var(--a2-r,14px);padding:12px 14px;background:var(--card);display:flex;flex-direction:column;gap:8px;text-align:left}
.a2-p-kopf{display:flex;gap:12px;align-items:center}
.a2-p-foto,.a2-p-ini{flex:0 0 auto;width:56px;height:56px;border-radius:50%;object-fit:cover}
.a2-p-ini{display:flex;align-items:center;justify-content:center;background:var(--a2-marke);color:var(--a2-auf-marke,#fff);font-weight:800}
.a2-p-t{display:flex;flex-direction:column;gap:1px;min-width:0}.a2-p-t span{color:var(--muted);font-size:.92rem}.a2-p-t small{color:var(--muted);font-size:.82rem}
.a2-p-text{margin:0;font-size:.92rem;color:var(--ink)}
.a2-p-wege{display:flex;flex-wrap:wrap;gap:6px}
.a2-p-k{display:inline-flex;align-items:center;gap:4px;padding:7px 12px;border-radius:999px;border:1.5px solid var(--line);text-decoration:none;color:var(--ink);font-weight:700;font-size:.88rem}

/* Schaufenster (Fotos aus dem App-Design) */
.a2-sf{margin:14px 0 6px}
.a2-sf-titel{margin:0 0 8px;font-size:1rem;font-weight:800;color:var(--ink)}
.a2-sf-streifen{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 8px;margin:0 -2px;scrollbar-width:none}
.a2-sf-streifen::-webkit-scrollbar{display:none}
.a2-sf-karte{flex:0 0 72%;max-width:300px;scroll-snap-align:start;position:relative;padding:0;border:0;border-radius:var(--a2-r,16px);overflow:hidden;background:var(--line);aspect-ratio:4/3;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.a2-sf-streifen.eins .a2-sf-karte{flex-basis:100%;max-width:none;aspect-ratio:16/9}
.a2-sf-karte img{width:100%;height:100%;object-fit:cover;display:block}
.a2-sf-unter{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 9px;color:#fff;font-weight:700;font-size:.92rem;text-align:left;background:linear-gradient(transparent,rgba(0,0,0,.62))}
.a2-sf-gross{position:fixed;inset:0;z-index:300;background:#0E0E10;display:flex;flex-direction:column}
.a2-sf-gross[hidden]{display:none}
html.a2-sf-offen{overflow:hidden}
.a2-sf-zu{position:absolute;top:max(12px,env(safe-area-inset-top));right:12px;z-index:2;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;font-size:28px;line-height:1;cursor:pointer}
.a2-sf-bahn{flex:1;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.a2-sf-bahn::-webkit-scrollbar{display:none}
.a2-sf-folie{flex:0 0 100%;scroll-snap-align:center;margin:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:64px 18px 24px;box-sizing:border-box}
.a2-sf-folie img{max-width:100%;max-height:62vh;object-fit:contain;border-radius:calc(var(--a2-r,16px) * .6)}
.a2-sf-folie figcaption{color:#fff;max-width:520px;width:100%;display:flex;flex-direction:column;gap:6px}
.a2-sf-folie figcaption b{font-size:1.15rem}
.a2-sf-folie figcaption span{opacity:.88;line-height:1.45}
.a2-sf-folie figcaption .btn{align-self:flex-start;margin-top:6px}
.a2-sf-punkte{display:flex;justify-content:center;gap:7px;padding:0 0 max(18px,env(safe-area-inset-bottom))}
.a2-sf-punkte i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35)}
.a2-sf-punkte i.an{background:#fff}

/* Bild zur Neuigkeit */
.a2-neu-karte.mit-bild{padding-top:0;overflow:hidden}
.a2-neu-bild{display:block;width:calc(100% + 28px);margin:0 -14px 4px;aspect-ratio:16/10;object-fit:cover;background:var(--line)}
.a2-neu-mini{width:52px;height:52px;border-radius:calc(var(--a2-r,16px) * .6);object-fit:cover;flex:0 0 auto}

/* Kampagnen: Link am Zettel */
.a2-z-link{display:flex;justify-content:center;margin:10px 0 0}
.a2-z-link[hidden]{display:none}

/* Gefällt mir */
#zettel{position:relative}
.a2-herz{position:absolute;top:12px;right:12px;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--card);display:grid;place-items:center;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent}
.a2-herz svg{width:22px;height:22px;fill:none;stroke:var(--muted,#6B7A7C);stroke-width:1.8;stroke-linejoin:round;transition:fill .15s,stroke .15s}
.a2-herz.an svg{fill:#E0435B;stroke:#E0435B}
.a2-herz.puls{animation:a2Herz .45s ease}
@keyframes a2Herz{0%{transform:scale(1)}40%{transform:scale(1.28)}100%{transform:scale(1)}}
.a2-herz[hidden]{display:none}
/* Spiel des Tages */
.a2-sdt{width:100%;display:flex;align-items:center;gap:12px;text-align:left;margin:10px 0 4px;padding:14px 16px;border-radius:var(--a2-r,16px);border:0;cursor:pointer;color:#fff;background:linear-gradient(135deg,var(--a2-marke),color-mix(in srgb,var(--a2-marke) 70%,var(--a2-akzent)));box-shadow:0 6px 16px rgba(0,0,0,.12)}
.a2-sdt-w svg{width:34px;height:34px;fill:none;stroke:#fff;stroke-width:1.8}.a2-sdt-w svg circle{fill:#fff;stroke:none}
.a2-sdt-t{flex:1;display:flex;flex-direction:column;gap:2px}.a2-sdt-t small{font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.9}.a2-sdt-t b{font-size:1rem}
.a2-sdt em{font-style:normal;font-size:1.4rem;font-weight:800}
.a2-sdt.fertig{background:var(--card);color:var(--ink);border:1px solid var(--line);box-shadow:none}.a2-sdt.fertig .a2-sdt-w svg{stroke:var(--a2-marke)}.a2-sdt.fertig .a2-sdt-w svg circle{fill:var(--a2-marke)}
/* Druck-Fenster passt ohne Scrollen aufs Handy (Briefkasten Reißzettel-Apps 3, 24.10.) */
@media (max-height:760px){
  #druck .fenster{padding:16px 16px 14px}
  #druck .fenster>*{margin-top:0;margin-bottom:8px}
  #druck h2{font-size:1.15rem!important;line-height:1.2}
  #druck .fenster>p.muted:first-of-type{font-size:.8rem!important;line-height:1.35}
  #druck #druck-status{font-size:.8rem!important;margin-bottom:6px}
  #druck .a2-druck-tipp{margin-top:6px;padding:7px 10px;font-size:.8rem;line-height:1.3}
  #druck .btn{min-height:42px;padding-top:8px;padding-bottom:8px;line-height:1.15;white-space:normal}
}
@media (max-height:640px){
  #druck .fenster>p.muted:first-of-type{display:none}
}
/* „Überzeugt von ad2stay?“ (Oliver 26.10.): nur in der Testphase – im ad2stay-Look (Nachtblau/Gold), damit klar ist, dass es nicht vom Unternehmen kommt */
.a2-ang{position:relative;margin:12px 0 4px}
.a2-ang-l{display:flex;align-items:center;gap:12px;padding:12px 44px 12px 14px;border-radius:var(--a2-r,16px);background:var(--card);border:1.5px dashed color-mix(in srgb,#163A70 45%,var(--line));color:var(--ink);text-decoration:none}
.a2-ang-m{flex:0 0 auto;width:44px;height:40px;white-space:nowrap;border-radius:calc(var(--a2-r,16px) * .6);background:#14213A;color:#fff;display:flex;align-items:center;justify-content:center;font:800 .78rem/1 var(--sans);letter-spacing:-.03em}.a2-ang-m i{font-style:normal;color:#E2B04A}
.a2-ang-t{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.a2-ang-t small{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.a2-ang-t b{font-size:.98rem;line-height:1.3}
.a2-ang-l em{font-style:normal;font-weight:800;font-size:1.3rem;color:#163A70}
.a2-ang-x{position:absolute;top:50%;right:6px;transform:translateY(-50%);width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:1.3rem;line-height:1;cursor:pointer}
.a2-ang-x:hover,.a2-ang-x:focus-visible{background:color-mix(in srgb,var(--ink) 8%,transparent)}
html.dm .a2-ang-l em{color:#E2B04A}html.dm .a2-ang-m{box-shadow:0 0 0 1px #2B3F45}