/* ERZEUGT von Winku/betrieb/alt-rahmen/erzeugen.mjs — nicht von Hand ändern (Quellen: pakete/design, Astro-Bausteine, stil/).
   Rahmen des Neubaus für die alten Seiten von winku.de; wirkt nur mit <body class="… rahmen"> (rahmen.php). */

/* ── Schriften ── */
/* inter-cyrillic-ext-opsz-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/rahmen/inter-cyrillic-ext-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-cyrillic-opsz-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/rahmen/inter-cyrillic-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-greek-ext-opsz-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/rahmen/inter-greek-ext-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+1F00-1FFF;
}

/* inter-greek-opsz-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/rahmen/inter-greek-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-vietnamese-opsz-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/rahmen/inter-vietnamese-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* inter-latin-ext-opsz-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/rahmen/inter-latin-ext-opsz-normal.woff2) format('woff2-variations');
  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;
}

/* inter-latin-opsz-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/rahmen/inter-latin-opsz-normal.woff2) format('woff2-variations');
  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;
}
/* jetbrains-mono-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/assets/fonts/rahmen/jetbrains-mono-cyrillic-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* jetbrains-mono-cyrillic-wght-normal */
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/assets/fonts/rahmen/jetbrains-mono-cyrillic-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* jetbrains-mono-greek-wght-normal */
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/assets/fonts/rahmen/jetbrains-mono-greek-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* jetbrains-mono-vietnamese-wght-normal */
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/assets/fonts/rahmen/jetbrains-mono-vietnamese-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* jetbrains-mono-latin-ext-wght-normal */
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/assets/fonts/rahmen/jetbrains-mono-latin-ext-wght-normal.woff2) format('woff2-variations');
  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;
}

/* jetbrains-mono-latin-wght-normal */
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/assets/fonts/rahmen/jetbrains-mono-latin-wght-normal.woff2) format('woff2-variations');
  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;
}
/* ── Tokens (pakete/design) ── */
:root {
    --schrift-text: "Inter Variable", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --schrift-mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
    --stufe-0: clamp(0.97rem, 0.958rem + 0.052vw, 1rem);
    --stufe-1: clamp(1.06rem, 1.025rem + 0.157vw, 1.15rem);
    --stufe-2: clamp(1.2rem, 1.122rem + 0.348vw, 1.4rem);
    --stufe-3: clamp(1.45rem, 1.293rem + 0.696vw, 1.85rem);
    --stufe-4: clamp(1.8rem, 1.487rem + 1.391vw, 2.6rem);
    --stufe-5: clamp(2.2rem, 1.652rem + 2.435vw, 3.6rem);
    --stufe-6: clamp(2.6rem, 1.817rem + 3.478vw, 4.6rem);
    --stufe--2: clamp(0.72rem, 0.708rem + 0.052vw, 0.75rem);
    --stufe--1: clamp(0.84rem, 0.826rem + 0.061vw, 0.875rem);
    --abstand-0: 0;
    --abstand-1: .25rem;
    --abstand-2: .5rem;
    --abstand-3: .75rem;
    --abstand-4: 1rem;
    --abstand-5: 1.5rem;
    --abstand-6: 2rem;
    --abstand-7: 3rem;
    --abstand-8: 4rem;
    --abstand-9: 6rem;
    --abstand-10: 8rem;
    --radius-klein: .5rem;
    --radius-feld: .75rem;
    --radius-mittel: .875rem;
    --radius-karte: 1.125rem;
    --radius-gross: 1.75rem;
    --radius-rund: 999px;
    --dauer-schnell: 140ms;
    --dauer-mittel: 260ms;
    --dauer-langsam: 600ms;
    --kurve: cubic-bezier(.2,.7,.2,1);
    --kurve-raus: cubic-bezier(.16,1,.3,1);
    --kurve-feder: cubic-bezier(.34,1.56,.64,1);
    --ebene-basis: 0;
    --ebene-erhoben: 10;
    --ebene-leiste: 40;
    --ebene-kopf: 50;
    --ebene-menue: 60;
    --ebene-dialog: 200;
    --ebene-meldung: 300;
    --breite-text: 46rem;
    --breite-inhalt: 75rem;
    --breite-weit: 88rem;
    --seitenrand: clamp(1rem, 4vw, 2.5rem);
    --kopf-hoehe: 4.25rem;
    --strich: 1px;
    --leuchten: .55;
    --grund: #0b0f19;
    --grund-tief: #07090f;
    --flaeche: #121726;
    --flaeche-2: #171d2e;
    --flaeche-3: #1e2538;
    --flaeche-glas: rgb(18 23 38 / .72);
    --rand: #222a3d;
    --rand-stark: #2e3750;
    --rand-hell: rgb(255 255 255 / .08);
    --text: #e5e7eb;
    --text-stark: #ffffff;
    --text-leise: #9ca3af;
    --text-zart: #858d9f;
    --marke-1: #7c3aed;
    --marke-2: #06b6d4;
    --marke-3: #f472b6;
    --akzent: #a375f2;
    --akzent-2: #06b6d4;
    --auf-marke: #ffffff;
    --gut: #22c55e;
    --gut-text: #86efac;
    --warnung: #f59e0b;
    --warnung-text: #fcd34d;
    --fehler: #ef4444;
    --fehler-text: #fca5a5;
    --info-text: #93c5fd;
    --stern: #f59e0b;
    --logo-1: #7c3aed;
    --logo-2: #06b6d4;
    --marke-twitch: #9146ff;
    --marke-discord: #5865f2;
    --trustpilot: #00b67a;
    --trustpilot-knopf: #00815a;
    --keks: #d59b5e;
    --keks-kante: #a96b37;
    --keks-schoko: #4a2d1c;
    --mc-dunkelrot: #aa0000;
    --mc-rot: #ff5555;
    --mc-gold: #ffaa00;
    --mc-gelb: #ffff55;
    --mc-gruen: #55ff55;
    --mc-aqua: #55ffff;
    --mc-grau: #aaaaaa;
    --mc-dunkelgrau: #8a8a8a;
    --mc-weiss: #ffffff;
    --mc-tooltip: rgb(16 0 16 / .94);
    --mc-tooltip-rand: #2c0a78;
    --mc-schatten: #3f3f3f;
    --mc-namensschild: rgb(0 0 0 / .42);
    --mc-chat: rgb(0 0 0 / .55);
    --welt-himmel: #12304a;
    --welt-gras: #5d9b3a;
    --welt-gras-hell: #7cbd4f;
    --welt-erde: #7a5230;
    --welt-erde-dunkel: #5a3b21;
    --welt-stein: #6d7079;
    --welt-holz: #9c6b3c;
    --welt-holz-dunkel: #6f4a28;
    --bereich-scamradar: #ef4444;
    --bereich-arcade: #f59e0b;
    --bereich-plaza: #06b6d4;
    --fokus: #22d3ee;
    --auswahl: rgb(124 58 237 / .45);
    --raster-linie: rgb(255 255 255 / .045);
    --schatten: 0 0% 0%;
    --knopf-1: #7c3aed;
    --knopf-2: #047f94;
    --farbschema: dark;
  }

