/* =====================================================================
   WG Bausteine: Kern-CSS
   Quelle: startseite-2026/v3/shell/head.html (Design-System v3 "LemonAds hell").
   Spezifität: Shell-Klassen sind gegenüber dem Prototyp um genau eine Klasse
   verstärkt (erste Klasse doppelt, zum Beispiel .v3-pill.v3-pill), Element-Regeln
   gelten nur in [data-wgb]. So setzen sie sich gegen Theme, Elementor-Kit und
   .elementor a / .elementor img durch, die Reihenfolge untereinander bleibt
   wie im Prototyp, und die #id-Regeln der Sektionen gewinnen weiterhin.
   ===================================================================== */

/* ---------- Schriften, lokal (DSGVO): Archivo, Roboto, Roboto Mono. Eigene Familiennamen mit Präfix WGB, damit Google-Fonts-Einbindungen von Theme oder Elementor sie nie überdecken ---------- */
@font-face{font-family:"WGB Archivo";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/archivo-latin-700-normal.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:"WGB Archivo";font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/archivo-latin-800-normal.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:"WGB Archivo";font-style:normal;font-weight:900;font-display:swap;src:url("../fonts/archivo-latin-900-normal.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:"WGB Roboto";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/roboto-latin-400-normal.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:"WGB Roboto";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/roboto-latin-500-normal.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:"WGB Roboto";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/roboto-latin-700-normal.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:"WGB Roboto Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/roboto-mono-latin-500-normal.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:"WGB Roboto Mono";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/roboto-mono-latin-600-normal.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}

/* ---------- Variablen: nur auf Seiten mit WG-Bausteinen ---------- */
html.wgb-page,body.wgb-page,[data-wgb],.v3-grain{
  --bg:#F6F6F2;--surface:#FFFFFF;--band:#EEEFE9;
  --ink:#141414;--ink-2:#2E3129;--muted:#5C6355;--faint:#8A9086;
  --line:rgba(20,20,20,.08);--line-2:rgba(20,20,20,.14);
  --lime:#C2F21C;--lime-2:#D8F75C;--lime-ink:#14170C;--lime-text:#4E6E0C;
  --graphite:#111311;--graphite-2:#1C1F1B;
  --glow:rgba(194,242,28,.45);
  --radius:24px;--radius-s:14px;
  --shadow:0 20px 50px rgba(20,20,20,.08);
  --ease:cubic-bezier(.2,.7,.2,1);
  --wrap:1440px;
}
:root:has(body [data-wgb]){
  --bg:#F6F6F2;--surface:#FFFFFF;--band:#EEEFE9;
  --ink:#141414;--ink-2:#2E3129;--muted:#5C6355;--faint:#8A9086;
  --line:rgba(20,20,20,.08);--line-2:rgba(20,20,20,.14);
  --lime:#C2F21C;--lime-2:#D8F75C;--lime-ink:#14170C;--lime-text:#4E6E0C;
  --graphite:#111311;--graphite-2:#1C1F1B;
  --glow:rgba(194,242,28,.45);
  --radius:24px;--radius-s:14px;
  --shadow:0 20px 50px rgba(20,20,20,.08);
  --ease:cubic-bezier(.2,.7,.2,1);
  --wrap:1440px;
}

/* ---------- Seitenrahmen: globale Bühne anderer Plugins ausblenden ---------- */
html.wgb-page #wg-global-stage,body.wgb-page #wg-global-stage{display:none!important}
body:has([data-wgb]) #wg-global-stage{display:none!important}

/* ---------- Grundlage in den Bausteinen: Fremd-Stile (Theme, Kit) neutralisieren ---------- */
[data-wgb] :is(button,input,select,textarea){all:revert;box-sizing:border-box}
[data-wgb] :is(ul,ol,li,dl,dt,dd,figure,figcaption,blockquote,table,thead,tbody,tr,th,td,label,h4,h5,h6,small,hr,cite,q,address,pre,code){margin:revert;padding:revert;border:revert;font:revert;color:revert;background:revert;text-transform:revert;letter-spacing:revert;box-shadow:revert;border-radius:revert}
[data-wgb] a,[data-wgb] a:where(:hover,:focus,:active,:visited){color:inherit;text-decoration:revert;background-color:transparent;box-shadow:none}
/* (0,1,2): unabhängig von der Reihenfolge stärker als .elementor-kit-11 a (0,1,1), schwächer als alle .v3-* und #id-Regeln */
body [data-wgb] a{color:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;word-spacing:inherit}
/* Kein Fokusrahmen nach Mausklick (Astra a:focus{outline:thin dotted}); der Tastaturfokus über :focus-visible bleibt */
body [data-wgb] :is(a,button,summary):focus:not(:focus-visible){outline:none}
/* (0,2,2): schlägt .elementor-kit-11 a:hover (0,2,1), bleibt unter den Hoverfarben der Buttons (0,3,0) und allen #id-Regeln */
body [data-wgb] a:hover{color:inherit}
[data-wgb] h1,[data-wgb] h2,[data-wgb] h3{padding:0;text-transform:none;font-style:normal;word-spacing:normal;border:0;background-color:transparent}
[data-wgb] img{border:0;vertical-align:baseline}
[data-wgb] blockquote{quotes:auto;position:static}
[data-wgb] blockquote::before,[data-wgb] blockquote::after{content:none}
[data-wgb] section,[data-wgb] header,[data-wgb] footer{display:block}

/* ---------- Schutz gegen seitenweite Schrift- und Textregeln ----------
   Live setzt zum Beispiel das eigene CSS des Elementor-Kits „h1 … h6 {font-family:Archivo !important}“ und
   „body, p, span, a, li, div {font-family:Roboto !important}“, dazu 0,2 px Laufweite am body. Jede Schriftangabe
   der Bausteine setzt deshalb zusätzlich --wgb-ff. Die Variable vererbt sich wie font-family, und die Regel darunter
   setzt sie mit !important und höherer Spezifität durch. SVG-Inhalte behalten ihre eigenen Angaben. */
[data-wgb]{--wgb-ff:"WGB Roboto",system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:normal;word-spacing:normal}
body [data-wgb]{font-family:var(--wgb-ff)!important}
body [data-wgb] :not(svg *){font-family:var(--wgb-ff)!important}

/* =====================================================================
   SHELL v3 "LemonAds hell": Variablen, Grundtypo, Shell-Klassen
   ===================================================================== */

[data-wgb],[data-wgb] *,[data-wgb] *::before,[data-wgb] *::after,.v3-grain{box-sizing:border-box}
html.wgb-page{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
html:has(body [data-wgb]){-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){html.wgb-page{scroll-behavior:auto}}
@media (prefers-reduced-motion:reduce){html:has(body [data-wgb]){scroll-behavior:auto}}
body.wgb-page,html.wgb-page body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 "WGB Roboto",system-ui,-apple-system,"Segoe UI",sans-serif;--wgb-ff:"WGB Roboto",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
body:has([data-wgb]){margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 "WGB Roboto",system-ui,-apple-system,"Segoe UI",sans-serif;--wgb-ff:"WGB Roboto",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
[data-wgb] img,[data-wgb] svg,[data-wgb] video{max-width:100%}
[data-wgb] img{height:auto}
[data-wgb] a{color:inherit}
[data-wgb] h1,[data-wgb] h2,[data-wgb] h3{margin:0;color:var(--ink);font-family:"WGB Archivo",system-ui,sans-serif;--wgb-ff:"WGB Archivo",system-ui,sans-serif;font-weight:800}
[data-wgb] h1{font-size:clamp(44px,6.2vw,88px);line-height:1.02;letter-spacing:-.035em}
[data-wgb] h2{font-size:clamp(34px,4.2vw,56px);line-height:1.04;letter-spacing:-.03em}
[data-wgb] h3{font-size:24px;line-height:1.15;letter-spacing:-.02em}
[data-wgb] p{margin:0}
[data-wgb] :focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.v3-sr.v3-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.v3-nw.v3-nw{white-space:nowrap}
.v3-skip.v3-skip{position:fixed;left:16px;top:-60px;z-index:200;padding:10px 16px;border-radius:999px;background:var(--graphite);color:var(--lime);font:700 14px/1 "WGB Roboto",sans-serif;--wgb-ff:"WGB Roboto",sans-serif;text-decoration:none;transition:top .2s}
.v3-skip.v3-skip:focus{top:12px}
.v3-skip.v3-skip:is(:hover,:focus){color:var(--lime)}

.v3-wrap.v3-wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
/* Inhaltsbreite seit 1.3.7 höchstens 1440 px (vorher 1200 px). Links mittig sitzt die Einstellungsleiste von WG FX
   bis 76 px vom Rand. Ab 1280 px beginnt der Inhalt deshalb mindestens 104 px vom Fensterrand, solange der Rand neben
   dem Inhalt schmaler ist, und steht damit mittig in der freien Fläche rechts der Leiste. Die Leiste setzt WG FX erst
   per JavaScript ein; damit beim Laden nichts springt, gilt der Abstand ab 1280 px immer. Unter 1280 px regeln die
   Bausteine mit angehefteten Inhalten (Wirkung, Leistung) den Abstand selbst. */
@media (min-width:1280px){
  :root{--wgb-pl:max(24px,calc(104px - max(0px,(100vw - var(--wrap,1440px)) / 2)))}
  .v3-wrap.v3-wrap{padding-left:var(--wgb-pl)}
  /* Die Kopfzeile beginnt an derselben Kante wie der Inhalt, solange sie nicht als Leiste schwebt */
  .v3-nav.v3-nav:not(.is-float) .v3-nav-in{padding-left:var(--wgb-pl)}
}
.v3-sec.v3-sec{padding:120px 0;position:relative}
/* Zwei Sektionen hintereinander: oben weniger Luft, damit sich die Abstände nicht verdoppeln (ID-Regeln einzelner Sektionen gehen vor) */
.v3-sec.v3-sec~.v3-sec{padding-top:clamp(64px,6vw,88px)}
/* In WordPress steht jede Sektion in einer eigenen Elementor-Hülle (oft sogar in eigenen Containern), der
   Geschwister-Selektor greift dort nicht. Deshalb gilt die kleinere obere Luft für alle WG-Sektionen außer dem Hero,
   der immer oben steht. Spezifität (0,2,0) wie .v3-sec.v3-sec, die #id-Regeln der Sektionen gehen weiterhin vor. */
.v3-sec.v3-sec:where([data-wgb]:not(#hero),[data-wgb]>*){padding-top:clamp(64px,6vw,88px)}
.v3-head.v3-head{display:flex;flex-direction:column;gap:18px;max-width:760px}
.v3-head--center.v3-head--center{margin-left:auto;margin-right:auto;align-items:center;text-align:center}
.v3-head.v3-head>.v3-pill{align-self:flex-start}
.v3-head--center.v3-head--center>.v3-pill{align-self:center}

.v3-pill.v3-pill{display:inline-flex;align-items:center;gap:8px;width:auto;margin:0;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.86);border:1px solid var(--line-2);color:var(--ink-2);font:500 11px/1.35 "WGB Roboto Mono",ui-monospace,monospace;--wgb-ff:"WGB Roboto Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;max-width:100%;text-wrap:balance}
.v3-pill.v3-pill::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px rgba(194,242,28,.22),0 0 10px var(--glow)}

.v3-grad.v3-grad{background:linear-gradient(180deg,#141414 20%,#4A4F45 95%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--ink)}
.v3-mark.v3-mark{background:var(--lime);color:var(--ink);padding:0 .12em;border-radius:.16em;-webkit-box-decoration-break:clone;box-decoration-break:clone;-webkit-text-fill-color:var(--ink)}
/* Zweite, hellere Zeile statt Marker (LemonAds-Technik). Der Lime-Marker bleibt nur im Hero und im Abschluss. */
.v3-soft.v3-soft{background:linear-gradient(180deg,#6E7468 10%,#9AA093 95%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#7A8074}
.v3-lead.v3-lead{font-size:19px;line-height:1.6;color:var(--muted)}

.v3-btn.v3-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;max-width:100%;padding:18px 30px;border:0;border-radius:999px;background:linear-gradient(96deg,#D8F75C -20%,#C2F21C 55%,#D8F75C 125%);color:var(--lime-ink);font:800 16px/1.2 "WGB Archivo",system-ui,sans-serif;--wgb-ff:"WGB Archivo",system-ui,sans-serif;letter-spacing:-.005em;text-decoration:none;text-align:center;cursor:pointer;box-shadow:0 0 0 1px rgba(20,23,12,.06) inset,0 10px 34px var(--glow);transition:filter .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.v3-btn.v3-btn:not(:has(svg))::after{content:"";flex:none;width:18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .3s var(--ease)}
.v3-btn.v3-btn:hover{color:var(--lime-ink);filter:brightness(1.05);box-shadow:0 0 0 1px rgba(20,23,12,.06) inset,0 12px 44px rgba(194,242,28,.62)}
.v3-btn.v3-btn:hover::after{transform:translateX(3px)}
.v3-btn.v3-btn:active{transform:translateY(1px)}
.v3-btn--dark.v3-btn--dark{background:var(--graphite);color:var(--lime);box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 12px 34px rgba(20,20,20,.22)}
.v3-btn--dark.v3-btn--dark:hover{color:var(--lime);filter:none;background:var(--graphite-2);box-shadow:0 0 0 1px rgba(194,242,28,.25) inset,0 14px 40px rgba(20,20,20,.26),0 0 34px rgba(194,242,28,.28)}
.v3-btn--glass.v3-btn--glass{background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--ink);box-shadow:0 0 0 1px var(--line-2) inset,0 8px 24px rgba(20,20,20,.06)}
.v3-btn--glass.v3-btn--glass:hover{color:var(--ink);filter:none;background:rgba(255,255,255,.92);box-shadow:0 0 0 1px rgba(20,20,20,.24) inset,0 10px 30px rgba(20,20,20,.08)}

.v3-glass.v3-glass{background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.9);border-radius:var(--radius);box-shadow:0 0 0 1px var(--line),var(--shadow)}
/* Milchglas ohne Filter für Karten auf einfarbigem Grund (spart Leistung, sieht gleich aus) */
.v3-glass--flat.v3-glass--flat{background:rgba(255,255,255,.86);-webkit-backdrop-filter:none;backdrop-filter:none}
/* Leuchtende Lime-Glasform: das gemeinsame Leuchtobjekt aller Illustrationen */
.v3-glassdot.v3-glassdot{position:absolute;z-index:2;display:block;aspect-ratio:1/1;border-radius:22%;background:linear-gradient(140deg,rgba(240,253,190,.82) 0%,rgba(210,247,80,.62) 48%,rgba(194,242,28,.42) 100%);-webkit-backdrop-filter:blur(6px) saturate(1.4);backdrop-filter:blur(6px) saturate(1.4);border:1px solid rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(20,23,12,.05),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -8px 16px rgba(110,150,0,.16),0 10px 22px rgba(110,150,0,.18),0 0 32px var(--glow);pointer-events:none}
.v3-glassdot.v3-glassdot::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(60% 50% at 30% 22%,rgba(255,255,255,.85),rgba(255,255,255,0) 70%)}
.v3-glassdot--circle.v3-glassdot--circle{border-radius:50%}
/* Namensschild am Cursor: überall gleich */
.v3-tag.v3-tag{display:inline-block;padding:5px 9px;border-radius:2px 7px 7px 7px;background:var(--lime);color:var(--lime-ink);font:600 11px/1 "WGB Roboto Mono",ui-monospace,monospace;--wgb-ff:"WGB Roboto Mono",ui-monospace,monospace;letter-spacing:.04em;text-transform:none;white-space:nowrap;box-shadow:0 0 0 1px rgba(20,23,12,.12),0 6px 16px rgba(110,150,0,.28)}
.v3-grid.v3-grid{background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:48px 48px;background-position:center center;-webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%)}
.v3-glow.v3-glow{position:absolute;background:radial-gradient(closest-side,var(--glow),transparent);filter:blur(60px);pointer-events:none}
.v3-ghost.v3-ghost{display:block;margin:0;font-family:"WGB Archivo",system-ui,sans-serif;--wgb-ff:"WGB Archivo",system-ui,sans-serif;font-weight:900;font-size:clamp(64px,11vw,180px);line-height:.9;letter-spacing:-.05em;background:linear-gradient(180deg,#E6E7E1,#D4D6CE);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#DADCD4}

/* Linien-Symbole (Widget_Base::icon) */
.v3-ico.v3-ico{display:inline-block;flex:none;vertical-align:middle;overflow:visible}

/* Geräterahmen für Leistungsseiten und Beispiele: Browser (Standard), Handy, Video.
   Gleiche Materialsprache wie die Werkbank der Startseite: Graphit mit Lime-Leuchtrand. */
.v3-device.v3-device{position:relative;display:block;border-radius:var(--radius);background:var(--graphite);overflow:hidden;isolation:isolate;color:#F3F4EE;box-shadow:0 0 0 1px rgba(194,242,28,.9),0 0 0 7px rgba(194,242,28,.07),0 0 64px rgba(194,242,28,.30),0 40px 90px rgba(20,20,20,.22),inset 0 1px 0 rgba(255,255,255,.06)}
.v3-device--soft.v3-device--soft{box-shadow:0 0 0 1px rgba(20,20,20,.10),0 24px 60px rgba(20,20,20,.14),inset 0 1px 0 rgba(255,255,255,.06)}
.v3-device-bar.v3-device-bar{display:flex;align-items:center;gap:10px;height:36px;padding:0 14px;background:var(--graphite-2);border-bottom:1px solid rgba(255,255,255,.06)}
.v3-device-dots.v3-device-dots{display:flex;gap:6px;flex:none}
.v3-device-dots.v3-device-dots i{display:block;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.16)}
.v3-device-url.v3-device-url{flex:1;min-width:0;max-width:60%;margin:0 auto;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.06);color:rgba(243,244,238,.72);font:500 11px/1.2 "WGB Roboto Mono",ui-monospace,monospace;--wgb-ff:"WGB Roboto Mono",ui-monospace,monospace;letter-spacing:.02em;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v3-device-screen.v3-device-screen{position:relative;display:block;aspect-ratio:16/10;background:var(--bg);overflow:hidden}
.v3-device-screen.v3-device-screen>img,.v3-device-screen.v3-device-screen>video{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.v3-device--video.v3-device--video .v3-device-screen{aspect-ratio:16/9;background:#0B0C0B}
.v3-device--phone.v3-device--phone{width:min(100%,300px);padding:10px;border-radius:42px}
.v3-device--phone.v3-device--phone .v3-device-screen{aspect-ratio:9/19.5;border-radius:32px}

/* Körnung über der ganzen Seite */
.v3-grain{position:fixed;inset:-50%;z-index:150;pointer-events:none;opacity:.05;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:220px 220px;animation:v3-grain 1s steps(6) infinite}
@keyframes v3-grain{0%{transform:translate(0,0)}17%{transform:translate(-3%,2%)}33%{transform:translate(2%,-3%)}50%{transform:translate(-2%,-1%)}67%{transform:translate(3%,3%)}83%{transform:translate(-1%,3%)}100%{transform:translate(0,0)}}

/* Bewegungs-Module */
.js .wgfx-in{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .wgfx-in.is-in{opacity:1;transform:none}
/* Sicherung: kam core.js nicht binnen 3 s (html.wgb-late), bleibt nichts unsichtbar */
html.wgb-late .wgfx-in{opacity:1!important;transition:none!important}
/* Verschiebung ohne !important: (0,3,1) schlägt .js .wgfx-in, die Layout-Versätze der Sektionen (#id) bleiben */
html.wgb-late.js .wgfx-in{transform:none}

@media (max-width:720px){
  .v3-wrap.v3-wrap{padding:0 18px}
  .v3-sec.v3-sec{padding:84px 0}
  .v3-sec.v3-sec~.v3-sec{padding-top:56px}
  .v3-sec.v3-sec:where([data-wgb]:not(#hero),[data-wgb]>*){padding-top:56px}
  .v3-lead.v3-lead{font-size:17px}
  .v3-pill.v3-pill{letter-spacing:.1em;padding:8px 12px}
  .v3-btn.v3-btn{font-size:15px;padding:16px 22px;line-height:1.25}
}
@media (max-width:420px){
  .v3-pill.v3-pill{font-size:11px;letter-spacing:.06em;gap:7px}
}
@media (prefers-reduced-motion:reduce){
  .v3-grain{animation:none}
  .js .wgfx-in{opacity:1;transform:none;transition:none}
  .v3-btn.v3-btn,.v3-btn.v3-btn::after{transition:none}
}

/* =====================================================================
   HEADER: transparente Leiste, beim Scrollen schwebendes Milchglas
   ===================================================================== */
.v3-nav.v3-nav{position:fixed;left:0;right:0;top:0;z-index:100;padding:14px 0;pointer-events:none;transition:padding .45s var(--ease)}
.v3-nav-in.v3-nav-in{pointer-events:auto;display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:var(--wrap);margin:0 auto;padding:10px 24px;border-radius:999px;border:1px solid transparent;background:rgba(246,246,242,0);transition:max-width .45s var(--ease),padding .45s var(--ease),background-color .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease),-webkit-backdrop-filter .45s,backdrop-filter .45s}
.v3-nav.v3-nav.is-float{padding:12px 16px}
.v3-nav.v3-nav.is-float .v3-nav-in{max-width:1120px;padding:8px 8px 8px 22px;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);border-color:rgba(255,255,255,.9);box-shadow:0 0 0 1px var(--line),0 14px 40px rgba(20,20,20,.08)}
.v3-nav-logo.v3-nav-logo{display:flex;align-items:center;flex:none;border-radius:8px}
.v3-nav-logo.v3-nav-logo img{display:block;height:30px;width:auto}
.v3-nav-links.v3-nav-links{display:flex;align-items:center;gap:2px;margin:0;padding:5px;list-style:none;border-radius:999px;background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--line-2);box-shadow:0 6px 20px rgba(20,20,20,.04)}
.v3-nav.v3-nav.is-float .v3-nav-links{background:transparent;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.v3-nav-links.v3-nav-links a{display:block;padding:9px 16px;border-radius:999px;color:var(--ink-2);font:500 14px/1 "WGB Roboto",sans-serif;--wgb-ff:"WGB Roboto",sans-serif;text-decoration:none;transition:background-color .25s var(--ease),color .25s var(--ease)}
.v3-nav-links.v3-nav-links a:hover{background:rgba(20,20,20,.05);color:var(--ink)}
.v3-nav-links.v3-nav-links a.is-here{background:var(--graphite);color:var(--lime)}
.v3-nav.v3-nav .v3-btn{padding:12px 20px;font-size:14px;gap:8px;box-shadow:0 0 0 1px rgba(20,23,12,.06) inset,0 6px 22px rgba(194,242,28,.4)}
.v3-nav.v3-nav .v3-btn::after{width:15px;height:15px}
@media (max-width:959px){
  .v3-nav-links.v3-nav-links{display:none}
}
@media (max-width:720px){
  .v3-nav.v3-nav{padding:10px 0}
  .v3-nav-in.v3-nav-in{padding:8px 18px}
  .v3-nav.v3-nav.is-float{padding:8px 10px}
  .v3-nav.v3-nav.is-float .v3-nav-in{padding:6px 6px 6px 16px}
  .v3-nav-logo.v3-nav-logo img{height:26px}
  .v3-nav.v3-nav .v3-btn{padding:11px 15px;font-size:13px}
}
@media (max-width:360px){
  .v3-nav.v3-nav .v3-btn::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .v3-nav.v3-nav,.v3-nav-in.v3-nav-in{transition:none}
}

/* =====================================================================
   WG Bausteine: Ergänzungen für WordPress und Elementor
   ===================================================================== */
/* Sprunglink liegt in der Kopfzeile, die keine Zeiger-Ereignisse annimmt */
.v3-skip.v3-skip{pointer-events:auto}
/* Elementor: Widget-Hüllen ohne eigene Abstände */
.elementor .elementor-element:has(>[data-wgb]){margin:0;padding:0}
/* Im Elementor-Editor bleiben alle Inhalte sichtbar, auch wenn eine Einblendung noch aussteht */
html.wgb-edit .wgfx-in{opacity:1!important}
/* Elementor-Container um WG-Bausteine: volle Breite, kein Innenabstand, keine Lücke.
   Standard-Container (boxed 1140 px, 10 px Innenabstand, 20 px Lücke aus dem Kit) würden die
   Sektionen sonst einrücken und auseinanderschieben. !important, weil Elementor die Werte je Element
   mit höherer Spezifität setzt; gilt nur für Container, die WG-Bausteine enthalten. */
.e-con:has([data-wgb]),.e-con:has([data-wgb])>.e-con-inner,
:is(.e-flexbox,.e-div-block):has([data-wgb]){
  --padding-top:0px!important;--padding-right:0px!important;--padding-bottom:0px!important;--padding-left:0px!important;
  --margin-top:0px!important;--margin-right:0px!important;--margin-bottom:0px!important;--margin-left:0px!important;
  --gap:0px!important;--row-gap:0px!important;--column-gap:0px!important;--widgets-spacing:0px!important;
  --container-widget-width:100%;--content-width:100%!important;--width:100%!important;--container-max-width:none!important;
  padding:0!important;margin:0!important;gap:0!important;max-width:none!important;width:100%!important;border:0!important;min-height:0!important
}
.e-con:has([data-wgb]){flex-direction:column!important;align-items:stretch!important;flex-wrap:nowrap!important}
.e-con:has([data-wgb])>.e-con-inner{flex-direction:column!important;align-items:stretch!important;flex-wrap:nowrap!important}
/* Ältere Sektion-Spalte-Struktur von Elementor */
.elementor-section:has([data-wgb]){padding:0!important;margin:0!important}
.elementor-section:has([data-wgb])>.elementor-container{max-width:none!important}
.elementor-section:has([data-wgb]) .elementor-column>.elementor-widget-wrap,
.elementor-section:has([data-wgb]) .elementor-column>.elementor-element-populated{padding:0!important;margin:0!important}
/* Widget-Hüllen: keine Abstände, volle Breite, kein eigener Stapelkontext durch Elementor-Effekte */
.elementor-element:has(>[data-wgb]){margin:0!important;padding:0!important;width:100%!important;max-width:none!important;--widgets-spacing:0px;--kit-widget-spacing:0px}
/* Astra blendet auch bei Elementor Canvas seinen Knopf „Nach oben“ in Astra-Blau ein. Die Bausteine haben eigene Sprungziele. */
body.wgb-page #ast-scroll-top{display:none!important}
body:has([data-wgb]) #ast-scroll-top{display:none!important}
/* Hinweis nur im Elementor-Editor, etwa bei ungültigem Untertitel-JSON im Hero */
[data-wgb] .wgb-editor-hinweis{position:relative;z-index:60;max-width:760px;margin:0 auto 24px;padding:14px 18px;border-radius:14px;background:#141414;color:#fff;border-left:6px solid #C2F21C;font:500 15px/1.5 "WGB Roboto",system-ui,sans-serif;--wgb-ff:"WGB Roboto",system-ui,sans-serif}