/* =====================================================================
   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 pixify.ch (24.10.2026) ═════════════════════════════════════
   bauen.php haengt diese Datei an gemeinsam/stil.css an - nur fuer dach.

   DAS INTRO. Gabriel: «es soll ein Intro erscheinen pixify.ch mit Slogan
   danach auf die Webseite». Ein dunkler Vorhang: der Schriftzug kommt aus
   der Unschaerfe, das Pixel-Quadrat faellt an seinen Platz, «.ch» schiebt
   sich dazu, die drei Worte des Slogans folgen, dann hebt sich der
   Vorhang. Nur mit html.intro-an (das Tor im <head>: bei jedem Aufruf -
   Gabriel: «soll immer kommen» -, nie bei «weniger Bewegung»). Ohne Skript gibt es kein intro-an und damit
   kein Intro. Laeuft das Skript, endet es nach 2.9 s oder beim ersten
   Klick, jeder Taste, jedem Scrollen ('intro-raus'); laeuft es NICHT,
   hebt sich der Vorhang hier von selbst (3.8 s). Er faengt nie Eingaben
   ab, nachdem er weg ist (visibility). */
/* DIE SCHRIFT: Outfit, überall (Gabriel, 24.10.2026: «schriftart outfit! auch beim
   Intro ect, eigentlich überall»). Dieselbe Schrift wie die Schriftzüge «web»,
   «print» und «ads» in den Logos. Selbst gehostet (assets/schrift/, Lizenz OFL),
   eine Datei für alle Stärken 100-900, nur Latein (Deutsch, Französisch,
   Italienisch, Englisch); was fehlt (die Pfeile ↗ →), zeigt die Ersatzschrift. */
@font-face{font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/assets/schrift/outfit.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--schrift:'Outfit',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}