/* ── Marke (pakete/design/stil/marke.css) ── */
@property --marke-1 { syntax: "<color>"; inherits: true; initial-value: #7c3aed; }
@property --marke-2 { syntax: "<color>"; inherits: true; initial-value: #06b6d4; }
@property --marke-3 { syntax: "<color>"; inherits: true; initial-value: #f472b6; }
@property --licht-x { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@property --licht-y { syntax: "<percentage>"; inherits: true; initial-value: 30%; }
/* ── Aura: Leuchtfelder + Raster hinter der Seite ─────────────────────────────────────────
     Die drei Felder tragen die Markenfarben der Seite. Beim Wechsel (Startseite: beim Scrollen an
     Dienst-Karten vorbei) gleiten die Farben über, weil die Variablen registriert sind. Das Raster
     ist nahe am Mauszeiger etwas heller — man „leuchtet" es an. */
.aura { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; contain: strict; }
.aura::before, .aura::after, .aura > span {
    content: ""; position: absolute; border-radius: 50%; filter: blur(110px); opacity: var(--leuchten);
    transition: --marke-1 1.2s var(--kurve), --marke-2 1.2s var(--kurve), --marke-3 1.2s var(--kurve);
  }
.aura::before { inline-size: 46rem; block-size: 46rem; inset: -18rem auto auto -14rem; background: var(--marke-1); }
.aura::after { inline-size: 40rem; block-size: 40rem; inset: auto -14rem -16rem auto; background: var(--marke-2); opacity: calc(var(--leuchten) * .8); }
.aura > span { inline-size: 30rem; block-size: 30rem; inset: 38% auto auto 52%; background: var(--marke-3); opacity: calc(var(--leuchten) * .35); }
.aura > i {
    position: absolute; inset: 0;
    background-image: linear-gradient(var(--raster-linie) 1px, transparent 1px), linear-gradient(90deg, var(--raster-linie) 1px, transparent 1px);
    background-size: 64px 64px; background-position: -1px -1px;
    mask-image: radial-gradient(38rem 30rem at var(--licht-x) var(--licht-y), #000 0%, rgb(0 0 0 / .35) 45%, transparent 75%);
    transition: --licht-x .5s var(--kurve-raus), --licht-y .5s var(--kurve-raus);
  }
@media (prefers-reduced-motion: no-preference) {
    .aura::before { animation: aura-treiben 26s var(--kurve) infinite alternate; }
    .aura::after { animation: aura-treiben 31s var(--kurve) infinite alternate-reverse; }
    .aura > span { animation: aura-treiben 22s var(--kurve) infinite alternate; }
  }
@keyframes aura-treiben { to { translate: 6rem 4rem; scale: 1.12; } }
/* ── Verlaufstext: Schlüsselwörter in Markenfarben, mit langsamem Glanz ─────────────────── */
.verlauf-text {
    background: linear-gradient(100deg, var(--marke-1) 0%, var(--marke-3) 38%, var(--marke-2) 70%, var(--marke-1) 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    padding-block-end: .06em;
  }
@media (prefers-reduced-motion: no-preference) {
    .verlauf-text { animation: verlauf-glanz 9s linear infinite; }
  }
@keyframes verlauf-glanz { to { background-position: -220% 0; } }
/* ── Pille mit Punkt (Zustand, Version, Art) ────────────────────────────────────────────── */
.pille {
    --ton: var(--text-leise); --ton-grund: var(--flaeche-2); --ton-rand: var(--rand);
    display: inline-flex; align-items: center; gap: .45em; padding: .28em .75em; border-radius: var(--radius-rund);
    font-size: var(--stufe--2); font-weight: 600; line-height: 1.2; letter-spacing: .01em;
    /* Darf umbrechen statt aus dem Bild zu laufen (Prüfung 07.10.2026: Vetra-Plakette bei 375 px) — kurze Pillen bleiben einzeilig */
    max-inline-size: 100%; text-wrap: balance;
    /* Getönte Fläche ÜBER der Unterlage: sitzt die Pille auf einer Linie (--unterlage setzen), scheint nichts durch */
    color: var(--ton); background: linear-gradient(var(--ton-grund), var(--ton-grund)), var(--unterlage, transparent);
    border: var(--strich) solid var(--ton-rand);
  }
.pille[data-ton="gut"] { --ton: var(--gut-text); --ton-grund: rgb(34 197 94 / .12); --ton-rand: rgb(34 197 94 / .3); }
.pille[data-ton="warnung"] { --ton: var(--warnung-text); --ton-grund: rgb(245 158 11 / .12); --ton-rand: rgb(245 158 11 / .32); }
.pille[data-ton="fehler"] { --ton: var(--fehler-text); --ton-grund: rgb(239 68 68 / .12); --ton-rand: rgb(239 68 68 / .32); }
.pille[data-ton="info"] { --ton: var(--info-text); --ton-grund: rgb(59 130 246 / .12); --ton-rand: rgb(59 130 246 / .32); }
.pille[data-ton="marke"] { --ton: var(--akzent); --ton-grund: color-mix(in srgb, var(--marke-1) 14%, transparent); --ton-rand: color-mix(in srgb, var(--marke-1) 38%, transparent); }
.punkt { inline-size: .5rem; block-size: .5rem; border-radius: 50%; background: var(--punkt, var(--gut)); flex: none; box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--punkt, var(--gut)) 22%, var(--unterlage, transparent)); }
.punkt[data-ton="warnung"] { --punkt: var(--warnung); }
.punkt[data-ton="fehler"] { --punkt: var(--fehler); }
.punkt[data-ton="aus"] { --punkt: var(--text-zart); box-shadow: none; }
@media (prefers-reduced-motion: no-preference) {
    .punkt[data-puls] { animation: punkt-puls 2.2s ease-in-out infinite; }
  }
@keyframes punkt-puls { 50% { box-shadow: 0 0 0 .45rem color-mix(in srgb, var(--punkt, var(--gut)) 0%, transparent); } }
/* ── Karte mit Lichtschein unter der Maus ───────────────────────────────────────────────── */
.karte {
    position: relative; isolation: isolate; border-radius: var(--radius-karte);
    background: linear-gradient(180deg, color-mix(in srgb, var(--flaeche) 94%, var(--text)) 0%, var(--flaeche) 40%);
    border: var(--strich) solid var(--rand);
    transition: transform var(--dauer-mittel) var(--kurve), border-color var(--dauer-mittel) var(--kurve), box-shadow var(--dauer-mittel) var(--kurve);
  }
.karte::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; pointer-events: none;
    background: radial-gradient(34rem circle at var(--zx, 50%) var(--zy, 0%), color-mix(in srgb, var(--marke-1) 20%, transparent), transparent 42%);
    transition: opacity var(--dauer-mittel) var(--kurve);
  }
/* Rand, der unter dem Zeiger in Markenfarbe aufleuchtet */
.karte::after {
    content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0;
    background: radial-gradient(18rem circle at var(--zx, 50%) var(--zy, 0%), var(--marke-2), color-mix(in srgb, var(--marke-1) 60%, transparent) 40%, transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    transition: opacity var(--dauer-mittel) var(--kurve);
  }
.karte:is(:hover, :focus-within)::before, .karte:is(:hover, :focus-within)::after { opacity: 1; }
a.karte:hover, .karte[data-heben]:hover { transform: translateY(-4px); box-shadow: 0 24px 60px -30px color-mix(in srgb, var(--marke-1) 55%, transparent); }
/* ── Symbolkachel (Funktionen, Highlights) ──────────────────────────────────────────────── */
.symbolkachel {
    display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--radius-feld); flex: none;
    color: var(--text-stark);
    background: linear-gradient(135deg, color-mix(in srgb, var(--marke-1) 32%, transparent), color-mix(in srgb, var(--marke-2) 26%, transparent));
    border: var(--strich) solid var(--rand-hell);
  }
/* ── Einblenden beim Scrollen (JS setzt data-sichtbar; ohne JS ist alles sichtbar) ─────── */
@media (prefers-reduced-motion: no-preference) {
    .js [data-einblenden]:not([data-sichtbar]) { opacity: 0; translate: 0 1.5rem; }
    .js [data-einblenden] { transition: opacity .8s var(--kurve-raus), translate .8s var(--kurve-raus); transition-delay: calc(var(--i, 0) * 60ms); }
  }
/* ── Programmfenster um Bildschirmfotos ─────────────────────────────────────────────────── */
.fenster {
    position: relative; border-radius: var(--radius-mittel); overflow: hidden;
    background: var(--grund-tief); border: var(--strich) solid var(--rand-stark);
    box-shadow: 0 1px 0 0 var(--rand-hell) inset, 0 40px 100px -40px color-mix(in srgb, var(--marke-1) 45%, transparent), 0 24px 60px -30px hsl(var(--schatten) / .8);
  }
.fenster-leiste {
    display: flex; align-items: center; gap: .6rem; block-size: 2.2rem; padding-inline: .8rem;
    font-size: var(--stufe--2); color: var(--text-leise); background: var(--flaeche); border-block-end: var(--strich) solid var(--rand);
  }
.fenster-leiste img { inline-size: 1rem; block-size: 1rem; border-radius: .25rem; }
.fenster-knoepfe { margin-inline-start: auto; display: flex; gap: 1.05rem; color: var(--text-zart); }
.fenster-adresse {
    flex: 1; min-inline-size: 0; max-inline-size: 26rem; margin-inline: auto; padding: .2rem .8rem; border-radius: var(--radius-rund);
    display: flex; align-items: center; justify-content: center; gap: .4rem;
    background: var(--grund-tief); border: var(--strich) solid var(--rand); white-space: nowrap; overflow: hidden;
  }
.fenster-adresse svg { flex: none; opacity: .7; }
.fenster > img { display: block; inline-size: 100%; block-size: auto; }
.fenster figcaption { padding: .7rem 1rem; font-size: var(--stufe--1); color: var(--text-leise); border-block-start: var(--strich) solid var(--rand); background: var(--flaeche); }
/* Bühne: Fenster kommt schräg aus der Tiefe und richtet sich beim Scrollen auf */
.buehne-3d { perspective: 1600px; }
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .buehne-3d > * { transform-origin: 50% 0%; animation: aufrichten linear both; animation-timeline: view(); animation-range: entry 0% cover 42%; }
    }
  }
@keyframes aufrichten {
    from { transform: rotateX(16deg) scale(.94) translateY(1.5rem); opacity: .72; }
    to { transform: none; opacity: 1; }
  }
/* ── Nahtlose Seitenübergänge (Logo und Name gleiten von der Karte in den Hero) ─────────── */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; }
::view-transition-group(*) { animation-duration: .45s; animation-timing-function: var(--kurve-raus); }
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  }

