/* ==============================================================
   redaktion.css  ·  Besitzer: P14 (Redaktionsbereich intern.php, unveraendert)
   Altbestand aus style.css (v3, CSS_VER 56) verhaltensneutral
   herausgeloest am 24.09.2026 (Paket P0). Reihenfolge der Regeln
   wie im Original. Wer die Datei besitzt, baut diese Regeln zurueck.
   ============================================================== */

/* aus einer Sammelregel (style.css Z. 53) herausgeloest */
.red-kopf p{font-weight:380}

/* ==============================================================
   Redaktionsbereich
   Eigene Oberflaeche auf denselben Tokens. Immer die helle Buehne,
   damit der Umschalter der Webseite hier nichts verstellt.
   ============================================================== */
/* Der Redaktionsbereich hat keinen Umschalter, also gilt hier ohnehin
   der Grundsatz aus :root (helle Buehne). Frueher stand hier eine
   vollstaendige Umdeklaration aus --pap-* — mit dem einen
   Rollen-Vokabular ist sie ersatzlos weggefallen. */
body.redaktion, body.anmeldung{background:var(--bg);color:var(--text)}

/* ---- Anmeldung ---- */
/* Vollbild-Schirm: nacktes 100vh rechnet auf dem Handy gegen die
   Hoehe OHNE Adressleiste. Die Anmeldekarte saesse dadurch unter der
   Mitte und der Schirm liesse sich ohne Grund scrollen. 100svh nimmt
   die kleine, immer sichtbare Hoehe; die 100vh-Zeile davor bleibt als
   Rueckfallebene fuer aeltere Browser stehen. */
body.anmeldung{display:grid;place-items:center;min-height:100vh;min-height:100svh;padding:1.5rem}

/* Beim Pruefen am 19.09.2026 gemessen: 377 px Inhalt in einem 375-px-
   Fenster, also 2 px horizontaler Ueberlauf (bestand schon vorher).
   Ursache: 94vw rechnet gegen das ganze Fenster, der Schirm hat aber
   zusaetzlich 1,5rem Innenabstand links und rechts — 24 + 353 = 377.
   100% rechnet gegen den bereits eingerueckten Kasten und kann darum
   nie zu breit werden. */
.anmeldebox{width:min(26rem,100%);text-align:center}

.anmeldebox img{width:190px;height:auto;margin:0 auto .9rem}

.anmeldebox .rule{margin:0 auto 1.2rem}

.anmeldebox h1{font-family:var(--schrift-titel);font-weight:700;font-size:1.8rem;letter-spacing:-.02em;margin:0 0 .3rem}

.anmeldebox .sub{color:var(--muted);margin:0 0 1.6rem}

.anmeldeform{margin-top:0;text-align:left;background:var(--bg-2);border:1px solid var(--line-2);border-radius:5px;padding:1.4rem}

.anmeldebox .micro{margin-top:1.2rem}

/* ---- Kopf + Reiter ---- */
.red-kopf{background:var(--bg);border-bottom:2px solid var(--magenta)}

.red-kopf-innen{display:flex;align-items:center;gap:1rem;padding-block:.8rem;flex-wrap:wrap}

.red-marke img{width:150px;height:auto;display:block}

.red-titel{font-family:var(--schrift-mono);font-size:.74rem;color:var(--cyan-fill);margin-right:auto}

.red-kopf a{color:var(--text);text-decoration:none;font-family:var(--schrift-titel);font-weight:600;font-size:.9rem}

