/* =====================================================================
   Web Werkstube – Stil der neuen Seiten (ab Oktober 2026)
   Alle Werte aus dem Design-System „Web Werkstube Design System“
   (design/Web Werkstube Design System/tokens). Dunkel, ruhig, handwerklich.
   Schriftfarben-Regel (02.09.2026): lesbarer Text ist nie grau.
   Schriften lokal – fonts.googleapis.com ist verboten (Datenschutz).
   ===================================================================== */

@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url(../schriften/Archivo-Black-400-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:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url(../schriften/Archivo-Black-400-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:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;src:url(../schriften/Montserrat-400-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:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;src:url(../schriften/Montserrat-400-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 (Rangfolge: Lila > Messing > Azur) */
  --ink-900:#0B0B0B; --ink-850:#101010; --ink-800:#141414; --ink-750:#1A1A1A; --ink-600:#262626; --ink-500:#383838;
  --paper:#F5F5F5;
  --violet-500:#A78BFA; --violet-400:#B9A3FC; --violet-600:#9575F8; --violet-tint:rgba(167,139,250,0.12); --on-violet:#0B0B0B;
  --messing-500:#D9A441; --messing-tint:rgba(217,164,65,0.10); --on-messing:#1A1206;
  --azur-400:#60A5FA; --azur-tint:rgba(96,165,250,0.12);
  --ok-tint:rgba(74,222,128,0.12); --ok-text:#c9f3da; --fehler-tint:rgba(224,66,49,0.12); --fehler-text:#f7cdc7;
  --bg:var(--ink-900); --line:var(--ink-600); --line-strong:var(--ink-500); --text:var(--paper);
  /* Schrift */
  --font-display:'Archivo Black',-apple-system,'Segoe UI',sans-serif;
  --font-sans:'Montserrat',-apple-system,'Segoe UI',sans-serif;
  --fs-h1:clamp(32px,5vw,56px); --fs-h2:clamp(26px,3.4vw,36px); --fs-h3:24px; --fs-h3-karte:19.5px;
  --fs-preis:40px; --fs-preis-abo:30px; --fs-zahl:34px; --fs-fakt:23px;
  --fs-lead:17.5px; --fs-body:16px; --fs-body-s:15px; --fs-ui:14.5px; --fs-nav:14px; --fs-klein:13.5px;
  --fs-eyebrow:12.5px; --fs-badge:10.5px;
  /* Maße */
  --breite-inhalt:1080px; --breite-kopfzeile:900px; --breite-text:620px; --rand-seite:24px;
  --pad-sektion:80px; --pad-sektion-mobil:60px; --gap-karten:18px;
  --r-knopf:9px; --r-feld:9px; --r-klein:10px; --r-liste:12px; --r-frage:13px; --r-karte-s:14px; --r-karte:16px;
  --r-karte-l:18px; --r-block:20px; --r-pille:999px; --r-kasten:0.17em;
  --b-1:1px solid var(--line);
  --shadow-karte:0 16px 40px rgba(0,0,0,0.45);
  --shadow-pille:inset 0 1px 0 rgba(255,255,255,0.09),0 4px 14px rgba(0,0,0,0.35);
  --shadow-pille-hover:inset 0 1px 0 rgba(255,255,255,0.18),0 10px 26px rgba(45,140,240,0.3);
  --shadow-accent:0 6px 24px rgba(167,139,250,0.22);
  --streifen-marke:linear-gradient(90deg,var(--violet-500),var(--messing-500));
  --streifen-recht:linear-gradient(90deg,var(--azur-400),var(--violet-500));
  --streifen-danach:linear-gradient(90deg,var(--messing-500),var(--violet-500));
  --flaeche-karte:linear-gradient(165deg,var(--ink-750),var(--ink-850));
  --flaeche-pille:radial-gradient(120% 120% at 30% 20%,rgba(255,255,255,0.07),rgba(255,255,255,0.015));
  --flaeche-hero:radial-gradient(900px 420px at 78% 12%,rgba(167,139,250,0.1),transparent 62%),linear-gradient(180deg,var(--ink-850),var(--ink-900));
  --t-schnell:0.15s; --t-normal:0.18s; --t-langsam:0.25s;
}

/* ----- Grundregeln ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
/* „hidden“ muss immer gewinnen – sonst bleiben Knöpfe mit display:inline-flex sichtbar */
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);font-weight:500;
  line-height:1.65;font-size:var(--fs-body);-webkit-font-smoothing:antialiased;text-wrap:pretty}
a{color:var(--violet-500);text-decoration:none}
a:hover{color:var(--violet-400)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;letter-spacing:-0.02em;margin:0;text-wrap:balance}
h1{font-size:var(--fs-h1);line-height:1.1;letter-spacing:-0.03em}
h2{font-size:var(--fs-h2);line-height:1.14;letter-spacing:-0.025em}
h3{font-size:var(--fs-h3);line-height:1.2}
p{margin:0}
img,video{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--violet-500);outline-offset:2px}
.w{max-width:var(--breite-inhalt);margin:0 auto;padding:0 var(--rand-seite)}
.nowrap{white-space:nowrap}
.unsichtbar{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ----- Knöpfe ---------------------------------------------------------- */
.knopf{display:inline-block;text-align:center;cursor:pointer;font-family:inherit;font-weight:700;
  font-size:var(--fs-ui);padding:12px 24px;border-radius:var(--r-knopf);border:0;
  background:var(--violet-500);color:var(--on-violet);
  position:relative;overflow:hidden;isolation:isolate;
  transition:background var(--t-schnell),box-shadow var(--t-schnell),border-color var(--t-normal),transform .25s cubic-bezier(.2,.8,.2,1)}
.knopf:hover{background:var(--violet-400);color:var(--on-violet);box-shadow:var(--shadow-accent)}
.knopf:active{background:var(--violet-600)}
.knopf.klein{padding:9px 18px;font-size:var(--fs-klein)}
.knopf.zweit{background:transparent;color:var(--paper);border:1px solid var(--line-strong);font-weight:600}
.knopf.zweit:hover{border-color:var(--violet-500);color:var(--violet-400);box-shadow:none}
.knoepfe{display:flex;flex-wrap:wrap;gap:12px}

/* ----- Kopf (klebt oben) ---------------------------------------------- */
.kopf{position:sticky;top:0;z-index:50;background:rgba(11,11,11,0.9);
  -webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);border-bottom:var(--b-1)}
.kopf .w{height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.wortmarke{font-family:var(--font-display);font-size:26px;letter-spacing:-0.02em;display:inline-flex;flex-direction:column;
  align-items:flex-start;gap:0.13em;line-height:1;white-space:nowrap;color:inherit}
.wortmarke:hover{color:inherit}
.wortmarke>span{display:inline-flex;align-items:center}
.wortmarke i{font-style:normal;display:inline-flex;align-items:center;justify-content:center;width:1.04em;height:1.04em;
  border-radius:var(--r-kasten);color:var(--ink-900);font-size:0.84em;line-height:1;padding-top:0.03em;flex-shrink:0}
.wortmarke .web i{background:var(--violet-500)} .wortmarke .web{color:var(--violet-500)}
.wortmarke .werk i{background:var(--messing-500)} .wortmarke .werk{color:var(--messing-500)}
.kopf-nav{display:flex;gap:24px;font-size:var(--fs-nav);font-weight:600}
.kopf-nav a{color:var(--paper);white-space:nowrap}
.kopf-nav a:hover{color:var(--violet-400)}
.kopf-rechts{display:flex;align-items:center;gap:14px}
.kopf-menue{display:none;position:relative}
.kopf-menue>summary{list-style:none;cursor:pointer;font-weight:600;font-size:var(--fs-nav);color:var(--paper);
  padding:8px 14px;border:1px solid var(--line-strong);border-radius:var(--r-knopf)}
.kopf-menue>summary::-webkit-details-marker{display:none}
.kopf-menue[open]>summary{border-color:var(--violet-500)}
.kopf-menue nav{position:absolute;right:0;top:calc(100% + 10px);min-width:240px;display:grid;gap:2px;padding:10px;
  background:var(--ink-800);border:var(--b-1);border-radius:var(--r-karte-s);box-shadow:var(--shadow-karte)}
.kopf-menue nav a{color:var(--paper);padding:10px 12px;border-radius:8px;font-weight:600;font-size:15px}
.kopf-menue nav a:hover,.kopf-menue nav a:focus-visible{background:var(--violet-tint);color:var(--violet-400)}
@media (max-width:1140px){.kopf-nav{display:none}.kopf-menue{display:block}}
@media (max-width:420px){.kopf .knopf{display:none}.wortmarke{font-size:23px}}

/* ----- Bühne: der Logo-Film ganz oben --------------------------------- */
.buehne{background:var(--flaeche-hero);padding:30px 0 70px;border-bottom:var(--b-1)}
.buehne-rahmen{position:relative;border-radius:var(--r-block);overflow:hidden;border:var(--b-1);background:#000;
  aspect-ratio:16/9;box-shadow:var(--shadow-karte)}
.buehne-rahmen::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--streifen-marke);z-index:2}
.buehne-film{width:100%;height:100%;object-fit:cover;background:#000}
.buehne-knopf{position:absolute;left:16px;bottom:14px;z-index:3;display:inline-flex;align-items:center;gap:9px;
  font:600 var(--fs-klein)/1 var(--font-sans);color:var(--paper);cursor:pointer;
  padding:9px 15px 9px 12px;border-radius:var(--r-pille);border:1px solid rgba(255,255,255,0.22);
  background:rgba(11,11,11,0.62);transition:border-color var(--t-normal),color var(--t-normal)}
.buehne-knopf:hover{border-color:var(--violet-500);color:var(--violet-400)}
.buehne-knopf svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:700px){.buehne{padding-top:18px}.buehne-rahmen{aspect-ratio:4/5}}

.buehne-text{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px 56px;margin-top:46px;align-items:end}
.augenbraue{display:block;font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--violet-500);margin:0 0 14px}
.kicker{display:inline-block;margin:0 0 18px;padding:6px 14px;border-radius:var(--r-pille);background:var(--messing-tint);
  color:var(--messing-500);font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:0.03em}
/* Lila heißt anklickbar – deshalb ist der Slogan weiß, die zweite Zeile mit Messing-Strich wie bisher */
.buehne h1 .zweite{display:inline-block;text-align:left;margin-top:0.16em}
.buehne h1 .linie{display:inline-block;padding-bottom:0.1em;background:linear-gradient(90deg,var(--messing-500),#F2C46B) no-repeat 0 100%/100% 0.065em}
.einleitung{font-size:var(--fs-lead);line-height:1.7}
.einleitung b{font-weight:700;color:var(--messing-500)}
.einleitung+p{margin-top:12px}
.buehne .knoepfe{margin-top:24px}
@media (max-width:860px){.buehne-text{grid-template-columns:minmax(0,1fr);margin-top:32px}}

.fakten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 18px;margin-top:52px;padding-top:26px;border-top:var(--b-1)}
.fakt{position:relative;padding-top:14px;text-align:center}
.fakt::before{content:"";position:absolute;left:50%;transform:translateX(-50%);top:0;width:34px;height:2px;border-radius:2px;
  background:var(--azur-400);opacity:0.7}
.fakt b{display:block;font-family:var(--font-display);font-weight:400;font-size:var(--fs-fakt);color:var(--messing-500);letter-spacing:-0.02em}
.fakt>span{font-size:13.5px}
@media (max-width:420px){.fakt b{font-size:19px}}
@media (max-width:860px){.fakten{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ----- Abschnitte ------------------------------------------------------ */
.abschnitt{padding:var(--pad-sektion) 0;border-top:var(--b-1)}
.abschnitt:first-of-type{border-top:0}
.kopfzeile{max-width:var(--breite-kopfzeile)}
.kopfzeile p{max-width:var(--breite-text);margin-top:14px;font-size:var(--fs-lead)}
@media (max-width:700px){.abschnitt{padding:var(--pad-sektion-mobil) 0}}

/* Branchen-Blasen: die einzige Dauerbewegung der Marke */
.blasen-titel{text-align:center;margin:44px 0 0;font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--azur-400)}
.blasen{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 10px;margin-top:16px}
.blase{display:inline-block;padding:8px 16px;border-radius:var(--r-pille);background:var(--flaeche-pille);
  border:1px solid rgba(255,255,255,0.13);box-shadow:var(--shadow-pille);color:var(--paper);font-size:14px;font-weight:600;
  cursor:default;animation:schweben 8s ease-in-out infinite alternate;
  transition:color var(--t-langsam),border-color var(--t-langsam),box-shadow var(--t-langsam),background-color var(--t-langsam)}
.blase:nth-child(3n){animation-duration:6.5s;animation-delay:-2s}
.blase:nth-child(3n+1){animation-duration:9.5s;animation-delay:-4s}
.blase:nth-child(4n){animation-duration:7.4s;animation-delay:-1s}
.blase:hover,.blase:focus-visible,.blase.leuchtet,.blase.beruehrt{color:var(--azur-400);border-color:rgba(96,165,250,0.55);
  box-shadow:var(--shadow-pille-hover);background-color:rgba(96,165,250,0.08)}
.blase.ende{color:var(--paper);border-style:dashed}
@keyframes schweben{from{transform:translateY(-6px)}to{transform:translateY(6px)}}

/* ----- Angebote: sechs Leistungskarten ------------------------------- */
.angebote{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-karten);margin-top:40px}
@media (max-width:940px){.angebote{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.angebote{grid-template-columns:minmax(0,1fr)}}
.angebot{position:relative;display:flex;flex-direction:column;padding:34px 30px 30px;border-radius:var(--r-karte-l);
  background:var(--flaeche-karte);border:var(--b-1);color:var(--paper);
  transition:transform var(--t-normal),border-color var(--t-normal),box-shadow var(--t-normal)}
.angebot::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;border-radius:var(--r-karte-l) var(--r-karte-l) 0 0;
  background:var(--streifen-marke);opacity:0.45;transition:opacity var(--t-normal)}
.angebot:hover{transform:translateY(-4px);border-color:var(--violet-500);box-shadow:var(--shadow-karte);color:var(--paper)}
.angebot:hover::before{opacity:1}
.symbol{width:50px;height:50px;border-radius:13px;background:var(--azur-tint);color:var(--azur-400);display:grid;place-items:center}
.symbol svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.angebot h3{font-size:var(--fs-h3-karte);margin:22px 0 10px}
.angebot p{font-size:var(--fs-body-s)}
.angebot .fuss-zeile{margin-top:auto;padding-top:20px;display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.angebot .preis{font-family:var(--font-display);color:var(--messing-500);font-size:17px;letter-spacing:-0.01em}
.angebot .mehr{color:var(--violet-500);font-weight:700;font-size:var(--fs-ui)}
.angebot:hover .mehr{color:var(--violet-400)}
@media (max-width:600px){.angebot{padding:26px 22px 22px}.angebot h3{margin:16px 0 8px}}
/* Angebotskarten mit Filmschleife oben (seit 21.10.2026 abends) – ohne Skript oder bei „Bewegung reduzieren“ steht das Standbild */
.angebot.mit-film{padding-top:0;overflow:hidden}
.angebot.mit-film::before{z-index:2}
.angebot-film{position:relative;display:block;margin:0 -30px 24px;aspect-ratio:16/9;overflow:hidden;background:#0B0B0B;border-bottom:var(--b-1)}
.angebot-film .schleife{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.angebot.mit-film:hover .angebot-film .schleife{transform:scale(1.045)}
.angebot.mit-film h3{margin-top:0}
@media (max-width:600px){.angebot.mit-film{padding-top:0}.angebot-film{margin:0 -22px 18px}}

/* ----- Pakete ---------------------------------------------------------- */
.pakete{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-karten);margin-top:40px;align-items:stretch}
@media (max-width:999px){.pakete{grid-template-columns:minmax(0,1fr);max-width:520px}}
.paket{position:relative;display:flex;flex-direction:column;padding:32px 28px 28px;border-radius:var(--r-karte);
  background:var(--flaeche-karte);border:var(--b-1)}
.paket.beliebt{border-color:rgba(217,164,65,0.55)}
.etikett{position:absolute;top:-11px;right:22px;font:400 var(--fs-badge)/1 var(--font-display);letter-spacing:0.05em;
  padding:6px 10px;border-radius:var(--r-pille);background:var(--messing-500);color:var(--on-messing)}
.paket h3{font-size:var(--fs-h3-karte)}
.betrag{margin-top:12px;font-family:var(--font-display);font-size:var(--fs-preis);line-height:1;color:var(--messing-500);letter-spacing:-0.02em}
.betrag-zusatz{display:block;margin-top:8px;font-size:var(--fs-klein)}
.haken{list-style:none;padding:0;margin:20px 0 26px;display:grid;gap:9px;font-size:var(--fs-ui)}
.haken li{padding-left:24px;position:relative;line-height:1.55}
.haken li::before{content:"✓";position:absolute;left:0;font-weight:700;color:var(--violet-500)}
.paket .knopf{margin-top:auto}
.hinweis{margin-top:22px;padding:16px 20px;border-radius:var(--r-klein);background:var(--messing-tint);
  border-left:3px solid var(--messing-500);text-align:center}
.hinweis b{color:var(--messing-500)}
.mehr-link{display:inline-block;margin-top:22px;font-weight:700}

/* Logo-Kasten: eigenes Handwerk, Preis rechts in Messing */
.logo-block{position:relative;margin-top:40px;display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:28px 44px;
  padding:34px 34px 30px;border-radius:var(--r-block);background:var(--flaeche-karte);border:var(--b-1)}
.logo-block::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;border-radius:var(--r-block) var(--r-block) 0 0;background:var(--streifen-marke)}
.logo-block h3{font-size:22px;margin-bottom:10px}
.logo-block p{max-width:62ch}
.logo-block .haken{margin:18px 0 0;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 22px}
.logo-preis{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding-left:28px;border-left:var(--b-1)}
.logo-preis .betrag{margin-top:0}
.logo-preis picture{display:block;margin-top:auto;padding-top:18px}
.logo-preis img{display:block;width:200px;max-width:100%;height:auto;aspect-ratio:700/508}
@media (max-width:760px){
  .logo-block{grid-template-columns:minmax(0,1fr);padding:30px 22px 24px}
  .logo-block .haken{grid-template-columns:minmax(0,1fr)}
  .logo-preis{padding-left:0;padding-top:20px;border-left:0;border-top:var(--b-1);flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
  .logo-preis picture{flex-basis:100%;padding-top:10px}
  .logo-preis img{width:180px}
}

/* Einzeln dazu buchbar: aufklappbare Liste, immer nur ein Feld offen */
.einzeln-titel{margin-top:56px;font-size:var(--fs-h3)}
.preis-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;margin-top:20px;align-items:start}
@media (max-width:820px){.preis-liste{grid-template-columns:minmax(0,1fr)}}
.posten{border:var(--b-1);border-radius:var(--r-liste);background:var(--ink-800);transition:border-color var(--t-normal)}
.posten[open]{border-color:rgba(217,164,65,0.5)}
.posten summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 16px;
  padding:15px 18px;font-weight:700;font-size:var(--fs-ui)}
.posten summary::-webkit-details-marker{display:none}
.posten summary b{font-family:var(--font-display);font-weight:400;color:var(--messing-500);font-size:16px;white-space:nowrap;letter-spacing:-0.01em}
.posten summary b::after{content:"+";display:inline-block;width:1em;margin-left:12px;text-align:center;color:var(--violet-500)}
.posten[open] summary b::after{content:"–"}
.posten .inhalt{padding:0 18px 16px;font-size:var(--fs-body-s);line-height:1.7}
.posten .inhalt b{font-weight:700}
.notiz{margin-top:22px;font-size:var(--fs-klein);line-height:1.7}
.notiz+.notiz{margin-top:10px}

/* ----- Betreuung (Abos) ----------------------------------------------- */
.abos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-karten);margin-top:40px}
@media (max-width:900px){.abos{grid-template-columns:minmax(0,1fr);max-width:520px}}
.abo{position:relative;padding:30px 26px 26px;border-radius:var(--r-karte);background:var(--flaeche-karte);border:var(--b-1)}
.abo::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;border-radius:var(--r-karte) var(--r-karte) 0 0;background:var(--streifen-danach)}
.abo.empfohlen{border-color:rgba(167,139,250,0.55)}
.abo .betrag{font-size:var(--fs-preis-abo)}
.abo .haken{margin-bottom:0}
.whatsapp{margin-top:26px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;
  padding:18px 22px;border-radius:var(--r-karte);border:1px solid rgba(96,165,250,0.45);background:var(--azur-tint)}