/* ── Hilfen (pakete/design/stil/hilfen.css) ── */
.nur-vorleser {
    position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
.inhalt { inline-size: min(100% - 2 * var(--seitenrand), var(--breite-inhalt)); margin-inline: auto; }
.inhalt[data-breite="weit"] { inline-size: min(100% - 2 * var(--seitenrand), var(--breite-weit)); }
.inhalt[data-breite="text"] { inline-size: min(100% - 2 * var(--seitenrand), var(--breite-text)); }
.fluss > * + * { margin-block-start: var(--fluss-abstand, 1em); }
.reihe { display: flex; flex-wrap: wrap; gap: var(--reihe-abstand, var(--abstand-3)); align-items: center; }
/* .leise und .text-leise sind dasselbe: „text-leise" wird in der Verwaltung geschrieben (wie die Token-Namen),
     es gab die Klasse aber nie — die Hilfstexte standen deshalb in voller Textfarbe (Faddi 19.09.2026). */
.leise, .text-leise { color: var(--text-leise); }
.mono { font-family: var(--schrift-mono); }
.zahlen { font-variant-numeric: tabular-nums; }

/* ── Grenze zu site.css (stil/grenze.css) ── */
/*
 * GRENZE ZU site.css — die alte site.css gestaltet Elemente seitenweit (nav, nav ul, footer, details, summary …). Kopf und
 * Fuß des Neubaus bestehen aus genau diesen Elementen; ohne diese Datei erbten sie Innenabstände, ein „+" hinter dem
 * Telefon-Menü, versteckte Listen unter 900 px und mittige graue Schrift im Fuß.
 * Steht VOR den Bausteinen im erzeugten rahmen.css: gleich spezifische Regeln der Bausteine (.fuss ul …) gewinnen,
 * die Elementregeln der site.css (nav ul = 0,0,2) verlieren gegen jede Regel hier (0,1,1).
 * Nur Eigenschaften, die site.css setzt und die Bausteine nicht selbst setzen.
 */
.kopf nav, .fuss nav { display: block; padding: 0; gap: normal; justify-content: normal; align-items: normal; flex-wrap: nowrap; }
.kopf ul, .fuss ul { list-style: none; padding: 0; margin: 0; font-size: inherit; color: inherit; inline-size: auto; }
.kopf ul a, .fuss ul a { gap: normal; }
.kopf details { border: 0; border-radius: 0; background: none; padding: 0; }
.kopf summary { padding: 0; font-weight: inherit; justify-content: normal; }
.kopf summary::after { content: none; }
.kopf details p { padding: 0; }
.fuss { display: block; text-align: start; color: inherit; font-size: inherit; flex-direction: row; gap: normal; align-items: normal; }

/* Aus der Grundschicht des Neubaus (pakete/design/stil/basis.css), soweit Kopf und Fuß sie brauchen */
.kopf b, .fuss b { font-weight: 650; }
.kopf :focus-visible, .fuss :focus-visible, .sprungmarke:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; border-radius: .4rem; }
.kopf img, .kopf svg, .fuss img, .fuss svg { display: block; max-inline-size: 100%; }
.kopf button { font: inherit; color: inherit; }