.red-ansehen{padding:.45rem .9rem;border:1px solid #FFFFFF3D;border-radius:4px}

.red-ansehen:hover{background:color-mix(in oklab,var(--cyan-fill) 18%,transparent);border-color:var(--cyan-fill)}

.red-abmelden{color:var(--muted)}

.red-abmelden:hover{color:var(--cyan-fill)}

.red-kopf :focus-visible{outline-color:var(--cyan-fill)}

.red-reiter{display:flex;gap:.3rem;flex-wrap:wrap;padding-block:1rem 0;border-bottom:1px solid var(--line)}

.red-reiter a{
  font-family:var(--schrift-titel);font-weight:600;font-size:.98rem;text-decoration:none;color:var(--muted);
  padding:.6rem 1rem;border-radius:5px 5px 0 0;border:1px solid transparent;border-bottom:0;
  position:relative;top:1px;
}

.red-reiter a:hover{color:var(--accent-text)}

.red-reiter a.ist-aktiv{background:var(--bg-2);border-color:var(--line-2);color:var(--text)}

/* ---- Seitenauswahl im Text-Editor ----
   Ueber 200 Felder auf einer Seite waere eine Wand. Erst die Seite
   waehlen, dann ihre Felder. Zurueckhaltung laeuft ueber --muted
   (7,24:1 gerechnet), NIE ueber opacity: eine halbtransparente
   Schrift hat hier schon einmal 6,39:1 auf 3,23:1 gedrueckt. */
.red-seitenwahl{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1.8rem}

.red-seitenwahl a{
  font-family:var(--schrift-titel);font-weight:600;font-size:.92rem;text-decoration:none;
  color:var(--muted);background:var(--bg-2);border:1px solid var(--line);
  padding:.5rem .85rem;border-radius:999px;
  display:inline-flex;align-items:center;gap:.4rem;min-height:44px;
}

.red-seitenwahl a:hover{color:var(--text);border-color:var(--line-2)}

.red-seitenwahl a.ist-aktiv{
  background:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent);
}

/* Der Zaehler sitzt auf der Akzentflaeche, die weisse Schrift traegt (7,12:1).
   In der aktiven Pille ist es umgekehrt: heller Punkt auf der Flaeche. */
.rsw-zahl{
  font-family:var(--schrift-mono);font-size:.68rem;line-height:1;
  background:var(--accent-fill);color:var(--on-accent);
  padding:.25rem .4rem;border-radius:999px;font-variant-numeric:tabular-nums;
}

.red-seitenwahl a.ist-aktiv .rsw-zahl{background:var(--on-accent);color:var(--accent-fill)}

.red-inhalt{padding-block:2rem 3.5rem}

.red-inhalt h1{font-family:var(--schrift-titel);font-weight:700;font-size:clamp(1.6rem,3.6vw,2.2rem);letter-spacing:-.022em;margin:0 0 .4rem}

.red-lead{color:var(--muted);max-width:66ch;margin:0 0 2rem}

.red-block{background:var(--bg-2);border:1px solid var(--line-2);border-radius:5px;padding:1.5rem;margin:0 0 1.2rem}

.red-block h2{font-family:var(--schrift-titel);font-weight:700;font-size:1.15rem;letter-spacing:-.012em;margin:0 0 1.1rem}

.red-leer{color:var(--muted);margin:0;font-style:italic}

.red-zweispalt{display:grid;gap:1.2rem;grid-template-columns:1fr}

@media (min-width:60rem){
  .red-zweispalt{grid-template-columns:1fr 1fr}
}

/* ---- Kennzahlen ---- */
.red-kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.9rem;margin-bottom:1.6rem}

.red-kachel{background:var(--bg-2);border:1px solid var(--line-2);border-radius:5px;padding:1.1rem 1.2rem;display:grid;gap:.15rem}

.rk-label{font-family:var(--schrift-mono);font-size:.7rem;color:var(--accent-text)}

.rk-zahl{font-family:var(--schrift-titel);font-weight:700;font-size:clamp(1.9rem,4.5vw,2.6rem);line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums}

.rk-fuss{font-size:.84rem;color:var(--muted)}

/* ---- Diagramm ---- */
.red-diagramm svg{width:100%;height:auto;display:block;overflow:visible}

.rd-saeule{fill:var(--accent-text);transition:fill .2s}

.rd-saeule:hover{fill:var(--accent2-text)}

.rd-achse{display:flex;justify-content:space-between;font-family:var(--schrift-mono);font-size:.7rem;color:var(--muted);margin:.5rem 0 0}

/* ---- Tabellen ---- */
.red-tabelle{width:100%;border-collapse:collapse;font-size:.94rem}

.red-tabelle th,.red-tabelle td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid var(--line)}

.red-tabelle thead th{font-family:var(--schrift-mono);font-size:.7rem;font-weight:400;color:var(--accent-text);border-bottom-color:var(--line-2)}

.red-tabelle tbody th{font-weight:600}

.red-tabelle td{white-space:nowrap;font-variant-numeric:tabular-nums}

.rt-balken{display:inline-block;width:3.5rem;height:.5rem;background:var(--line);border-radius:999px;margin-right:.5rem;overflow:hidden;vertical-align:middle}

