/*
 * pixelschupfa – Child-Theme-CSS
 * ------------------------------------------------------------------
 * Farben, Schriften, Buttons, Breiten und Abstände stehen in Avada
 * (Global Options bzw. Element-Optionen). Hier stehen nur Dinge, die
 * Avada nicht kann: Pixel-Effekte und ein paar Feinheiten.
 *
 * Klassen, die man im Avada-Element unter „CSS-Klasse“ einträgt
 * (ausführlich in avada/KLASSEN.md):
 *   ps-kicker        Text-Block     kleine grüne Überzeile in Großbuchstaben
 *   ps-leise         Button         Button als unterstrichener Textlink
 *   ps-kachel        Bild           schwarze Pixel-Kachel (SVG), kippt beim Darüberfahren
 *   ps-ladebalken    Bild           + ps-kachel: Ladebalken füllt sich beim Hineinscrollen
 *   ps-pixel-ecke    Bild           grünes Pixel an der Ecke rechts unten
 *   ps-foto          Bild           Hochformat 4:5
 *   ps-portrait      Bild           kleines quadratisches Porträt
 *   ps-fakt          Text-Block     fetter Begriff mit grünem Pixel (Auszeichnungen)
 *   ps-leistung      Spalte         Leistungszeile mit Platz-Pixel und Begleiter-Pixel
 *   ps-nr            Text-Block     Nummer in der Leistungszeile
 *   ps-karte         Spalte         Referenzkarte (Bild zoomt, Titel wird grün)
 *   ps-award         Text-Block     schwarzes Award-Etikett
 *   ps-mehr          Text-Block     „Website ansehen ↗“ mit grüner Linie
 *   ps-filter        Text-Block     Liste „Alle, Web, Logo, Print“ wird zu Filter-Knöpfen
 *   kat-web/-logo/-print  Spalte    Kategorie einer Referenzkarte für den Filter
 *   ps-raster        Container      leuchtendes Pixel-Raster im Hintergrund
 *   ps-pruefliste    Checklist      Prüfpunkte mit Kästchen, die sich füllen
 *   ps-sperre        Text-Block     gestrichelter Hinweis „Spiel zuerst eine Runde“
 *   ps-verlosung     Spalte         Verlosung: Formular erst nach einer Spielrunde
 *   ps-punkt         Spalte         Leistungspunkt mit grünem Pixel darüber (Raster „Was du bekommst“)
 *   ps-handy         Bild           Handy-Rahmen um einen Screenshot
 *   ps-druck         Bild           Drucksorte leicht schräg mit Schatten
 *   ps-fragen        Toggles        Kundenfragen: Abstände und Pixel-Plus (Rest in den Element-Optionen)
 *   ps-danke-pixel   Text-Block     + ps-kicker: großes grünes Pixel über dem Kicker (Danke- und 404-Seite)
 *   ps-auf-hell      Text-Block     + ps-spiel-link: Spiel-Link dunkel auf hellem Grund
 *   ps-entwurf       Text-Block     schwarzer Hinweisbalken „Entwurf“
 *   ps-rechtstext    Text-Block     Rechtstext mit Zwischenüberschriften, Listen, Platzhaltern
 *   ps-schupf-titel  Titel          Akzentwort mit schupfbarem Pixel
 *   ps-schupf-hinweis Text-Block    „Schupf den Pixel an – …“
 *   ps-person / ps-kontaktdaten Text-Block  Kontaktblock
 *   ps-kopf / ps-menue / ps-pixelkante / ps-spiel-link / ps-fuss-zeile  Kopf- und Fußbereich
 *//* === Grundlagen === */
html{scroll-behavior:smooth}
@supports (overflow:clip){
body{overflow-x:clip}
}
body.zieht-pixel{user-select:none;-webkit-user-select:none}
body :focus-visible{outline:2px solid var(--awb-color5);outline-offset:2px}
body .fusion-text>p:last-child{margin-bottom:0}
body .fusion-text>p+p{margin-top:14px}
body .screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* === Akzentwort: <em> in Titeln und Texten === */
body :is(h1,h2,h3,h4,.fusion-text) em{font-family:var(--awb-custom_typography_1-font-family);font-style:italic;font-weight:600;font-size:1.03em;letter-spacing:0}
/* === Kicker === */
body .ps-kicker{font-size:13px;font-weight:700;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:var(--awb-text-color,var(--awb-color5))}
/* Farbe aus dem Element (Textfarbe) hat Vorrang */
body .ps-kicker p{margin:0}
/* === Buttons: grüner Pixel, der beim Darüberfahren den Knopf füllt === */
body .fusion-button{position:relative;overflow:hidden;isolation:isolate;gap:10px}
body .fusion-button::before{content:"";position:relative;z-index:0;width:8px;height:8px;background:var(--awb-color4);flex:none;transition:transform .45s cubic-bezier(.5,0,.2,1)}
body .fusion-button:hover::before{transform:scale(60)}
/* Fokus (Tina-Testerinnen 12.10.): Nach einem Mausklick behalten Chrome/Edge/Firefox den Fokus – dann galt Avadas dunkle Hover-Schrift ohne grüne Füllung (schwarz auf schwarz).
   Maus-Fokus: normale Schriftfarbe. Tastatur-Fokus: grüne Füllung wie beim Darüberfahren. */