/* ── Bausteine des Neubaus ── */
/* layouts/Seite.astro */
.rahmen .sprungmarke { position: absolute; left: 1rem; top: 1rem; z-index: var(--ebene-meldung); padding: .6rem 1rem; border-radius: var(--radius-mittel); color: var(--auf-marke); background: var(--knopf-1); translate: 0 -300%; }
  .rahmen .sprungmarke:focus { translate: 0; }
  .rahmen main:focus { outline: none; }

/* layouts/Kopf.astro */
.kopf { position: sticky; top: 0; z-index: var(--ebene-kopf); transition: background-color var(--dauer-mittel), border-color var(--dauer-mittel), backdrop-filter var(--dauer-mittel); border-block-end: var(--strich) solid transparent; }
  .kopf[data-gescrollt] { background: color-mix(in srgb, var(--grund) 78%, transparent); backdrop-filter: blur(14px) saturate(1.3); border-color: var(--rand); }
  .kopf .zeile { display: flex; align-items: center; gap: 1.5rem; min-block-size: var(--kopf-hoehe); }
  .kopf .marke { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; color: var(--text-stark); }
  .kopf .marke svg { border-radius: 10px; box-shadow: 0 8px 24px -6px color-mix(in srgb, var(--marke-1) 55%, transparent); }

  .kopf .haupt { display: flex; align-items: center; gap: .25rem; margin-inline: auto; }
  .kopf .nav-link {
    all: unset; display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem; border-radius: var(--radius-rund);
    font-size: var(--stufe--1); font-weight: 550; color: var(--text-leise); cursor: pointer; transition: color var(--dauer-schnell), background-color var(--dauer-schnell);
  }
  .kopf .nav-link:hover,.kopf  .nav-link:focus-visible,.kopf  [data-menue][data-offen] .nav-link { color: var(--text-stark); background: color-mix(in srgb, var(--auf-marke) 5%, transparent); }
  .kopf .nav-link:focus-visible { outline: 2px solid var(--fokus); }
  .kopf .pfeil { transition: rotate var(--dauer-mittel) var(--kurve); }

  .kopf .menue-dienste { position: relative; }
  .kopf .dienste-tafel {
    position: absolute; inset: calc(100% + .6rem) auto auto 50%; translate: -50% .4rem; z-index: var(--ebene-menue);
    inline-size: min(42rem, 92vw); padding: .6rem; border-radius: var(--radius-gross);
    background: color-mix(in srgb, var(--flaeche) 96%, transparent); border: var(--strich) solid var(--rand-stark);
    box-shadow: 0 30px 80px -20px hsl(var(--schatten) / .7); backdrop-filter: blur(16px);
    opacity: 0; visibility: hidden; transition: opacity var(--dauer-mittel) var(--kurve), translate var(--dauer-mittel) var(--kurve-raus), visibility var(--dauer-mittel);
  }
  .kopf .dienste-tafel::before { content: ""; position: absolute; inset: -.8rem 0 auto; block-size: .8rem; }
  .kopf .menue-dienste:is(:hover, :focus-within, [data-offen]) .dienste-tafel { opacity: 1; visibility: visible; translate: -50% 0; }
  .kopf .menue-dienste:is(:hover, :focus-within, [data-offen]) .pfeil { rotate: 180deg; }
  .kopf .dienste-tafel ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: .2rem; }
  /* Vorschau-Markierung (Abnahmeliste A13): nicht öffentliche Dienste sieht nur, wer darf — mit Schloss */
  .kopf .vorschau { display: inline-block; margin-inline-start: .35rem; vertical-align: -.1em; color: var(--warnung-text); }
  .kopf .dienst-eintrag { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; padding: .65rem .75rem; border-radius: var(--radius-mittel); }
  .kopf .dienst-eintrag:hover,.kopf  .dienst-eintrag:focus-visible { background: color-mix(in srgb, var(--marke-1) 12%, transparent); }
  .kopf .dienst-text { display: grid; gap: .1rem; min-inline-size: 0; }
  .kopf .dienst-text b { color: var(--text-stark); font-size: var(--stufe--1); }
  .kopf .dienst-text small { color: var(--text-leise); font-size: var(--stufe--2); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .kopf .dienst-pille { font-size: .75rem; font-weight: 650; color: var(--akzent-2); font-family: var(--schrift-mono); align-self: start; padding-block-start: .15rem; }

  .kopf .rechts { display: flex; align-items: center; gap: .6rem; }
  .kopf .sprachen { display: inline-flex; padding: .2rem; border-radius: var(--radius-rund); background: var(--flaeche); border: var(--strich) solid var(--rand); }
  .kopf .sprachen a { padding: .3rem .6rem; border-radius: var(--radius-rund); font-size: .72rem; font-weight: 700; color: var(--text-leise); }
  .kopf .sprachen a[aria-current] { color: var(--auf-marke); background: linear-gradient(120deg, var(--knopf-1), var(--knopf-2)); }
  /* Konto-Pille Maß für Maß wie im Kopf der alten Seite (btn btn-ghost btn-sm nav-user, avatar-xs): Konto, Support und
     Verwaltung laufen dort noch — beim Wechseln darf die Pille weder springen noch wachsen (Faddi 19.09.2026). */
  .kopf .konto {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 18px; border-radius: var(--radius-rund);
    font-size: .85rem; font-weight: 600; line-height: 1.6; color: var(--text); background: var(--flaeche); border: var(--strich) solid var(--rand);
    transition: transform var(--dauer-mittel), background-color var(--dauer-mittel);
  }
  .kopf .konto:hover { background: var(--flaeche-3); transform: translateY(-2px); }
  .kopf .konto:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
  .kopf .konto-bild { flex: none; inline-size: 20px; block-size: 20px; border-radius: 50%; object-fit: cover; }
  /* Verwaltung: rund und genauso hoch wie die Konto-Pille daneben */
  .kopf .nur-symbol { padding: 0; inline-size: 2.61rem; block-size: 2.61rem; }
  @media (prefers-reduced-motion: reduce) { .kopf .konto:hover { transform: none; } }

  .kopf .telefon { display: none; margin-inline-start: auto; }
  .kopf .telefon summary { list-style: none; display: grid; place-items: center; inline-size: 2.6rem; block-size: 2.6rem; border-radius: var(--radius-mittel); color: var(--text-stark); cursor: pointer; box-shadow: inset 0 0 0 1px var(--rand-stark); }
  .kopf .telefon summary::-webkit-details-marker { display: none; }
  .kopf .telefon-tafel { position: absolute; inset: 100% 0 auto; display: grid; gap: 1.1rem; padding: 1rem var(--seitenrand) 1.4rem; background: var(--grund); border-block-end: var(--strich) solid var(--rand); max-block-size: calc(100dvh - var(--kopf-hoehe)); overflow-y: auto; }
  .kopf .telefon-titel { font-size: var(--stufe--2); text-transform: uppercase; letter-spacing: .1em; color: var(--text-leise); font-weight: 700; }
  .kopf .telefon-dienste { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
  .kopf .telefon-dienste a { display: flex; align-items: center; gap: .6rem; padding: .55rem; border-radius: var(--radius-mittel); background: var(--flaeche); font-weight: 600; color: var(--text-stark); }
  .kopf .telefon-links { display: flex; gap: 1rem; flex-wrap: wrap; }
  .kopf .telefon-links a { color: var(--text); font-weight: 550; }
  .kopf .telefon-unten { display: flex; justify-content: space-between; align-items: center; }

  @media (max-width: 64rem) {
    .kopf .haupt,.kopf  .rechts { display: none; }
    .kopf .telefon { display: block; }
  }

/* layouts/Fuss.astro */
.fuss { margin-block-start: clamp(4rem, 9vw, 7rem); padding-block: 3.5rem 2rem; border-block-start: var(--strich) solid var(--rand); background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--grund-tief) 80%, transparent)); }
  .fuss .spalten { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1.3fr) minmax(0, 2.4fr) minmax(0, .8fr) minmax(0, 1fr); }
  /* Dienste in bis zu drei Spalten statt einer langen Liste */
  .fuss .dienste-liste { display: block; columns: 3 9.5rem; column-gap: 1.5rem; }
  .fuss .dienste-liste li { break-inside: avoid; margin-block-end: .55rem; }
  .fuss .dienste-liste .alle { color: var(--akzent-2); font-weight: 650; }
  .fuss .marke-spalte { display: grid; gap: .9rem; align-content: start; }
  .fuss .marke { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.1rem; color: var(--text-stark); }
  .fuss .marke svg { border-radius: 9px; }
  .fuss .marke-spalte p { max-inline-size: 26ch; font-size: var(--stufe--1); }
  .fuss .status { display: inline-flex; align-items: center; gap: .55rem; font-size: var(--stufe--1); color: var(--text); inline-size: fit-content; padding: .35rem .8rem; border-radius: var(--radius-rund); box-shadow: inset 0 0 0 1px var(--rand); }
  .fuss .spalten-titel { font-size: var(--stufe--2); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-leise); margin-block-end: .8rem; }
  .fuss ul { display: grid; gap: .55rem; }
  .fuss li a { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--stufe--1); color: var(--text); }
  .fuss li a:hover { color: var(--akzent-2); }
  .fuss .unten { display: flex; justify-content: space-between; gap: 1rem; margin-block-start: 3rem; padding-block-start: 1.4rem; border-block-start: var(--strich) solid var(--rand); font-size: var(--stufe--2); color: var(--text-zart); }
  @media (max-width: 64rem) { .fuss .spalten { grid-template-columns: 1fr 1fr; } .fuss .marke-spalte,.fuss  .dienste-spalte { grid-column: 1 / -1; } }
  @media (max-width: 30rem) { .fuss .dienste-liste { columns: 2; } }

