/* Feinschliff: eine durchgehende Formensprache für Startseite, Demo-Labor und Besuchs-Tool.
   Leitmotiv «Blatt»: gegenüberliegende Ecken sind rund, die anderen fast eckig. Das gilt für Knöpfe, Reiter und Flächen.
   Wird zuletzt geladen. */
:root {
  --blatt-s: 2px 14px 2px 14px;
  --blatt-m: 3px 20px 3px 20px;
  --blatt-l: 4px 30px 4px 30px;
}

/* ---------- Knöpfe: gestanztes Blatt mit Füllung, die von links einläuft ---------- */
.run, .ld-alle, .l-btn:not(.sek):not(.hell):not(.gefahr), .nav .cta, .ghost, .l-btn.sek, .ld-voll, .l-btn.hell {
  position: relative; overflow: hidden; isolation: isolate; border-radius: var(--blatt-s);
  transition: color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease);
}
.run::before, .ld-alle::before, .l-btn:not(.sek):not(.hell):not(.gefahr)::before, .nav .cta::before, .ghost::before, .l-btn.sek::before, .ld-voll::before, .l-btn.hell::before {
  content: ""; position: absolute; inset: 0; z-index: -1; transform: translateX(-102%); transition: transform .5s var(--ease);
}
.run:hover::before, .ld-alle:hover::before, .l-btn:not(.sek):not(.hell):not(.gefahr):hover::before, .nav .cta:hover::before, .ghost:hover::before, .l-btn.sek:hover::before, .ld-voll:hover::before, .l-btn.hell:hover::before { transform: none; }

/* Auch Links brauchen eine eigene Box, damit die Füllung sauber beschnitten wird */
.ghost, .ld-voll, .ld-alle, .nav .cta, .l-btn, .run { display: inline-flex; align-items: center; justify-content: center; }