body .fusion-button:focus:not(:hover):not(:focus-visible){--button_accent_hover_color:var(--button_accent_color)}
body .fusion-button:focus-visible::before{transform:scale(60)}
body .fusion-button .fusion-button-text{position:relative;z-index:1}
/* Beim Darüberfahren füllt das grüne Pixel den Knopf – an seiner Stelle erscheint ein schwarzes */
body .fusion-button:not(.ps-leise) .fusion-button-text::before,body .ps-menue li.knopf .menu-text::before{content:"";position:absolute;left:-18px;top:50%;width:8px;height:8px;margin-top:-4px;background:var(--awb-color8);opacity:0;transition:opacity .2s}
body .fusion-button:not(.ps-leise):hover .fusion-button-text::before,body .ps-menue li.knopf>.awb-menu__main-a:hover .menu-text::before{opacity:1;transition-delay:.15s}
body .fusion-button.ps-leise{background:none!important;border-radius:0;padding:0 0 2px;border-bottom:1px solid var(--awb-color6);overflow:visible}
body .fusion-button.ps-leise .fusion-button-text{color:var(--awb-color8);font-size:15px}
body .fusion-button.ps-leise:hover{border-color:var(--awb-color5)}
body .fusion-button.ps-leise::before{display:none}
/* === Kacheln, Fotos, Pixel-Ecke === */
body .ps-kachel{display:flex;align-items:center;justify-content:center;background:var(--awb-color8);aspect-ratio:600/420;overflow:hidden;transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
body .ps-kachel :is(img,svg){display:block;width:100%;height:100%}
body .ps-ladebalken.vorbereitet .lb{opacity:0}
body .ps-ladebalken.vorbereitet.ladet .lb{opacity:1;transition:opacity .25s calc(var(--i) * 180ms)}
body .ps-ladebalken .lb-gruen{transform-box:fill-box;transform-origin:center;animation:lb-puls 2.4s ease-in-out 1.6s infinite}
@keyframes lb-puls{0%,100%{opacity:1}50%{opacity:.45}}
body .ps-pixel-ecke{position:relative;overflow:visible}
body .ps-pixel-ecke::after{content:"";position:absolute;right:-9px;bottom:-9px;width:18px;height:18px;background:var(--awb-color4)}
body .ps-foto img{aspect-ratio:4/5;object-fit:cover;object-position:50% 10%}
body .ps-portrait img{width:72px;height:72px;object-fit:cover;object-position:50% 15%}
body .ps-portrait.ps-pixel-ecke::after{right:-5px;bottom:-5px;width:10px;height:10px}
/* === Startbereich: Pixel hinter dem Akzentwort === */
@media (min-width:901px){
body .ps-schupf-titel .zeile{display:block;white-space:nowrap}
}
body .wort{position:relative;display:inline-block;white-space:nowrap}
body .wort .b{display:inline-block;padding:.18em .1em;margin:-.18em -.1em}
body #hpixel{position:relative;display:inline-block;width:.22em;height:.22em;margin-left:.07em;cursor:grab;touch-action:none;will-change:transform}
body #hpixel::before{content:"";position:absolute;inset:-.35em}
body #hpixel::after{content:"";position:absolute;inset:0;background:var(--awb-color4);animation:atmen 2.4s ease-in-out infinite}
body #hpixel:hover::after{animation-play-state:paused;transform:scale(1.25)}
body #hpixel.zieht{cursor:grabbing}
@keyframes atmen{0%,100%{transform:scale(1)}50%{transform:scale(1.32)}}
body .ps-schupf-hinweis p{display:flex;align-items:center;gap:10px;margin:0;font-family:var(--awb-custom_typography_1-font-family);font-style:italic;font-weight:600;font-size:clamp(18px,1.6vw,21px);color:var(--awb-color7);min-height:1.6em}
body .ps-schupf-hinweis i{width:7px;height:7px;background:var(--awb-color4);flex:none}
body .ps-schupf-hinweis a{color:var(--awb-color8);text-decoration:none;border-bottom:1px solid var(--awb-color4);white-space:nowrap}
body .ps-schupf-hinweis a:hover{color:var(--awb-color5)}
/* === Laptop-Bühne [pxs_buehne] === */
body .buehne{--schatten:0 30px 60px -20px rgba(29,29,27,.35),0 2px 6px rgba(29,29,27,.06);position:relative;aspect-ratio:1/0.8}
body .buehne .geraet{position:absolute;will-change:transform}
body .laptop{left:2%;top:2%;width:90%;animation:buehne-rein .7s cubic-bezier(.2,.7,.2,1) both}
body .laptop .rahmen{background:var(--awb-color8);border-radius:12px 12px 0 0;padding:2.4% 2.4% 2.8%;box-shadow:var(--schatten)}
body .laptop .bildschirm{position:relative;aspect-ratio:16/10;overflow:hidden;background:#000;border-radius:2px}
body .laptop .unterteil{position:relative;height:0;padding-bottom:3.4%;margin:0 -4%;background:linear-gradient(#E9E4DD,#BFB8AC);border-radius:0 0 10px 10px;box-shadow:var(--schatten)}
body .laptop .unterteil::after{content:"";position:absolute;left:43%;right:43%;top:0;height:42%;background:var(--awb-color6);border-radius:0 0 6px 6px}
body .kunde-folie{position:absolute;inset:-1px;opacity:0;visibility:hidden;transition:opacity .8s ease,visibility 0s .8s}
body .kunde-folie.aktiv{opacity:1;visibility:visible;transition:opacity .8s ease}
body .bildschirm :is(video,img){display:block;width:100%;height:100%;object-fit:cover}
body .bildschirm .pxs-standbild{position:absolute;inset:0}
body .bildschirm video{position:relative;opacity:0;transition:opacity .4s ease}
body .bildschirm video.laeuft{opacity:1}
/* Blitzer am Bildschirmrand (Tina 12.10.): Safari rendert das Video minimal schmäler, darunter schaute das Standbild (anderes Bild) als heller Streifen hervor → Standbild ausblenden, sobald das Video läuft; Folie 1px über den Rand */
body .bildschirm .kunde-folie:has(video.laeuft) .pxs-standbild{opacity:0;transition:opacity 0s .45s}
body .stapel{right:0;bottom:2%;width:50%;aspect-ratio:1/0.66;animation:buehne-rein .7s .12s cubic-bezier(.2,.7,.2,1) both}
body .stapel img{position:absolute;bottom:0;height:auto;border-radius:3px;box-shadow:var(--schatten);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
body .stapel .solo-handy{position:absolute;right:8%;bottom:0;width:34%;background:#151514;border-radius:18px;padding:4px;box-shadow:var(--schatten)}
body .stapel .solo-handy img{position:static;display:block;width:100%;height:auto;border-radius:14px;box-shadow:none}
body .stapel .d1{left:0;width:34%;transform:rotate(-6deg)}
body .stapel .d2{left:22%;width:50%;bottom:6%;transform:rotate(-1deg)}
body .stapel .d3{right:0;width:56%;transform:rotate(4deg)}
body .buehne:hover .stapel .d1{transform:rotate(-9deg) translateX(-4%)}
body .buehne:hover .stapel .d3{transform:rotate(6deg) translateX(3%)}
@keyframes buehne-rein{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
body .kunden-leiste{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px;padding-left:2%;font-size:13px;color:var(--awb-color7)}
body .kunden-leiste .name{font-weight:700;color:var(--awb-color8)}
body .kunden-punkte{display:flex;gap:10px}
body .kunden-punkte button{position:relative;width:10px;height:10px;padding:0;border:0;background:var(--awb-color6);cursor:pointer;transition:background .2s,transform .2s}
body .kunden-punkte button::before{content:"";position:absolute;inset:-10px}
body .kunden-punkte button[aria-pressed=true]{background:var(--awb-color4);transform:scale(1.3)}
@media (min-width:901px){
body .buehne-spalte{margin-left:-3%}
body .laptop{left:0;width:100%}
body .buehne{aspect-ratio:1/0.86}
body .kunden-leiste{padding-left:0}
}
@media (max-width:900px){
body .buehne{aspect-ratio:1/0.82}
body .laptop{left:0;width:94%}
body .stapel{width:44%}
body .stapel .d1,body .stapel .d2{display:none}
body .stapel .d3{width:100%;right:0}
body .stapel .solo-handy{width:52%;right:0}
}
/* === Auszeichnungen === */
body .ps-fakt strong{display:block;font-size:20px;color:var(--awb-color1);margin-bottom:4px}
/* Neuro-Web-Award-Links (Auszeichnungen-Leiste, Footer): Farbe bleibt, feine grüne Unterstreichung */
body :is(.ps-fakt,.ps-award-fuss) a{color:inherit;text-decoration:underline;text-decoration-color:var(--awb-color4);text-decoration-thickness:1px;text-underline-offset:3px}
body :is(.ps-fakt,.ps-award-fuss) a:hover{text-decoration-thickness:2px}
body .ps-fakt strong::after{content:"";display:inline-block;width:6px;height:6px;margin-left:5px;background:var(--awb-color4)}
@media (max-width:900px){
body .ps-fakt strong{font-size:17px}
body .ps-beweis>.fusion-column-wrapper{border-left-width:0!important}
body .ps-beweis+.ps-beweis{border-top:1px solid var(--awb-custom_color_4)}

}
/* === Leistungen: Platz-Pixel und Begleiter-Pixel === */
body .ps-leistungen>.fusion-builder-row{position:relative}
body .ps-nr p{display:flex;align-items:center;gap:50px;font-weight:700;min-height:calc(var(--h3_typography-font-size) * var(--h3_typography-line-height))}
/* Nummer mittig zur ersten Zeile der H3 (Tina 12.10.) */
body .ps-nr .platz{width:10px;height:10px;background:var(--awb-color6);flex:none}
body #begleiter{position:absolute;left:0;top:0;width:10px;height:10px;background:var(--awb-color4);will-change:transform;pointer-events:none;z-index:2}
body .ps-leistung h3{transform-origin:left bottom}
body .ps-leistung.geschupft h3{animation:schupf .6s cubic-bezier(.3,0,.3,1)}
body .ps-leistung:hover .ps-kachel,body .ps-leistung.geschupft .ps-kachel{transform:rotate(-3deg) scale(1.04)}
@keyframes schupf{0%{transform:none}28%{transform:translateY(-12px)}58%{transform:translateY(3px)}80%{transform:translateY(-2px)}100%{transform:none}}
@media (max-width:900px){
body .ps-nr p{gap:10px}
}
/* === Referenzen: Karten und Filter === */
body .ps-karte{transition:opacity .35s}
body .fusion-flex-container .fusion-row .ps-karte.weg{display:none}
body #ref-raster.gefiltert>.ps-karte{--awb-width-large:50%;--awb-width-medium:50%;--awb-width-small:100%}
body .ps-karte .ps-karte-bild{display:block;overflow:hidden;background:var(--awb-color3)}
body .ps-karte .ps-karte-bild img{width:100%;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
body .ps-karte:hover .ps-karte-bild img{transform:scale(1.03)}
body .ps-karte:hover h3{color:var(--awb-color5)}
body .ps-karte:has(.fusion-column-anchor:focus-visible){outline:2px solid var(--awb-color5);outline-offset:3px}
body .ps-award{align-self:flex-start}
body .ps-award p{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:13px;font-weight:700;background:var(--awb-color8);color:var(--awb-color1);padding:6px 11px}
body .ps-award p::before{content:"";width:7px;height:7px;background:var(--awb-color4)}
body .ps-mehr{align-self:flex-start}
body .ps-mehr p{margin:0;font-size:14px;font-weight:700;border-bottom:1px solid var(--awb-color4);padding-bottom:1px}
body .ps-karte:hover .ps-mehr p{color:var(--awb-color5)}
/* Filter der Post Cards (Referenzen) als Pixel-Pillen */
body .ps-referenzen-karten .fusion-filters{display:flex;flex-wrap:wrap;gap:30px;margin:0 0 32px;padding:0;border:0;border-bottom:1px solid var(--awb-color6);list-style:none}
body .ps-referenzen-karten .fusion-filter{margin:0;padding:0;border:0}
/* Filter als Textreiter (Tina 12.10., Variante B): aktiv = schwarz, fett, grünes Pixel davor – dieselbe „du bist hier“-Logik wie Menü und Inhaltsverzeichnis */
body .ps-referenzen-karten .fusion-filter a{display:inline-flex;align-items:center;gap:8px;font-weight:400;color:var(--awb-color7);border:0;border-radius:0;background:none;padding:0 0 12px;text-decoration:none;transition:color .2s}
body .ps-referenzen-karten .fusion-filter a::before{content:"";width:8px;height:8px;background:transparent;flex:none;transition:background .2s}
body .ps-referenzen-karten .fusion-filter.fusion-active a{color:var(--awb-color8);font-weight:700;background:none}
body .ps-referenzen-karten .fusion-filter.fusion-active a::before{background:var(--awb-color4)}
body .ps-referenzen-karten .fusion-filter a:hover{color:var(--awb-color8)}
body .ps-referenzen-karten .ps-anzahl{font-size:12px;font-weight:400;color:var(--awb-color7);align-self:flex-start;margin:-2px 0 0 -4px}
body .ps-referenzen-karten .fusion-grid{display:flex;flex-wrap:wrap;align-items:stretch;gap:var(--awb-row-spacing,24px) var(--awb-column-spacing,24px);margin:0;padding:0}
/* Avada legt jede Karte in einen eigenen Container; der Filter blendet nur die Karte (li) aus. Container und Zeile „auflösen“, damit ausgeblendete Karten keinen Platz belegen. */
body .ps-referenzen-karten .fusion-grid>*,body .ps-referenzen-karten .fusion-grid>*>.fusion-builder-row{display:contents}
body .ps-referenzen-karten .fusion-grid-column{--awb-col-width:calc((100% - var(--awb-column-spacing,24px)) / 2);width:var(--awb-col-width);margin:0}
@media (max-width:900px){
body .ps-referenzen-karten .fusion-grid-column{--awb-col-width:calc(50% - 12px)}
body .ps-referenzen-karten .fusion-filters{display:flex!important;flex-wrap:wrap;gap:24px;flex-direction:row}
body .ps-referenzen-karten .fusion-filter{width:auto!important;display:block!important}
   /* Avada stapelt die Filter mobil mit !important */}
@media (max-width:600px){
body .ps-referenzen-karten .fusion-grid-column{--awb-col-width:100%}
}
/* Handy einspaltig, Tablet zweispaltig */
@media (max-width:600px){
body .ps-referenzen-karten .fusion-filters{gap:18px}
body .ps-referenzen-karten .fusion-filter a{font-size:15px;gap:6px}
}
/* alle vier Filter auf einer Zeile *//* Karte ohne Link zur Website (Website nicht von pixelschupfa): kein „Website ansehen“ */
body .ps-karte:not(:has(.fusion-column-anchor[href^="http"])) .ps-mehr{display:none}
body .ps-referenzen-karten .ps-karte .fusion-column-wrapper>.fusion-text:empty,body .ps-referenzen-karten .ps-award:not(:has(p)){display:none}
body .filter{display:flex;flex-wrap:wrap;gap:10px}
body .filter button{display:inline-flex;align-items:center;gap:8px;font:700 15px var(--awb-typography3-font-family);color:var(--awb-color8);background:transparent;border:1px solid var(--awb-color6);border-radius:999px;padding:9px 18px;cursor:pointer;transition:all .2s}
body .filter button::before{content:"";width:7px;height:7px;background:var(--awb-color6);transition:background .2s}
body .filter button[aria-pressed=true]{background:var(--awb-color8);color:var(--awb-color1);border-color:var(--awb-color8)}
body .filter button[aria-pressed=true]::before{background:var(--awb-color4)}
/* === Website-Check: Pixel-Raster und Prüfliste === */
body .ps-raster{position:relative;overflow:hidden}
body .ps-raster>canvas{position:absolute;inset:0;width:100%;height:100%}
body .ps-raster>.fusion-builder-row{position:relative;pointer-events:none}
body .ps-raster>.fusion-builder-row :is(a,button){pointer-events:auto}
body .ps-pruefliste{display:grid;gap:2px}
body .ps-pruefliste .fusion-li-item{align-items:center;font-weight:700;backdrop-filter:blur(2px)}
body .ps-pruefliste .icon-wrapper{position:relative;width:22px;height:22px;border:1.5px solid #6b665c;background:none}
body .ps-pruefliste .icon-wrapper i{display:none}
body .ps-pruefliste .icon-wrapper::after{content:"";position:absolute;inset:4px;background:var(--awb-color4);transform:scale(0);transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
body .ps-pruefliste.drin .icon-wrapper::after{transform:scale(1)}
body .ps-pruefliste.drin .fusion-li-item:nth-child(2) .icon-wrapper::after{transition-delay:.15s}
body .ps-pruefliste.drin .fusion-li-item:nth-child(3) .icon-wrapper::after{transition-delay:.3s}
body .ps-pruefliste.drin .fusion-li-item:nth-child(4) .icon-wrapper::after{transition-delay:.45s}
body .ps-pruefliste.drin .fusion-li-item:nth-child(5) .icon-wrapper::after{transition-delay:.6s}
/* Prüfliste mit Erklärung (Website-Check-Seite): Frage fett, Erklärung klein */
body .ps-pruefliste-erklaert .fusion-li-item{align-items:flex-start}
body .ps-pruefliste-erklaert .icon-wrapper{margin-top:4px}
body .ps-pruefliste-erklaert .fusion-li-item-content{font-size:14px;line-height:1.5;font-weight:400;color:var(--awb-custom_color_6)}
body .ps-pruefliste-erklaert .fusion-li-item-content strong{display:block;font-size:19px;line-height:1.4;font-weight:700;color:var(--awb-color1);margin-bottom:4px}
body .ps-pruefliste-erklaert .fusion-li-item-content br{display:none}
@media (max-width:900px){
body .ps-pruefliste .fusion-li-item{font-size:17px}
body .ps-pruefliste-erklaert .fusion-li-item-content strong{font-size:17px}
}
/* === Liste mit Pixel statt Häkchen (Checklist, Klasse ps-liste-pixel; + ps-liste-hell = taupe Pixel) === */
body .ps-liste-pixel{--awb-icon-margin:16px!important;--awb-content-margin:26px!important}
body .ps-liste-pixel .fusion-li-item{align-items:flex-start}
body .ps-liste-pixel .icon-wrapper{position:relative;width:10px!important;height:10px!important;min-width:10px;margin-top:.6em;background:var(--awb-color4);border:0}
body .ps-liste-hell .icon-wrapper{background:var(--awb-color6)}
body .ps-liste-pixel .icon-wrapper i{display:none}
/* === Spiel [pxs_spiel] und Verlosung === */
body .spiel-anzeige{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;font-size:14px;color:var(--awb-color7);margin-bottom:12px}
body .spiel-anzeige b{color:var(--awb-color8);font-size:17px;margin-left:4px}
body .schupfer{display:inline-flex;gap:6px;margin-left:auto}
body .schupfer i{width:12px;height:12px;background:var(--awb-color4)}
body .schupfer i.weg{background:transparent;box-shadow:inset 0 0 0 1.5px var(--awb-color6)}
body .spielfeld{display:block;width:100%;aspect-ratio:600/480;background:var(--awb-color2);border:2px solid var(--awb-color8);touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
body .spielfeld:active{cursor:grabbing}
body .spiel-steuerung{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}
body .spiel-steuerung button{display:inline-flex;align-items:center;gap:8px;font:700 14px var(--awb-typography3-font-family);color:var(--awb-color8);background:transparent;border:1px solid var(--awb-color6);border-radius:999px;padding:8px 14px;cursor:pointer}
body .spiel-steuerung button::before{content:"";width:6px;height:6px;background:var(--awb-color6)}
body .spiel-steuerung button[aria-pressed=true]{background:var(--awb-color8);color:var(--awb-color1);border-color:var(--awb-color8)}
body .spiel-steuerung button[aria-pressed=true]::before{background:var(--awb-color4)}
body .spiel-steuerung button.zu{color:var(--awb-custom_color_3);border-style:dashed}
body .spiel-steuerung .ton{margin-left:auto}
body .spiel-meldung-box{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-top:14px;min-height:44px}
body .spiel-meldung{font-size:16px;font-weight:700;margin:0}
body .nochmal[hidden],body .nochmal-klein[hidden]{display:none}
body .nochmal-klein{background:none;border:0;padding:4px 0;font:inherit;font-size:14px;color:var(--awb-color7);text-decoration:underline;text-decoration-color:var(--awb-color4);text-underline-offset:3px;cursor:pointer}
body .nochmal-klein:hover{color:var(--awb-color8)}
body .ps-sperre p{display:flex;gap:12px;align-items:flex-start;margin:0;font-size:15px;font-weight:700;color:var(--awb-color1);border:1px dashed #6b665c;padding:14px 16px}
body .ps-sperre p::before{content:"";width:10px;height:10px;margin-top:6px;background:#6b665c;flex:none}
body .ps-verlosung .pxs-verlosung-form{display:none;margin-top:22px}
body .ps-verlosung.frei .pxs-verlosung-form{display:block}
body .ps-verlosung.frei .ps-sperre{display:none}
body .ps-verlosung .fusion-text a{color:var(--awb-color1)}
@media (max-width:900px){
body .schupfer{margin-left:0}
}
/* === Leistungsseiten: Punkte, Handy, Kundenfragen === */
body .ps-punkt>.fusion-column-wrapper::before{content:"";display:block;width:10px;height:10px;background:var(--awb-color4);margin-bottom:18px}
@media (max-width:900px){
body .ps-punkt>.fusion-column-wrapper{border-right-width:0!important}
body .fusion-layout-column.ps-punkt{border-right-width:0!important}
body .ps-punkt+.ps-punkt+.ps-punkt>.fusion-column-wrapper,body .fusion-layout-column.ps-punkt+.ps-punkt+.ps-punkt{border-top-width:0!important}
}
/* zweispaltig: nur die erste Reihe hat eine Linie oben (Tina 13.10.: doppelte Linie) */
@media (max-width:600px){
body .ps-punkt+.ps-punkt>.fusion-column-wrapper,body .fusion-layout-column.ps-punkt+.ps-punkt{border-top-width:0!important}
}
body .ps-druck{transform:rotate(-2deg);box-shadow:0 18px 40px rgba(0,0,0,.35);overflow:visible!important;line-height:0}
/* Drehung + Schatten am Rahmen statt am Bild: Avadas .fusion-imageframe hat overflow:hidden und schnitt die gedrehten Ecken ab (wirkte wie ein Trapez, Tina 12.10.) */
body .ps-druck img{display:block;transform:none}
@media (max-width:600px){
body .ps-druck{max-width:calc(100% - 28px)!important}
}
/* Handy: Platz für gedrehte Ecken und Schatten bis zum Rand */
body .ps-druck--gerade{transform:none}
/* große Titel bei Bedarf gerade, Schatten bleibt */
body .ps-handy img{background:#000;border-radius:28px;padding:8px;box-shadow:0 24px 60px rgba(0,0,0,.45)}
body .ps-dunkel .fusion-button.ps-leise{border-color:var(--awb-color4)}
body .ps-dunkel .fusion-button.ps-leise .fusion-button-text{color:var(--awb-color1)}
/* Kundenfragen = Avada-Element „Toggles“ (Klasse ps-fragen): Schrift, Farben, Linien in den Element-Optionen; hier nur Abstände und das Pixel-Plus */
body .ps-fragen .panel-group{border-top:1px solid var(--awb-color6)}
body .ps-fragen .panel-title a{justify-content:space-between;align-items:center;gap:24px;padding:24px 0}
body .ps-fragen .panel-title a:focus-visible{outline:2px solid var(--awb-color5);outline-offset:4px}
body .ps-fragen .panel-body{padding:0 48px 26px 0}
body .ps-fragen .panel-body p{margin:0}
body .ps-fragen .fusion-toggle-icon-wrapper{position:relative;flex:none;width:22px;height:22px}
body .ps-fragen .panel-title a .fusion-toggle-icon-wrapper i.fa-fusion-box{display:none}
body .ps-fragen .fusion-toggle-icon-wrapper::before,body .ps-fragen .fusion-toggle-icon-wrapper::after{content:"";position:absolute;left:6px;top:6px;width:10px;height:10px;background:var(--awb-color4);transition:all .35s cubic-bezier(.34,1.56,.64,1)}
body .ps-fragen .panel-title a[aria-expanded="true"] .fusion-toggle-icon-wrapper::before,body .ps-fragen .panel-title a[aria-expanded="true"] .fusion-toggle-icon-wrapper::after{left:0;top:10px;width:22px;height:2px;background:var(--awb-color8)}
@media (max-width:900px){
body .ps-fragen .panel-title a{padding:20px 0}
body .ps-fragen .panel-body{padding:0 0 22px 0}
}
/* === Danke-, 404- und Textseiten === */
body .ps-danke-pixel::before{content:"";display:block;width:18px;height:18px;background:var(--awb-color4);margin-bottom:28px}
/* Abmelde-Seite: der Pixel sinkt einmal „traurig“ ab und wird blasser */
body .ps-pixel-traurig::before{animation:pixel-traurig 1.6s cubic-bezier(.4,0,.2,1) .4s both}
@keyframes pixel-traurig{from{transform:translateY(-16px);opacity:1}to{transform:rotate(8deg);opacity:.55}}
@media (prefers-reduced-motion:reduce){
body .ps-pixel-traurig::before{animation:none;transform:rotate(8deg);opacity:.55}
}
body .ps-spiel-link.ps-auf-hell a{color:var(--awb-color8);font-weight:700}
body .ps-spiel-link.ps-auf-hell a:hover em{color:var(--awb-color5)}
body .ps-entwurf p{display:flex;gap:12px;align-items:center;margin:0;background:var(--awb-color8);color:var(--awb-color1);font-weight:700;padding:14px 18px}
body .ps-entwurf p::before{content:"";width:10px;height:10px;background:var(--awb-color4);flex:none}
body .ps-rechtstext h2{font-size:22px;line-height:1.25;margin:36px 0 0}
body .ps-rechtstext :is(p,li){margin:10px 0 0}
body .ps-rechtstext ul{padding-left:20px;margin:0}
body .ps-rechtstext .ps-lead{font-size:19px}
body .ps-rechtstext mark{background:#E8EBD5;color:inherit;padding:0 4px}
/* === Kontakt === */
body .ps-person strong{font-size:17px;font-weight:600;color:var(--awb-color8)}
body .ps-kontaktdaten p+p{margin-top:14px}
body .ps-kontaktdaten strong{display:block;margin-bottom:2px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--awb-color7)}
body .ps-kontaktdaten a{text-decoration:none;border-bottom:1px solid var(--awb-color6)}
body .ps-kontaktdaten a:hover{color:var(--awb-color5);border-color:var(--awb-color5)}
/* === Kopfbereich mit Avada-Menü === */
body .ps-kopf{border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
body .ps-kopf.gescrollt{border-bottom-color:var(--awb-color6);box-shadow:0 6px 18px rgba(29,29,27,.06)}
body .ps-menue .menu-item-has-children>.awb-menu__main-a .menu-text::after{content:"";display:inline-block;width:5px;height:5px;margin-left:7px;vertical-align:2px;background:var(--awb-color4)}
body .ps-menue .awb-menu__sub-ul{box-shadow:0 10px 30px rgba(29,29,27,.12);margin-left:-18px}
body .ps-menue .awb-menu__sub-a{position:relative}
body .ps-menue .awb-menu__sub-a::before{content:"";position:absolute;left:18px;top:50%;width:6px;height:6px;margin-top:-3px;background:var(--awb-color6);transition:background .2s,transform .2s}
body .ps-menue .awb-menu__sub-a:hover::before,body .ps-menue .current-menu-item>.awb-menu__sub-a::before{background:var(--awb-color4);transform:scale(1.4)}
/* Menüpunkt mit CSS-Klasse „knopf“ (Design → Menüs) = dunkler Button */
body .ps-menue li.knopf{--awb-color:var(--awb-color1);--awb-active-color:var(--awb-color8)}
body .ps-menue li.knopf>.awb-menu__main-a{position:relative;display:inline-flex;align-items:center;gap:10px;background:var(--awb-color8);font-size:16px;font-weight:700;padding:13px 24px 13px 20px;border-radius:999px;overflow:hidden;isolation:isolate}
body .ps-menue li.knopf>.awb-menu__main-a::before{content:"";position:relative;z-index:0;width:8px;height:8px;background:var(--awb-color4);flex:none;transition:transform .45s cubic-bezier(.5,0,.2,1)}
body .ps-menue li.knopf>.awb-menu__main-a:hover::before{transform:scale(60)}
body .ps-menue li.knopf .menu-text{position:relative;z-index:1}
body .ps-menue :is(.awb-menu__main-background-default,.awb-menu__main-background-active){display:none}
/* Menü-Knopf am Handy: Pixelraster statt Hamburger */
body .ps-menue .awb-menu__m-toggle-inner{display:flex;align-items:center;gap:10px}
body .ps-menue .collapsed-nav-text{font-weight:700}
body .ps-menue .awb-menu__m-collapse-icon{position:relative;width:19px;height:19px;font-size:0}
body .ps-menue .awb-menu__m-collapse-icon>span{display:none}
body .ps-menue .awb-menu__m-collapse-icon::before{content:"";position:absolute;left:0;top:0;width:5px;height:5px;background:var(--awb-color8);box-shadow:7px 0 var(--awb-color8),14px 0 var(--awb-color8),0 7px var(--awb-color8),7px 7px var(--awb-color8),14px 7px var(--awb-color8),0 14px var(--awb-color8),7px 14px var(--awb-color8),14px 14px var(--awb-color4)}
body .ps-menue .awb-menu__m-toggle[aria-expanded=true] .awb-menu__m-collapse-icon::before{left:-1px;top:8px;width:21px;height:2.5px;box-shadow:none;transform:rotate(45deg)}
body .ps-menue .awb-menu__m-toggle[aria-expanded=true] .awb-menu__m-collapse-icon::after{content:"";position:absolute;left:-1px;top:8px;width:21px;height:2.5px;background:var(--awb-color8);transform:rotate(-45deg)}
@media (max-width:900px){
body #boxed-wrapper .ps-menue.collapse-enabled .awb-menu__main-ul{background:var(--awb-color2);position:fixed;top:calc(64px + var(--wp-admin--admin-bar--height,0px));left:0;right:0;flex-direction:column;align-items:stretch;padding:0 16px 24px;border-bottom:1px solid var(--awb-color6);max-height:calc(100svh - 64px - var(--wp-admin--admin-bar--height,0px));overflow:auto;z-index:100}
body #boxed-wrapper .ps-menue.collapse-enabled .awb-menu__main-a{padding:12px 0!important;min-height:0!important;font-size:21px;font-weight:700;border-bottom:1px solid var(--awb-custom_color_5)}
body #boxed-wrapper .ps-menue.collapse-enabled .awb-menu__open-nav-submenu_mobile,body #boxed-wrapper .ps-menue.collapse-enabled .menu-item-has-children>.awb-menu__main-a .menu-text::after{display:none!important}
body #boxed-wrapper .ps-menue.collapse-enabled .awb-menu__sub-ul{position:static!important;display:block!important;opacity:1!important;visibility:visible!important;transform:none!important;margin:0;padding:2px 0 4px;box-shadow:none;background:none!important}
body #boxed-wrapper .ps-menue.collapse-enabled .awb-menu__sub-a{min-height:0!important;padding:7px 0 7px 22px!important;font-size:17px;font-weight:400;background:none!important}
body #boxed-wrapper .ps-menue.collapse-enabled .awb-menu__sub-a::before{left:2px}
body #boxed-wrapper .ps-menue.collapse-enabled .awb-menu__sub-li,body #boxed-wrapper .ps-menue.collapse-enabled .awb-menu__sub-a{border:0!important}
body #boxed-wrapper .ps-menue.collapse-enabled li.knopf{margin-top:22px;display:flex;border:0}
body #boxed-wrapper .ps-menue.collapse-enabled li.knopf>.awb-menu__main-a{border-bottom:0!important}
body #boxed-wrapper .ps-menue.collapse-enabled li.knopf>.awb-menu__main-a{display:inline-flex!important;align-self:flex-start;margin-left:0!important;width:auto!important;font-size:18px;padding:16px 30px 16px 24px!important;border:0;border-radius:999px!important;background:var(--awb-color8)!important;color:var(--awb-color1)!important}

}
/* === Fußbereich === */
body .fusion-tb-footer{background:var(--awb-color8)}
body .ps-fuss-reihe>.fusion-builder-row{border-top:1px solid var(--awb-custom_color_4)}
body .ps-pixelkante,body .fusion-image-element:has(>.ps-pixelkante){display:block;line-height:0}
body .ps-pixelkante img{display:block;width:100%;height:22px;object-fit:fill;background:var(--awb-color2)}
body .ps-fuss-text a{color:inherit;text-decoration:none}
body .ps-fuss-text a:hover{color:var(--awb-color1)}
body .ps-fuss-text strong{font-weight:600;color:var(--awb-color1)}
body .ps-spiel-link a{display:inline-flex;align-items:baseline;gap:10px;color:var(--awb-color1);text-decoration:none}
body .ps-spiel-link a::before{content:"";width:8px;height:8px;background:var(--awb-color4);flex:none;align-self:center}
/* Text und kursives „Pixel!“ auf einer Grundlinie, das Pixel mittig (Tina 12.10.) */
body .ps-spiel-link a:hover em{color:var(--awb-color4)}
@media (max-width:900px){
body .fusion-tb-footer .ps-spiel-link a{white-space:nowrap;font-size:16px}
}
body .ps-fuss-zeile .ps-social{margin-left:auto}
body .ps-fuss-zeile .fusion-text p{margin:0;line-height:1.6}
body .ps-nl-hinweis a{color:inherit;text-decoration:underline;text-underline-offset:2px}
body .ps-nl-hinweis a:hover{color:var(--awb-color1)}
body .ps-social .fusion-instagram{order:-1}
body .ps-social .fusion-social-networks-wrapper{display:inline-flex;align-items:center;gap:16px}
body .schlaf{display:inline-flex;align-items:center;gap:12px}
body .schlaefer{position:relative;width:12px;height:12px;background:var(--awb-color4);border:0;padding:0;cursor:pointer;animation:schlafen 3.6s ease-in-out infinite}
body .schlaefer::before{content:"";position:absolute;inset:-14px}
body .schlaefer::after{content:"z";position:absolute;left:14px;top:-14px;font:italic 600 13px var(--awb-custom_typography_1-font-family);color:var(--awb-custom_color_3);animation:zett 3.6s ease-in-out infinite}
body .schlaefer.wach,body .schlaefer.wach::after{animation:none}
body .schlaefer.wach::after{content:""}
@keyframes schlafen{0%,100%{transform:scale(.8);opacity:.55}50%{transform:scale(1.05);opacity:1}}
@keyframes zett{0%,40%{opacity:0;transform:translateY(4px)}60%{opacity:1}100%{opacity:0;transform:translateY(-6px)}}
body .psst{font-size:14px;color:var(--awb-color1)}
body .psst a{color:var(--awb-color1);border-bottom:1px solid var(--awb-color4);text-decoration:none}
@media (max-width:900px){
body .ps-fuss-zeile .ps-social{margin-left:0;order:-1;width:100%}
}
/* === Bewegung reduzieren === */
@media (prefers-reduced-motion:reduce){
body *,body *::before,body *::after{animation:none!important;transition:none!important}
html{scroll-behavior:auto}
}
/* auch ::before/::after (Testbericht M2: atmender Hero-Pixel) *//* === Menü: Sprungmarken (/#…) nicht als „aktuelle Seite“ einfärben === */
body .ps-menue .awb-menu__main-li.current-menu-item:not(.knopf):has(>a[href*="#"]):not(:hover){--awb-active-color:var(--awb-color8)}
body .ps-menue li.knopf:not(:hover){--awb-active-color:var(--awb-color1)}
/* === Formulare (Feldfarben, Rahmen und Höhe stehen in Avada → Forms) === */
body .pxs-form.fusion-form .fusion-form-field{margin:0 0 18px}
body .pxs-form.fusion-form .fusion-builder-row{column-gap:18px;flex-wrap:wrap}
body .pxs-form.fusion-form .fusion_builder_column_1_2{width:calc(50% - 9px)}
body .pxs-form.fusion-form .fusion-form-label-wrapper label,body .pxs-form.fusion-form legend,body .pxs-form.fusion-form .fusion-form-textarea-field>label{display:block;font-size:14px;font-weight:700;line-height:1.4;margin:0 0 6px;padding:0}
body .pxs-form.fusion-form :is(.fusion-form-label-wrapper abbr,.fusion-form-element-required){display:none}
body .pxs-form.fusion-form .fusion-form-field :is(input[type=text],input[type=email],input[type=tel],input[type=url],textarea){padding:11px 14px;height:auto;min-height:48px;font-size:17px;line-height:1.5}
body .pxs-form.fusion-form textarea{min-height:120px;resize:vertical}
body .pxs-form.fusion-form legend .label{font:inherit;color:inherit}
body .pxs-form.fusion-form fieldset{border:0;margin:0;padding:0;min-width:0}
/* Themen als Pillen */
body .pxs-form.fusion-form :is(.fusion-form-checkbox-field,.fusion-form-radio-field) fieldset,body .pxs-form.fusion-form :is(.fusion-form-checkbox-field,.fusion-form-radio-field) .fusion-form-input-wrapper{display:flex;flex-wrap:wrap;gap:10px}
body .pxs-form.fusion-form :is(.fusion-form-checkbox-field,.fusion-form-radio-field) legend{flex:0 0 100%}
body .pxs-form.fusion-form :is(.fusion-form-checkbox-field,.fusion-form-radio-field) :is(.fusion-form-checkbox,.fusion-form-radio){position:relative;margin:0;padding:0}
body .pxs-form.fusion-form :is(.fusion-form-checkbox-field,.fusion-form-radio-field) :is(.fusion-form-checkbox,.fusion-form-radio) input{position:absolute;opacity:0;pointer-events:none}
body .pxs-form.fusion-form :is(.fusion-form-checkbox-field,.fusion-form-radio-field) :is(.fusion-form-checkbox,.fusion-form-radio) label{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;border:1px solid var(--awb-color6);border-radius:999px;padding:8px 16px;margin:0;cursor:pointer;transition:all .2s}
body .pxs-form.fusion-form :is(.fusion-form-checkbox-field,.fusion-form-radio-field) :is(.fusion-form-checkbox,.fusion-form-radio) label::before{content:"";position:static;width:7px;height:7px;min-width:0;border:0;border-radius:0;margin:0;background:var(--awb-color6);transform:none;box-shadow:none}
body .pxs-form.fusion-form :is(.fusion-form-checkbox-field,.fusion-form-radio-field) :is(.fusion-form-checkbox,.fusion-form-radio) label::after{display:none}
body .pxs-form.fusion-form :is(.fusion-form-checkbox-field,.fusion-form-radio-field) :is(.fusion-form-checkbox,.fusion-form-radio) input:checked+label{background:var(--awb-color8);border-color:var(--awb-color8);color:var(--awb-color1)}
body .pxs-form.fusion-form :is(.fusion-form-checkbox-field,.fusion-form-radio-field) :is(.fusion-form-checkbox,.fusion-form-radio) input:checked+label::before{background:var(--awb-color4)}
body .pxs-form.fusion-form :is(.fusion-form-checkbox-field,.fusion-form-radio-field) :is(.fusion-form-checkbox,.fusion-form-radio) input:focus-visible+label{outline:2px solid var(--awb-color5);outline-offset:2px}
/* Zustimmung: eckiges Kästchen */
body .pxs-form.fusion-form .fusion-form-consent-field .fusion-form-checkbox{display:flex;gap:12px;align-items:flex-start;margin:0;padding:0}
body .pxs-form.fusion-form .fusion-form-consent-field .fusion-form-checkbox input{position:static;opacity:1;-webkit-appearance:none;appearance:none;flex:0 0 18px;width:18px!important;min-width:18px;max-width:18px;height:18px!important;padding:0;margin:2px 0 0;border:1.5px solid var(--awb-color6);background:var(--awb-color1);border-radius:0;cursor:pointer}
body .pxs-form.fusion-form .fusion-form-consent-field .fusion-form-checkbox input:checked{background:var(--awb-color4);border-color:var(--awb-color8);box-shadow:inset 0 0 0 3px var(--awb-color1)}
body .pxs-form.fusion-form .fusion-form-consent-field .fusion-form-checkbox label{display:block;padding:0;margin:0;font-size:14px;font-weight:400;line-height:1.5;cursor:pointer}
body .pxs-form.fusion-form .fusion-form-consent-field .fusion-form-checkbox label::before,body .pxs-form.fusion-form .fusion-form-consent-field .fusion-form-checkbox label::after{display:none}
body .pxs-form.fusion-form .fusion-form-consent-field label a{color:inherit;text-decoration:underline}
body .pxs-form.fusion-form .hinweis-frei{font-size:13px;line-height:1.5;color:#BDB6A8;margin:0 0 18px}
body .pxs-form.fusion-form .fusion-alert{border:0;border-left:3px solid var(--awb-color4);border-radius:0;background:transparent;color:inherit;padding:6px 0 6px 16px;margin:12px 0 0;box-shadow:none;font-size:16px}
body .pxs-form.fusion-form .fusion-alert :is(.alert-icon,.close){display:none}
/* Erfolgsmeldung in Markengrün, linksbündig (Tina 14.10.) */
body .pxs-form.fusion-form .fusion-alert.alert-success,body .pxs-form.fusion-form .fusion-alert.alert-success *{color:var(--awb-color5)}
body .pxs-form.fusion-form .fusion-alert .fusion-alert-content-wrapper{justify-content:flex-start;text-align:left}
body .pxs-form-dunkel.fusion-form .fusion-alert.alert-success,body .pxs-form-dunkel.fusion-form .fusion-alert.alert-success *{color:var(--awb-color4)}
/* dunkle Variante (Verlosung) */
body .pxs-form-dunkel.fusion-form{color:var(--awb-color1)}
body .pxs-form-dunkel.fusion-form .fusion-form-field :is(input[type=text],input[type=email]){min-height:0;color:var(--awb-color1);background:transparent;border-bottom-color:#8f887b;padding:10px 0}
/* Verlosung auf Schwarz: Beschriftungen und Platzhalter sichtbar (Tina 12.10.) */
body .pxs-form-dunkel.fusion-form :is(.fusion-form-label-wrapper label,label.fusion-form-label,.fusion-form-label){color:var(--awb-color1)}
body .pxs-form-dunkel.fusion-form .fusion-form-label-wrapper .fusion-form-required,body .pxs-form-dunkel.fusion-form .awb-form-required{color:var(--awb-color4)}
body .pxs-form-dunkel.fusion-form .fusion-form-field :is(input,textarea)::placeholder{color:#CFC8BB;opacity:1}
body .pxs-form-dunkel.fusion-form .fusion-form-consent-field .fusion-form-checkbox input{background:transparent;border-color:#8f887b}
body .pxs-form-dunkel.fusion-form .fusion-form-consent-field .fusion-form-checkbox input:checked{border-color:var(--awb-color4);box-shadow:inset 0 0 0 3px var(--awb-color8)}
body .pxs-form-dunkel.fusion-form .fusion-form-consent-field .fusion-form-checkbox label{color:var(--awb-custom_color_2)}
body .pxs-form-dunkel.fusion-form .fusion-button{--button_gradient_top_color:var(--awb-color1);--button_gradient_bottom_color:var(--awb-color1);--button_gradient_top_color_hover:var(--awb-color1);--button_gradient_bottom_color_hover:var(--awb-color1);--button_accent_color:var(--awb-color8);--button_accent_hover_color:var(--awb-color8)}
/* Newsletter im Footer: eine Zeile */
body .ps-newsletter.fusion-form .fusion-form-field{margin:0}
body .ps-newsletter.fusion-form .fusion-builder-row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
body .ps-newsletter.fusion-form .fusion-layout-column{width:auto;flex:1 1 150px}
body .ps-newsletter.fusion-form .fusion-layout-column:last-child{flex:0 0 auto}
body .ps-newsletter.fusion-form .fusion-form-label-wrapper{margin:0 0 2px}
/* Beschriftung bleibt beim Tippen stehen (Testbericht M4) */
body .ps-newsletter.fusion-form .fusion-form-label-wrapper label{font-size:13px;font-weight:400;color:#BDB6A8;margin:0}
body .ps-newsletter.fusion-form .fusion-form-label-wrapper abbr{text-decoration:none;color:inherit}
body .ps-newsletter.fusion-form .fusion-form-field :is(input[type=text],input[type=email]){min-height:0;line-height:1.5;background:transparent;color:var(--awb-color1);border-bottom-color:var(--awb-color7);font-size:15px;padding:9px 2px;height:auto}
body .ps-newsletter.fusion-form input::placeholder{color:#BDB6A8;opacity:1}
body .ps-newsletter.fusion-form .fusion-button{--button_gradient_top_color:var(--awb-color1);--button_gradient_bottom_color:var(--awb-color1);--button_gradient_top_color_hover:var(--awb-color1);--button_gradient_bottom_color_hover:var(--awb-color1);--button_accent_color:var(--awb-color8);--button_accent_hover_color:var(--awb-color8);font-size:14px;padding:10px 18px 10px 15px}
body .ps-newsletter.fusion-form .fusion-alert{background:transparent;border:0;color:var(--awb-color1);padding:10px 0 0;font-size:15px;box-shadow:none}
/* Erfolgsmeldung im Footer: Abstand nach oben, helles Markengrün, linksbündig, ohne Icon/Schließen (Tina 14.10.) */
body .ps-newsletter.fusion-form .fusion-alert{margin:20px 0 0;border-left:3px solid var(--awb-color4);border-radius:0;padding:4px 0 4px 16px}
body .ps-newsletter.fusion-form .fusion-alert.alert-success,body .ps-newsletter.fusion-form .fusion-alert.alert-success *{color:var(--awb-color4)}
body .ps-newsletter.fusion-form .fusion-alert :is(.alert-icon,.close){display:none}
body .ps-newsletter.fusion-form .fusion-alert .fusion-alert-content-wrapper{justify-content:flex-start;text-align:left}
@media (max-width:900px){
body .pxs-form.fusion-form .fusion_builder_column_1_2{width:100%}
}
/* Überschriften ohne einzelnes Wort in der letzten Zeile (Tina 12.10.) */
body :is(h1,h2,h3,h4){text-wrap:pretty}
body h2{text-wrap:balance}
/* zweizeilige H2 gleichmäßig umbrechen – kein einzelnes Wort unten */
body .fusion-fullwidth:has(h1) h2{text-wrap:pretty}
/* Seitenkopf: Akzentwort bleibt wie gestaltet *//* Anker (z. B. /website-check/#anfrage, /#kontakt, /#ueber) landen unter dem Sticky-Header */
body .fusion-fullwidth[id],body :target{scroll-margin-top:96px}
/* Escape im Untermenü: Untermenü zu, Fokus bleibt auf „Leistungen“ */
body .awb-menu .menu-item-has-children.ps-zu>.awb-menu__sub-ul{visibility:hidden!important;opacity:0!important}
/* Tablet hochkant (601–900 px): Spalten sind gestapelt – Bilder nicht über die volle Breite, Listen zweispaltig (Tina 12.10.) */
@media (min-width:601px) and (max-width:900px){
body .fusion-fullwidth:has(h1) .ps-kachel{max-width:520px}
body #ueber .ps-foto{max-width:440px}
body #ueber .fusion-builder-row-inner>.fusion-layout-column{width:33.333%!important;flex-basis:33.333%!important}
body #ueber .fusion-builder-row-inner>.fusion-layout-column p{font-size:17px}
body .fusion-layout-column.ps-punkt{width:50%!important;flex-basis:50%!important}
body .fusion-layout-column.ps-punkt:nth-of-type(odd)>.fusion-column-wrapper{padding-right:24px!important}

}
/* Rechtstexte: Links als Links erkennbar (grüne Unterstreichung), lange Adressen brechen um */
body .ps-rechtstext a{color:inherit;text-decoration:underline;text-decoration-color:var(--awb-color4);text-decoration-thickness:2px;text-underline-offset:3px;overflow-wrap:anywhere}
body .ps-rechtstext a:hover{color:var(--awb-color5)}
/* Rechtstexte mit Inhaltsverzeichnis (Datenschutz, AGB, Teilnahmebedingungen) */
body .ps-inhalt-auf summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:14px 0;font-weight:700;border-top:1px solid var(--awb-color6);border-bottom:1px solid var(--awb-color6)}
body .ps-inhalt-auf summary::-webkit-details-marker{display:none}
body .ps-inhalt-auf summary::before{content:"";width:7px;height:7px;background:var(--awb-color4)}
body .ps-inhalt-auf summary::after{content:"+";margin-left:auto;font-size:20px;line-height:1}
body .ps-inhalt-auf[open] summary::after{content:"–"}
body .ps-inhalt-nav ul{list-style:none;margin:14px 0 0;padding:0}
body .ps-inhalt-nav li{margin:0 0 8px}
body .ps-inhalt-nav a{display:flex;align-items:baseline;gap:10px;font-size:15px;line-height:1.4;color:var(--awb-color7);text-decoration:none}
body .ps-inhalt-nav a::before{content:"";flex:none;width:7px;height:7px;background:transparent}
body .ps-inhalt-nav a:hover{color:var(--awb-color8)}
body .ps-inhalt-nav a[aria-current]{color:var(--awb-color8);font-weight:700}
body .ps-inhalt-nav a[aria-current]::before{background:var(--awb-color4)}
body .ps-rechtstext h2{scroll-margin-top:110px}
body .ps-rechtstext h2:focus{outline:none}
@media (max-width:1279px){
/* Tablet quer: Verzeichnis aufklappbar über dem Text, Text volle Breite (Tina 13.10.) */
body .fusion-layout-column.ps-inhalt-spalte,body .fusion-layout-column.ps-inhalt-spalte+.fusion-layout-column{width:100%!important;flex-basis:100%!important;max-width:100%!important}
body .fusion-layout-column.ps-inhalt-spalte{margin-bottom:28px!important}

}
@media (min-width:1280px){
body .ps-inhalt-spalte>.fusion-column-wrapper{position:sticky;top:110px;align-self:flex-start;max-height:calc(100vh - 130px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
/* lange Verzeichnisse (AGB 18 Punkte) bleiben ganz erreichbar */
body .ps-inhalt-auf summary{display:none}
body .ps-inhalt-nav ul{margin-top:4px}

}
/* Logo-Größen (CD 12.10.): SVG hat 199 px Eigenbreite. Kopf am Desktop 240 px, Tablet/Handy Eigenbreite;
   Footer mit Claim 240 px überall (Tinas Entscheidung, Abweichung von CD-Vorgabe 300 px). Schutzraum ≥ 2 Pixelbreiten (~9 px) bleibt durch Kopf-Abstände frei. */
body .ps-logo-kopf img{width:198px;height:auto}
@media (min-width:901px){
body .ps-logo-kopf img{width:240px}
}
body .ps-logo-claim img{width:240px;max-width:100%;height:auto}
/* Tina 12.10.: 300 px war zu wuchtig *//* Formular-Fehlermeldungen als Text unter dem Feld (Skript „Formulare“, Tina-Testerinnen 12.10.) */
body .ps-fehler{margin:6px 0 0;font-size:14px;line-height:1.4;color:#A3261B}
body .ps-fehler:empty{display:none}
body .ps-fehler::before{content:"";display:inline-block;width:6px;height:6px;margin-right:7px;vertical-align:2px;background:currentColor}
body :is(.pxs-form-dunkel,.ps-newsletter,.ps-dunkel) .ps-fehler{color:#F4A99B}
/* Endlos-Animationen außerhalb des Bildes anhalten (Klasse setzt das Skript) – spart Rechenleistung */
body .ps-ruht,body .ps-ruht *,body .ps-ruht::before,body .ps-ruht::after,body .ps-ruht *::before,body .ps-ruht *::after{animation-play-state:paused!important}
/* Startseite, Leistungen: sprechender Link unter dem Text (Stil wie „Alle Referenzen ansehen“) */
body .ps-leistung .ps-mehr{margin:10px 0 0}
body .ps-leistung .ps-mehr a{font-size:15px;font-weight:700;color:var(--awb-color8);text-decoration:none;border-bottom:1px solid var(--awb-color6);padding-bottom:2px}
body .ps-leistung .ps-mehr a:hover{border-color:var(--awb-color5)}
body .ps-award-fuss strong{font-weight:700;color:var(--awb-color1)}
/* Footer: „Neuro Web Award“ fett wie in der Leiste oben (Tina 13.10.) *//* === Handy-Feinschliff (Tina 13.10., iPhone-Test) === */
@media (max-width:900px){
/* Startseite: Einleitung etwas kleiner, damit mehr von der Bühne zu sehen ist */
body .ps-held-lead{font-size:17px!important;line-height:1.6}
/* Menü: größere Schrift und Klickflächen */
body #boxed-wrapper .ps-menue.collapse-enabled .awb-menu__main-a{font-size:24px;padding:15px 0!important}
body #boxed-wrapper .ps-menue.collapse-enabled .awb-menu__sub-a{font-size:18px;padding:9px 0 9px 22px!important}
/* Kontakt-Knopf: normale Knopfgröße, mehr Abstand nach oben, beim Antippen dunkle Schrift auf Grün */
body #boxed-wrapper .ps-menue.collapse-enabled li.knopf{margin-top:24px!important}
/* gleich viel Luft wie unter dem Knopf (Tina 13.10.) */
body #boxed-wrapper .ps-menue.collapse-enabled li.knopf>.awb-menu__main-a{font-size:16px;padding:13px 24px 13px 20px!important}
body #boxed-wrapper .ps-menue.collapse-enabled li.knopf>.awb-menu__main-a:is(:hover,:active,:focus-visible){color:var(--awb-color8)!important}
/* Footer: Leistungen ausblenden, „Schupf den Pixel!“ unter den Kontaktdaten */
body .ps-fuss-leistungen :is(.fusion-title,.ps-fuss-menue){display:none!important}
body .ps-fuss-leistungen .ps-spiel-link{margin-top:0!important}
/* Footer unten: Social Media links, Schlafpixel rechts, Rechtliches in zwei Spalten, Copyright zuletzt */
body .ps-fuss-zeile .ps-social{order:1;width:auto;flex:1 1 auto}
body .ps-fuss-zeile .schlaf{order:2;margin-left:auto;padding-right:14px}
body .ps-fuss-zeile .ps-fuss-recht{order:3;flex:0 0 100%!important;width:100%!important;max-width:100%}
body .ps-fuss-zeile .ps-copy{order:4;flex:0 0 100%!important;width:100%!important}
body .ps-fuss-recht .awb-menu__main-li{margin:0!important;justify-content:flex-start!important;text-align:left}
body .ps-fuss-recht .awb-menu__main-a{min-height:36px!important;display:flex;align-items:center;justify-content:flex-start!important}

}
/* Handy: Rechtliches in zwei Spalten; Tablet hochkant: alles in einer Zeile (Tina 13.10.) */
@media (max-width:600px){
body .ps-fuss-recht .awb-menu__main-ul{display:grid!important;grid-auto-flow:column;grid-template-rows:repeat(3,auto);grid-template-columns:1fr 1fr;column-gap:20px;row-gap:0}
body .ps-fuss-recht .awb-menu__main-a{width:100%}

}
@media (min-width:601px) and (max-width:900px){
body .ps-fuss-recht .awb-menu__main-ul{display:flex!important;flex-wrap:wrap;justify-content:flex-start!important;column-gap:28px}

}
/* Touch-Geräte: angetippte Menüpunkte bleiben nicht grün hängen (nur die aktuelle Seite ist grün) */
@media (hover:none){
body #boxed-wrapper .ps-menue.collapse-enabled .awb-menu__main-li:not(.current-menu-item):not(.knopf),body #boxed-wrapper .ps-menue.collapse-enabled .awb-menu__sub-li:not(.current-menu-item){--awb-active-color:var(--awb-color8);--awb-mobile-active-color:var(--awb-color8)}

}
/* Newsletter im Footer: Anmelden-Knopf schließt rechts bündig mit dem Kontakt-Knopf im Kopf ab (Tina 13.10.) */
body .ps-newsletter.fusion-form .fusion-layout-column:has(.fusion-form-submit-field){width:auto!important;flex:0 0 auto!important}
body .ps-newsletter.fusion-form .fusion-layout-column:last-child:has(.form-submission-notices){flex:0 0 100%!important;width:100%!important;margin-top:-12px}
/* Meldung nach dem Absenden: eigene Zeile darunter *//* === Testbericht 13.10.: Barrierefreiheit und Feinschliff === *//* M5: Platzhalter in hellen Formularen deutlich heller als eingegebener Text */
body .pxs-form:not(.pxs-form-dunkel).fusion-form :is(input,textarea)::placeholder{color:#7A7468;opacity:1}
/* M6: Fokus und Sprungziele nicht unter dem Sticky-Kopf */
html{scroll-padding-top:96px}
@media (max-width:900px){
html{scroll-padding-top:80px}
}
/* k8: Fehlermeldung im Newsletter verschiebt die Felder nicht gegeneinander */
body .ps-newsletter.fusion-form .fusion-form-field{position:relative}
@media (min-width:601px){
body .ps-newsletter.fusion-form .ps-fehler{position:absolute;left:0;top:100%;margin:4px 0 0;white-space:nowrap}
body .ps-newsletter.fusion-form:has([aria-invalid=true]) .fusion-builder-row{padding-bottom:24px}

}
@media (max-width:600px){
body .ps-newsletter.fusion-form .fusion-builder-row{align-items:flex-start}
}
/* Handy: Felder oben bündig, Meldung darunter im Fluss *//* k2: gesperrte Level-Knöpfe besser lesbar */
body .spiel-steuerung button.zu{color:#6E685D}
/* k3: Footer am Handy mind. 14 px */
@media (max-width:900px){
body .fusion-tb-footer :is(.ps-nl-hinweis,.ps-award-fuss,.ps-copy) p{font-size:14px!important}
body .ps-fuss-recht .awb-menu__main-a{font-size:14px!important}

}
/* M9: Knopf „Weiter mit Level …“ / „Noch eine Runde“ wie die anderen Knöpfe */
body .nochmal{display:inline-flex;align-items:center;gap:10px;font:700 15px/1.2 var(--awb-typography3-font-family);color:var(--awb-color1);background:var(--awb-color8);border:0;border-radius:999px;padding:12px 22px 12px 18px;cursor:pointer}
body .nochmal::before{content:"";width:8px;height:8px;background:var(--awb-color4);flex:none}
body .nochmal:hover::before{transform:scale(1.3)}
/* M10: Verlosung ohne Spiel */
body .ps-ohne-spiel p{margin:0;font-size:14px}
body .ps-ohne-spiel a{color:var(--awb-color1);text-decoration:none;border-bottom:1px solid var(--awb-color4)}
body .ps-ohne-spiel a:hover{color:var(--awb-color4)}
body .ps-verlosung.frei .ps-ohne-spiel{display:none}
/* M7: Untermenü am Tablet per Tipp geöffnet */
body .ps-menue .menu-item-has-children.ps-auf>.awb-menu__sub-ul{visibility:visible!important;opacity:1!important;transform:none!important;pointer-events:auto}
/* k18: Seite unter dem offenen Handy-Menü scrollt nicht mit */
html.ps-menue-offen,html.ps-menue-offen body{overflow:hidden}
/* k15: kein einzelnes Wort in der letzten Zeile von Rechtstext- und FAQ-Überschriften */
body .ps-rechtstext h2,body .ps-fragen .panel-title,body .fusion-fullwidth:has(h1) .fusion-title h1{text-wrap:balance}
/* k7: Bilder in Handy-Rahmen und Drucksorten-Stapel nie verzerren (Rahmen gibt das Format vor, Bild wird oben bündig eingepasst) */
body .ps-handy img,body .stapel img{object-fit:cover;object-position:50% 0}
/* Startseite Handy (Tina 13.10.): Dachzeile und Überschrift füllen die Zeilen voll aus – Dachzeile mit engerem Abstand in einer Zeile */
@media (max-width:600px){
body .ps-held-text .ps-kicker :is(h1,h2,p){letter-spacing:.06em!important;text-wrap:wrap!important}
body .ps-held-text .ps-schupf-titel :is(h1,h2){text-wrap:wrap!important}

}
/* M11 (Tina 13.10.): Fokusrahmen nur bei Tastaturbedienung (:focus-visible) – Textlinks und leise Knöpfe; auf dunklem Grund hell */
body a:focus-visible,body .fusion-button.ps-leise:focus-visible{outline:2px solid var(--awb-color5)!important;outline-offset:4px;border-radius:2px}
body :is(.ps-dunkel,.fusion-tb-footer,.ps-verlosung) :is(a,button):focus-visible{outline-color:#E9E4DA!important}
/* Barrierefreiheit (13.10.): „Menü“-Knopf am Handy mit Fokusrahmen bei Tastaturbedienung */
body .ps-menue .awb-menu__m-toggle:focus-visible{outline:2px solid var(--awb-color5)!important;outline-offset:4px;border-radius:4px}
/* Dachzeilen und Footer-Titel ab Tablet 14 px (Tina 13.10.), Handy bleibt 13 px (Startseiten-Dachzeile bleibt einzeilig) */
@media (min-width:601px){
body .ps-kicker,body .ps-kicker :is(h1,h2,h3,h4,p,div,span),body .ps-fuss-titel :is(h1,h2,h3,h4){font-size:14px!important}

}
/* Rechtstexte: erste Überschrift ohne Abstand nach oben – Text beginnt auf Höhe des Inhaltsverzeichnisses (Tina 13.10., Datenschutz aus dem Rechtstexte-Plugin) */
body .ps-rechtstext > h2:first-child,body .ps-rechtstext > :first-child > section:first-child > h2:first-child{margin-top:0}
/* Menü-Knopf am Handy (Tina 13.10.): rechts bündig mit dem Inhalt (wie das Logo links), Text und Pixel-Symbol etwas größer */
@media (max-width:900px){
body .ps-menue .awb-menu__m-toggle{padding-right:0!important}
body .ps-menue .collapsed-nav-text{font-size:17px!important}
/* Tina 13.10.: 17 px */
body .ps-menue .awb-menu__m-collapse-icon{transform:scale(1.12);transform-origin:right center}

}
/* Newsletter-Hinweis näher an die Felder (Tina 13.10.): als ein Block mit dem Formular erkennbar */
body .fusion-tb-footer .ps-nl-hinweis{margin-top:0!important;--awb-margin-top:0px}
body .fusion-tb-footer .ps-nl-hinweis p{line-height:1.6;margin-top:10px!important}
@media (min-width:601px){
body .ps-newsletter.fusion-form .fusion-builder-row{row-gap:0}
}
   /* unsichtbare Meldungs-Spalte erzeugt sonst 12 px Lücke */