/* ============================================================
   MASESites — monochromes Redesign 2026
   Die Datei liegt bewusst nach den bestehenden Stylesheets. So bleiben
   Funktionen und Komponenten erhalten, während die gesamte Oberfläche
   dieselbe dunkle, redaktionelle Designsprache verwendet.
   ============================================================ */

:root {
  color-scheme: dark;
  --bg: #070707;
  --bg-soft: #0b0b0b;
  --bg-warm: #0d0d0d;
  --card: #0a0a0a;
  --ink: #f3f3f1;
  --ink-soft: #a6a6a2;
  --ink-faint: #8b8b87;
  --line: #282828;
  --line-strong: #454545;
  --accent: #f4f4f2;
  --accent-dark: #ffffff;
  --accent-soft: #161616;
  --green: #d7d7d2;
  --ki: #f2f2ef;
  --ki-dark: #c9c9c5;
  --ki-soft: #111111;
  --shadow-s: none;
  --shadow-m: 0 18px 44px rgba(0, 0, 0, 0.28);
  --shadow-l: 0 36px 96px rgba(0, 0, 0, 0.46);
  --shadow-hover: 0 24px 70px rgba(0, 0, 0, 0.52);
  --radius-s: 2px;
  --radius-m: 3px;
  --radius-l: 4px;
  --radius-xl: 4px;
  --wrap: 1800px;
  --header-h: 108px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  /* ---- Display-Stufen ---------------------------------------------
     Vorher trug jede Ueberschrift ihre eigene handjustierte clamp() -
     ueber 20 Stueck mit vw-Faktoren von 2.1 bis 14. Sieben davon standen
     in Mobil-Ueberschreibungen mit 9-14vw und wurden dadurch auf dem
     Handy GROESSER als auf dem Desktop; beim Aufziehen des Fensters
     sprang die Schrift an der Breakpoint-Kante sichtbar herunter.
     Jetzt vier Stufen, jede als Sockel + vw formuliert. Dadurch waechst
     jede Ueberschrift durchgehend mit der Breite - ohne Breakpoint,
     ohne Sprung. Werte je Stufe bei 390 / 720 / 1024 / 1440 px. */
  --d-0: clamp(2.2rem, 1.62rem + 3.62vw, 5.6rem);   /* 40 · 52 · 63 · 78 */
  --d-1: clamp(2.2rem, 1.85rem + 2.67vw, 5rem);     /* 40 · 49 · 57 · 68 */
  --d-2: clamp(1.9rem, 1.59rem + 2.19vw, 4.2rem);   /* 34 · 41 · 48 · 57 */
  --d-3: clamp(1.75rem, 1.45rem + 1.95vw, 3.8rem);  /* 31 · 37 · 43 · 51 */

}