/* Hauptknöpfe: Türkis, beim Darüberfahren läuft Schwarz ein */
.run, .ld-alle, .l-btn:not(.sek):not(.hell):not(.gefahr) { background: var(--glacier); color: #0b0d10; border: 0; letter-spacing: .005em; }
.run::before, .ld-alle::before, .l-btn:not(.sek):not(.hell):not(.gefahr)::before { background: #0b0d10; }
.run:hover, .ld-alle:hover, .l-btn:not(.sek):not(.hell):not(.gefahr):hover { color: var(--glacier); background: var(--glacier); box-shadow: inset 0 0 0 1px var(--glacier); transform: none; filter: none; }
.run:active, .ld-alle:active, .l-btn:active { transform: translateY(1px); }
.run:disabled { box-shadow: none; }
.run:disabled::before { display: none; }

/* Zweitknöpfe: Linie, beim Darüberfahren läuft Kreide ein */
.ghost, .l-btn.sek, .ld-voll, .nav .cta { background: transparent; border: 1px solid var(--line-strong); color: var(--chalk); }
.ghost::before, .l-btn.sek::before, .ld-voll::before, .nav .cta::before { background: var(--chalk); }
.ghost:hover, .l-btn.sek:hover, .ld-voll:hover, .nav .cta:hover { color: var(--ink); border-color: var(--chalk); background: transparent; box-shadow: none; }
.l-btn.hell { background: var(--chalk); color: var(--ink); border: 0; }
.l-btn.hell::before { background: var(--glacier); }

/* Reiter und Auswahlknöpfe im selben Blatt */
.tabs button, .fl-tabs button, .ld-tabs button, .l-chip, .lv-vorschlag button, .seg button { border-radius: var(--blatt-s); }
.fl-tabs, .tabs { border-radius: var(--blatt-m); }
.l-chip { transition: border-color .25s, background .25s, color .25s, transform .25s var(--ease); }
.l-chip:hover { transform: translateY(-1px); }
.l-farben button { border-radius: 50% 4px 50% 4px; }

/* Flächen im Blatt */
.console, .z-board, .ld-box, .shot, .l-buehne, .lh-karte, .lh-top, .l-card, .l-cta, .qf, .out-box, .lv-kasse, .systems, .moeg-grid, .l-rechnen { border-radius: var(--blatt-m); }
.console, .ld-box, .l-buehne { border-radius: var(--blatt-l); }
.l-input, .l-select, .l-text, .l-ablage, .doc, .files li { border-radius: 3px 12px 3px 12px; }
.tags li, .l-tag, .l-badge, .badge { border-radius: 2px 10px 2px 10px; }

/* Eingabefelder und Fokus */
:focus-visible { outline: 2px solid var(--glacier); outline-offset: 4px; border-radius: 3px 10px 3px 10px; }

/* ---------- Hero: Zürich zuerst, gemalt und gezeichnet ---------- */
:root { color-scheme: dark; }
.skip { position: absolute; left: 16px; top: -64px; z-index: 100; padding: 12px 16px; background: var(--glacier); color: var(--ink); font-weight: 500; border-radius: 6px; }
.skip:focus { top: 12px; }
.hero { min-height: min(100svh, 1080px); }
.hero-media .hero-bg { object-position: 66% 50%; animation: zdrift 52s ease-in-out infinite alternate; transform-origin: 70% 52%; }
@keyframes zdrift { from { transform: scale(1.02); } to { transform: scale(1.04); } }
.hero::after { background:
  linear-gradient(180deg, rgba(11,13,16,.9) 0%, rgba(11,13,16,.5) 9%, rgba(11,13,16,0) 22%, rgba(11,13,16,0) 54%, rgba(11,13,16,.88) 91%, var(--ink) 100%),
  linear-gradient(90deg, rgba(11,13,16,.9) 0%, rgba(11,13,16,.66) 30%, rgba(11,13,16,0) 58%); }
.hero-body { position: relative; z-index: 1; padding-bottom: clamp(32px, 6vh, 64px); }
@media (min-width: 901px) { .hero-body { padding-top: 96px; } }

.hero h1 { font-size: clamp(48px, min(7.9vw, 15vh), 128px); line-height: .92; letter-spacing: -.04em; margin-left: -.04em; }
.hero h1 .h1-name { font: 500 12px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--chalk-2); margin: 0 0 clamp(12px, 2vh, 20px) .06em; }
.hero h1 .h1-a { color: var(--chalk); }
.hero h1 .h1-b { color: var(--glacier); }
.hero h1 .h1-a, .hero h1 .h1-b { white-space: nowrap; }
.hero h1 span { animation: steigt 1.3s var(--ease) both; }
.hero h1 .h1-name { animation-delay: 0s; }
.hero h1 .h1-a { animation-delay: .12s; }
.hero h1 .h1-b { animation-delay: .3s; }

.hero-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 0; max-width: 620px; margin-top: clamp(18px, 3vh, 34px); padding-top: 0; border-top: 0; animation: steigt 1.2s var(--ease) .55s both; }
.hero-foot .hero-lead { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.45; color: var(--chalk); max-width: 44ch; text-wrap: pretty; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(16px, 2.6vh, 28px); }
.hero-cta .hk { width: auto; margin: 0; min-height: 52px; padding: 0 26px; font-size: 16px; font-weight: 500; gap: 10px; white-space: nowrap; }
.hk svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.hk:hover svg { transform: translateX(3px); }
.hero-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; list-style: none; margin-top: clamp(14px, 2.4vh, 24px); font-size: 14px; line-height: 1.5; color: var(--chalk-2); }
.hero-proof a { display: inline-flex; align-items: center; min-height: 28px; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; transition: color .2s, text-decoration-color .2s; }
.hero-proof a:hover { color: var(--chalk); text-decoration-color: var(--glacier); }
.hero-proof .dot { margin-right: 8px; box-shadow: 0 0 0 3px var(--glacier-dim); width: 6px; height: 6px; vertical-align: 1px; }

@media (max-width: 1000px) { .hero-foot { grid-template-columns: none; } }
@media (max-width: 900px) {
  .hero { justify-content: flex-end; }
  .hero::after { background:
    linear-gradient(180deg, rgba(11,13,16,.9) 0%, rgba(11,13,16,.5) 9%, rgba(11,13,16,0) 20%, rgba(11,13,16,0) 30%, rgba(11,13,16,.84) 52%, var(--ink) 80%),
    linear-gradient(90deg, rgba(11,13,16,.4) 0%, rgba(11,13,16,0) 50%); }
  .hero-body { margin-top: 0; padding-top: 0; padding-bottom: 28px; }
  .hero h1 { font-size: clamp(48px, 14.2vw, 104px); }
  .hero h1 .h1-name { font-size: 10.5px; letter-spacing: .08em; }
  .hero-foot { max-width: none; margin-top: 16px; }
  .hero-foot .hero-lead { font-size: 17px; }
  .hero-cta { width: 100%; margin-top: 18px; }
  .hero-cta .hk { flex: 1 1 0; padding: 0 12px; min-width: 0; min-height: 50px; font-size: 15px; }
  .hero-proof { margin-top: 14px; font-size: 13.5px; gap: 2px 18px; }
  .hero-proof li:first-child { display: none; }
  .hero-media .hero-bg { object-position: 72% 50%; }
}
@media (max-width: 380px) {
  .hero-cta .hk { font-size: 14px; padding: 0 8px; gap: 6px; }
  .hero-cta .hk svg { display: none; }
}
/* Handy quer und sehr niedrige Fenster: Porträt steht wie am Desktop rechts, Text kompakt */
@media (orientation: landscape) and (max-height: 560px) {
  .hero::after { background:
    linear-gradient(180deg, rgba(11,13,16,.9) 0%, rgba(11,13,16,.5) 14%, rgba(11,13,16,0) 28%, rgba(11,13,16,0) 62%, rgba(11,13,16,.88) 92%, var(--ink) 100%),
    linear-gradient(90deg, rgba(11,13,16,.9) 0%, rgba(11,13,16,.66) 34%, rgba(11,13,16,0) 62%); }
  .hero-body { margin-top: 0; padding: 76px 0 16px; }
  .hero h1 { font-size: clamp(32px, 12.5vh, 60px); }
  .hero h1 .h1-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
  .hero-foot { margin-top: 10px; max-width: 52ch; }
  .hero-foot .hero-lead { font-size: 15px; }
  .hero-cta { margin-top: 12px; width: auto; }
  .hero-cta .hk { flex: 0 0 auto; min-height: 46px; padding: 0 20px; }
  .hero-proof { display: none; }
}