/* bausteine/Knopf.astro */
.knopf {
    --hoehe: 2.75rem;
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    min-block-size: var(--hoehe); padding: 0 1.4rem; border: 0; border-radius: var(--radius-rund);
    font: inherit; font-size: var(--stufe--1); font-weight: 650; line-height: 1; letter-spacing: -.005em; white-space: nowrap;
    cursor: pointer; text-decoration: none; isolation: isolate;
    transition: transform var(--dauer-mittel) var(--kurve-feder), box-shadow var(--dauer-mittel) var(--kurve), background-color var(--dauer-schnell), color var(--dauer-schnell);
  }
  .knopf.groesse-klein { --hoehe: 2.2rem; padding: 0 1rem; }
  .knopf.groesse-gross { --hoehe: 3.25rem; padding: 0 1.9rem; font-size: var(--stufe-0); }

  .knopf.art-haupt {
    color: var(--auf-marke);
    background: linear-gradient(120deg, var(--knopf-1), var(--knopf-2));
    box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--marke-1) 55%, transparent), inset 0 1px 0 color-mix(in srgb, var(--auf-marke) 18%, transparent);
  }
  /* Glanz, der beim Überfahren einmal durchläuft */
  .knopf.art-haupt::after {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0;
    background: linear-gradient(120deg, transparent 20%, color-mix(in srgb, var(--auf-marke) 22%, transparent) 50%, transparent 80%) -120% 0 / 60% 100% no-repeat;
  }
  .knopf.art-haupt:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -10px color-mix(in srgb, var(--marke-1) 70%, transparent), inset 0 1px 0 color-mix(in srgb, var(--auf-marke) 22%, transparent); }
  @media (prefers-reduced-motion: no-preference) {
    .knopf.art-haupt:hover::after { opacity: 1; animation: glanz-lauf .9s var(--kurve-raus) forwards; }
  }
  @keyframes glanz-lauf { to { background-position: 220% 0; } }

  .knopf.art-neben { color: var(--text-stark); background: color-mix(in srgb, var(--flaeche) 75%, transparent); box-shadow: inset 0 0 0 1px var(--rand-stark); backdrop-filter: blur(8px); }
  .knopf.art-neben:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marke-2) 60%, var(--rand-stark)); transform: translateY(-1px); }
  .knopf.art-leise { color: var(--text-leise); background: transparent; padding-inline: .8rem; }
  .knopf.art-leise:hover { color: var(--text-stark); background: var(--flaeche-2); }

  .knopf .rechts { transition: transform var(--dauer-mittel) var(--kurve-feder); }
  .knopf:hover .rechts { transform: translateX(3px); }
  @media (prefers-reduced-motion: reduce) { .knopf,.knopf  .rechts { transition: none; } .knopf:hover { transform: none; } }