.rt-balken i{display:block;height:100%;width:var(--anteil);background:var(--accent-text)}

/* ---- Felder ---- */
.red-form{margin:0}

.red-feld{margin:0 0 1.3rem}

.red-feld:last-child{margin-bottom:0}

.red-feld label{display:block;font-family:var(--schrift-titel);font-weight:600;font-size:.97rem;margin-bottom:.25rem}

.red-hinweis{margin:0 0 .45rem;font-size:.86rem;color:var(--muted);max-width:66ch}

/* P0 25.09.: --border-feld statt --line-2 (v4: --line-2 ist nur Deko, 1,62:1; Feldrand braucht >= 3:1, WCAG 1.4.11) */
.red-feld input[type=text],.red-feld textarea{
  width:100%;font-family:var(--schrift-lauf);font-size:1rem;color:var(--text);
  background:var(--bg);border:2px solid var(--border-feld);border-radius:4px;padding:.65rem .8rem;
}

.red-feld input[type=file]{font-family:var(--schrift-lauf);font-size:.95rem}

.red-feld input:focus-visible,.red-feld textarea:focus-visible{outline:3px solid var(--accent-text);outline-offset:2px;border-color:var(--accent-text)}

.red-feld.ist-geaendert input,.red-feld.ist-geaendert textarea{border-color:var(--accent2-text)}