.whatsapp .symbol{width:44px;height:44px;border-radius:12px}
.whatsapp p+p{margin-top:8px}
@media (max-width:600px){.whatsapp{grid-template-columns:minmax(0,1fr);gap:12px}}
.kopfzeile p+p{margin-top:12px}
.ohne-abo{margin-top:18px;padding:20px 22px;border-radius:var(--r-karte);border:var(--b-1);background:var(--ink-800)}
.ohne-abo-titel{margin:0;text-align:center;font-size:17px}
/* wie der Slogan: Messing-Strich – Lila heißt bei der Web Werkstube anklickbar */
.ohne-abo-titel b{text-decoration:underline;text-decoration-color:var(--messing-500);text-decoration-thickness:2px;text-underline-offset:7px}
.ohne-abo ul{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px var(--gap-karten);font-size:var(--fs-body-s)}
@media (max-width:900px){.ohne-abo ul{grid-template-columns:minmax(0,1fr)}}
.ohne-abo li b{font-weight:700}
.ohne-abo .preis{font-weight:700;color:var(--messing-500);white-space:nowrap}

/* ----- So gebaut ------------------------------------------------------- */
.gruende{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-karten);margin-top:40px}
@media (max-width:860px){.gruende{grid-template-columns:minmax(0,1fr)}}
.grund{padding:26px 24px;border-radius:var(--r-karte-s);background:var(--ink-800);border:var(--b-1)}
.grund h3{font-size:18px;margin:16px 0 8px}
.grund p{font-size:var(--fs-body-s)}
.recht-block{position:relative;margin-top:var(--gap-karten);padding:30px 32px;border-radius:var(--r-block);background:var(--flaeche-karte);border:var(--b-1)}
.recht-block::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;border-radius:var(--r-block) var(--r-block) 0 0;background:var(--streifen-recht)}
.recht-block h3{font-size:22px;margin-bottom:10px}
.recht-block h2{font-size:clamp(24px,3vw,32px);margin-bottom:14px}
@media (max-width:600px){.recht-block{padding:28px 20px 24px}}
.recht-block p{max-width:72ch}
.recht-block p+p{margin-top:10px}
.so-text{margin-top:22px}
.so-text+.so-text{margin-top:12px}

/* Rechtstexte: drei Wege nebeneinander */
.wege{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:860px){.wege{grid-template-columns:minmax(0,1fr)}}
.weg{position:relative;padding:22px 20px 20px;border-radius:var(--r-karte-s);background:var(--ink-800);border:var(--b-1)}
.weg.empfohlen{border-color:rgba(167,139,250,0.55)}
.weg .zahl{font-family:var(--font-display);font-size:26px;line-height:1;color:var(--azur-400)}
.weg h4{font-size:17px;margin:12px 0 6px;font-family:var(--font-sans);font-weight:700;letter-spacing:0}
.weg p{font-size:var(--fs-body-s)}
.recht-block p.offen{margin-top:22px;max-width:none}

/* ----- Ablauf ---------------------------------------------------------- */
/* Fünf Schritte nebeneinander nur, wo „Änderungswünsche“ in die Spalte passt; sonst untereinander,
   damit nie ein einzelner Schritt allein in einer Zeile steht. */
.schritte{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap-karten)}
.schritt{padding:22px 16px;border-radius:var(--r-karte-s);background:var(--ink-800);border:var(--b-1)}
@media (max-width:1059px){.schritte{grid-template-columns:minmax(0,1fr);gap:10px}
  .schritt{display:grid;grid-template-columns:58px minmax(0,1fr);gap:0 14px;align-items:start;padding:18px 20px}
  .schritt .zahl{grid-row:span 2}.schritt h3{margin:2px 0 4px}}
.schritt .zahl{font-family:var(--font-display);font-size:var(--fs-zahl);line-height:1;color:var(--azur-400)}
.schritt h3{font-size:17px;margin:14px 0 6px;font-family:var(--font-sans);font-weight:700;letter-spacing:0}
.schritt p{font-size:var(--fs-body-s)}

/* ----- Arbeiten (als Farbfläche, nie als Bildschirmfoto) ------------- */
.arbeiten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:40px}
@media (max-width:940px){.arbeiten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.arbeiten{grid-template-columns:minmax(0,1fr)}}
.arbeit{container-type:inline-size;display:block;color:var(--paper);background:var(--ink-800);border:var(--b-1);border-radius:var(--r-karte-s);overflow:hidden;
  transition:border-color var(--t-normal),transform var(--t-normal),box-shadow var(--t-normal)}
.arbeit:hover{border-color:var(--farbe,var(--violet-500));transform:translateY(-4px);color:var(--paper);
  box-shadow:0 0 0 1px var(--farbe,transparent),0 20px 50px color-mix(in srgb,var(--farbe,#A78BFA) 30%,transparent)}
.arbeit .flaeche::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,0.14) 50%,transparent 70%);
  transform:translateX(-110%);transition:transform .9s ease}
.arbeit:hover .flaeche::after{transform:translateX(110%)}
.arbeit .flaeche .name{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.arbeit:hover .flaeche .name{transform:scale(1.07)}
.arbeit .flaeche{position:relative;height:112px;display:grid;place-items:center;padding:0 12px;text-align:center;
  font-family:var(--font-display);font-size:15px;letter-spacing:-0.01em}
.arbeit .flaeche .name{white-space:nowrap;font-size:min(15px, calc(86cqi / var(--b, 10)))}
.arbeit .flaeche .etikett{top:10px;right:10px}
.arbeit .text{padding:16px 15px}
.arbeit .text>b{display:block;font-size:var(--fs-body-s);margin-bottom:3px}
.arbeit .text>span{font-size:13px}

/* ----- Über mich ------------------------------------------------------- */
.ueber{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:48px;align-items:start}
@media (max-width:760px){.ueber{grid-template-columns:minmax(0,1fr)}}
.ueber p{max-width:var(--breite-text);font-size:var(--fs-lead);line-height:1.75;margin-top:16px}
.ueber .knopf{margin-top:24px}
.portrait{position:relative;border-radius:var(--r-karte);overflow:hidden;border:var(--b-1);background:var(--ink-850);width:100%;max-width:270px;margin:0 auto}
.portrait img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;filter:grayscale(1)}
.portrait::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(167,139,250,0.22),transparent 38%,transparent 62%,rgba(11,11,11,0.55));z-index:1;pointer-events:none}

/* ----- Fragen ---------------------------------------------------------- */
.fragen{display:grid;gap:12px;margin-top:36px;max-width:860px}
.frage{border:var(--b-1);border-radius:var(--r-frage);background:var(--ink-800);transition:border-color var(--t-normal)}
.frage[open]{border-color:rgba(167,139,250,0.55)}
.frage summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:18px;align-items:center;
  padding:18px 22px;font-weight:700;font-size:16.5px}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{content:"+";font-family:var(--font-display);font-size:22px;line-height:1;color:var(--violet-500)}
.frage[open] summary::after{content:"–"}
.frage .antwort{padding:0 22px 20px;max-width:72ch;line-height:1.75}

/* ----- Kontakt --------------------------------------------------------- */
.kontakt{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:40px;margin-top:36px;align-items:start}
@media (max-width:860px){.kontakt{grid-template-columns:minmax(0,1fr)}}
.formular{display:grid;gap:16px;padding:28px;border-radius:var(--r-karte);background:var(--flaeche-karte);border:var(--b-1)}
.feld label{display:block;font-weight:600;font-size:var(--fs-ui);margin-bottom:7px}
.feld input,.feld textarea{width:100%;font:500 var(--fs-body)/1.5 var(--font-sans);color:var(--paper);background:var(--ink-900);
  border:1px solid var(--line-strong);border-radius:var(--r-feld);padding:12px 14px}
.feld textarea{min-height:140px;resize:vertical}
.feld .tipp{display:block;font-size:var(--fs-klein);margin:-3px 0 8px}
.feld input:focus-visible,.feld textarea:focus-visible{outline:2px solid var(--violet-500);outline-offset:-1px;border-color:transparent}
.einwilligung{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;font-size:var(--fs-klein);line-height:1.6}
.einwilligung input{width:19px;height:19px;margin:2px 0 0;accent-color:var(--violet-500)}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formular .knopf{justify-self:start}
.direkt{display:grid;gap:4px;padding:6px 0}
.direkt b{font-family:var(--font-display);font-weight:400;font-size:17px;margin-top:14px}
.direkt b:first-child{margin-top:0}

/* ----- Fuß ------------------------------------------------------------- */
.fuss{border-top:var(--b-1);padding:56px 0 40px;background:var(--ink-850)}
.fuss-raster{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,0.8fr) minmax(0,0.8fr) minmax(0,1.4fr);gap:32px}
@media (max-width:1100px){.fuss-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.fuss-raster{grid-template-columns:minmax(0,1fr)}}
.fuss h4{font-family:var(--font-sans);font-weight:700;font-size:var(--fs-klein);letter-spacing:0.06em;text-transform:uppercase;
  padding-bottom:8px;margin-bottom:12px;border-bottom:2px solid var(--azur-400);display:inline-block}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:var(--fs-ui)}
.fuss a{color:var(--paper)} .fuss a:hover{color:var(--violet-400)}
.fuss .anbieter{font-size:var(--fs-klein);line-height:1.7}
.fuss .wortmarke{font-size:24px}
.fuss .claim{margin-top:14px;font-size:var(--fs-ui);max-width:30ch}
.ki-satz{margin-top:34px;padding-top:20px;border-top:var(--b-1);font-size:var(--fs-klein)}

/* ===== Angebotsseiten (seit 21.10.2026) ================================ */
.zurueck{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:var(--r-knopf);border:1px solid var(--line-strong);
  color:var(--paper);font-weight:700;font-size:var(--fs-ui);transition:border-color var(--t-normal)}
.zurueck:hover{border-color:var(--violet-500);color:var(--violet-400)}
.unten-zurueck{padding:0 0 64px}
.seite-kopf{background:var(--flaeche-hero);padding:28px 0 64px;border-bottom:var(--b-1)}
.seite-kopf-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:40px 56px;align-items:center;margin-top:30px}
@media (max-width:900px){.seite-kopf-raster{grid-template-columns:minmax(0,1fr)}}
.seite-kopf h1{font-size:clamp(30px,4vw,44px)}
.seite-kopf .einleitung{margin-top:18px}
.seite-kopf .knoepfe{margin-top:26px}
.seite-kopf .fakten{margin-top:52px}
@media (max-width:700px){.seite-kopf{padding:18px 0 52px}}

.karten-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-karten);margin-top:36px}
.karten-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-karten);margin-top:36px}
.karten-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap-karten);margin-top:36px}
@media (max-width:940px){.karten-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* drei nebeneinander erst, wenn „Google-Unternehmensprofil“ in eine Karte passt */
@media (max-width:1039px){.karten-3{grid-template-columns:minmax(0,1fr)}.karten-3.sechs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.karten-3.sechs,.karten-2{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.karten-4{grid-template-columns:minmax(0,1fr)}}
.karte{position:relative;display:flex;flex-direction:column;padding:26px 24px;border-radius:var(--r-karte-s);background:var(--ink-800);border:var(--b-1)}
.karte h3{font-size:18px;margin:16px 0 8px}
.karte p{font-size:var(--fs-body-s)}
.karte .haken{margin:14px 0 0;font-size:var(--fs-body-s)}
/* Preis immer unten: in einer Reihe stehen alle Preise auf derselben Höhe (Robert, 21.10.2026) */
.karte .preis-zeile{margin-top:auto;padding-top:16px;font-family:var(--font-display);color:var(--messing-500);font-size:18px;letter-spacing:-0.01em}
.karte .preis-zeile small{display:block;margin-top:4px;font-family:var(--font-sans);font-weight:600;font-size:var(--fs-klein);color:var(--paper);letter-spacing:0}
.karte-gross{padding:30px 28px}

.mitbringen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap-karten);margin-top:var(--gap-karten)}
@media (max-width:860px){.mitbringen{grid-template-columns:minmax(0,1fr)}}
.mitbringen .karte .haken{margin-top:12px}

.preis-statt{display:block;margin-top:6px;font-size:var(--fs-klein);font-weight:600;text-decoration:line-through;text-decoration-color:var(--messing-500)}

.matrix-huelle{position:relative;overflow-x:auto;margin-top:36px;border:var(--b-1);border-radius:var(--r-karte);background:var(--ink-850)}
.matrix{width:100%;min-width:600px;border-collapse:collapse;font-size:var(--fs-ui)}
.matrix th,.matrix td{padding:13px 16px;text-align:center;border-bottom:var(--b-1)}
.matrix th:first-child,.matrix td:first-child{text-align:left;font-weight:600}
.matrix thead th{font-family:var(--font-display);font-weight:400;font-size:16px;background:var(--ink-800);letter-spacing:-0.01em}
.matrix thead th small{display:block;margin-top:4px;color:var(--messing-500);font-size:15px}
.matrix tbody tr:last-child td{border-bottom:0}
.matrix .ja{color:var(--violet-500);font-weight:700}

.teaser{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 32px;align-items:center;padding:30px 30px 28px;
  border-radius:var(--r-block);background:var(--flaeche-karte);border:var(--b-1)}
.teaser::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;border-radius:var(--r-block) var(--r-block) 0 0;background:var(--streifen-danach)}
.teaser h2{font-size:clamp(22px,2.6vw,28px);margin-bottom:8px}
@media (max-width:760px){.teaser{grid-template-columns:minmax(0,1fr);padding:28px 22px 24px}}

.cta{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:26px 44px;align-items:center;padding:40px 36px;
  border-radius:var(--r-block);background:var(--flaeche-karte);border:var(--b-1)}
.cta::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;border-radius:var(--r-block) var(--r-block) 0 0;background:var(--streifen-marke)}
.cta h2{margin-bottom:10px}
.cta p+p{margin-top:10px}
.cta .knoepfe{margin-top:22px}
.cta .direkt{padding:0}
@media (max-width:820px){.cta{grid-template-columns:minmax(0,1fr);padding:32px 22px 28px}}