/* bausteine/DienstLogo.astro */
.dienstlogo { position: relative; display: inline-grid; place-items: center; flex: none; border-radius: 24%; }
  .dienstlogo img, .dienstlogo svg { border-radius: 24%; display: block; }
  .dienstlogo .kachel { fill: var(--knopf-1); }
  /* Ohne Logo: Anfangsbuchstabe des Dienstes — nie ein nachgebautes Winku-Zeichen */
  .dienstlogo .initial { fill: var(--auf-marke); font-weight: 800; font-size: 50px; font-family: var(--schrift-text); }
  /* Ein weicher Schein in der Dienstfarbe hinter dem Logo */
  .dienstlogo::before {
    content: ""; position: absolute; inset: 12%; z-index: -1; border-radius: 30%; filter: blur(18px); opacity: .55;
    background: linear-gradient(135deg, var(--marke-1), var(--marke-2));
  }

/* bausteine/WinkuZeichen.astro */
.winku-zeichen { flex: none; display: block; }
  .winku-zeichen .s1 { stop-color: var(--logo-1); }
  .winku-zeichen .s2 { stop-color: var(--logo-2); }
  .winku-zeichen .w { stroke: var(--auf-marke); }

/* bausteine/Symbol.astro */
.symbol { flex: none; }
/* ── Inhalt der alten Seiten (stil/inhalt.css) ── */
/*
 * INHALT DER ALTEN SEITEN IM STIL DES NEUBAUS — Konto, Anmeldung, Support, Tickets, Teilen, App-Anmeldung.
 * Nur mit <body class="… rahmen"> (Schalter in rahmen.php); site.css bleibt, wie sie ist — Relvia und Nivo laden sie direkt.
 * Vorbilder im Neubau: Knopf.astro (Knöpfe), marke.css .karte (Karten mit Lichtschein), .pille, RechtNavigation (Reiter),
 * layouts/Verwaltung.astro (Felder, Meldungen), stil/basis.css (Schrift, Überschriften).
 * Werte nur aus den Tokens; deckende Flächen (Memory „Durchsichtige Bedienflächen": Bedienelemente nie durchsichtig).
 */

