/* ⚠️ ERZEUGT — nicht hier bearbeiten.
   Quelle: design-sources/modvio-neu/quelle/landing-v4.css (32 Baustein-Klassen).
   Auffrischen: node docs/kopf-fuss-holen.mjs · Der Doku-Bau prueft die Kopie gegen die Quelle.
   Einzige Abweichung zur Quelle: '.btn' heisst hier '.nv-btn' (Namenskollision mit der Doku). */
/* Die kleinen Akzent-Quadrate sind Zellen des Zeichens in klein — sie tragen dieselbe
   Rundung wie das Zeichen selbst (30 % der Kante, siehe .mark .mk i). Vorher standen hier
   drei Werte nebeneinander: 0, 2px und gar keine Angabe. EINE Zeile zum Zurueckdrehen:
   diesen Block loeschen, dann sind alle wieder scharfkantig. */
.hero .note i,.cmp-h i,.cmp li i,.tile .cap i,.three li i,.modgrid .sq,
.lg-i.open s,.keeps-note i,.acc-b li i{border-radius:30%}
/* ---------- Knöpfe: kantig, flach, ein Akzent ---------- */
.nv-btn,.nv-btn-2,.nv-btn-w,.nv-btn-o{display:inline-flex;align-items:center;gap:9px;font-family:inherit;font-size:.98rem;font-weight:600;padding:15px 24px;border-radius:var(--r-btn);border:1px solid transparent;white-space:nowrap;cursor:pointer;transition:background .16s,border-color .16s,color .16s}
.nv-btn{background:var(--blue);color:#fff}
.nv-btn:hover{background:var(--blue-deep);color:#fff}
.nv-btn svg,.nv-btn-2 svg,.nv-btn-w svg,.nv-btn-o svg{width:17px;height:17px;flex:0 0 auto}
.nv-btn-sm{padding:11px 17px;font-size:.9rem}
/* ---------- Wortmarke ---------- */
.mark{display:flex;align-items:center;gap:9px;font-size:1.16rem;font-weight:700;letter-spacing:-.045em;flex:0 0 auto}
.mark .mk{width:19px;height:19px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3px;flex:0 0 auto}
.mark .mk i{background:currentColor;border-radius:30%}
.mark .mk i.hl{background:var(--blue)}
/* ---------- Ankündigungsband über der Leiste ---------- */
.topbar{background:var(--grey);border-bottom:1px solid var(--line);text-align:center;padding:11px 20px;font-size:.86rem;color:var(--text)}
.topbar b{color:var(--ink);font-weight:700}
.topbar a{color:var(--blue-deep);font-weight:600;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.topbar a:hover{color:var(--ink)}
@media(max-width:600px){
  .topbar{font-size:.79rem;padding:9px 14px;line-height:1.45}
}
/* ---------- Navileiste: volle Breite, hell, mittiges Menü, kantig ----------
   Oben transparent, damit der Blau-Schleier durchläuft; ab 12 px Scroll legt
   sich Weiss darunter. Keine Größenänderung, kein Morphen. */
.nv{position:sticky;top:0;z-index:90;background:transparent;border-bottom:1px solid transparent;transition:background .25s,border-color .25s,backdrop-filter .25s}
.nv.on{background:rgba(248,247,244,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom-color:var(--line)}
.nv-in{width:min(1240px,94vw);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:14px;height:var(--nav-h)}
.nv .mark{color:var(--ink);font-size:1.28rem}
.nv .mark:hover{color:var(--ink)}
.nv .mark .mk{width:21px;height:21px}
.nv-menu{display:flex;align-items:center;justify-content:center;gap:2px;min-width:0}
.nv-menu a{font-size:.95rem;font-weight:500;color:var(--ink-2);padding:10px 14px;white-space:nowrap;transition:color .15s}
.nv-menu a:hover{color:var(--blue-deep)}
.nv-r{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.nv-login{font-size:.95rem;font-weight:500;color:var(--ink-2);padding:10px 12px}
.nv-login:hover{color:var(--blue-deep)}
.burger{display:none;width:44px;height:44px;border-radius:var(--r-btn);place-items:center;background:var(--grey);border:1px solid var(--line);color:var(--ink);cursor:pointer}
.burger svg{width:20px;height:20px}
@media(max-width:1199px){
  .nv-menu,.nv-login{display:none}
  .burger{display:grid}
  .nv-in{grid-template-columns:auto 1fr}
  .nv-r{grid-column:2}
}
@media(max-width:640px){
  .nv-in{height:64px}
  .nv .mark{font-size:1.1rem}
  .nv-r{gap:7px}
  /* 44 px bleiben 44 px: unsere Touchziele sind der beste Wert im Vergleichsfeld
     (42 gegen 246 bei Clay) — der neue Knopf darf diese Zahl nicht verschlechtern. */
  .nv-r .nv-btn{padding:0 13px;height:44px;font-size:.88rem;gap:7px;white-space:nowrap}
  .nv-r .nv-btn svg{width:17px;height:17px}
}
.mnv{position:fixed;inset:0;z-index:95;background:var(--paper);display:flex;flex-direction:column;padding:18px clamp(22px,7vw,44px) 40px;opacity:0;visibility:hidden;transition:opacity .22s}
.mnv.open{opacity:1;visibility:visible}
.mnv-x{align-self:flex-end;width:46px;height:46px;border:1px solid var(--line);background:var(--grey);border-radius:var(--r-btn);color:var(--ink);cursor:pointer;display:grid;place-items:center}
.mnv-x svg{width:19px;height:19px}
.mnv a{font-size:1.3rem;font-weight:700;letter-spacing:-.03em;padding:16px 0;border-bottom:1px solid var(--line)}
.mnv .nv-btn{margin-top:24px;justify-content:center}
@media(max-width:600px){
  .hero .row .nv-btn,.hero .row .nv-btn-2{flex:1 1 100%;justify-content:center}
}
/* Struktur */
.mf{background:var(--card);padding:clamp(48px,5.6vw,76px) 0 0}
.mf-in{width:var(--mx);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr));gap:clamp(22px,2.8vw,44px)}
@media(max-width:1000px){
  .mf-in{grid-template-columns:1fr 1fr;gap:34px}
}
.mf-brand{max-width:34ch}
.mf-mark{display:inline-flex;align-items:center;gap:10px;font-size:1.34rem;font-weight:700;letter-spacing:-.03em;color:var(--ink);text-decoration:none}
.mf-mk{width:20px;height:20px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3px}
.mf-mk i{background:var(--ink);border-radius:30%}
.mf-mk i:last-child{background:var(--blue)}
.mf-claim{margin-top:14px;font-size:.94rem;line-height:1.62;color:var(--text)}
.mf-claim b{color:var(--ink-2);font-weight:600}
.mf-soc{margin-top:20px;display:flex;gap:8px}
.mf-soc a{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:var(--r-btn);color:var(--ink-2);transition:border-color .16s,color .16s,background .16s}
.mf-soc a:hover{border-color:var(--blue-ink);color:var(--blue-ink);background:var(--blue-tint)}
.mf-soc svg{width:18px;height:18px}
.mf-col h4{font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);margin:0}
/* Die vier Spalten sind <details>: breit stehen sie offen und sehen aus wie vorher,
   schmal klappen sie zu. Ohne das stapelten sie untereinander und der Fuss war
   1475 px = 1,7 Bildschirme — der zweitgroesste Block der ganzen Seite. */
.mf-col>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;
  list-style:none;cursor:default}
.mf-col>summary::-webkit-details-marker{display:none}
.mf-col>summary::marker{content:""}
.mf-chev{display:none;flex:0 0 auto;width:18px;height:18px;color:var(--faint);transition:transform .22s ease}
.mf-col nav{margin-top:14px;display:grid;gap:11px}
.mf-col a{font-size:.94rem;color:var(--text);text-decoration:none;width:fit-content;border-bottom:1px solid transparent;transition:color .16s,border-color .16s}
/* „modvio Docs“ im Fuss: die Marke bleibt Fliesstext, das Wort Docs ist eine handschriftliche
   Auszeichnung im Markenblau — wie eine Randnotiz. Der Grad steht auf 1.24em, weil Caveat eine
   kleine x-Hoehe hat und sonst neben der Grotesk zu zierlich wirkt; die leichte Drehung nimmt
   dem Wort das Gesetzte. Beides bewusst SPARSAM: eine zweite Schrift traegt genau eine Stelle. */
.mf-docs{font-family:"Caveat",ui-rounded,cursive;font-weight:600;font-size:1.24em;line-height:1;
  color:var(--indigo);margin-left:.06em;display:inline-block;transform:rotate(-3deg) translateY(-.02em)}
.mf-col a:hover .mf-docs{color:var(--blue-deep)}
.mf-col a:hover{color:var(--ink);border-color:var(--line-2)}
.mf-in{padding-bottom:clamp(34px,4vw,56px)}
/* Schlusszeile: keine graue Bank, nur eine Haarlinie. Drei Register in einer Reihe. */
.mf-bot{margin-top:0;border-top:1px solid var(--line)}
.mf-bot>div{width:var(--mx);margin:0 auto;padding:clamp(22px,2.4vw,30px) 0;display:flex;align-items:center;justify-content:space-between;gap:clamp(18px,2.4vw,40px);flex-wrap:wrap;font-size:.83rem;color:var(--faint)}
.mf-cr b{font-weight:700;color:var(--ink);letter-spacing:-.02em;margin-right:9px}
.mf-geo{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.mf-geo i{width:6px;height:6px;background:var(--blue);flex:0 0 auto}
.mf-bot .mf-legal{display:flex;gap:clamp(14px,1.5vw,24px);flex-wrap:wrap;margin-left:auto}
.mf-bot a{color:var(--faint);text-decoration:none;transition:color .16s}
@media(max-width:640px){
  .mf-in{grid-template-columns:1fr;gap:0}
  .mf-brand{max-width:none;padding-bottom:20px}
  .mf-col{border-top:1px solid var(--line)}
  .mf-col>summary{min-height:48px;padding:13px 0;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .mf-col>summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
  .mf-chev{display:block}
  .mf-col[open] .mf-chev{transform:rotate(180deg)}
  .mf-col nav{margin-top:0;padding-bottom:12px;gap:0}
  /* Aufgeklappt sind die Verweise volle 44-px-Zeilen statt 22-px-Textzeilen.
     Zugeklappt kostet das nichts, offen halbiert es die zu kleinen Ziele. */
  .mf-col a{width:auto;min-height:44px;display:flex;align-items:center}
  /* ---- Schlusszeile: luftig statt gequetscht ----
     Kundeneinwand 19.08.2026 am iPhone: „Ein Produkt von und so ist ein bisschen
     gequetscht". Gemessen war es eine Zeile zu breit — Wortmarke (17 + 60 px) plus
     „© 2026 · Ein Produkt von" (155) plus „BARZIK STUDIO" (105) plus zwei Abstaende
     ergaben 355 px auf 351 px Flaeche. Vier Pixel, drei Zeilenumbrueche.
     Die Wortmarke faellt hier weg: sie steht im selben Fuss drei Zeilen weiter oben
     schon einmal in gross. Damit passt der Rest auf eine Zeile. */
  .mf-cr{gap:6px}
  /* Zierde ohne Aussage — im knappen Fuss der erste Kandidat. */
  .mf-geo,.mf-lang{display:none}
  .mf-bot>div{flex-direction:column;align-items:flex-start;gap:14px;padding:22px 0 26px}
  .mf-bot .mf-legal{margin-left:0;gap:18px}
  .mf-bot .mf-legal a{min-height:34px;display:flex;align-items:center}
  /* Mehr Luft um die Bloecke: der Fuss war der dichteste Teil der Seite. */
  .mf{padding-top:34px}
  .mf-claim{margin-top:12px;font-size:.92rem;line-height:1.55}
  .mf-soc{margin-top:18px;gap:10px}
}
.mf-bot a:hover{color:var(--blue-ink)}
@media(max-width:820px){
  .mf-bot>div{flex-direction:column;align-items:flex-start;gap:14px}
  .mf-bot .mf-legal{margin-left:0}
}
.hpm i.hl{background:var(--blue)}
@media(max-width:640px){
  /* Ein Weg traegt sichtbar: WhatsApp bleibt gefuellt, das Erstgespraech steht als
     umrandeter Knopf dahinter. Der Rechner war der dritte gleich grosse Knopf und
     faellt hier weg — er hat weiter unten eine eigene Leiste ueber die volle Breite
     (`.calc-bar`), der Weg verschwindet also nicht von der Seite. */
  .hero .row .nv-btn,.hero .row .nv-btn-2{width:100%;justify-content:center}
  /* Beiwerk, das schmal nur Zeilen kostet (Textstand bleibt einer, siehe HTML). */
  .tb-lang,.topbar b,.nv-btn-lang{display:none}
}
@media(max-width:640px){
  .mob-bar .nv-btn{flex:1 1 auto;justify-content:center;height:50px;padding:0 14px;font-size:.95rem}
}
/* Zeichen neben der Wortmarke in der Schlusszeile. */
.mf-cr{display:inline-flex;align-items:center;gap:9px}
.mf-bot .bz{display:inline-flex;align-items:center;gap:6px;color:var(--soft)}
.mf-bot .bz svg{width:14px;height:14px;flex:0 0 auto}
.mf-bot .bz:hover{color:var(--ink)}
.mf-cr .mk{flex:0 0 auto;width:17px;height:17px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px}
.mf-cr .mk i{background:var(--ink);border-radius:30%}
.mf-cr .mk i.hl{background:var(--blue)}
/* Fuss laesst die Textur durchscheinen, bleibt aber Papier unter dem Text. */
.mf{background:none}
.nv-btn,.nv-btn-2,.nv-btn-w,.nv-btn-o,.nv-btn-wa{height:54px}
.nv-btn{box-shadow:0 14px 30px -18px rgba(30,79,216,.65)}
.nv-btn svg,.nv-btn-o svg,.mnv .nv-btn svg{color:#fff;fill:currentColor}
@media(pointer:coarse){
  /* ⚠️ `#swDots` ist eine ID, keine Klasse — mit `.swDots` griff die Regel nicht und
     die Punkte blieben bei 8 px Trefferhoehe (per elementFromPoint nachgemessen, nicht
     per Stilabfrage: die Stilabfrage haette „44 px" gemeldet, sobald die Regel
     irgendwo greift). Zweites Mal derselbe Fehler in dieser Datei, nach `.gespraech`.
     Nicht enthalten sind die beiden Fliesstext-Verweise in `.tel-fine` („wie das
     läuft", „Datenschutz"): Verweise INNERHALB eines Satzes sind von der
     Mindestgroesse ausgenommen, und eine 44-px-Huelle darum wuerde die Nachbarzeilen
     ueberdecken und deren Tipper schlucken. */
  #swDots button,.topbar a,.nv .mark,.mf-mark,.mf-bot .bz{position:relative}
  #swDots button::after,.topbar a::after,.nv .mark::after,.mf-mark::after,.mf-bot .bz::after{
    content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:max(100%,44px);height:44px}
  .mf-soc a{width:44px;height:44px}
  .mf-bot .mf-legal a{min-height:44px}
}
@media(max-width:640px){
  .mf-cr .mk,.mf-cr>b{display:none}
}
@media(min-width:641px){
  .nv-btn-lang{display:contents}
}
/* Die Wortmarke, wie die Seite sie auf hellem Grund selbst baut (landing-v4.css:85-88):
   vier Quadrate, drei in der Textfarbe, eines in Markenblau, Rundung 30 % der Kante —
   OHNE den schwarzen Kasten des Favicons. Der gehoert auf dunklen Grund. */
.szene .mk{width:5.2cqw;aspect-ratio:1;display:grid;grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;gap:16%;flex:0 0 auto}
.szene .mk i{background:var(--ink);border-radius:30%}
.szene .mk i.hl{background:var(--blue)}
@media(max-width:720px){
  .szene .mk{width:9cqw}
}
/* Die Wortmarke, wie die Seite sie auf hellem Grund selbst baut (landing-v4.css:85-88):
   vier Quadrate, drei in der Textfarbe, eines in Markenblau, Rundung 30 % der Kante —
   OHNE den schwarzen Kasten des Favicons. Der gehoert auf dunklen Grund. */
.szene .mk{width:5.4cqw;aspect-ratio:1;display:grid;grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;gap:16%;flex:0 0 auto}
.szene .mk i{background:var(--ink);border-radius:30%}
.szene .mk i.hl{background:var(--blue)}
@media(max-width:720px){
  .szene .mk{width:9.2cqw}
}
/* Die Wortmarke, wie die Seite sie auf hellem Grund selbst baut (landing-v4.css:85-88):
   vier Quadrate, drei in der Textfarbe, eines in Markenblau, Rundung 30 % der Kante —
   OHNE den schwarzen Kasten des Favicons. Der gehoert auf dunklen Grund. */
.szene .mk{width:5.2cqw;aspect-ratio:1;display:grid;grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;gap:16%;flex:0 0 auto}
.szene .mk i{background:var(--ink);border-radius:30%}
.szene .mk i.hl{background:var(--blue)}
@media(max-width:720px){
  .szene .mk{width:9cqw}
}
/* Im eigenen Baustein steht die Wortmarke — er ist das Modul, das WIR bauen.
   Auf Blau: drei Quadrate gedaempft weiss, das vierte voll weiss, damit die
   Betonung dieselbe bleibt wie im blauen Quadrat auf hellem Grund. */
.szene .eigen .mk{width:42%;aspect-ratio:1;display:grid;grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;gap:16%}
.szene .eigen .mk i{background:rgba(255,255,255,.62);border-radius:30%}
.szene .eigen .mk i.hl{background:#fff}