/* =====================================================================
   web.pixify.ch und print.pixify.ch – das Blatt fuer ALLE Seiten beider
   Auftritte in allen vier Sprachen
   ---------------------------------------------------------------------
   Erzeugt von auftritte/bauen.php als /assets/pixify.css?v=<Abdruck>.
   Von Hand nur HIER aendern (auftritte/gemeinsam/stil.css), nie in der
   ausgelieferten Datei.

   DAS BLATT VON buchify.ch, 24.9.2026. Gabriel: «eigentlich das gleiche
   design mit Cookie Banner, vier Sprachen ect...» Uebernommen ist alles:
   Kopf mit Mega-Menue, Burger am Handy, die Bloecke, der helle Fuss mit
   Licht-Kante, das Schwebende unten. Was sich unterscheidet, sind nur
   die FARBEN - und die stehen nicht hier, sondern in auftritte/<name>/
   aufbau.php unter 'farben'. bauen.php setzt sie als :root-Block vor
   dieses Blatt. Hier steht darum keine einzige Markenfarbe als Zahl:
   nur var(--blau), var(--blau-tief) und rgba(var(--akz-rgb),…). Der
   Name --blau ist Geschichte (von buchify.ch); auf web.pixify.ch ist er
   violett, auf print.pixify.ch cyan.

   ZWEI ROLLEN, ZWEI VARIABLEN (25.9.2026, Gabriel: «bei print.pixify.ch
   hast du die falsche Farbe genommen. da muss cyan drauf sein.»):
     --blau       die Markenfarbe als FLAECHE: Knoepfe, Schilder, Punkte,
                  Haken, Raender. Auf print das Druck-Cyan #00B4D8.
     --auf-blau   die Schrift AUF dieser Flaeche. Weiss auf Violett ist
                  lesbar, Weiss auf Cyan nicht (2.5 : 1) - darum auf print
                  die dunkle Schrift der Seite.
     --blau-text  die Markenfarbe als SCHRIFT auf Hell (Verweise, Zahlen).
                  Auf web dasselbe Violett; auf print ein tieferes Cyan,
                  das auf Weiss lesbar bleibt (5.1 : 1).
   selbsttest.php (S19) misst beides: Markenfarbe = das Cyan des Favicons
   und des Schriftzugs, Kontraste mindestens 4.5 : 1.

   DAZU KAMEN die Bloecke, die buchify.ch nicht brauchte: Bild neben
   Text, eine Reihe Kennzahlen, fuenf Schritte nebeneinander und das
   Kontaktformular mit den Wegen daneben (ganz unten).
   ===================================================================== */

:root{
  --text:#0B1220;
  --text-2:#4A5670;
  --text-3:#7B879C;
  --maxw:1160px;
  --rund:20px;
  --rund-s:12px;
  --kopf-h:72px;
  --schrift:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --schatten:0 1px 2px rgba(11,18,32,.04),0 12px 40px -12px rgba(var(--tief-rgb),.18);
  --schatten-g:0 2px 6px rgba(11,18,32,.05),0 40px 90px -30px rgba(var(--tief-rgb),.30);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--grund);color:var(--text);font-family:var(--schrift);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:var(--blau-text);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.02em;line-height:1.1;color:var(--text)}
h1{font-size:clamp(38px,6vw,74px);letter-spacing:-.035em;line-height:1.03}
h2{font-size:clamp(28px,3.8vw,48px);letter-spacing:-.03em;line-height:1.07}
h3{font-size:21px;letter-spacing:-.015em}
h4{font-size:13.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);font-weight:600}
p{margin:0}
.lead{font-size:clamp(17px,1.5vw,20.5px);line-height:1.58;color:var(--text-2);max-width:64ch}
.wrap{width:min(var(--maxw),100% - 32px);margin-inline:auto}
.mitte{text-align:center}
.mitte .lead{margin-inline:auto}
section{padding:clamp(64px,8vw,116px) 0}
section.eng{padding-top:0}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;background:var(--blau);color:var(--auf-blau);padding:11px 18px;border-radius:10px;z-index:100}

/* ── Die Aura: zwei weiche blaue Lichtflaechen, sehr leise ────────── */
.aura{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.aura i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;
  background:radial-gradient(circle,rgba(var(--akz-rgb),.22),rgba(var(--akz-rgb),0) 65%)}
.aura i:nth-child(1){width:70vw;height:70vw;max-width:900px;max-height:900px;top:-30vw;right:-20vw;animation:treiben 42s ease-in-out infinite alternate}
.aura i:nth-child(2){width:50vw;height:50vw;max-width:640px;max-height:640px;bottom:-20vw;left:-15vw;animation:treiben 55s ease-in-out infinite alternate-reverse}
@keyframes treiben{from{transform:translate3d(0,0,0)}to{transform:translate3d(6vw,4vw,0)}}

/* ── Knoepfe ───────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 24px;border-radius:999px;
  font-weight:600;font-size:16px;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;white-space:nowrap;
  border:0;cursor:pointer;font-family:inherit;line-height:1.2}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-p{background:var(--blau);color:var(--auf-blau);box-shadow:0 8px 24px -10px rgba(var(--akz-rgb),.7)}
.btn-p:hover{background:var(--blau-dunkel);box-shadow:0 12px 30px -10px rgba(var(--akz-rgb),.8)}
.btn-g{background:var(--grund);color:var(--text);border:1px solid var(--linie-hell)}
.btn-g:hover{border-color:rgba(var(--tief-rgb),.35)}
.btn-s{padding:10px 18px;font-size:14.5px}
.btn-reihe{display:flex;gap:12px;flex-wrap:wrap}
.mitte .btn-reihe{justify-content:center}

/* =====================================================================
   KOPF MIT MEGA-MENUE — Bauart wie teile/nav.php auf pixify-ai.ch
   ===================================================================== */
.kopf{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.78);
  backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--linie)}
.kopf-oben{display:flex;align-items:center;gap:14px;height:var(--kopf-h)}
.logo{display:inline-flex;align-items:center;flex:none}
.logo:hover{text-decoration:none}
.marke-bild{height:58px;width:auto;display:block;flex:none}
.kopf-aktionen{margin-left:auto;display:flex;align-items:center;gap:10px}
.kopf-login{display:inline-flex;align-items:center;gap:7px;color:var(--text-2);font-weight:600;font-size:15px;padding:8px 10px;border-radius:10px}
.kopf-login:hover{color:var(--text);text-decoration:none;background:rgba(var(--akz-rgb),.06)}
.kopf-login svg{opacity:.75}
.kopf-mobil{display:none;margin-left:auto;align-items:center;gap:8px}
.rund-knopf{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;border:1px solid var(--linie-hell);
  background:#fff;color:var(--text);cursor:pointer;font-size:20px;line-height:1;padding:0;font-family:inherit}
.rund-knopf:hover{border-color:var(--blau);color:var(--blau-text);text-decoration:none}
.kopf-leiste{border-top:1px solid var(--linie)}
.hauptnav{display:flex;align-items:center;gap:2px;height:50px;position:relative}
.hauptnav > a,.mm-trigger{display:inline-flex;align-items:center;gap:6px;height:50px;padding:0 13px;color:var(--text-2);
  font-weight:600;font-size:15px;border-bottom:2px solid transparent;background:none;border-top:0;border-left:0;border-right:0;
  font-family:inherit;cursor:pointer}
.hauptnav > a:hover,.mm-trigger:hover{color:var(--text);text-decoration:none;background:rgba(var(--akz-rgb),.05)}
.hauptnav .nav-aktiv{color:var(--blau-tief);border-bottom-color:var(--blau)}
.mm-pfeil{transition:transform .2s ease;margin-top:1px}
.mm-offen .mm-pfeil{transform:rotate(180deg)}
.mm-halter{position:static;display:inline-flex}

.mm-panel{position:absolute;left:0;top:calc(100% + 1px);width:min(1080px,calc(100vw - 32px));
  display:grid;grid-template-columns:1fr 300px;gap:14px;padding:18px;background:#fff;border:1px solid var(--linie-hell);
  border-radius:0 0 22px 22px;box-shadow:0 30px 70px -30px rgba(var(--tief-rgb),.45);
  opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease;visibility:hidden}
.mm-panel::before{content:'';position:absolute;left:0;right:0;top:-12px;height:12px}
.mm-offen .mm-panel{opacity:1;pointer-events:auto;transform:none;visibility:visible}
.mm-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-content:start}
.mm-item{display:flex;align-items:flex-start;gap:12px;padding:13px 14px;border-radius:14px;border:1px solid transparent;color:var(--text);
  transition:background .15s,border-color .15s,transform .15s}
