/* ---- Fernseher: Kanäle, Störbild, Beobachtung ---- */
.tv-schirm{container-type:inline-size}
.tv-kanal{position:absolute;inset:0;width:100%;height:100%;display:block;background:#07080A}
.tv-kanal[hidden],.tv-schirm video[hidden]{display:none}
.tv-osd{position:absolute;top:5cqw;right:6cqw;z-index:3;font-family:var(--mono);font-weight:600;font-size:5.4cqw;letter-spacing:.06em;color:#7CFF8A;
  text-shadow:0 0 6px rgba(124,255,138,.7),2px 2px 0 rgba(0,0,0,.6);pointer-events:none}
.tv-osd[hidden]{display:none}

.beob{position:absolute;inset:0;z-index:1;pointer-events:none;font-family:var(--mono);color:#E8EDE4;text-shadow:0 1px 2px rgba(0,0,0,.9)}
.beob[hidden]{display:none}
.beob-oben{position:absolute;top:4.2cqw;left:5.5cqw;right:5.5cqw;display:flex;justify-content:space-between;gap:3cqw;font-size:2.35cqw;letter-spacing:.08em;text-transform:uppercase;line-height:1.35}
.beob-oben b{font-weight:600}
.beob-rec{display:inline-flex;align-items:center;gap:1cqw;color:#FF6A55}
.beob-rec::before{content:"";width:1.8cqw;height:1.8cqw;border-radius:50%;background:#FF4B33;box-shadow:0 0 6px #FF4B33;animation:rec 1.2s steps(2) infinite}
.beob-rechts{text-align:right}
.beob-unten{position:absolute;left:5.5cqw;right:5.5cqw;bottom:4.2cqw;background:rgba(5,6,6,.62);border-left:.5cqw solid #F2E9A0;padding:1.6cqw 2.4cqw 1.8cqw}
.beob-vorgang{display:block;font-size:1.9cqw;letter-spacing:.12em;text-transform:uppercase;color:#B9C2B6;margin-bottom:.6cqw}
.beob-zeile{display:block;font-size:2.9cqw;line-height:1.35;min-height:2.7em;color:#F4F1E6}
.beob-zeile::after{content:"▌";margin-left:.2em;animation:rec 1s steps(2) infinite;color:#F2E9A0}
.beob-ende{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:2.2cqw;padding:6cqw}
.beob-ende[hidden]{display:none}
.beob-ende .gross{font-family:var(--serif);font-size:6.6cqw;line-height:1.1;color:#F4F1E6;text-shadow:none}
.beob-ende .klein-z{font-size:2.3cqw;letter-spacing:.14em;text-transform:uppercase;color:#B9C2B6}
.beob-ende .balken{display:inline-block;width:3.4cqw;height:2.2cqw;background:#E8EDE4;vertical-align:-.3cqw}
.fernseher[data-kanal="02"] .beob-unten,.fernseher[data-kanal="02"] .beob-oben{opacity:1}
@keyframes rec{50%{opacity:0}}

/* Programmtasten wie am alten Fernseher */
.tv-knoepfe{gap:6px}
.tv-knoepfe .kanal-schild{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:#A8A294;text-transform:uppercase;margin:0 4px 0 6px}
.p-taste{font-family:var(--mono);font-weight:600;font-size:15px;line-height:1;width:38px;height:32px;padding:0;cursor:pointer;color:#D9D3C4;
  background:linear-gradient(#5A5D63,#2C2E33);border:1px solid #0A0B0D;border-radius:5px;
  box-shadow:0 3px 0 #0A0B0D,inset 0 1px 0 rgba(255,255,255,.18);transition:transform .08s,box-shadow .08s,background .2s}
.p-taste:hover{background:linear-gradient(#6A6D73,#34363B);color:#fff}
.p-taste[aria-pressed="true"]{transform:translateY(3px);box-shadow:0 0 0 #0A0B0D,inset 0 2px 4px rgba(0,0,0,.6);
  background:linear-gradient(#2A2C30,#3A3D42);color:#E9C46A;text-shadow:0 0 8px rgba(233,196,106,.8)}
/* Einladung: die freien Tasten pulsieren leicht, bis einmal umgeschaltet wurde */
.fernseher:not(.umgeschaltet) .p-taste[aria-pressed="false"]{animation:lockt 2.4s ease-in-out infinite}
.fernseher:not(.umgeschaltet) .p-taste[data-k="2"]{animation-delay:.3s}
@keyframes lockt{0%,70%,100%{box-shadow:0 3px 0 #0A0B0D,inset 0 1px 0 rgba(255,255,255,.18)}35%{box-shadow:0 3px 0 #0A0B0D,0 0 0 3px rgba(233,196,106,.55),0 0 14px rgba(233,196,106,.45)}}
/* Handschriftlicher Zettel unter dem Gerät */
.fernseher{position:relative}
.tv-zettel{position:relative;width:max-content;margin:16px 3% 0 auto;font-family:var(--hand);font-weight:600;font-size:26px;line-height:1.05;color:#A3B4FF;
  text-align:right;transform:rotate(-3deg);pointer-events:none;transition:opacity .6s}
.zettel-pfeil{position:absolute;right:-30px;top:-34px;width:48px;height:36px;color:#A3B4FF}
.tv-zettel.weg{opacity:0}
@media (max-width:900px){
  .p-taste{width:44px;height:38px;font-size:17px}
  .tv-leiste{flex-wrap:wrap;row-gap:10px}
  .tv-zettel{margin:14px auto 0;font-size:24px;text-align:center}
  .zettel-pfeil{display:none}
}
@media (prefers-reduced-motion:reduce){.beob-rec::before,.beob-zeile::after,.p-taste{animation:none!important;transition:none}}
.fernseher.osd .beob-rechts{visibility:hidden}
.beob.schluss .beob-unten{display:none}
/* Ton-Taste am Gehäuse (Programm 2 und 3) */
.ton-taste{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;margin-right:10px;cursor:pointer;
  font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#D9D3C4;
  background:linear-gradient(#5A5D63,#2C2E33);border:1px solid #0A0B0D;border-radius:5px;
  box-shadow:0 3px 0 #0A0B0D,inset 0 1px 0 rgba(255,255,255,.18);transition:transform .08s,box-shadow .08s}
.ton-taste[hidden]{display:none}
.ton-taste:hover{color:#fff}
.ton-lampe{width:7px;height:7px;border-radius:50%;background:#3A3C40;box-shadow:inset 0 1px 1px rgba(0,0,0,.6)}
.ton-taste[aria-pressed="true"]{transform:translateY(3px);box-shadow:0 0 0 #0A0B0D,inset 0 2px 4px rgba(0,0,0,.6);background:linear-gradient(#2A2C30,#3A3D42);color:#E9C46A}
.ton-taste[aria-pressed="true"] .ton-lampe{background:#7CFF8A;box-shadow:0 0 6px 1px rgba(124,255,138,.8)}
@media (max-width:900px){.ton-taste{height:38px;font-size:13px;padding:0 14px}}
/* Programm zuckt, kurz bevor das Fremdsignal einbricht */
.fernseher.zuckt .tv-schirm{animation:flackern .35s steps(2) 2}
.fernseher[data-kanal] .tv-leiste #tv-label{transition:color .2s}
.fernseher.stoert #tv-label{color:#FF6A55}
/* Stufe 2: die Werbung spricht ins Protokoll */
.fernseher.stufe2 .beob-unten{border-left-color:#E4261C}
/* Stille: nur der Vers */
.tv-stille{position:absolute;inset:0;z-index:2;display:grid;place-items:center;padding:8cqw;pointer-events:none;opacity:0}
.tv-stille[hidden]{display:none}
.tv-stille p{margin:0;font-family:var(--serif);font-style:italic;font-size:6.2cqw;line-height:1.18;color:#ECE8DC;text-align:left}
.tv-stille p span{display:block}
.tv-stille p span:nth-child(2){padding-left:1.4em}
.tv-stille p span:nth-child(3){padding-left:2.8em}

/* =====================================================================
   RÖHRENFERNSEHER 16:9 · Behördengerät · Raumlicht · Netzschalter
   ===================================================================== */
.fernseher{width:min(780px,94vw);transform:rotate(-.6deg);position:relative;z-index:2}
/* Gehäuse: warmgrauer Kunststoff mit leichter Körnung */
.tv-gehaeuse{position:relative;padding:24px 26px 0;border-radius:30px 30px 24px 24px;border:1px solid #2E2B26;
  background:radial-gradient(120% 70% at 25% 0%,rgba(255,255,255,.20),transparent 55%),linear-gradient(180deg,#9C9688 0%,#878174 52%,#6C665B 100%);
  box-shadow:0 34px 70px rgba(0,0,0,.7),0 10px 22px rgba(0,0,0,.5),inset 0 2px 0 rgba(255,255,255,.28),inset 0 -3px 0 rgba(0,0,0,.25)}
.tv-gehaeuse::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.22;mix-blend-mode:multiply;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>")}
/* dunkler Rahmen um die Röhre */
.tv-roehre{position:relative;padding:clamp(8px,1.6vw,15px);border-radius:26px/30px;background:linear-gradient(180deg,#1B1B1A,#101010);
  box-shadow:inset 0 4px 10px rgba(0,0,0,.95),inset 0 -1px 0 rgba(255,255,255,.07),0 1px 0 rgba(255,255,255,.25),0 -1px 0 rgba(0,0,0,.35)}
/* Röhre: 16:9, abgerundete Ecken, tiefe Vignette */
.tv-schirm{aspect-ratio:16/9;border-radius:8% / 13%;overflow:hidden;background:#090B0A;
  box-shadow:inset 0 0 50px 10px rgba(0,0,0,.9),0 0 0 2px #050505}
.tv-bild{position:absolute;inset:0;transform-origin:50% 50%}
/* Glas: gewölbter Lichtreflex, dunkle Ränder wie bei einer Bildröhre */
.tv-glas{position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:inherit;
  background:radial-gradient(ellipse 60% 38% at 27% 16%,rgba(255,255,255,.17),rgba(255,255,255,.04) 60%,transparent 72%),
             radial-gradient(ellipse 120% 120% at 50% 50%,transparent 55%,rgba(0,0,0,.5) 100%),
             linear-gradient(165deg,rgba(255,255,255,.05),transparent 35%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),inset 0 10px 24px rgba(255,255,255,.035)}
.fernseher .tv-schirm::after{z-index:5}

/* Bedienfeld unten */
.tv-leiste{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:16px;margin:16px -26px 0;padding:12px 26px 14px;
  background:linear-gradient(180deg,#46433C,#2C2A26);border-top:1px solid rgba(0,0,0,.55);border-radius:0 0 23px 23px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);color:#A8A294}
.tv-marke{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.3em;color:#D6D0C0;white-space:nowrap}
.tv-marke i{font-family:var(--serif);font-size:17px;letter-spacing:0;color:#E9C46A;margin-left:2px}
/* Anzeige: grün leuchtendes Display */
.tv-anzeige{min-width:0;background:#0A110D;border-radius:4px;padding:6px 10px;box-shadow:inset 0 1px 4px #000,0 1px 0 rgba(255,255,255,.07)}
.tv-anzeige #tv-label{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:#7CFFB0;text-shadow:0 0 6px rgba(124,255,176,.65)}
.fernseher.stoert #tv-label{color:#FF6A55;text-shadow:0 0 6px rgba(255,106,85,.7)}
.tv-gitter{width:84px;height:26px;border-radius:3px;background:repeating-linear-gradient(90deg,#161513 0 3px,transparent 3px 6px);opacity:.9}
.tv-knoepfe{display:flex;align-items:center;gap:10px}
.ton-taste{margin-right:0}
/* Netzschalter */
.netz-taste{width:34px;height:34px;border-radius:50%;padding:0;cursor:pointer;position:relative;border:1px solid #0A0B0D;
  background:radial-gradient(circle at 35% 30%,#6A6D73,#1A1B1E);box-shadow:0 3px 0 #0A0B0D,inset 0 1px 0 rgba(255,255,255,.18);transition:transform .08s,box-shadow .08s}
.netz-taste:active,.netz-taste[aria-pressed="false"]{transform:translateY(2px);box-shadow:0 1px 0 #0A0B0D,inset 0 2px 4px rgba(0,0,0,.6)}
.netz-symbol{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border:2px solid #D9D3C4;border-radius:50%;border-top-color:transparent}
.netz-symbol::after{content:"";position:absolute;left:50%;top:-5px;width:2px;height:9px;margin-left:-1px;background:#D9D3C4;border-radius:1px}
.netz-taste:hover .netz-symbol,.netz-taste:hover .netz-symbol::after{border-color:#fff;border-top-color:transparent}
.netz-taste:hover .netz-symbol::after{background:#fff}
.fernseher.ist-aus .led{background:#3A1A16;box-shadow:none;animation:none}
.fernseher.ist-aus #tv-label{opacity:.12}
/* Standfuß */
.tv-fuss{width:34%;height:16px;margin:0 auto;background:linear-gradient(#3A3833,#1C1B18);border-radius:0 0 12px 12px;box-shadow:0 10px 18px rgba(0,0,0,.6)}

/* Spuren der Behörde */
.aufkleber-inventar{position:absolute;z-index:7;top:9px;left:34px;transform:rotate(-2.5deg);background:#F1EEE4;color:#1D1C19;border-radius:2px;
  font-family:var(--mono);font-size:8.5px;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;padding:4px 7px 5px;box-shadow:0 1px 2px rgba(0,0,0,.45)}
.aufkleber-inventar b{display:block;font-weight:600}
.aufkleber-inventar .strichcode{display:block;height:9px;margin-top:3px;
  background:repeating-linear-gradient(90deg,#1D1C19 0 1px,transparent 1px 3px,#1D1C19 3px 5px,transparent 5px 6px,#1D1C19 6px 7px,transparent 7px 10px)}
.pruefplakette{position:absolute;z-index:7;top:5px;right:40px;width:40px;height:40px;border-radius:50%;transform:rotate(14deg);
  display:grid;place-content:center;text-align:center;font-family:var(--mono);font-weight:600;font-size:14px;line-height:.95;color:#3A3020;
  background:conic-gradient(from 20deg,#D8C27A 0 25%,#CBB46A 25% 50%,#D8C27A 50% 75%,#CBB46A 75%);box-shadow:0 1px 2px rgba(0,0,0,.45),inset 0 0 0 2px rgba(255,255,255,.35);opacity:.92}
.pruefplakette small{font-size:5px;letter-spacing:.06em;text-transform:uppercase;font-weight:500}
.gaffa{position:absolute;z-index:7;left:-16px;bottom:78px;transform:rotate(-9deg);padding:6px 18px 7px 22px;
  font-family:var(--hand);font-weight:600;font-size:19px;line-height:1;color:#EEECE5;white-space:nowrap;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 2px,transparent 2px 4px),#232322;box-shadow:0 2px 3px rgba(0,0,0,.5);
  clip-path:polygon(0 8%,4% 0,9% 10%,14% 2%,100% 0,97% 30%,100% 55%,96% 78%,100% 100%,8% 100%,3% 92%,0 70%,3% 46%)}

/* Raumlicht: der Bildschirm färbt Tisch und Akte */
.raumlicht{position:absolute;left:50%;top:42%;width:230%;height:240%;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgb(var(--glow,150 170 190) / calc(var(--hell,.4) * .6)),rgb(var(--glow,150 170 190) / calc(var(--hell,.4) * .22)) 45%,transparent 78%);
  transition:opacity 1.6s}
.fernseher.ist-aus .raumlicht{opacity:0}

/* Ausschalten: Bild fällt zur Linie, dann zum Punkt */
.tv-schirm.aus-geht .tv-bild{animation:roehre-aus .55s cubic-bezier(.6,0,.9,.4) forwards}
@keyframes roehre-aus{0%{transform:scale(1,1);filter:brightness(1)}45%{transform:scale(1,.008);filter:brightness(3.5)}80%{transform:scale(.01,.008);filter:brightness(5)}100%{transform:scale(0,0);opacity:0}}
/* Nachleuchten: der letzte Vers glimmt im Phosphor nach */
.tv-nachleuchten{position:absolute;inset:0;z-index:4;display:grid;place-items:center;padding:9cqw;pointer-events:none}
.tv-nachleuchten[hidden]{display:none}
.tv-nachleuchten::before{content:"";position:absolute;left:50%;top:50%;width:1.2cqw;height:1.2cqw;margin:-.6cqw;border-radius:50%;background:#F4FFF8;
  box-shadow:0 0 12px 4px rgba(200,255,220,.8);animation:punkt 1.4s ease-out forwards}
@keyframes punkt{0%{opacity:1}100%{opacity:0;transform:scale(.3)}}
.tv-nachleuchten p{margin:0;font-family:var(--serif);font-style:italic;font-size:6.2cqw;line-height:1.18;color:#BFF5CF;text-align:left;
  text-shadow:0 0 10px rgba(150,255,190,.55);animation:nachglimmen 9s ease-out forwards}
.tv-nachleuchten p span{display:block}
.tv-nachleuchten p span:nth-child(2){padding-left:1.4em}
.tv-nachleuchten p span:nth-child(3){padding-left:2.8em}
@keyframes nachglimmen{0%{opacity:0;filter:blur(2px)}12%{opacity:.75;filter:blur(0)}100%{opacity:0;filter:blur(1.5px)}}

@media (max-width:900px){
  .fernseher{width:96vw;transform:none}
  .tv-gehaeuse{padding:16px 14px 0;border-radius:20px 20px 16px 16px}
  .tv-leiste{margin:12px -14px 0;padding:10px 14px 12px;border-radius:0 0 15px 15px;grid-template-columns:minmax(0,1fr) auto;gap:10px}
  .tv-marke,.tv-gitter{display:none}
  .aufkleber-inventar{left:18px;top:4px;font-size:7px;padding:3px 5px 4px}
  .pruefplakette{right:20px;top:2px;width:32px;height:32px;font-size:11px}
  .gaffa{font-size:15px;left:-8px;bottom:64px;padding:5px 14px 6px 18px}
  .netz-taste{width:38px;height:38px}
}
@media (prefers-reduced-motion:reduce){.tv-schirm.aus-geht .tv-bild{animation:none;opacity:0}.tv-nachleuchten p{animation:none;opacity:.6}}

/* =====================================================================
   AKTE: weniger Knöpfe. Blättern über den Deckel selbst (Eselsohr),
   Zurücklegen als leiser grauer Hinweis
   ===================================================================== */
.blaettern-knopf{display:none!important}   /* Element bleibt für akte.js, wird nur nicht gezeigt */
.zuruecklegen{background:none;color:#8E897C;font-weight:500;font-size:12px;letter-spacing:.14em;padding:10px 12px;top:14px;right:14px}
.zuruecklegen:hover,.zuruecklegen:focus-visible{color:#ECE8DC}
/* Eselsohr unten rechts am Deckel: hebt sich in der großen Ansicht beim Drüberfahren */
.deckel::after{content:"";position:absolute;right:-1px;bottom:-1px;width:5cqw;height:5cqw;pointer-events:none;
  background:linear-gradient(315deg,#101114 0 49%,#B79E66 50%,#E6D2A0 100%);border-top-left-radius:2px;
  box-shadow:-2px -2px 5px rgba(0,0,0,.25);transition:width .35s cubic-bezier(.3,1.4,.5,1),height .35s cubic-bezier(.3,1.4,.5,1)}
.akte-stapel.gross .deckel::after{width:8cqw;height:8cqw}
.akte-stapel.gross .deckel:hover::after,.akte-stapel.gross .deckel:focus-visible::after{width:14cqw;height:14cqw}
@media (hover:none){.akte-stapel.gross .deckel::after{width:12cqw;height:12cqw}}
@media (max-width:900px){.zuruecklegen{top:auto;bottom:14px;right:50%;transform:translateX(50%);font-size:13px}}
@media (prefers-reduced-motion:reduce){.deckel::after{transition:none}}

/* Inventaraufkleber: altes Papier, deckend; abgerieben ist nur die Druckfarbe.
   Sitzt auf dem Gehäuserahmen, nicht auf dem Glas. */
.aufkleber-inventar{top:7px;left:44px;transform:rotate(-1.8deg);display:grid;grid-template-columns:auto auto;align-items:center;column-gap:8px;
  padding:3px 7px 4px;font-size:7.5px;line-height:1.25;letter-spacing:.07em;color:#45413A;opacity:1;
  background:
    radial-gradient(ellipse 35% 60% at 88% 55%,rgba(120,92,40,.20),transparent 70%),
    radial-gradient(ellipse 25% 70% at 6% 40%,rgba(110,85,40,.16),transparent 70%),
    linear-gradient(180deg,rgba(255,255,255,.18),transparent 40%,rgba(90,70,30,.08)),
    #DCD2B6;
  clip-path:polygon(0 4%,3% 0,100% 0,100% 58%,97% 66%,98.5% 100%,4% 100%,0 88%);
  box-shadow:0 1px 1px rgba(0,0,0,.35);-webkit-mask-image:none;mask-image:none}
.aufkleber-inventar b{display:block;font-weight:600;opacity:1;grid-column:1;grid-row:1}
.aufkleber-inventar .inv-nr{grid-column:1;grid-row:2}
.aufkleber-inventar .strichcode{grid-row:1 / span 2;grid-column:2;width:38px;height:15px;margin:0;opacity:.75;
  background:repeating-linear-gradient(90deg,#45413A 0 1px,transparent 1px 3px,#45413A 3px 5px,transparent 5px 6px,#45413A 6px 7px,transparent 7px 10px)}
/* Abrieb: papierfarbene Flecken liegen über der Schrift */
.aufkleber-inventar::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='40'><filter id='a'><feTurbulence type='fractalNoise' baseFrequency='.9 1.8' numOctaves='3' seed='7'/><feColorMatrix values='0 0 0 0 .86  0 0 0 0 .82  0 0 0 0 .71  0 0 0 -2.4 1.55'/></filter><rect width='80' height='40' filter='url(%23a)'/></svg>")}
/* angehobene Ecke unten rechts */
.aufkleber-inventar::after{content:"";position:absolute;right:0;bottom:0;width:7%;height:38%;background:linear-gradient(135deg,#C9BD9D,#EEE7D3);box-shadow:-1px -1px 2px rgba(0,0,0,.3)}
@media (max-width:900px){.aufkleber-inventar{top:3px;left:24px;font-size:6px;padding:2px 5px 3px;column-gap:6px}.aufkleber-inventar .strichcode{width:28px;height:11px}}

/* Aufkleber knickt über die Kante des Gehäuses nach unten und klebt auf dem schwarzen Röhrenrahmen.
   --knick = Abstand von der Oberkante des Aufklebers bis zur Gehäusekante */
.aufkleber-inventar{--knick:23px;--ohr:13px;top:1px;padding-bottom:12px;
  clip-path:polygon(0 1px,3px 0,calc(100% - var(--ohr)) 0,100% var(--ohr),100% var(--knick),calc(100% - 1px) calc(var(--knick) + 3px),100% calc(100% - 2px),calc(100% - 4px) 100%,38% calc(100% - 1px),5px 100%,1px calc(var(--knick) + 3px),0 var(--knick))}
/* Eselsohr oben rechts: die Ecke ist nach innen umgeknickt, man sieht die Rückseite des Papiers */
.aufkleber-inventar::after{display:block;content:"";position:absolute;top:0;right:0;left:auto;bottom:auto;width:var(--ohr);height:var(--ohr);
  background:linear-gradient(45deg,#B9AE90 0%,#D3C9AD 55%,#E6DEC7 100%);clip-path:polygon(0 0,100% 100%,0 100%);box-shadow:none}
/* Schatten, den das umgeknickte Ohr auf den Aufkleber wirft */
.aufkleber-inventar .knick::before{content:"";position:absolute;right:0;top:calc(-1 * var(--knick) + 3px);width:calc(var(--ohr) * 2);height:calc(var(--ohr) * 2);
  background:radial-gradient(circle at calc(100% - var(--ohr)) var(--ohr),rgba(40,30,10,.28),transparent 70%)}
.aufkleber-inventar .knick{position:absolute;left:0;right:0;top:calc(var(--knick) - 3px);bottom:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(255,255,255,0) 0,rgba(255,255,255,.22) 2px,         /* Papier wölbt sich kurz vor der Kante */
    rgba(255,255,255,.5) 3px,rgba(255,255,255,.5) 4px,         /* Lichtkante am Knick */
    rgba(25,20,10,.62) 4px,rgba(25,20,10,.5) 7px,              /* Papier läuft die Stufe hinunter */
    rgba(25,20,10,.42) 8px,rgba(25,20,10,.48) 100%)}           /* liegt im Schatten auf dem schwarzen Rahmen */
@media (max-width:900px){.aufkleber-inventar{--knick:15px;--ohr:9px;top:1px;padding:1px 5px 9px;line-height:1.2}}

/* =====================================================================
   Tasten abgegriffen: Daumenglanz in der Mitte, Schmutz in den Rändern,
   Beschriftung und Netzsymbol teilweise abgerieben
   ===================================================================== */
.ton-taste{position:relative;overflow:hidden;
  background:radial-gradient(ellipse 45% 60% at 46% 58%,rgba(255,255,255,.11),transparent 70%),
             linear-gradient(#55585D,#2E3034);
  box-shadow:0 3px 0 #0A0B0D,inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 7px rgba(25,20,8,.55)}
.ton-taste .ton-text{color:#C7C1B2}
.ton-taste::after,.netz-taste::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='30'><filter id='a'><feTurbulence type='fractalNoise' baseFrequency='1.1 2.2' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 .24  0 0 0 0 .245  0 0 0 0 .26  0 0 0 -2.6 1.5'/></filter><rect width='60' height='30' filter='url(%23a)'/></svg>")}
.ton-taste[aria-pressed="true"]{background:radial-gradient(ellipse 45% 60% at 46% 58%,rgba(255,255,255,.07),transparent 70%),linear-gradient(#2A2C30,#37393E);
  box-shadow:0 0 0 #0A0B0D,inset 0 2px 4px rgba(0,0,0,.6),inset 0 0 7px rgba(25,20,8,.55)}
.netz-taste{background:radial-gradient(circle at 50% 52%,rgba(255,255,255,.16),transparent 38%),
                       radial-gradient(circle at 35% 30%,#62656B,#1A1B1E);
  box-shadow:0 3px 0 #0A0B0D,inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 2px rgba(25,20,8,.35),inset 0 0 6px rgba(25,20,8,.5)}
.netz-taste::after{opacity:.8}
.netz-symbol,.netz-symbol::after{border-color:#BDB7A8;border-top-color:transparent}
.netz-symbol::after{background:#BDB7A8}
/* Betriebslampe: leicht trübe Linse */
.led{box-shadow:0 0 6px 1px rgba(224,58,30,.55),inset 0 -1px 2px rgba(0,0,0,.35),inset 0 1px 1px rgba(255,220,200,.35)}
.ton-taste:hover .ton-text{color:#E8E2D2}
.ton-taste[aria-pressed="true"] .ton-text{color:#D9B65E}
/* Tasten im warmen Braungrau des Gehäuses */
.ton-taste{border-color:#14120E;
  background:radial-gradient(ellipse 45% 60% at 46% 58%,rgba(255,240,215,.10),transparent 70%),linear-gradient(#605A4E,#35322B)}
.ton-taste[aria-pressed="true"]{background:radial-gradient(ellipse 45% 60% at 46% 58%,rgba(255,240,215,.06),transparent 70%),linear-gradient(#2D2A24,#3B372F)}
.ton-lampe{background:#3A362F}
.netz-taste{border-color:#14120E;
  background:radial-gradient(circle at 50% 52%,rgba(255,240,215,.15),transparent 38%),radial-gradient(circle at 35% 30%,#6B6558,#1F1D19)}
.ton-taste::after,.netz-taste::after{
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='30'><filter id='a'><feTurbulence type='fractalNoise' baseFrequency='1.1 2.2' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 .27  0 0 0 0 .25  0 0 0 0 .215  0 0 0 -2.6 1.5'/></filter><rect width='60' height='30' filter='url(%23a)'/></svg>")}

/* Polaroid tiefer auf die Akte, Büroklammer in der linken oberen Fotoecke: klemmt Foto und Deckel zusammen */
.deckel .polaroid{top:-1%;right:-15%}
.deckel .polaroid .klammer{left:7%;top:-4.4cqw;transform:rotate(-6deg)}
@media (max-width:520px){.deckel .polaroid{top:-1%;right:-11%}}
/* Foto liegt flach auf der Akte: enger, dichter Schatten statt schwebendem Weichzeichner */
.deckel .polaroid{box-shadow:0 1px 2px rgba(0,0,0,.45),0 3px 7px -2px rgba(0,0,0,.4)}

/* Hinweis unter der Akte: Schreibmaschine der Behörde statt blauer Handschrift */
#hinweis{font-family:var(--mono);font-weight:500;font-size:clamp(14px,1.5vw,17px);letter-spacing:.06em;color:#D9D3C4;min-height:1.6em;margin-top:.4em}
#hinweis.tippt::after{content:"▌";margin-left:.15em;color:#E9C46A;animation:rec 1s steps(2) infinite}
@media (prefers-reduced-motion:reduce){#hinweis.tippt::after{animation:none}}

/* Markenschild in der Schreibmaschinenschrift der Behörde (aus dem Schrift-Test übernommen) */
.tv-marke{font-family:var(--mono);font-weight:500;letter-spacing:.24em}

/* Einschalten: Punkt in der Mitte, dann Linie, dann klappt das Bild auf; überhell, zittert, flimmert sich ein */
.tv-schirm.an-geht .tv-bild{animation:roehre-an 1.5s cubic-bezier(.25,.6,.3,1) both}
@keyframes roehre-an{
  0%  {transform:scale(0,0);filter:brightness(5)}
  10% {transform:scale(.015,.008);filter:brightness(6)}
  24% {transform:scale(1,.008);filter:brightness(4.5)}
  40% {transform:scale(1,1.05);filter:brightness(2.4) contrast(1.4) blur(1.2px)}
  48% {transform:scale(1,.97) translateY(1%);filter:brightness(.55) blur(.6px)}
  55% {transform:scale(1,1.01);filter:brightness(1.7)}
  61% {filter:brightness(.75)}
  67% {transform:scale(1,1) translateX(.4%);filter:brightness(1.35) blur(.4px)}
  74% {filter:brightness(.85)}
  81% {transform:translateX(-.3%);filter:brightness(1.15)}
  90% {filter:brightness(.95)}
  100%{transform:none;filter:none}}
/* Glühen der Röhre beim Hochfahren */
.tv-schirm.an-geht::before{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;
  background:radial-gradient(ellipse 60% 40% at 50% 50%,rgba(220,255,235,.35),transparent 70%);animation:an-gluehen 1.5s ease-out forwards}
@keyframes an-gluehen{0%,20%{opacity:0}30%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.tv-schirm.an-geht .tv-bild{animation:none}.tv-schirm.an-geht::before{display:none}}

/* Akte bekommt das Licht des Bildschirms ab: am Desktop von links (Fernseher steht links),
   am Handy von oben (Fernseher steht darüber). Farbe und Stärke kommen live aus dem Bild. */
.akte-stapel:not(.gross)::before{content:"";position:absolute;inset:-2%;z-index:5;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(90deg,rgb(var(--glow,150 170 190) / calc(var(--hell,.4) * .42)) 0,rgb(var(--glow,150 170 190) / calc(var(--hell,.4) * .12)) 45%,transparent 80%)}
@media (max-width:900px){
  .akte-stapel:not(.gross)::before{background:linear-gradient(180deg,rgb(var(--glow,150 170 190) / calc(var(--hell,.4) * .38)) 0,rgb(var(--glow,150 170 190) / calc(var(--hell,.4) * .1)) 40%,transparent 75%)}
}
.fernseher.ist-aus ~ .akte-platz .akte-stapel::before{opacity:0}

/* »Akteneinsicht beantragen«: Hinweis in Behördensprache, selbst anklickbar */
button.akte-hinweis{background:none;border:0;padding:6px 4px;cursor:pointer;font-family:var(--mono);color:#8E897C;
  text-decoration:underline;text-decoration-style:dotted;text-underline-offset:4px;text-decoration-color:rgba(142,137,124,.6)}
button.akte-hinweis:hover,button.akte-hinweis:focus-visible{color:#ECE8DC;text-decoration-color:#ECE8DC}


/* =====================================================================
   AKTENORDNER statt loser Akte: steht aufrecht neben dem Fernseher, auf derselben Fläche.
   Die Akte selbst bleibt im Code und erscheint erst groß, wenn man den Ordner zieht.
   ZURÜCKDREHEN: diesen Block bis »ENDE AKTENORDNER« löschen und in kanaele.html den <button class="ordner"> entfernen.
   ===================================================================== */
.akte-platz{position:relative;width:auto;padding-top:0;gap:0;align-self:flex-end}
.akte-stapel:not(.gross){position:absolute;left:0;top:0;width:220px;opacity:0;visibility:hidden;pointer-events:none}
.akte-stapel{transition:opacity .35s,transform .5s cubic-bezier(.3,1.2,.5,1)}
.akte-stapel.gross{opacity:1;visibility:visible}
/* Hinweis unter dem Ordner, ohne die Standfläche zu verschieben */

.ordner{position:relative;display:block;width:clamp(74px,8.4vw,100px);aspect-ratio:1/3.7;padding:0;border:0;cursor:pointer;border-radius:5px 5px 3px 3px;
  background:
    linear-gradient(90deg,rgba(0,0,0,.45) 0,rgba(0,0,0,.08) 9%,rgba(255,255,255,.10) 30%,rgba(255,255,255,.04) 55%,rgba(0,0,0,.18) 85%,rgba(0,0,0,.5) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='320'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='.012 .035' numOctaves='4' seed='11'/><feColorMatrix values='0 0 0 0 .36  0 0 0 0 .39  0 0 0 0 .44  0 0 0 -1.4 1.25'/></filter><rect width='160' height='320' fill='%23A6A9AD'/><rect width='160' height='320' filter='url(%23m)'/></svg>");
  background-size:100% 100%,160px 320px;
  box-shadow:0 34px 60px rgba(0,0,0,.7),0 8px 16px rgba(0,0,0,.5),inset 0 2px 0 rgba(255,255,255,.18),inset 0 -4px 0 rgba(0,0,0,.35);
  transition:transform .35s cubic-bezier(.3,1.3,.5,1)}
/* abgestoßene Kanten oben und unten */
.ordner::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(40,35,25,.35) 0,transparent 3%,transparent 97%,rgba(40,35,25,.45) 100%)}
/* Licht des Bildschirms auf dem Ordnerrücken (kommt von links) */
.ordner::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(90deg,rgb(var(--glow,150 170 190) / calc(var(--hell,.4) * .5)) 0,transparent 70%)}
.fernseher.ist-aus ~ .akte-platz .ordner::after{opacity:0}
.ordner:hover,.ordner:focus-visible{transform:translateY(-8px) rotate(-1.2deg)}
.ordner.zieht{transform:translateY(-38px) rotate(-2deg)}
/* Rückenschild: vergilbt, Schreibmaschine, Name senkrecht wie auf echten Ordnern */
.ordner-schild{position:absolute;left:14%;right:14%;top:7%;height:58%;display:flex;flex-direction:column;align-items:center;gap:6%;padding:7% 4%;
  background:linear-gradient(180deg,rgba(255,255,255,.2),transparent 30%,rgba(110,85,40,.12)),#DED4B8;
  box-shadow:inset 0 0 0 1px rgba(60,50,30,.35),0 1px 1px rgba(0,0,0,.3);color:#3A372F;overflow:hidden}
.ordner-schild::after{content:"";position:absolute;inset:0;pointer-events:none;   /* Abrieb */
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='120'><filter id='a'><feTurbulence type='fractalNoise' baseFrequency='1.2 2' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 .87  0 0 0 0 .83  0 0 0 0 .72  0 0 0 -2.6 1.5'/></filter><rect width='60' height='120' filter='url(%23a)'/></svg>")}
.ordner-az{font-family:var(--mono);font-weight:600;font-size:clamp(6.5px,.7vw,8.5px);letter-spacing:.04em;border-bottom:1px solid rgba(60,50,30,.4);padding-bottom:3px;width:100%;text-align:center}
.ordner-name{flex:1;writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--mono);font-weight:500;font-size:clamp(11px,1.25vw,15px);letter-spacing:.08em;white-space:nowrap}
.ordner-fach{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--mono);font-size:clamp(6px,.6vw,7.5px);letter-spacing:.1em;text-transform:uppercase;opacity:.75;white-space:nowrap}
/* Griffloch mit Metallring */
.ordner-griff{position:absolute;left:50%;bottom:9%;width:46%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle,#0C0C0B 0 52%,#5B5D60 54%,#C9CBCD 60%,#77797C 68%,#3A3B3D 74%,transparent 76%);
  box-shadow:0 1px 1px rgba(255,255,255,.15)}
@media (max-width:900px){
  .akte-platz{align-self:center;margin-top:30px;margin-bottom:6px}
  .ordner{width:68px}
}
@media (prefers-reduced-motion:reduce){.ordner{transition:none}}
/* Ausrichtung: Ordner steht dicht neben dem Gerät, beide auf derselben Standfläche */
@media (min-width:901px){
  .szene{gap:clamp(18px,2.2vw,34px);position:relative}
  /* gemeinsamer Bodenschatten unter Fernseher und Ordner */
  .szene::after{content:"";position:absolute;left:4%;right:2%;bottom:-14px;height:28px;z-index:0;pointer-events:none;
    background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(0,0,0,.55),transparent 75%)}
}
/* ---- Ausgewogenheit (Designdurchgang) ----
   1. Eine Achse: Der Fernseher steht genau in der Seitenmitte, darunter alle Texte auf derselben Mittelachse.
   2. Der Ordner ist Trabant: rechts neben dem Gerät, außerhalb der Achse, steht auf derselben Linie wie der Fuß.
   3. Hierarchie über Helligkeit: Der Ordner wird dunkel marmoriert, nur das Rückenschild leuchtet. */
@media (min-width:901px){
  .fernseher{width:min(780px,calc(100vw - 380px))}
  .szene{justify-content:center}
  .akte-platz{position:absolute;bottom:0;left:calc(50% + min(390px,50vw - 190px) + clamp(20px,2vw,30px));margin:0}
  .szene::after{left:calc(50% - min(390px,50vw - 190px));right:auto;width:calc(2 * min(390px,50vw - 190px) + 150px)}
}
.unten .akte-hinweis{position:static;transform:none;display:inline-block;margin-top:14px;font-size:12px;letter-spacing:.16em}
.ordner{
  background:
    linear-gradient(90deg,rgba(0,0,0,.55) 0,rgba(0,0,0,.12) 9%,rgba(255,255,255,.07) 30%,rgba(255,255,255,.02) 55%,rgba(0,0,0,.22) 85%,rgba(0,0,0,.6) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='320'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='.045 .09' numOctaves='5' seed='23'/><feColorMatrix values='0 0 0 0 .58  0 0 0 0 .56  0 0 0 0 .52  0 0 0 -1.5 .95'/></filter><rect width='160' height='320' fill='%2334322E'/><rect width='160' height='320' filter='url(%23m)'/></svg>");
  background-size:100% 100%,160px 320px}
.ordner::after{background:linear-gradient(90deg,rgb(var(--glow,150 170 190) / calc(var(--hell,.4) * .4)) 0,transparent 60%)}
/* Ordner stärker abgegriffen: helle, aufgeriebene Kanten (Pappe kommt durch), Griffspuren ums Loch,
   ein Kratzer, Rückenschild fleckiger */
.ordner{box-shadow:0 34px 60px rgba(0,0,0,.7),0 8px 16px rgba(0,0,0,.5),
  inset 0 0 0 2px rgba(150,128,92,.38),inset 0 0 9px 2px rgba(150,128,92,.28),
  inset 0 3px 0 rgba(190,170,130,.35),inset 0 -5px 0 rgba(170,150,110,.4)}
.ordner::before{background:
  radial-gradient(ellipse 34% 11% at 50% 86%,rgba(20,16,10,.55),transparent 75%),          /* Griffspuren ums Griffloch */
  radial-gradient(ellipse 40% 8% at 48% 91%,rgba(210,195,160,.12),transparent 70%),
  linear-gradient(104deg,transparent 46%,rgba(200,185,150,.22) 47%,transparent 48.5%),       /* Kratzer */
  linear-gradient(180deg,rgba(185,165,125,.45) 0,transparent 2.5%,transparent 96%,rgba(185,165,125,.55) 100%)}  /* aufgeriebene Ober- und Unterkante */
.ordner-schild{background:
  radial-gradient(ellipse 50% 22% at 70% 78%,rgba(120,90,35,.22),transparent 70%),
  radial-gradient(ellipse 35% 15% at 25% 30%,rgba(120,90,35,.16),transparent 70%),
  linear-gradient(180deg,rgba(255,255,255,.14),transparent 30%,rgba(110,85,40,.16)),#D8CDAE;
  clip-path:polygon(0 0,100% 0,100% 96%,88% 100%,0 100%)}
/* ENDE AKTENORDNER */


/* =====================================================================
   FORMBLATT B-1 · Antrag auf Benachrichtigung bei Freigabe
   Erscheint neben (Desktop) bzw. auf (Handy) der geöffneten Akte, nachdem Blatt 2 gezeigt wurde.
   ===================================================================== */
.formblatt{position:fixed;z-index:43;width:min(300px,90vw);padding:16px 18px 18px;color:#1D1C19;
  background:linear-gradient(180deg,rgba(255,255,255,.35),transparent 25%),#EDE6D3;
  box-shadow:0 2px 3px rgba(0,0,0,.4),0 14px 30px rgba(0,0,0,.5);font-family:var(--mono);
  left:calc(50% + min(280px,43vw,31vh) + 28px);top:50%;transform:translateY(-40%) rotate(2.2deg);
  opacity:0;transition:opacity .4s,transform .5s cubic-bezier(.3,1.3,.5,1)}
.formblatt.da{opacity:1;transform:translateY(-44%) rotate(1.4deg)}
.formblatt[hidden]{display:none}
.fb-kopf{display:flex;justify-content:space-between;gap:10px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#57524A;border-bottom:1.5px solid #1D1C19;padding-bottom:6px}
.fb-linie{display:inline-block;width:56px;border-bottom:1px solid #57524A;vertical-align:-2px}
.fb-titel{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.1;margin:12px 0 8px}
.fb-text{font-family:var(--sans);font-size:13px;line-height:1.45;margin:0 0 12px;color:#3A372F}
.fb-feld{display:block;margin-bottom:10px}
.fb-feld span{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#57524A;margin-bottom:3px}
.fb-feld input{width:100%;box-sizing:border-box;border:0;border-bottom:1.5px solid #1D1C19;background:transparent;padding:6px 2px;
  font-family:var(--hand);font-weight:600;font-size:22px;color:#2239B5;outline:none}
.fb-feld input:focus{border-bottom-color:#2239B5;background:rgba(34,57,181,.05)}
.fb-check{display:flex;gap:8px;align-items:flex-start;font-family:var(--sans);font-size:11.5px;line-height:1.4;color:#3A372F;cursor:pointer}
.fb-check input{margin:2px 0 0;accent-color:#2239B5;width:15px;height:15px;flex:none}
.fb-fehler{min-height:1.2em;margin:6px 0 2px;font-size:11px;color:#B3341E}
.fb-senden{margin-top:4px;border:2px solid #1D1C19;background:transparent;padding:9px 14px;cursor:pointer;
  font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#1D1C19}
.fb-senden:hover,.fb-senden:focus-visible{background:#1D1C19;color:#EDE6D3}
.fb-stempel{position:absolute;right:14px;bottom:16px;font-size:15px;padding:5px 10px;border-width:3px;opacity:0;transform:rotate(-12deg) scale(1.6)}
.fb-stempel small{display:block;font-size:8px}
.formblatt.eingegangen .fb-stempel{animation:stempeln .35s cubic-bezier(.2,1.6,.4,1) forwards}
.fb-senden{display:inline-block;text-decoration:none}
.fb-hinweis{font-family:var(--sans);font-size:11px;line-height:1.4;color:#57524A;margin:10px 0 0}
/* Schmalere Fenster: Formblatt liegt unten auf der Akte */
@media (max-width:1180px){
  .formblatt{left:50%;top:auto;bottom:62px;transform:translate(-50%,20px) rotate(-1.4deg)}
  .formblatt.da{transform:translate(-50%,0) rotate(-1.4deg)}
}
@media (prefers-reduced-motion:reduce){.formblatt{transition:none}.formblatt.eingegangen .fb-stempel{animation:none;opacity:.9;transform:rotate(-12deg)}}

/* Handy: kein Ordner. Die Akte ist über »Akteneinsicht beantragen« erreichbar.
   (.akte-platz bleibt im Dokument, weil die vergrößerte Akte darin steckt.) */
@media (max-width:600px){
  .ordner{display:none}
  .akte-platz{margin:0;height:0}
}
.formblatt.eingegangen .fb-senden{visibility:hidden}
.fb-oder{margin:14px 0 0;padding-top:10px;border-top:1px dashed rgba(29,28,25,.35);font-family:var(--sans);font-size:11.5px;line-height:1.45;color:#57524A}
.fb-oder a{color:#1D1C19;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;white-space:nowrap}
.fb-oder a:hover,.fb-oder a:focus-visible{color:#2239B5}
.fb-oder{display:flex;flex-direction:column;gap:6px}
.fb-begriff{font-family:var(--mono);font-size:11px;color:#3A372F}
.fb-begriff b{font-weight:600;color:#1D1C19}
.fb-begriff button{margin-left:6px;border:1px solid rgba(29,28,25,.5);background:transparent;padding:1px 6px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;cursor:pointer;color:#1D1C19}
.fb-begriff button:hover{background:#1D1C19;color:#EDE6D3}
.fb-kopiert{font-size:10.5px;color:#2239B5;min-height:1.2em}
/* »Beobachtung selbst einrichten« als zweite Taste, etwas leiser als »Antrag stellen« */
.fb-oder{flex-direction:column;align-items:flex-start;gap:8px}
.fb-knopf{display:inline-block;border:1.5px solid rgba(29,28,25,.65);padding:7px 12px;text-decoration:none!important;white-space:nowrap;
  font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#1D1C19!important}
.fb-knopf:hover,.fb-knopf:focus-visible{background:#1D1C19;color:#EDE6D3!important}
/* Der (unsichtbare) Stempel lag über der Taste und hat Klicks abgefangen */
.fb-stempel{pointer-events:none}

/* Upload-Fassung: nichts darf seitlich über den Bildschirmrand ragen (Raumlicht, versteckte Akte auf dem Handy) */
html,body{overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}}

/* Safari: schneidet Video und Canvas sonst nicht an den runden Ecken der Röhre ab (Bild ragt eckig unter dem Glas hervor) */
.tv-schirm{isolation:isolate}
.tv-bild{clip-path:inset(0 round 8% / 13%);-webkit-clip-path:inset(0 round 8% / 13%)}