/* ----- Schaubilder: nachgebaute Beispiele erfundener Betriebe, keine Bildschirmfotos ----- */
.schaubild{margin:0}
.schaubild figcaption{position:relative;z-index:1;margin-top:16px;font-size:var(--fs-klein);text-align:center}
.browser{border-radius:12px;overflow:hidden;border:1px solid var(--line-strong);background:#0B0B0B;box-shadow:var(--shadow-karte)}
.browser-leiste{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#161616;border-bottom:1px solid var(--line)}
.browser-leiste i{flex:none;width:9px;height:9px;border-radius:50%;background:var(--ink-500)}
.browser-leiste>span{margin-left:8px;flex:1;min-width:0;font-size:11.5px;font-weight:600;color:var(--paper);background:var(--ink-750);
  padding:4px 10px;border-radius:var(--r-pille);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* der erfundene Betrieb „Tischlerei Muster“ */
.muster{background:linear-gradient(160deg,#1E1E1E,#0B0B0B);color:#F5F5F5;font-size:12px;line-height:1.4}
.m-kopf{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(245,245,245,0.14)}
.m-kopf b{font-family:var(--font-display);font-weight:400;font-size:13px;letter-spacing:-0.01em}
.m-kopf>span{font-size:10.5px;font-weight:600}
.m-held{padding:24px 14px 18px}
.m-held strong{display:block;font-family:var(--font-display);font-weight:400;font-size:26px;line-height:1.08;letter-spacing:-0.02em}
.m-held>span{display:block;margin-top:8px;font-size:12px}
.m-held em{display:inline-block;margin-top:12px;padding:6px 12px;border-radius:7px;background:#C1121F;color:#FFFFFF;font-style:normal;font-weight:700;font-size:11px}
.m-kacheln{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0 14px 16px}
.m-kacheln>span{overflow:hidden;display:flex;align-items:flex-end;height:64px;padding:7px 8px;border-radius:7px;background:linear-gradient(160deg,#2C2C2C,#171717);border-bottom:2px solid #C1121F;font-weight:700;font-size:11px}
.geraete{position:relative;padding:0 36px 34px 0}
.geraete .handy{position:absolute;right:0;bottom:0;width:31%;border-radius:20px;border:4px solid #262626;background:#0B0B0B;overflow:hidden;box-shadow:0 14px 30px rgba(0,0,0,0.55)}
.handy .muster{font-size:10px}
.handy .m-kopf{padding:8px 10px}
.handy .m-kopf>span{display:none}
.handy .m-held{padding:14px 10px 10px}
.handy .m-held strong{font-size:16px}
.handy .m-held>span{font-size:10px}
.handy .m-held em{font-size:9.5px;padding:5px 8px}
.handy .m-kacheln{grid-template-columns:minmax(0,1fr);gap:6px;padding:0 10px 12px}
.handy .m-kacheln>span{height:30px;font-size:10px}
@media (max-width:600px){.geraete{padding:0 20px 24px 0}.geraete .handy{width:36%;border-width:3px;border-radius:16px}
  .browser .m-kopf>span{display:none}.browser .m-held strong{font-size:19px}.browser .m-held{padding:16px 12px 12px}
  .browser .m-kacheln>span{height:44px}
  .geraete .handy .m-kacheln{display:none}}

/* Vorher und nachher zum Schieben */
.vergleich{position:relative;--teil:50%;user-select:none;-webkit-user-select:none;aspect-ratio:16/11;overflow:hidden}
.vergleich>.muster{display:flex;flex-direction:column}
@media (max-width:600px){.vergleich{aspect-ratio:4/5}}
.vergleich .m-held{flex:1}
.m-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:10px 14px 34px;border-top:1px solid rgba(245,245,245,0.14);font-size:11px}
.m-fuss b{font-weight:700}
.m-fuss em{margin-left:auto;font-style:normal;font-weight:700;color:#F0555F}
.vergleich>.muster,.vergleich>.alt-seite{position:absolute;inset:0}
.vergleich>.alt-seite{clip-path:inset(0 calc(100% - var(--teil)) 0 0)}
.v-linie{position:absolute;top:0;bottom:0;left:var(--teil);width:2px;margin-left:-1px;background:#F5F5F5;pointer-events:none}
.v-griff{position:absolute;top:50%;left:var(--teil);width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;background:#A78BFA;
  box-shadow:0 6px 18px rgba(0,0,0,0.5);display:grid;place-items:center;pointer-events:none}
.v-griff svg{width:22px;height:22px;fill:none;stroke:#0B0B0B;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.vergleich input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:3}
.vergleich input:focus-visible+.v-griff{outline:3px solid #F5F5F5;outline-offset:3px}
.v-etikett{position:absolute;bottom:10px;z-index:2;padding:4px 10px;border-radius:var(--r-pille);font-size:11px;font-weight:700;
  background:rgba(11,11,11,0.85);color:#F5F5F5;pointer-events:none}
.v-etikett.links{left:10px}
.v-etikett.rechts{right:10px}
.alt-seite{background:#D6D3CE;color:#000000;font-family:"Times New Roman",Times,serif;font-size:13px;line-height:1.35;padding:10px 12px}
.a-titel{background:#000080;color:#FFFFFF;font-weight:bold;font-size:19px;padding:6px 8px;text-align:center}
.a-lauf{margin:8px 0;font-style:italic;color:#800000;text-align:center}
.alt-seite table{width:100%;border-collapse:collapse;background:#FFFFFF}
.alt-seite td{border:1px solid #808080;padding:6px 7px;vertical-align:top}
.alt-seite u{color:#0000EE}
.a-neu{background:#FFFF00;color:#CC0000;font-weight:bold;padding:0 3px}
.a-zaehler{font-family:"Courier New",monospace;background:#000000;color:#00FF00;padding:1px 4px}
.a-fuss{margin-top:8px;font-size:11px;text-align:center}

/* Einheitliches Auftreten: Visitenkarte, Signatur, Social Media, Handy */
.markenset{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.ms-zeichen{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:8px;background:#0B0B0B;color:#FFFFFF;border:2px solid #C1121F;
  font-family:var(--font-display);font-size:14px;letter-spacing:-0.02em}
.ms-visitenkarte{grid-column:span 4;aspect-ratio:85/55;display:flex;flex-direction:column;justify-content:space-between;padding:16px 18px;
  border-radius:10px;background:linear-gradient(160deg,#1E1E1E,#0B0B0B);color:#F5F5F5;border-bottom:4px solid #C1121F;box-shadow:var(--shadow-karte)}
.ms-visitenkarte .oben{display:flex;align-items:center;gap:10px}
.ms-visitenkarte b{font-family:var(--font-display);font-weight:400;font-size:16px;letter-spacing:-0.01em}
.ms-visitenkarte .unten{font-size:11.5px;line-height:1.5}
.ms-visitenkarte .unten strong{display:block;font-size:12.5px}
.ms-handy{grid-column:span 2;grid-row:span 2;border-radius:20px;border:4px solid #262626;overflow:hidden;
  background:radial-gradient(120% 80% at 50% 30%,#5E0E16,#0B0B0B);color:#F5F5F5;display:flex;flex-direction:column;align-items:center;
  padding:14px 8px;gap:10px;box-shadow:var(--shadow-karte)}
.ms-handy time{font-family:var(--font-display);font-size:24px;letter-spacing:-0.02em;margin-top:8px}
.ms-handy .ms-zeichen{width:46px;height:46px;font-size:18px;margin-top:auto;margin-bottom:auto}
.ms-handy small{font-size:10px;font-weight:600}
.ms-signatur{grid-column:span 4;padding:14px 16px;border-radius:10px;background:#FFFFFF;color:#111111;font-size:12px;line-height:1.5;
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:center}
.ms-signatur .gruss{grid-column:1/-1}
/* eigener Klassenname: „.wer“ ist das runde Chat-Zeichen bei den Fragen und machte die Signatur schief (Robert, 27.10.2026) */
.ms-signatur .ms-wer{border-left:2px solid #C1121F;padding-left:12px;line-height:1.45;color:#111111}
.ms-signatur .ms-wer b{display:block;font-size:13px}
.ms-signatur .ms-wer>span{display:block}
.ms-sozial{grid-column:span 6;position:relative;border-radius:10px;overflow:hidden;background:#141414;border:var(--b-1)}
.ms-sozial .banner{height:72px;background:linear-gradient(120deg,#C1121F,#7A0B14 55%,#141414);display:flex;align-items:center;justify-content:flex-end;
  padding:0 16px;font-family:var(--font-display);font-size:18px;color:#FFFFFF;letter-spacing:-0.02em}
.ms-sozial .profil{display:flex;align-items:center;gap:12px;padding:0 16px 12px;margin-top:-22px}
.ms-sozial .profil .ms-zeichen{width:52px;height:52px;border-radius:50%;font-size:18px;border:3px solid #141414}
.ms-sozial .profil b{margin-top:22px;font-size:13px}
@media (max-width:520px){.ms-visitenkarte,.ms-signatur{grid-column:span 6}.ms-handy{display:none}}

/* Betreuung: eine Änderung im Nachrichtenverlauf */
.chat{max-width:440px;margin:0 auto;border-radius:16px;border:1px solid var(--line-strong);background:#101010;overflow:hidden;box-shadow:var(--shadow-karte)}
.chat-kopf{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--ink-750);border-bottom:var(--b-1);font-weight:700;font-size:var(--fs-ui)}
.chat-kopf small{display:block;font-weight:500;font-size:12px}
.chat-kopf .wortmarke{font-size:13px}
.chat-verlauf{display:grid;gap:10px;padding:18px 14px 20px}
.nachricht{max-width:84%;padding:9px 12px 7px;border-radius:14px;font-size:14px;line-height:1.45}
.nachricht time{display:block;text-align:right;font-size:11px;margin-top:3px}
.nachricht.ein{justify-self:start;background:var(--ink-750);border:var(--b-1);border-bottom-left-radius:4px}
.nachricht.aus{justify-self:end;background:var(--azur-tint);border:1px solid rgba(96,165,250,0.45);border-bottom-right-radius:4px}
.sprache{display:flex;align-items:center;gap:9px}
.sprache svg{flex:none;width:22px;height:22px;fill:#F5F5F5}
.welle{display:flex;align-items:center;gap:2px;height:26px}
.welle i{display:block;width:3px;border-radius:2px;background:#F5F5F5}

/* Für Vereine: der erfundene „SV Musterdorf“ */
.verein-muster{background:linear-gradient(160deg,#16295a,#0a1430);color:#F4F6FB;font-size:12px;line-height:1.4;padding-bottom:16px}
.verein-muster .m-kopf{border-bottom-color:rgba(244,246,251,0.14)}
.vm-termin{margin:16px 14px 12px;padding:12px 14px;border-radius:9px;background:rgba(245,197,66,0.12);border:1px solid rgba(245,197,66,0.55)}
.vm-termin small{display:block;font-weight:700;font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:#F5C542}
.vm-termin strong{display:block;margin-top:4px;font-family:var(--font-display);font-weight:400;font-size:19px;letter-spacing:-0.01em}
.vm-reihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0 14px}
.vm-reihe>span{padding:22px 8px 8px;border-radius:7px;background:rgba(244,246,251,0.08);font-weight:700;font-size:11px}
.vm-sponsoren{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:14px 14px 12px}
.vm-sponsoren small{width:100%;font-weight:700;font-size:10px;letter-spacing:0.08em;text-transform:uppercase}
.vm-sponsoren>span{padding:5px 9px;border-radius:6px;background:#F4F6FB;color:#16295A;font-weight:700;font-size:10.5px}
.verein-muster em{display:inline-block;margin:0 14px;padding:6px 12px;border-radius:7px;background:#F5C542;color:#16295A;font-style:normal;font-weight:700;font-size:11px}

/* ===== Filme in der Seite (seit 21.10.2026): „So entsteht Ihre Homepage“ neben den fünf Schritten ===== */
.ablauf-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 48px;align-items:center;margin-top:40px}
@media (max-width:900px){.ablauf-raster{grid-template-columns:minmax(0,1fr)}}
.ablauf-raster .schritte{margin:0;grid-template-columns:minmax(0,1fr);gap:10px}
.ablauf-raster .schritt{display:grid;grid-template-columns:58px minmax(0,1fr);gap:0 14px;align-items:start;padding:16px 20px}
.ablauf-raster .schritt .zahl{grid-row:span 2}
.ablauf-raster .schritt h3{margin:2px 0 4px}
.film-block{margin:0;display:flex;flex-direction:column;gap:12px;min-width:0}
.film-rahmen{position:relative;margin:0;border-radius:var(--r-block);overflow:hidden;border:var(--b-1);background:#000;aspect-ratio:1/1;
  box-shadow:0 0 0 1px rgba(167,139,250,0.16),0 30px 80px rgba(0,0,0,0.55),0 0 100px rgba(167,139,250,0.14)}
.film-rahmen::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--streifen-marke);z-index:2}
.film{display:block;width:100%;height:100%;object-fit:cover;background:#000}
.film-knopf{position:absolute;left:50%;top:15%;transform:translate(-50%,-50%);z-index:3;display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;border-radius:var(--r-pille);border:0;background:#A78BFA;color:#0B0B0B;-webkit-text-fill-color:#0B0B0B;
  font-family:var(--font-sans);font-weight:700;font-size:15px;line-height:1;cursor:pointer;box-shadow:var(--shadow-accent)}
.film-knopf:hover{background:#B9A3FC}
.film-knopf svg{width:16px;height:16px;fill:#0B0B0B}
.film-leiste{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap}
.film-ton{display:inline-flex;align-items:center;gap:9px;font:600 var(--fs-klein)/1 var(--font-sans);color:var(--paper);cursor:pointer;
  padding:10px 16px 10px 13px;border-radius:var(--r-pille);border:1px solid rgba(255,255,255,0.22);background:rgba(255,255,255,0.04);
  transition:border-color var(--t-normal),color var(--t-normal)}
.film-ton:hover{border-color:var(--violet-500);color:var(--violet-400)}
.film-ton svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.film-dauer{font-size:var(--fs-klein);font-weight:600;color:var(--paper)}

/* ===== Feinschliff Startseite (21.10.2026 abends, Roberts Wünsche) ==================================
   Menü oben, 20-%-Gutschein, „Was Ihre Seite nicht tut“ im grünen Block, Über mich, Fragen als Chat, Kontakt.
   Hier stehen Form und Farbe; was sich bewegt, steht unten im Abschnitt „Bewegung“. */

/* Menü oben: eine Kapsel, darin eine Lichtlinse, die zum gerade gelesenen Abschnitt wandert */
.kopf-nav{position:relative;gap:2px;padding:5px;border-radius:var(--r-pille);border:1px solid rgba(255,255,255,0.09);
  background:linear-gradient(180deg,rgba(255,255,255,0.055),rgba(255,255,255,0.015));box-shadow:inset 0 1px 0 rgba(255,255,255,0.06)}
.kopf-nav a{position:relative;z-index:1;padding:7px 12px;border-radius:var(--r-pille);transition:color var(--t-normal)}
.kopf-nav a[aria-current]{color:#FFFFFF}
.nav-linse{position:absolute;z-index:0;top:5px;bottom:5px;left:0;width:0;border-radius:var(--r-pille);opacity:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(167,139,250,0.3),rgba(167,139,250,0.1));
  box-shadow:inset 0 0 0 1px rgba(167,139,250,0.55),0 6px 22px rgba(167,139,250,0.28);
  transition:transform .45s cubic-bezier(.2,.8,.2,1),width .45s cubic-bezier(.2,.8,.2,1),opacity .3s ease}
.nav-linse::after{content:"";position:absolute;left:50%;bottom:-6px;width:18px;height:2px;margin-left:-9px;border-radius:2px;
  background:var(--messing-500);box-shadow:0 0 10px rgba(217,164,65,0.9)}

/* 20 % Rabatt als Gutschein mit Abriss – so breit wie die drei Pakete darüber */
.gutschein{position:relative;display:grid;grid-template-columns:150px minmax(0,1fr);margin-top:26px;
  border-radius:var(--r-karte-s);border:1px solid rgba(217,164,65,0.5);color:var(--paper);overflow:hidden;isolation:isolate;
  background:linear-gradient(110deg,rgba(217,164,65,0.14),rgba(217,164,65,0.04) 55%,rgba(167,139,250,0.07));
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color var(--t-normal)}
.gutschein:hover{color:var(--paper);border-color:var(--messing-500);transform:translateY(-3px) rotate(-0.4deg);
  box-shadow:0 18px 40px rgba(0,0,0,0.45),0 0 44px rgba(217,164,65,0.2)}
.gutschein::before,.gutschein::after{content:"";position:absolute;left:150px;width:18px;height:18px;margin-left:-9px;border-radius:50%;
  background:var(--bg);border:1px solid rgba(217,164,65,0.5);z-index:2}
.gutschein::before{top:-10px}
.gutschein::after{bottom:-10px}
.gs-wert{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  padding:18px 12px;text-align:center;background:linear-gradient(155deg,#E8BC62,#C08A2A 70%,#A8761F);color:var(--on-messing)}
.gs-wert::after{content:"";position:absolute;top:12px;bottom:12px;right:-1px;border-right:2px dashed rgba(11,11,11,0.55)}
.gs-wert::before{content:"";position:absolute;top:-20%;bottom:-20%;left:-60%;width:40%;transform:skewX(-18deg);opacity:0;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,0.65),transparent)}
.gs-zahl{font:400 36px/1 var(--font-display);letter-spacing:-0.03em;color:var(--on-messing);white-space:nowrap}
.gs-klein{font-size:10.5px;font-weight:800;letter-spacing:0.09em;text-transform:uppercase;color:var(--on-messing)}
.gs-text{display:flex;align-items:center;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;padding:18px 26px 18px 30px;font-size:16px;line-height:1.55}
.gs-text b{color:var(--messing-500)}
.gs-mehr{display:inline-flex;align-items:center;gap:9px;font-weight:700;color:var(--violet-500);white-space:nowrap}
.gs-mehr::after{content:"";width:7px;height:7px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);
  transition:transform .25s ease}
.gutschein:hover .gs-mehr{color:var(--violet-400)}
.gutschein:hover .gs-mehr::after{transform:translateX(4px) rotate(45deg)}
@media (max-width:560px){
  .gutschein{grid-template-columns:108px minmax(0,1fr)}
  .gutschein::before,.gutschein::after{left:108px}
  .gs-zahl{font-size:27px}
  .gs-klein{font-size:9.5px}
  .gs-text{padding:14px 16px 14px 20px;font-size:15px}
}
@media (max-width:400px){
  .gutschein{grid-template-columns:92px minmax(0,1fr)}
  .gutschein::before,.gutschein::after{left:92px}
  .gs-zahl{font-size:23px}
  .gs-text{padding:12px 12px 12px 16px}
  .gs-mehr{white-space:normal}
}

/* „Was Ihre Seite nicht tut“: wieder im grünen Block, mit einem Blick ins Netzwerk */
.gruen-block{position:relative;padding:44px 40px 40px;border-radius:var(--r-block);border:1px solid rgba(74,222,128,0.32);
  background:radial-gradient(700px 300px at 85% 0%,rgba(74,222,128,0.12),transparent 70%),linear-gradient(165deg,#10231A,#0C1712 60%,#0B120E);
  box-shadow:0 30px 80px rgba(0,0,0,0.4),inset 0 1px 0 rgba(74,222,128,0.12)}
@media (max-width:600px){.gruen-block{padding:30px 18px 24px}}
.gruen-block .augenbraue{color:#4ADE80}
.netz{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;margin-top:34px;align-items:start}
@media (max-width:820px){.netz{grid-template-columns:minmax(0,1fr)}}
.netz-fenster{position:relative;margin:0;padding:0 0 12px;border-radius:14px;overflow:hidden;background:#0B0B0B;border:1px solid var(--line);
  box-shadow:0 20px 50px rgba(0,0,0,0.45)}
.netz-fenster.eigen{border-color:rgba(74,222,128,0.4)}
.netz-fenster figcaption{display:flex;justify-content:space-between;align-items:center;gap:8px 10px;flex-wrap:wrap;padding:12px 14px;
  border-bottom:1px solid var(--line);background:#141414;font-size:13.5px;font-weight:700;color:var(--paper)}
.netz-titel{color:var(--paper)}
.netz-zahl{display:inline-flex;align-items:baseline;gap:6px;padding:4px 10px;border-radius:var(--r-pille);font-size:12.5px;font-weight:700;white-space:nowrap}
.netz-zahl b{font:400 15px/1 var(--font-display)}
.fremd .netz-zahl{background:rgba(224,66,49,0.18);color:#FFC2B8}
.eigen .netz-zahl{background:rgba(74,222,128,0.15);color:#BBF7D0}
.netz-liste{list-style:none;margin:0;padding:10px 10px 0;display:grid;gap:6px}
.netz-liste li{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 10px;border-radius:8px;background:#161616}
.netz-liste .was{font-weight:700;font-size:12.5px;color:var(--paper);white-space:nowrap}
.netz-liste .wo{font:500 12.5px/1.3 ui-monospace,Menlo,monospace;color:var(--paper);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.netz-liste .land{font-size:11px;font-weight:700;padding:3px 8px;border-radius:var(--r-pille);white-space:nowrap}
.fremd .land{background:rgba(224,66,49,0.2);color:#FFC2B8}
@media (max-width:520px){ /* schmal: die Adresse bekommt eine eigene Zeile, statt abgeschnitten zu werden */
  .netz-liste li{grid-template-columns:minmax(0,1fr) auto;gap:4px 10px}
  .netz-liste .wo{grid-column:1/-1;grid-row:2;white-space:normal;overflow-wrap:anywhere}
}
.eigen .land{background:rgba(74,222,128,0.15);color:#BBF7D0}
.netz-banner{display:flex;align-items:center;justify-content:space-between;gap:8px 10px;flex-wrap:wrap;margin:12px 10px 0;padding:10px 12px;
  border-radius:10px;background:#F5F5F5;color:#111111;font-size:12.5px;box-shadow:0 -8px 24px rgba(0,0,0,0.45)}
.netz-banner b{font-weight:800;color:#111111}
.nb-knoepfe{display:flex;gap:6px}
.nb-knoepfe span{padding:5px 9px;border-radius:6px;font-weight:700;font-size:11.5px;background:#E2E2E2;color:#111111}
.nb-knoepfe span:last-child{background:#1D4ED8;color:#FFFFFF}
.netz-gut{display:flex;align-items:center;justify-content:center;gap:8px;margin:12px 10px 0;padding:10px 12px;border-radius:10px;
  background:rgba(74,222,128,0.12);border:1px solid rgba(74,222,128,0.4);color:#DCFCE7;font-weight:700;font-size:13.5px}
.netz-gut svg{width:18px;height:18px;flex:none;fill:none;stroke:#4ADE80;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.gruen-block .gruende{margin-top:18px}
.gruen-block .grund{background:rgba(0,0,0,0.26);border-color:rgba(74,222,128,0.22)}
.gruen-block .grund .symbol{background:rgba(74,222,128,0.12);color:#4ADE80}
.gruen-block .grund h3{font:800 13.5px/1.3 var(--font-sans);letter-spacing:0.07em;text-transform:uppercase;color:#4ADE80;margin:16px 0 6px}

/* Über mich: Foto im Messing-Rahmen mit vier Schrauben, darunter ein Namensschild */
.ueber{grid-template-columns:300px minmax(0,1fr);gap:56px;align-items:center}
@media (max-width:820px){.ueber{grid-template-columns:minmax(0,1fr);gap:36px}}
.werkbild{margin:0;width:100%;max-width:300px;justify-self:center}
.ueber-text{min-width:0}
.werkbild-rahmen{position:relative;padding:16px;border-radius:20px;
  background:linear-gradient(150deg,#F2CF7E,#D9A441 30%,#9C6E1E 62%,#E3B862);
  box-shadow:0 30px 70px rgba(0,0,0,0.55),inset 0 1px 0 rgba(255,255,255,0.45),inset 0 -2px 0 rgba(0,0,0,0.25);
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.werkbild-rahmen .portrait{max-width:none;border-radius:10px;border:0;box-shadow:0 0 0 1px rgba(0,0,0,0.45)}
.schraube{position:absolute;z-index:3;width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FFF1C9,#C9952F 45%,#6E4A12 100%);box-shadow:0 1px 2px rgba(0,0,0,0.6)}
.schraube::before,.schraube::after{content:"";position:absolute;left:2px;right:2px;top:50%;height:1.6px;margin-top:-0.8px;border-radius:1px;background:#4A300A}
.schraube::after{transform:rotate(90deg)}
.schraube:nth-of-type(1){left:2px;top:2px}
.schraube:nth-of-type(2){right:2px;top:2px}
.schraube:nth-of-type(3){left:2px;bottom:2px}
.schraube:nth-of-type(4){right:2px;bottom:2px}
.namensschild{position:relative;z-index:4;margin:-20px auto 0;width:max-content;max-width:94%;display:grid;justify-items:center;gap:3px;
  padding:10px 20px 11px;border-radius:10px;background:linear-gradient(180deg,#202020,#121212);border:1px solid rgba(217,164,65,0.6);
  box-shadow:0 14px 30px rgba(0,0,0,0.5);text-align:center}
.namensschild b{font:400 17px/1.15 var(--font-display);color:var(--messing-500);letter-spacing:-0.01em}
.namensschild span{font-size:12.5px;font-weight:600;letter-spacing:0.04em;color:var(--paper)}
.ueber .zitat{margin:22px 0 0;padding:4px 0 4px 24px;border-left:3px solid var(--messing-500)}
.ueber .zitat p{margin:0;max-width:none;font:400 clamp(20px,2.3vw,25px)/1.3 var(--font-display);letter-spacing:-0.015em;color:#FFFFFF}
.versprechen{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.versprechen li{display:inline-flex;align-items:center;gap:9px;padding:8px 15px 8px 9px;border-radius:var(--r-pille);
  background:var(--messing-tint);border:1px solid rgba(217,164,65,0.38);font-size:14px;font-weight:700;color:var(--paper)}
.versprechen li::before{content:"✓";display:grid;place-items:center;width:20px;height:20px;border-radius:50%;flex:none;
  background:var(--messing-500);color:var(--on-messing);font-size:11.5px;font-weight:900}

/* Fragen: links Einleitung und eine Karte für die Frage, die fehlt – rechts die Fragen als Chat */
.fragen-raster{display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1.3fr);gap:36px 56px;align-items:start}
@media (max-width:960px){.fragen-raster{grid-template-columns:minmax(0,1fr)}}
.fragen-seite{position:sticky;top:110px}
@media (max-width:960px){.fragen-seite{position:static}}
.fragen-karte{margin-top:28px;padding:22px 22px 20px;border-radius:var(--r-karte);background:var(--flaeche-karte);border:var(--b-1)}
.fragen-karte>b{display:block;font:400 18px/1.25 var(--font-display)}
.fragen-karte>p{margin-top:8px;font-size:var(--fs-body-s)}
.fragen-karte .knoepfe{margin-top:16px}
.fragen-raster .fragen{margin-top:0;max-width:none;gap:16px}
.fragen-raster .frage{border:0;border-radius:0;background:none}
.fragen-raster .frage summary{justify-content:flex-start;align-items:flex-end;gap:10px;padding:0;font-weight:700}
.fragen-raster .frage summary::after{content:none}
.frage summary .text{position:relative;flex:1;padding:14px 48px 14px 18px;border-radius:18px 18px 18px 6px;background:var(--ink-750);
  border:1px solid var(--line);font-size:16px;line-height:1.45;transition:border-color var(--t-normal),background var(--t-normal)}
.frage summary .text::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);font:400 22px/1 var(--font-display);color:var(--violet-500)}
.frage[open] summary .text::after{content:"–"}
.frage summary:hover .text{border-color:rgba(167,139,250,0.55)}
.frage[open] summary .text{border-color:rgba(167,139,250,0.55);background:#1C1A24}
.wer{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font:400 13px/1 var(--font-display);
  background:var(--azur-tint);color:var(--azur-400);border:1px solid rgba(96,165,250,0.4)}
.wer.ich{background:var(--violet-500);color:var(--on-violet);border:0;font-size:11.5px;letter-spacing:0.02em}
.fragen-raster .frage .antwort{display:flex;justify-content:flex-end;align-items:flex-end;gap:10px;padding:10px 0 2px 44px;max-width:none;line-height:1.7}
.frage .antwort .wer{order:2}
.frage .blase{position:relative;max-width:560px;padding:14px 18px;border-radius:18px 18px 6px 18px;
  background:linear-gradient(160deg,rgba(167,139,250,0.22),rgba(167,139,250,0.1));border:1px solid rgba(167,139,250,0.42)}
.frage .blase p{margin:0}
.tippt{display:none}
@media (max-width:520px){.fragen-raster .frage .antwort{padding-left:12px}.frage summary .text{font-size:15px}}

/* Kontakt: links die direkten Wege als Kacheln, rechts das Formular als Nachricht an Robert */
.kontakt{grid-template-columns:minmax(0,0.9fr) minmax(0,1.3fr)}
@media (max-width:860px){.kontakt{grid-template-columns:minmax(0,1fr)}}
.kontakt-seite{display:grid;gap:12px}
.kontakt-frage{font:400 22px/1.2 var(--font-display)}
.kontakt-seite>p{margin-bottom:6px}
.kontakt-weg{position:relative;display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:var(--r-karte);
  background:var(--flaeche-karte);border:var(--b-1);color:var(--paper);overflow:hidden;isolation:isolate;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color var(--t-normal),box-shadow .3s ease}
.kontakt-weg:hover{color:var(--paper);transform:translateY(-3px);border-color:var(--violet-500);
  box-shadow:0 16px 40px rgba(0,0,0,0.45),0 0 40px rgba(167,139,250,0.16)}
.kw-symbol{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--violet-tint);color:var(--violet-500)}
.kw-symbol svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.kw-symbol .klappe{transform-box:fill-box;transform-origin:50% 0;transition:transform .35s ease}
.kontakt-weg:hover .klappe{transform:scaleY(-1)}
.kw-text{display:grid;gap:3px;min-width:0}
.kw-text small{font-size:12px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--paper)}
.kw-text b{font:400 clamp(16px,1.9vw,20px)/1.2 var(--font-display);color:var(--violet-500);overflow-wrap:anywhere}
.kontakt-weg:hover .kw-text b{color:var(--violet-400)}
.wo-karte{display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:var(--r-karte);border:1px dashed rgba(217,164,65,0.5);background:var(--messing-tint)}
.wo-karte b{display:block;font:400 17px/1.25 var(--font-display)}
.wo-karte p{font-size:var(--fs-body-s);margin-top:2px}
.pin{position:relative;flex:none;width:48px;height:48px;display:grid;place-items:center}
.pin i{position:relative;z-index:1;width:16px;height:16px;border-radius:50%;background:var(--messing-500);box-shadow:0 0 0 5px rgba(217,164,65,0.25)}
.pin::before,.pin::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;
  border:2px solid rgba(217,164,65,0.6);opacity:0}
.formular{position:relative}
.formular::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;
  background:conic-gradient(from var(--winkel),transparent 0 64%,#D9A441 74%,#F6DB9A 78%,#A78BFA 85%,transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.formular:focus-within{box-shadow:0 0 0 1px rgba(167,139,250,0.35),0 30px 80px rgba(0,0,0,0.5),0 0 80px rgba(167,139,250,0.14)}
.formular-kopf{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.formular-kopf .wer{width:42px;height:42px;font-size:13px}
.formular-kopf b{display:block;font:400 18px/1.2 var(--font-display)}
.formular-kopf div span{display:block;margin-top:3px;font-size:13px;font-weight:600;color:var(--paper)}
.knopf.senden{display:inline-flex;align-items:center;gap:10px}
.knopf.senden svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.knopf.senden:hover svg{transform:translate(4px,-4px) rotate(8deg)}

/* ===== Zweite Runde Feinschliff (21.10.2026 spät, Roberts Liste mit Bildschirmfotos) ================== */

/* Farbstriche oben auf den Karten: enden dort, wo die runden Ecken beginnen – nie mehr über die Ecken hinaus */
.angebot::before{left:18px;right:18px;border-radius:3px}
.abo::before{left:16px;right:16px;border-radius:3px}
.logo-block::before,.recht-block::before,.teaser::before,.cta::before,.film-rahmen::before{left:20px;right:20px;border-radius:3px}
.angebot::before,.abo::before,.logo-block::before,.recht-block::before,.teaser::before,.cta::before,.film-rahmen::before{
  -webkit-mask:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent);
  mask:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent)}

/* Logo-Film oben: kein harter Rahmen mehr – er geht weich in den Sternenhimmel über und leuchtet ein wenig */
.buehne-rahmen{border:0;background:none;box-shadow:none;border-radius:0;overflow:visible;isolation:isolate}
.buehne-rahmen::before{inset:4% 8%;height:auto;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(167,139,250,0.3),rgba(217,164,65,0.08) 62%,transparent);filter:blur(34px)}
.buehne-rahmen::after{display:none}
.buehne .buehne-rahmen{box-shadow:none}
.buehne-film{-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);
  mask-composite:intersect}
@media (max-width:700px){.buehne-film{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent)}}
.buehne-knopf{left:6%;bottom:9%}
@media (max-width:700px){.buehne-knopf{left:5%;bottom:6%}}

/* Kopfbereich: Farbnebel hinter allem, Funkeln um die Überschrift, die zweite Zeile in glänzendem Messing */
.aurora{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.aurora i{position:absolute;width:640px;height:640px;border-radius:50%;filter:blur(110px);opacity:0.3}
.aurora i:nth-child(1){left:-14%;top:40%;background:#7C5CF2}
.aurora i:nth-child(2){right:-16%;top:34%;background:#D9A441;opacity:0.17}
.aurora i:nth-child(3){left:30%;top:72%;background:#3B82F6;opacity:0.15}
.buehne-text>div:first-child{position:relative}
.funkeln{position:absolute;inset:0;pointer-events:none}
.funkeln i{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  opacity:0;filter:drop-shadow(0 0 7px rgba(255,214,130,0.9))}
.funkeln i::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#FFF6DD,#F2C46B 55%,#D9A441);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.funkeln i:nth-child(3n)::before{background:linear-gradient(135deg,#FFFFFF,#C4B5FD)}
.kicker{position:relative;overflow:hidden}
.kicker::before{content:"";display:inline-block;width:11px;height:11px;margin:0 9px 0 0;vertical-align:-1px;background:currentColor;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.kicker::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;opacity:0;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,236,190,0.4),transparent);transform:skewX(-18deg)}

/* Die Zahlenreihe als Glaskarten mit Symbol (Startseite und Angebotsseiten) */
.fakten{gap:14px;margin-top:44px;padding-top:0;border-top:0}
.fakt{padding:22px 14px 20px;border-radius:var(--r-karte);overflow:hidden;isolation:isolate;
  background:linear-gradient(160deg,rgba(255,255,255,0.07),rgba(255,255,255,0.015));border:1px solid rgba(255,255,255,0.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.08),0 20px 50px rgba(0,0,0,0.35);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color var(--t-normal),box-shadow .35s ease}
.fakt:hover{transform:translateY(-4px);border-color:rgba(217,164,65,0.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 24px 60px rgba(0,0,0,0.45),0 0 40px rgba(217,164,65,0.16)}
.fakt::before{left:50%;top:-52px;width:170px;height:104px;margin-left:-85px;transform:none;border-radius:50%;opacity:1;z-index:-1;
  background:radial-gradient(closest-side,rgba(217,164,65,0.26),transparent)}
.fakt::after{content:"";position:absolute;right:12px;top:12px;width:11px;height:11px;opacity:0;background:#F6D58A;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
@media (max-width:420px){.fakt{padding:18px 8px 16px}.fakt b{font-size:17px}}
.fakt-symbol{display:grid;place-items:center;width:42px;height:42px;margin:0 auto 12px;border-radius:12px;
  background:var(--messing-tint);color:var(--messing-500);border:1px solid rgba(217,164,65,0.3)}
.fakt-symbol svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* „Für wen“: von selbst leuchten einzelne Blasen in den Markenfarben auf; darüberfahren macht sie blau */
.blase.leuchtet{color:#FFFFFF;border-color:color-mix(in srgb,var(--leucht,#A78BFA) 70%,transparent);
  background-color:color-mix(in srgb,var(--leucht,#A78BFA) 18%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.12),0 0 26px color-mix(in srgb,var(--leucht,#A78BFA) 45%,transparent)}
.blase.welle{border-color:color-mix(in srgb,var(--welle,#A78BFA) 85%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.12),0 0 24px color-mix(in srgb,var(--welle,#A78BFA) 55%,transparent)}
.blase:hover,.blase:focus-visible,.blase.beruehrt{color:var(--azur-400);border-color:rgba(96,165,250,0.7);
  box-shadow:var(--shadow-pille-hover);background-color:rgba(96,165,250,0.12)}

/* Eigenes Handwerk: Text links, rechts der Film „So entsteht ein Logo“ */
.logo-block{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:34px 46px;align-items:center;padding:40px 40px 36px;isolation:isolate;overflow:hidden}
.logo-block::after{content:"";position:absolute;right:-140px;top:-140px;width:460px;height:460px;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(167,139,250,0.16),transparent)}
@media (max-width:900px){.logo-block{grid-template-columns:minmax(0,1fr);padding:30px 22px 26px}}
.logo-block h3{font-size:clamp(24px,2.6vw,30px);margin-bottom:12px}
.logo-text{min-width:0}
.logo-punkte{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.logo-punkte li{display:flex;align-items:center;gap:12px;font-size:var(--fs-ui);font-weight:600}
.lp-text{min-width:0}
.logo-punkte .lp-sym{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--azur-tint);color:var(--azur-400)}
.logo-punkte svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.logo-preis{flex-direction:row;align-items:center;gap:18px;margin-top:26px;padding:16px 22px;border-left:0;border-radius:var(--r-karte-s);
  background:linear-gradient(120deg,rgba(217,164,65,0.14),rgba(217,164,65,0.04));border:1px solid rgba(217,164,65,0.4);width:max-content;max-width:100%}
.logo-preis .betrag{margin:0;font-size:46px}
.logo-preis .betrag-zusatz{margin-top:2px}
.logo-preis .betrag-zusatz:first-child{margin-top:0;font-weight:700}
.logo-film{margin:0;display:grid;gap:10px}
.logo-film video{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-karte);background:#0B0B0B;
  border:1px solid rgba(255,255,255,0.08);box-shadow:0 30px 70px rgba(0,0,0,0.55),0 0 80px rgba(167,139,250,0.14)}
.logo-film figcaption{text-align:center;font-size:var(--fs-klein);font-weight:600}

/* Betreuung: WhatsApp-Chat neben drei klaren Punkten, „Lieber ohne Abo?“ als drei Preiskacheln */
.service{display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);gap:28px 40px;align-items:center;margin-top:30px;padding:30px;
  border-radius:var(--r-block);border:1px solid rgba(96,165,250,0.3);
  background:radial-gradient(520px 300px at 10% 0%,rgba(96,165,250,0.14),transparent 70%),linear-gradient(160deg,var(--ink-800),var(--ink-850))}
@media (max-width:900px){.service{grid-template-columns:minmax(0,1fr);padding:22px 18px}}
.service-chat{width:100%;max-width:360px;justify-self:center;border-radius:22px;background:#0E1218;border:1px solid rgba(255,255,255,0.1);overflow:hidden;
  box-shadow:0 26px 60px rgba(0,0,0,0.5),0 0 60px rgba(96,165,250,0.12)}
.sc-kopf{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#141A22;border-bottom:1px solid rgba(255,255,255,0.08)}
.sc-kopf b{display:block;font-size:14.5px}
.sc-kopf small{display:block;font-size:12px;font-weight:600;color:var(--paper)}
.sc-verlauf{position:relative;display:flex;flex-direction:column;gap:10px;padding:16px 14px 18px;min-height:236px;
  background:radial-gradient(circle at 20% 10%,rgba(96,165,250,0.08),transparent 60%)}
.sc-blase{position:relative;max-width:84%;padding:10px 13px;border-radius:16px;font-size:14px;line-height:1.45;color:#FFFFFF}
.sc-ein{align-self:flex-start;background:#1F2630;border-bottom-left-radius:5px}
.sc-aus{align-self:flex-end;background:rgba(96,165,250,0.2);border:1px solid rgba(96,165,250,0.5);border-bottom-right-radius:5px}
.sc-sprache{display:flex;align-items:center;gap:9px}
.sc-sprache svg{width:16px;height:16px;fill:#FFFFFF;flex:none}
.sc-welle{display:flex;align-items:center;gap:3px;height:22px}
.sc-welle i{display:block;width:3px;height:45%;border-radius:2px;background:#FFFFFF}
.sc-welle i:nth-child(3n){height:85%}
.sc-welle i:nth-child(3n+1){height:58%}
.sc-welle i:nth-child(4n){height:100%}
.sc-welle i:nth-child(5n){height:30%}
.sc-sprache small{font-size:12px;font-weight:600}
.sc-antwort{padding-right:44px}
.sc-antwort svg{position:absolute;right:10px;bottom:8px;width:24px;height:13px;fill:none;stroke:#60A5FA;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.sc-tippt{display:none}
.service-punkte{display:grid;gap:12px}
.sp{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:center;padding:16px 18px;border-radius:var(--r-karte-s);
  background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08)}
.sp b{display:block;font-size:16.5px;line-height:1.35}
.sp p{margin-top:4px;font-size:var(--fs-body-s)}
.sp-symbol{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--azur-tint);color:var(--azur-400)}
.sp-symbol svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sp-zahl{font:400 16px/1 var(--font-display);letter-spacing:-0.02em}
@media (max-width:420px){.sp-geschenk{grid-template-columns:minmax(0,1fr) !important}.sp-band{justify-self:start}}
.sp-geschenk{grid-template-columns:auto minmax(0,1fr);border-color:rgba(217,164,65,0.42);background:linear-gradient(120deg,rgba(217,164,65,0.13),rgba(217,164,65,0.03))}
.sp-band{width:86px;padding:10px 8px;border-radius:10px;text-align:center;background:linear-gradient(155deg,#EEC66E,#C08A2A 70%,#A8761F);
  color:var(--on-messing);font:400 14px/1.15 var(--font-display);box-shadow:0 10px 24px rgba(0,0,0,0.35);transform:rotate(-4deg)}
.ohne-abo{padding:26px 26px 24px;border-radius:var(--r-block);background:var(--flaeche-karte)}
.ohne-abo .oa-liste{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;font-size:var(--fs-body)}
@media (max-width:860px){.ohne-abo .oa-liste{grid-template-columns:minmax(0,1fr)}}
.oa-karte{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"sym name preis" "sym text text";
  gap:4px 14px;align-items:center;padding:18px;border-radius:var(--r-karte-s);background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.09);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color var(--t-normal),box-shadow .3s ease}
.oa-karte:hover{transform:translateY(-3px);border-color:rgba(217,164,65,0.5);box-shadow:0 18px 40px rgba(0,0,0,0.4)}
.oa-symbol{grid-area:sym;align-self:start;display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:var(--messing-tint);color:var(--messing-500)}
.oa-symbol svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.oa-name{grid-area:name;font-weight:700;font-size:16px}
.oa-preis{grid-area:preis;text-align:right;white-space:nowrap}
.oa-preis .preis{font:400 26px/1 var(--font-display);letter-spacing:-0.02em}
.oa-preis small{display:block;margin-top:3px;font-size:12px;font-weight:600;color:var(--paper)}
.oa-text{grid-area:text;font-size:var(--fs-klein);line-height:1.5}

/* Ehrlich gesagt: Text neben einem kleinen Film, die drei Wege mit Symbol */
.recht-block{overflow:hidden;isolation:isolate}
.recht-block::after{content:"";position:absolute;left:-160px;bottom:-200px;width:480px;height:480px;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(96,165,250,0.12),transparent)}
.recht-kopf{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:26px 40px;align-items:center}
@media (max-width:900px){.recht-kopf{grid-template-columns:minmax(0,1fr)}}
.recht-film{margin:0;width:100%;max-width:400px;justify-self:end}
@media (max-width:900px){.recht-film{justify-self:center}}
.recht-film video{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-karte);background:#0B0B0B;
  border:1px solid rgba(255,255,255,0.08);box-shadow:0 30px 70px rgba(0,0,0,0.5),0 0 70px rgba(96,165,250,0.14)}
.weg{transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color var(--t-normal),box-shadow .35s ease}
.weg:hover{transform:translateY(-4px);box-shadow:0 20px 50px rgba(0,0,0,0.45)}
.weg-symbol{position:absolute;right:18px;top:20px;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--azur-tint);color:var(--azur-400)}
.weg.empfohlen .weg-symbol{background:var(--messing-tint);color:var(--messing-500)}
.weg-symbol svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* Über mich: kein Rahmen – das Foto schwebt vor einem weichen Farbschein, der Name steht auf einem Glasschild */
.werkbild{position:relative;isolation:isolate}
.werkbild-rahmen{padding:0;background:none;box-shadow:none;border-radius:28px}
.werkbild-rahmen .portrait{border-radius:28px;box-shadow:0 30px 80px rgba(0,0,0,0.6),0 0 0 1px rgba(255,255,255,0.08)}
.schein{position:absolute;inset:-12% 0;z-index:-1;pointer-events:none}
.schein i{position:absolute;width:72%;height:72%;border-radius:50%;filter:blur(54px);opacity:0.55}
.schein i:nth-child(1){left:0;top:0;background:#7C5CF2}
.schein i:nth-child(2){right:0;bottom:4%;background:#D9A441;opacity:0.4}
.namensschild{position:absolute;left:-20px;bottom:-24px;margin:0;justify-items:start;text-align:left;padding:12px 18px 13px;border-radius:14px;
  background:rgba(16,16,16,0.74);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,0.16);
  box-shadow:0 18px 40px rgba(0,0,0,0.5)}
.namensschild b{color:#FFFFFF}
.namensschild span{color:var(--messing-500)}
@media (max-width:820px){.werkbild{margin-bottom:24px}.namensschild{left:0;right:0;margin:0 auto;width:max-content;justify-items:center;text-align:center}}

/* Wortmarke: Buchstaben in eigenem Element (damit sie hinter den Kacheln hervorkommen) */
.wortmarke em{font-style:normal;display:inline-block}
.wortmarke>span{perspective:300px}
.wortmarke i{position:relative;overflow:hidden;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.wortmarke i::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-70%;width:50%;opacity:0;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,0.8),transparent);transform:skewX(-18deg)}
.wortmarke:hover i{transform:rotateY(360deg)}
.wortmarke:hover .werk i{transition-delay:.08s}

/* ===== Dritte Runde (27.10.2026, Roberts Liste) ======================================================== */

/* Kicker mit Stern: größer */
.buehne .kicker{font-size:15px;padding:9px 20px 9px 16px;margin-bottom:22px;border:1px solid rgba(217,164,65,0.35)}
.buehne .kicker::before{width:14px;height:14px;margin-right:10px;vertical-align:-2px}
@media (max-width:420px){.buehne .kicker{font-size:13.5px;padding:8px 14px 8px 12px}}

/* Rechte Spalte im Kopfbereich: Glastafel mit umlaufendem Messing-Glanz, der Preissatz wird wie mit dem Marker hervorgehoben */
.buehne-text>div:last-child{position:relative;padding:28px 30px 30px;border-radius:22px;isolation:isolate;
  background:linear-gradient(160deg,rgba(255,255,255,0.075),rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 30px 80px rgba(0,0,0,0.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.buehne-text>div:last-child::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;
  background:conic-gradient(from var(--winkel),transparent 0 64%,#D9A441 74%,#F6DB9A 78%,#A78BFA 85%,transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
@media (max-width:600px){.buehne-text>div:last-child{padding:22px 20px 24px}}
.buehne .einleitung{font-size:19px;line-height:1.6}
.buehne .einleitung b{color:#F2C46B;padding-bottom:3px;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  background:linear-gradient(90deg,#D9A441,#F6D58A) no-repeat 0 100%/100% 2px}

/* Die Zahlen unter der Überschrift als eine durchgehende Leistungsleiste */
.fakten.leiste{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:46px;position:relative;border-radius:22px;overflow:hidden;isolation:isolate;
  background:linear-gradient(160deg,rgba(255,255,255,0.075),rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 30px 80px rgba(0,0,0,0.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.fakten.leiste::before{content:"";position:absolute;top:0;bottom:0;left:-30%;width:22%;pointer-events:none;z-index:2;opacity:0;
  background:linear-gradient(100deg,transparent,rgba(255,236,190,0.13),transparent);transform:skewX(-18deg)}
.leiste .fakt{padding:26px 24px 24px;text-align:left;border:0;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.leiste .fakt+.fakt{border-left:1px solid transparent;border-image:linear-gradient(180deg,transparent,rgba(217,164,65,0.6),transparent) 1}
.leiste .fakt:hover{transform:none;box-shadow:none;background:linear-gradient(180deg,rgba(217,164,65,0.09),transparent 80%)}
.leiste .fakt::before{display:none}
.fakt-marke{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;letter-spacing:0.14em;text-transform:uppercase;color:var(--paper)}
.fakt-marke svg{width:17px;height:17px;flex:none;fill:none;stroke:var(--messing-500);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.leiste .fakt b{margin-top:12px;font-size:clamp(22px,2.3vw,30px);line-height:1.08;
  background:linear-gradient(180deg,#F6D58A,#D9A441 55%,#B98422);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.leiste .fakt b small{font-size:0.5em;letter-spacing:0}
.leiste .fakt>span:not(.fakt-marke){display:block;margin-top:8px;font-size:13.5px;line-height:1.5}
/* Seit 27.10.2026: drei Kästchen oben, die Region quer darunter (Roberts Idee) – so werden die Kästchen nicht so hoch */
.leiste .fakt:last-child{grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;gap:6px 18px;padding:16px 24px 17px;
  border-left:0;border-image:none;border-top:1px solid rgba(217,164,65,0.3);background:linear-gradient(90deg,rgba(217,164,65,0.08),transparent 75%)}
.leiste .fakt:last-child b{margin-top:0;font-size:clamp(18px,1.8vw,22px)}
.leiste .fakt:last-child>span:not(.fakt-marke){margin-top:0;font-size:14px;flex:1 1 230px}
@media (max-width:860px){.leiste .fakt{padding:22px 18px 20px}}
@media (max-width:600px){.fakten.leiste{grid-template-columns:minmax(0,1fr)}
  .leiste .fakt+.fakt{border-left:0;border-image:none;border-top:1px solid rgba(217,164,65,0.3)}
  .leiste .fakt{padding:20px 20px 18px}
  .leiste .fakt:last-child{display:block}
  .leiste .fakt:last-child b{margin-top:10px}
  .leiste .fakt:last-child>span:not(.fakt-marke){margin-top:6px}}

/* Gutschein: kippt beim Darüberfahren zum Zeiger, hebt sich, ein Glanz läuft darüber */
.gutschein{transform:perspective(900px) rotateX(var(--grx,0deg)) rotateY(var(--gry,0deg)) translateY(var(--gy,0px)) scale(var(--gs,1));
  transition:transform .25s ease,box-shadow .35s ease,border-color var(--t-normal)}
.gutschein:hover{--gy:-6px;--gs:1.015;transform:perspective(900px) rotateX(var(--grx,0deg)) rotateY(var(--gry,0deg)) translateY(var(--gy)) scale(var(--gs));
  box-shadow:0 26px 60px rgba(0,0,0,0.5),0 0 60px rgba(217,164,65,0.28)}
.gs-glanz{position:absolute;top:-10%;bottom:-10%;left:-30%;width:22%;z-index:3;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,0.35),transparent);transform:skewX(-18deg)}
.gutschein:hover .gs-glanz{opacity:1;animation:gsdrueber .9s ease forwards}
@keyframes gsdrueber{from{transform:skewX(-18deg) translateX(0)}to{transform:skewX(-18deg) translateX(700%)}}
.gs-wert{transition:transform .35s cubic-bezier(.2,1.6,.4,1)}
.gutschein:hover .gs-wert{transform:scale(1.05)}

/* Einzeln dazu buchbar: Bausteine als Kacheln mit Themen-Filter */
.bausteine{margin-top:60px}
.bs-kopf-zeile{display:flex;justify-content:space-between;align-items:flex-end;gap:10px 30px;flex-wrap:wrap}
.bs-kopf-zeile .einzeln-titel{margin:0}
.bs-kopf-zeile p{max-width:52ch;font-size:var(--fs-body-s)}
.bs-filter{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.bs-chip{font:700 13.5px/1 var(--font-sans);color:var(--paper);background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.14);
  border-radius:var(--r-pille);padding:9px 12px 9px 15px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  transition:background var(--t-normal),border-color var(--t-normal),color var(--t-normal)}
.bs-chip small{font-size:11.5px;font-weight:700;padding:3px 7px;border-radius:999px;background:rgba(255,255,255,0.1)}
.bs-chip:hover{border-color:var(--violet-500);color:var(--violet-400)}
.bs-chip[aria-pressed="true"]{background:var(--violet-500);border-color:var(--violet-500);color:var(--on-violet)}
.bs-chip[aria-pressed="true"] small{background:rgba(11,11,11,0.16)}
.bs-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px;align-items:start}
@media (max-width:980px){.bs-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.bs-raster{grid-template-columns:minmax(0,1fr)}}
.baustein{position:relative;border-radius:var(--r-karte-s);background:var(--flaeche-karte);border:var(--b-1);
  transition:border-color var(--t-normal),box-shadow .3s ease,transform .3s cubic-bezier(.2,.8,.2,1)}
.baustein:hover{border-color:rgba(217,164,65,0.5);transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,0.4)}
.baustein[open]{border-color:rgba(217,164,65,0.6);box-shadow:0 20px 50px rgba(0,0,0,0.45),0 0 40px rgba(217,164,65,0.12)}
.baustein summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:44px minmax(0,1fr) auto;
  grid-template-areas:"sym . preis" "name name name" "kurz kurz kurz" "mehr mehr mehr";gap:4px 14px;align-items:center;padding:18px 18px 16px}
.baustein summary::-webkit-details-marker{display:none}
.baustein summary::after{content:"Details ansehen +";grid-area:mehr;font-size:12.5px;font-weight:700;color:var(--violet-500);margin-top:6px}
.baustein[open] summary::after{content:"Schließen –"}
.baustein summary:hover::after{color:var(--violet-400)}
.bs-sym{grid-area:sym;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--messing-tint);color:var(--messing-500);
  border:1px solid rgba(217,164,65,0.3);transition:transform .45s cubic-bezier(.2,1.4,.4,1)}
.bs-sym svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.baustein:hover .bs-sym{transform:rotate(-8deg) scale(1.08)}
.bs-text{display:contents}
.bs-name{grid-area:name;margin-top:10px;font-weight:700;font-size:15.5px;line-height:1.3}
.bs-kurz{grid-area:kurz;font-size:13.5px;line-height:1.5}
.bs-preis{grid-area:preis;font:400 18px/1.2 var(--font-display);color:var(--messing-500);white-space:nowrap;text-align:right;letter-spacing:-0.01em}
.baustein .inhalt{padding:0 18px 18px;font-size:var(--fs-body-s);line-height:1.7}
.baustein .inhalt b{font-weight:700}
.notiz-kasten{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start;margin-top:22px;padding:18px 20px;
  border-radius:var(--r-karte-s);background:var(--azur-tint);border:1px solid rgba(96,165,250,0.3)}
.nk-sym{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:rgba(96,165,250,0.16);color:var(--azur-400)}
.nk-sym svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.notiz-kasten .notiz{margin:0;font-size:var(--fs-body-s)}

/* Fußzeile: Marke und Kontakt oben, drei Spalten, unten KI-Satz und „Nach oben“ */
.fuss{position:relative;overflow:hidden;isolation:isolate;padding:64px 0 34px;border-top:0;
  background:radial-gradient(700px 300px at 85% 0%,rgba(167,139,250,0.12),transparent 70%),radial-gradient(600px 300px at 0% 100%,rgba(217,164,65,0.08),transparent 70%),var(--ink-850)}
.fuss::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--violet-500) 20%,var(--messing-500) 80%,transparent)}
.fuss-kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 40px;flex-wrap:wrap;padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,0.08)}
.fuss-marke .wortmarke{font-size:30px}
.fuss-kontakt{display:flex;flex-wrap:wrap;gap:12px}
.fk{display:inline-flex;align-items:center;gap:12px;padding:12px 18px 12px 14px;border-radius:14px;background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.12);color:var(--paper);transition:border-color var(--t-normal),transform .25s ease,box-shadow .25s ease}
.fk:hover{color:var(--paper);border-color:var(--violet-500);transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,0.4)}
.fk svg{width:22px;height:22px;flex:none;fill:none;stroke:var(--violet-500);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fk span{display:grid;gap:3px;font-weight:700;font-size:15px}
.fk small{font-size:11px;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;color:var(--paper)}
.fuss-raster{grid-template-columns:minmax(0,1fr) minmax(0,0.8fr) minmax(0,1.3fr);gap:32px;margin-top:30px}
@media (max-width:860px){.fuss-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.fuss-raster{grid-template-columns:minmax(0,1fr)}}
.fuss ul a{display:inline-flex;align-items:center;gap:0;transition:color var(--t-normal),gap .25s ease}
.fuss ul a::before{content:"";width:0;height:2px;border-radius:2px;background:var(--violet-500);transition:width .25s ease}
.fuss ul a:hover{gap:8px}
.fuss ul a:hover::before{width:12px}
.fuss .anbieter p{font-size:var(--fs-klein);line-height:1.7}
.fuss-unten{display:flex;justify-content:space-between;align-items:center;gap:16px 30px;flex-wrap:wrap;margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,255,255,0.08)}
.fuss-unten .ki-satz{margin:0;padding:0;border:0;max-width:86ch}
.nach-oben{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:var(--fs-ui);color:var(--violet-500);padding:10px 16px;
  border-radius:var(--r-pille);border:1px solid rgba(167,139,250,0.4);transition:border-color var(--t-normal),color var(--t-normal)}
.nach-oben:hover{border-color:var(--violet-500)}
.nach-oben svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease}
.nach-oben:hover svg{transform:translateY(-3px)}

/* ===== Bewegung (seit 21.10.2026 – Robert: „mega genial, mit bewegten Sachen“) ==================
   Ersetzt die frühere Design-System-Regel „keine Einblendungen beim Scrollen“. Alles Bewegte hängt an der
   Klasse .bewegt (setzt ein Skript ganz oben im <body>, nie bei „Bewegung reduzieren“); ohne sie steht
   alles fertig da. Das Skript dazu: js/werkstube.js – keine fremden Bibliotheken. */

/* Bühne und Seitenkopf: Funken, Werkstattlampe, leuchtender Rahmen */
.buehne,.seite-kopf{position:relative;overflow:hidden;isolation:isolate}
.buehne>.w,.seite-kopf>.w{position:relative;z-index:1}
.funken{position:absolute;inset:0;z-index:0;pointer-events:none}
.bewegt .buehne::before,.bewegt .seite-kopf::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(560px circle at var(--lx,74%) var(--ly,16%),rgba(167,139,250,0.12),transparent 62%)}
.buehne-rahmen{box-shadow:0 0 0 1px rgba(167,139,250,0.18),0 40px 100px rgba(0,0,0,0.6),0 0 120px rgba(167,139,250,0.16)}
@property --winkel{syntax:'<angle>';inherits:false;initial-value:0deg}
.buehne-rahmen::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;z-index:2;pointer-events:none;opacity:0;
  background:conic-gradient(from var(--winkel),transparent 0 64%,#D9A441 74%,#F6DB9A 78%,#A78BFA 85%,transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.bewegt .buehne-rahmen::after{opacity:1;animation:umlauf 7s linear infinite}
@keyframes umlauf{to{--winkel:360deg}}

/* Fortschrittsstrich unter dem Kopf */
.fortschritt{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--streifen-marke);transform:scaleX(0);
  transform-origin:0 50%;pointer-events:none}

/* Überschrift ganz oben: Wort für Wort, dann zieht der Messing-Strich nach */
.bewegt .buehne h1{visibility:hidden}
.bewegt .buehne h1.bereit{visibility:visible}
.bewegt .buehne h1 .wort{display:inline-block;opacity:0;transform:translateY(0.45em) rotate(2deg);filter:blur(6px);
  transition:opacity .6s ease calc(var(--i) * 70ms + .1s),transform .75s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 70ms + .1s),
  filter .6s ease calc(var(--i) * 70ms + .1s)}
.bewegt .buehne h1.bereit .wort{opacity:1;transform:none;filter:none}
.bewegt .buehne h1 .linie{background-size:0% 0.065em;transition:background-size 1s cubic-bezier(.6,.1,.2,1) 1.1s}
.bewegt .buehne h1 br+.linie{transition-delay:1.5s}
.bewegt .buehne h1.bereit .linie{background-size:100% 0.065em}
.bewegt .buehne .kicker,.bewegt .buehne-text>div:last-child,.bewegt .seite-kopf-raster>div:first-child{animation:rein .9s cubic-bezier(.2,.8,.2,1) both}
.bewegt .buehne-text>div:last-child{animation-delay:.6s}
@keyframes rein{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* Einblenden beim Scrollen, Geschwister nacheinander */
.bewegt [data-zeigen]{transition:opacity .7s cubic-bezier(.2,.7,.2,1) calc(var(--i,0) * 80ms),transform .8s cubic-bezier(.2,.8,.2,1) calc(var(--i,0) * 80ms)}
.bewegt [data-zeigen]:not(.da){opacity:0;transform:translateY(26px)}
.bewegt [data-zeigen] .symbol svg *{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s cubic-bezier(.6,.1,.2,1) calc(var(--i,0) * 80ms + .25s)}
.bewegt [data-zeigen].da .symbol svg *{stroke-dashoffset:0}
/* der 3-px-Streifen der Karten fließt wie Messing von links nach rechts */
.bewegt :is(.angebot,.abo,.logo-block,.recht-block,.teaser,.cta)[data-zeigen]::before{transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1.2s cubic-bezier(.6,.1,.2,1) calc(var(--i,0) * 80ms + .2s),opacity var(--t-normal)}
.bewegt :is(.angebot,.abo,.logo-block,.recht-block,.teaser,.cta)[data-zeigen].da::before{transform:scaleX(1)}
/* Augenbrauen bekommen einen kleinen Strich davor */
.kopfzeile .augenbraue::before,.recht-block .augenbraue::before,.cta .augenbraue::before,.teaser .augenbraue::before{content:"";display:inline-block;
  width:22px;height:2px;margin:0 10px 0 0;vertical-align:middle;background:currentColor;transform-origin:0 50%}
.bewegt [data-zeigen].augenbraue::before{transform:scaleX(0);transition:transform .8s cubic-bezier(.6,.1,.2,1) .3s}
.bewegt [data-zeigen].augenbraue.da::before{transform:scaleX(1)}

/* Lichtkegel, der dem Mauszeiger auf den Karten folgt */
.licht{position:relative}
.licht::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;opacity:0;transition:opacity .3s ease;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(167,139,250,0.14),transparent 65%)}
.licht:hover::after{opacity:1}
.arbeit.licht::after{background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--farbe,#A78BFA) 22%,transparent),transparent 65%)}

/* Knöpfe: ein Glanzlicht läuft darüber wie über das Messing im Logo-Film */
.knopf::after{content:"";position:absolute;top:-2px;bottom:-2px;left:-60%;width:45%;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,0.55),transparent);transform:skewX(-18deg)}
.bewegt .knopf:hover::after{opacity:1;animation:glanzlauf .85s ease forwards}
@keyframes glanzlauf{from{transform:skewX(-18deg) translateX(0)}to{transform:skewX(-18deg) translateX(480%)}}
/* Etiketten (BELIEBT, EMPFOHLEN) glänzen ab und zu */
.etikett{overflow:hidden}
.etikett::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,0.75) 50%,transparent 70%);transform:translateX(-120%)}
.bewegt .etikett::after{animation:etikettglanz 4.8s ease-in-out infinite}
@keyframes etikettglanz{0%,74%{transform:translateX(-120%)}100%{transform:translateX(120%)}}

/* Schaubild „Neue Homepage“: die Seite baut sich auf, das Handy fährt herein */
.bewegt .schaubild .muster>*,.bewegt .schaubild .m-kacheln>span{opacity:0;transform:translateY(12px);
  transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.bewegt .schaubild.da .muster>*,.bewegt .schaubild.da .m-kacheln>span{opacity:1;transform:none}
.bewegt .schaubild.da .muster>:nth-child(1){transition-delay:.15s}
.bewegt .schaubild.da .muster>:nth-child(2){transition-delay:.4s}
.bewegt .schaubild.da .muster>:nth-child(3){transition-delay:.65s}
.bewegt .schaubild.da .muster>:nth-child(4){transition-delay:.9s}
.bewegt .schaubild.da .m-kacheln>span:nth-child(1){transition-delay:.75s}
.bewegt .schaubild.da .m-kacheln>span:nth-child(2){transition-delay:.9s}
.bewegt .schaubild.da .m-kacheln>span:nth-child(3){transition-delay:1.05s}
.bewegt .schaubild .geraete .handy{transition:opacity .8s ease .5s,transform 1s cubic-bezier(.2,.8,.2,1) .5s}
.bewegt .schaubild:not(.da) .geraete .handy{opacity:0;transform:translate(36px,24px) rotate(5deg)}
/* im kleinen Handy steht die Seite schon fertig – das Handy selbst fährt herein */
.bewegt .schaubild .handy .muster>*,.bewegt .schaubild .handy .m-kacheln>span{opacity:1;transform:none}

/* Schaubild „Einheitliches Auftreten“: alles fliegt zusammen – aus einem Guss */
.bewegt .schaubild .markenset>*{transition:opacity .7s ease,transform 1s cubic-bezier(.2,.8,.2,1)}
.bewegt .schaubild:not(.da) .ms-visitenkarte{opacity:0;transform:translate(-44px,-26px) rotate(-7deg)}
.bewegt .schaubild:not(.da) .ms-handy{opacity:0;transform:translate(44px,-30px) rotate(9deg)}
.bewegt .schaubild:not(.da) .ms-signatur{opacity:0;transform:translateX(-56px)}
.bewegt .schaubild:not(.da) .ms-sozial{opacity:0;transform:translateY(44px)}
.bewegt .schaubild.da .ms-handy{transition-delay:.15s}
.bewegt .schaubild.da .ms-signatur{transition-delay:.3s}
.bewegt .schaubild.da .ms-sozial{transition-delay:.45s}

/* Schaubild „Betreuung“: Sprachnachricht, Text, „schreibt …“, Antwort */
.chat .punkte{display:none}
.bewegt .schaubild .nachricht{opacity:0;transform:translateY(14px) scale(.96);transform-origin:left bottom}
.bewegt .schaubild .nachricht.aus{transform-origin:right bottom}
.bewegt .schaubild.da .nachricht{animation:nachricht .55s cubic-bezier(.2,.8,.2,1) forwards}
.bewegt .schaubild.da .nachricht:nth-child(1){animation-delay:.3s}
.bewegt .schaubild.da .nachricht:nth-child(2){animation-delay:1.3s}
.bewegt .schaubild.da .nachricht:nth-child(3){animation-delay:2.2s}
@keyframes nachricht{to{opacity:1;transform:none}}
.bewegt .chat .nachricht.aus{position:relative}
.bewegt .chat .punkte{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:5px;opacity:1}
.bewegt .chat .punkte i{width:7px;height:7px;border-radius:50%;background:#F5F5F5;animation:punkt 1s ease-in-out infinite}
.bewegt .chat .punkte i:nth-child(2){animation-delay:.15s}
.bewegt .chat .punkte i:nth-child(3){animation-delay:.3s}
@keyframes punkt{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.bewegt .chat .antwort-text{opacity:0}
.bewegt .schaubild.da .chat .punkte{animation:weg .3s ease 3.4s forwards}
.bewegt .schaubild.da .chat .antwort-text{animation:nachricht .4s ease 3.5s forwards}
@keyframes weg{to{opacity:0;visibility:hidden}}
.bewegt .schaubild.da .welle i{animation:welle .7s ease-in-out .5s 5 alternate;transform-origin:50% 50%}
.bewegt .schaubild.da .welle i:nth-child(3n){animation-delay:.62s}
.bewegt .schaubild.da .welle i:nth-child(3n+1){animation-delay:.74s}
@keyframes welle{to{transform:scaleY(.35)}}

/* Schaubild „Für Vereine“: die Seite baut sich auf, das nächste Spiel blinkt sanft */
.bewegt .schaubild .verein-muster>*{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.bewegt .schaubild.da .verein-muster>*{opacity:1;transform:none}
.bewegt .schaubild.da .verein-muster>:nth-child(2){transition-delay:.25s}
.bewegt .schaubild.da .verein-muster>:nth-child(3){transition-delay:.5s}
.bewegt .schaubild.da .verein-muster>:nth-child(4){transition-delay:.75s}
.bewegt .schaubild.da .verein-muster>:nth-child(5){transition-delay:1s}
.bewegt .schaubild.da .vm-termin{animation:pulsieren 2.6s ease-in-out 1.6s infinite}
@keyframes pulsieren{50%{box-shadow:0 0 0 5px rgba(245,197,66,0.16)}}

/* Schaubild-Rahmen leuchten leicht */
.schaubild .browser,.schaubild .chat{box-shadow:0 30px 80px rgba(0,0,0,0.55),0 0 90px rgba(167,139,250,0.12)}

/* Menü oben: die Punkte fallen beim Laden nacheinander herein, der Knopf ruft ab und zu leise */
.bewegt .kopf-nav a{animation:vonOben .7s cubic-bezier(.2,.8,.2,1) both}
.bewegt .kopf-nav a:nth-child(2){animation-delay:.06s}
.bewegt .kopf-nav a:nth-child(3){animation-delay:.12s}
.bewegt .kopf-nav a:nth-child(4){animation-delay:.18s}
.bewegt .kopf-nav a:nth-child(5){animation-delay:.24s}
.bewegt .kopf-nav a:nth-child(6){animation-delay:.3s}
.bewegt .kopf-nav a:nth-child(7){animation-delay:.36s}
@keyframes vonOben{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.bewegt .kopf .kopf-rechts .knopf:not(:hover){animation:ruf 6s ease-in-out 3s infinite}
@keyframes ruf{0%,78%,100%{box-shadow:0 0 0 0 rgba(167,139,250,0)}86%{box-shadow:0 0 0 6px rgba(167,139,250,0.25)}94%{box-shadow:0 0 0 11px rgba(167,139,250,0)}}

/* Gutschein: schwingt herein, die Zahl zählt hoch und springt kurz, ab und zu läuft ein Glanz über das Messing */
.bewegt .gutschein[data-zeigen]:not(.da){opacity:0;transform:translateY(26px) rotate(-2.5deg) scale(.97)}
.bewegt .gutschein.da .gs-zahl{animation:gsSprung .55s cubic-bezier(.2,1.6,.4,1) 1.15s both}
@keyframes gsSprung{50%{transform:scale(1.14)}}
.bewegt .gutschein.da .gs-wert::before{opacity:1;animation:gsGlanz 5.5s ease-in-out 1.4s infinite}
@keyframes gsGlanz{0%{transform:skewX(-18deg) translateX(0)}24%,100%{transform:skewX(-18deg) translateX(480%)}}

/* Netzwerk-Blick: links tröpfeln fünf fremde Server herein, dann schiebt sich der Cookie-Banner hoch; rechts bleibt es ruhig */
.bewegt .netz .netz-liste li{opacity:0;transform:translateX(-12px)}
.bewegt .netz.da .netz-liste li{animation:netzRein .45s cubic-bezier(.2,.8,.2,1) forwards}
.bewegt .netz.da .fremd li:nth-child(1){animation-delay:.3s}
.bewegt .netz.da .fremd li:nth-child(2){animation-delay:.6s}
.bewegt .netz.da .fremd li:nth-child(3){animation-delay:.9s}
.bewegt .netz.da .fremd li:nth-child(4){animation-delay:1.2s}
.bewegt .netz.da .fremd li:nth-child(5){animation-delay:1.5s}
.bewegt .netz.da .eigen li:nth-child(1){animation-delay:.3s}
.bewegt .netz.da .eigen li:nth-child(2){animation-delay:.5s}
.bewegt .netz.da .eigen li:nth-child(3){animation-delay:.7s}
@keyframes netzRein{to{opacity:1;transform:none}}
.bewegt .netz .netz-banner{opacity:0;transform:translateY(18px)}
.bewegt .netz.da .netz-banner{animation:netzRein .6s cubic-bezier(.2,.8,.2,1) 2.1s forwards}
.bewegt .netz .netz-gut{opacity:0;transform:scale(.9)}
.bewegt .netz.da .netz-gut{animation:netzRein .5s cubic-bezier(.2,1.5,.4,1) 1.2s forwards}
.bewegt .netz.da .fremd .netz-zahl{animation:alarm .7s ease 1.9s 2}
@keyframes alarm{50%{box-shadow:0 0 0 6px rgba(224,66,49,0.2)}}
.bewegt .netz.da .eigen .netz-zahl{animation:ruhig 3.2s ease-in-out 1.4s infinite}
@keyframes ruhig{50%{box-shadow:0 0 0 5px rgba(74,222,128,0.14)}}

/* Über mich: das Foto entwickelt sich, die Schrauben drehen sich fest, das Namensschild schiebt sich hoch */
.bewegt .werkbild .portrait img{transition:filter 1.6s ease .2s}
.bewegt .werkbild[data-zeigen]:not(.da) .portrait img{filter:grayscale(1) blur(10px) brightness(.35)}
.bewegt .werkbild .schraube{transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .4s ease}
.bewegt .werkbild[data-zeigen]:not(.da) .schraube{opacity:0;transform:rotate(-220deg) scale(.4)}
.bewegt .werkbild.da .schraube:nth-of-type(1){transition-delay:.5s}
.bewegt .werkbild.da .schraube:nth-of-type(2){transition-delay:.62s}
.bewegt .werkbild.da .schraube:nth-of-type(3){transition-delay:.74s}
.bewegt .werkbild.da .schraube:nth-of-type(4){transition-delay:.86s}
.bewegt .werkbild .namensschild{transition:opacity .6s ease .9s,transform .8s cubic-bezier(.2,.8,.2,1) .9s}
.bewegt .werkbild[data-zeigen]:not(.da) .namensschild{opacity:0;transform:translateY(16px)}

/* Fragen: beim Aufklappen „tippt“ Robert kurz, dann steht die Antwort da */
.bewegt .frage[open] .antwort{animation:antwortRein .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes antwortRein{from{opacity:0;transform:translateY(8px)}}
.bewegt .frage[open] .tippt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:5px;animation:weg .2s ease .6s forwards}
.bewegt .frage[open] .tippt i{width:7px;height:7px;border-radius:50%;background:#F5F5F5;animation:punkt 1s ease-in-out infinite}
.bewegt .frage[open] .tippt i:nth-child(2){animation-delay:.15s}
.bewegt .frage[open] .tippt i:nth-child(3){animation-delay:.3s}
.bewegt .frage[open] .blase p{opacity:0;animation:nachricht .35s ease .62s forwards}

/* Kontakt: der Hörer wackelt, der Standort sendet Wellen, um das Formular läuft ein Messing-Glanz */
.bewegt .kontakt-weg:first-of-type:hover .kw-symbol svg{animation:wackeln .55s ease}
@keyframes wackeln{20%{transform:rotate(-14deg)}40%{transform:rotate(11deg)}60%{transform:rotate(-7deg)}80%{transform:rotate(4deg)}}
.bewegt .pin::before,.bewegt .pin::after{animation:ring 2.8s ease-out infinite}
.bewegt .pin::after{animation-delay:1.4s}
@keyframes ring{0%{transform:scale(1);opacity:.9}100%{transform:scale(3.2);opacity:0}}
.bewegt .formular::after{opacity:1;animation:umlauf 9s linear infinite}

/* Zweite Runde: Nebel, Funkeln, Messing-Glanz, Wortmarke, Chat in der Betreuung */
.bewegt .aurora i:nth-child(1){animation:nebel1 22s ease-in-out infinite alternate}
.bewegt .aurora i:nth-child(2){animation:nebel2 26s ease-in-out infinite alternate}
.bewegt .aurora i:nth-child(3){animation:nebel3 30s ease-in-out infinite alternate}
@keyframes nebel1{to{transform:translate(18%,-14%) scale(1.15)}}
@keyframes nebel2{to{transform:translate(-20%,12%) scale(.9)}}
@keyframes nebel3{to{transform:translate(10%,-22%) scale(1.2)}}
.bewegt .funkeln i{animation:funkeln 3.6s ease-in-out infinite;animation-delay:calc(var(--d) + 1.8s)}
@keyframes funkeln{0%,100%{opacity:0;transform:scale(.2) rotate(0)}14%{opacity:1;transform:scale(1) rotate(45deg)}28%{opacity:0;transform:scale(.3) rotate(90deg)}}
/* Goldglanz über „Und die jemand betreut!“: ein Lichtband läuft ohne Pause immer wieder durch.
   Alle Wörter teilen sich eine Spur (--ox = Lage des Worts), das Band wandert über --glanz. Robert 27.10.2026:
   „soll nicht stehen bleiben, soll permanent durchlaufen“ */
@property --glanz{syntax:'<length>';inherits:true;initial-value:0px}
.bewegt .buehne h1 .zweite .wort{background:linear-gradient(100deg,#D9A441 0px,#E2B04E 160px,#FFF4D6 280px,#E2B04E 400px,#D9A441 560px,#D9A441 700px) 0 0/700px 100% repeat-x;
  background-position:calc(var(--glanz) - var(--ox,0px)) 0;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.bewegt .buehne h1.bereit .zweite{animation:goldlauf 5.5s linear 2.2s infinite}
@keyframes goldlauf{from{--glanz:0px}to{--glanz:700px}}
.bewegt .buehne h1 .zweite{filter:drop-shadow(0 0 18px rgba(217,164,65,0.22))}
.bewegt .kicker::before{animation:sterndreh 4s ease-in-out infinite}
@keyframes sterndreh{0%,70%,100%{transform:rotate(0) scale(1)}82%{transform:rotate(90deg) scale(1.35)}}
.bewegt .kicker::after{opacity:1;animation:kickerglanz 5.5s ease-in-out 1.5s infinite}
@keyframes kickerglanz{0%{transform:skewX(-18deg) translateX(0)}30%,100%{transform:skewX(-18deg) translateX(560%)}}
.bewegt .fakt::after{animation:funkeln 4.4s ease-in-out infinite}
.bewegt .fakt:nth-child(2)::after{animation-delay:1.1s}
.bewegt .fakt:nth-child(3)::after{animation-delay:2.2s}
.bewegt .fakt:nth-child(4)::after{animation-delay:3.2s}
.bewegt .schein i:nth-child(1){animation:schein1 14s ease-in-out infinite alternate}
.bewegt .schein i:nth-child(2){animation:schein2 17s ease-in-out infinite alternate}
@keyframes schein1{to{transform:translate(22%,18%) scale(1.1)}}
@keyframes schein2{to{transform:translate(-20%,-16%) scale(.9)}}
.bewegt .wortmarke i::after{opacity:1;animation:wmglanz 7s ease-in-out 2.4s infinite}
.bewegt .wortmarke .werk i::after{animation-delay:2.7s}
@keyframes wmglanz{0%,80%{transform:skewX(-18deg) translateX(0)}96%,100%{transform:skewX(-18deg) translateX(420%)}}
.bewegt .kopf .wortmarke i,.bewegt .fuss .wortmarke.da i{animation:kachelrein .8s cubic-bezier(.2,1.5,.4,1) backwards}
.bewegt .kopf .wortmarke .werk i,.bewegt .fuss .wortmarke.da .werk i{animation-delay:.15s}
.bewegt .kopf .wortmarke em,.bewegt .fuss .wortmarke.da em{animation:buchstabenrein .7s cubic-bezier(.2,.8,.2,1) .35s backwards}
.bewegt .kopf .wortmarke .werk em,.bewegt .fuss .wortmarke.da .werk em{animation-delay:.5s}
@keyframes kachelrein{from{transform:perspective(240px) rotateY(-110deg) scale(.5);opacity:0}}
@keyframes buchstabenrein{from{clip-path:inset(0 100% 0 0);transform:translateX(-10px);opacity:0}to{clip-path:inset(0 0 0 0)}}
/* Chat in der Betreuung: spielt sich alle 9 s neu ab */
.bewegt .service-chat .sc-blase{animation:sc1 9s ease infinite}
.bewegt .service-chat .sc-blase:nth-child(2){animation-name:sc2}
.bewegt .service-chat .sc-tippt{position:absolute;right:14px;bottom:18px;display:flex;gap:5px;padding:12px 14px;animation-name:sc3}
.bewegt .service-chat .sc-tippt i{display:block;width:7px;height:7px;border-radius:50%;background:#FFFFFF;animation:punkt 1s ease-in-out infinite}
.bewegt .service-chat .sc-tippt i:nth-child(2){animation-delay:.15s}
.bewegt .service-chat .sc-tippt i:nth-child(3){animation-delay:.3s}
.bewegt .service-chat .sc-antwort{animation-name:sc4}
@keyframes sc1{0%,4%{opacity:0;transform:translateY(10px) scale(.96)}9%,91%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes sc2{0%,15%{opacity:0;transform:translateY(10px) scale(.96)}20%,91%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes sc3{0%,26%{opacity:0;transform:translateY(10px) scale(.96)}30%,36%{opacity:1;transform:none}39%,100%{opacity:0;transform:scale(.9)}}
@keyframes sc4{0%,38%{opacity:0;transform:translateY(10px) scale(.96)}43%,91%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(-6px)}}
.bewegt .sc-welle i{animation:scwelle .45s ease-in-out infinite alternate;transform-origin:50% 50%}
.bewegt .sc-welle i:nth-child(2n){animation-delay:.12s}
.bewegt .sc-welle i:nth-child(3n){animation-delay:.24s}
@keyframes scwelle{to{transform:scaleY(.4)}}
.bewegt .sp-band{animation:geschenk 4s ease-in-out infinite}
@keyframes geschenk{0%,80%,100%{transform:rotate(-4deg)}86%{transform:rotate(3deg) scale(1.06)}92%{transform:rotate(-6deg)}}

/* Dritte Runde: Glanz um die Tafel, Leiste, Marker, Bausteine */
.bewegt .buehne-text>div:last-child::after{opacity:1;animation:umlauf 10s linear infinite}
.bewegt .fakten.leiste::before{opacity:1;animation:leistenglanz 7s ease-in-out 3s infinite}
@keyframes leistenglanz{0%{transform:skewX(-18deg) translateX(0)}35%,100%{transform:skewX(-18deg) translateX(620%)}}
.bewegt .buehne .einleitung b{animation:marker 1.2s cubic-bezier(.6,.1,.2,1) 1.6s both}
@keyframes marker{from{background-size:0% 2px}to{background-size:100% 2px}}
.bewegt .baustein[open] .inhalt{animation:bsauf .35s ease both}
@keyframes bsauf{from{opacity:0;transform:translateY(-6px)}}
.bewegt .baustein.ein{animation:bsein .4s cubic-bezier(.2,.8,.2,1) both}
@keyframes bsein{from{opacity:0;transform:translateY(12px) scale(.98)}}

/* ===== Vierte Runde (27.10.2026, Roberts Bildschirmfotos) ============================================== */

/* ===== Fünfte Runde (27.10.2026, Roberts Rückmeldung am Abend) ========================================== */

/* Sicherheits-Siegel unter der Leistungsleiste (statt der Leiste ganz oben, die „wie eine Fehlermeldung“ wirkte) */
.siegel-block{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px 26px;margin-top:22px;padding:18px 26px 18px 18px;
  border-radius:22px;background:linear-gradient(110deg,rgba(217,164,65,0.14),rgba(255,255,255,0.03) 45%,rgba(167,139,250,0.08));
  border:1px solid rgba(217,164,65,0.4);box-shadow:inset 0 1px 0 rgba(255,236,190,0.12),0 24px 60px rgba(0,0,0,0.4)}
.siegel{position:relative;width:96px;height:96px;flex:none;border-radius:50%;overflow:hidden}
.siegel svg{position:absolute;inset:0;width:100%;height:100%}
.siegel-ring{font:800 10.5px/1 var(--font-sans);letter-spacing:0.08em;fill:#F2C46B}
.siegel-mitte{position:absolute;inset:22px;display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#F6D58A,#D9A441 55%,#9A6A18);box-shadow:0 0 0 3px rgba(11,11,11,0.6),0 8px 24px rgba(217,164,65,0.35)}
.siegel-mitte svg{position:static;width:26px;height:26px;fill:none;stroke:#1A1206;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.siegel-text{margin:0;font-size:16.5px;line-height:1.55}
.siegel-text b{color:#F2C46B}
@media (max-width:760px){.siegel-block{grid-template-columns:auto minmax(0,1fr);padding:18px}.siegel-block .knopf{grid-column:1/-1;justify-self:start}}
@media (max-width:460px){.siegel-block{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}.siegel-block .knopf{justify-self:center}}
.bewegt .siegel svg{animation:siegeldreh 26s linear infinite}
@keyframes siegeldreh{to{transform:rotate(360deg)}}
.bewegt .siegel-block.spielt .siegel-mitte{animation:siegelstempel .7s cubic-bezier(.3,1.7,.5,1) both}
@keyframes siegelstempel{from{transform:scale(1.9) rotate(-20deg);opacity:0}}

/* Goldener Knopf (Robert: „Alles zur Betreuung“ größer, golden, mittig) */
.knopf.gold{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;color:#1A1206;border:0;
  background:linear-gradient(180deg,#F6D58A,#D9A441 55%,#B98422);box-shadow:0 10px 30px rgba(217,164,65,0.28),inset 0 1px 0 rgba(255,244,214,0.6)}
.knopf.gold:hover{color:#1A1206;background:linear-gradient(180deg,#FFE3A3,#E2B04E 55%,#C38F2B);box-shadow:0 14px 40px rgba(217,164,65,0.42)}
.knopf.gold:active{background:linear-gradient(180deg,#E2B04E,#B98422)}
.knopf.gold svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s ease}
.knopf.gold:hover svg{transform:translateX(4px)}
.knopf.gross{padding:18px 36px;font-size:17px;border-radius:14px}
.mitte{display:flex;justify-content:center;margin-top:34px}

/* Tafel oben: „Web Werkstube“ als Logo im Satz, drei Hervorhebungen.
   Robert, 27.10.2026 abends: Logo etwas größer und auf derselben Linie wie der Text; statt Marker-Strich etwas gut
   Lesbares; „Hochglanz“ soll dauernd leuchten; „Agenturpreis“ von Hand durchgestrichen, von unten nach oben. */
.wortmarke.im-text{display:inline-flex;flex-direction:row;align-items:baseline;gap:0.24em;font-size:1.16em;vertical-align:baseline;margin:0 0.05em}
.wortmarke.im-text>span{align-items:baseline}
.wortmarke.im-text i{width:1.08em;height:1.08em}
.bewegt .wortmarke.im-text.spielt i{animation:kachelrein .8s cubic-bezier(.2,1.5,.4,1) backwards}
.bewegt .wortmarke.im-text.spielt .werk i{animation-delay:.15s}
.bewegt .wortmarke.im-text.spielt em{animation:buchstabenrein .7s cubic-bezier(.2,.8,.2,1) .35s backwards}
.bewegt .wortmarke.im-text.spielt .werk em{animation-delay:.5s}
.tafel-text{font-size:16.5px;line-height:1.85}
.hl{font-weight:700}
/* „am Handy genauso stark wirken wie am Computer“: weiße Schrift auf lila Glas, ein Lichtstreif zieht durch */
.hl-glas{color:#FFFFFF;padding:0.08em 0.34em;margin:0 0.04em;border-radius:0.45em;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  background:linear-gradient(100deg,transparent 0 36%,rgba(255,255,255,0.32) 50%,transparent 64%) -160% 0/60% 100% no-repeat,
    linear-gradient(90deg,rgba(167,139,250,0.34),rgba(167,139,250,0.17)) 0 0/100% 100% no-repeat;
  box-shadow:inset 0 0 0 1px rgba(196,181,253,0.5),0 0 18px rgba(167,139,250,0.2)}
.bewegt .hl-glas{animation:glaslicht 5s ease-in-out 1.2s infinite}
.bewegt .hl-glas.spielt{animation:glasrein .9s cubic-bezier(.2,.8,.2,1) both,glaslicht 5s ease-in-out 1.2s infinite}
@keyframes glaslicht{0%{background-position:-160% 0,0 0}40%,100%{background-position:260% 0,0 0}}
@keyframes glasrein{from{background-size:60% 100%,0% 100%;box-shadow:inset 0 0 0 1px rgba(196,181,253,0),0 0 0 rgba(167,139,250,0)}}
/* „wieder auf Hochglanz“: leuchtet dauernd golden, ein Glanz läuft durch, drei Funken blitzen abwechselnd */
.hl-glanz{position:relative;white-space:nowrap;
  background:linear-gradient(100deg,#E9B954 0%,#E9B954 33%,#FFF8E3 46%,#FFFDF6 50%,#FFF8E3 54%,#E9B954 67%,#E9B954 100%) 100% 0/280% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 0.3em rgba(246,213,138,0.55))}
.bewegt .hl-glanz{animation:hlglanz 3.4s ease-in-out .6s infinite,glimmen 2.6s ease-in-out infinite alternate}
@keyframes hlglanz{0%{background-position:100% 0}60%,100%{background-position:-40% 0}}
@keyframes glimmen{from{filter:drop-shadow(0 0 0.16em rgba(246,213,138,0.35))}to{filter:drop-shadow(0 0 0.55em rgba(246,213,138,0.85))}}
.funken{position:absolute;inset:0;pointer-events:none}
.funken i{position:absolute;width:0.62em;height:0.62em;background:#FFF4D6;
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.funken i:nth-child(1){right:-0.52em;top:-0.5em}
.funken i:nth-child(2){left:47%;top:-0.48em;width:0.4em;height:0.4em}
.funken i:nth-child(3){left:-0.44em;bottom:-0.06em;width:0.48em;height:0.48em}
.bewegt .funken i{animation:funkeln 3.6s ease-in-out infinite both}
.bewegt .funken i:nth-child(2){animation-delay:1.2s}
.bewegt .funken i:nth-child(3){animation-delay:2.4s}
@keyframes funkeln{0%,100%{transform:scale(0) rotate(0);opacity:0}12%{transform:scale(1.15) rotate(45deg);opacity:1}
  28%{transform:scale(0.75) rotate(90deg);opacity:0.9}42%{transform:scale(0) rotate(135deg);opacity:0}}
/* „Agenturpreis“: von Hand durchgestrichen, von unten links nach oben rechts, zweiter dünner Zug wie mit dem Stift */
.hl-streich{position:relative;white-space:nowrap}
.hl-streich .strich{position:absolute;left:-3%;width:106%;top:0.12em;height:1.02em;overflow:visible;pointer-events:none}
.hl-streich .strich path{fill:none;stroke:#F2C46B;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.hl-streich .strich path+path{stroke-width:1.4;opacity:0.6}
.bewegt .hl-streich .strich path{stroke-dasharray:1;stroke-dashoffset:1}
.bewegt .hl-streich.spielt .strich path{animation:strichzug .55s cubic-bezier(.5,.1,.3,1) .9s forwards}
.bewegt .hl-streich.spielt .strich path+path{animation-duration:.45s;animation-delay:1.3s}
@keyframes strichzug{to{stroke-dashoffset:0}}
.bewegt .preis-plakette.spielt{animation:pppuls 1s cubic-bezier(.2,1.4,.4,1) both}
@keyframes pppuls{0%{transform:none}35%{transform:scale(1.045) rotate(-.6deg)}100%{transform:none}}

/* Überschrift oben und Pakete: Wiederholung alle 30 s (js/werkstube.js setzt .spielt neu) */
.bewegt .buehne h1.spielt .wort{animation:wortneu .75s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 70ms + .05s) both}
@keyframes wortneu{from{opacity:0;transform:translateY(.45em) rotate(2deg);filter:blur(6px)}}
.bewegt .buehne h1.spielt .linie{animation:linieneu 1s cubic-bezier(.6,.1,.2,1) .9s both}
.bewegt .buehne h1.spielt br+.linie{animation-delay:1.3s}
@keyframes linieneu{from{background-size:0% 0.065em}}
.bewegt .paket.spielt .stempel{animation:stempelknall .5s cubic-bezier(.3,1.7,.5,1) calc(.9s + var(--i,0) * .15s) both}
@keyframes stempelknall{from{opacity:0;transform:rotate(-8deg) scale(2.6)}}
.bewegt .paket.spielt .haken li{animation:hakenrein .5s cubic-bezier(.2,.8,.2,1) calc(.35s + var(--n,0) * .1s + var(--i,0) * .08s) both}
@keyframes hakenrein{from{opacity:0;transform:translateX(-14px)}}

/* „So baue ich“: die drei Vorteile bewegter – Linie zieht oben über die Karte, Schloss schnappt zu, Blitz zuckt, Sprechblase ploppt */
.vorteile .karte{overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color var(--t-normal)}
.vorteile .karte::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--violet-500),var(--messing-500));
  transform-origin:0 50%}
.vorteile .karte:hover{transform:translateY(-6px);border-color:rgba(217,164,65,0.45);box-shadow:0 26px 60px rgba(0,0,0,0.45)}
.bewegt .vorteile .karte.spielt::before{animation:vtlinie 1s cubic-bezier(.6,.1,.2,1) both}
@keyframes vtlinie{from{transform:scaleX(0)}}
.vorteile .symbol{transition:transform .4s cubic-bezier(.2,1.5,.4,1)}
.vorteile .karte:hover .symbol{transform:scale(1.12) rotate(-6deg)}
.bewegt .vorteile .karte.spielt:nth-child(1) .symbol svg path{animation:vtschloss 1s cubic-bezier(.3,1.6,.5,1) .5s both}
@keyframes vtschloss{0%{transform:translateY(-5px)}60%{transform:translateY(1px)}100%{transform:none}}
.bewegt .vorteile .karte.spielt:nth-child(2) .symbol{animation:vtblitz 1.1s ease .6s both}
@keyframes vtblitz{0%,100%{transform:none;box-shadow:none}25%{transform:scale(1.25) rotate(-10deg);box-shadow:0 0 30px rgba(246,213,138,0.75)}45%{transform:scale(.95)}65%{transform:scale(1.1);box-shadow:0 0 18px rgba(246,213,138,0.5)}}
.bewegt .vorteile .karte.spielt:nth-child(3) .symbol{animation:vtblase .9s cubic-bezier(.2,1.7,.4,1) .7s both}
@keyframes vtblase{from{transform:scale(.4) translateY(10px);opacity:0}}
.bewegt .vorteile .symbol{animation:vtleuchten 6s ease-in-out 3s infinite}
@keyframes vtleuchten{0%,85%,100%{box-shadow:none}92%{box-shadow:0 0 26px rgba(217,164,65,0.45)}}

/* Grüner Block: Bewegungsgrafik über den beiden Listen */
.netz-bild{display:block;width:100%;height:auto;margin:4px 0 2px;overflow:visible}
.netz-bild text{font:600 9.5px/1 var(--font-sans);fill:#F5F5F5}
.netz-bild .nb-browser{fill:#161616;stroke:#F5F5F5;stroke-width:1.4}
.netz-bild .nb-leiste{stroke:#F5F5F5;stroke-width:1.2}
.netz-bild .nb-punkt{fill:#F5F5F5}
.netz-bild .nb-fluss{fill:none;stroke-width:1.6;stroke-dasharray:3 6}
.fremd .nb-fluss{stroke:#F0555F}
.eigen .nb-fluss{stroke:#4ADE80}
.netz-bild .nb-knoten{fill:rgba(240,85,95,0.18);stroke:#F0555F;stroke-width:1.4}
.netz-bild .nb-paket{fill:#F0555F}
.eigen .nb-paket{fill:#4ADE80}
.netz-bild .nb-server{fill:rgba(74,222,128,0.12);stroke:#4ADE80;stroke-width:1.4}
.netz-bild .nb-zeilen{stroke:#4ADE80;stroke-width:1.4;stroke-linecap:round}
.netz-bild .nb-schild{fill:rgba(74,222,128,0.05);stroke:#4ADE80;stroke-width:1.3;stroke-dasharray:2 5}
.netz-bild .nb-sperre{fill:none;stroke:#F0555F;stroke-width:1.4;stroke-dasharray:2 4}
.netz-bild .nb-x{font-size:15px;font-weight:800;fill:#F0555F}
.bewegt .netz-bild .nb-fluss{animation:nbfluss 1s linear infinite}
@keyframes nbfluss{to{stroke-dashoffset:-18}}
.bewegt .netz-bild .nb-knoten{transform-box:fill-box;transform-origin:center;animation:nbpuls 2.4s ease-in-out calc(var(--n,0) * .35s) infinite}
@keyframes nbpuls{50%{transform:scale(1.3)}}
.bewegt .netz-bild .nb-schild{transform-box:fill-box;transform-origin:center;animation:nbschild 3.2s ease-in-out infinite}
@keyframes nbschild{50%{transform:scale(1.07);stroke-dashoffset:-14}}
.bewegt .netz-bild .nb-x{animation:nbsperre 2.4s ease-in-out infinite}
@keyframes nbsperre{0%,60%,100%{opacity:1}75%{opacity:.35}}

/* Kopfbereich: Knöpfe links unter der Überschrift, die Tafel rechts nie höher als die linke Spalte */
.buehne-text>div:first-child .knoepfe{margin-top:30px}
@media (min-width:861px){.buehne-text{align-items:stretch}
  .buehne-text>.tafel{display:flex;flex-direction:column;justify-content:center}}
.tafel>p{margin:0}
.tafel>p+p{margin-top:16px}
/* Der Preis als eigenes Schild, das links über die Tafel hinausragt (am Computer), mit Falz und Glanz */
.preis-plakette{position:relative;isolation:isolate;padding:14px 20px 16px;border-radius:14px;
  background:linear-gradient(135deg,rgba(217,164,65,0.28),rgba(217,164,65,0.09) 60%,rgba(167,139,250,0.10));
  border:1px solid rgba(240,200,120,0.6);box-shadow:0 14px 40px rgba(0,0,0,0.45),0 0 34px rgba(217,164,65,0.18),inset 0 1px 0 rgba(255,236,190,0.35)}
.tafel>.preis-plakette{margin-top:20px;margin-bottom:4px}
.pp-glanz{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:1}
.pp-glanz::before{content:"";position:absolute;top:-20%;bottom:-20%;left:-40%;width:30%;opacity:0;
  background:linear-gradient(100deg,transparent,rgba(255,244,214,0.38),transparent);transform:skewX(-18deg)}
.pp-oben{display:block;font-size:14.5px;font-weight:700;letter-spacing:0.01em;color:var(--paper)}
.pp-zeile{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 12px;margin-top:4px}
.pp-preis{font:400 clamp(42px,4.4vw,54px)/1 var(--font-display);letter-spacing:-0.02em;
  background:linear-gradient(180deg,#FFF1C9,#F2C46B 45%,#C98F2B);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 12px rgba(217,164,65,0.35))}
.pp-zeile>span{font-size:18px;font-weight:700;color:#F2C46B}
@media (min-width:861px){
  .tafel>.preis-plakette{margin-left:-46px;padding-left:46px;border-radius:4px 14px 14px 0}
  .preis-plakette::after{content:"";position:absolute;left:-1px;bottom:-11px;width:0;height:0;
    border-top:10px solid #6B4A12;border-left:16px solid transparent}}
.bewegt .tafel>.preis-plakette{animation:ppein .8s cubic-bezier(.2,1.3,.4,1) 1.3s both}
@keyframes ppein{from{opacity:0;transform:translateX(-26px) scale(.96)}}
.bewegt .pp-glanz::before{opacity:1;animation:ppglanz 6s ease-in-out 2.4s infinite}
@keyframes ppglanz{0%{transform:skewX(-18deg) translateX(0)}28%,100%{transform:skewX(-18deg) translateX(520%)}}

/* „Für wen“ als eigener Abschnitt: drei Wörter poppen auf, darunter die Pillen, ganz unten die großen Firmen */
.fuer-wen{text-align:center}
.fuer-wen .augenbraue{color:var(--azur-400)}
.fw-titel{margin:12px auto 0;max-width:20ch;font-size:clamp(36px,5.6vw,68px);line-height:1.04;letter-spacing:-0.02em;text-wrap:balance}
.fw-wort{display:inline-block}
.fw-zeile{display:block;margin-top:10px;font-size:0.56em;
  background:linear-gradient(180deg,#F6D58A,#D9A441 55%,#B98422);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.fw-text{max-width:60ch;margin:18px auto 0;font-size:var(--fs-lead)}
.fuer-wen .blasen{margin-top:30px}
.fw-gross{display:inline-flex;align-items:center;gap:14px;margin:36px auto 0;padding:12px 24px 12px 12px;border-radius:var(--r-pille);
  background:rgba(255,255,255,0.04);border:1px solid rgba(217,164,65,0.45);text-align:left;font-size:var(--fs-body)}
.fw-gross-sym{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:var(--messing-tint);color:var(--messing-500)}
.fw-gross-sym svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fw-gross a{font-weight:700;white-space:nowrap}
@media (max-width:520px){.fw-gross{border-radius:18px;padding:12px 16px 12px 12px}}
.bewegt .fw-titel[data-zeigen]:not(.da){opacity:1;transform:none}
.bewegt .fw-titel:not(.da) .fw-wort,.bewegt .fw-titel:not(.da) .fw-zeile{opacity:0}
.bewegt .fw-titel.da .fw-wort{animation:fwpop .75s cubic-bezier(.2,1.7,.35,1) both;animation-delay:calc(var(--n,0) * .22s)}
.bewegt .fw-titel.da .fw-zeile{animation:fwzeile .8s cubic-bezier(.2,.8,.2,1) .8s both}
@keyframes fwpop{0%{opacity:0;transform:scale(.3) translateY(30px) rotate(-6deg)}60%{opacity:1;transform:scale(1.12) translateY(-4px) rotate(2deg)}100%{opacity:1;transform:none}}
@keyframes fwzeile{from{opacity:0;transform:translateY(16px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}

/* Einzeln dazu buchbar: Satz in Messing, alle zwölf Kacheln gleich groß (Höhe setzt js/werkstube.js als --bs-h) */
.bs-zahl{font-size:17px;font-weight:600;color:var(--messing-500)}
.bs-zahl b{font:400 22px/1.2 var(--font-display);letter-spacing:-0.01em}
.baustein summary{min-height:var(--bs-h,0px);grid-template-rows:auto auto auto 1fr}
.baustein summary::after{align-self:end}

/* Pakete: Stempel „Fixpreis“, Haken nacheinander, BELIEBT mit umlaufendem Licht, Kippen zum Zeiger */
.paket{transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color var(--t-normal)}
.stempel{display:inline-block;margin-left:12px;padding:3px 8px 2px;border:2px solid currentColor;border-radius:6px;color:var(--messing-500);
  font:400 11px/1.2 var(--font-display);letter-spacing:0.12em;text-transform:uppercase;transform:rotate(-8deg);vertical-align:1px;
  transition:transform .3s cubic-bezier(.3,1.7,.5,1)}
.paket.beliebt::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;z-index:1;
  background:conic-gradient(from var(--winkel),transparent 0 60%,#D9A441 72%,#FFF1C9 77%,#D9A441 82%,transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.bewegt .paket.beliebt::before{opacity:1;animation:umlauf 5s linear infinite}
.bewegt .paket.beliebt{box-shadow:0 0 50px rgba(217,164,65,0.12)}
.bewegt .paket[data-zeigen]:not(.da) .stempel{opacity:0;transform:rotate(-8deg) scale(2.6)}
.bewegt .paket[data-zeigen]:not(.da) .haken li{opacity:0;transform:translateX(-14px)}
@media (hover:hover) and (pointer:fine){
  .bewegt .paket:hover{transform:perspective(1000px) rotateX(var(--prx,0deg)) rotateY(var(--pry,0deg)) translateY(-8px);
    box-shadow:0 30px 70px rgba(0,0,0,0.55),0 0 50px rgba(217,164,65,0.16)}
  .bewegt .paket:hover .stempel{transform:rotate(-14deg) scale(1.12);transition:transform .3s cubic-bezier(.3,1.7,.5,1)}}

/* „So baue ich“: die drei Vorteile vor dem grünen Block */
.karten-3.vorteile{margin-bottom:56px}
.vorteile .karte h3{font-size:20px}

/* Einheitliches Auftreten: Logo groß oben, darunter fünf gleich große Kacheln (3 + 2) */
.karten-fuenf{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--gap-karten);margin-top:var(--gap-karten)}
.karten-fuenf>.karte{grid-column:span 2}
.karten-fuenf>.karte:nth-child(n+4){grid-column:span 3}
@media (max-width:1039px){.karten-fuenf{grid-template-columns:repeat(2,minmax(0,1fr))}
  .karten-fuenf>.karte,.karten-fuenf>.karte:nth-child(n+4){grid-column:auto}
  .karten-fuenf>.karte:last-child{grid-column:1/-1}}
@media (max-width:640px){.karten-fuenf{grid-template-columns:minmax(0,1fr)}.karten-fuenf>.karte:last-child{grid-column:auto}}
/* Tabelle „Im Paket“: die Zahl in der Mitte, der Zusatz in einer eigenen Zeile darunter */
.matrix td .anzahl{font-weight:700;font-size:16px}
.matrix td small{display:block;margin-top:2px;font-size:12.5px;line-height:1.35}

/* ----- Ruhe bei „Bewegung reduzieren“ --------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}