/* ---------- Bilder in den Abschnitten ---------- */
.ld { isolation: isolate; overflow: hidden; }
.ld-bg { position: absolute; z-index: -1; right: -6%; top: -4%; width: 62%; max-width: 980px; opacity: .3; pointer-events: none; -webkit-mask-image: radial-gradient(closest-side at 60% 45%, #000 20%, transparent 100%); mask-image: radial-gradient(closest-side at 60% 45%, #000 20%, transparent 100%); }
.ld-bg img { width: 100%; height: auto; }
@media (max-width: 860px) { .ld-bg { width: 120%; right: -20%; opacity: .2; } }

/* ---------- Navigation auf kleinen Bildschirmen ---------- */
.nav .menue { display: none; margin-left: auto; margin-right: 10px; padding: 9px 16px; border: 1px solid var(--line-strong); border-radius: var(--blatt-s); background: none; color: var(--chalk); font: 500 14px var(--sans); cursor: pointer; }
@media (max-width: 1000px) {
  .nav .menue { display: inline-flex; }
  .nav ul { display: none; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; gap: 0; background: rgba(11, 13, 16, .98); border-bottom: 1px solid var(--line-strong); padding: 6px var(--gutter) 18px; }
  .nav.offen ul { display: flex; }
  .nav.offen { background: rgba(11, 13, 16, .98); }
  .nav ul a { display: block; padding: 15px 0; font-size: 18px; color: var(--chalk); border-bottom: 1px solid var(--line); }
  .nav ul li:last-child a { border-bottom: 0; }
}
.nav ul a { display: inline-flex; align-items: center; min-height: 44px; }
.brand { min-height: 44px; }
.nav .cta { min-height: 44px; }
html:not(.js) .nav .menue { display: none; }
@media (max-width: 1000px) { .nav .menue { min-height: 44px; } .nav ul a { display: block; min-height: 0; } }
@media (max-width: 560px) { .nav .cta { display: inline-flex; font-size: 13px; padding: 8px 12px; } .nav .menue { margin-right: 8px; padding: 8px 12px; } }
/* Sehr schmale Handys (320 bis 359 px): nur das Logo in der Kopfzeile, der Name steht gross im Hero. So bleibt Platz für Menü und Anfrage-Knopf. */
@media (max-width: 359px) { .nav .brand { font-size: 0; gap: 0; } }
/* ---------- Kleine Bewegungen ---------- */
.fortschritt { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--glacier); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
.ticker:hover .ticker-track { animation-play-state: paused; }

/* Überschrift steigt beim Laden aus dem Dunkel */
@keyframes steigt { from { opacity: 0; transform: translateY(.32em); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }

/* Über mich: ohne Bild, der Text steht allein in einer Spalte */
.about { grid-template-columns: 1fr; }
.about .txt { max-width: 760px; }

/* Zahlen springen nicht mehr, sie laufen hoch */
.facts strong { font-variant-numeric: tabular-nums; }


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero h1 span, .hero-foot, .hero-media .hero-bg { animation: none; }
}


/* Überschriften blenden weich ein. Kein animierter Zeichenabstand: der liess sie beim Einblenden umbrechen und die Seite springen. */
.js .sec-head h2.rv, .js .sec-head h1.rv, .js .z-head h2.rv, .js .moeg h3.rv, .js .about h2.rv, .js .contact h2.rv { filter: blur(14px); transform: translateY(28px) scale(1.035); transform-origin: 0 100%; transition: opacity 1.1s var(--ease), transform 1.3s var(--ease), filter 1.4s var(--ease); transition-delay: var(--d, 0s); }
.js .sec-head h2.rv.in, .js .sec-head h1.rv.in, .js .z-head h2.rv.in, .js .moeg h3.rv.in, .js .about h2.rv.in, .js .contact h2.rv.in { filter: blur(0); transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .sec-head h2.rv, .js .sec-head h1.rv, .js .z-head h2.rv, .js .moeg h3.rv, .js .about h2.rv, .js .contact h2.rv { filter: none; transform: none; }
}

/* ---------- Werbung: eigene Seite /werbung und Anreisser auf der Startseite ---------- */
.sec-head h1 { font-size: clamp(40px, 6vw, 88px); line-height: .95; letter-spacing: -.045em; font-weight: 500; }
.sec-head h1 em { font-style: normal; color: var(--chalk-3); }
.nav ul a[aria-current="page"] { color: var(--chalk); }
.seite-kopf { padding-top: 96px; }
.seite-kopf a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; letter-spacing: .04em; color: var(--chalk-2); transition: color .2s; }
.seite-kopf a:hover { color: var(--glacier); }
.wb-seite { padding-top: clamp(24px, 4vw, 56px); }
.seite-ende { padding: clamp(56px, 8vw, 120px) 0 clamp(72px, 10vw, 160px); border-top: 1px solid var(--line); }
.seite-ende h2 { font-size: clamp(32px, 5vw, 64px); line-height: 1; letter-spacing: -.04em; font-weight: 500; margin: 14px 0 16px; }
.seite-ende h2 em { font-style: normal; color: var(--chalk-3); }
.seite-ende .lead { font-size: clamp(17px, 1.5vw, 20px); color: var(--chalk-2); max-width: 46ch; }
.seite-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.seite-btns .run, .seite-btns .ghost { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; }

.wb-teaser .sec-head { margin-bottom: clamp(28px, 4vw, 48px); }
.wb-tease { display: grid; grid-template-columns: 1fr auto; gap: 20px 40px; align-items: center; padding: clamp(22px, 3vw, 40px); border: 1px solid var(--line-strong); border-radius: var(--blatt-m); background: var(--ink-2); transition: border-color .3s, background .3s; }
.wb-tease:hover, .wb-tease:focus-visible { border-color: var(--glacier); background: var(--ink-3); }
.wb-tease-txt { display: grid; gap: 10px; }
.wb-tease-txt b { font-size: clamp(18px, 2vw, 24px); font-weight: 500; letter-spacing: -.02em; margin-bottom: 4px; }
.wb-li { position: relative; padding-left: 20px; color: var(--chalk-2); font-size: 16px; line-height: 1.45; }
.wb-li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; background: var(--glacier); border-radius: 1px 4px 1px 4px; }
.wb-tease-go { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; background: var(--chalk); color: var(--ink); font-weight: 500; font-size: 15px; border-radius: var(--blatt-s); white-space: nowrap; }
.wb-tease-go svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.wb-tease:hover .wb-tease-go svg { transform: translateX(4px); }
@media (max-width: 700px) {
  .wb-tease { grid-template-columns: 1fr; }
  .wb-tease-go { width: 100%; }
}