html { scrollbar-color: #3b3b3b #090909; }
::-webkit-scrollbar-track { background: #090909; }
::-webkit-scrollbar-thumb { background-color: #3b3b3b; }

body,
body.app {
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
}

body::before {
  background-color: #070707;
  background-image:
    radial-gradient(900px 580px at 12% -12%, rgba(255,255,255,.045), transparent 67%),
    radial-gradient(820px 520px at 92% 12%, rgba(255,255,255,.028), transparent 72%),
    linear-gradient(180deg, #080808 0%, #060606 100%);
  background-repeat: no-repeat;
}
body::after { display: none; }

img { color: var(--ink-soft); }
a { color: var(--ink); }
a:hover { color: #fff; }
p a, li a, .msg a { text-decoration-color: #666; }

h1, h2 {
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -.018em;
}
h3, h4, b, strong { color: var(--ink); }
h1 { font-size: clamp(3.1rem, 6vw, 6.35rem); }
h2 { font-size: var(--d-2); }
h3 { font-size: var(--fs-h4); }

.wrap { width: 100%; max-width: var(--wrap); padding-inline: clamp(24px, 4vw, 64px); }
/* Vorher lagen die drei Sektions-Abstaende bei 74 / 62 / 78px Minimum -
   praktisch identisch. Die Seite hatte damit EIN Register und las sich
   ueber acht Abschnitte gleichfoermig weg. Jetzt zwei mit klarem
   Verhaeltnis: weite Abschnitte bekommen rund doppelt so viel Luft wie
   dichte. Naehe bedeutet wieder Zusammengehoerigkeit. */
section { padding-block: clamp(92px, 9.5vw, 176px); }
section.tight { padding-block: clamp(52px, 4.6vw, 84px); }
main > section + section { border-top: 1px solid var(--line); }

/* Der Kicker war ein klassisches Eyebrow: 11px, VERSALIEN, halbfett,
   0.13em gesperrt, sechsmal direkt ueber einer Ueberschrift. Genau die
   Form, die inzwischen auf jeder zweiten Seite steht - sie sagt nichts
   ueber diesen Betrieb.
   Die Seite hat aber bereits ein eigenes Register: die Massangaben der
   Leistungskarten (01-04 mit kurzem Strich daneben). Der Kicker gehoert
   dort hinein statt in ein drittes, fremdes Vokabular. Also: gemischte
   Schreibung statt Versalien, normales Gewicht, und derselbe 26px-Strich
   davor, den die Nummern tragen. Aus drei Ornamenten wird eines. */
.kicker,
.pl-kategorie {
  /* inline-flex, nicht flex: sonst wird der Kicker blockbreit und rutscht
     in den zentrierten Sektionskoepfen nach links aus der Mitte. */
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #b4b4b0;
  font-size: var(--fs-meta);
  letter-spacing: .02em;
  font-weight: 400;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}
.kicker::before,
.pl-kategorie::before {
  content: "";
  flex: 0 0 auto;
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: .55;
}
.lead { color: var(--ink-soft); font-size: clamp(1rem, 1.35vw, 1.22rem); line-height: 1.55; }
.section-head { margin-bottom: 42px; }
.section-head.center { text-align: left; }
.section-head.center .lead { margin-inline: 0; }

:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
::selection { background: #f2f2ef; color: #090909; }

/* ---------- Navigation ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  top: 0;
  padding: 0;
  background: rgba(7, 7, 7, .83);
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(18px) saturate(.7);
  -webkit-backdrop-filter: blur(18px) saturate(.7);
  transition: background-color 180ms ease, border-color 180ms ease, opacity 180ms ease;
}
.site-header.scrolled { background: rgba(7,7,7,.96); border-bottom-color: var(--line); }
.header-inner,
.site-header.scrolled .header-inner {
  max-width: 1800px;
  min-height: var(--header-h);
  padding: 18px clamp(24px, 3vw, 48px);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Die Wortmarke ist ein Bild (assets/img/logo-mase.png, hell auf
   Transparenz). Der Text im Markup bleibt als zugaenglicher Name stehen,
   wird aber nicht dargestellt - Screenreader und Google lesen weiter
   "masesites". Die Hoehe steuert alles, die Breite folgt dem
   Seitenverhaeltnis 5.822 der Zeichnung (M-Monogramm + MASESITES). */
.logo {
  --logo-h: 30px;
  gap: 0;
  color: transparent !important;
  font-size: 0 !important;
  white-space: nowrap;
}
.logo::before {
  content: "";
  display: block;
  width: calc(var(--logo-h) * 5.822);
  height: var(--logo-h);
  background: url("../img/logo-mase.png?v=2") left center / contain no-repeat;
}
.logo::after { content: none; }
.logo .app-pill { margin-left: 10px; color: var(--ink-soft); font-size: var(--fs-tiny); letter-spacing: .04em; }

.main-nav { gap: clamp(18px, 2.2vw, 38px); }
.main-nav a {
  color: #d7d7d4;
  font-size: var(--fs-small);
  font-weight: 400;
  white-space: nowrap;
}
/* Der Unterstrich lief ueber die Breite - das rechnet bei jedem Hover das
   Layout neu. Volle Breite plus scaleX macht dasselbe Bild auf der GPU.
   transform-origin links, damit er wie bisher von links auswaechst. */
.main-nav a::after {
  bottom: -9px;
  height: 1px;
  width: 100%;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 180ms var(--ease-out);
}
.main-nav a:hover::after,
.main-nav a.active::after,
.main-nav a:focus-visible::after { width: 100%; transform: scaleX(1); }
.main-nav a:hover, .main-nav a.active { color: #fff; }

.header-cta { gap: 18px; }
.header-dashboard {
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #d7d7d4;
  font-size: var(--fs-small);
  font-weight: 400;
}
.header-dashboard:hover,
.header-dashboard.active { color: #fff; border: 0; background: none; }
.header-cta .btn.header-start {
  min-height: 54px;
  padding: 13px 22px;
  border: 1px solid #aaa;
  background: rgba(8,8,8,.25);
  color: #fff;
  font-weight: 400;
}
.header-start::after { content: "→"; margin-left: 8px; font-size: var(--fs-h4); }

.burger { border: 1px solid var(--line); border-radius: 2px; }
.burger span { background: #fff; }
.mobile-menu { background: rgba(0,0,0,.76); }
.menu-karte {
  background: #0a0a0a;
  border: 1px solid #454545;
  border-radius: 3px;
  box-shadow: 0 30px 90px rgba(0,0,0,.65);
}
.mobile-menu a { color: #f1f1ef; border-radius: 2px; }
.mobile-menu a:active { background: #171717; }
.mobile-menu a.konto-link { border-top-color: #333; color: #aaa; }
.mobile-menu a.btn-primary { color: #080808; background: #f1f1ef; }
.menu-karte::after { color: var(--ink-faint); }

/* ---------- Buttons und wiederkehrende Flächen ---------- */

.btn,
.pl-anfragen,
.chip {
  border-radius: 2px;
  box-shadow: none;
  font-weight: 400;
}
.btn {
  min-height: 54px;
  padding: 14px 26px;
  border-width: 1px;
  transition: transform 150ms var(--ease-out), background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.btn-primary { background: #f1f1ef; color: #090909; border-color: #f1f1ef; }
.btn-primary:hover { background: #fff; color: #000; transform: none; box-shadow: none; }
.btn-ghost { border-color: #666; color: #ededeb; background: rgba(255,255,255,.01); }
.btn-ghost:hover { border-color: #fff; color: #fff; transform: none; }
.btn-light { background: #f2f2ef; color: #080808; }
.btn:active,
.pl-anfragen:active,
.burger:active,
.work-card:active,
.offer-row:active { transform: scale(.97); }

.big-cta,
.proof-panel,
.form-card,
.auth-card,
.contact-promise,
.pl-stufe,
.pl-vergleich,
.pl-ki-karte,
.price-rationale,
.dash-card,
.team-card,
.work-card,
.preview-frame {
  background: #0a0a0a;
  border-color: var(--line);
  border-radius: 3px;
  box-shadow: none;
}

/* ---------- Startseite: Hero ---------- */

.page-home .site-header { background: linear-gradient(180deg, rgba(5,5,5,.94), rgba(5,5,5,.58) 72%, transparent); }
.page-home .site-header.scrolled { background: rgba(7,7,7,.96); }
.hero-start {
  min-height: 100svh;
  align-items: center;
  padding: calc(var(--header-h) + 76px) 0 72px;
  background: #050505;
}
.hero-start .hero-bg { mask-image: none; -webkit-mask-image: none; background: #050505; }
.hero-foto {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 50%;
  opacity: 1;
  filter: grayscale(1) contrast(1.15) brightness(.92);
  mask-image: none;
  -webkit-mask-image: none;
}
.hero-start .hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.64) 32%, rgba(0,0,0,.12) 72%, rgba(0,0,0,.16) 100%),
    linear-gradient(180deg, rgba(0,0,0,.18) 0%, transparent 43%, rgba(0,0,0,.56) 100%);
}
.hero-aurora,
.hero-strahl,
.hero-gitter,
.hero-halo,
.hero-deko { display: none !important; }
.hero-mitte {
  max-width: none;
  margin: 0;
  text-align: left;
}
.hero-mitte h1 {
  max-width: 1080px;
  margin: 0 0 22px;
  color: #f4f4f2;
  /* EINE Kurve ueber den ganzen Bereich statt vier Regeln an vier
     Breakpoints. Vorher war die Ueberschrift bei 768px (77px) groesser
     als bei 1440px (68px) und sprang beim Aufziehen des Fensters bei
     821px von 77 auf 57px - die Groesse lief nicht monoton mit der
     Breite. Ursache: die Mobilregel nutzte 10vw, die Desktopregel ein
     Minimum von 3.55rem, das unterhalb ~1100px immer griff.
     Jetzt: 26px Sockel + 3.05vw. Ergibt 38px bei 390, 50px bei 768,
     57px bei 1024, 70px bei 1440 - durchgehend steigend. */
  /* Der Container ist 1800px breit - 70px Schrift darin war zurueckhaltend
     bis zaghaft. Jetzt 100px bei 1440. Weiterhin eine durchgehende Kurve:
     40px bei 390, 62px bei 768, 76px bei 1024, 100px bei 1440. */
  /* 88px bei 1440 statt vorher 70. Bei 100px brach "Websites. WebApps. KI."
     zwischen 850 und 1400px um und liess "KI." als Waise auf einer eigenen
     Zeile stehen - die Zeile passt erst ab rund 1024px wieder ganz. */
  font-size: clamp(2.3rem, 1.39rem + 4.57vw, 6rem);
  line-height: .98;
  text-wrap: balance;
}
.hero-outcome { color: inherit; border: 0; padding: 0; }
.hero-promise {
  margin: 0 0 18px;
  color: #efefec;
  font-size: clamp(1.03rem, 1.5vw, 1.28rem);
  font-weight: 400;
}
.hero-mitte .lead.hero-explain {
  max-width: 590px;
  margin: 0 0 30px;
  color: #c4c4c0;
  font-size: var(--fs-base);
}
.hero-mitte .hero-ctas { justify-content: flex-start; margin-bottom: 72px; }
.hero-mitte .hero-ctas .btn { min-width: 220px; justify-content: space-between; }
.hero-start .trust-zeile {
  justify-content: flex-start;
  gap: 0;
  color: #d5d5d2;
  font-size: var(--fs-small);
  font-weight: 400;
  text-shadow: none;
}
.hero-start .trust-zeile .punkt { width: 1px; height: 44px; margin: 0 30px; border-radius: 0; background: #6a6a68; }
html.intro-zoom { overflow: auto; }
html.intro-zoom .hero-start,
html.intro-zoom.intro-fahrt .hero-start { transform: none; border-radius: 0; box-shadow: none; transition: none; }
html.intro-zoom .site-header,
html.intro-zoom .widget-launcher { opacity: 1; pointer-events: auto; }

/* ---------- Startseite: Lösungs-, Demo- und Angebotskarten ---------- */

.page-home .outcome-section { background: #080808; }
.page-home .outcome-layout { display: block; }
.page-home .outcome-intro { position: static; margin-bottom: 48px; }
.page-home .outcome-intro h2 { max-width: none; margin-bottom: 16px; }
/* Vorher vier gleich grosse Kacheln nebeneinander - die Form, die jede
   Leistungsuebersicht hat, und bei 1800px Containerbreite mit je 430px so
   eng, dass "Automatisierungssysteme" eine eigene kleinere Schriftgroesse
   brauchte, um zu passen.
   Jetzt zwei Reihen mit versetzten Breiten (7/12 + 5/12, dann 5/12 + 7/12).
   Das erzeugt Rhythmus, ohne eine der vier Leistungen zur wichtigsten zu
   erklaeren - jede Reihe hat eine breite und eine schmale Karte, nur in
   getauschter Reihenfolge. Die Bilder werden dadurch zu echten Bildern
   statt Briefmarken. */
.page-home .outcome-list {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: clamp(340px, 25vw, 460px);
  gap: 16px;
  border: 0;
}
.page-home .outcome-card:nth-child(1) { grid-column: span 7; }
.page-home .outcome-card:nth-child(2) { grid-column: span 5; }
.page-home .outcome-card:nth-child(3) { grid-column: span 5; }
.page-home .outcome-card:nth-child(4) { grid-column: span 7; }
.page-home .outcome-card {
  position: relative;
  min-height: 0;
  /* aspect-ratio ist raus: bei unterschiedlich breiten Karten ergaebe es
     unterschiedliche Hoehen und die Reihe wuerde auseinanderlaufen.
     Die Hoehe kommt aus grid-auto-rows. */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding: 34px;
  border: 1px solid #4a4a4a;
  background: #090909;
  color: #fff;
}
.page-home .outcome-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5,5,5,.94) 0%, rgba(5,5,5,.84) 35%, rgba(5,5,5,.38) 51%, rgba(5,5,5,.04) 72%, rgba(5,5,5,.12) 100%);
  z-index: 1;
  pointer-events: none;
}
.page-home .outcome-card > * { position: relative; z-index: 2; }
/* Die Nummer wandert nach oben: die Karte bekommt zwei Pole - Massangabe
   oben, Aussage unten - statt eines Stapels in der Mitte. */
.page-home .outcome-card > span:first-child { position: absolute; top: 34px; left: 34px; color: #c9c9c6; font-size: var(--fs-small); font-weight: 400; }
.page-home .outcome-card > div { margin-top: 14px; }
.page-home .outcome-card h3 { margin-bottom: 10px; font: 400 clamp(2.1rem, 1.5rem + 1.9vw, 3.6rem)/1.02 var(--font-serif); }
/* Der Sonderfall entfaellt: in der breiten Karte passt das lange Wort
   jetzt in dieselbe Groesse wie die anderen drei. */
.page-home .outcome-automation h3 { hyphens: auto; }
/* Der Pfeil sitzt unten rechts in der Karte. Ohne die zweite Grenze lief
   der Beschreibungstext in schmalen Karten darunter durch. */
.page-home .outcome-card p { max-width: min(46ch, calc(100% - 76px)); color: #d0d0cc; font-size: var(--fs-base); }
.page-home .outcome-card-media {
  position: absolute;
  inset: auto 0 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}
.page-home .outcome-card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: none;
}
.page-home .outcome-ai .outcome-card-media img { object-position: 58% center; }
.page-home .outcome-automation .outcome-card-media img { object-position: 52% center; }
.page-home .outcome-card-arrow {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 1px solid #666;
  background: #080808;
  font-size: var(--fs-h4);
}

.showcase { background: #080808; padding-block: clamp(92px, 9.5vw, 176px); }
.showcase .section-head { max-width: 1420px; margin-bottom: 44px; }
.showcase .section-head h2 { font-size: clamp(2.7rem, 3.2vw, 3.8rem); }
.showcase .section-head .lead { max-width: 900px; }
.page-home .demo-fenster:not([hidden]) {
  display: block;
  max-width: none;
  overflow: hidden;
  border: 1px solid #363636;
  border-radius: 4px;
  background: #101010;
  box-shadow: 0 24px 80px rgba(0,0,0,.38);
}
.page-home .demo-fenster .frame-bar,
.page-home .demo-fenster .demo-taskbar,
.page-home .demo-fenster .demo-mehr { background: #101010; color: #e8e8e8; border-color: #333; }
.page-home .demo-fenster .frame-url { color: #bbb; background: #191919; }
.page-home .demo-fenster .frame-url::before { background: #aaa; animation: none; }
.page-home .demo-fenster .frame-bar .dot { background: #555; }
.page-home .demo-fenster .frame-schloss { color: #999; }
.page-home .demo-fenster .demo-taskbar button { color: #bbb; border-color: #363636; background: #171717; }
.page-home .demo-fenster .demo-taskbar button.active { color: #111; border-color: #e8e8e8; background: #e8e8e8; }
.page-home .demo-fenster .demo-taskbar .taskbar-link { color: #bbb; }
.page-home .demo-fenster .demo-taskbar .taskbar-link:hover { color: #fff; }

.offer-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  border: 0;
}
.offer-row {
  min-height: 126px;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 34px;
  grid-template-rows: auto auto;
  gap: 4px 18px;
  align-items: start;
  padding: 22px;
  border: 1px solid #3d3d3d;
  background: linear-gradient(135deg, #0b0b0b, #101010);
}
.offer-row + .offer-row { border-top: 1px solid #3d3d3d; }
.offer-nr {
  grid-row: 1 / 3;
  color: #eee;
  font: 400 2.15rem/1 var(--font-serif);
}
.offer-row h3 { margin: 0; color: #f3f3f1; font: 400 1.23rem/1.15 var(--font-serif); }
.offer-row p { max-width: none; color: #aaa; font-size: var(--fs-meta); }
.offer-pfeil { grid-column: 3; grid-row: 1 / 3; align-self: center; color: #eee; font-size: var(--fs-h4); }

/* ---------- Startseite: Nutzen, Orte, Team und Abschluss ---------- */

.bot-section {
  padding: clamp(30px, 4.2vw, 64px);
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #090909;
}
.bot-grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(380px, .82fr);
  gap: clamp(42px, 6vw, 96px);
  align-items: stretch;
}
.bot-grid > div:first-child { display: flex; flex-direction: column; align-items: flex-start; }
.bot-grid h2 {
  max-width: 16ch;
  margin: 14px 0 28px;
  font-size: var(--d-3);
  line-height: .98;
}
.bot-benefits { width: 100%; margin: 0 0 28px; gap: 0; }
.bot-benefits li {
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  color: #b7b7b3;
  font-size: var(--fs-base);
  line-height: 1.55;
}
.bot-benefits li:last-child { border-bottom: 1px solid var(--line); }
.bot-benefits svg { width: 19px; height: 19px; color: #efefec; margin-top: 3px; }
.bot-grid > div:last-child { min-width: 0; }
.bot-grid .chat-demo {
  max-width: none;
  height: 100%;
  min-height: 570px;
  margin: 0;
  border: 1px solid #3a3a3a;
  border-radius: 3px;
  background: #090909;
  color: var(--ink);
  box-shadow: none;
}
.bot-grid .chat-head {
  min-height: 74px;
  padding: 15px 20px;
  border-bottom: 1px solid #343434;
  background: #0c0c0c;
  color: #f2f2ef;
}
.bot-grid .chat-head .name { color: #f2f2ef; }
.bot-grid .chat-head .status { color: #92928e; }
.bot-grid .chat-head .ki-badge { color: #d0d0cc; border-color: #555; }
.bot-grid .chat-body {
  flex: 1;
  height: auto;
  min-height: 310px;
  padding: 24px;
  background: #080808;
  color: #f2f2ef;
}
.bot-grid .msg.bot,
.bot-grid .msg.typing {
  border: 1px solid #363636;
  background: #101010;
  color: #efefec;
}
.bot-grid .msg.user { background: #efefec; color: #080808; }

/* ---------- Chatblasen global ----------
   style.css setzt .msg.user auf background:var(--ink) mit color:#fff. Im
   dunklen Redesign ist --ink fast weiss - die eigene Nachricht war also
   weiss auf Weiss. Bisher war das nur fuer .bot-grid geflickt, nicht fuer
   das schwebende Fenster. Darum hier ohne Einschraenkung. */
.msg.user {
  background: #efefec;
  border-color: #efefec;
  color: #080808;
}
.msg.user a { color: #080808; text-decoration-color: #6a6a6a; }
.msg.bot {
  background: #0f0f0f;
  border-color: #343434;
  color: var(--ink);
}
.msg.typing { background: #0f0f0f; border-color: #343434; }
.msg.typing i { background: var(--ink-soft); }
.bot-grid .chat-chips {
  padding: 12px 20px 18px;
  background: #080808;
}
.bot-grid .chat-chips button {
  padding: 8px 13px;
  border: 1px solid #444;
  background: #111;
  color: #dededb;
  font-weight: 500;
}
.bot-grid .chat-input {
  padding: 14px 16px;
  border-top: 1px solid #343434;
  background: #0c0c0c;
}
.bot-grid .chat-input input {
  min-width: 0;
  border: 1px solid #3c3c3c;
  background: #080808;
  color: #f2f2ef;
}
.bot-grid .chat-input input::placeholder { color: var(--ink-faint); opacity: 1; }
.bot-grid .chat-input button { background: #f1f1ef; color: #080808; }
.bot-grid .chat-note { padding: 0 18px 15px; background: #0c0c0c; color: var(--ink-faint); }

.proof-panel {
  display: grid;
  width: min(calc(100% - 48px), var(--wrap));
  max-width: var(--wrap);
  grid-template-columns: minmax(390px, .85fr) minmax(0, 1fr);
  gap: clamp(30px, 3vw, 54px);
  margin-inline: auto;
  padding: clamp(34px, 3.7vw, 58px);
  border: 1px solid var(--line);
  background: #090909;
}
.proof-heading { min-width: 0; padding-right: 0; }
.proof-heading h2 { max-width: 16ch; margin: 12px 0 16px; font-size: var(--d-3); line-height: 1; }
.proof-heading p { color: #9b9b97; line-height: 1.6; }
.proof-points { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.proof-points > div,
.proof-points > div:nth-last-child(-n+2) {
  min-width: 0;
  min-height: 178px;
  padding: 20px clamp(18px, 2vw, 28px);
  border: 0;
  border-left: 1px solid var(--line);
}
.proof-points b { margin-bottom: 13px; font-size: var(--fs-base); line-height: 1.45; }
.proof-points span { color: #8e8e8b; line-height: 1.6; }

.orts-panel {
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
}
.orts-panel h2 { color: var(--ink); }
.orts-panel .lead { color: var(--ink-soft); }
.orts-kopf { margin-bottom: 38px; }
.orts-bilder { gap: 18px; }
.orts-bild { border: 1px solid #333; border-radius: 3px; background: #0a0a0a; }
.orts-bild img { filter: grayscale(1) contrast(1.1) brightness(.72); }
.orts-bild figcaption { padding: 42px 18px 16px; }
.orts-fakten { border-color: var(--line); }
.orts-fakten > div { border-color: var(--line); }
.orts-fakten b { color: var(--ink); }
.orts-fakten span { color: var(--ink-soft); }

.about-teaser {
  gap: clamp(38px, 6vw, 88px);
  align-items: center;
}
.gruender-foto { border: 1px solid #333; border-radius: 3px; background: #0c0c0c; }
.gruender-foto img { filter: none; }

.big-cta {
  padding: clamp(42px, 5vw, 72px);
  border: 1px solid var(--line);
  border-radius: 3px;
  background:
    linear-gradient(90deg, rgba(8,8,8,.98) 0%, rgba(8,8,8,.82) 58%, rgba(8,8,8,.4) 100%),
    image-set(url("../img/schweiz/alpen-footer-2000.webp") type("image/webp"), url("../img/schweiz/alpen-footer-2000.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: center;
  text-align: left;
}
.big-cta h2 { max-width: 720px; margin-inline: 0; color: #f3f3f1; }
.big-cta p { max-width: 620px; margin-inline: 0; color: #aaa; }
.big-cta .hero-ctas { justify-content: flex-start; }
.big-cta .btn-primary { background: #f3f3f1; color: #090909; border-color: #f3f3f1; }
.big-cta .btn-primary:hover { background: #fff; color: #000; }
.big-cta .btn-ghost { color: #eee; border-color: #666; }

/* ---------- Footer ---------- */

.site-footer {
  margin-top: 0;
  padding: 62px 0 28px;
  background: #070707;
  border-top: 1px solid var(--line);
}
.site-footer::before {
  height: 100%;
  opacity: .1;
  filter: grayscale(1) contrast(1.2);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 58%, #000 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 58%, #000 100%);
  background-position: 90% 70%;
}
.site-footer::after { background: linear-gradient(90deg, #070707 0%, rgba(7,7,7,.95) 58%, rgba(7,7,7,.65)); }
.footer-grid { grid-template-columns: 1.45fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 42px; }
.footer-brand p,
/* Tippziele: die Fusslinks waren 19 px hoch. Das Polster macht sie auf
   rund 31 px, ohne den Abstand im Bild zu veraendern - der Zeilenabstand
   wandert nur vom gap ins padding. */
.footer-col ul { gap: 0; }
.footer-col a {
  display: inline-block;
  padding: 6px 0;
  color: #8e8e8b;
}
.footer-brand .mail { display: inline-block; padding: 5px 0; }
.footer-bottom .legal a { display: inline-block; padding: 6px 0; }
/* Die Wortmarke ist der wichtigste Link im Kopf - sie darf nicht 23 px hoch sein. */
.logo { min-height: 34px; align-items: center; }
/* Auf hellen Flaechen (Admin, Mitarbeiterportal) die dunkle Fassung. */
.app.hell .logo::before { background-image: url("../img/logo-mase-dunkel.png?v=2"); }
.footer-brand .mail { color: #cfcfcb; }
.footer-col h4,
.footer-col h2 { color: #c9c9c5; font-size: var(--fs-xs); font-weight: 500; text-transform: none; letter-spacing: 0; }
.footer-bottom { color: var(--ink-faint); border-color: var(--line); }
.footer-bottom .legal a { color: #9c9c98; }
/* Das Wappen bleibt farbig - der einzige Farbfleck auf der ganzen
   monochromen Seite und damit genau das, was er sein soll: die Herkunfts-
   marke. Vorher lag hier grayscale(1) und machte ihn grau wie alles andere.
   Geometrie naeher an der Bundesfahne: die Kreuzarme sind dort 1/6 laenger
   als breit, Armbreite 3/15, Armlaenge 9/15. Ganzzahlige Werte, damit die
   Balken bei 15px nicht verwaschen. */
.swiss .cross {
  width: 15px;
  height: 15px;
  border-radius: 2px;
  background: #D52B1E;
}
.swiss .cross::before { left: 6px; top: 3px; width: 3px; height: 9px; }
.swiss .cross::after { left: 3px; top: 6px; width: 9px; height: 3px; }

/* ---------- Zurückhaltende Interaktionen ---------- */

@media (hover: hover) and (pointer: fine) {
  .home-demo-card:hover img { transform: scale(1.025); filter: none; }
  .outcome-card:hover,
  .offer-row:hover,
  .work-card:hover { border-color: #8a8a87; }
  .orts-bild:hover img { transform: scale(1.025); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ============================================================
   Innenseiten
   ============================================================ */

.page-hero {
  padding: calc(var(--header-h) + 86px) 0 clamp(66px, 7vw, 104px);
  text-align: left;
  background:
    radial-gradient(700px 420px at 82% 20%, rgba(255,255,255,.035), transparent 72%),
    #070707;
  border-bottom: 1px solid var(--line);
}
.page-hero .wrap { text-align: left; }
.page-hero h1 {
  max-width: 1120px;
  margin: 0 0 20px;
  /* Durchgehende Kurve statt Basisregel + Mobil-Ueberschreibung. Vorher
     sprang die Ueberschrift bei 721px von 73.6 auf 55.2px, weil unterhalb
     720px 14vw galt und darueber das Minimum von 3.45rem immer griff.
     Jetzt 26px Sockel + 3.62vw: 40px bei 390, 52px bei 720, 63px bei
     1024, 78px bei 1440. */
  font-size: clamp(2.2rem, 1.62rem + 3.62vw, 5.6rem);
  line-height: .96;
}
.page-hero .lead { max-width: 760px; margin-inline: 0; }
.page-hero .kicker { margin-bottom: 20px; }

.hidden { display: none !important; }
.detail-meta,
.form-privacy,
.opt { color: var(--ink-faint); }
.zurueck,
.card-link,
.konto-abmelden {
  color: var(--ink-soft);
  background: transparent;
  border-color: var(--line-strong);
}

/* ---------- Leistungen ---------- */

.lw,
.lw[data-welt="webapp"],
.lw[data-welt="ki"] {
  --lw-bg: #070707;
  --lw-bg-tief: #0b0b0b;
  --lw-ink: #f3f3f1;
  --lw-ink-soft: #a5a5a2;
  --lw-linie: #303030;
  --lw-karte: #0b0b0b;
  --lw-punkt: #d9d9d5;
  padding-top: calc(var(--header-h) + 42px);
  background: #070707;
  color: var(--lw-ink);
}
.lw-kopf { max-width: 1180px; margin-inline: auto; padding: 66px 0 42px; text-align: left; }
.lw-kopf .wrap { text-align: left; }
.lw-kopf h1 { max-width: 1020px; margin-bottom: 18px; font-size: var(--d-1); }
.lw-untertitel { max-width: 720px; color: var(--lw-ink-soft); }
.lw-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  width: min(880px, 100%);
  gap: 0;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: #080808;
}
.lw-tab {
  justify-content: center;
  min-height: 50px;
  border-right: 1px solid var(--line-strong);
  border-radius: 0;
  color: #aaa;
  font-weight: 400;
}
.lw-tab:last-child { border-right: 0; }
.lw-tab.active { background: #f1f1ef; color: #080808; }
.lw-welt { padding: 72px 0 112px; border-top: 1px solid var(--line); }
.lw-buehne { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: clamp(42px, 6vw, 92px); }
.lw-text h2 { font-size: var(--d-2); margin-bottom: 22px; }
.lw-text > p { color: var(--lw-ink-soft); }
.lw-abgrenzung,
.lw-vergleich,
.lw-merkmale li,
.lw-details,
.lw-preise li,
.lw-ablauf li { border-color: var(--line) !important; }
.lw-merkmale li {
  border-width: 1px;
  border-radius: 2px;
  background: #0a0a0a;
  padding: 17px 19px;
}
.lw-merkmale span,
.lw-preise em,
.lw-ablauf li,
.lw-abgrenzung { color: var(--lw-ink-soft); }
.lw-welt .btn-primary { background: #f3f3f1; color: #080808; border-color: #f3f3f1; }
.lw-schau { align-self: center; }
.lw-naturbild {
  overflow: hidden;
  border: 1px solid #3b3b3b;
  border-radius: 3px;
  box-shadow: none;
}
.lw-naturbild img { filter: grayscale(1) contrast(1.12) brightness(.72); }
.dio-ki,
.ki-fenster,
.ki-protokoll { border-color: #343434; box-shadow: none; }

/* ---------- Welt Automatisierung: durchgelaufener Ablauf ---------- */

.dio-auto { display: grid; gap: 14px; }
.auto-fenster,
.auto-verbindungen { border: 1px solid #343434; border-radius: 3px; background: #0a0a0a; }
.af-kopf {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid #262626;
}
.af-marke {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 1px solid #3d3d3d; border-radius: 3px;
  color: #d9d9d5;
}
.af-marke svg { width: 18px; height: 18px; }
.af-name { min-width: 0; color: #efefec; font-size: var(--fs-small); }
.af-name em { display: block; color: var(--ink-faint); font-size: var(--fs-xs); font-style: normal; }
.af-zahl { color: var(--ink-soft); font-size: var(--fs-xs); letter-spacing: .06em; white-space: nowrap; }
.af-kette { margin: 0; padding: 6px 18px 16px; list-style: none; counter-reset: none; }
.af-kette li {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0 12px;
  padding: 14px 0 14px 0;
}
/* Die Linie verbindet die Punkte und endet beim letzten Schritt. */
.af-kette li::before {
  content: "";
  position: absolute; left: 5px; top: 22px; bottom: -6px;
  width: 1px; background: #303030;
}
.af-kette li:last-child::before { display: none; }
.af-punkt {
  grid-row: span 2;
  width: 11px; height: 11px; margin-top: 5px;
  border: 1px solid #5a5a5a; border-radius: 50%;
  background: #0a0a0a;
}
.af-fertig .af-punkt { border-color: #efefec; background: #efefec; }
.af-kette b { grid-column: 2; color: #efefec; font-weight: 500; font-size: var(--fs-small); }
.af-kette i {
  grid-column: 3; grid-row: 1;
  color: var(--ink-faint); font-size: var(--fs-xs); font-style: normal;
  font-variant-numeric: tabular-nums;
}
.af-kette em {
  grid-column: 2 / -1;
  margin-top: 3px;
  color: var(--ink-soft); font-size: var(--fs-meta); font-style: normal; line-height: 1.5;
}
.auto-verbindungen { padding: 16px 18px 18px; }
.av-titel { display: block; margin-bottom: 11px; color: var(--ink-faint); font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; }
.av-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.av-liste span { padding: 8px 11px; border: 1px solid #3d3d3d; color: #d2d2ce; font-size: var(--fs-xs); }
.lw-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 84px;
  padding-top: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.lw-spalte { padding: 34px; }
.lw-spalte + .lw-spalte { border-left: 1px solid var(--line); }
.lw-preislink { color: var(--ink-soft); }
.ki-glow { background: none; color: inherit; animation: none; }
.ki-netz { opacity: .28; filter: grayscale(1); }

/* ---------- Live-Demos und Projekte ---------- */

.work-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.work-card {
  overflow: hidden;
  border: 1px solid #373737;
  background: #0a0a0a;
  color: var(--ink);
  transition: transform 160ms var(--ease-out), border-color 180ms ease;
}
.work-card img,
.work-img,
.work-card picture {
  filter: none;
}
.work-info,
.work-card > div:last-child { border-color: #373737; }
.work-card p { color: var(--ink-soft); }
.work-badge,
.work-badge.demo { border-radius: 2px; background: #f0f0ed; color: #080808; }

.demo-vollbild { background: rgba(0,0,0,.82); }
.demo-vollbild-rahmen { border-radius: 3px; border-color: #545454; background: #080808; }
.demo-vollbild-kopf { background: #0a0a0a; border-color: #333; }
.demo-vollbild-kopf .schliessen { border-radius: 2px; background: #111; color: #fff; border-color: #555; }
.dv-buehne { background: #0a0a0a; }
.dv-laptop .dv-schirm,
.dv-handy .dv-schirm { border-color: #141414; box-shadow: 0 32px 90px rgba(0,0,0,.7); }
.dv-laptop-fuss { background: linear-gradient(#303030, #111); }
.dv-kerbe { background: #141414; }
.preview-frame { overflow: hidden; border: 1px solid #3a3a3a; }
.frame-bar { background: #101010; border-color: #333; }
.pd-medien { background: #090909; }

/* ---------- Preise ---------- */

.pl-hero { padding-top: calc(var(--header-h) + 76px); padding-bottom: 52px; }
.pl-hero h1 { max-width: 1020px; }
.pl-anker { max-width: none; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pl-anker a {
  min-height: 110px;
  justify-content: center;
  padding: 18px 20px;
  border: 1px solid #373737;
  border-radius: 2px;
  background: #0a0a0a;
  box-shadow: none;
}
.pl-anker a:hover { border-color: #777; transform: none; box-shadow: none; }
.pl-anker b { color: #f1f1ef; font-size: var(--fs-h4); }
.pl-anker-was,
.pl-anker-dazu { color: #8e8e8b; }
.pl-block-kopf { border-color: #e0e0dd; }
.pl-block-kopf p,
.pl-fuer-wen,
.pl-notiz,
.pl-tarif span { color: var(--ink-soft); }
.pl-stufen { gap: 16px; }
.pl-stufe {
  padding: 28px 24px 24px;
  border: 1px solid #343434;
  background: #0a0a0a;
}
.pl-stufe.hervor { border-color: #898986; }
.pl-stufe .pl-marke { border-radius: 2px; background: #f1f1ef; color: #080808; }
.pl-tarif { border-color: #303030; }
.pl-check li::before { border-color: #f1f1ef; }
.pl-anfragen { border: 1px solid #70706d; color: #eee; }
.pl-anfragen:hover,
.pl-anfragen.gewaehlt { background: #f1f1ef; color: #080808; border-color: #f1f1ef; }
.pl-vergleich { border: 1px solid #343434; }
.pl-vergleich-kopf,
.pl-vergleich th,
.pl-vergleich td { border-color: #303030; }
.pl-vergleich thead th { background: #101010; }
.pl-vergleich thead .pl-v-pro,
.pl-vergleich tbody td:nth-child(3) { background: #111; }
.pl-ja { background: #f1f1ef; color: #080808; }
.pl-ki-ablauf li::before { border-radius: 2px; color: #eee; }
.pl-ki-ablauf span,
.pl-ki-fakten span { color: var(--ink-soft); }
.pl-ki-fair { background: #101010; border-color: #303030; border-radius: 2px; }
.price-rationale {
  background: #0a0a0a;
  color: var(--ink);
  border: 1px solid #363636;
}
.price-rationale h2,
.price-rationale-points b { color: var(--ink); }
.price-rationale-intro p,
.price-rationale-points span { color: var(--ink-soft); }
.price-rationale-points > div { border-color: #303030; }
.price-clarity { border-color: #444; }
.pl-faq-item {
  border-color: #353535;
  background: #090909;
  border-radius: 2px;
}
.pl-faq-item summary { color: var(--ink); }
.pl-faq-a { color: var(--ink-soft); border-color: #303030; }
.pl-leiste { border-radius: 2px; background: #101010; border-color: #666; }

/* ---------- Über uns und lokale Seite ---------- */

.uu-hero { background: #070707; }
.uu-hero::before,
.uu-hero::after { filter: none; opacity: .25; }
.buero-galerie { max-width: none; gap: 18px; }
.buero-bild { border: 1px solid #343434; border-radius: 3px; box-shadow: none; background: #0a0a0a; }
.buero-bild img { filter: none; }
.buero-unterzeile { color: var(--ink-faint); }
.team-grid { max-width: none; gap: 18px; }
.team-card { border: 1px solid #343434; border-radius: 3px; background: #0a0a0a; }
.team-card p { color: var(--ink-soft); }
.team-avatar { border-radius: 2px; background: #f1f1ef; color: #080808; }
.uu-person,
.uu-portrait,
.zert { border-color: #333 !important; background: #0a0a0a !important; }
.uu-person img,
.uu-portrait img,
.page-about .person-bild img,
.page-about .uu-person img,
.page-about .uu-portrait img { filter: none; }
.page-about img { filter: none !important; }
.page-about .orts-einzelbild img { filter: none; }
.zert p,
.zert-meta,
.zert-was { color: var(--ink-soft) !important; }

.local-hero { background: #070707; }
.local-hero h1 { margin-inline: 0; max-width: 1080px; }
.local-hero .lead { margin-inline: 0; }
.local-hero-actions { justify-content: flex-start; }
.local-hero .trust-zeile { justify-content: flex-start; color: var(--ink-soft); }
.orts-einzelbild img,
.kontakt-bild img {
  border: 1px solid #343434;
  border-radius: 3px;
  filter: grayscale(1) contrast(1.1) brightness(.72);
}
.local-industries { background: #090909; }
.local-usecases { border-color: #3b3b3b; }
.local-usecases > div { border-color: #333 !important; }
.local-usecases span { color: var(--ink-soft); }

/* ---------- Automatisierungssysteme ---------- */

.page-automation,
.page-service { background: #070707; }
.service-hero {
  min-height: min(820px, 90svh);
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + clamp(38px, 4.5vw, 72px)) 0 clamp(58px, 5vw, 82px);
  background: #070707;
}
.service-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(520px, 1.08fr);
  gap: clamp(48px, 6vw, 104px);
  align-items: center;
}
.service-hero-copy { min-width: 0; }
.service-hero .no-break { white-space: nowrap; }
.service-hero h1 {
  max-width: 15ch;
  margin: 18px 0 24px;
  font-size: var(--d-1);
  line-height: .93;
}
.service-hero .lead { max-width: 670px; margin: 0; color: var(--ink-soft); }
.service-hero-actions { justify-content: flex-start; margin-top: 34px; }
.service-hero .trust-zeile { justify-content: flex-start; margin-top: 38px; color: var(--ink-soft); }
.service-hero-visual {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 1.08 / 1;
  border: 1px solid #3c3c3c;
  background: #090909;
}
.service-hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5,5,5,.24), transparent 48%, rgba(5,5,5,.16));
  pointer-events: none;
}
.service-hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 52% center; filter: none; }
.service-hero-visual figcaption {
  position: absolute;
  z-index: 2;
  left: 22px;
  right: 22px;
  bottom: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.26);
  color: #d4d4d0;
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.service-usecases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.service-usecase {
  min-height: 270px;
  padding: clamp(24px, 2.3vw, 38px);
  border: 1px solid #393939;
  background: linear-gradient(145deg, #0a0a0a, #101010);
}
.service-usecase > span,
.service-flow article > span { display: block; margin-bottom: 54px; color: #aaa; font-size: var(--fs-meta); letter-spacing: .08em; }
.service-usecase h3 { margin-bottom: 14px; font: 400 clamp(1.55rem, 2vw, 2.15rem)/1.05 var(--font-serif); }
.service-usecase p { color: var(--ink-soft); line-height: 1.65; }
.service-process-section,
.service-compare-section { background: #090909; }
.service-process-section .section-head { max-width: 920px; margin-inline: 0; text-align: left; }
.service-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid #3a3a3a; }
.service-flow article { min-width: 0; min-height: 280px; padding: clamp(24px, 2.4vw, 40px); }
.service-flow article + article { border-left: 1px solid #353535; }
.service-flow article > span { margin-bottom: 48px; }
.service-flow h3 { margin-bottom: 12px; font: 400 clamp(1.55rem, 2vw, 2.15rem)/1 var(--font-serif); }
.service-flow p { color: var(--ink-soft); line-height: 1.65; }
.service-stack { display: grid; grid-template-columns: minmax(0, 1fr) minmax(440px, .88fr); gap: clamp(52px, 7vw, 118px); align-items: center; }
.service-stack-copy h2 { max-width: 12ch; margin: 16px 0 22px; }
.service-stack-copy .lead { max-width: 650px; }
.service-checks { margin-top: 34px; border-top: 1px solid #333; }
.service-checks li { display: grid; grid-template-columns: minmax(150px, .7fr) minmax(0, 1.3fr); gap: 22px; padding: 20px 0; border-bottom: 1px solid #2d2d2d; }
.service-checks b { color: #efefec; }
.service-checks span { color: var(--ink-soft); line-height: 1.55; }
.service-system-panel { padding: clamp(32px, 4vw, 58px); border: 1px solid #3b3b3b; background: linear-gradient(145deg, #0b0b0b, #111); }
.service-system-panel h3 { max-width: 12ch; margin: 16px 0 28px; font: 400 clamp(2.2rem, 3.3vw, 3.8rem)/1 var(--font-serif); }
.service-integrations { display: flex; flex-wrap: wrap; gap: 10px; }
.service-integrations span { padding: 10px 13px; border: 1px solid #444; color: #d2d2ce; font-size: var(--fs-micro); }
.service-system-panel > p { margin-top: 28px; color: var(--ink-soft); line-height: 1.65; }
.service-compare { display: grid; grid-template-columns: minmax(340px, .72fr) minmax(0, 1.28fr); gap: clamp(48px, 6vw, 96px); align-items: start; }
.service-compare-intro h2 { max-width: 12ch; margin: 16px 0 20px; }
.service-compare-intro p { color: var(--ink-soft); line-height: 1.65; }
.service-compare-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #3b3b3b; }
.service-compare-grid article { min-height: 360px; padding: clamp(28px, 3vw, 48px); }
.service-compare-grid article + article { border-left: 1px solid #343434; }
.service-compare-grid article > span { color: #aaa; font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; }
.service-compare-grid h3 { max-width: 12ch; margin: 72px 0 16px; font: 400 clamp(1.9rem, 2.7vw, 3rem)/1 var(--font-serif); }
.service-compare-grid p { color: var(--ink-soft); line-height: 1.65; }

/* ---------- Kontakt, Login und Formulare ---------- */

.contact-grid { align-items: start; }
.form-card,
.auth-card {
  border: 1px solid #383838;
  border-radius: 3px;
  background: #0a0a0a;
}
.form-intro { border-color: #333; }
.form-intro span { color: var(--ink-soft); }
.form-field label { color: #d8d8d5; }
.form-field input,
.form-field textarea,
.form-field select,
.auth-form input,
.auth-form textarea,
.auth-form select,
.chat-eingabe input {
  color: #f1f1ef;
  background: #0d0d0d;
  border: 1px solid #4a4a4a;
  border-radius: 2px;
  box-shadow: none;
}
.form-field input::placeholder,
.form-field textarea::placeholder,
.chat-eingabe input::placeholder { color: var(--ink-faint); }
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus,
.auth-form input:focus,
.auth-form textarea:focus,
.auth-form select:focus { border-color: #f1f1ef; box-shadow: none; outline: none; }
.check-pill span { border-radius: 2px; border-color: #414141; background: #0d0d0d; color: #b8b8b4; }
.check-pill input:checked + span { background: #f1f1ef; border-color: #f1f1ef; color: #080808; }
.contact-line { border-color: #333; }
.contact-line svg { color: #d8d8d4; }
.contact-line span { color: var(--ink-soft); }
/* Auch hier ein echtes Tippziel statt einer 18 px hohen Textzeile. */
.contact-line a.plain { display: inline-block; padding: 4px 0; }
.contact-promise { border: 1px solid #333; background: #0a0a0a; }
.contact-promise ol { color: var(--ink-soft); }
.form-success { background: #111; border-color: #444; color: var(--ink-soft); }

.auth-wrap { max-width: 640px; }
.auth-card { padding: clamp(26px, 4vw, 46px); }
/* Gleiche Umschaltung wie auf der Leistungsseite: eckig, ein Rahmen,
   eine Trennlinie. Die Pillenform stammte noch aus dem alten Design. */
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: #080808;
}
.auth-tab {
  min-height: 50px;
  padding: 10px 14px;
  border: 0;
  border-right: 1px solid var(--line-strong);
  border-radius: 0;
  color: #a3a39f;
  font-weight: 400;
}
.auth-tab:last-child { border-right: 0; }
.auth-tab:hover { background: #101010; color: var(--ink); }
/* Der aktive Knopf hat einen hellen Grund - die Schrift muss dunkel sein. */
.auth-tab.active { background: #f1f1ef; color: #080808; }
.auth-tab.active:hover { background: #f1f1ef; color: #080808; }
.auth-tab:focus-visible { outline: 2px solid #f1f1ef; outline-offset: -3px; }
.auth-divider { color: var(--ink-faint); }
.auth-divider::before,
.auth-divider::after { background: #333; }
.btn-google { border-color: #555; background: #111; color: #f1f1ef; }
.btn-google:hover { border-color: #7d7d79; background: #161616; }
.auth-note { color: var(--ink-faint); }
.auth-note a { color: #c4c4c0; }
.opt { color: var(--ink-faint); }

/* ---------- Rechtstexte und 404 ---------- */

.page-legal .page-hero { padding-bottom: 56px; }
.page-legal .page-hero h1 { font-size: clamp(1.9rem, 1.35rem + 2.95vw, 4.6rem); }
.page-legal main > section.tight .wrap { max-width: 980px; }
.legal-text,
.page-legal main > section.tight .wrap { color: #b3b3af; }
.page-legal main h2 {
  margin: 58px 0 16px;
  padding-top: 28px;
  border-top: 1px solid #2e2e2e;
  font: 400 clamp(1.65rem, 2.6vw, 2.55rem)/1.1 var(--font-serif);
}
.page-legal main p,
.page-legal main li { color: #aaa; }
.page-legal main b { color: #eee; }
.error-page { min-height: calc(100svh - var(--header-h)); }

/* ---------- Kundendashboard ---------- */

.page-dashboard { background: #070707; }
.app-top { background: rgba(7,7,7,.94); border-color: #2d2d2d; }
.app-top-inner,
.app-wrap { max-width: 1540px; }
.app-top-link,
.konto-abmelden { color: #aaa; }
.app-top-trenner { background: #333; }
.app-main { background: #070707; }
.dash-side {
  background: #0a0a0a;
  border: 1px solid #303030;
  border-radius: 3px;
  box-shadow: none;
}
.side-profil,
.side-foot { border-color: #303030; }
.side-label { color: #6f6f6c; }
.side-item { color: #a7a7a3; border-radius: 2px; }
.side-item:hover { background: #121212; color: #fff; }
.side-item.active { background: #f1f1ef; color: #080808; }
.side-item.active svg { color: #080808; }
.side-badge { background: #222; color: #ddd; }
.side-item.active .side-badge { background: #111; color: #fff; }
.dash-panel h1 { color: #f3f3f1; }
.panel-kopf p { color: #8f8f8c; }
.dash-card { border: 1px solid #303030; background: #0a0a0a; }
.kennzahl + .kennzahl,
.zeilen-liste > li,
.akt-liste > li,
.konto-meta li,
.card-head { border-color: #303030; }
.kennzahl small,
.zeilen-liste small,
.akt-liste,
.konto-meta span { color: #858582; }
.kennzahl:hover { background: #111; }
.chat-karte,
.chat-kopf,
.chat-verlauf,
.chat-eingabe { background: #0a0a0a; border-color: #303030; }
.chat-senden { background: #f1f1ef; color: #080808; border-radius: 2px; }
.app-fuss { background: #070707; border-color: #2e2e2e; color: var(--ink-faint); }
.app-fuss .angebot { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.app-fuss .angebot a,
.app-fuss .legal a { color: #9c9c98; }
.app-fuss .angebot a:hover,
.app-fuss .legal a:hover { color: var(--ink); }
/* Weg aus dem Portal zurueck ins Angebot der Website. */
.side-mehr {
  display: block;
  padding: 9px 0;
  color: var(--ink-soft);
  font-size: var(--fs-meta);
  text-align: center;
}
.side-mehr:hover { color: var(--ink); }

/* ---------- Chat-Widget und Hinweise ---------- */

.widget-launcher { border-radius: 2px; background: #0d0d0d; color: #fff; border: 1px solid #505050; }
.widget-panel { border-radius: 3px; border-color: #464646; background: #0b0b0b; color: var(--ink); }
/* Frueher standen hier .widget-head und .widget-input - beide Klassen gibt
   es im Baustein gar nicht. Das Fenster hiess dunkel, innen blieb aber
   alles auf dem hellen #fff aus style.css: heller Kopf mit heller Schrift,
   helle Vorschlags-Pillen mit heller Schrift. Jetzt die echten Namen. */
.widget-panel .chat-head { background: #0b0b0b; border-bottom-color: #262626; }
.widget-panel .chat-head .name { color: var(--ink); }
.widget-panel .chat-head .ps-avatar { background: #1a1a1a !important; border: 1px solid #3a3a3a; }
.widget-panel .ki-badge { border-color: #4a4a4a; color: #d7d7d3; }
.widget-panel .chat-body { background: #090909; }
.widget-panel .chat-chips { background: #0b0b0b; }
.widget-panel .chat-chips button {
  background: #141414;
  border-color: #3d3d3d;
  color: #d7d7d3;
}
.widget-panel .chat-chips button:hover { background: #1c1c1c; border-color: #6d6d6d; color: var(--ink); }
.widget-panel .chat-input { background: #0b0b0b; border-top-color: #262626; }
.widget-panel .chat-input input { background: #131313; border-color: #4a4a4a; color: var(--ink); }
.widget-panel .chat-input input::placeholder { color: var(--ink-faint); }
/* Der Senden-Knopf war hell mit weissem Zeichen - unsichtbar. */
.widget-panel .chat-input button { background: #f1f1ef; color: #080808; }
.widget-panel .chat-input button:hover { background: #fff; }
.widget-panel .chat-note { background: #0b0b0b; color: var(--ink-faint); }
.cookie-banner,
.cookie-panel { background: #0b0b0b; color: var(--ink); border-color: #444; border-radius: 3px; }

/* Animation is polish, never a visibility requirement. This also prevents
   hidden sections after deep-linking or restoring a previous scroll position. */
.reveal,
.reveal.in,
.stagger-warten > *,
.stagger-los > * {
  opacity: 1;
  transform: none;
  filter: none;
}

.bild-huelle > picture,
.bild-huelle > img {
  clip-path: none !important;
}

.bild-huelle > picture img,
.bild-huelle > img {
  transform: none !important;
}

/* The launcher is injected after this stylesheet and receives inline theme
   rules. Keep it functional without turning it into a bright visual accent. */
body .widget-launcher,
body .widget-launcher:hover,
body .widget-launcher:focus-visible,
body .ms-teaser,
body .ms-teaser:hover {
  color: #fff !important;
  background: #0d0d0d !important;
  border-color: #505050 !important;
  box-shadow: none !important;
}

body .widget-launcher {
  width: 54px !important;
  min-width: 54px;
  padding: 0 !important;
  justify-content: center;
}

body .widget-launcher .wl-text {
  display: none !important;
}

/* Der kleine Hinweis war hier abgeschaltet. Er ist aber genau der Anlass,
   den Bot ueberhaupt auszuprobieren - also wieder an, nur ruhiger:
   dunkle Flaeche, klarer Rand, dezenter Schatten. */
body .ms-teaser {
  border-radius: 3px !important;
  border-bottom-right-radius: 3px !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55) !important;
}
body .ms-teaser .ms-txt { color: #d9d9d5; }
body .ms-teaser .ms-txt b { color: var(--ink); font-weight: 600; }
body .ms-teaser .ms-zu { color: var(--ink-faint); }
body .ms-teaser .ms-zu:hover { background: #1e1e1e; color: var(--ink); }
body .ms-teaser::after { border-color: #505050 !important; border-bottom-right-radius: 1px; }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1320px) {
  :root { --header-h: 92px; }
  .header-inner { padding-inline: 28px; }
  .main-nav { gap: 20px; }
  .main-nav a { font-size: var(--fs-meta); }
  .main-nav a[href="/webdesign-kloten"],
  .main-nav a[href="/webdesign-zuerich"] { display: none; }
  .header-dashboard { font-size: var(--fs-meta); }
  .header-cta .btn.header-start { min-height: 48px; padding: 11px 16px; font-size: var(--fs-meta); }
  .logo { --logo-h: 26px; }
  /* Zwei gleich breite Karten pro Reihe - der Versatz braucht mehr Platz,
     als hier noch da ist. */
  .page-home .outcome-card:nth-child(n) { grid-column: span 6; }
}

@media (max-width: 1040px) {
  .main-nav,
  .header-dashboard,
  .header-start { display: none !important; }
  .burger { display: flex; }
  .page-home .outcome-card:nth-child(n) { grid-column: span 12; }
  .page-home .outcome-card,
  /* Rest aus dem alten 4-Spalten-Layout: die letzte Karte bekam dort eine
     Sonderbehandlung. Im 12-Spalten-Raster machte sie das eine Spalte
     schmal (46px), weil :last-child die nth-child(n)-Regel ueberstimmt. */
  .page-home .outcome-card:last-child { grid-column: span 12; }
  .offer-list { grid-template-columns: 1fr; }
  .service-hero { min-height: 0; }
  .service-hero-grid { grid-template-columns: 1fr; }
  .service-hero-copy { max-width: 760px; }
  .service-hero-visual { max-width: 860px; width: 100%; aspect-ratio: 16 / 10; }
  .service-usecases { grid-template-columns: 1fr 1fr; }
  .service-flow { grid-template-columns: 1fr 1fr; }
  .service-flow article:nth-child(odd) { border-left: 0; }
  .service-flow article:nth-child(n+3) { border-top: 1px solid #353535; }
  .service-stack,
  .service-compare { grid-template-columns: 1fr; }
  .service-system-panel { max-width: 760px; }
  .bot-grid { grid-template-columns: 1fr; gap: 36px; }
  .bot-grid h2 { max-width: 15ch; }
  .bot-grid .chat-demo { min-height: 540px; }
  .proof-panel { grid-template-columns: 1fr; gap: 30px; }
  .proof-heading { padding-right: 0; }
  .proof-points { grid-template-columns: 1fr 1fr; }
  .proof-points > div:nth-child(odd) { border-left: 0; }
  .proof-points > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .lw-buehne { grid-template-columns: 1fr; }
  .lw-text { max-width: 760px; }
  .lw-schau { max-width: 900px; width: 100%; }
  .work-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-grid .footer-col:last-child { grid-column: 2 / -1; }
}

@media (max-width: 820px) {
  .hero-start .trust-zeile { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .hero-start .trust-zeile .punkt { display: none; }
  .hero-mitte .hero-ctas { margin-bottom: 48px; }
  .about-teaser,
  .contact-grid { grid-template-columns: 1fr; }
  .gruender-fotos { max-width: 620px; }
  .lw-details { grid-template-columns: 1fr; }
  .lw-spalte + .lw-spalte { border-left: 0; border-top: 1px solid var(--line); }
  .pl-anker { grid-template-columns: 1fr 1fr; }
  .page-dashboard .dash-layout { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  :root { --header-h: 72px; --wrap: 100%; }
  body { font-size: 15px; }
  .wrap { padding-inline: 18px; }
  section,
  section.tight { padding-block: 58px; }
  .site-header { background: rgba(7,7,7,.92); border-bottom-color: #232323; }
  .header-inner { min-height: var(--header-h); padding: 10px 18px; }
  .logo { --logo-h: 23px; }
  .burger { width: 42px; height: 42px; }
  .menu-karte { top: calc(var(--header-h) + 8px); }

  .hero-start {
    min-height: 100svh;
    padding: calc(var(--header-h) + 42px) 0 48px;
    align-items: flex-end;
  }
  .hero-foto { object-position: 58% 50%; opacity: 1; filter: grayscale(1) contrast(1.12) brightness(.85); }
  .hero-start .hero-bg::after {
    background:
      linear-gradient(90deg, rgba(0,0,0,.82), rgba(0,0,0,.24)),
      linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.18) 36%, rgba(0,0,0,.88) 100%);
  }
  /* Groesse kommt jetzt aus der durchgehenden Kurve oben; hier nur noch,
     was wirklich breitenabhaengig ist. max-width: 10ch ist raus - das war
     der Grund fuer sechs Zeilen Ueberschrift auf dem Handy. */
  .hero-mitte h1 { margin-bottom: 20px; line-height: .96; }
  .hero-promise { max-width: 320px; margin-inline: 0; }
  .hero-mitte .lead.hero-explain { max-width: 340px; }
  .hero-mitte .hero-ctas { display: grid; gap: 10px; margin-bottom: 38px; }
  .hero-mitte .hero-ctas .btn { width: 100%; min-width: 0; justify-content: space-between; }
  .hero-start .trust-zeile { gap: 8px; font-size: var(--fs-micro); }

  .page-home .outcome-intro { margin-bottom: 28px; }
  .page-home .outcome-card:nth-child(n) { grid-column: span 12; }
  .page-home .outcome-list { gap: 12px; grid-auto-rows: clamp(300px, 62vw, 380px); }
  .page-home .outcome-card,
  .page-home .outcome-card:last-child { grid-column: span 12; }
  .page-home .outcome-card { padding: 24px 22px; }
  .page-home .outcome-card > span:first-child { top: 22px; left: 22px; }
  .page-home .outcome-card-media { height: 100%; }
  .page-home .outcome-card-media img { width: 100%; }
  .page-home .demo-fenster:not([hidden]) { border-radius: 12px; }
  .bot-section { padding: 28px 20px; }
  .bot-grid { gap: 30px; }
  .bot-benefits li { padding: 14px 0; font-size: var(--fs-small); }
  .bot-grid .chat-demo { min-height: 500px; }
  .bot-grid .chat-body { min-height: 250px; padding: 18px; }
  .bot-grid .chat-chips { padding-inline: 16px; }
  .bot-grid .chat-chips button { font-size: var(--fs-xs); }
  .offer-row { grid-template-columns: 48px minmax(0, 1fr) 24px; padding: 20px 17px; gap: 4px 12px; }
  .offer-nr { font-size: 1.7rem; }

  .service-hero { padding: calc(var(--header-h) + 52px) 0 62px; }
  .service-hero-actions { display: grid; width: 100%; gap: 10px; }
  .service-hero-actions .btn { width: 100%; justify-content: space-between; }
  .service-hero .trust-zeile { display: grid; grid-template-columns: 1fr; gap: 9px; }
  .service-hero .trust-zeile .punkt { display: none; }
  .service-hero-visual { aspect-ratio: 1 / 1.08; }
  .service-hero-visual figcaption { left: 16px; right: 16px; bottom: 15px; font-size: var(--fs-tiny); }
  .service-usecases,
  .service-flow,
  .service-compare-grid { grid-template-columns: 1fr; }
  .service-usecase { min-height: 230px; }
  .service-usecase > span,
  .service-flow article > span { margin-bottom: 34px; }
  .service-flow article { min-height: 230px; }
  .service-flow article + article,
  .service-flow article:nth-child(n+3) { border-left: 0; border-top: 1px solid #353535; }
  .service-stack { gap: 38px; }
  .service-checks li { grid-template-columns: 1fr; gap: 8px; }
  .service-system-panel { padding: 28px 22px; }
  .service-compare { gap: 32px; }
  .service-compare-grid article { min-height: 280px; padding: 28px 22px; }
  .service-compare-grid article + article { border-left: 0; border-top: 1px solid #343434; }
  .service-compare-grid h3 { margin-top: 50px; }

  .proof-panel { width: calc(100% - 36px); padding: 30px 22px; gap: 20px; }
  .proof-points { grid-template-columns: 1fr; }
  .proof-points > div,
  .proof-points > div:nth-child(odd),
  .proof-points > div:nth-child(n+3) { min-height: 0; padding: 20px 0; border-left: 0; border-top: 1px solid var(--line); }
  .proof-points > div:first-child { border-top: 0; }
  .orts-bilder { grid-template-columns: 1fr; }
  .orts-bild:last-child { grid-column: auto; }
  .orts-fakten { grid-template-columns: 1fr; }
  .about-teaser { gap: 32px; }
  .big-cta { padding: 34px 22px; }
  .big-cta .hero-ctas { display: grid; }
  .big-cta .btn { width: 100%; justify-content: space-between; }

  .page-hero { padding: calc(var(--header-h) + 58px) 0 58px; }
  .page-hero .lead { font-size: var(--fs-base); }

  .lw { padding-top: var(--header-h); }
  .lw-kopf { padding: 48px 0 28px; }
  .lw-tabs { grid-template-columns: 1fr; }
  .lw-tab { border-right: 0; border-bottom: 1px solid var(--line-strong); }
  .lw-tab:last-child { border-bottom: 0; }
  .lw-welt { padding: 48px 0 72px; }
  .lw-merkmale li { padding: 15px; }
  .lw-details { margin-top: 54px; }
  .lw-spalte { padding: 26px 0; }

  .work-grid { grid-template-columns: 1fr; gap: 14px; }
  .demo-vollbild { padding: 0; }
  .demo-vollbild-rahmen { border: 0; }

  .pl-hero { padding-top: calc(var(--header-h) + 58px); }
  .pl-anker { grid-template-columns: 1fr; }
  .pl-anker a { min-height: 92px; }
  .pl-stufe { border-radius: 2px; }
  .pl-vergleich-kopf,
  .pl-vergleich tbody tr { border-radius: 2px; background: #0a0a0a; }
  .price-rationale { border-radius: 2px; padding: 28px 20px; }
  .pl-faq-item { border-radius: 2px; }

  .local-hero-actions,
  .local-hero .trust-zeile { justify-content: flex-start; }
  .local-hero-actions { display: grid; }
  .local-hero-actions .btn { width: 100%; justify-content: space-between; }
  .local-usecases { grid-template-columns: 1fr; }
  .local-usecases > div { padding: 20px 0 !important; border-right: 0 !important; }

  .form-card,
  .auth-card { padding: 22px 18px; }
  .form-grid,
  .auth-row { grid-template-columns: 1fr; }
  .check-row { grid-template-columns: 1fr 1fr; }
  .contact-aside { margin-top: 18px; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px 24px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-grid .footer-col:last-child { grid-column: auto; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
  .site-footer::before { display: none; }

  .page-dashboard .app-top-inner { padding-inline: 16px; }
  .page-dashboard .app-top-link,
  .page-dashboard .app-top-trenner,
  .page-dashboard .app-user { display: none; }
  .page-dashboard .app-main { padding-inline: 0; }
  .page-dashboard .app-wrap { padding-inline: 14px; }
  .page-dashboard .dash-side { border-radius: 2px; }
  .page-dashboard .dash-card { padding: 20px 16px; }
}

@media (max-width: 430px) {
  .check-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand,
  .footer-grid .footer-col:last-child { grid-column: auto; }
  .gruender-fotos { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   Feinschliff 2026-09 — Zustaende, Zahlen-Register, Scroll-Timelines
   ------------------------------------------------------------
   Drei Bloecke, bewusst in dieser Reihenfolge:

     1. ZUSTAENDE  Was passiert beim Tippen, Fokussieren, Deaktivieren.
                   Das sind die Stellen, an denen eine Seite verraet, ob
                   jemand sie wirklich durchgegangen ist. Zuerst, weil
                   billig und am deutlichsten sichtbar.
     2. ZAHLEN     Eigenes Register fuer Ziffern. Wir verkaufen Technik;
                   dann duerfen 01-04 und CHF-Betraege nicht in denselben
                   proportionalen Ziffern laufen wie der Fliesstext.
     3. BEWEGUNG   Die Scroll-Choreografie zieht von der JS-Schleife auf
                   native CSS-Zeitleisten um. Gleiches Bild, aber vom
                   Compositor gerechnet statt vom Hauptthread - und beim
                   Zurueckscrollen laeuft sie korrekt rueckwaerts.
                   Browser ohne Unterstuetzung behalten exakt das
                   bisherige Verhalten (IntersectionObserver in site.js).
   ============================================================ */

/* ---------- 1. Zustaende ---------- */

/* Der Cursor im Eingabefeld war der Systemcursor - auf fast schwarzem
   Grund ein duenner schwarzer Strich, also praktisch unsichtbar. */
input, textarea, select, [contenteditable] { caret-color: #f2f2ef; }

::placeholder { color: #6f6f6c; opacity: 1; }

/* Fokus im Formular: der globale weisse Ring sitzt 4px ausserhalb und
   schneidet in Karten mit overflow:hidden ab. Im Feld selbst reicht ein
   Rahmenwechsel plus ein 1px-Ring, der keinen Platz braucht. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  border-color: #f2f2ef;
  box-shadow: 0 0 0 1px #f2f2ef;
}

/* Erst nach dem Verlassen des Felds meckern, nicht beim Tippen.
   :user-invalid statt :invalid - sonst ist jedes leere Pflichtfeld
   ab Sekunde null rot. */
input:user-invalid,
textarea:user-invalid {
  border-color: #d98a7a;
  box-shadow: 0 0 0 1px rgba(217, 138, 122, .45);
}

/* Deaktiviert war im dunklen Layout nicht von aktiv zu unterscheiden. */
button:disabled,
.btn:disabled,
[aria-disabled="true"],
input:disabled,
textarea:disabled,
select:disabled {
  opacity: .42;
  cursor: not-allowed;
  filter: saturate(0);
}
button:disabled:active,
.btn:disabled:active,
[aria-disabled="true"]:active { transform: none; }

/* Listenpunkte liefen im Standard-Grau des Browsers. */
li::marker { color: var(--ink-faint); }

/* Lange Fliesstexte: keine einzelnen Woerter mehr auf der letzten Zeile. */
p, .lead, li { text-wrap: pretty; }

/* ---------- 2. Zahlen-Register ---------- */

/* Tabellenziffern: gleiche Breite pro Ziffer. Damit stehen 01-04
   buendig untereinander und Preise springen beim Umschalten nicht. */
.page-home .outcome-card > span:first-child,
.preis, .pl-preis,
.stat-zahl, .kennzahl,
table td, table th, time {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Die 01-04 bekommen die Stimme einer Massangabe statt einer Ueberschrift:
   kleiner, gesperrt, mit einem kurzen Strich als Mass-Tick daneben. */
.page-home .outcome-card > span:first-child {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-small);
  letter-spacing: .16em;
  color: #b4b4b0;
}
.page-home .outcome-card > span:first-child::after {
  content: "";
  flex: 0 0 auto;
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: .55;
  transform-origin: left center;
  transition: transform 320ms var(--ease-out), opacity 320ms ease;
}

/* ---------- 3. Bewegung ---------- */

/* Karten-Hover: bisher wechselte nur die Rahmenfarbe. Das Bild darunter
   ist der eigentliche Inhalt - also darf es reagieren. Nur auf Geraeten
   mit echtem Zeiger, sonst loest ein Fingertipp den Hover mit aus. */
@media (hover: hover) and (pointer: fine) {
  .page-home .outcome-card-media img {
    transition: transform 620ms var(--ease-out), filter 620ms ease;
  }
  .page-home .outcome-card:hover .outcome-card-media img { transform: scale(1.04); }
  .page-home .outcome-card:hover > span:first-child::after { transform: scaleX(1.7); opacity: .9; }
  .page-home .outcome-card-arrow {
    transition: transform 240ms var(--ease-out), background-color 240ms ease, border-color 240ms ease, color 240ms ease;
  }
  .page-home .outcome-card:hover .outcome-card-arrow {
    transform: translate(3px, -3px);
    background: #f2f2ef;
    border-color: #f2f2ef;
    color: #080808;
  }
}

/* Tastatur-Bedienung soll dieselbe Rueckmeldung geben wie die Maus. */
.page-home .outcome-card:focus-visible .outcome-card-arrow {
  transform: translate(3px, -3px);
  background: #f2f2ef;
  border-color: #f2f2ef;
  color: #080808;
}

/* Das Reveal war mit 0.8s spuerbar traege. 0.55s liest sich schneller,
   ohne dass die Bewegung abgehackt wirkt. */
.reveal { transition-duration: .55s; }

/* ---------- Farbreste aus dem warmen Layout ---------- */

/* Die Leistungszeilen auf den Ortsseiten trugen noch die drei Akzentfarben
   des alten beigen Designs: Braun fuer Website, Blau fuer WebApp, Violett
   fuer KI. Auf dem monochromen Grund sind das drei Fremdkoerper - und das
   Violett war ausgerechnet exakt der Standard-Lilaton, den Generatoren fuer
   alles rund um KI ausgeben. Die Unterscheidung bleibt erhalten, nur als
   Tonwertstufe statt als Farbton: hell, mittel, gedaempft. Damit fuehrt die
   Liste den Blick weiterhin, ohne die Palette zu brechen. */
a.offer-row[href$="#website"] { --of: #f2f2ef; --of-tint: rgba(255, 255, 255, .045); }
a.offer-row[href$="#webapp"]  { --of: #bcbcb8; --of-tint: rgba(255, 255, 255, .035); }
a.offer-row[href$="#ki"]      { --of: #8e8e8a; --of-tint: rgba(255, 255, 255, .028); }

/* .ki-glow wird derzeit auf keiner Seite verwendet, traegt aber denselben
   Verlauf. Hier neutralisiert, damit ein spaeterer Einsatz die monochrome
   Sprache nicht aus Versehen wieder aufbricht. */
.ki-glow {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--ink);
  animation: none;
}

/* --- Native Scroll-Zeitleisten (Chrome/Edge 115+, Firefox 144+, Safari 26+) --- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* Lesefortschritt: laeuft jetzt am Scroll-Fortschritt des Dokuments
       statt an einem JS-Frame. scrolleffekte.js laesst ihn dann in Ruhe. */
    .scroll-fortschritt {
      transform-origin: left center;
      animation: ms-fortschritt linear both;
      animation-timeline: scroll(root block);
    }
    @keyframes ms-fortschritt { from { transform: scaleX(0); } to { transform: scaleX(1); } }

    /* Text reveals are progressive, one-shot WAAPI animations in site.js. */

    /* SIGNATUR: die Haarlinie, die sich selbst zieht.
       Die Seite verkauft "erst planen, dann bauen" - also wird jede
       Sektionsueberschrift von einem Strich unterstrichen, der sich beim
       Hereinscrollen ausmisst. Ein einziges Ornament, ueberall dasselbe,
       aus dem 1px-Vokabular das die Seite ohnehin schon spricht. */
    .section-head,
    .outcome-intro,
    .proof-heading { position: relative; }
    .section-head::after,
    .outcome-intro::after,
    .proof-heading::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -18px;
      width: min(240px, 42%);
      height: 1px;
      background: linear-gradient(90deg, var(--line-strong), transparent);
      transform-origin: left center;
      animation: ms-linie linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 26%;
    }
    .section-head.center::after { left: 50%; transform-origin: center; translate: -50% 0; }
    @keyframes ms-linie { from { transform: scaleX(0); } to { transform: scaleX(1); } }

    /* Hero: Foto laeuft langsamer als die Seite, Text zieht weg.
       Bisher zwei inline-Transforms pro Frame aus scrolleffekte.js.

       Zwei Fallen, die hier geloest werden:
       a) .hero-start hat overflow:hidden und ist damit selbst ein
          Scroll-Container. Ein view() auf den Kindern wuerde sich an ihm
          ausrichten - und der scrollt nie. Darum bekommt der Hero eine
          BENANNTE Zeitleiste; die Kinder greifen sie ueber den Namen ab,
          gemessen am Dokument.
       b) Der Bereich muss "exit" sein, nicht "cover". Der Hero ist genau
          fensterhoch, steht beim Laden also schon in der Mitte von cover -
          der Text waere beim Seitenaufruf bereits halb ausgeblendet.
          exit 0% ist exakt der Moment, in dem gescrollt wird. */
    .hero-start { view-timeline: --ms-hero block; }

    .hero-foto {
      animation: ms-hero-foto linear both;
      animation-timeline: --ms-hero;
      animation-range: exit 0% exit 100%;
    }
    @keyframes ms-hero-foto {
      from { transform: translate3d(0, 0, 0); }
      to   { transform: translate3d(0, 60px, 0); }
    }
    .hero-mitte {
      animation: ms-hero-text linear both;
      animation-timeline: --ms-hero;
      animation-range: exit 25% exit 100%;
    }
    @keyframes ms-hero-text {
      from { transform: none; opacity: 1; }
      to   { transform: translate3d(0, -42px, 0); opacity: .15; }
    }
  }
}

/* ---------- Abschnitts-Spalte ----------
   Gebaut von assets/js/abschnitte.js. Sie beantwortet auf einer 9500px
   langen Seite die Frage "wo bin ich, wie viel kommt noch" - und zwar im
   selben Register wie die Leistungsnummern: Ziffer, kurzer Strich, Text.
   Ein Vokabular an zwei Stellen statt zwei Ornamente.

   Ruhezustand: nur die Ziffern, sehr zurueckgenommen. Der aktive
   Abschnitt zeigt zusaetzlich seinen Namen; beim Ueberfahren der Spalte
   zeigen alle ihren Namen. So steht dauerhaft nur das Noetigste da. */

.abschnitts-spalte {
  position: fixed;
  /* Der Seitenrand ist knapp: bei --wrap 1800px beginnt der Inhalt schon
     bei 58px. Die Spalte muss deshalb in diese 58px passen - im
     Ruhezustand belegt sie mit Ziffer + Strich rund 48px und beruehrt den
     Text nicht. Erst beim Ueberfahren klappen die Namen auf, und dann
     legt sich ein eigener Grund darunter, damit sie ueber dem Inhalt
     lesbar bleiben. */
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  pointer-events: none;         /* nur die Links selbst fangen Klicks */
  display: none;                /* Grundzustand: aus, s. Media Query */
}

.abschnitts-spalte ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.abschnitts-spalte a {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #6f6f6c;
  font-size: var(--fs-micro);
  letter-spacing: .16em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  padding: 4px 0;
  transition: color 220ms var(--ease-out);
}

.as-strich {
  display: block;
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: .5;
  transform: scaleX(.55);
  transform-origin: left center;
  transition: transform 260ms var(--ease-out), opacity 260ms ease;
}

/* Der Name liegt ABSOLUT neben dem Strich, nicht im Fluss. Zwei Gruende:
   1. max-width zu animieren rechnet bei jedem Frame das Layout neu; so
      bewegen sich nur opacity und transform, also nichts Layoutrelevantes.
   2. Die Spalte behaelt dadurch immer dieselbe Breite (~48px) und passt
      sicher in den Rand - der aufgeklappte Name legt sich darueber,
      statt die Spalte breiter zu machen.
   Fuer Screenreader bleibt der Text jederzeit lesbar. */
.abschnitts-spalte a { position: relative; }
.as-text {
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  white-space: nowrap;
  letter-spacing: .02em;
  opacity: 0;
  transform: translate(-6px, -50%);
  transition: opacity 200ms ease, transform 260ms var(--ease-out);
  pointer-events: none;
  padding: 7px 13px;
  background: rgba(8, 8, 8, .94);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08);
}

/* Aktiv heisst: heller und voller Strich. Bewusst OHNE Namen - der
   wuerde dauerhaft ueber dem Inhalt liegen. Der Name kommt erst beim
   Ueberfahren, also auf Absicht. */
.abschnitts-spalte li.aktiv a { color: #f1f1ef; }
.abschnitts-spalte li.aktiv .as-strich { transform: scaleX(1); opacity: .9; }

@media (hover: hover) and (pointer: fine) {
  .abschnitts-spalte:hover a { color: #c9c9c6; }
  .abschnitts-spalte:hover .as-text { opacity: 1; transform: translate(0, -50%); }
  .abschnitts-spalte a:hover { color: #fff; }
  .abschnitts-spalte a:hover .as-strich { transform: scaleX(1); opacity: 1; }
}

.abschnitts-spalte a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
  color: #fff;
}
.abschnitts-spalte a:focus-visible .as-text { opacity: 1; transform: translate(0, -50%); }

/* Erst ab 1200px: darunter fehlt der Seitenrand, dort waere die Spalte
   Stoerung statt Orientierung.

   Wichtig: der normale Satzspiegel laesst links nur 48-58px frei, die
   Spalte braucht rund 90. Statt sie kleinzuquetschen bekommt die
   Startseite in diesem Bereich einen echten Rand - eine Marginalspalte,
   wie sie ein Buch fuer Kolumnentitel hat. Nur main, nicht Kopf und
   Fuss: die spannen weiter ueber die volle Breite. */
@media (min-width: 1200px) {
  .abschnitts-spalte { display: block; }
  .page-home main .wrap,
  .page-home .hero-mitte,
  .page-home .site-header .wrap,
  .page-home .site-footer .wrap { padding-left: 104px; }
}

/* Sehr niedrige Fenster: acht Zeilen passen dort nicht neben den Inhalt. */
@media (max-height: 620px) {
  .abschnitts-spalte { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .abschnitts-spalte a,
  .as-strich,
  .as-text { transition-duration: .01ms; }
  .as-text { transform: translate(0, -50%); }
}

/* ---------- Branchen-Raster (beispiele.html) ----------
   Der Abschnitt steht fest im HTML, weil die Demo-Karten darueber aus dem
   Admin kommen und damit fuer Suchmaschinen unsichtbar sind. */
.branchen-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.branchen-raster article { padding: 30px 28px; background: #0a0a0a; }
.branchen-raster h3 {
  margin: 0 0 10px;
  font: 400 clamp(1.25rem, 1.05rem + .85vw, 1.75rem)/1.15 var(--font-serif);
  color: var(--ink);
}
.branchen-raster p { margin: 0; color: var(--ink-soft); font-size: var(--fs-small); }
.branchen-raster a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.branchen-hinweis { margin: 26px 0 0; color: var(--ink-soft); font-size: var(--fs-small); }
.branchen-hinweis a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Guided reading: native scroll, readable content and a developing sketch. */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); }
.reveal, .reveal.in { opacity: 1; transform: none; filter: none; animation: none; }
main:focus { outline: none; }
.skip-link { position: fixed; top: 12px; left: 24px; z-index: 10000; padding: 12px 18px; background: #f3f3ed; color: #080808; transform: translateY(-180%); }
.skip-link:focus { transform: none; color: #080808; }
.page-home .hero-start { padding-bottom: 100px; }
.page-home .scroll-cue {
  display: inline-flex; flex-direction: row; gap: 12px;
  left: clamp(24px, 4vw, 64px); bottom: 24px; transform: none;
  padding: 8px 0; background: none; border: 0; border-radius: 0;
  backdrop-filter: none; box-shadow: none; color: #c5c5c0;
  font-size: 12px; font-weight: 400; letter-spacing: .02em; text-transform: none;
}
.page-home .scroll-cue svg { width: 16px; height: 16px; animation-iteration-count: 2; }
.project-story { background: #0b0b0b; }
.project-story .section-head { max-width: 800px; margin-bottom: 64px; }
.story-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .8fr); gap: clamp(40px, 7vw, 110px); align-items: start; }
.story-visual { position: sticky; top: calc(var(--header-h) + 32px); min-width: 0; }
.story-caption { display: flex; justify-content: space-between; margin-bottom: 18px; color: var(--ink-soft); font-size: 13px; }
.story-count { font-variant-numeric: tabular-nums; }
.story-browser { border: 1px solid #43433e; background: #111; overflow: hidden; }
.story-browser-bar { display: flex; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #30302d; font-size: 11px; color: #aaa; }
.story-browser-bar > span:first-child { letter-spacing: 3px; color: #777; }
/* Keep all four images decoded in one stable frame; only opacity changes. */
.story-gallery { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #111; }
.story-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 500ms ease; }
.story-visual[data-step="0"] [data-story-image="0"],
.story-visual[data-step="1"] [data-story-image="1"],
.story-visual[data-step="2"] [data-story-image="2"],
.story-visual[data-step="3"] [data-story-image="3"] { opacity: 1; }
.story-status { display: flex; align-items: center; gap: 10px; min-height: 60px; color: var(--ink-soft); font-size: 13px; }
.story-status-dot { width: 6px; height: 6px; background: #8f8f87; border-radius: 50%; }
.story-visual[data-step="3"] .story-status-dot { background: #d5e3c7; box-shadow: 0 0 12px #d5e3c740; }
.story-track { height: 1px; background: #30302c; }
.story-track > span { display: block; height: 100%; background: #deded5; transform: scaleX(.25); transform-origin: left; transition: transform 450ms var(--ease-out); }
.story-visual[data-step="1"] .story-track > span { transform: scaleX(.5); }
.story-visual[data-step="2"] .story-track > span { transform: scaleX(.75); }
.story-visual[data-step="3"] .story-track > span { transform: scaleX(1); }
.story-steps { list-style: none; margin: 0; padding: 0; }
.story-steps li { padding: 36px 0 56px; border-top: 1px solid var(--line); }
.story-steps li:first-child { padding-top: 0; border-top: 0; }
.story-steps li:last-child { padding-bottom: 0; }
.story-number { display: block; margin-bottom: 16px; font-size: 12px; color: #aaa99f; letter-spacing: .035em; }
.story-steps h3 { font: 400 clamp(26px, 2.6vw, 38px)/1.12 var(--font-serif); margin: 0 0 18px; }
.story-steps p { color: var(--ink-soft); max-width: 46ch; line-height: 1.7; margin: 0 0 18px; }
.story-steps a { font-size: 13px; text-underline-offset: 5px; }
.story-steps li.is-current .story-number { color: #f3f3ed; }
.questions-layout { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 6vw, 90px); }
.questions-layout h2 { font-size: var(--d-3); }
.demo-direkt { margin-top: 22px; font-size: 14px; color: var(--ink-soft); }
.demo-direkt a { text-decoration: underline; text-underline-offset: 4px; }
.questions-list details { border-top: 1px solid var(--line); }
.questions-list details:last-child { border-bottom: 1px solid var(--line); }
.questions-list summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 25px 0; cursor: pointer; list-style: none; font-size: 17px; }
.questions-list summary::-webkit-details-marker { display: none; }
.questions-list summary::after { content: '+'; flex: 0 0 auto; font-size: 24px; color: var(--ink-soft); }
.questions-list details[open] summary::after { content: '−'; }
.questions-list p { margin: 0; padding: 0 30px 26px 0; color: var(--ink-soft); line-height: 1.75; }
.questions-list p a { text-decoration: underline; text-underline-offset: 3px; }
.abschnitts-spalte a { min-height: 28px; }
.section-head.center::after { left: 0; translate: none; transform-origin: left; }
@media (min-width: 1200px) { .page-home .scroll-cue { left: 104px; } }
@media (max-width: 800px), (max-height: 650px) {
  .story-layout, .questions-layout { grid-template-columns: 1fr; }
  .story-visual { position: sticky; top: calc(var(--header-h) + 8px); z-index: 3; background: #0b0b0b; width: 100%; padding-top: 8px; box-shadow: 0 -12px 0 #0b0b0b; }
  .story-gallery { aspect-ratio: auto; height: clamp(100px, 23svh, 200px); }
  .story-browser-bar { display: none; }
  .story-caption { margin-bottom: 8px; }
  .story-status { min-height: 36px; font-size: 12px; }
  .story-steps { display: grid; grid-template-columns: 1fr; gap: 32px; }
  .story-steps li, .story-steps li:first-child { padding: 24px 0 0; border-top: 1px solid var(--line); }
}
@media (max-width: 520px) {
  .story-steps { grid-template-columns: 1fr; gap: 16px; }
  .story-steps li { padding-bottom: 16px; }
  .story-steps li { min-height: 36svh; }
  .project-story .section-head { margin-bottom: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .story-image, .story-track > span { transition: none; }
  .page-home .scroll-cue svg { animation: none; }
}
@media print {
  .story-visual { position: static; }
  .abschnitts-spalte, .scroll-fortschritt, .scroll-cue { display: none; }
}

/* Persönlicher Einstieg und einheitliche Typografie. */
.founder-invite { display: flex; align-items: center; gap: 16px; margin-top: 30px; }
.founder-invite-pictures { display: flex; flex: 0 0 auto; padding-right: 6px; }
.founder-invite img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; object-position: 50% 27%; border: 2px solid #1b1b18; }
.founder-invite img + img { margin-left: -8px; }
.founder-invite p { margin: 0; font-size: 12px; color: #b8b8b0; line-height: 1.6; }
.founder-invite b { display: block; color: #efefe8; font-weight: 500; }
.page-home .hero-mitte h1 { max-width: 1000px; font-size: clamp(2.7rem, 2rem + 4vw, 6rem); line-height: 1.02; }
.page-home .hero-promise { max-width: 600px; }
.page-home .hero-explain { max-width: 590px; }
.page-home .hero-start .trust-zeile { margin-top: 34px; }
.page-home .outcome-intro { max-width: 790px; }
.page-home .proof-points > div { border-left-color: #3d3d3d; }
.page-home .proof-panel { background: linear-gradient(120deg, #121212, #0a0a0a); }
.page-contact .page-hero .lead, .page-local .page-hero .lead { max-width: 760px; }
.service-usecase { border-color: #303030; }
.service-usecase > span { color: #aaa; }
.service-hero .no-break { white-space: normal; }
.service-hero h1 { line-height: 1.04; }
@media (max-width: 1000px) { .service-hero-grid { grid-template-columns: 1fr; } }