/* Zeitwind Digital — Effekt-Sektionen
   Alle Klassen mit zw- Präfix, damit nichts mit Twenty Twenty-Five kollidiert.
   Farben aus der Logo-Palette: Navy #0B1B2E, Blau #0B55A5, Grau #98A2AE
   -------------------------------------------------------------------- */

:root{
  --zw-navy:#0B1B2E;
  --zw-blau:#0B55A5;
  --zw-grau:#98A2AE;
  --zw-hell:#FAFAF8;
  --zw-dunkel:#1C2226;
  --zw-linie:#D8DCE0;

  /* Signalfarbe — sparsam einsetzen: Zahlen, Icons, wichtige Woerter */
  --zw-signal:#D4AF37;
  --zw-signal-hell:#E3BF4E;
  /* Signalfarbe auf HELLEM Grund. Gold hat dort nur 2:1 Kontrast und ist
     kaum lesbar - deshalb lag frueher eine schwarze Kontur darunter, was
     bei kleiner Schrift billig wirkt. Auf hellen Flaechen steht deshalb
     das Markenblau (7:1 auf Creme), auf Navy bleibt das Gold. */
  --zw-signal-dunkel:#0B55A5;

  /* Lichtfeld im Hero — Abstufungen der Markenfarben */
  --zw-licht-a:#0B55A5;
  --zw-licht-b:#1E7FD4;
  --zw-licht-c:#3A4E66;

  --zw-gutter:clamp(1.25rem,4vw,4.5rem);

  /* Kontur hinter Goldschrift auf hellem Grund */
  --zw-kontur:#14181B;

  /* Breite der mittigen Inhaltsspalte auf grossen Bildschirmen */
  --zw-spalte:76rem;

  /* Später gegen ein echtes Foto tauschen:
     --zw-foto:url("/wp-content/uploads/2026/referenz.jpg"); */
  --zw-foto:linear-gradient(115deg,#0B1B2E 0%,#0B55A5 42%,#1E7FD4 74%,#98A2AE 100%);
}

/* --- Grundgerüst --- */
/* Volle Breite: Das Elternelement geht bereits über die ganze Seite, rückt
   den Inhalt aber um den globalen Innenabstand des Themes ein. Genau diesen
   Betrag gleichen wir hier aus — WordPress stellt ihn als Variable bereit.
   box-sizing ist Pflicht, sonst kommt das eigene Padding auf die Breite obendrauf. */
.zw-sec,.zw-sec *{box-sizing:border-box}
.zw-sec{position:relative;padding:clamp(3.5rem,9vw,7rem) var(--zw-gutter);
  background:var(--zw-hell);color:var(--zw-dunkel);
  width:auto;max-width:none}

/* Mittige Inhaltsspalte: statt jedem Kind eine Breite zu geben, waechst
   der seitliche Innenabstand auf breiten Bildschirmen mit. Der Abschnitt
   selbst bleibt voll breit - nur sein Inhalt sitzt in einer zentrierten
   Spalte. Greift von allein erst, wenn das Fenster breiter ist als die
   Spalte, auf dem Handy aendert sich nichts. */
.zw-sec{padding-inline:max(var(--zw-gutter), calc((100% - var(--zw-spalte)) / 2))}

.zw-sec.zw-dark{background:var(--zw-navy);color:var(--zw-hell);overflow:hidden}

.zw-mono{font-family:"Archivo",system-ui,sans-serif;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.zw-tag{display:block;margin:0 0 1.6rem;color:var(--zw-blau)}
.zw-dark .zw-tag{color:#6FB2F0}

.zw-h1,.zw-h2{font-family:"Archivo",system-ui,sans-serif;font-weight:800;text-transform:uppercase;
  line-height:.95;margin:0;letter-spacing:-.01em}
.zw-h1{font-size:clamp(2.6rem,7.5vw,5.8rem);line-height:.94}
.zw-h2{font-size:clamp(2.1rem,6vw,4.6rem)}

.zw-lead{font-family:"Inter",system-ui,sans-serif;max-width:46ch;margin:1.5rem 0 0;
  color:#5A6670;line-height:1.65;font-size:1.02rem}
.zw-dark .zw-lead{color:var(--zw-grau)}

/* Zeichen-Zerlegung */
.zw-word{display:inline-block;white-space:nowrap}
.zw-mask{display:inline-block;overflow:hidden;vertical-align:bottom}
.zw-char{display:inline-block;will-change:transform}

/* --- 01 Hero mit Lichtfeld --- */
.zw-hero{min-height:82vh;display:flex;flex-direction:column;justify-content:center}
.zw-lightwrap{position:absolute;inset:-20%;pointer-events:none;will-change:transform}
.zw-lights{position:absolute;inset:0;filter:blur(70px);opacity:.38}
.zw-light{position:absolute;border-radius:50%;mix-blend-mode:screen;will-change:transform}
.zw-l1{width:36vw;height:36vw;background:var(--zw-licht-a);top:8%;left:44%}
.zw-l2{width:28vw;height:28vw;background:var(--zw-licht-b);top:44%;left:62%}
.zw-l3{width:24vw;height:24vw;background:var(--zw-licht-c);top:22%;left:28%}
/* Seifenblasen: scharf gezeichnet statt weichgezeichnet.
   Drei Verläufe übereinander — Lichtpunkt, Farbschimmer, heller Rand. */
.zw-bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.zw-bubble{position:absolute;border-radius:50%;will-change:transform;
  background:
    radial-gradient(circle at 30% 26%,
      rgba(255,255,255,.92) 0 3%,
      rgba(255,255,255,.35) 7%,
      rgba(255,255,255,0) 20%),
    radial-gradient(circle at 72% 74%,
      rgba(110,190,255,.30),
      rgba(160,120,255,.14) 40%,
      rgba(255,255,255,0) 62%),
    radial-gradient(circle at 50% 50%,
      rgba(255,255,255,0) 62%,
      rgba(140,205,255,.22) 80%,
      rgba(235,248,255,.75) 93%,
      rgba(255,255,255,.15) 98%,
      rgba(255,255,255,0) 100%);
  box-shadow:inset 0 0 22px rgba(150,210,255,.18), 0 0 18px rgba(90,160,230,.14)}

/* Ein Teil der Blasen in Signalfarbe — wie Glut in blauer Luft */
.zw-bubble-glut{
  background:
    radial-gradient(circle at 30% 26%,
      rgba(255,255,255,.92) 0 3%,
      rgba(255,246,224,.35) 7%,
      rgba(255,255,255,0) 20%),
    radial-gradient(circle at 72% 74%,
      rgba(226,192,90,.34),
      rgba(198,160,52,.16) 40%,
      rgba(255,255,255,0) 62%),
    radial-gradient(circle at 50% 50%,
      rgba(255,255,255,0) 62%,
      rgba(232,205,130,.24) 80%,
      rgba(250,240,205,.78) 93%,
      rgba(255,255,255,.15) 98%,
      rgba(255,255,255,0) 100%);
  box-shadow:inset 0 0 22px rgba(232,205,130,.20), 0 0 20px rgba(212,175,55,.18);
}

.zw-inner{position:relative;z-index:1;max-width:min(62rem,100%)}

/* --- 02 Einflug --- */
.zw-slab{overflow:hidden}
.zw-from-l,.zw-from-r{display:block}

/* --- 03 Leistungskacheln --- */
.zw-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.5rem}
.zw-tile{aspect-ratio:4/3;position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:1.3rem;border:0;
  text-decoration:none;color:inherit}
.zw-tile:focus-visible{outline:3px solid var(--zw-signal);outline-offset:3px}
.zw-tile svg{width:clamp(54px,7vw,86px);height:auto;display:block;
  stroke:#fff;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;
  opacity:.92;position:relative;z-index:1}
.zw-tile span{position:relative;z-index:1;color:#fff;
  font-family:"Archivo",system-ui,sans-serif;font-weight:700;
  font-size:clamp(.72rem,1.1vw,.86rem);letter-spacing:.06em;text-transform:uppercase;
  line-height:1.15}
.zw-tile::before{content:"";position:absolute;inset:0;transition:transform .5s ease}

/* Sechs eigene Toene — vom Markenblau bis zur Signalfarbe */
.zw-tile:nth-child(1)::before{background:linear-gradient(145deg,#0B1B2E,#1B3E63)}
.zw-tile:nth-child(2)::before{background:linear-gradient(145deg,#0B3F7A,#1E7FD4)}
.zw-tile:nth-child(3)::before{background:linear-gradient(145deg,#134E63,#2A9AA8)}
.zw-tile:nth-child(4)::before{background:linear-gradient(145deg,#5A4A12,#B99A2E)}
.zw-tile:nth-child(5)::before{background:linear-gradient(145deg,#7A6410,#D4AF37)}
.zw-tile:nth-child(6)::before{background:linear-gradient(145deg,#2F3B47,#61707E)}

/* --- 04 Zeilen --- */
.zw-lines p{font-family:"Archivo",system-ui,sans-serif;font-weight:600;
  font-size:clamp(1.15rem,2.6vw,1.8rem);line-height:1.5;max-width:34ch;margin:.25rem 0;
  display:block;overflow:hidden}

/* --- 05 Zahlen --- */
.zw-figures{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:2.5rem}
.zw-num{font-family:"Archivo",system-ui,sans-serif;font-weight:800;
  font-size:clamp(2.4rem,6.5vw,4.6rem);line-height:1;color:var(--zw-signal-hell)}
.zw-lbl{color:var(--zw-grau);margin-top:.45rem}

/* --- 06 Bild aus sechs Teilen --- */
.zw-floatwrap{margin-top:2.5rem;will-change:transform}
.zw-slicer{position:relative;aspect-ratio:16/9;max-width:56rem;overflow:hidden;
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr)}
/* Nach dem Zusammensetzen liegt dasselbe Bild darunter — dadurch fallen
   Rundungsspalten zwischen den Kacheln nicht mehr als weiße Linien auf. */
.zw-slicer.zw-fertig{background-image:var(--zw-foto);background-size:100% 100%;background-position:center}
.zw-slice{background-image:var(--zw-foto);background-size:300% 200%;will-change:transform}
.zw-slice:nth-child(1){background-position:0% 0%}
.zw-slice:nth-child(2){background-position:50% 0%}
.zw-slice:nth-child(3){background-position:100% 0%}
.zw-slice:nth-child(4){background-position:0% 100%}
.zw-slice:nth-child(5){background-position:50% 100%}
.zw-slice:nth-child(6){background-position:100% 100%}

/* --- 07 Partikelfeld --- */
.zw-dots-sec{min-height:66vh;display:flex;flex-direction:column;justify-content:center}
.zw-dots{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.zw-dots-inner{position:relative;z-index:1}

/* --- 09 Blitzeinschlag --- */
.zw-blitz-sec{min-height:70vh;display:flex;flex-direction:column;justify-content:center}
.zw-blitzbox{position:relative;display:inline-block;max-width:100%}
.zw-blitz{position:absolute;left:0;top:-420px;width:100%;height:calc(100% + 420px);
  overflow:visible;pointer-events:none;opacity:0}
.zw-blitz path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.zw-blitz .zw-halo{stroke:#1E7FD4;opacity:.30;filter:blur(11px)}
.zw-blitz .zw-schein{stroke:#9FD2FF;opacity:.55;filter:blur(3.5px)}
.zw-blitz .zw-kern{stroke:#FFFFFF}
.zw-blitz .zw-ast{stroke:#DCEEFF;opacity:.85}
.zw-blitz .zw-funke{stroke:#EAF5FF;stroke-width:1.5;opacity:.95}
.zw-knall{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(55% 45% at 50% 38%,rgba(220,238,255,.95),rgba(30,127,212,.30) 42%,transparent 70%)}
.zw-leucht{position:relative}

@media (max-width:760px){
  .zw-tiles{grid-template-columns:repeat(2,1fr)}
  .zw-figures{grid-template-columns:1fr;gap:1.4rem}
  .zw-hero{min-height:0}
}

/* ===================================================================
   Umbruch langer Wörter — gilt für die ganze Seite
   -------------------------------------------------------------------
   Ein Wort ohne Trennstelle ist für den Browser eine Einheit, die er
   nicht auseinanderreißt. Passt sie nicht, ragt sie über den Rand und
   die Seite wird breiter als der Bildschirm.

   overflow-wrap und hyphens werden vererbt — eine Zeile auf body genügt.
   Beides ist reine Darstellung: Im Quelltext bleibt das Wort unverändert,
   Suchmaschinen und KI lesen es wie vorher.

   word-break bleibt bewusst auf normal. break-all würde Wörter an
   beliebiger Stelle zerhacken und die Lesbarkeit verschlechtern.
   =================================================================== */
body{
  overflow-wrap:break-word;
  word-break:normal;
}
/* Überschriften trennen mit Bindestrich an sinnvoller Stelle.
   Setzt lang="de" im html-Tag voraus, das WordPress automatisch schreibt. */
h1,h2,h3,h4,.zw-h1,.zw-h2{
  hyphens:auto;
}
/* Sicherheitsnetz gegen waagerechtes Ziehen. clip ist hidden vorzuziehen,
   weil es keinen Scroll-Container erzeugt und position:sticky nicht bricht.
   Ältere Browser fallen auf hidden zurück. */
body{
  overflow-x:hidden;
  overflow-x:clip;
}

/* --- Ablauf: zwei Spalten, heller Grund, Skizze neben jedem Schritt --- */
.zw-schritte{display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(2rem,4vw,3.5rem) clamp(2rem,4vw,4rem);margin-top:3rem}
.zw-schritt{display:grid;grid-template-columns:clamp(110px,13vw,180px) 1fr;
  gap:clamp(1rem,2.5vw,2rem);align-items:start}
.zw-schritt img{width:100%;height:auto;display:block;will-change:transform}
.zw-schritt .zw-nr{font-family:"Archivo",system-ui,sans-serif;font-weight:600;
  font-size:clamp(1rem,1.8vw,1.3rem);letter-spacing:.16em;text-transform:uppercase;color:var(--zw-signal);
  display:block;margin-bottom:.4rem}
.zw-schritt h3{font-family:"Archivo",system-ui,sans-serif;font-weight:800;
  text-transform:uppercase;font-size:clamp(1.25rem,2.4vw,1.9rem);line-height:1.05;
  margin:0 0 .6rem;letter-spacing:-.01em;color:var(--zw-dunkel)}
.zw-schritt p{margin:0;line-height:1.62;color:#5A6670;font-size:1rem}

@media (max-width:900px){
  .zw-schritte{grid-template-columns:1fr;gap:2.2rem}
}
@media (max-width:600px){
  .zw-schritt{grid-template-columns:92px 1fr;gap:1.1rem}
}

/* --- WhatsApp-Knopf, läuft beim Scrollen mit --- */
.zw-wa{position:fixed;right:clamp(14px,3vw,28px);bottom:clamp(14px,3vw,28px);
  z-index:9999;width:60px;height:60px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#25D366;box-shadow:0 6px 22px rgba(0,0,0,.28);
  text-decoration:none;transition:transform .18s ease,box-shadow .18s ease}
.zw-wa:focus-visible{transform:scale(1.08);box-shadow:0 10px 30px rgba(0,0,0,.36)}
.zw-wa svg{width:34px;height:34px;fill:#fff;display:block}
/* leiser Puls, damit er auffällt ohne zu nerven */
.zw-wa::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid #25D366;animation:zw-puls 2.6s ease-out infinite;pointer-events:none}
@keyframes zw-puls{
  0%{transform:scale(1);opacity:.7}
  70%{transform:scale(1.5);opacity:0}
  100%{transform:scale(1.5);opacity:0}
}
@media (prefers-reduced-motion:reduce){ .zw-wa::after{animation:none} }

/* --- Referenzen: echte Projekte --- */
.zw-refs{display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(1.5rem,3vw,2.5rem);margin-top:3rem}
.zw-ref{position:relative;overflow:hidden;border:1px solid var(--zw-linie);
  background:#fff;text-decoration:none;color:inherit;display:block}
.zw-ref-bild{position:relative;aspect-ratio:16/10;overflow:hidden}
.zw-ref-bild img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s ease}
.zw-ref-text{padding:1.2rem 1.4rem 1.5rem}
.zw-ref-text .zw-nr{font-family:"Archivo",system-ui,sans-serif;font-weight:600;
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--zw-blau);
  display:block;margin-bottom:.4rem}
.zw-ref-text h3{font-family:"Archivo",system-ui,sans-serif;font-weight:800;
  text-transform:uppercase;font-size:clamp(1.1rem,2vw,1.5rem);line-height:1.1;
  margin:0 0 .5rem;color:var(--zw-dunkel)}
.zw-ref-text p{margin:0;line-height:1.6;color:#5A6670;font-size:.97rem}

@media (max-width:800px){ .zw-refs{grid-template-columns:1fr} }

/* Signalwort in Überschriften */
.zw-hi{color:var(--zw-signal-hell)}
.zw-sec:not(.zw-dark) .zw-hi{color:var(--zw-signal)}


/* --- Frageblöcke (Was Sie bekommen, Häufige Fragen) --- */
.zw-faq{margin-top:2.5rem;display:grid;gap:1.7rem;max-width:64rem}
.zw-faq > div{border-top:1px solid var(--zw-linie);padding-top:1.5rem}
.zw-dark .zw-faq > div{border-top-color:rgba(255,255,255,.16)}
.zw-faq h3{font-family:"Archivo",system-ui,sans-serif;font-weight:800;
  text-transform:uppercase;font-size:clamp(1rem,1.7vw,1.25rem);line-height:1.15;
  margin:0 0 .6rem;letter-spacing:-.005em;color:var(--zw-dunkel)}
.zw-dark .zw-faq h3{color:var(--zw-hell)}
.zw-faq p{margin:0;line-height:1.68;color:#5A6670;font-size:1rem;max-width:58ch}
.zw-dark .zw-faq p{color:var(--zw-grau)}
.zw-faq a{color:var(--zw-blau)}
.zw-dark .zw-faq a{color:var(--zw-signal-hell)}

/* --- Überschriften: nie mitten im Wort trennen ---
   Regel wie bei MF-CarClean: keine Silbentrennung. Passt eine lange
   Überschrift nicht, wird auf schmalen Displays die Schrift kleiner,
   bis das Wort am Stück hineinpasst. break-word bleibt nur als
   Sicherheitsnetz, damit nichts über den Rand hinausragt. */
.zw-h1,.zw-h2{hyphens:none;-webkit-hyphens:none;overflow-wrap:break-word}

@media (max-width:600px){
  .zw-h1{font-size:clamp(1.6rem,6.4vw,2.6rem)}
  .zw-h2{font-size:clamp(1.45rem,5.8vw,2.2rem)}
}

/* --- Preistabelle --- */
.zw-preise{width:100%;max-width:64rem;border-collapse:collapse;margin-top:2.5rem}
.zw-preise th,.zw-preise td{text-align:left;padding:1.3rem 0;border-bottom:1px solid var(--zw-linie);vertical-align:baseline}
.zw-preise tr:first-child th,.zw-preise tr:first-child td{border-top:1px solid var(--zw-linie)}
.zw-preise th{font-family:"Archivo",system-ui,sans-serif;font-weight:800;text-transform:uppercase;
  font-size:clamp(.95rem,1.6vw,1.15rem);letter-spacing:-.005em;color:var(--zw-dunkel);padding-right:2rem}
.zw-preise th span{display:block;margin-top:.45rem;font-family:"Inter",system-ui,sans-serif;
  font-weight:400;text-transform:none;letter-spacing:0;font-size:.95rem;line-height:1.55;
  color:#5A6670;max-width:48ch}
.zw-preise .zw-preis{font-family:"Archivo",system-ui,sans-serif;font-weight:800;
  font-size:clamp(1.15rem,2.2vw,1.6rem);color:var(--zw-signal);white-space:nowrap;text-align:right}
@media (max-width:640px){
  .zw-preise th,.zw-preise td{display:block;border-bottom:0;padding:0}
  .zw-preise tr:first-child th{border-top:0}
  .zw-preise th{padding-top:1.5rem;padding-right:0}
  .zw-preise td{padding:.6rem 0 1.5rem;border-bottom:1px solid var(--zw-linie);text-align:left}
}

/* Hinweiszeile unter der Preistabelle */
.zw-preis-hinweis{margin:1.1rem 0 0;font-size:.88rem;line-height:1.6;color:#5A6670;max-width:58ch}

/* ---------------------------------------------------------------------
   Signalwoerter auf hellem Grund: KEINE Kontur mehr, sondern Markenblau.
   Gold bleibt damit den dunklen Abschnitten vorbehalten - dort steht es
   mit fast 10:1 vor Navy und wirkt genau deshalb besonders.
   --------------------------------------------------------------------- */
.zw-sec:not(.zw-dark) .zw-schritt .zw-nr,
.zw-sec:not(.zw-dark) .zw-hi,
.zw-sec:not(.zw-dark) .zw-preise .zw-preis,
.zw-sec:not(.zw-dark) .zw-num{
  color:var(--zw-signal-dunkel);
  text-shadow:none}


/* ---------------------------------------------------------------------
   Hero "Website erstellen lassen": Film laeuft ueber die volle Flaeche
   im Hintergrund, darueber eine Navy-Schicht, die ihn zuruecknimmt.
   Die Staerke steht in --zw-deck (0.60 = Film kommt zu 40 % durch).
   --------------------------------------------------------------------- */
.zw-hero-film{position:relative;isolation:isolate;overflow:hidden;
  --zw-deck:.60;   /* wie stark die Navy-Schicht den Film zurueckhaelt */
  --zw-hoch:100%}  /* welcher Teil des Films im Streifen liegt: 0 oben, 100 unten */
.zw-film{position:absolute;inset:0;z-index:0;overflow:hidden}
.zw-film video{width:100%;height:100%;object-fit:cover;display:block;
  object-position:center var(--zw-hoch);
  filter:grayscale(.35) contrast(1.05)}
.zw-film::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,
    rgba(11,27,46,var(--zw-deck)) 0%,
    rgba(11,27,46,var(--zw-deck)) 46%,
    rgba(11,27,46,calc(var(--zw-deck) - .16)) 100%)}
/* Die Seifenblasen haengt das Skript selbst in den Kopfbereich. Sie sollen
   ueber dem Film liegen, aber unter der Schrift - deshalb sind sie hier
   ausgenommen und behalten ihr eigenes z-index:0. */
.zw-hero-film > *:not(.zw-film):not(.zw-bubbles){position:relative;z-index:1}
.zw-hero-film .zw-h1{text-shadow:0 2px 24px rgba(0,0,0,.45)}
.zw-hero-film .zw-lead{max-width:46ch;text-shadow:0 1px 12px rgba(0,0,0,.4)}

/* ---------------------------------------------------------------------
   Startseiten-Kopf: derselbe Aufbau, aber der Team-Film ist heller und
   bunter als der Code-Film der Unterseite. Deshalb wird er zusaetzlich
   abgedunkelt und staerker entfaerbt.
   Eigene Variablennamen - --zw-grau und --zw-dunkel sind oben schon
   als Farben vergeben und duerfen hier nicht ueberschrieben werden.
   --------------------------------------------------------------------- */
.zw-hero-start{
  --zw-hoch:50%;        /* Bildmitte, nicht der untere Rand */
  --zw-abdunkeln:.80;   /* Film herunterdruecken, bevor Navy darueber liegt */
  --zw-entfaerbt:.47}   /* 0 = volle Farbe, 1 = reines Grau */
.zw-hero-start .zw-film video{
  filter:grayscale(var(--zw-entfaerbt)) contrast(1.06) brightness(var(--zw-abdunkeln))}

/* ---------------------------------------------------------------------
   Referenz-Handys neben dem Text ("Wer hier richtig ist")
   Klasse heisst .zw-duo und NICHT .zw-split - .zw-split ist von der
   Buchstaben-Animation belegt.
   --------------------------------------------------------------------- */
.zw-duo{display:grid;grid-template-columns:1fr;gap:2.4rem}
.zw-duo-text .zw-lead{max-width:52ch}

.zw-shots{position:relative;overflow:hidden;height:400px;background:transparent}
.zw-grid{position:absolute;left:0;right:0;top:0;
  display:flex;justify-content:center;align-items:flex-start;gap:22px}
.zw-col{display:flex;flex-direction:column;gap:22px;will-change:transform;
  flex:1 1 0;min-width:150px;max-width:210px}
.zw-col[data-col="1"]{transform:translateY(-60px)}
.zw-col[data-col="2"]{transform:translateY(-160px)}
.zw-col[data-col="3"]{display:none;transform:translateY(-100px)}
@media(min-width:640px){.zw-col[data-col="3"]{display:flex}}

@media(max-width:899px){
  .zw-shots{margin-bottom:calc(-1 * clamp(3.5rem,9vw,7rem))}
}

@media(min-width:900px){
  .zw-sec-shots{overflow:hidden}
  .zw-sec-shots .zw-duo{grid-template-columns:minmax(0,44%)}
  .zw-sec-shots .zw-shots{position:absolute;top:0;bottom:0;left:46%;right:0;
    height:auto;margin-bottom:0}
  .zw-grid{justify-content:flex-start;gap:34px;padding-left:0;right:auto;
    width:max-content}
  .zw-col{gap:34px;flex:0 0 auto;width:clamp(210px,19vw,300px);max-width:none}
}

.zw-phone{position:relative;border-radius:11%/5.2%;padding:1.9%;background:#101215;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),
   0 26px 48px rgba(16,24,38,.18), 0 6px 14px rgba(16,24,38,.12),
   0 0 0 1px rgba(16,24,38,.09)}
.zw-screen{position:relative;border-radius:9.4%/4.4%;overflow:hidden;background:#fff;
  aspect-ratio:9/19.3}
.zw-screen img{width:100%;height:100%;object-fit:cover;object-position:top center;
  display:block}
.zw-bar{position:absolute;top:0;left:0;right:0;height:5.6%;min-height:24px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 6.5% 0 7.5%;font-size:clamp(9px,3.4%,12px);font-weight:600;letter-spacing:.2px}
.zw-ico{display:flex;align-items:center;gap:3px}
.zw-island{position:absolute;top:1.5%;left:50%;transform:translateX(-50%);
  width:31%;height:2.6%;min-height:13px;border-radius:999px;background:#101215}

.zw-b{position:absolute;display:block;width:2px;background:#191C21;border-radius:1px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.zw-b-mute{left:-2px;top:16%;height:3.2%}
.zw-b-up{left:-2px;top:23%;height:6.4%}
.zw-b-down{left:-2px;top:34%;height:6.4%}
.zw-b-pwr{right:-2px;top:28%;height:9%}

/* --- Antippen auf dem Handy --------------------------------------
   Mobile Browser legen beim Antippen ein eckiges, halbdurchsichtiges
   Feld ueber das getroffene Element - auch ueber runde Knoepfe. Es
   folgt dem Kasten statt der Form und blitzt kurz auf.
   Hier wird es abgeschaltet. Statt dessen drueckt sich der Knopf
   kurz ein: eine Rueckmeldung, die der Form folgt.

   Die Tastatur-Umrandung (:focus-visible) bleibt unangetastet - die
   braucht jeder, der ohne Maus bedient, und sie erscheint beim
   Antippen ohnehin nicht. */
a, button, label, summary,
input, select, textarea{
  -webkit-tap-highlight-color:rgba(0,0,0,0)}

.zw-wa:active{transform:scale(.93);box-shadow:0 4px 14px rgba(0,0,0,.3)}

@media (prefers-reduced-motion:reduce){
  .zw-wa:active{transform:none}
}

/* --- Fokusrahmen: sichtbar fuer die Tastatur, unsichtbar beim Klicken ---
   Twenty Twenty-Five setzt seinen Rahmen auf :focus. Das greift auch,
   wenn jemand mit der Maus klickt - dann blitzt um Logo und Menue ein
   eckiger Kasten auf, der dort nichts zu suchen hat.

   :focus-visible entscheidet der Browser selbst: er zeigt den Rahmen
   bei Tastatur und Hilfsmitteln, nicht bei Maus und Finger. Genau das
   wollen wir. Entfernt wird der Rahmen NICHT - wer ohne Maus bedient,
   sieht sonst nicht mehr, wo er gerade ist. Er wird nur gestaltet:
   in Markenfarbe, mit Abstand, und rund statt eckig. */
:focus:not(:focus-visible){
  outline:none;
  box-shadow:none}

:is(a,button,summary,label,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--zw-signal-dunkel);
  outline-offset:3px}

/* Auf dunklem Grund waere das Markenblau zu leise. */
.zw-dark :focus-visible,
.wp-block-navigation :focus-visible,
.wp-block-site-logo a:focus-visible{
  outline-color:#6FB2F0}

/* Logo und Menuepunkte bekommen eine runde Fassung mit etwas Luft. */
.wp-block-site-logo a:focus-visible,
.wp-block-navigation-item a:focus-visible,
.wp-block-navigation__responsive-container-open:focus-visible,
.wp-block-navigation__responsive-container-close:focus-visible{
  outline-offset:6px;
  border-radius:10px}

/* --- Zeigen mit der Maus ------------------------------------------
   Auf dem Handy gibt es kein Zeigen. Der Browser tut aber so: nach
   einem Tipp bleibt :hover an dem Element haengen, bis man woanders
   hintippt. Eine Kachel bleibt dann vergroessert, ein Bild
   herangezoomt, ein Menuepunkt leuchtet weiter - als waere etwas
   ausgewaehlt, was gar nicht ausgewaehlt ist.

   (hover: hover) and (pointer: fine) fragt, ob das Geraet wirklich
   zeigen kann. Am Desktop ja, am Handy nein.

   Der Tastaturfokus haengt NICHT hier drin - der muss auf jedem
   Geraet sichtbar bleiben. */
@media (hover: hover) and (pointer: fine){
  .zw-tile:hover::before{transform:scale(1.06)}
  .zw-wa:hover{transform:scale(1.08);box-shadow:0 10px 30px rgba(0,0,0,.36)}
  .zw-ref:hover .zw-ref-bild img{transform:scale(1.04)}
}