.intro{display:none}
html.intro-an .intro{display:flex;position:fixed;inset:0;z-index:10000;align-items:center;justify-content:center;
  background:radial-gradient(120% 90% at 50% 40%,#2A1263 0%,#140733 55%,#0A0320 100%);color:#fff;overflow:hidden;
  animation:intro-weg .85s cubic-bezier(.76,0,.24,1) 3.8s forwards}
/* Eigener Name: Bekaeme 'intro-raus' dieselbe Animation mit anderer Verzoegerung,
   setzte der Browser sie fort statt neu - und der Vorhang waere schlagartig weg. */
html.intro-an .intro.intro-raus{animation:intro-hoch .75s cubic-bezier(.76,0,.24,1) 0s forwards}
@keyframes intro-weg{to{transform:translateY(-100%);visibility:hidden}}
@keyframes intro-hoch{to{transform:translateY(-100%);visibility:hidden}}

/* Licht im Hintergrund: drei weiche Flecken in den Farben der Marke. */
.intro-glanz{position:absolute;inset:0;pointer-events:none}
.intro-glanz i{position:absolute;border-radius:50%;filter:blur(80px);opacity:0;animation:intro-glanz 2.4s ease-out .1s forwards}
.intro-glanz i:nth-child(1){width:46vmax;height:46vmax;left:-12vmax;top:-14vmax;background:#7C3AED}
.intro-glanz i:nth-child(2){width:38vmax;height:38vmax;right:-10vmax;bottom:-16vmax;background:#A78BFA;animation-delay:.35s}
.intro-glanz i:nth-child(3){width:22vmax;height:22vmax;left:52%;top:18%;background:#F0ABFC;animation-delay:.7s}
@keyframes intro-glanz{to{opacity:.42}}

.intro-buehne{position:relative;text-align:center;padding:0 24px}
/* --mw: die Breite des Schriftzugs; «.ch» rechnet daran (Handy: 54 % der Breite, damit «pixify.ch» hineinpasst). */
.intro-marke{--mw:min(54vw,460px);margin:0;display:inline-flex;align-items:flex-end;justify-content:center;line-height:1}
.intro-marke img{width:var(--mw);height:auto;display:block;opacity:0;filter:blur(14px);transform:scale(.94);
  animation:intro-marke .9s cubic-bezier(.2,.7,.2,1) .15s forwards}
@keyframes intro-marke{to{opacity:1;filter:blur(0);transform:none}}
/* «.ch» in Outfit Light, so gross und so tief wie die Kleinbuchstaben des Schriftzugs (gemessen in
   logo-hell.png: x-Hoehe 125 von 692 Pixeln, Grundlinie 54 Pixel ueber dem Rand; Outfit: x-Hoehe
   0.46 em, die Grundlinie 0.13 em ueber dem Kasten bei line-height 1) - die Strichstaerke von Light
   passt zu «fy» im Schriftzug. In Hell-Violett. */
.intro-ch{font-weight:300;font-size:calc(var(--mw) * .39);letter-spacing:-.01em;color:#C4B5FD;
  margin:0 0 calc(var(--mw) * .027) calc(var(--mw) * .012);
  opacity:0;transform:translateX(-18px);animation:intro-ch .6s cubic-bezier(.2,.7,.2,1) .85s forwards}
@keyframes intro-ch{to{opacity:1;transform:none}}

.intro-slogan{margin:clamp(22px,4vh,40px) 0 0;font-size:clamp(22px,3.4vw,38px);font-weight:700;letter-spacing:-.01em}
.intro-slogan span{display:inline-block;opacity:0;transform:translateY(14px);
  animation:intro-wort .55s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(1.2s + var(--i, 0) * .22s)}
.intro-slogan span:nth-child(2){color:#C4B5FD}
@keyframes intro-wort{to{opacity:1;transform:none}}
.intro-unter{margin:14px 0 0;font-size:clamp(13px,1.6vw,16px);color:rgba(255,255,255,.66);letter-spacing:.02em;
  opacity:0;animation:intro-wort .6s ease 1.95s forwards}

.intro-weg{position:absolute;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.1);
  color:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:8px 16px;font:inherit;font-size:14px;cursor:pointer}
.intro-weg:hover{background:rgba(255,255,255,.18)}


/* ── Die Karten der Firmen: je Marke ein Verweis, Stürify ohne ───────── */
#firmen .kachel:not(a){border-style:dashed;background:transparent}
/* Kontakt: Telefon und E-Mail gross genug zum Tippen */
#kontakt .kachel a{font-weight:600;word-break:break-word}

/* Die Logos der Marken auf den Karten (24.10.2026): alle gleich hoch, links buendig. */
.ik-logo{display:flex;align-items:center;height:44px;margin-bottom:6px}
.ik-logo img{height:40px;width:auto;max-width:100%;object-fit:contain;object-position:left center;display:block}
@media (max-width:640px){.ik-logo{height:38px}.ik-logo img{height:34px}}

/* ── Der Held mit dem Foto (24.10.2026) ──────────────────────────────
   Gabriel: «zuerst kommt mein profilbild in gross von unten nach oben
   gleichzeitig wie das intro verschwindet. kurz wird mein profil bild
   ersichtlich sein und verkleinert sich nach rechts in einen kreis bild
   rein und der hero text blendet ein.»
   Am Ende steht das Foto in einem Kreis in der Markenfarbe (statt der
   Scheibe von web, aus der der Kopf oben herausragt). Den Flug macht
   dach/seite.js mit einer Kopie (.held-flug), die genau so aussieht -
   darum ist der Wechsel am Schluss unsichtbar. */
body[data-auftritt="dach"] .hb-scheibe{border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 30% 24%,var(--blau-hell),var(--blau) 52%,var(--blau-tief));
  box-shadow:0 0 0 12px rgba(var(--akz-rgb),.08),0 40px 90px -30px rgba(var(--akz-rgb),.7)}
body[data-auftritt="dach"] .hb-scheibe::before,body[data-auftritt="dach"] .hb-scheibe::after{display:none}
body[data-auftritt="dach"] .hb-scheibe img,.held-flug img{width:100%;height:100%;object-fit:cover;display:block;-webkit-mask:none;mask:none}
/* Im Namensschild statt «</>» das Pixel-Quadrat aus dem Schriftzug */
body[data-auftritt="dach"] .hb-name::before{content:"";width:14px;height:14px;margin:0 6px;border-radius:3px;background:var(--blau)}
body[data-auftritt="dach"] .hb-name{transition:opacity .5s ease .1s}
.held-flug{position:absolute;z-index:9999;border-radius:32px;overflow:hidden;pointer-events:none;
  background:radial-gradient(circle at 30% 24%,var(--blau-hell),var(--blau) 52%,var(--blau-tief));
  box-shadow:0 0 0 12px rgba(var(--akz-rgb),.08),0 40px 90px -30px rgba(var(--akz-rgb),.7)}

/* Solange das Foto fliegt (html.held-aus, gesetzt vom Tor im <head> zusammen mit
   intro-an): der Kreis unsichtbar, der Text wartet. held-text-ein laesst den Text
   der Reihe nach einblenden, waehrend das Foto in den Kreis faellt. Laeuft
   pixify.js nicht, zeigt held-notfall nach 9 Sekunden trotzdem alles. */
html.held-aus .held.mit-bild .held-bild{visibility:hidden;animation:held-notfall-b 0s 9s forwards}
html.held-aus .held.mit-bild .hb-name{opacity:0}
html.held-aus:not(.held-text-ein) .held.mit-bild .held-text .rein{opacity:0;transform:translateY(18px);animation:held-notfall 0s 9s forwards}
html.held-text-ein .held.mit-bild .held-text .rein:nth-child(2){transition-delay:.09s}
html.held-text-ein .held.mit-bild .held-text .rein:nth-child(3){transition-delay:.18s}
html.held-text-ein .held.mit-bild .held-text .rein:nth-child(4){transition-delay:.27s}
html.held-text-ein .held.mit-bild .held-text .rein:nth-child(5){transition-delay:.36s}
@keyframes held-notfall{to{opacity:1;transform:none}}
@keyframes held-notfall-b{to{visibility:visible}}

/* ── Der Hintergrund der Startseite (25.10.2026) ─────────────────────
   Gabriel: «im hintergrund sollen meine logos sich verpixeln, auflösen,
   erscheinen … es sollte hinter einem blur effekt sein» und der Pixel, der
   alles auffrisst. Zwei Leinwaende von dach/seite.js, fest hinter der
   ganzen Startseite: #pxLogos (halbe Aufloesung, Blur mittel) und
   #pxFresser (fast scharf). Damit sie hinter den Abschnitten sichtbar sind,
   werden der graue Abschnitt und der Fuss der Startseite halb durchsichtig;
   die Karten bleiben weiss und liegen darauf wie auf Glas. */
.px-bg{position:fixed;left:0;top:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1.4s ease}
#pxLogos{filter:blur(4px)}
#pxLogos.an{opacity:.62}
#pxFresser{filter:blur(.4px)}
#pxFresser.an{opacity:.92}
body[data-seite="index"] .grau{background:rgba(248,246,254,.74)}
body[data-seite="index"] .fuss{background:linear-gradient(180deg,rgba(250,248,255,.8) 0%,rgba(242,237,253,.93) 100%)}
@media (prefers-reduced-motion: reduce){.px-bg{display:none}}