/* ==========================================================================
   SiegelAI — das App-Fenster in vier Geräteansichten
   Rechner (Mac-Fenster mit Seitenleiste) · Tablet · Handy · Terminal.
   Die Gehäuse sind angedeutet, nicht abgebildet: ein paar Linien, keine
   Fotos, keine Markenzeichen.
   ========================================================================== */

/* --- Umschalter ---------------------------------------------------------- */
.af-schalter{
  display:inline-flex;gap:2px;padding:3px;margin-bottom:22px;
  background:var(--bg2);border-radius:100px;flex-wrap:wrap;
}
.af-schalter button{
  border:0;background:transparent;cursor:pointer;
  font-family:var(--f);font-size:13.5px;font-weight:500;color:var(--sub);
  padding:8px 17px;border-radius:100px;transition:background .18s,color .18s;
}
.af-schalter button:hover{color:var(--ink);}
.af-schalter button[aria-selected="true"]{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.09);}

/* --- Bühne und Gerät ----------------------------------------------------- */
.af-buehne{position:relative;}
/* Bezugsrahmen für die Gehäusemaße: 1cqw ist ein Prozent der Gerätebreite.
   Dadurch skaliert das Gehäuse mit, statt bei kleinen Größen zu klobig zu
   wirken. Die Werte unten sind auf 980 px Gerätebreite gerechnet. */
.af-geraet{margin:0 auto;container-type:inline-size;}
.af-huelle{position:relative;}

/* Gehäusemerkmale, die je Ansicht ein- oder ausgeblendet werden */
.af-insel{display:none;}
.af-strich{display:none;}
.af-basis{display:none;}
.af-leiste{display:none;}
.af-maschine{display:none;}

/* ===== Gemeinsam: das Fenster hat eine feste Form, nicht die des Inhalts =====
   Ohne das wächst und schrumpft es bei jeder Nachricht — das wirkt unruhig. */
.af-fenster{display:flex;flex-direction:column;overflow:hidden;position:relative;}
.af-innen{flex:1;min-height:0;}
.af-haupt{min-height:0;position:relative;}
.af-verlauf{flex:1;min-height:0;overflow:hidden;justify-content:flex-end;}

/* ===== AM RECHNER — MacBook: 1,54:1, dünner dunkler Rand ================= */
.af-geraet[data-geraet="rechner"]{max-width:min(980px, 100%);}
.af-geraet[data-geraet="rechner"] .af-huelle{
  padding:1.02cqw 1.02cqw 1.12cqw;background:#111113;border-radius:1.74cqw;
  box-shadow:0 2.04cqw 5.1cqw rgba(0,0,0,.2), inset 0 0 0 1px rgba(255,255,255,.08);
}
.af-geraet[data-geraet="rechner"] .af-fenster{aspect-ratio:1.5;border-radius:.92cqw;border-color:transparent;box-shadow:none;}
/* Kameraaussparung: beim MacBook Pro rund 16 % der Bildbreite, unten gerundet.
   Sie sitzt IM Bild, nicht im Gehäuse — deshalb liegt sie über dem Fenster. */
.af-geraet[data-geraet="rechner"] .af-insel{
  display:block;position:absolute;top:1.02cqw;left:50%;transform:translateX(-50%);
  width:16%;height:2.24cqw;background:#111113;
  border-radius:0 0 1.12cqw 1.12cqw;z-index:4;
}
.af-geraet[data-geraet="rechner"] .af-insel::after{
  content:'';position:absolute;top:.71cqw;left:50%;transform:translateX(-50%);
  width:.61cqw;height:.61cqw;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #4a4a52, #16161a 70%);
}
/* Die Fensterleiste muss der Aussparung ausweichen. */
.af-geraet[data-geraet="rechner"] .af-leiste{padding-top:1.53cqw;}

/* --- Die Basis: das Gehäuseunterteil ------------------------------------
   Alle Werte sind am Vorbild abgemessen: das Unterteil ist 1,213 mal so
   breit wie der Deckel und 4,4 % von dessen Breite hoch. Die Unterkante
   ist stark gerundet, der Verlauf geht von einer Lichtkante an der Naht
   bis ins Schwarze. Standfüße sind keine zu sehen. */