/* ---------- Handy: kuerzere Abstaende und eine Uebersicht aller Bereiche ---------- */
.bereiche { display: none; }
@media (max-width: 1000px) {
  .bereiche { display: block; padding: 8px var(--gutter) clamp(40px, 8vw, 72px); }
  .bereiche > p { margin-bottom: 14px; color: var(--chalk-3); }
  .bereiche ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .bereiche a { display: grid; align-content: start; gap: 5px; height: 100%; min-height: 92px; padding: 14px 14px 13px; border: 1px solid var(--line); border-radius: var(--blatt-s); background: var(--ink-2); transition: border-color .25s, background .25s; }
  .bereiche a:active, .bereiche a:hover { border-color: var(--glacier); background: var(--ink-3); }
  .bereiche a i { font: 500 11px var(--mono); font-style: normal; letter-spacing: .1em; color: var(--glacier); }
  .bereiche a b { font-size: 15px; font-weight: 500; letter-spacing: -.01em; line-height: 1.2; }
  .bereiche a span { font-size: 12.5px; line-height: 1.35; color: var(--chalk-3); }
}
@media (min-width: 640px) and (max-width: 1000px) {
  .bereiche ul { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .sec { padding: 64px 0; }
  .sec-head { gap: 16px; margin-bottom: 32px; }
}