/* Zento, das Gestaltungssystem des Programms (Neudesign 29.09.2026, Plan-Punkt 18).
   Vorgaben des Betreibers: „minimalistisch-futuristisch, Apple-like, mit Nuancen der Logo-Farben, viel runde Kanten
   und 3D-Fenster- und Button-Optik“; hell zuerst; Überschriften Outfit, Fließtext Inter (beide lokal, keine Anfrage
   an Google). Diese Datei lädt in allen Seiten als letzte und setzt Werte und Grundbausteine neu; die Stylesheets der
   einzelnen Bereiche bleiben, ihre Farben kommen über die Variablen hier.
   Farbwelt seit 04.10.2026 wie die Website video-vibe.ai (sein Wunsch, Zento steht dort als „dein Kundenportal“):
   Gold, Schwarzbraun und Creme statt Blau und Violett, Schriften DM Sans und Cormorant Garamond (nur große
   Überschriften). Arbeitsflächen bleiben hell, dunkel sind nur die Kopfzeilen. Das Zento-Logo bleibt vorerst. */

@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300 700; font-display: swap; src: url("/static/fonts/cormorant-garamond-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300 700; font-display: swap; src: url("/static/fonts/cormorant-garamond-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/static/fonts/cormorant-garamond-normal-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/static/fonts/cormorant-garamond-normal-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap; src: url("/static/fonts/dm-sans-normal-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap; src: url("/static/fonts/dm-sans-normal-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Farben der Website video-vibe.ai, dunkle Fassung (04.10.2026, sein Wunsch „Hintergrund dunkel“): Grund
     Schwarzbraun wie die Website, Karten etwas heller, Schrift warmes Weiß, Gold für Akzente. Die alten Namen bleiben,
     weil die Bereichs-Stylesheets sie nutzen. */
  --z-cyan: #e8d5b0;
  --z-blau: #c9a45c;
  --z-blau-tief: #e0c07e;
  --z-violett: #e8d5b0;
  --z-magenta: #d4b478;
  --z-navy: #0f0e0c;
  --z-dunkel: #1a1915;
  --z-dunkel-2: #2a2722;
  --z-gold-hell: #e8d5b0;
  --z-verlauf: linear-gradient(120deg, #e8d5b0 0%, #d4b478 35%, #b8924a 70%, #8a6a30 100%);
  --z-verlauf-knopf: linear-gradient(180deg, #d6b26a 0%, #b8924a 55%, #a5823e 100%);
  --z-verlauf-text: linear-gradient(120deg, #e8d5b0 0%, #d4b478 50%, #b8924a 100%);
  /* Werte, die die übrigen Stylesheets nutzen */
  --bg: #12110e;
  --flaeche: #1d1b17;
  --rand: #3a352c;
  --text: #ece6da;
  --text-schwach: #a39b8e;
  --akzent: #c9a45c;
  --akzent-hell: #2e2719;
  --gruen: #4cc38a;
  --gruen-hell: #17301f;
  --rot: #ff7a7f;
  --rot-hell: #3a1c1d;
  --gelb-hell: #3a3118;
  /* Was nur der Betreiber sieht: Kupfer, klar unterscheidbar vom Gold */
  --betreiber: #d9895b;
  --betreiber-hell: #3a2619;
  --radius: 18px;
  /* Namen aus älteren Stylesheets (dort mit grünlichem Ersatzwert) */
  --hintergrund: var(--bg);
  --flaeche-2: #24221d;
  --karte: var(--flaeche);
  /* Tiefe: auf dunklem Grund tragen Schatten wenig, die Kante oben und der hellere Ton der Karten machen die Ebenen */
  --z-schatten-1: 0 1px 2px rgba(0, 0, 0, .25), 0 2px 6px rgba(0, 0, 0, .18);
  --z-schatten-2: 0 1px 2px rgba(0, 0, 0, .25), 0 8px 22px rgba(0, 0, 0, .28);
  --z-schatten-3: 0 36px 90px -24px rgba(0, 0, 0, .70), 0 12px 32px rgba(0, 0, 0, .35);
  --z-glanz: inset 0 1px 0 rgba(255, 248, 235, .05);
  --z-kante: rgba(232, 213, 176, .10);
  --z-schrift: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --z-titel: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --z-zier: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  color-scheme: dark;
}

/* ---------------------------------------------------------------- Grund */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--z-schrift); font-size: 15px; line-height: 1.55; letter-spacing: -.003em; color: var(--text);
  background: var(--bg);
}
/* Der Farbschimmer liegt als feste Ebene hinter allem: keine Kante beim Scrollen, auch auf dem iPhone (Safari kennt
   background-attachment: fixed nicht) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1100px 560px at -8% -12%, rgba(184, 146, 74, .10), transparent 62%),
    radial-gradient(900px 520px at 108% -6%, rgba(212, 180, 120, .05), transparent 60%),
    radial-gradient(900px 700px at 50% 118%, rgba(184, 146, 74, .05), transparent 62%);
}
h1, h2, h3, h4, .marke, .auth-karte h1 { font-family: var(--z-titel); letter-spacing: -.02em; color: var(--text); }
h1 { font-size: 34px; font-weight: 600; line-height: 1.1; }
/* Seitentitel in der Zierschrift der Website; kleinere Überschriften bleiben DM Sans, Cormorant ist klein schwer lesbar */
h1, #portal-intro h1, .auth-karte h1 { font-family: var(--z-zier); font-weight: 600; letter-spacing: -.005em; }
h2 { font-size: 21px; font-weight: 600; }
h3 { font-size: 16.5px; font-weight: 600; }
h4 { font-weight: 600; }
a { color: var(--akzent); }
a:hover { color: var(--z-blau-tief); }
::selection { background: rgba(201, 164, 92, .35); }
.stumm, label { color: var(--text-schwach); }
* { scrollbar-width: thin; scrollbar-color: rgba(232, 213, 176, .18) transparent; }

/* ---------------------------------------------------------------- Kopfzeile aus Glas */
/* mobile.css färbt die Portal-Kopfzeile mit stärkerem Selektor hell, deshalb auch .mobile-portal .portal-kopf */
.kopf, .portal-kopf, .mobile-portal .portal-kopf {
  background: var(--z-dunkel); color: #e8e2d6; border-bottom: 1px solid rgba(184, 146, 74, .28);
  box-shadow: 0 8px 28px -18px rgba(0, 0, 0, 0.6);
}
/* Alles in der dunklen Kopfzeile hell: Navigation, Brotkrumen, Konto, Systemstatus */
.kopf .hauptnav a, .kopf #brotkrumen, .kopf #brotkrumen a, .kopf .systemstatus { color: #c0b9ad; }
.kopf #brotkrumen a:hover { color: var(--z-gold-hell); }
.kopf .systemstatus .ok { color: #6fd39b; }
.kopf .systemstatus .fehlt { color: #ff9a9e; }
.kopf button, .portal-kopf button {
  background: rgba(255, 248, 235, .05); color: #e8e2d6; border: 1px solid rgba(232, 213, 176, .20); box-shadow: none;
}
.kopf button:hover:not(:disabled), .portal-kopf button:hover:not(:disabled) {
  background: rgba(232, 213, 176, 0.06); color: var(--z-gold-hell); box-shadow: none; transform: none;
}
.kopf button.leise, .portal-kopf button.leise { background: transparent; border-color: transparent; color: #c0b9ad; }
.kopf { padding: 12px 28px; }
.portal-kopf { position: sticky; top: 0; z-index: 5; padding: 14px 30px; }
.studio-wortmarke { display: inline-flex; align-items: center; gap: 10px; }
/* Wortmarke = das ganze Logo als Bild (Symbol und Schrift genau wie im Logo), der Name steht im alt-Text */
.studio-wortmarke img { width: auto !important; height: 30px !important; object-fit: contain; display: block; }
/* studio-marke.html liefert das Logo zweimal: dunkle Schrift für helle Flächen, helle Schrift für die Kopfzeilen */
.studio-wortmarke .wm-dunkel { display: none; }
.studio-wortmarke .wm-hell { display: block; }
.hauptnav { gap: 2px; }
.hauptnav a { padding: 7px 13px; border-radius: 12px; color: var(--text-schwach); font-weight: 500; transition: background .15s, color .15s; }
.hauptnav a:hover { background: rgba(232, 213, 176, 0.05); color: var(--z-gold-hell); }
#brotkrumen { font-size: 13.5px; }

/* ---------------------------------------------------------------- Fenster (Karten) */
.karte, .contentkarte, .portal-beitrag, .formular, .werkzeuge, .regel, .prinzip, .post, .unverplant, .karte-einst,
.vorgabe, .wisseneintrag, .suchweg, .galeriefilter, .vorlage-karte, .fortschritt, .visual-referenz, .kanal-inhalt,
.portal-seite .karte, .zugang-seite .karte {
  background: var(--flaeche); border: 1px solid var(--z-kante); border-radius: 22px;
  box-shadow: var(--z-glanz), var(--z-schatten-2);
}
.karte { padding: 20px; }
/* Erste Überschrift eines Fensters ohne zusätzlichen Abstand nach oben */
.karte > :first-child, .karte > .zeile:first-child > :is(h2, h3) { margin-top: 0; }
.contentkarte { padding: 20px; gap: 22px; }
.contentkarte.freigegeben, .contentkarte.abgelehnt { border-left: 1px solid var(--z-kante); }
.karte.klickbar, .vorgabe { transition: transform .18s ease, box-shadow .18s ease, border-color .18s; }
.karte.klickbar:hover, .vorgabe:hover {
  border-color: rgba(138, 106, 48, .35); transform: translateY(-2px);
  box-shadow: var(--z-glanz), 0 2px 4px rgba(0, 0, 0, 0.1), 0 16px 36px -12px rgba(138, 106, 48, .28);
}
.leer { border-radius: 22px; border: 1.5px dashed rgba(232, 213, 176, .22); background: rgba(255, 248, 235, 0.054); }
.postbox, .video-info, .analysebox, .aktivbanner, .website-auswertung {
  border-radius: 16px; border: 1px solid var(--z-kante); background: linear-gradient(180deg, #181713, #181713);
  box-shadow: inset 0 1px 0 rgba(255, 248, 235, 0.05);
}
.bild, .linkvorschau, .vorschaukarte, .portal-bilder img, .post-bild { border-radius: 14px; }
.bild .aktionen, .linkvorschau .aktionen { background: #181713; }

/* ---------------------------------------------------------------- Knöpfe mit Tiefe */
button, .knopf {
  font-family: var(--z-schrift); font-weight: 550; letter-spacing: -.005em;
  border: 1px solid rgba(232, 213, 176, 0.162); border-radius: 13px; padding: 9px 16px;
  background: linear-gradient(180deg, #2f2c26 0%, #27241f 100%); color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 248, 235, 0.05), 0 1px 1px rgba(0, 0, 0, 0.1), 0 3px 8px -2px rgba(0, 0, 0, 0.16);
  transition: transform .14s ease, box-shadow .14s ease, background .14s, filter .14s;
}
button:hover:not(:disabled) {
  background: linear-gradient(180deg, #38342d 0%, #2d2a24 100%); transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 248, 235, 0.05), 0 2px 3px rgba(0, 0, 0, 0.1), 0 8px 18px -6px rgba(0, 0, 0, 0.32);
}
button:active:not(:disabled) { transform: translateY(0); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2); }
button:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(138, 106, 48, .22), inset 0 1px 0 rgba(255, 248, 235, 0.05); }
button:disabled { opacity: .45; box-shadow: none; }
button.primaer, .mobile-portal button.primaer, .auth-karte button[type=submit], button.chatknopf {
  background: var(--z-verlauf-knopf); color: var(--z-dunkel); border: 1px solid rgba(122, 92, 38, .55);
  box-shadow: inset 0 1px 0 rgba(255, 248, 235, 0.05), inset 0 -2px 6px rgba(110, 80, 25, .15),
              0 2px 3px rgba(0, 0, 0, 0.2), 0 10px 22px -8px rgba(184, 146, 74, .55);
  text-shadow: none;
}
button.primaer:hover:not(:disabled), .mobile-portal button.primaer:hover:not(:disabled), .auth-karte button[type=submit]:hover:not(:disabled) {
  background: var(--z-verlauf-knopf); color: var(--z-dunkel); filter: brightness(1.06);
  box-shadow: inset 0 1px 0 rgba(255, 248, 235, 0.05), 0 3px 6px rgba(0, 0, 0, 0.24), 0 16px 30px -10px rgba(184, 146, 74, .65);
}
button.gruen {
  background: linear-gradient(180deg, #22b566 0%, #10924a 100%); color: #fff; border: 1px solid rgba(232, 213, 176, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 248, 235, 0.05), 0 2px 3px rgba(0, 0, 0, 0.2), 0 10px 20px -10px rgba(16, 146, 74, .7);
}
button.gruen:hover:not(:disabled) { background: linear-gradient(180deg, #25c06d 0%, #0f9a4d 100%); filter: none; }
button.rot { color: var(--rot); border-color: rgba(224, 67, 74, .28); }
button.leise, .tabs button, .bereiche button, .ve-klein.leise {
  background: transparent; border-color: transparent; box-shadow: none; color: var(--text-schwach);
}
button.leise:hover:not(:disabled) { background: rgba(255, 248, 235, 0.065); transform: none; box-shadow: none; color: var(--text); }
button.chatknopf { background: linear-gradient(180deg, #2e2a23 0%, #1a1915 100%) !important; border-color: rgba(184, 146, 74, .45) !important;
  color: var(--z-gold-hell) !important; box-shadow: inset 0 1px 0 rgba(232, 213, 176, .12), 0 10px 22px -10px rgba(0, 0, 0, 0.6); }

/* ---------------------------------------------------------------- Eingabefelder */
input[type=text], input:not([type]), input[type=number], input[type=password], input[type=email], input[type=url],
input[type=search], input[type=datetime-local], input[type=date], input[type=time], textarea, select {
  font-family: var(--z-schrift); border: 1px solid #3a352c; border-radius: 13px; padding: 10px 13px;
  background: #161511; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
input:focus, textarea:focus, select:focus {
  outline: none; background: #14130f; border-color: rgba(201, 164, 92, .7);
  box-shadow: 0 0 0 4px rgba(201, 164, 92, .16), inset 0 1px 2px rgba(0, 0, 0, 0.06);
}
input[type=checkbox], input[type=radio], input[type=range] { accent-color: var(--akzent); }
label { font-size: 13px; font-weight: 500; }
fieldset { border: 1px solid var(--z-kante); border-radius: 18px; }
/* Dateiauswahl: der Knopf des Browsers im selben Look wie alle Knöpfe */
input[type=file] { font-family: var(--z-schrift); font-size: 13px; color: var(--text-schwach); max-width: 100%; }
input[type=file]::file-selector-button {
  font: inherit; font-weight: 550; color: var(--text); margin-right: 12px; padding: 9px 16px; cursor: pointer;
  border: 1px solid rgba(232, 213, 176, 0.162); border-radius: 13px; background: linear-gradient(180deg, #2f2c26 0%, #27241f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 248, 235, 0.05), 0 1px 1px rgba(0, 0, 0, 0.1), 0 3px 8px -2px rgba(0, 0, 0, 0.16);
}
input[type=file]::file-selector-button:hover { background: linear-gradient(180deg, #38342d 0%, #2d2a24 100%); }

/* ---------------------------------------------------------------- Reiter wie Segmentschalter */
.tabs, .filter, .portal-rubriken, .ve-modus, .dash-zeitraum {
  display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 4px; border-radius: 16px;
  background: rgba(255, 248, 235, 0.065); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
}
.tabs button, .filter button, .portal-rubriken button, .ve-modus button, .dash-zeitraum button {
  border: 1px solid transparent; border-radius: 12px; padding: 7px 14px; background: transparent; box-shadow: none;
  color: var(--text-schwach); font-weight: 550;
}
.tabs button:hover:not(:disabled), .filter button:hover:not(:disabled), .portal-rubriken button:hover:not(:disabled),
.ve-modus button:hover:not(:disabled), .dash-zeitraum button:hover:not(:disabled) {
  background: rgba(255, 248, 235, 0.054); transform: none; box-shadow: none; color: var(--text);
}
.tabs button.aktiv, .filter button.aktiv, .portal-rubriken button.aktiv, .ve-modus button[aria-pressed="true"],
.dash-zeitraum button[aria-pressed="true"] {
  background: #2f2c26; color: var(--text); border-color: rgba(232, 213, 176, 0.108);
  box-shadow: inset 0 1px 0 rgba(255, 248, 235, 0.05), 0 1px 2px rgba(0, 0, 0, 0.16), 0 4px 12px -4px rgba(0, 0, 0, 0.28);
}
/* Bereiche beim Betreiber und Reiter im Portal: aktiver Punkt mit Farbstrich aus dem Logo */
.kunde-bereiche { border-bottom: none; }
.bereiche { gap: 4px; padding: 4px; border-radius: 16px; background: rgba(255, 248, 235, 0.05); border: 1px solid var(--z-kante); box-shadow: var(--z-schatten-1); }
.bereiche button { position: relative; border-radius: 12px; padding: 8px 16px; border-bottom: none; margin: 0; font-family: var(--z-titel); font-size: 15px; }
.bereiche button:hover:not(:disabled) { background: rgba(255, 248, 235, 0.052); transform: none; box-shadow: none; }
.bereiche button.aktiv { background: #2f2c26; color: var(--text); box-shadow: inset 0 1px 0 rgba(255, 248, 235, 0.05), 0 1px 2px rgba(0, 0, 0, 0.16), 0 6px 14px -6px rgba(0, 0, 0, 0.36); }
.bereiche button.aktiv::after, .portal-tabs a[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: 3px; width: 18px; height: 3px; margin-left: -9px;
  border-radius: 3px; background: var(--z-verlauf);
}
.bereiche button[data-nur-betreiber].aktiv::after { background: var(--betreiber); }
.portal-tabs { gap: 4px; padding: 4px; margin: 18px 0 26px; border: 1px solid var(--z-kante); border-radius: 18px;
  background: rgba(255, 248, 235, 0.054); box-shadow: var(--z-schatten-1); }
.portal-tabs a { position: relative; padding: 9px 16px; border-radius: 13px; color: var(--text-schwach); font-weight: 550; }
.portal-tabs a:hover { background: rgba(255, 248, 235, 0.052); color: var(--text); }
.portal-tabs a[aria-current="page"] { background: #2f2c26; color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 248, 235, 0.05), 0 1px 2px rgba(0, 0, 0, 0.16), 0 6px 14px -6px rgba(0, 0, 0, 0.36); }
/* Fundus-Unterleiste steht vor der Seite (app.js fundusNavi): auf dieselbe Breite wie .seite bringen */
.unternavi { border-bottom: none; max-width: 1240px; margin: 16px auto -6px; padding: 0 16px; }
.unternavi a { border-radius: 12px; }
.unternavi a.aktiv { background: #2f2c26; color: var(--text); box-shadow: var(--z-schatten-1); }
/* Portal am Handy (mobile.css färbte den aktiven Reiter voll blau): derselbe helle, erhabene Knopf */
.mobile-portal .portal-tabs { border-color: var(--z-kante); }
.mobile-portal .portal-tabs a[aria-current=page] { background: #2f2c26; color: var(--text); }
/* Kanalreiter einer Beitragskarte (kanalvorschau.css) */
.kanal-inhalt { overflow: hidden; }
.kanal-tabs { border-bottom: none; padding: 10px 20px 4px; gap: 4px; }
.kanal-tabs [role=tab] { border: 1px solid transparent; border-radius: 14px; padding: 9px 16px; background: transparent; box-shadow: none; }
.kanal-tabs [role=tab]:hover:not(:disabled) { background: rgba(255, 248, 235, 0.052); transform: none; box-shadow: none; }
.kanal-tabs [aria-selected=true] { background: #2f2c26; color: var(--text); border-color: rgba(232, 213, 176, 0.108);
  box-shadow: inset 0 1px 0 rgba(255, 248, 235, 0.05), 0 1px 2px rgba(0, 0, 0, 0.16), 0 6px 14px -6px rgba(0, 0, 0, 0.36); }
.kanal-tabs [aria-selected=true]:hover:not(:disabled) { background: #2f2c26; }
.kanal-dazu { background: transparent; }

/* ---------------------------------------------------------------- Schilder */
.schild { border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; letter-spacing: .01em; background: #2f2c26; color: #d8d0c2; }
.schild.entwurf { background: #3d341a; color: #ffd366; }
.schild.freigegeben { background: var(--gruen-hell); color: #74f1ac; }
.schild.abgelehnt { background: var(--rot-hell); color: #e0858b; }
.schild.typ { background: var(--akzent-hell); color: var(--z-blau-tief); }
.schild.news { background: var(--z-dunkel-2); color: var(--z-gold-hell); }

/* ---------------------------------------------------------------- Fenster, Meldungen, Chat */
dialog { border: none !important; border-radius: 26px !important; box-shadow: var(--z-schatten-3); background: #1d1b17; color: var(--text); }
/* Ohne Unschärfe hinter offenen Fenstern: sie kostet auf schwächeren Geräten viel Rechenzeit und brachte den Bildeditor
   ins Stocken (Browsertest, 29.09.2026); die Abdunklung genügt */
dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
.meldung { background: #2f2c26; color: var(--text); border: 1px solid rgba(232, 213, 176, .16); border-radius: 16px; padding: 12px 18px; box-shadow: var(--z-schatten-3);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
#portal-meldung:not(:empty) { background: rgba(255, 248, 235, 0.076); border: 1px solid rgba(138, 106, 48, .22); border-radius: 16px; }
.chat { border-radius: 26px 0 0 26px; border-left: 1px solid var(--z-kante); box-shadow: var(--z-schatten-3); }
.chat-nachricht .blase { border-radius: 16px; }
.chat-nachricht.user .blase { background: #3a3122; color: #f0ebe2; }

/* ---------------------------------------------------------------- Anmeldung */
.auth-seite {
  background:
    radial-gradient(700px 480px at 12% 8%, rgba(184, 146, 74, .16), transparent 65%),
    radial-gradient(640px 460px at 92% 18%, rgba(212, 180, 120, .08), transparent 62%),
    radial-gradient(760px 520px at 50% 105%, rgba(184, 146, 74, .08), transparent 65%),
    var(--bg);
}
.auth-karte {
  border-radius: 30px; border: 1px solid rgba(232, 213, 176, 0.12); padding: 40px;
  background: rgba(29, 27, 23, .88); -webkit-backdrop-filter: saturate(170%) blur(24px); backdrop-filter: saturate(170%) blur(24px);
  box-shadow: inset 0 1px 0 rgba(255, 248, 235, 0.05), 0 2px 6px rgba(0, 0, 0, 0.1), 0 40px 90px -30px rgba(138, 106, 48, .35);
}
.auth-karte .studio-wortmarke img { height: 46px !important; }
.auth-karte h1 { font-size: 34px; }

/* ---------------------------------------------------------------- Portal */
.portal-eyebrow { font-weight: 700; letter-spacing: .16em; background: var(--z-verlauf-text); -webkit-background-clip: text;
  background-clip: text; color: transparent; }
#portal-intro h1 { font-size: 46px; }
.portal-beitrag { border-radius: 24px; }
.portal-beitrag .portal-bilder { background: #2a2722; }
/* Vorschau im Beitrag: Avatar in Zento-Farben */
.kv-avatar { background: var(--akzent-hell); color: var(--akzent); }

/* Begrüßung nur auf der Startseite (Dashboard): auf den übrigen Reitern schob sie den Inhalt jedes Mal nach unten.
   Die Verbindungsanzeige (#verbindung) bleibt überall. portal.js setzt body[data-reiter]. */
body[data-reiter]:not([data-reiter="dashboard"]) #portal-intro { display: none; }

/* Aufnahme in der App (mobile.css): Kacheln als erhabene Knöpfe, Symbole im Logo-Verlauf */
.capture-main, .capture-brief { border-radius: 24px; border: 1px solid var(--z-kante); box-shadow: var(--z-glanz), var(--z-schatten-2); }
.capture-choice {
  background: linear-gradient(180deg, #2f2c26 0%, #27241f 100%); border: 1px solid rgba(232, 213, 176, .14); border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 248, 235, 0.05), 0 2px 4px rgba(0, 0, 0, 0.1), 0 14px 26px -14px rgba(138, 106, 48, .35);
  transition: transform .15s ease, box-shadow .15s ease;
}
.capture-choice:hover, .capture-choice:focus-within {
  outline: none; transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 248, 235, 0.05), 0 0 0 3px rgba(138, 106, 48, .16), 0 18px 30px -14px rgba(138, 106, 48, .45);
}
.capture-choice strong { color: var(--text); }
.capture-icon { background: var(--z-verlauf-text); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 40px; }
.capture-gallery { border-radius: 16px; border: 1.5px dashed rgba(138, 106, 48, .45); background: rgba(255, 248, 235, 0.05); font-weight: 550; }
.mobile-step { background: var(--z-verlauf-knopf); color: var(--z-dunkel); font-weight: 700; box-shadow: 0 4px 10px -4px rgba(184, 146, 74, .6); }

/* Waagrecht wischbare Leisten: Rand weich ausblenden, solange es dort weitergeht (portal.js setzt die Klassen) */
.wischleiste { scrollbar-width: none; }
.wischleiste::-webkit-scrollbar { display: none; }
.wischleiste.mehr-rechts { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.wischleiste.mehr-links { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px); mask-image: linear-gradient(90deg, transparent, #000 40px); }
.wischleiste.mehr-links.mehr-rechts { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }

@media (max-width: 720px) {
  .kopf { padding: 12px 16px; }
  h1 { font-size: 29px; }
  #portal-intro h1 { font-size: 36px; }
  .karte, .contentkarte { border-radius: 20px; }
  .auth-karte { padding: 26px; border-radius: 26px; }
  /* App-Kopfzeile in einer Zeile; sie scrollt weg, die Reiterleiste bleibt oben stehen (mobile.css) */
  .portal-kopf { position: static; flex-wrap: nowrap; gap: 10px; padding: 10px 14px; }
  .portal-kopf .studio-wortmarke img { height: 24px !important; }
  .portal-kopf #konto { margin-left: auto; flex-wrap: nowrap; gap: 2px; min-width: 0; }
  .portal-kopf #konto button { padding: 7px 10px; font-size: 12.5px; white-space: nowrap; }
  .portal-kopf #konto-passwort { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
  .mobile-portal .portal-tabs { margin: 10px 0 18px; padding: 4px; background: rgba(29, 27, 23, .94);
    -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); scroll-snap-type: x proximity; }
  .mobile-portal .portal-tabs a { scroll-snap-align: start; flex: none; }
  /* Rubriken unter „Beiträge“ in einer wischbaren Zeile statt drei Zeilen */
  .portal-rubriken { display: flex; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; }
  .portal-rubriken button { white-space: nowrap; flex: none; }
}