.af-geraet[data-geraet="rechner"] .af-basis{
  display:block;position:relative;
  width:calc(100% + 21.3%);margin:0 -10.65%;
  /* Die Höhe folgt der Breite, damit das Verhältnis auf jedem Schirm
     gleich bleibt. 27,6 : 1 ist am Vorbild abgemessen. */
  aspect-ratio:27.6 / 1;
  /* Flacher Balken mit leicht gerundeten Ecken, wie am Vorbild. */
  border-radius:.41cqw .41cqw 1.33cqw 1.33cqw;
  background:linear-gradient(180deg,
    #3e3e46 0%,      /* Naht zum Deckel, hellste Zone */
    #33333b 13%,
    #292930 45%,
    #1d1d22 82%,
    #141418 100%);   /* Boden */
  box-shadow:0 1.63cqw 3.06cqw rgba(0,0,0,.30),
             inset 0 1px 0 rgba(255,255,255,.13);
}
/* Die beiden Standfüße, unten an den Außenseiten */
.af-geraet[data-geraet="rechner"] .af-basis::before{
  content:'';position:absolute;left:0;right:0;bottom:-5%;height:25%;
  background:
    linear-gradient(180deg,#0f0f13 0%,#07070a 100%) no-repeat 11% 0 / 6% 100%,
    linear-gradient(180deg,#0f0f13 0%,#07070a 100%) no-repeat 89% 0 / 6% 100%;
  border-radius:0 0 .41cqw .41cqw;
}
/* Die Mulde zum Aufklappen, mittig in der Oberkante */
.af-geraet[data-geraet="rechner"] .af-basis::after{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:13%;height:39%;
  background:linear-gradient(180deg,#5c5c68 0%,#4c4c57 44%,#3d3d47 100%);
  border-radius:0 0 .82cqw .82cqw;
  box-shadow:inset 0 -.2cqw .31cqw rgba(0,0,0,.34), 0 .1cqw 0 rgba(0,0,0,.22);
}
.af-geraet[data-geraet="rechner"] .af-leiste{display:flex;}
.af-geraet[data-geraet="rechner"] .af-seite{display:flex;}

/* ===== AM TABLET — iPad: 1,43:1, gleichmäßiger Rand ====================== */
.af-geraet[data-geraet="tablet"]{max-width:min(720px, 100%);}
.af-geraet[data-geraet="tablet"] .af-huelle{
  padding:14px;background:#111113;border-radius:30px;
  box-shadow:0 18px 46px rgba(0,0,0,.2), inset 0 0 0 1px rgba(255,255,255,.08);
}
.af-geraet[data-geraet="tablet"] .af-fenster{aspect-ratio:1.43;border-radius:17px;border-color:transparent;box-shadow:none;}
.af-geraet[data-geraet="tablet"] .af-seite{display:flex;width:168px;}
.af-geraet[data-geraet="tablet"] .af-seite .af-gruppe{display:none;}
.af-geraet[data-geraet="tablet"] .af-seite-fuss{font-size:11px;gap:6px;}

/* ===== AM HANDY — iPhone: 19,5:9 hoch, Insel oben ======================= */
.af-geraet[data-geraet="handy"]{max-width:min(322px, 100%);}
.af-geraet[data-geraet="handy"] .af-huelle{
  padding:11px;background:#111113;border-radius:52px;
  box-shadow:0 20px 48px rgba(0,0,0,.24), inset 0 0 0 1px rgba(255,255,255,.09);
}
.af-geraet[data-geraet="handy"] .af-fenster{
  aspect-ratio:0.4615;border-radius:42px;border-color:transparent;box-shadow:none;padding-top:30px;
}
.af-geraet[data-geraet="handy"] .af-insel{
  display:block;position:absolute;top:21px;left:50%;transform:translateX(-50%);
  width:88px;height:25px;background:#111113;border-radius:100px;z-index:3;
}
.af-geraet[data-geraet="handy"] .af-seite{display:none;}
.af-geraet[data-geraet="handy"] .af-vorlage:nth-of-type(2){display:none;}
.af-geraet[data-geraet="handy"] .af-kopf{padding:8px 14px;}
/* Am Handy trägt der Kopf die Bedienung der App statt der Marke: links das
   Menü, rechts eine neue Unterhaltung. Das Logo weicht dafür. */
[data-app-fenster][data-geraet="handy"] .af-kopf-logo{display:none;}
[data-app-fenster][data-geraet="handy"] .af-menue,
[data-app-fenster][data-geraet="handy"] .af-neuchat{display:flex;}
/* Am Handy steht der Name der Unterhaltung mittig zwischen den beiden
   Zeichen, nicht links daneben. Absolut gesetzt, damit er von der Breite
   der Zeichen unabhängig bleibt. */
[data-app-fenster][data-geraet="handy"] .af-kopf{position:relative;}
[data-app-fenster][data-geraet="handy"] .af-titel{
  position:absolute;left:50%;transform:translateX(-50%);
  max-width:calc(100% - 92px);text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.af-geraet[data-geraet="handy"] .af-titel{font-size:13px;}
.af-geraet[data-geraet="handy"] .af-modell{display:none;}
.af-geraet[data-geraet="handy"] .af-verlauf{padding:14px;}
.af-geraet[data-geraet="handy"] .af-text{font-size:13px;}
.af-geraet[data-geraet="handy"] .af-eingabe{padding:8px 13px 22px;}
/* Bei offener Tastatur entfällt der Platz für den Startbalken: gemessen am
   Vorbild bleiben rund 20px zwischen Schriftunterkante und Tastaturoberkante. */
[data-app-fenster][data-geraet="handy"].tt-offen .af-eingabe{padding-bottom:5px;}
.af-geraet[data-geraet="handy"] .af-strich{
  display:block;position:absolute;left:50%;bottom:19px;transform:translateX(-50%);
  width:120px;height:4px;background:rgba(0,0,0,.24);border-radius:100px;z-index:3;
}

/* ===== AM TERMINAL — Industriemonitor 16:10, kantiges Gehäuse ========== */
.af-geraet[data-geraet="terminal"]{max-width:min(860px, 100%);}
.af-geraet[data-geraet="terminal"] .af-huelle{
  padding:17px;background:#2a2a2e;border-radius:8px;
  box-shadow:0 16px 40px rgba(0,0,0,.26), 0 0 0 3px #111113, inset 0 1px 0 rgba(255,255,255,.07);
}
.af-geraet[data-geraet="terminal"] .af-fenster{aspect-ratio:1.6;border-radius:3px;border-color:transparent;box-shadow:none;}
.af-geraet[data-geraet="terminal"] .af-maschine{display:flex;}
.af-geraet[data-geraet="terminal"] .af-seite{display:none;}
.af-geraet[data-geraet="terminal"] .af-vorlage:nth-of-type(2){display:none;}
.af-geraet[data-geraet="terminal"] .af-verlauf{padding:22px;}
.af-geraet[data-geraet="terminal"] .af-text{font-size:15.5px;line-height:1.6;}
.af-geraet[data-geraet="terminal"] .af-feld{font-size:15px;}
.af-geraet[data-geraet="terminal"] .af-zeile{padding:13px 15px;border-radius:12px;}
.af-geraet[data-geraet="terminal"] .af-senden{width:34px;height:34px;}
.af-geraet[data-geraet="terminal"] .af-avatar{width:32px;height:32px;}

/* --- Das Fenster selbst -------------------------------------------------- */
.af-fenster{
  background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:0 4px 26px rgba(0,0,0,.07),0 1px 2px rgba(0,0,0,.04);position:relative;
}

/* Fensterleiste mit Ampel — nur am Rechner */
.af-leiste{align-items:center;gap:.71cqw;padding:1.12cqw 1.43cqw;background:var(--bg2);border-bottom:1px solid var(--line2);}
.af-ampel{width:1.12cqw;height:1.12cqw;border-radius:50%;background:#d2d2d7;flex:none;}
.af-leiste .af-ampel:nth-child(1){background:#ff5f57;}
.af-leiste .af-ampel:nth-child(2){background:#febc2e;}
.af-leiste .af-ampel:nth-child(3){background:#28c840;}

/* Maschinenzeile — nur am Terminal */
.af-maschine{align-items:center;gap:9px;padding:11px 16px;background:#111113;color:#fff;font-size:12.5px;font-family:var(--fm);letter-spacing:.03em;}
.af-maschine .af-punkt{width:8px;height:8px;border-radius:50%;background:#ff453a;flex:none;}
.af-maschine .af-ort{opacity:.58;margin-left:auto;}

.af-innen{display:flex;min-width:0;}

/* --- Seitenleiste -------------------------------------------------------- */
.af-seite{
  display:none;flex-direction:column;width:212px;flex:none;
  background:var(--bg2);border-right:1px solid var(--line2);padding:12px 10px;gap:2px;
}
.af-seite-kopf{display:flex;align-items:center;gap:8px;padding:4px 8px 12px;font-size:13.5px;font-weight:600;color:var(--ink);}
.af-seite-kopf img{border-radius:22%;}
.af-neu{
  font-size:12.5px;font-weight:500;color:var(--ink);background:#fff;border:1px solid var(--line);
  border-radius:8px;padding:7px 11px;margin-bottom:12px;
}
.af-gruppe{font-family:var(--fm);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--sub);padding:10px 8px 5px;}
.af-eintrag{
  font-size:12.5px;color:var(--body);padding:7px 9px;border-radius:7px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.af-eintrag.af-an{background:#fff;color:var(--ink);font-weight:500;box-shadow:0 1px 2px rgba(0,0,0,.06);}
/* Einträge mit hinterlegtem Beispiel lassen sich anklicken. */
.af-eintrag.af-waehlbar{cursor:pointer;}
.af-eintrag.af-waehlbar:hover{background:rgba(0,0,0,.045);color:var(--ink);}
.af-eintrag.af-waehlbar.af-an:hover{background:#fff;}
.af-seite-fuss{margin-top:auto;display:flex;align-items:center;gap:8px;padding:12px 8px 2px;border-top:1px solid var(--line);font-size:12px;color:var(--sub);}
.af-seite-fuss span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.af-kreis{width:23px;height:23px;border-radius:50%;background:linear-gradient(135deg,#5AC8FA,#007AFF);color:#fff;font-size:9.5px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;}

/* --- Hauptbereich -------------------------------------------------------- */
.af-haupt{flex:1;min-width:0;display:flex;flex-direction:column;}
.af-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 16px;border-bottom:1px solid var(--line2);}
.af-menue,.af-neuchat{display:none;align-items:center;justify-content:center;flex:none;}
.af-menue svg{width:19px;height:19px;display:block;}
.af-neuchat svg{width:20px;height:20px;display:block;}
.af-kopf-links{display:flex;align-items:center;gap:9px;min-width:0;}
.af-kopf-logo{border-radius:22%;flex:none;}
.af-geraet[data-geraet="rechner"] .af-kopf-logo,
.af-geraet[data-geraet="tablet"] .af-kopf-logo{display:none;}
.af-titel{font-size:14px;font-weight:600;letter-spacing:-.2px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.af-modell{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--sub);background:var(--bg2);padding:4px 10px;border-radius:8px;font-family:var(--fm);white-space:nowrap;flex:none;}

/* --- Nachrichten --------------------------------------------------------- */
.af-verlauf{padding:18px;min-height:268px;display:flex;flex-direction:column;gap:14px;}
.af-msg{display:flex;gap:11px;animation:afRein .4s ease forwards;opacity:0;}
@keyframes afRein{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.af-avatar{width:28px;height:28px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;}
.af-avatar.ich{background:linear-gradient(135deg,#5AC8FA,#007AFF);color:#fff;}
.af-avatar.ki{background:var(--bg2);border-radius:22%;overflow:hidden;}
.af-avatar.ki img{width:100%;height:100%;border-radius:22%;}
.af-koerper{flex:1;min-width:0;}
.af-rolle{font-size:11px;font-weight:600;color:var(--sub);margin-bottom:3px;}
.af-text{font-size:14px;color:var(--ink);line-height:1.62;}
.af-text strong{font-weight:600;}
.af-text .af-wert{background:var(--fund-bg);color:#7c4708;padding:.05em .3em;border-radius:3px;font-weight:600;}
/* Seitenverweis: blau hinterlegt wie eine gewählte Vorlage. Im Betrieb führt
   ein Klick auf die Seite im Original, hier ist es nur die Ansicht davon. */
.af-text .af-seite-nr{
  display:inline-block;padding:1px 5px;border-radius:100px;vertical-align:1px;
  background:linear-gradient(180deg,var(--blau3),var(--blau));color:#fff;
  font-size:7.7px;font-weight:600;line-height:1.4;white-space:nowrap;
  box-shadow:0 1px 3px rgba(0,122,255,.2);
}

.af-punkte{display:flex;gap:4px;padding:5px 0;}
.af-punkte i{width:6px;height:6px;border-radius:50%;background:var(--sub);animation:afTippen 1.4s infinite;}
.af-punkte i:nth-child(2){animation-delay:.2s;}
.af-punkte i:nth-child(3){animation-delay:.4s;}
@keyframes afTippen{0%,60%,100%{transform:translateY(0);opacity:.4;}30%{transform:translateY(-4px);opacity:1;}}

/* --- Belegfuß ------------------------------------------------------------ */
.af-beleg{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px;padding:7px 10px;border-radius:9px;font-size:11px;line-height:1.45;}
.af-beleg svg{width:13px;height:13px;flex:none;}
.af-beleg-titel{font-weight:700;}
.af-beleg.ja{background:var(--belegt-bg);border:1px solid var(--belegt-line);color:var(--belegt);}
.af-beleg.nein{background:var(--fund-bg);border:1px solid var(--fund-line);color:var(--fund);}
.af-stelle{
  font-family:var(--f);font-size:10.5px;font-weight:600;color:inherit;
  background:rgba(255,255,255,.75);border:1px solid currentColor;border-radius:6px;
  padding:2px 8px;cursor:pointer;opacity:.92;
}
.af-stelle:hover{opacity:1;background:#fff;}
.af-stelle.haus{background:var(--haus-bg);border-color:var(--haus-line);color:var(--haus);}

/* --- Eingabe ------------------------------------------------------------- */
.af-eingabe{padding:10px 16px 14px;margin-top:auto;}
/* --- Vorlagen über dem Eingabefeld --------------------------------------
   Vorkonfigurierte Prompts zum Auswählen, dazu ein Knopf zum Hinzufügen.
   Sie tragen den Akzent der Seite, wie die Schaltfläche oben rechts, nur
   kleiner, damit sie das Eingabefeld nicht erschlagen. */
.af-vorlagen{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-bottom:6px;}
.af-vorlage{
  padding:2.3px 6.6px;border:none;border-radius:100px;
  background:rgba(0,0,0,.05);color:var(--sub);
  font-family:var(--f);font-size:7.7px;font-weight:600;line-height:1.4;cursor:pointer;
  white-space:nowrap;box-shadow:none;
  transition:background .25s,color .25s,box-shadow .25s;
}
.af-vorlage:hover{background:rgba(0,0,0,.09);color:var(--ink);}
/* Angeklickt: die Vorlage ist gewählt und färbt sich blau. */
.af-vorlage.gewaehlt{
  background:linear-gradient(180deg,var(--blau3),var(--blau));color:#fff;
  box-shadow:0 1px 4px rgba(0,122,255,.2);
}
/* Das Plus ist die Nebenhandlung: dezent grau, kein Farbgewicht. */
.af-vorlage.neu{
  padding:2.3px 5.5px;font-size:9.4px;line-height:1.1;font-weight:500;
  background:rgba(0,0,0,.05);color:var(--sub);box-shadow:none;
}
.af-vorlage.neu:hover{background:rgba(0,0,0,.09);color:var(--ink);transform:none;box-shadow:none;}
/* Weißes Feld mit feiner Umrandung in der Seitenfarbe, wie im KI-System-Intro. */
.af-zeile{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--aline);border-radius:14px;padding:9px 13px;box-shadow:0 0 0 3px var(--afaint);transition:border-color .2s,background .2s;}
.af-werkzeuge{display:flex;align-items:center;gap:8px;flex:none;}
.af-werkzeuge svg{opacity:.45;}
/* Mehrzeilig: lange Fragen brechen um, statt seitlich wegzulaufen. Das Feld
   wächst nach oben mit, die Höhe setzt das Skript beim Tippen. */
.af-feld{
  flex:1;border:0;background:transparent;color:var(--ink);font-size:13.5px;
  font-family:var(--f);outline:none;min-width:0;
  resize:none;overflow:hidden;line-height:1.35;
  height:18px;max-height:73px;padding:0;display:block;
}
.af-feld::placeholder{color:var(--sub);}
.af-senden{
  background:linear-gradient(180deg,#4da6ff,#007AFF);border:0;border-radius:50%;
  width:29px;height:29px;flex:none;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(0,122,255,.25);
  transition:transform .12s ease,box-shadow .12s ease;
}
.af-senden.gedrueckt{transform:scale(.88);box-shadow:0 1px 3px rgba(0,122,255,.35);}
/* --- Fenster zur Wahl der Wissensdatenbank -------------------------------
   Liegt über dem Chat, wie in der Anwendung selbst: Titel, darunter die
   verfügbaren Datenbanken. In der Vorführung wird eine davon angeklickt. */
.af-wissen{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.96);
  z-index:12;width:min(262px,84%);padding:16px 18px;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 10px 40px rgba(0,0,0,.18);
  opacity:0;pointer-events:none;transition:opacity .22s ease, transform .22s ease;
}
.af-wissen.offen{opacity:1;transform:translate(-50%,-50%) scale(1);}
.af-wissen-kopf{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:13px;font-weight:700;color:var(--ink);margin-bottom:12px;
}
.af-wissen-kopf span{font-weight:400;font-size:12px;color:var(--sub);}
/* Ein Eintrag ist eine Zeile Text, wie in der Anwendung:
   Name, Marke, dann die Zahl in Klammern. */
.af-wissen-eintrag{
  display:block;width:100%;text-align:left;
  padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;
  font-family:inherit;font-size:12px;color:var(--ink);cursor:default;
  transition:background .2s, border-color .2s;
}
.af-wissen-eintrag.gewaehlt{background:var(--afaint);border-color:var(--aline);}
.af-wissen-marke{
  display:inline-block;background:var(--blau);color:#fff;font-size:8.5px;font-weight:700;
  padding:1px 5px;border-radius:3px;letter-spacing:.02em;margin:0 4px;
  vertical-align:middle;
}
/* Das angeklickte Werkzeug leuchtet kurz auf. */
.af-werkzeuge svg.an{opacity:1;stroke:var(--akzent2);}

.af-quelle-an{display:none;align-items:center;gap:6px;padding:6px 12px 0;font-size:11.5px;color:#007AFF;}
.af-quelle-an.sichtbar{display:flex;}
/* Das Kreuz zum Abwählen, wie in der Anwendung. */
.af-quelle-weg{margin-left:2px;opacity:.55;font-size:10px;line-height:1;}

/* --- Datei hineinziehen -------------------------------------------------- */
.af-zeiger{position:absolute;z-index:10;pointer-events:none;opacity:0;transition:opacity .3s;display:flex;align-items:flex-start;}
.af-zeiger.sichtbar{opacity:1;}
/* Nur am Rechner gibt es einen Mauspfeil. Auf den Geräten mit Touch wird
   dieselbe Datei sichtbar hereingezogen, es fehlt allein der Pfeil. Er wird
   nur unsichtbar geschaltet, nicht ausgehängt, damit die Breite des Zeigers
   und damit die Berechnung der Wege unverändert bleibt. */
[data-app-fenster][data-geraet="tablet"] .af-zeiger > svg,
[data-app-fenster][data-geraet="handy"] .af-zeiger > svg,
[data-app-fenster][data-geraet="terminal"] .af-zeiger > svg{opacity:0;}
.af-zeiger svg{width:19px;height:23px;flex:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.18));}
/* Ab dem Abwurf führt die Maus nichts mehr mit sich. Die Karte wird nur
   unsichtbar, nicht ausgehängt, damit die Breite des Zeigers und damit
   seine Spitze an Ort und Stelle bleiben. */
.af-zeiger .af-datei{transition:opacity .2s ease;}
.af-zeiger.leer .af-datei{opacity:0;}
.af-datei{
  display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
  border-radius:10px;padding:7px 12px;margin:9px 0 0 -3px;
  box-shadow:0 4px 16px rgba(0,0,0,.13);white-space:nowrap;
}
.af-datei .sym{width:28px;height:28px;border-radius:6px;background:linear-gradient(135deg,#ff6b6b,#ee5a24);display:flex;align-items:center;justify-content:center;color:#fff;font-size:8px;font-weight:700;font-family:var(--fm);flex:none;}
.af-datei .nam{font-size:11.5px;font-weight:600;color:var(--ink);display:block;}
.af-datei .meta{font-size:9.5px;color:var(--sub);display:block;}
.af-fenster.dragover{border-color:rgba(0,122,255,.32);box-shadow:0 4px 24px rgba(0,122,255,.1),0 0 0 3px rgba(0,122,255,.06);}
/* Mehrere Anhänge einer Frage stehen nebeneinander, nicht untereinander.
   Sie teilen sich die Breite, der Dateiname wird notfalls gekürzt. */
.af-anhaenge{display:flex;flex-wrap:nowrap;align-items:stretch;gap:8px;}
.af-anhang{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:9px;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:8px 12px;animation:afRein .3s ease forwards;}
.af-anhang-text{min-width:0;overflow:hidden;}
.af-anhang .nam,.af-anhang .meta{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Ab zwei Dateien wird es etwas enger, damit beide in eine Zeile passen. */
.af-anhaenge.mehr .af-anhang{padding:6px 10px;gap:8px;}
.af-anhaenge.mehr .sym{width:26px;height:26px;}
/* Bei zwei Dateien zählt der Name, die Größenangabe kann weg. */
.af-anhaenge.mehr .meta{display:none;}
/* Wird es eng, kürzt der Name vorne statt hinten: die Ziffer am Ende
   unterscheidet die beiden Angebote, sie muss stehen bleiben. */
.af-anhaenge.mehr .nam{direction:rtl;text-align:left;}
.af-anhang .sym{width:30px;height:30px;border-radius:7px;background:linear-gradient(135deg,#ff6b6b,#ee5a24);display:flex;align-items:center;justify-content:center;color:#fff;font-size:8.5px;font-weight:700;font-family:var(--fm);flex:none;}

/* Steht ein Tabellenblatt im Verlauf, rücken die Nachrichten enger
   zusammen, damit die Anhänge oben im Bild bleiben. */
.af-verlauf:has(.af-blatt){gap:10px;padding-top:12px;padding-bottom:12px;}

/* --- Tabellenblatt in der Antwort ---------------------------------------
   Wenn die Antwort ein Ergebnis in Zahlen ist, steht es als Blatt darunter,
   im gleichen Zuschnitt wie die Tabellen auf der Fertigungsseite. */
.af-blatt{
  margin-top:8px;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  background:#fff;
}
.af-blatt-kopf{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:6px 11px;background:var(--bg2);border-bottom:1px solid var(--line);
  font-family:var(--fm);font-size:10.5px;color:var(--ink);
}
.af-blatt-kopf .af-blatt-ort{
  display:flex;align-items:center;gap:5px;color:var(--sub);
  text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;
}
.af-blatt-kopf .af-blatt-ort i{
  width:6px;height:6px;border-radius:50%;background:var(--belegt);display:block;
}
.af-blatt-formel{
  display:flex;align-items:center;gap:9px;padding:6px 11px;
  border-bottom:1px solid var(--line);font-family:var(--fm);font-size:10.5px;color:var(--txt);
}
.af-blatt-formel .zelle{
  flex:none;min-width:32px;padding:2px 6px;border:1px solid var(--line);border-radius:4px;
  background:var(--bg2);text-align:center;color:var(--sub);
}
.af-blatt-formel .fx{flex:none;color:var(--sub);font-style:italic;opacity:.7;}
.af-blatt-rolle{overflow-x:auto;}
table.af-xl{
  border-collapse:collapse;width:100%;font-family:var(--fm);font-size:10.5px;  color:var(--txt);
}
table.af-xl th,table.af-xl td{
  border:1px solid rgba(0,0,0,.09);padding:2px 7px;text-align:left;white-space:nowrap;font-weight:400;
}
table.af-xl thead th{background:var(--bg2);color:var(--sub);font-weight:600;font-size:9.5px;}
table.af-xl .xl-kopf{background:var(--bg2);color:var(--sub);text-align:center;width:22px;font-size:9.5px;}
table.af-xl .xl-z{text-align:right;font-variant-numeric:tabular-nums;}
table.af-xl .xl-ein{background:rgba(0,113,227,.05);}
table.af-xl tr.xl-summe td{font-weight:600;background:var(--bg2);}
table.af-xl tr.xl-aktiv td,table.af-xl tr.xl-aktiv th{background:rgba(0,113,227,.07);}
table.af-xl tr.xl-aktiv td:last-child{outline:2px solid var(--akzent2);outline-offset:-2px;}
/* Am Handy ist die Fläche schmal: kleinere Schrift, engere Zellen, der
   Positionsname bricht um statt die Tabelle breiter zu machen. */
[data-app-fenster][data-geraet="handy"] table.af-xl{font-size:8.5px;}
[data-app-fenster][data-geraet="handy"] table.af-xl th,
[data-app-fenster][data-geraet="handy"] table.af-xl td{padding:2px 3px;white-space:normal;}
[data-app-fenster][data-geraet="handy"] table.af-xl thead th{font-size:8.5px;}
[data-app-fenster][data-geraet="handy"] table.af-xl .xl-z{white-space:nowrap;}
/* Die Differenzspalte fällt am Handy weg, beide Summen stehen ja da. */
[data-app-fenster][data-geraet="handy"] .af-blatt-kopf,
[data-app-fenster][data-geraet="handy"] .af-blatt-formel{font-size:9px;padding:5px 8px;}
.af-xl-gut{background:var(--belegt-bg);color:var(--belegt);font-weight:600;padding:1px 6px;border-radius:4px;}
.af-xl-warn{background:var(--fund-bg);color:var(--fund);padding:1px 6px;border-radius:4px;}
table.af-xl .xl-frei{text-align:right;}
/* Die unteren Zeilen tragen Text statt Beträgen, der darf umbrechen. */
table.af-xl .xl-info{text-align:right;white-space:normal;}
[data-app-fenster][data-geraet="handy"] .af-xl-nein{white-space:normal;display:inline-block;}
/* Am Handy ist für die Zeilennummern kein Platz, sie erklären nichts. */
[data-app-fenster][data-geraet="handy"] table.af-xl .xl-kopf{display:none;}
table.af-xl .xl-frei{color:var(--sub);}
/* Die Zeile darunter setzt optisch ab, wie die Leerzeile im Blatt. */
table.af-xl tr.xl-luft td{border-top:2px solid rgba(0,0,0,.09);}
table.af-xl tr.xl-summe td{font-weight:600;}
.af-xl-nein{background:var(--nein-bg);color:var(--nein);font-weight:600;padding:1px 6px;border-radius:4px;}

/* --- Schmale Bildschirme ------------------------------------------------- */
@media(max-width:820px){
  .af-geraet[data-geraet="rechner"] .af-seite{width:172px;}
  .af-geraet[data-geraet="rechner"] .af-seite .af-gruppe{display:none;}
}
@media(max-width:640px){
  .af-geraet[data-geraet="rechner"] .af-seite,
  .af-geraet[data-geraet="tablet"] .af-seite{display:none;}
  .af-verlauf{min-height:240px;padding:14px;}
  .af-text{font-size:13.5px;}
  .af-schalter button{padding:7px 12px;font-size:12.5px;}
  .af-geraet[data-geraet="tablet"] .af-huelle,
  .af-geraet[data-geraet="terminal"] .af-huelle{padding:10px;}
  .af-geraet[data-geraet="terminal"] .af-verlauf{padding:14px;}
  .af-geraet[data-geraet="terminal"] .af-text{font-size:14px;}
}

/* --- Fenster im Abschnitt „Wo gefragt wird“ ------------------------------ */
.wo-fenster{margin:0 0 clamp(38px,5vw,60px);text-align:center;}
.wo-fenster [data-app-fenster]{display:inline-block;text-align:left;max-width:100%;width:100%;}
.wo-fenster-fuss{margin-top:18px;max-width:52ch;margin-left:auto;margin-right:auto;}

/* --- Ruhige Darstellung -------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .af-msg,.af-anhang{animation:none;opacity:1;}
  .af-punkte i{animation:none;}
  .af-geraet,.af-huelle{transition:none;}
}

/* --- Ohne Gehäuse: im Aufmacher steht die Bildschirmfläche für sich ------
   Der dunkle Rahmen ist dort zu viel — er lenkt vom Inhalt ab. Auf der
   Systemseite, wo die Geräte verglichen werden, bleibt er. */
[data-app-fenster].nackt .af-huelle{padding:0;background:transparent;box-shadow:none;border-radius:0;}
[data-app-fenster].nackt .af-insel{display:none;}
[data-app-fenster].nackt .af-basis{display:none;}
[data-app-fenster].nackt .af-leiste{padding-top:11px;}
[data-app-fenster].nackt .af-fenster{
  border:1px solid var(--line);border-radius:14px;
  box-shadow:0 20px 54px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.04);
}

/* --- Statusleiste: nur am Handy ------------------------------------------
   Uhrzeit links, WLAN und Akku rechts — wie iOS es anordnet. Ohne sie wirkt
   das Bild wie eine Webseite in einem Rahmen, nicht wie ein Telefon. */
.af-status{display:none;}
.af-geraet[data-geraet="handy"] .af-status{
  display:flex;align-items:center;justify-content:space-between;
  position:absolute;top:0;left:0;right:0;height:30px;z-index:4;
  padding:0 26px 0 30px;pointer-events:none;
  font-family:var(--f);font-size:12.5px;font-weight:600;color:var(--ink);
  letter-spacing:-.01em;
}
.af-uhr{font-variant-numeric:tabular-nums;}
.af-status-rechts{display:flex;align-items:center;gap:5px;}
.af-status-rechts .af-wlan{width:16px;height:11px;}
.af-status-rechts .af-akku{width:24px;height:11px;}

/* --- Bildschirmtastatur, nur am Handy ------------------------------------
   Nachbau der hellen Tastatur von iOS. Das Raster ist das Wesentliche: die
   obersten beiden Reihen haben elf Spalten, in der dritten belegen Umschalt
   und Löschen je zwei davon, damit die sieben Buchstaben darunter genau im
   Raster der Reihen darüber stehen. */
.af-tastatur{display:none;}
[data-app-fenster][data-geraet="handy"] .af-tastatur{
  display:block;height:0;overflow:hidden;flex:none;
  width:100%;padding:0;margin:0;
  /* Derselbe Ton wie die Tastenfläche: der Streifen um den Startbalken
     gehört bei iOS zur Tastatur und darf nicht weiß durchscheinen.
     Oben sitzt sie als Panel mit gerundeten Ecken auf dem Inhalt. */
  background:#d1d3d9;border-radius:11px 11px 0 0;
  transition:height .36s cubic-bezier(.32,.72,0,1);
}
[data-app-fenster][data-geraet="handy"] .af-tastatur.offen{height:198px;}
.af-tt-innen{
  width:100%;background:#d1d3d9;padding:7px 3px 3px;border-radius:11px 11px 0 0;display:flex;flex-direction:column;gap:7px;
  transform:translateY(100%);transition:transform .36s cubic-bezier(.32,.72,0,1);
}
.af-tastatur.offen .af-tt-innen{transform:translateY(0);}
.af-tt-reihe{display:flex;gap:4px;}
.af-taste{
  flex:1 1 0;min-width:0;height:31px;border-radius:5px;background:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f);font-size:15.5px;font-weight:400;color:#000;
  box-shadow:0 1px 0 rgba(0,0,0,.3);user-select:none;
  transition:background .07s ease;
}
/* Umschalt und Löschen füllen je zwei Spalten des Rasters. */
.af-taste.mod{flex:2 1 0;font-size:14px;}
.af-taste.schmal{flex:1.6 1 0;font-size:12.5px;}
.af-taste.leer{flex:5.4 1 0;font-size:10px;color:#8a8f98;}
.af-taste.senden{flex:2 1 0;background:#c8ccd3;color:#8a8f98;box-shadow:0 1px 0 rgba(0,0,0,.2);}
/* Anschlag wie auf Glas: Buchstaben werden grau, Sondertasten hell. */
.af-taste.an{background:#c3c7cf;}
.af-taste.sonder.an,.af-taste.senden.an{background:#fff;color:#000;}
/* Fußleiste der Tastatur: Sprachumschalter und Diktat. */
.af-tt-fuss{display:flex;align-items:center;justify-content:space-between;padding:4px 11px 1px;}
.af-tt-fuss svg{width:16px;height:16px;display:block;}