.red-marker{font-family:var(--schrift-mono);font-size:.66rem;font-weight:400;color:#fff;background:var(--accent2-text);padding:.12rem .45rem;border-radius:999px;margin-left:.4rem;vertical-align:middle}

.red-zeichen{margin:.3rem 0 0;font-family:var(--schrift-mono);font-size:.7rem;color:var(--muted)}

.red-zeichen.ist-knapp{color:var(--accent2-text)}

.red-leiste{position:sticky;bottom:0;background:var(--bg);border-top:1px solid var(--line-2);
  padding:.9rem 0;display:flex;gap:.7rem;flex-wrap:wrap;z-index:5}

/* ---- Bilder ---- */
.red-bildzeile{display:grid;gap:1.4rem;grid-template-columns:1fr}

@media (min-width:52rem){
  .red-bildzeile{grid-template-columns:.8fr 1.2fr}
}

.red-vorschau{margin:0}

.red-vorschau img{width:100%;border:1px solid var(--line-2);border-radius:4px;display:block}

.red-vorschau figcaption{font-family:var(--schrift-mono);font-size:.7rem;color:var(--muted);margin-top:.5rem}

/* ---- Verlauf ---- */
.red-verlauf{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}

.red-eintrag{background:var(--bg-2);border:1px solid var(--line-2);border-left:4px solid var(--accent-text);border-radius:4px;padding:1.1rem 1.2rem}

.re-kopf{display:flex;gap:.8rem;flex-wrap:wrap;align-items:baseline;margin-bottom:.7rem}

.re-zeit{font-family:var(--schrift-titel);font-weight:700;font-size:.95rem}

.re-wer{font-family:var(--schrift-mono);font-size:.7rem;color:var(--accent-text)}

.re-felder{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;font-size:.92rem}

.re-felder li{display:grid;gap:.15rem}

.re-felder strong{font-family:var(--schrift-titel);font-size:.88rem}

.re-vorher{color:var(--muted);text-decoration:line-through}

.re-pfeil{color:var(--accent-text);font-weight:700}

.re-form{margin:.9rem 0 0}

.red-fuss{border-top:1px solid var(--line);background:var(--bg-2);padding-block:1.4rem;font-size:.88rem;color:var(--muted)}

.red-fuss p{margin:0}

.red-fuss-notiz{color:var(--muted);font-size:.9rem;margin:1.4rem 0 0}

/* ---- Technik-Pruefliste im Redaktionsbereich ---- */
.red-pruefliste{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}

.red-pruefliste li{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start;font-size:.95rem}

.rp-punkt{
  display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;
  font-weight:700;font-size:.85rem;flex:0 0 auto;
}

.red-pruefliste .ist-ok .rp-punkt{background:color-mix(in oklab,var(--accent-text) 16%,var(--bg));color:var(--accent-text)}

.red-pruefliste .ist-offen .rp-punkt{background:color-mix(in oklab,var(--accent2-text) 16%,var(--bg));color:var(--accent2-text)}

.rp-warum{display:block;color:var(--muted);font-size:.86rem;margin-top:.1rem}

/* Kein opacity auf Text: das druckte --muted von 6,39:1 auf 3,23:1 herunter. */
/* Dezenter Verweis auf den Redaktionsbereich im Fuss.
   Nicht versteckt (der Kunde soll ihn finden), aber auch nicht betont.
   Geschuetzt ist er ohnehin durch Zugang, Sperre nach Fehlversuchen
   und noindex — Verstecken waere keine Sicherheit, nur Unbequemlichkeit. */
/* KEIN opacity auf Text — das hat den Kontrast schon zweimal gebrochen
   (hier von 6,63:1 auf 3,64:1). Zurueckhaltung kommt hier ueber die
   Position im Fuss und die Wortwahl, nicht ueber Transparenz. */
.fuss-redaktion{ font-weight:400 }

@media (max-width: 47.99rem){
  /* aus einer Sammelregel (style.css Z. 1022) herausgeloest */
  .red-lead{ font-size:.86rem }
}

@media (max-width: 47.99rem){
  /* aus einer Sammelregel (style.css Z. 1035) herausgeloest */
  .rd-achse,
  .red-zeichen,
  .rk-label,
  .red-tabelle thead th,
  .re-wer,
  .red-titel{ font-size:.82rem }
}

@media (max-width: 47.99rem){
  /* aus einer Sammelregel (style.css Z. 1049) herausgeloest */
  .red-hinweis{ font-size:.92rem }
}

@media (max-width: 47.99rem){
  /* Tabellen im Redaktionsbereich duerfen scrollen statt zu quetschen */
  .red-tabelle{ font-size:.9rem }
  .red-block{ padding:1.1rem }
  .red-kacheln{ gap:.7rem }
}

@media (pointer: coarse){
  .red-reiter a{ min-height:44px; display:inline-flex; align-items:center }
}

@media (pointer: coarse){
  /* aus einer Sammelregel (style.css Z. 1100) herausgeloest */
  .red-feld input,
  .red-feld textarea{ min-height:48px }
}

/* ==============================================================
   Redaktionsbereich, Auffrischung 23.09.2026
   Gleiche Marke, ruhigere Werkbank: helle Karten auf dem Grund
   statt grauer Kaesten mit Rahmen, ein Seitenregister links wie die
   Ablage an einem Schnittplatz, und die Speicherleiste als schwebende
   Leiste mit Status. Die Magenta-Linie aus dem Logo markiert, was
   noch nicht gespeichert ist.
   ============================================================== */
body.redaktion{
  --karte: #FFFFFF;          /* text 18,1:1 · muted 7,6:1 · accent-text 7,4:1 */
  --karte-rand: color-mix(in oklab, var(--accent-text) 14%, #FFFFFF);
  --karte-schatten: 0 1px 2px color-mix(in oklab, var(--schatten) 6%, transparent),
                    0 12px 32px -20px color-mix(in oklab, var(--schatten) 28%, transparent);
  --radius: 12px;
  /* Ampel: je Stufe eigene Schriftfarbe, alle >= 4,5:1 auf --karte UND --bg.
     Die Farbe steht nie allein — Symbol und Wort tragen dieselbe Aussage. */
  --seo-gut:      #1B6A39;
  --seo-knapp:    #8A4B00;
  --seo-schlecht: #A3172B;
  background:var(--bg);
}

/* ---- Kopf ---- */
.red-kopf{border-bottom:3px solid var(--magenta)}

.red-kopf-innen{padding-block:.9rem}

.red-titel{display:inline-flex;align-items:center;gap:.55rem;font-size:.78rem;letter-spacing:.04em}

/* ---- Bereichs-Reiter als Segment ---- */
.red-reiter{
  gap:.25rem;padding:.3rem;margin-top:1.4rem;border:0;width:max-content;
  max-width:calc(100% - 2 * var(--gut));
  /* .wrap zentriert per margin:auto — die Pille soll aber buendig mit
     dem Inhalt darunter links stehen, nicht mittig. */
  margin-left:max(var(--gut), calc((100% - var(--wrap)) / 2 + var(--gut)));
  background:var(--bg-2);border-radius:999px;
}

.red-reiter a{
  top:0;border:0;border-radius:999px;padding:.55rem 1.15rem;min-height:44px;
  display:inline-flex;align-items:center;
}

.red-reiter a.ist-aktiv{background:var(--karte);color:var(--text);box-shadow:var(--karte-schatten)}

/* ---- Inhalt + Karten ---- */
.red-inhalt{padding-block:1.6rem 4rem}

.red-inhalt h1{font-size:clamp(1.7rem,3.2vw,2.4rem);margin-bottom:.35rem}

.red-block,.red-kachel,.red-eintrag{
  background:var(--karte);border:1px solid var(--karte-rand);border-radius:var(--radius);
  box-shadow:var(--karte-schatten);
}

.red-block{padding:clamp(1.2rem,2.4vw,1.8rem)}

.red-block h2{display:flex;align-items:center;gap:.6rem;font-size:1.1rem;margin-bottom:1.2rem}

.red-block h2::before{
  content:"";width:.55rem;height:.55rem;border-radius:50%;flex:0 0 auto;
  background:var(--cyan-fill);box-shadow:0 0 0 3px color-mix(in oklab,var(--cyan-fill) 22%,transparent);
}

.red-kachel{border-top:3px solid var(--cyan-fill)}

.red-eintrag{border-left:4px solid var(--accent-text)}

/* ---- Text-Editor: Register links, Felder rechts ---- */
.red-editor{display:grid;gap:1.4rem;grid-template-columns:minmax(0,1fr)}

.red-editor > *{min-width:0}

.red-seitenwahl-kopf{display:none}

@media (min-width:64rem){
  .red-editor{grid-template-columns:13.5rem minmax(0,1fr);align-items:start;gap:2rem}
  .red-seitenwahl{
      position:sticky;top:1rem;flex-direction:column;flex-wrap:nowrap;gap:.2rem;margin:0;
      padding:.6rem;background:var(--karte);border:1px solid var(--karte-rand);
      border-radius:var(--radius);box-shadow:var(--karte-schatten);
    }
  .red-seitenwahl-kopf{
      display:block;margin:.2rem .6rem .5rem;font-family:var(--schrift-mono);
      font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
    }
  .red-seitenwahl a{
      justify-content:space-between;background:transparent;border-color:transparent;
      border-radius:8px;padding:.55rem .75rem;color:var(--text);font-weight:500;
    }
  .red-seitenwahl a:hover{background:var(--bg);border-color:transparent}
  .red-seitenwahl a.ist-aktiv{font-weight:650}
}

/* ---- Felder ---- */
.red-feld{position:relative;margin-bottom:1.6rem;transition:padding .2s var(--ease)}

.red-feld label{font-size:1rem;margin-bottom:.3rem;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}

.red-feld input[type=text],.red-feld textarea{
  background:var(--karte);border:1.5px solid var(--line-2);border-radius:8px;padding:.7rem .85rem;
  line-height:1.5;transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}

.red-feld input[type=text]:hover,.red-feld textarea:hover{border-color:var(--accent-text)}

.red-feld input:focus-visible,.red-feld textarea:focus-visible{
  outline:none;border-color:var(--accent-text);
  box-shadow:0 0 0 4px color-mix(in oklab,var(--cyan-fill) 30%,transparent);
}

.red-feld textarea{resize:vertical;min-height:5.5rem}

.red-marker{font-size:.68rem;padding:.15rem .5rem}

.red-zeichen{font-size:.74rem}

/* Noch nicht gespeichert: die Magenta-Linie am linken Rand */
.red-feld.ist-offen{padding-left:1rem}

.red-feld.ist-offen::before{
  content:"";position:absolute;left:0;top:.2rem;bottom:.2rem;width:3px;border-radius:3px;background:var(--magenta);
}

/* ---- Speicherleiste: schwebend, mit Status ---- */
.red-leiste{
  bottom:1rem;margin-top:1.6rem;padding:.7rem .8rem .7rem 1.2rem;align-items:center;
  background:color-mix(in oklab,var(--karte) 94%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid var(--karte-rand);border-radius:999px;
  box-shadow:0 18px 40px -18px color-mix(in oklab,var(--schatten) 45%,transparent);
}

.red-status{margin:0 auto 0 0;font-size:.92rem;color:var(--muted)}

.red-status.ist-offen{color:var(--accent2-text);font-weight:600}

@media (max-width:40rem){
  .red-leiste{border-radius:var(--radius);padding:.8rem}
  .red-status{flex-basis:100%}
}

/* ---- Bilder + Verlauf ---- */
.red-vorschau img{border-radius:8px}

.red-verlauf{gap:1rem}

/* ==============================================================
   SEO-Ampel, Google-Vorschau, Vorschlaege
   ============================================================== */
.seo-ampel{margin:.45rem 0 0;font-size:.92rem;line-height:1.6;max-width:70ch}

/* Fliesstext statt Flex: sonst wird der Satz hinter dem Wort ein eigener
   Block und bricht als Ganzes in die naechste Zeile. */
.seo-symbol{
  display:inline-grid;place-items:center;width:1.35rem;height:1.35rem;border-radius:50%;
  font-weight:700;font-size:.8rem;color:#fff;vertical-align:-.3rem;margin-right:.4rem;
}

.seo-gut{color:var(--seo-gut)}

.seo-gut .seo-symbol{background:var(--seo-gut)}

.seo-knapp{color:var(--seo-knapp)}

.seo-knapp .seo-symbol{background:var(--seo-knapp)}

.seo-schlecht{color:var(--seo-schlecht)}

.seo-schlecht .seo-symbol{background:var(--seo-schlecht)}

.seo-tipp,.seo-abgleich{
  margin:.6rem 0 0;padding:.7rem .9rem;border-radius:8px;font-size:.92rem;max-width:70ch;
  background:color-mix(in oklab,var(--cyan-fill) 10%,var(--karte));
  border-left:3px solid var(--accent-text);color:var(--text);
}

.seo-abgleich{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;border-left-color:var(--magenta);
  background:color-mix(in oklab,var(--magenta) 7%,var(--karte));
}

.seo-abgleich[hidden],.seo-tipp[hidden],.seo-vorschlag[hidden]{display:none}

.seo-abgleich p{margin:0;flex:1 1 16rem}

.seo-vorschlag-leiste{margin-top:.7rem;display:flex;flex-wrap:wrap;gap:.7rem;align-items:flex-start}

.seo-vorschlag{
  flex:1 1 20rem;padding:.9rem 1rem;border-radius:10px;
  border:1.5px dashed var(--line-2);background:var(--bg);
}

.seo-vorschlag-kopf{margin:0 0 .25rem;font-family:var(--schrift-mono);font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}

.seo-vorschlag-text{margin:0;font-weight:600;overflow-wrap:anywhere}

.seo-vorschlag-info{margin:.25rem 0 .7rem;font-size:.86rem;color:var(--muted)}

.seo-vorschlag-knoepfe{display:flex;gap:.5rem;flex-wrap:wrap}

.seo-ja{background:var(--accent-fill);color:var(--on-accent);border-color:var(--accent-fill)}

.seo-ja:hover{background:var(--accent-fill)}

/* Google-Vorschau: bewusst in Googles eigener Anmutung (Arial, Blau),
   damit Peter sofort erkennt, was er sieht. Farben >= 4,5:1 auf Weiss. */
.seo-vorschau{margin:1.4rem 0 0;padding:1.1rem;border-radius:var(--radius);background:var(--bg)}

.seo-vorschau-titel{font-family:var(--schrift-mono);font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:.7rem}

.seo-karte{
  background:#fff;border-radius:10px;padding:1rem 1.1rem;max-width:40rem;
  font-family:Arial,"Helvetica Neue",sans-serif;box-shadow:var(--karte-schatten);
}

.seo-karte-seite{display:flex;align-items:center;gap:.6rem;margin-bottom:.35rem}

.seo-karte-logo{
  display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:#15191C;color:#00ABE6;font-weight:700;font-size:.85rem;flex:0 0 auto;
}

.seo-karte-info{display:grid;line-height:1.3;min-width:0}

.seo-karte-name{font-size:14px;color:#202124}

.seo-karte-url{font-size:12px;color:#4D5156;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.seo-karte-titel{margin:0 0 .2rem;font-size:20px;line-height:1.3;color:#1A0DAB;overflow-wrap:anywhere}

.seo-karte-text{margin:0;font-size:14px;line-height:1.58;color:#4D5156;overflow-wrap:anywhere}

@media (prefers-reduced-motion: reduce){
  .red-feld,.red-feld input,.red-feld textarea{transition:none}
}