/* ── Grundlage: Schrift und Ton wie im Neubau ──────────────────────────────────────────────────────────────────────── */
html:has(> body.rahmen) {
  background: var(--grund);
  scroll-padding-top: calc(var(--kopf-hoehe) + 1.5rem);
  scrollbar-color: var(--rand-stark) transparent;
}
body.rahmen {
  font-family: var(--schrift-text);
  font-size: var(--stufe-0);
  line-height: 1.55;
  font-optical-sizing: auto;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  color: var(--text);
  background: transparent;
  accent-color: var(--marke-1);
  overflow-x: clip;
}
.rahmen ::selection { background: var(--auswahl); color: var(--text-stark); }
.rahmen .container :focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; }
.rahmen h1, .rahmen h2, .rahmen h3, .rahmen h4 { color: var(--text-stark); letter-spacing: -0.022em; text-wrap: balance; }
.rahmen .container h3 { letter-spacing: -0.015em; }
.rahmen code, .rahmen kbd, .rahmen pre, .rahmen samp { font-family: var(--schrift-mono); }
.rahmen .container b, .rahmen .container strong { font-weight: 650; }
.rahmen .muted { color: var(--text-leise); }
.rahmen .container { outline: none; }

/* ── Seitenkopf der Formularseiten (Titel + Unterzeile) wie AbschnittKopf ─────────────────────────────────────────── */
.rahmen .support { padding-block: clamp(2.5rem, 6vw, 4rem) clamp(3rem, 7vw, 5rem); }
.rahmen .section-title { margin-block-end: clamp(1.75rem, 4vw, 2.5rem); }
.rahmen .section-title h2 { font-size: var(--stufe-4); font-weight: 800; line-height: 1.08; letter-spacing: -0.028em; margin-block-end: .7rem; }
.rahmen .section-title p { color: var(--text-leise); font-size: var(--stufe-1); line-height: 1.5; max-inline-size: 40rem; margin-inline: auto; }

/* ── Karten (.form-card) wie .karte: heller Schein oben, Lichtschein und Verlaufsrand unter dem Zeiger ─────────────── */
.rahmen .form-card {
  position: relative; isolation: isolate; border-radius: var(--radius-karte);
  background: linear-gradient(180deg, color-mix(in srgb, var(--flaeche) 94%, var(--text)) 0%, var(--flaeche) 40%);
  border: var(--strich) solid var(--rand);
  transition: border-color var(--dauer-mittel) var(--kurve), box-shadow var(--dauer-mittel) var(--kurve);
}
.rahmen .form-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; pointer-events: none;
  background: radial-gradient(34rem circle at var(--zx, 50%) var(--zy, 0%), color-mix(in srgb, var(--marke-1) 14%, transparent), transparent 42%);
  transition: opacity var(--dauer-mittel) var(--kurve);
}
.rahmen .form-card::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0;
  background: radial-gradient(18rem circle at var(--zx, 50%) var(--zy, 0%), var(--marke-2), color-mix(in srgb, var(--marke-1) 60%, transparent) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  transition: opacity var(--dauer-mittel) var(--kurve);
}
.rahmen .form-card:is(:hover, :focus-within)::before, .rahmen .form-card:is(:hover, :focus-within)::after { opacity: 1; }
.rahmen .form-card h3 { font-size: var(--stufe-1); font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; }
.rahmen .form-card h3 .ic { color: var(--akzent-2); }

/* ── Felder wie in der Verwaltung des Neubaus: eingelassen, deutlicher Rand, Fokus in Cyan ─────────────────────────── */
.rahmen .form-card label { font-size: var(--stufe--1); font-weight: 550; color: var(--text-leise); }
.rahmen :is(.form-card, .acc-make) :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="range"], [type="color"]), textarea, select) {
  padding: .7rem .9rem; border-radius: var(--radius-feld); border: var(--strich) solid var(--rand-stark);
  background: color-mix(in srgb, var(--grund) 60%, var(--flaeche)); color: var(--text); font-size: var(--stufe-0); line-height: 1.4;
  transition: border-color var(--dauer-schnell), background-color var(--dauer-schnell);
}
.rahmen :is(.form-card, .acc-make) :is(input, textarea, select):hover:not(:focus, [readonly], :disabled) { border-color: color-mix(in srgb, var(--rand-stark) 55%, var(--text-leise)); }
.rahmen :is(.form-card, .acc-make) :is(input, textarea, select):focus,
.rahmen :is(.form-card, .acc-make) :is(input, textarea, select):focus-visible { outline: 2px solid var(--fokus); outline-offset: 0; border-color: transparent; box-shadow: none; }
.rahmen :is(.form-card, .acc-make) :is(input, textarea)[readonly] { color: var(--text-leise); }
.rahmen .container ::placeholder { color: var(--text-zart); opacity: 1; }
.rahmen .form-card select option { background: var(--flaeche); }