.mm-item:hover{background:var(--grund-2);border-color:var(--linie);text-decoration:none;transform:translateY(-1px)}
.mm-icon{flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--grund-3);color:var(--blau-tief);
  transition:background .15s,color .15s}
.mm-item:hover .mm-icon{background:var(--blau);color:var(--auf-blau)}
.mm-item b{display:block;font-size:15px;margin-bottom:2px;letter-spacing:-.01em}
.mm-item small{display:block;color:var(--text-3);font-size:12.8px;line-height:1.45;font-weight:500}
.mm-feature{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:22px;
  border-radius:16px;color:#fff;background:linear-gradient(150deg,var(--blau-tief) 0%,var(--blau) 58%,var(--blau-hell) 100%);min-height:220px}
.mm-feature:hover{text-decoration:none}
.mm-f-glow{position:absolute;width:220px;height:220px;border-radius:50%;right:-70px;top:-70px;
  background:radial-gradient(circle,rgba(255,255,255,.35),rgba(255,255,255,0) 68%)}
.mm-f-eyebrow{font-size:10.5px;letter-spacing:2px;text-transform:uppercase;font-weight:800;color:var(--blau-blass)}
.mm-f-zahl{font-size:40px;font-weight:800;letter-spacing:-.04em;line-height:1}
.mm-f-text{font-size:13px;line-height:1.5;color:rgba(255,255,255,.92)}
.mm-f-cta{font-size:13.5px;font-weight:700;margin-top:6px}
.mm-feature:hover .mm-f-cta{text-decoration:underline}
.mm-zurueck{display:none}

@media (max-width:1180px){
  .mm-panel{grid-template-columns:1fr 250px}
}

/* ── Am Handy und schmalen Schirmen: Burger mit Aufklappen ─────────── */
@media (max-width:980px){
  :root{--kopf-h:64px}
  /* backdrop-filter macht den Kopf zum Bezugsrahmen fuer position:fixed -
     die aufgeklappte Leiste waere dann nur so hoch wie der Kopf selbst
     (gemessen: das Menue lag unsichtbar hinter dem Inhalt). Am Handy darum
     ein fast deckender Grund ohne Filter. */
  .kopf{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.97)}
  .marke-bild{height:46px}
  .kopf-aktionen{display:none}
  .kopf-mobil{display:flex}
  .kopf-leiste{position:fixed;left:0;right:0;top:var(--kopf-h);bottom:0;z-index:59;background:#fff;border-top:1px solid var(--linie);
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,transform .18s ease}
  body.nav-offen .kopf-leiste{transform:none;opacity:1;visibility:visible;pointer-events:auto}
  body.nav-offen{overflow:hidden}
  .hauptnav{display:block;height:auto;padding:8px 0 28px}
  .hauptnav > a,.mm-trigger{display:flex;width:100%;height:auto;padding:15px 2px;font-size:17px;border-bottom:1px solid var(--linie);
    color:var(--text);justify-content:space-between}
  .hauptnav .nav-aktiv{border-bottom-color:var(--linie);color:var(--blau-tief)}
  .mm-halter{display:block}
  .mm-pfeil{display:none}
  .mm-trigger::after{content:'＋';opacity:.45;font-weight:400}
  .mm-halter.mm-auf .mm-trigger::after{content:'−'}
  .mm-halter.mm-auf .mm-trigger{color:var(--blau-text)}
  .mm-panel{position:static;display:none;width:auto;padding:4px 0 10px;border:0;border-radius:0;box-shadow:none;background:none;
    opacity:1;transform:none;visibility:visible;pointer-events:auto;grid-template-columns:1fr}
  .mm-halter.mm-auf .mm-panel{display:block}
  .mm-offen .mm-panel{display:none}
  .mm-halter.mm-auf.mm-offen .mm-panel{display:block}
  .mm-links{display:block}
  .mm-item{align-items:center;padding:10px 4px;border-radius:12px}
  .mm-item small{display:none}
  .mm-icon{width:34px;height:34px;border-radius:10px}
  .mm-feature{display:none}
  .nav-knoepfe{display:grid;gap:10px;margin-top:22px}
  .nav-knoepfe .btn{width:100%}
  .nav-sprachen{display:flex;gap:6px;justify-content:center;margin-top:22px}
  .nav-sprachen a{padding:8px 12px;border-radius:999px;border:1px solid var(--linie-hell);color:var(--text-2);font-weight:600;font-size:14px}
  .nav-sprachen a.da{background:var(--blau);border-color:var(--blau);color:var(--auf-blau)}
}
@media (min-width:981px){
  .nav-knoepfe,.nav-sprachen{display:none !important}
}

/* =====================================================================
   BLOECKE
   ===================================================================== */
/* Held */
.held{padding:clamp(52px,7.5vw,100px) 0 clamp(40px,5vw,72px);text-align:center}
.held.links{text-align:left}
.augen{display:inline-flex;align-items:center;gap:9px;padding:7px 14px;border-radius:999px;background:var(--grund-3);
  color:var(--blau-tief);font-weight:600;font-size:13.5px;letter-spacing:.01em;margin-bottom:24px}
.augen b{width:7px;height:7px;border-radius:50%;background:var(--blau);box-shadow:0 0 0 4px rgba(var(--akz-rgb),.15)}
.held h1{max-width:22ch;margin-inline:auto}
.held .lead{margin:24px auto 32px;max-width:60ch}
.held .btn-reihe{justify-content:center}
.schein{color:var(--blau-text);background:linear-gradient(92deg,var(--blau-tief),var(--blau) 55%,var(--blau-hell));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.note{margin-top:18px;font-size:14px;color:var(--text-3)}
.pfad{font-size:13.5px;color:var(--text-3);margin-bottom:18px}
.pfad a{color:var(--text-3)}
.pfad a:hover{color:var(--blau-text)}

/* Buehne mit dem Dashboard-Film */
.buehne{margin:0 auto;max-width:1080px;perspective:1600px}
.rahmen{border-radius:var(--rund);overflow:hidden;background:#F2F2F7;border:1px solid var(--linie-hell);box-shadow:var(--schatten-g)}
.leiste{display:flex;align-items:center;gap:7px;padding:12px 16px;background:var(--grund-2);border-bottom:1px solid var(--linie)}
.leiste em{width:11px;height:11px;border-radius:50%;background:#E2E6EE}
.leiste em:nth-child(1){background:#FF5F57}.leiste em:nth-child(2){background:#FEBC2E}.leiste em:nth-child(3){background:#28C840}
.adresse{margin-left:12px;flex:1;max-width:340px;padding:5px 12px;border-radius:7px;background:var(--grund-3);color:var(--text-3);font-size:12.5px;text-align:center}
.rahmen video{width:100%;height:auto;display:block;background:#F2F2F7;aspect-ratio:16/10}
.bildunter{margin-top:16px;font-size:14px;color:var(--text-3);text-align:center}

.band{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 14px;margin:34px auto 0}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid var(--linie);
  background:rgba(255,255,255,.7);font-size:14px;color:var(--text-2);font-weight:500}
.chip s{width:7px;height:7px;border-radius:50%;background:var(--gruen);text-decoration:none}

/* Ein ruhiger Satz */
.satz{padding:clamp(40px,6vw,76px) 0 0}
.satz p{font-size:clamp(21px,2.5vw,33px);line-height:1.3;letter-spacing:-.02em;color:var(--text);max-width:30ch;margin-inline:auto;
  text-align:center;font-weight:600}
.satz p span{color:var(--text-3);font-weight:500}

/* Abschnittskopf */
.abschnitt-kopf{margin-bottom:clamp(28px,4vw,52px)}
.abschnitt-kopf .lead{margin-top:16px}

/* Karten, die zu Unterseiten fuehren */
.karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.karten.k2{grid-template-columns:repeat(2,minmax(0,1fr))}
.karten.k4{grid-template-columns:repeat(4,minmax(0,1fr))}
.kachel{display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:var(--rund);background:var(--flaeche);
  border:1px solid var(--linie);box-shadow:var(--schatten);color:var(--text);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
a.kachel:hover{text-decoration:none;transform:translateY(-3px);border-color:rgba(var(--akz-rgb),.35);
  box-shadow:0 2px 6px rgba(11,18,32,.04),0 24px 48px -20px rgba(var(--akz-rgb),.35)}
.kachel .ik{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:var(--grund-3);color:var(--blau-tief)}
a.kachel:hover .ik{background:var(--blau);color:var(--auf-blau)}
.kachel b{font-size:18px;letter-spacing:-.015em;line-height:1.25}
.kachel span{color:var(--text-2);font-size:15px;line-height:1.5}
.kachel em{margin-top:auto;padding-top:6px;font-style:normal;font-weight:600;font-size:14.5px;color:var(--blau-text)}
/* Die eigenen Apps (10.10.2026): je Store ein Verweis, fehlt einer, steht «in Kürze» da */
.app-kachel .stores{margin-top:auto;padding-top:6px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
.app-kachel .stores a{font-weight:600;font-size:14.5px;color:var(--blau-text)}
.app-kachel .stores i{font-style:normal;font-size:14px;color:var(--text-2)}

/* Eine Gruppe: Kopf links, Liste rechts (wie bisher auf der Startseite) */
.gruppe{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:40px 64px;padding:clamp(36px,5vw,60px) 0;border-top:1px solid var(--linie)}
.gruppe.erste{border-top:0;padding-top:0}
.gruppe .gkopf{position:sticky;top:calc(var(--kopf-h) + 74px);align-self:start}
.gruppe .gkopf h4{margin-bottom:12px}
.gruppe .gkopf h3{font-size:clamp(25px,2.5vw,33px);letter-spacing:-.025em;margin-bottom:14px}
.gruppe .gkopf p{color:var(--text-2);max-width:36ch}
.liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;list-style:none;margin:0;padding:0}
.liste li{padding:20px 22px;border-radius:var(--rund-s);background:var(--flaeche);border:1px solid var(--linie);box-shadow:var(--schatten);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.liste li:hover{transform:translateY(-2px);border-color:rgba(var(--akz-rgb),.35);box-shadow:0 2px 6px rgba(11,18,32,.04),0 24px 48px -20px rgba(var(--akz-rgb),.35)}
.liste b{display:block;font-size:16.5px;font-weight:650;letter-spacing:-.012em;margin-bottom:5px}
.liste span{display:block;color:var(--text-2);font-size:15px;line-height:1.5}
.liste li.neu b::after{content:attr(data-neu);margin-left:8px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:#fff;background:var(--gruen);padding:2px 7px;border-radius:999px;vertical-align:2px}

/* Schritte */
.schritte{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;counter-reset:schritt;list-style:none;margin:0;padding:0}
.schritte.s3{grid-template-columns:repeat(3,minmax(0,1fr))}
.schritte li{position:relative;padding:26px 22px 22px;border-radius:var(--rund);background:var(--flaeche);border:1px solid var(--linie);box-shadow:var(--schatten)}
.schritte li::before{counter-increment:schritt;content:counter(schritt);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--blau);color:var(--auf-blau);font-weight:800;font-size:15px;margin-bottom:14px}
.schritte b{display:block;font-size:17px;margin-bottom:6px;letter-spacing:-.012em}
.schritte span{display:block;color:var(--text-2);font-size:15px;line-height:1.5}

/* Ehrlichkeit: zwei Karten */
.grau{background:var(--grund-2)}
.zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:40px}
.karte{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--rund);padding:32px;box-shadow:var(--schatten)}
.karte h3{margin-bottom:8px}
.karte > p{color:var(--text-2);margin-bottom:18px;font-size:15.5px}
.karte ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.karte ul li{padding-left:26px;position:relative;color:var(--text);font-size:15.5px;line-height:1.5}
.karte ul li::before{content:"";position:absolute;left:0;top:5px;width:14px;height:14px;border-radius:50%;border:1.5px solid var(--linie-hell)}
.karte ul li em{color:var(--text-3);font-style:normal}
.karte.nein ul li::before{background:var(--grund-3)}
.karte.bald ul li::before{border-color:var(--blau);background:rgba(var(--akz-rgb),.12)}

/* Demo-Karte */
.demo-karte{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center;background:var(--flaeche);border:1px solid var(--linie);
  border-radius:var(--rund);padding:44px 46px;box-shadow:var(--schatten)}
.demo-karte h2{margin:14px 0 18px}
.demo-karte .lead{margin:0 0 14px;font-size:16.5px}
.demo-karte .btn-reihe{margin-top:22px}
.demo-zahlen{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.demo-zahlen li{display:flex;align-items:baseline;gap:14px;padding:14px 18px;background:#fff;border:1px solid var(--linie);border-radius:var(--rund-s)}
.demo-zahlen b{font-size:30px;font-weight:800;letter-spacing:-.03em;color:var(--blau-text);min-width:2ch;text-align:right}
.demo-zahlen span{color:var(--text-2);font-size:15px}

/* Preise */
.preise{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:44px}
.preis{position:relative;padding:36px;display:flex;flex-direction:column}
.preis.best{border-color:rgba(var(--akz-rgb),.45);box-shadow:var(--schatten-g)}
.schild{position:absolute;top:-13px;left:32px;padding:5px 12px;border-radius:999px;background:var(--blau);color:var(--auf-blau);font-size:12.5px;font-weight:700;letter-spacing:.02em}
.wer{font-size:20px;font-weight:700;letter-spacing:-.015em}
.sub{color:var(--text-3);font-size:14.5px;margin:4px 0 22px}
.zahl{font-size:52px;font-weight:800;letter-spacing:-.04em;line-height:1}
.pro{color:var(--text-3);font-size:16px;margin-left:8px}
.preis ul{margin:26px 0 30px;padding:0;list-style:none;display:grid;gap:11px}
.preis ul li{padding-left:26px;position:relative;font-size:15.5px;color:var(--text)}
.preis ul li::before{content:"";position:absolute;left:2px;top:7px;width:12px;height:7px;border-left:2px solid var(--blau);border-bottom:2px solid var(--blau);transform:rotate(-45deg)}
.preis .btn{margin-top:auto;align-self:flex-start}
.fussnote{margin-top:22px;text-align:center;color:var(--text-3);font-size:14px;max-width:78ch;margin-inline:auto}

/* Lohn-Stufen */
.stufen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:10px}
/* Drei Stufen (Quittungen lesen, 24.9.2026): drei Spalten, am Handy untereinander statt zwei plus eine */
.stufen.drei{grid-template-columns:repeat(3,minmax(0,1fr));max-width:900px;margin-inline:auto}
.stufe{padding:22px;border-radius:var(--rund);background:var(--flaeche);border:1px solid var(--linie);box-shadow:var(--schatten);text-align:center}
.stufe .wie{font-size:14px;color:var(--text-3);font-weight:600}
.stufe .was{font-size:34px;font-weight:800;letter-spacing:-.035em;margin:8px 0 2px}
.stufe .wann{font-size:13.5px;color:var(--text-3)}
.stufen-fuss{margin-top:18px;color:var(--text-2);font-size:15px;text-align:center;max-width:70ch;margin-inline:auto}

/* Fragen */
.faq{max-width:780px;margin:36px auto 0;display:grid;gap:10px}
.faq details{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--rund-s);padding:0 22px}
.faq summary{cursor:pointer;list-style:none;padding:18px 0;font-weight:600;font-size:16.5px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--blau-text);font-size:22px;font-weight:400;flex:none;transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 20px;color:var(--text-2);font-size:15.5px;max-width:66ch}
.faq-mehr{text-align:center;margin-top:22px}

/* Schluss */
.schluss{text-align:center;padding:clamp(52px,7vw,86px) 28px;border-radius:calc(var(--rund) + 8px);
  background:linear-gradient(180deg,var(--grund-2),var(--grund-3));border:1px solid var(--linie)}
.schluss .lead{margin:16px auto 30px}
.schluss .btn-reihe{justify-content:center}

/* Lesespalte: Impressum, Datenschutz, AGB, Konto */
.lesen{max-width:780px;margin:0 auto;padding:clamp(40px,6vw,64px) 0 32px;font-size:17px;line-height:1.7}
.lesen h1{font-size:clamp(30px,4.5vw,42px);font-weight:800;letter-spacing:-.025em;line-height:1.15;margin:0 0 10px}
.lesen .unter{color:var(--text-3);font-size:16px;margin:0 0 8px}
.lesen .stand{color:var(--text-3);font-size:15px;margin:0 0 34px;padding-bottom:24px;border-bottom:1px solid var(--linie)}
.lesen h2{font-size:21px;font-weight:750;letter-spacing:-.01em;margin:38px 0 10px;padding-top:6px;line-height:1.3}
.lesen h3{font-size:17px;font-weight:700;margin:24px 0 6px}
.lesen p{margin:0 0 14px;color:#3D475C}
.lesen ul{margin:0 0 16px;padding-left:22px;color:#3D475C}
.lesen li{margin-bottom:7px}
.lesen li>strong,.lesen p>strong{color:var(--text);font-weight:650}
.lesen a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.lesen a.btn{text-decoration:none}
.lesen address{font-style:normal;color:#3D475C;line-height:1.9}
.lesen .kasten{background:var(--grund-2);border:1px solid var(--linie);border-radius:14px;padding:20px 22px;margin:22px 0}
.lesen .kasten p:last-child{margin-bottom:0}
.lesen .kasten.wichtig{border-left:3px solid var(--blau);background:rgba(var(--akz-rgb),.08)}
.lesen table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:15.5px;display:block;overflow-x:auto}
.lesen th,.lesen td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--linie);vertical-align:top;color:#3D475C}
.lesen th{color:var(--text);font-weight:650;white-space:nowrap}
.rechtshinweis{margin:0 0 26px;padding:12px 18px;border:1.5px solid rgba(var(--akz-rgb),.35);border-radius:12px;font-size:14px;background:rgba(var(--akz-rgb),.05)}
.wege{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:26px 0 8px}
.weg{background:var(--flaeche);border:1px solid var(--linie);border-radius:14px;padding:24px 24px 22px;display:flex;flex-direction:column}
.weg.best{border-color:var(--blau);box-shadow:0 12px 34px -22px rgba(var(--akz-rgb),.55)}
.weg h2{margin:0 0 6px !important;padding:0 !important;font-size:18px !important}
.weg .preis{font-size:26px;font-weight:800;letter-spacing:-.03em;color:var(--text);margin:4px 0 12px;padding:0;display:block}
.weg .preis small{font-size:14.5px;font-weight:500;color:var(--text-3);letter-spacing:0}
.weg p{font-size:15.5px}
.weg ul{font-size:15px;margin-bottom:18px}
.weg .btn{margin-top:auto;align-self:flex-start}

/* 404 */
.fehlerseite{text-align:center;padding:clamp(70px,10vw,140px) 0}
.fehlerseite .code{font-size:clamp(72px,12vw,150px);font-weight:800;letter-spacing:-.05em;line-height:1}
.fehlerseite p{color:var(--text-2);margin:14px auto 0;max-width:52ch}
.fehlerseite .andere{margin-top:28px;font-size:14.5px;color:var(--text-3)}

/* =====================================================================
   FUSS — Aufbau wie pixify-ai.ch, hell (Grund siehe oben)
   ===================================================================== */
.fuss{position:relative;overflow:hidden;margin-top:clamp(40px,6vw,80px);padding:64px 0 88px;
  background:linear-gradient(180deg,var(--fuss-1) 0%,var(--fuss-2) 100%);border-top:1px solid var(--linie);color:var(--text-2);font-size:14.5px}
.fz-kante{position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,rgba(var(--akz-rgb),0),rgba(var(--akz-rgb),.6),rgba(var(--hell-rgb),.2),rgba(var(--akz-rgb),0))}
.fz-glow{position:absolute;width:620px;height:620px;border-radius:50%;left:-220px;bottom:-360px;pointer-events:none;
  background:radial-gradient(circle,rgba(var(--akz-rgb),.14),rgba(var(--akz-rgb),0) 65%)}
.fz-grid{position:relative;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
.fz-marke .marke-bild{height:62px}
.fz-slogan{margin-top:14px;color:var(--text);font-weight:600;font-size:15.5px}
.fz-adresse{margin-top:14px;line-height:1.75;color:var(--text-2)}
.fz-adresse a{color:var(--text-2)}
.fz-uid{color:var(--text-3)}
.fz-demo{margin-top:18px}
.fz-titel{font-size:12.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--text-3);font-weight:700;margin-bottom:14px}
.fz-spalte p{margin:0 0 9px}
.fz-spalte a{color:var(--text-2)}
.fz-spalte a:hover{color:var(--blau-text);text-decoration:none}
.fz-pixify{margin-top:16px;padding:14px 16px;border-radius:14px;background:#fff;border:1px solid var(--linie);font-size:13.5px;line-height:1.5}
.fz-pixify b{color:var(--text)}
/* Die eigenen Apps im Fuss (10.10.2026, nur web.pixify.ch): die Abzeichen von Apple und Google
   unveraendert, 40 px hoch, 10 px Abstand = ein Viertel der Hoehe, kein Effekt darauf. */
.fz-apps{margin-top:22px}
.fz-apps .fz-titel{margin-bottom:12px}
.fz-app{margin:0 0 16px}
.fz-app b{display:block;color:var(--text);font-size:14px;font-weight:700;margin-bottom:8px}
.fz-app-abzeichen{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.fz-app-abzeichen a{display:block;line-height:0;border-radius:8px}
.fz-app-abzeichen a.fz-app-text{line-height:1.4;font-size:13.5px;color:var(--text-2)}
.fz-app-abzeichen a:focus-visible{outline:3px solid var(--blau-text);outline-offset:3px}
.fz-app-abzeichen img{display:block;height:40px;width:auto;max-width:none}
.fz-app-bald{font-size:13px;line-height:1.35;color:var(--text-3)}
.fz-app-marken{font-size:11.5px;line-height:1.45;color:var(--text-3);max-width:380px;margin:2px 0 0}
.fz-unten{position:relative;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px 22px;margin-top:44px;
  padding-top:22px;border-top:1px solid var(--linie);color:var(--text-3);font-size:13.5px}
.fz-unten a{color:var(--text-2)}
.fz-heimat{font-style:normal}
.fz-sprachen a{color:var(--text-2)}
.fz-sprachen a.da{font-weight:700;color:var(--blau-tief);text-decoration:underline;text-underline-offset:3px}

/* =====================================================================
   SCHWEBENDES: Sprachleiste unten links (neben dem Keks), Concierge
   unten rechts - wie auf pixify-ai.ch. Beide treten zur Seite, solange
   der Cookie-Kasten offen ist: am Handy lagen sie sonst auf dessen
   Knoepfen (html.cb-offen setzt pixify.js).
   ===================================================================== */
.b-spr{position:fixed;left:calc(16px + var(--pxa-keks-raum,0px));bottom:16px;z-index:9997;display:flex;gap:1px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(15,23,42,.1);
  border-radius:999px;padding:2px;box-shadow:0 6px 18px -10px rgba(15,23,42,.35)}
.b-spr a{padding:5px 9px;border-radius:999px;font:600 11px/1 var(--schrift);letter-spacing:.03em;color:#334155}
.b-spr a:hover{background:rgba(var(--akz-rgb),.1);color:var(--blau-text);text-decoration:none}
.b-spr a.da{background:var(--blau);color:var(--auf-blau)}
.b-tipp{position:fixed;left:calc(16px + var(--pxa-keks-raum,0px));bottom:58px;z-index:9997;
  max-width:min(300px,calc(100vw - 32px - var(--pxa-keks-raum,0px)));background:#fff;border:1px solid rgba(15,23,42,.12);border-radius:14px;
  padding:14px 16px;box-shadow:0 12px 34px -14px rgba(15,23,42,.45);font-size:13.5px;line-height:1.5;color:#0f172a}
.b-tipp b{display:block;margin-bottom:8px;font-weight:600}
.b-tipp a{display:inline-block;background:var(--blau);color:var(--auf-blau);border-radius:999px;padding:8px 14px;font-weight:600;font-size:12.5px}
.b-tipp a:hover{text-decoration:none}
.b-tipp button{background:none;border:0;color:#64748b;font:inherit;font-size:12.5px;cursor:pointer;margin-left:8px}

.b-con{position:fixed;right:16px;bottom:16px;z-index:9996;font-family:inherit}
.b-con-knopf{width:56px;height:56px;border-radius:50%;border:0;background:var(--blau);color:var(--auf-blau);font-size:24px;cursor:pointer;
  box-shadow:0 8px 24px rgba(var(--akz-rgb),.45);display:grid;place-items:center;padding:0}
.b-con-knopf:focus-visible{outline:3px solid var(--blau-tief);outline-offset:3px}
.b-con-box{position:absolute;right:0;bottom:68px;width:min(340px,calc(100vw - 32px));background:#fff;border:1px solid var(--linie-hell);border-radius:16px;
  box-shadow:0 16px 40px rgba(var(--tief-rgb),.22);overflow:hidden}
.b-con-box[hidden]{display:none}
.b-con-kopf{background:var(--blau-tief);color:#fff;padding:11px 14px;font-size:14px;font-weight:700;display:flex;justify-content:space-between;align-items:center}
.b-con-kopf button{background:none;border:0;color:#fff;font-size:18px;cursor:pointer;line-height:1;padding:0 2px}
.b-con-aus{padding:12px 14px;font-size:13.8px;line-height:1.55;color:#1d2640;max-height:min(300px,50vh);overflow:auto}
.b-con-aus > div{margin-bottom:10px}
.b-con-aus a{color:var(--blau-text);font-weight:700}
.b-con-chips{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px}
.b-con-chips a{background:var(--grund-3);color:var(--blau-tief);font-weight:700;font-size:12px;padding:6px 11px;border-radius:999px}
.b-con-chips a:hover{text-decoration:none;background:var(--grund-4)}
.b-con-form{display:flex;gap:6px;padding:10px;border-top:1px solid #EEF2F7}
.b-con-form input{flex:1;min-width:0;border:1px solid #D6DEE9;border-radius:10px;padding:9px 11px;font-size:16px;font-family:inherit}
.b-con-form button{border:0;background:var(--blau);color:var(--auf-blau);border-radius:10px;padding:9px 13px;font-weight:700;cursor:pointer;font-size:15px}
.b-con-hinweis{padding:0 14px 10px;font-size:11.5px;color:var(--text-3)}
html.cb-offen .b-con,html.cb-offen .b-spr,html.cb-offen .b-tipp{display:none}
body.nav-offen .b-con,body.nav-offen .b-spr,body.nav-offen .b-tipp,body.nav-offen .pxa-keks{display:none !important}

/* ── Hereinkommen ────────────────────────────────────────────────────
   Erst wenn JavaScript da ist, wird etwas versteckt - eine Seite, die
   ohne Skript leer bleibt, ist keine Seite. */
html.js .rein{opacity:0;transform:translateY(18px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
html.js .rein.da{opacity:1;transform:none}
html.js .buehne.rein{transform:translateY(28px) rotateX(4deg)}
html.js .buehne.rein.da{transform:none}

/* ── Schmal ────────────────────────────────────────────────────────── */
@media (max-width:980px){
  .karten,.karten.k4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .schritte,.schritte.s3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stufen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stufen.drei{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fz-grid{grid-template-columns:1fr 1fr}
  .fz-marke{grid-column:1/-1}
}
@media (max-width:900px){
  .demo-karte{grid-template-columns:1fr;padding:30px 24px}
  .gruppe{grid-template-columns:1fr;gap:22px}
  .gruppe .gkopf{position:static}
  .liste{grid-template-columns:1fr}
  .zwei,.preise,.wege{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:16px}
  .karten,.karten.k2,.karten.k4,.schritte,.schritte.s3{grid-template-columns:1fr}
  .stufen{grid-template-columns:1fr 1fr}
  .stufen.drei{grid-template-columns:1fr}
  .stufe{padding:18px 12px}
  .stufe .was{font-size:28px}
  .fz-grid{grid-template-columns:1fr 1fr;gap:28px 18px}
  .fz-marke{grid-column:1/-1}
  .preis{padding:28px 22px}
  .karte{padding:24px 20px}
  .schluss{padding:44px 20px}
  .held .btn-reihe .btn{width:100%}
  .schluss .btn-reihe .btn{width:100%}
  .zahl{font-size:44px}
  .fz-unten{flex-direction:column;align-items:flex-start}
  .mm-panel{width:auto}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .rein{opacity:1;transform:none;transition:none}
  html.js .buehne.rein{transform:none}
  .aura i{animation:none}
  .btn,.liste li,.kachel,.mm-panel,.kopf-leiste{transition:none}
}
@media print{
  .kopf,.fuss,.b-con,.b-spr,.b-tipp,.aura{display:none !important}
  body{font-size:12pt}
}

/* =====================================================================
   PIXIFY: WAS buchify.ch NICHT HATTE
   ===================================================================== */
/* Die Marke: ein breiter Schriftzug statt eines hohen Zeichens */
.marke-bild{height:34px}
.fz-marke .marke-bild{height:38px}
@media (max-width:980px){ .marke-bild{height:29px} }

/* Druck: der Punkt im Augen-Schild in den vier Druckfarben */
body[data-auftritt="print"] .augen b{background:conic-gradient(#00B4D8 0 25%,#D6006E 0 50%,#E8C400 0 75%,#2A2C33 0);box-shadow:0 0 0 4px rgba(var(--akz-rgb),.13)}
/* Druck: Cyan als Flaeche, darauf die dunkle Schrift - wie bei den
   Knoepfen. Die Titelzeile laeuft vom lesbaren Cyan ins Druck-Cyan; der
   Kasten im Mega-Menue ist ganz Cyan (auf web: dunkler Verlauf, weisse
   Schrift - Weiss auf Cyan waere nicht lesbar). */
body[data-auftritt="print"] .schein{background:linear-gradient(92deg,var(--blau-text),var(--blau) 60%,var(--blau));
  -webkit-background-clip:text;background-clip:text}
body[data-auftritt="print"] .mm-feature{background:linear-gradient(150deg,var(--blau) 0%,var(--blau) 45%,var(--blau-hell) 100%);color:var(--auf-blau)}
body[data-auftritt="print"] .mm-f-eyebrow,body[data-auftritt="print"] .mm-f-text{color:var(--auf-blau)}

/* Bild neben Text */
.bildteil{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,64px);align-items:center}
.bildteil.rechts .bt-bild{order:2}
.bt-bild{border-radius:var(--rund);overflow:hidden;background:var(--grund-2);border:1px solid var(--linie);box-shadow:var(--schatten-g)}
.bt-bild img{width:100%;height:auto}
.bt-bild.frei{background:none;border:0;box-shadow:none;border-radius:0;overflow:visible}
.bt-text h2{margin:14px 0 18px}
.bt-text > p{color:var(--text-2);margin-bottom:14px;font-size:17px;max-width:62ch}
.bt-text ul{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:11px}
.bt-text ul li{padding-left:26px;position:relative;font-size:16px;color:var(--text)}
.bt-text ul li::before{content:"";position:absolute;left:2px;top:8px;width:12px;height:7px;border-left:2px solid var(--blau);border-bottom:2px solid var(--blau);transform:rotate(-45deg)}
.bt-text .btn-reihe{margin-top:26px}
.bt-unter{margin-top:12px;font-size:13.5px;color:var(--text-3);text-align:center}

/* Kennzahlen in einer Reihe */
.fakten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.fakten.f3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:920px;margin-inline:auto}
.fakt{padding:24px 18px;border-radius:var(--rund);background:var(--flaeche);border:1px solid var(--linie);box-shadow:var(--schatten);text-align:center}
.fakt b{display:block;font-size:clamp(26px,3vw,36px);font-weight:800;letter-spacing:-.035em;line-height:1.1;color:var(--blau-tief)}
.fakt span{display:block;color:var(--text-2);font-size:14.5px;margin-top:6px;line-height:1.45}

/* Fuenf Schritte */
.schritte.s5{grid-template-columns:repeat(5,minmax(0,1fr))}

/* Preise: drei Karten nebeneinander */
.preise.p3{grid-template-columns:repeat(3,minmax(0,1fr))}
.preise.p3 .preis{padding:30px 26px}
.preise.p3 .zahl{font-size:44px}
/* Preise: eine Karte allein, mittig (web.pixify.ch/werbung, 8.10.2026) */
.preise.p1{grid-template-columns:minmax(0,560px);justify-content:center}
/* Karten: letzte Dreierreihe mit nur einer Karte - die Karte in die Mitte ('restMitte') */
.karten.rest1>:last-child{grid-column:2}
@media (max-width:980px){.karten.rest1>:last-child{grid-column:auto}}

/* Kontakt: Wege links, Formular rechts */
.kontakt{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:24px;align-items:start}
.kontakt-wege{display:grid;gap:12px}
.kweg{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:var(--rund-s);background:var(--flaeche);border:1px solid var(--linie);box-shadow:var(--schatten)}
.kweg .ik{flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--grund-3);color:var(--blau-tief)}
.kweg b{display:block;font-size:15.5px;margin-bottom:2px}
.kweg span{display:block;color:var(--text-2);font-size:15px;line-height:1.5}
.formular{position:relative;padding:28px;border-radius:var(--rund);background:var(--flaeche);border:1px solid var(--linie);box-shadow:var(--schatten-g)}
.formular h2{font-size:clamp(24px,2.6vw,32px);margin-bottom:8px}
.formular > p{color:var(--text-2);margin-bottom:20px;font-size:15.5px}
.formular .feld{margin-bottom:16px}
.formular label{display:block;font-weight:600;font-size:14.5px;margin:0 0 6px;color:var(--text)}
.formular label small{font-weight:500;color:var(--text-3)}
.formular input,.formular textarea,.formular select{width:100%;border:1px solid var(--linie-hell);border-radius:12px;padding:12px 14px;
  font:inherit;font-size:16px;background:#fff;color:var(--text)}
.formular input[type=file]{padding:10px;font-size:14.5px}
.formular input:focus,.formular textarea:focus,.formular select:focus{outline:2px solid rgba(var(--akz-rgb),.45);outline-offset:1px;border-color:var(--blau)}
.formular textarea{min-height:150px;resize:vertical}
.formular .zwei-felder{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.formular .honig{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.formular .klein{font-size:13px;color:var(--text-3);margin-top:12px}
.formular .btn{margin-top:4px}
.formular .antwort{margin-top:14px;padding:12px 14px;border-radius:12px;font-size:15px}
.formular .antwort.ok{background:rgba(31,168,74,.10);color:#11632B}
.formular .antwort.nein{background:rgba(214,0,110,.08);color:#8A0047}

/* ── Schmal ─────────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .schritte.s5{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:980px){
  .fakten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .preise.p3{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
  .schritte.s5{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .bildteil{grid-template-columns:1fr}
  .bildteil.rechts .bt-bild{order:0}
  .kontakt{grid-template-columns:1fr}
}
@media (max-width:640px){
  .fakten.f3{grid-template-columns:1fr}
  .schritte.s5{grid-template-columns:1fr}
  .formular{padding:22px 18px}
  .formular .zwei-felder{grid-template-columns:1fr;gap:0}
  .bt-text .btn-reihe .btn{width:100%}
}

/* =====================================================================
   web.pixify.ch: HELD MIT FOTO, CODE IM HINTERGRUND, FARBEN IM VERLAUF
   ---------------------------------------------------------------------
   Gabriel, 4.10.2026: «Hero Bereich muss mein Foto zu sehen sein mit dem
   Text ect. … Im Hintergrund sollte eine Programmierung laufen über die
   ganzen Seiten, sowie die Farben sollten sich in einem schönen Verlauf
   immer ändern.» Gewaehlt: Foto (Video vorbereitet), Code tippt sich,
   Hintergrund + Akzente wandern - Knoepfe und Schriftzug bleiben im
   Violett der Marke, die Seite bleibt hell.
   Alles hier gilt NUR fuer web (body[data-auftritt="web"]) oder fuer
   Klassen, die nur der Held mit Bild schreibt (bauen.php, 'held' mit
   'bild'). print.pixify.ch bleibt, wie es ist.
   ===================================================================== */
/* Der Held mit Bild: Text links, Foto rechts */
.held.mit-bild{text-align:left;padding-top:clamp(36px,5vw,76px)}
.held-teil{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(28px,5vw,72px);align-items:center}
.held.mit-bild h1{margin-inline:0;max-width:17ch;font-size:clamp(36px,4.7vw,64px)}
.held.mit-bild .lead{margin:22px 0 30px}
.held.mit-bild .btn-reihe{justify-content:flex-start}
.held-bild{margin:0;position:relative;justify-self:center;width:min(100%,470px)}
/* Das freigestellte Foto auf einer Scheibe: oben ragt der Kopf heraus,
   unten schneidet die Scheibe die Schultern rund ab (Maske = obere
   Haelfte + Kreis). Die Scheibe ist ein eigenes Stueck (::before) - so
   wandert ihre Farbe mit, das Foto nicht. */
.hb-scheibe{position:relative;aspect-ratio:1/1}
.hb-scheibe::before{content:"";position:absolute;left:6%;right:6%;bottom:0;aspect-ratio:1/1;border-radius:50%;
  background:radial-gradient(circle at 30% 24%,var(--blau-hell),var(--blau) 52%,var(--blau-tief));
  box-shadow:0 40px 90px -30px rgba(var(--akz-rgb),.7),inset 0 0 0 1px rgba(255,255,255,.18)}
.hb-scheibe::after{content:"";position:absolute;left:0;right:0;bottom:-6%;aspect-ratio:1/1;border-radius:50%;
  border:1px dashed rgba(var(--akz-rgb),.32);pointer-events:none}
.hb-scheibe img{position:relative;width:100%;height:auto;
  -webkit-mask:linear-gradient(#000 0 0) top/100% 50% no-repeat,radial-gradient(closest-side,#000 99.4%,transparent 100%) 50% 100%/88% 88% no-repeat;
  mask:linear-gradient(#000 0 0) top/100% 50% no-repeat,radial-gradient(closest-side,#000 99.4%,transparent 100%) 50% 100%/88% 88% no-repeat}
/* Das Video (nur, wenn web/assets/held.mp4 da ist): im Rahmen statt auf der Scheibe */
.hb-rahmen{border-radius:calc(var(--rund) + 8px);overflow:hidden;border:1px solid var(--linie);box-shadow:var(--schatten-g);background:var(--grund-3)}
.hb-film{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
/* Der Name unter dem Foto */
.hb-name{position:absolute;left:-2%;bottom:7%;display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;
  padding:11px 18px 11px 12px;border-radius:16px;background:rgba(255,255,255,.93);border:1px solid var(--linie);
  box-shadow:var(--schatten-g);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:left}
.hb-name::before{content:"</>";grid-row:1/3;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  background:var(--grund-3);color:var(--blau-tief);font:700 13px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.hb-name b{font-size:15.5px;line-height:1.25;color:var(--text)}
.hb-name span{font-size:13px;line-height:1.35;color:var(--text-2)}
.mit-film .hb-name{bottom:-18px}
/* Der KI-Hinweis auf dem Video (bauen.php 'videoHinweis', EU AI Act Art. 50) */
.hb-rahmen{position:relative}
.hb-ki{position:absolute;top:12px;right:12px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.88);
  color:var(--text-2);font-size:12px;font-weight:600;line-height:1.4;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
/* print.pixify.ch (4.10.2026, Gabriel: «print.pixify.ch ebenfalls mein Foto
   sowie der Drucker»): der freigestellte Drucker hinten rechts, davor das
   Foto auf der Scheibe in Druck-Cyan, der Name rechts unten. */
.held-bild.mit-zweitem{width:min(100%,580px)}
.hb-zweit{position:relative;margin:0 0 -20% 10%}
.hb-zweit img{width:100%;height:auto;filter:drop-shadow(0 28px 34px rgba(11,18,32,.16))}
.mit-zweitem .hb-scheibe{width:62%}
.mit-zweitem .hb-name{left:auto;right:2%;bottom:16%}
/* Druck: statt «</>» der Vierfarb-Punkt, wie im Augen-Schild */
body[data-auftritt="print"] .hb-name::before{content:"";width:26px;height:26px;margin:0 6px;border-radius:50%;
  background:conic-gradient(#00B4D8 0 25%,#D6006E 0 50%,#E8C400 0 75%,#2A2C33 0)}

/* Code im Hintergrund: seite.js (Teil 8) legt die Leinwand in die Aura.
   Zur Mitte hin leiser, wo der Text steht. */
.code-grund{position:absolute;inset:0;width:100%;height:100%;display:block;
  -webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 45%,rgba(0,0,0,.3),#000 80%);
  mask-image:radial-gradient(ellipse 60% 55% at 50% 45%,rgba(0,0,0,.3),#000 80%)}
/* Die grauen Abschnitte lassen den Code durchscheinen */
body[data-auftritt="web"] .grau{background:color-mix(in srgb,var(--grund-2) 84%,transparent)}

/* Die Farben im Verlauf: Violett → Blau → Petrol → Violett → Magenta →
   Violett, in 45 Sekunden. Gabriel, 4.10.2026: zuerst «Hintergrund +
   Akzente», dann: «Die Farben sollten auch alle buttons ect. ändern so das
   alles gleich einheitlich wirkt.» Darum wandert jetzt ALLES, was die
   Markenfarbe traegt: Aura und Code, Knoepfe, Schriftzug, Verweise,
   Symbole, Karten, Menue, Cookie-Knopf und Assistent.
   Wie: seite.js (Teil 10) setzt am body die Variable --dreh (ein Winkel),
   zehnmal in der Sekunde, aus einer Uhr - alle Stuecke drehen also genau
   gleich, auch das Mega-Menue, das erst beim Oeffnen erscheint. Jede Seite
   beginnt bei 0deg (Violett), so springt beim Laden nichts. Ohne Skript
   und bei «weniger Bewegung» bleibt es bei 0deg: alles Violett.
   hue-rotate verschiebt den Farbton und laesst die Helligkeit stehen;
   zwischen -90° und +30° bleibt --blau auf Weiss und Weiss auf --blau
   ueber 4.7 : 1 (gerechnet mit der Matrix von hue-rotate) - weiter waere
   Gruen und Rot, und Rot faellt unter 4.5 : 1. Grau, Schwarz und Weiss
   aendert hue-rotate nicht; Fotos bekommen den Filter nie.
   WICHTIG: Kein Stueck darf in einem anderen gefilterten Stueck stehen,
   sonst dreht es doppelt - darum die Ausnahmen bei .btn und Verweisen. */
body[data-auftritt="web"] .aura{will-change:filter}
body[data-auftritt="web"] :is(.aura,.logo,.schein,.augen,.kachel,.fakt b,.karte,.preis,.schluss,.faq summary,
  .schritte li,.liste li,.bt-text li,.kweg .ik,.nav-aktiv,.mm-icon,.mm-feature,.nav-sprachen a.da,.mm-halter.mm-auf .mm-trigger,
  .demo-zahlen b,.weg.best,.lesen .kasten.wichtig,.rechtshinweis,
  .fz-kante,.fz-glow,.fz-sprachen a.da,.b-spr a.da,.b-tipp a,.b-con-knopf,.b-con-kopf,.b-con-chips a,.b-con-form button,
  .b-con-aus a,.pxa-keks,.formular button){filter:hue-rotate(var(--dreh,0deg))}
/* Pseudo-Elemente gehen nicht in :is() - eigene Regel (sonst bleibt die Scheibe Violett) */
body[data-auftritt="web"] .hb-scheibe::before,body[data-auftritt="web"] .hb-scheibe::after,body[data-auftritt="web"] .hb-name::before{filter:hue-rotate(var(--dreh,0deg))}
/* Der Keks im Cookie-Knopf ist ein Emoji: Der Ring dreht mit, der Keks dreht zurueck. */
body[data-auftritt="web"] .pxa-keks span{filter:hue-rotate(calc(var(--dreh,0deg) * -1))}
body[data-auftritt="web"] .btn:not(:is(.schluss,.preis,.karte,.formular) .btn){filter:hue-rotate(var(--dreh,0deg))}
body[data-auftritt="web"] :is(p,li,dd,td,figcaption) a:not(.btn):not(:is(.kachel,.karte,.preis,.schluss,.liste li,.schritte li,.bt-text li,.lesen .kasten.wichtig,.rechtshinweis,.b-con-aus) a){filter:hue-rotate(var(--dreh,0deg))}

@media (max-width:900px){
  .held.mit-bild{text-align:center;padding-top:28px}
  .held-teil{grid-template-columns:1fr;gap:34px}
  .held-bild{order:-1;width:min(54vw,230px);margin-bottom:18px}
  .held.mit-bild h1{margin-inline:auto}
  .held.mit-bild .lead{margin-inline:auto}
  .held.mit-bild .btn-reihe{justify-content:center}
  .hb-name{left:50%;bottom:-20px;transform:translateX(-50%);white-space:nowrap;padding:8px 14px 8px 9px;column-gap:10px}
  .hb-name::before{width:32px;height:32px;font-size:12px}
  .hb-name b{font-size:14.5px}
  .hb-name span{font-size:12.5px}
  .mit-film .hb-name{bottom:-20px}
  .held-bild.mit-zweitem{width:min(74vw,300px)}
  .mit-zweitem .hb-name{left:50%;right:auto;bottom:-20px}
}
@media print{
  .hb-scheibe::after,.hb-name::before{display:none}
}

/* ═══ NUR print.pixify.ch (16.10.2026) ════════════════════════════════
   bauen.php haengt diese Datei an gemeinsam/stil.css an - nur fuer print.
   Das Blatt von web.pixify.ch bleibt, wie es war. */

/* ── HELD: DAS STUDIO UEBER DIE GANZE BREITE ────────────────────────
   Gabriel: «hero neu aufbauen, da möchte ich das Studio als ganzes
   Bildschirmbreite haben mit Blur-Effekt im Textfeld-Bereich.»
   Nachtrag 16.10.2026: «auf dem grossen Bildschirm ist das Bild nicht
   Vollansicht.» Mit «cover» blieben auf einem breiten Schirm (3440 px) nur
   41 % des Fotos uebrig. Darum jetzt:
   - Das Foto steht immer GANZ da (contain). Der Held ist so hoch wie das Foto
     bei voller Breite, hoechstens so hoch wie der Schirm unter Kopf (72 px)
     und Leiste (52 px), mindestens 600 px.
   - Ist der Schirm breiter als das Foto, fuellt dasselbe Foto unscharf und
     etwas dunkler die Raender (.hv-fuell) - das Studio geht so weiterhin ueber
     die ganze Breite.
   - --hv-v (Seitenverhaeltnis, von bauen.php) misst Hoehe und Glas am Foto.
   Der Text steht auf Milchglas, RECHTS am Rand des Fotos: Links im Bild stehen
   die Maschinen, rechts nur das Fenster. Die Deckkraft des Glases ist so
   gewaehlt, dass auch vor der schwarzen Wand jede Schrift ueber 4.5 : 1 bleibt -
   ohne Milchglas (aeltere Browser) wird es fast weiss. */
.held-voll{--hv-h:min(calc(100vw / var(--hv-v,1.7778)),max(600px,100vh - 124px));
  position:relative;isolation:isolate;overflow:hidden;text-align:left;
  min-height:var(--hv-h);display:flex;align-items:center;padding:32px 0;background:#0B1220}
.held-voll .wrap{display:flex;justify-content:flex-end;width:min(100% - 32px,calc(var(--hv-h) * var(--hv-v,1.7778) - 64px))}
.hv-bild{position:absolute;inset:0;z-index:-2;width:100%;height:100%;max-width:none;object-fit:contain;object-position:50% 50%}
.hv-fuell{position:absolute;top:-60px;left:-60px;z-index:-3;width:calc(100% + 120px);height:calc(100% + 120px);max-width:none;
  object-fit:cover;filter:blur(30px) saturate(1.15) brightness(.78);pointer-events:none}
.held-voll::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(270deg,rgba(11,18,32,.42) 0%,rgba(11,18,32,.16) 48%,rgba(11,18,32,0) 72%)}
.hv-glas{width:min(100%,600px,44vw);padding:clamp(24px,3vw,40px);border-radius:calc(var(--rund) + 8px);
  background:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.6);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 34px 90px -34px rgba(11,18,32,.6);
  -webkit-backdrop-filter:saturate(160%) blur(18px);backdrop-filter:saturate(160%) blur(18px)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hv-glas{background:rgba(255,255,255,.95)}
}
.held-voll h1{max-width:none;margin-inline:0;font-size:clamp(32px,3.5vw,50px)}
/* Auf dem grauen Glas waere das helle Cyan zu blass (unter 3 : 1) - hier nur
   der dunkle Teil des Verlaufs: #005F78 bis #007894, ueber 3.2 : 1. */
body[data-auftritt="print"] .held-voll .schein{background:linear-gradient(92deg,var(--blau-tief),var(--blau-text) 70%);
  -webkit-background-clip:text;background-clip:text}
.held-voll .augen{margin-bottom:18px}
.held-voll .lead{margin:18px 0 26px;max-width:none;color:#2B3550;font-size:clamp(16.5px,1.3vw,18.5px)}
.held-voll .btn-reihe{justify-content:flex-start}
.held-voll .note{color:var(--text-2)}
.held-voll .augen{background:rgba(255,255,255,.75)}
.held-voll .pfad,.held-voll .pfad a{color:var(--text-2)}
.held-voll .pfad{margin:0 0 14px}
/* Die Zahlen darunter («eng», ohne Abstand oben) stiessen sonst ans Foto. */
.held-voll + section.eng{padding-top:clamp(28px,4vw,52px)}

/* Bis Tablet-Breite: das ganze Foto als Band oben, das Glas schiebt sich
   nur ein wenig darueber (ueber den Boden, nicht ueber die Maschinen). */
@media (max-width:980px){
  .held-voll{display:block;min-height:0;padding:0 0 30px;background:var(--grund-2)}
  .held-voll .wrap{display:block;width:min(var(--maxw),100% - 32px)}
  .hv-fuell{display:none}
  .hv-bild{position:relative;inset:auto;z-index:auto;display:block;width:100%;height:auto;object-fit:cover}
  .held-voll::before{bottom:auto;height:calc(100vw / var(--hv-v,1.7778));background:linear-gradient(180deg,rgba(11,18,32,0) 60%,rgba(11,18,32,.24))}
  .hv-glas{position:relative;margin-top:-7vw;width:auto;padding:24px 20px;border-radius:var(--rund)}
}
@media (max-width:760px){
  .held-voll .btn-reihe .btn{width:100%}
}

/* ── DAS VIDEO: «DAMIT DRUCKEN WIR» ─────────────────────────────────
   Gabriel: «Video weiter unten um zu zeigen mit was wir arbeiten.» */
.ft-film{margin:0}
.ft-film .bt-bild{background:#0B1220}
.ft-film video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#0B1220}
/* Video rechts, Text links - im Wechsel mit «Unsere Druckerei» darueber. */
.filmteil.rechts .ft-film{order:2}
@media (max-width:900px){ .filmteil.rechts .ft-film{order:0} }