/* ── Knöpfe wie Knopf.astro: Haupt = Markenverlauf ohne Rand mit Glanz, Neben = dunkle Fläche mit feinem Ring ──────── */
.rahmen .container .btn, .rahmen .fb-knopf-los {
  --hoehe: 2.75rem;
  position: relative; isolation: isolate; justify-content: center; gap: .55rem;
  min-block-size: var(--hoehe); padding: .55rem 1.4rem; border-radius: var(--radius-rund);
  font-size: var(--stufe--1); font-weight: 650; line-height: 1.2; letter-spacing: -.005em; text-align: center;
  transition: transform var(--dauer-mittel) var(--kurve-feder), box-shadow var(--dauer-mittel) var(--kurve), background-color var(--dauer-schnell), color var(--dauer-schnell);
}
.rahmen .container .btn-sm { --hoehe: 2.2rem; padding: .4rem 1rem; }
.rahmen .container .btn-lg { --hoehe: 3.25rem; padding: .7rem 1.9rem; font-size: var(--stufe-0); }
.rahmen .container .btn .ic { inline-size: 1.05em; block-size: 1.05em; }
.rahmen .container .btn-primary {
  color: var(--auf-marke); border: 0;
  background: linear-gradient(120deg, var(--knopf-1), var(--knopf-2));
  box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--marke-1) 55%, transparent), inset 0 1px 0 color-mix(in srgb, var(--auf-marke) 18%, transparent);
}
.rahmen .container .btn-primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; pointer-events: none;
  background: linear-gradient(120deg, transparent 20%, color-mix(in srgb, var(--auf-marke) 22%, transparent) 50%, transparent 80%) -120% 0 / 60% 100% no-repeat;
}
.rahmen .container .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -10px color-mix(in srgb, var(--marke-1) 70%, transparent), inset 0 1px 0 color-mix(in srgb, var(--auf-marke) 22%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .rahmen .container .btn-primary:hover::after { opacity: 1; animation: rahmen-glanz .9s var(--kurve-raus) forwards; }
}
@keyframes rahmen-glanz { to { background-position: 220% 0; } }
.rahmen .container .btn-ghost { color: var(--text-stark); background: var(--flaeche); border: 0; box-shadow: inset 0 0 0 1px var(--rand-stark); }
.rahmen .container .btn-ghost:hover { background: var(--flaeche-2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marke-2) 60%, var(--rand-stark)); transform: translateY(-1px); }
.rahmen .container .btn:disabled, .rahmen .container .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
@media (prefers-reduced-motion: reduce) { .rahmen .container .btn { transition: none; } .rahmen .container .btn:hover { transform: none; } }

/* ── Meldungen wie in der Verwaltung: deckend, Farbkante links ─────────────────────────────────────────────────────── */
.rahmen .flashbar {
  --ton: var(--warnung);
  margin-block: .6rem; padding: .8rem 1rem .8rem 1.1rem; border-radius: var(--radius-mittel); font-size: var(--stufe--1); line-height: 1.5;
  color: var(--text); background: color-mix(in srgb, var(--ton) 9%, var(--flaeche));
  border: var(--strich) solid color-mix(in srgb, var(--ton) 30%, var(--rand)); border-inline-start: 3px solid var(--ton);
}
.rahmen .flashbar.ok { --ton: var(--gut); }
.rahmen .flashbar.bad { --ton: var(--fehler); }
.rahmen .flashbar .ic { color: var(--ton); }

/* ── Pillen wie .pille ─────────────────────────────────────────────────────────────────────────────────────────────── */
.rahmen .container .pill { padding: .28em .75em; font-size: var(--stufe--2); font-weight: 600; line-height: 1.2; letter-spacing: .01em; background-color: var(--flaeche-2); border-color: var(--rand); }

/* ── Sprungleiste der Kontoseite wie die Reiter der Rechtstexte ───────────────────────────────────────────────────── */
.rahmen .konto-nav {
  inline-size: fit-content; max-inline-size: 100%; margin: 0 auto .5rem; padding: .3rem; gap: .35rem;
  border-radius: 1.5rem; background: var(--flaeche); border: var(--strich) solid var(--rand);
}
.rahmen .konto-nav a {
  padding: .45rem .95rem; border: 0; border-radius: var(--radius-rund); font-size: var(--stufe--1); font-weight: 600;
  color: var(--text-leise); transition: color var(--dauer-schnell), background-color var(--dauer-schnell);
}
.rahmen .konto-nav a:hover { color: var(--text-stark); background: var(--flaeche-2); border-color: transparent; }
/* Telefon: vier Ziele als 2×2 statt drei unruhiger Zeilen */
@media (max-width: 34rem) {
  .rahmen .konto-nav { display: grid; grid-template-columns: 1fr 1fr; inline-size: 100%; border-radius: var(--radius-gross); }
  .rahmen .konto-nav a { justify-content: center; padding-inline: .6rem; text-align: center; }
}

/* ── Zeilen „Feld + Knopf" (Name, Benutzername, E-Mail) ────────────────────────────────────────────────────────────
   Alt-Fehler am Telefon: site.css schaltet die Zeile auf Spalte, eine spätere Regel setzt align-items:flex-end —
   das Feld hing rechts eingerückt. Hier: Feld über die volle Breite, Knopf rechts darunter. */
@media (max-width: 520px) {
  .rahmen .name-row { align-items: stretch; }
  .rahmen .name-row label { min-inline-size: 0; }
}