/* Selbst gehostete Schriften -- erzeugt von werkzeug_schriften.py.
   Nicht von Hand aendern; stattdessen das Skript erneut ausfuehren.
   Schibsted Grotesk und IBM Plex Mono stehen unter der SIL Open
   Font License 1.1. */
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/schriften/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Schibsted Grotesk';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('/schriften/schibsted-grotesk-400-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Schibsted Grotesk';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('/schriften/schibsted-grotesk-400-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   ITService Beck -- Gestaltungssystem
   Ruhige Praezision: ein dunkler Grund, eine Schrift, eine
   Handlungsfarbe. Alles andere tritt zurueck.
   ============================================================ */
:root{
  color-scheme: dark;

  /* Flaechen */
  --ink:         #0A1420;
  --ink-deep:    #070F19;
  --surface:     #0F1C2B;
  --surface-2:   #15253A;
  --line:        rgba(148,178,209,.13);
  --line-strong: rgba(148,178,209,.24);

  /* Text, von laut nach leise (Kontrast wird in pruefen.py nachgerechnet) */
  --text:   #EEF3F8;
  --text-2: #B4C2D0;
  --text-3: #8A9BAE;

  /* Jede Farbe hat genau eine Aufgabe, damit sie etwas bedeutet:
       orange = Handlung (Schaltflaechen, Fokus) -- sonst nirgends
       blau   = Daten und Zeichnung
       gruen  = Zusage und Ergebnis */
  --accent:       #FF6A2B;
  --accent-hover: #FF8250;
  --blue:         #6FB2EC;
  --green:        #3FBF9A;

  /* Schibsted Grotesk hat ein grosses I mit Serifen: "KI" liest sich nicht als "Kl". */
  --f-sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  /* Zwei Radien fuer die ganze Seite */
  --r:    8px;    /* Schaltflaechen, Felder, kleine Marken */
  --r-lg: 14px;   /* Karten, Tafeln, Medien */

  --pad:  clamp(20px, 5vw, 64px);
  --maxw: 1280px;
  --band: clamp(64px, 8vw, 112px);
  --ease: cubic-bezier(.22,.61,.36,1);

  /* Zeichen als Masken: Die Farbe kommt aus background, nicht aus der Datei. */
  --haken:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4 6.6 11.5 12.5 4.8' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --strich: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
  --pfeil:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%238A9BAE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

*, *::before, *::after{ box-sizing: border-box; }

/* Muss frueh stehen: sonst gewinnt etwa .mobile-menu{display:grid} gegen das
   hidden-Attribut und das Menue steht auf dem Handy dauerhaft offen. */
[hidden]{ display: none !important; }

html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 96px; }
body{
  margin: 0;
  background: var(--ink);
  color: var(--text-2);
  font-family: var(--f-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
@media (max-width: 640px){ body{ font-size: 1rem; line-height: 1.6; } }

a{ color: inherit; }
img, svg, video{ display: block; max-width: 100%; }
::selection{ background: var(--accent); color: #160A03; }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ---------- Typografie ---------- */
h1, h2, h3, h4{ margin: 0; color: var(--text); font-weight: 600; text-wrap: balance; }
h1{ font-size: clamp(2.25rem, 1.2rem + 3.4vw, 3.625rem); line-height: 1.05; letter-spacing: -.032em; }
h2{ font-size: clamp(1.75rem, 1.15rem + 2vw, 2.625rem); line-height: 1.1; letter-spacing: -.026em; }
h3{ font-size: clamp(1.1875rem, 1.05rem + .45vw, 1.375rem); line-height: 1.3; letter-spacing: -.014em; }
h4{ font-size: 1.0625rem; line-height: 1.35; letter-spacing: -.008em; }
p{ margin: 0; }
b, strong{ color: var(--text); font-weight: 600; }
/* Die Schrift hat keinen Kursivschnitt, ein errechneter wirkt schief.
   Betont wird deshalb ueber Farbe statt Neigung. */
em{ font-style: normal; color: var(--text); }

.lede{
  max-width: 60ch;
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  line-height: 1.6;
  color: var(--text-2);
  text-wrap: pretty;
}
.prose{ max-width: 66ch; display: grid; gap: 1.1em; }
.prose h3{ margin-top: .9em; }

/* Rubrik ueber Ueberschriften: kurz, versal, zurueckhaltend */
.anno{
  font-size: .75rem; font-weight: 600; line-height: 1.45;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-3);
}

/* ---------- Raster ---------- */
.wrap{ width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
section{ position: relative; }
.sheet{ position: relative; z-index: 2; background: var(--ink); }
.band{ padding-block: var(--band); }
.band-tight{ padding-block: clamp(48px, 6vw, 80px); }

.band-head{ display: grid; gap: 16px; max-width: 48rem; margin-bottom: clamp(36px, 4.5vw, 56px); }
.band-head > div{ display: grid; gap: 16px; }
.band-head-zeile{
  max-width: none;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 16px 40px;
}
.band-head-zeile > div{ max-width: 48rem; }

/* ---------- Navigation ---------- */
.nav{
  position: sticky; top: 0; z-index: 60;
  background: rgba(10,20,32,.72);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  backdrop-filter: saturate(140%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.nav.is-stuck{ border-bottom-color: var(--line); background: rgba(10,20,32,.92); }
.nav-in{ display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; }

.brand{
  display: flex; align-items: center; gap: 10px; flex: none;
  font-size: 1rem; font-weight: 650; letter-spacing: -.012em;
  color: var(--text); text-decoration: none;
}
.brand-marke{ width: auto; height: 36px; flex: none; }
.brand .sub{ padding-left: 10px; border-left: 1px solid var(--line-strong); color: var(--text-3); font-weight: 500; }
@media (max-width: 520px){ .brand .sub{ display: none; } }
/* Auf sehr schmalen Handys reicht der Platz nicht fuer Logo, Schaltflaeche und
   Menue. Die Schaltflaeche steht dort ohnehin im Hero und in der Schnellleiste. */
@media (max-width: 420px){ .nav-cta .btn{ display: none; } }

.nav-links{ display: none; align-items: center; gap: 2px; }
@media (min-width: 1080px){ .nav-links{ display: flex; } }
.nav-links > a, .drop > button{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border: 0; border-radius: var(--r);
  background: none; cursor: pointer;
  font: inherit; font-size: .9375rem; font-weight: 500; line-height: 1.2;
  color: var(--text-2); text-decoration: none;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.nav-links > a:hover, .drop > button:hover{ color: var(--text); background: rgba(255,255,255,.05); }
.nav-links > a.is-active, .drop.has-active > button{ color: var(--text); }

.drop{ position: relative; }
.drop > button .car{ width: 10px; height: 10px; opacity: .7; transition: transform .2s var(--ease); }
.drop[data-open="true"] > button .car{ transform: rotate(180deg); }
.drop-panel{
  position: absolute; top: calc(100% + 10px); left: -8px;
  min-width: 330px; padding: 8px;
  display: grid; gap: 2px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  box-shadow: 0 24px 48px -18px rgba(0,0,0,.6);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
/* Unsichtbare Bruecke ueber den Abstand: sonst schliesst das Menue, waehrend
   die Maus vom Knopf zum Feld wandert. */
.drop-panel::before{ content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.drop[data-open="true"] .drop-panel{ opacity: 1; visibility: visible; transform: none; }
.drop-panel a{ display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--r); text-decoration: none; transition: background-color .15s var(--ease); }
.drop-panel a:hover, .drop-panel a.is-active{ background: var(--surface-2); }
.drop-panel .dt{ font-size: .9375rem; font-weight: 600; color: var(--text); }
.drop-panel .dd{ font-size: .8125rem; line-height: 1.45; color: var(--text-3); }
.drop-trenn{
  display: block; margin: 6px 12px 2px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: .6875rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3);
}

.nav-cta{ display: flex; align-items: center; gap: 10px; flex: none; }
.burger{
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 40px; padding: 0;
  background: none; border: 1px solid var(--line-strong); border-radius: var(--r);
  color: var(--text); cursor: pointer;
}
@media (min-width: 1080px){ .burger{ display: none; } }
.burger span{ position: relative; display: block; width: 16px; height: 1.5px; background: currentColor; }
.burger span::before, .burger span::after{
  content: ""; position: absolute; left: 0; width: 16px; height: 1.5px;
  background: currentColor; transition: transform .22s var(--ease);
}
.burger span::before{ top: -5px; }
.burger span::after{ top: 5px; }
.burger[aria-expanded="true"] span{ background: transparent; }
.burger[aria-expanded="true"] span::before{ transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span::after{ transform: translateY(-5px) rotate(-45deg); }

.mobile-menu{
  position: fixed; inset: 72px 0 0; z-index: 55;
  display: grid; align-content: start;
  padding: 8px var(--pad) 48px; overflow-y: auto;
  background: var(--ink); border-top: 1px solid var(--line);
}
.mobile-menu a{
  display: block; padding: 14px 0; border-bottom: 1px solid var(--line);
  font-size: 1.1875rem; font-weight: 500; letter-spacing: -.012em;
  color: var(--text-2); text-decoration: none;
}
.mobile-menu a.is-active{ color: var(--text); font-weight: 600; }
@media (min-width: 1080px){ .mobile-menu{ display: none !important; } }

/* ---------- Schaltflaechen ----------
   Drei Stufen: primaer (orange, genau eine je Blick), sekundaer (Kontur),
   Textverweis (.more). */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  border: 1px solid transparent; border-radius: var(--r);
  font: inherit; font-size: .9375rem; font-weight: 600; line-height: 1.1; letter-spacing: -.005em;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.btn .arw{ transition: transform .2s var(--ease); }
.btn:hover .arw{ transform: translateX(3px); }
.btn-primary{ background: var(--accent); color: #160A03; box-shadow: inset 0 1px 0 rgba(255,255,255,.22); }
.btn-primary:hover{ background: var(--accent-hover); }
.btn-ghost{ background: rgba(255,255,255,.03); border-color: var(--line-strong); color: var(--text); }
.btn-ghost:hover{ background: rgba(255,255,255,.07); border-color: rgba(148,178,209,.42); }
.btn-sm{ min-height: 38px; padding: 0 14px; font-size: .875rem; }
.actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
@media (max-width: 480px){ .actions > .btn{ flex: 1 1 100%; } }

.more{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .9375rem; font-weight: 600; color: var(--text);
  text-decoration: none; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.more .arw{ transition: transform .2s var(--ease); }
.more:hover{ text-decoration-line: underline; }
.more:hover .arw{ transform: translateX(3px); }

/* ---------- Hero ----------
   Standbild als Grund. Auf breiten Bildschirmen liegt darueber der Lichtfilm
   mit mix-blend-mode: screen -- Schwarz verschwindet, nur Licht bleibt.
   Ganz oben der Verlauf, der den Text lesbar haelt. Der Film reagiert nicht
   auf Scrollen und laeuft ohne Schnitt in Schleife. */
.hero{
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center;
  min-height: clamp(560px, 86vh, 800px);
  padding-block: clamp(72px, 9vw, 120px);
  background: var(--ink);
}
.hero-bild{
  position: absolute; inset: 0; z-index: -1;
  background-color: var(--ink);
}
/* Standbild als eigene Ebene: So kann es weich weichen, sobald das
   gerechnete Netz uebernimmt. */
.hero-bild::before{
  content: ""; position: absolute; inset: 0;
  background-image: url("/bilder/hero-1600.jpg?v=4d7d8bac");
  background-image: image-set(url("/bilder/hero-1600.webp?v=afd2964b") type("image/webp") 1x,
                              url("/bilder/hero-2560.webp?v=a4587b14") type("image/webp") 2x);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  transition: opacity 1.4s var(--ease);
}

/* ---------- Netz im Aufmacher: in WebGL gerechnet ---------- */
.hero-netz{
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; pointer-events: none;
  transition: opacity 1.6s var(--ease);
}
.hero-netz.sichtbar{ opacity: 1; }
@supports (mix-blend-mode: screen){ .hero-netz{ mix-blend-mode: screen; } }
/* Laeuft das gerechnete Netz, weicht das Standbild; ein weiches Leuchten
   bleibt als Tiefe stehen. Der Lichtfilm wird dann nicht gebraucht. */
.hero-3d .hero-bild{
  background-image: radial-gradient(ellipse 58% 70% at 70% 50%, rgba(28,58,92,.5), rgba(10,20,32,0) 72%);
}
.hero-3d .hero-bild::before{ opacity: 0; }
.hero-3d .hero-film{ display: none; }
.hero-film{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0; pointer-events: none;
  transition: opacity 1.8s var(--ease);
}
.hero-film.laeuft{ opacity: 1; }
@supports (mix-blend-mode: screen){ .hero-film{ mix-blend-mode: screen; } }
@supports not (mix-blend-mode: screen){ .hero-film{ display: none; } }
.hero-bild::after{
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(96deg, var(--ink) 0%, var(--ink) 30%, rgba(10,20,32,.84) 46%,
                    rgba(10,20,32,.5) 62%, rgba(10,20,32,.14) 82%, rgba(10,20,32,0) 100%),
    linear-gradient(180deg, rgba(10,20,32,0) 70%, var(--ink) 100%);
}
@media (max-width: 899px){
  .hero-bild::before{ background-image: url("/bilder/hero-1000.webp?v=df64b82e"); background-position: 64% center; }
  .hero-bild::after{ background: linear-gradient(180deg, rgba(10,20,32,.8) 0%, rgba(10,20,32,.93) 50%, var(--ink) 100%); }
  .hero-film{ display: none; }
}

.hero-inhalt{ display: grid; gap: 24px; max-width: 780px; }
.hero h1 .h1-zweit{ display: block; color: #8D9FB3; }
.hero .lede{ max-width: 54ch; }
.hero .actions{ margin-top: 8px; }
.hero-vertrauen{ list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.hero-vertrauen li{ display: flex; align-items: center; gap: 9px; font-size: .9375rem; color: var(--text-3); }
.hero-vertrauen li::before{
  content: ""; width: 16px; height: 16px; flex: none; background: var(--green);
  -webkit-mask: var(--haken) center / contain no-repeat;
  mask: var(--haken) center / contain no-repeat;
}
@media (max-width: 640px){
  .hero{ min-height: 0; }
  .hero-inhalt{ gap: 20px; }
  .hero-vertrauen{ flex-direction: column; gap: 8px; }
}

/* ---------- Seitenkopf der Unterseiten ----------
   Dasselbe Netz wie im Hero, zurueckgenommen und nur am rechten Rand. */
.page-head{
  position: relative; z-index: 2; isolation: isolate; overflow: hidden;
  padding-block: clamp(56px, 8vw, 104px) clamp(48px, 6vw, 80px);
  background: var(--ink);
  border-bottom: 1px solid var(--line);
}
.page-head::before{
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("/bilder/hero-1600.webp?v=afd2964b") right center / cover no-repeat;
  opacity: .55;
  -webkit-mask-image: linear-gradient(100deg, transparent 40%, #000 92%);
  mask-image: linear-gradient(100deg, transparent 40%, #000 92%);
}
@media (max-width: 899px){ .page-head::before{ opacity: .2; } }
.crumb{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 20px; }
.crumb a{ text-decoration: none; transition: color .2s var(--ease); }
.crumb a:hover{ color: var(--text); }
.crumb [aria-current="page"]{ color: var(--text-2); }
.page-head h1{ max-width: 22ch; }
.page-head .lede{ margin-top: 22px; max-width: 58ch; }
.page-head .actions{ margin-top: 32px; }

/* Kennzahlen: Zahl und Beschriftung, getrennt durch eine einzige Linie */
.facts{
  display: grid; gap: 24px 32px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin-top: clamp(40px, 5vw, 56px); padding-top: 28px;
  border-top: 1px solid var(--line);
}
.fact{ display: flex; flex-direction: column; gap: 6px; }
.fact .fv{
  font-size: clamp(1.625rem, 1.2rem + 1.1vw, 2.125rem); font-weight: 600;
  line-height: 1.05; letter-spacing: -.03em; color: var(--text);
}
.fact .fk{ font-size: .875rem; line-height: 1.4; color: var(--text-3); }

/* ---------- Ausgangslage: Probleme als Karten ---------- */
.claims{ display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.claim{
  display: grid; gap: 12px; align-content: start;
  padding: clamp(22px, 2.6vw, 30px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.claim .q{ font-size: 1.125rem; font-weight: 600; line-height: 1.35; letter-spacing: -.012em; color: var(--text); }
.claim .a{ font-size: .9375rem; color: var(--text-2); }

.closer{
  max-width: 46ch; margin-top: clamp(32px, 4vw, 48px);
  font-size: clamp(1.1875rem, 1.05rem + .6vw, 1.5rem); line-height: 1.45; letter-spacing: -.012em;
  color: var(--text-2);
}

/* ---------- Aufzaehlung mit Haken ---------- */
.specs{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.specs li{ display: flex; align-items: flex-start; gap: 12px; font-size: .9375rem; line-height: 1.5; color: var(--text-2); }
.specs li::before{
  content: ""; width: 16px; height: 16px; margin-top: 3px; flex: none;
  background: var(--text-3);
  -webkit-mask: var(--haken) center / contain no-repeat;
  mask: var(--haken) center / contain no-repeat;
}
.specs.neg li::before{ -webkit-mask-image: var(--strich); mask-image: var(--strich); }

/* ---------- Leistungen auf der Startseite ---------- */
.leistungen{ display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.leistung{
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(24px, 3vw, 32px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: border-color .2s var(--ease);
}
.leistung:hover{ border-color: var(--line-strong); }
.leistung > p:not(.anno){ font-size: .9375rem; color: var(--text-2); }
.leistung .specs{ margin-top: 4px; }
.leistung-fuss{
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 16px;
  margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line);
}
.preiszeile{ font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em; color: var(--text); }
.preiszeile small{ margin-left: 6px; font-size: .8125rem; font-weight: 500; letter-spacing: 0; color: var(--text-3); }
.zusatz{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px;
  margin-top: 16px; padding: 20px clamp(20px, 3vw, 32px);
  border: 1px solid var(--line); border-radius: var(--r-lg);
}
.zusatz p{ max-width: 72ch; font-size: .9375rem; color: var(--text-2); }

/* ---------- Derselbe Vorgang, zweimal ---------- */
.band-unter{ margin-top: clamp(56px, 7vw, 96px); }
.unter-kopf{ display: grid; gap: 10px; max-width: 44rem; margin-bottom: 28px; }
.unter-kopf p{ color: var(--text-2); }
.gegenueber{ display: grid; gap: 16px; }
@media (min-width: 880px){ .gegenueber{ grid-template-columns: 1fr 1fr; } }
.figur{
  margin: 0; display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.figur-kopf{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.figur-kopf .fn{ font-size: .6875rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); }
.figur-kopf .ft{ font-size: 1.0625rem; font-weight: 600; color: var(--text); }
.figur-kopf .fm{ margin-left: auto; font-size: .8125rem; color: var(--text-3); white-space: nowrap; }
.figur-sig{ border-color: rgba(111,178,236,.32); }
.figur-sig .figur-kopf .fm{ color: var(--blue); }
.tafel{ display: block; width: 100%; height: auto; padding: 12px 8px 18px; }
.tafel .tt{ font-family: var(--f-sans); font-size: 14px; font-weight: 600; fill: var(--text); }
.tafel .tk{ font-family: var(--f-sans); font-size: 12.5px; fill: var(--text-3); }
.tafel .tk-sig{ fill: var(--blue); }

/* ---------- Beweis: Beispiel-Dialog und Beispielrechnung ---------- */
.beweis{ display: grid; gap: clamp(28px, 3.5vw, 48px); }
@media (min-width: 1100px){ .beweis{ grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }
.beweis-zahlen{ display: grid; gap: 16px; }
.beweis-zahlen .facts{ margin-top: 0; }
.beweis-zahlen .hinweis{ margin-top: 4px; }
.beweis-zahlen .actions{ margin-top: 8px; }

.chat{ display: grid; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.chat-bar{ display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: .8125rem; font-weight: 500; color: var(--text-3); }
.chat-bar .dot{ width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--green); }
.chat-bar .tag{
  margin-left: auto; padding: 3px 9px; border: 1px solid var(--line-strong); border-radius: 999px;
  font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3);
}
.chat-body{ display: grid; gap: 14px; padding: 22px 18px; }
.msg{ max-width: 82%; padding: 12px 16px; border-radius: 12px; font-size: .9375rem; line-height: 1.55; }
.msg.me{ justify-self: end; border-bottom-right-radius: 4px; background: var(--surface-2); color: var(--text); font-weight: 500; }
.msg.bot{ justify-self: start; border-bottom-left-radius: 4px; background: rgba(111,178,236,.06); border: 1px solid var(--line); color: var(--text-2); }
.msg .src{
  display: block; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line);
  font-family: var(--f-mono); font-size: .75rem; line-height: 1.5; color: var(--blue); overflow-wrap: anywhere;
}
.chat-foot{
  padding: 12px 18px; border-top: 1px solid var(--line);
  font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3);
}
@media (max-width: 560px){ .msg{ max-width: 94%; } }

/* Tippanzeige, waehrend der Beispiel-Dialog ablaeuft */
.msg.tippt{ display: flex; align-items: center; gap: 6px; padding: 15px 16px; }
.msg.tippt i{ width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); animation: tippen 1.2s var(--ease) infinite; }
.msg.tippt i:nth-child(2){ animation-delay: .18s; }
.msg.tippt i:nth-child(3){ animation-delay: .36s; }
@keyframes tippen{ 0%, 60%, 100%{ opacity: .25; } 30%{ opacity: 1; } }
.js-anim .chat-schritt{ opacity: 0; transform: translateY(6px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.js-anim .chat-schritt.da{ opacity: 1; transform: none; }

/* ---------- Ablaeufe, Zeitplan, Schritte ---------- */
.flow-scroll{ overflow-x: auto; padding-bottom: 8px; }
/* Seitlich scrollbare Bereiche sind anfokussierbar (sonst kommt niemand
   mit der Tastatur an den ueberstehenden Inhalt). Der Rahmen zeigt das an. */
.flow-scroll:focus-visible, .tabelle-scroll:focus-visible{
  outline: 2px solid var(--accent); outline-offset: 4px;
}
.flow{ display: flex; align-items: stretch; min-width: 720px; }
.flow-node{
  flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.flow-node .fk{ font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.flow-node .ft{ font-size: .9375rem; font-weight: 600; line-height: 1.25; color: var(--text); }
.flow-node .fd{ font-size: .8125rem; line-height: 1.45; color: var(--text-3); }
.flow-node.auto{ border-color: rgba(111,178,236,.35); background: rgba(111,178,236,.06); }
.flow-node.auto .fk{ color: var(--blue); }
.flow-arrow{ flex: none; width: 32px; display: flex; align-items: center; justify-content: center; color: var(--text-3); }

.plan{ display: grid; border-top: 1px solid var(--line); }
.plan-row{ display: grid; gap: 6px 32px; align-items: baseline; padding-block: 22px; border-bottom: 1px solid var(--line); }
@media (min-width: 780px){ .plan-row{ grid-template-columns: 120px 240px minmax(0, 1fr); } }
.plan-row .pt{ font-size: .8125rem; font-weight: 600; color: var(--text-3); }
.plan-row .ph{ font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
.plan-row .pd{ font-size: .9375rem; color: var(--text-2); }

.steps{ display: grid; border-top: 1px solid var(--line); }
.step{ display: grid; gap: 8px 32px; align-items: baseline; padding-block: clamp(22px, 2.8vw, 32px); border-bottom: 1px solid var(--line); }
@media (min-width: 860px){ .step{ grid-template-columns: 64px 260px minmax(0, 1fr); } }
.step .num{ font-size: .9375rem; font-weight: 600; color: var(--text-3); }
.step h3{ font-size: clamp(1.125rem, 1rem + .4vw, 1.3125rem); }
.step p{ max-width: 58ch; font-size: .9375rem; color: var(--text-2); }
.step .meta{ display: block; margin-top: 10px; font-size: .8125rem; font-weight: 500; color: var(--text-3); }

/* ---------- Kacheln und Preise ---------- */
.tiles{ display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tile{
  display: flex; flex-direction: column; gap: 10px; padding: 24px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); text-decoration: none;
}
a.tile{ transition: border-color .2s var(--ease), background-color .2s var(--ease); }
a.tile:hover{ border-color: var(--line-strong); background: var(--surface-2); }
.tile .k{ font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.tile .h{ font-size: 1.0625rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--text); }
.tile .d{ font-size: .9375rem; line-height: 1.55; color: var(--text-2); }
.tiles.plain .tile{ background: transparent; }

.preise{ display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.preis{
  display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 3vw, 32px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
}
/* Die empfohlene Stufe traegt als einzige Karte die Akzentkante: Sie fuehrt
   zum naechsten Schritt. */
.preis.lead{ border-color: rgba(255,106,43,.45); }
.preis .pk{ font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.preis .pv{
  font-size: clamp(1.75rem, 1.35rem + 1.1vw, 2.25rem); font-weight: 600; line-height: 1;
  letter-spacing: -.03em; color: var(--text);
}
.preis .pv small{ margin-left: 4px; font-size: .875rem; font-weight: 500; letter-spacing: 0; color: var(--text-3); }
.preis .pd{ font-size: .9375rem; color: var(--text-2); }
.preis .specs{ margin-top: 6px; }
.preis .pf{ margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); font-size: .8125rem; line-height: 1.5; color: var(--text-3); }

.hinweis{
  max-width: 80ch; margin-top: 20px; padding: 2px 0 2px 16px;
  border-left: 2px solid var(--line-strong);
  font-size: .875rem; line-height: 1.6; color: var(--text-3);
}
.hinweis a{ color: var(--text); text-underline-offset: 3px; }

/* ---------- Reiter ---------- */
.tabs{ display: flex; flex-wrap: wrap; gap: 4px; width: fit-content; max-width: 100%; padding: 4px; border: 1px solid var(--line); border-radius: 12px; }
.tab{
  appearance: none; padding: 9px 16px; border: 0; border-radius: var(--r); background: none; cursor: pointer;
  font: inherit; font-size: .9375rem; font-weight: 500; color: var(--text-3);
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.tab:hover{ color: var(--text); }
.tab[aria-selected="true"]{ color: var(--text); background: var(--surface-2); }
.panel{ padding-top: clamp(28px, 3vw, 40px); }
.panel-lede{ max-width: 60ch; margin-bottom: 24px; font-size: 1.0625rem; color: var(--text-2); }
.panel-kopf{ display: grid; gap: clamp(22px, 3vw, 40px); align-items: start; margin-bottom: clamp(24px, 3vw, 36px); }
@media (min-width: 900px){ .panel-kopf{ grid-template-columns: minmax(0, 1fr) 340px; } }
.panel-kopf .panel-lede{ margin-bottom: 0; }

/* ---------- Fragen ---------- */
.faq{ max-width: 56rem; border-top: 1px solid var(--line); }
.faq details{ border-bottom: 1px solid var(--line); }
.faq summary{
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-block: 20px; list-style: none; cursor: pointer;
  font-size: clamp(1rem, .95rem + .3vw, 1.125rem); font-weight: 600; letter-spacing: -.01em; color: var(--text);
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary .pm{
  flex: none; display: grid; place-items: center; width: 28px; height: 28px;
  border: 1px solid var(--line-strong); border-radius: 50%;
  font-size: 1rem; font-weight: 400; line-height: 1; color: var(--text-3);
  transition: transform .25s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.faq summary:hover .pm{ border-color: rgba(148,178,209,.42); color: var(--text); }
.faq details[open] summary .pm{ transform: rotate(45deg); }
.faq .ans{ max-width: 68ch; padding: 0 52px 22px 0; color: var(--text-2); }

/* ---------- Abschluss-Aufruf ---------- */
.cta{
  display: grid; overflow: hidden;
  background: linear-gradient(180deg, var(--surface-2), var(--surface) 70%);
  border: 1px solid var(--line-strong); border-radius: var(--r-lg);
}
@media (min-width: 900px){ .cta{ grid-template-columns: 1.3fr 1fr; } }
.cta-main{ padding: clamp(28px, 4.5vw, 64px); }
.cta-main .anno{ margin-bottom: 14px; }
.cta-main h2{ margin-bottom: 16px; }
.cta-main p:not(.anno){ max-width: 46ch; margin-bottom: 28px; color: var(--text-2); }
.cta-side{
  display: flex; flex-direction: column; justify-content: center; gap: 22px;
  padding: clamp(28px, 4.5vw, 64px); border-top: 1px solid var(--line);
}
@media (min-width: 900px){ .cta-side{ border-top: 0; border-left: 1px solid var(--line); } }
.cline{ display: flex; flex-direction: column; gap: 4px; text-decoration: none; }
.cline .k{ font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.cline .v{ font-size: 1.0625rem; font-weight: 500; line-height: 1.45; color: var(--text); text-underline-offset: 4px; text-decoration-thickness: 1px; }
a.cline:hover .v{ text-decoration-line: underline; }

/* ---------- Fusszeile ---------- */
.foot{ position: relative; z-index: 2; padding-block: clamp(48px, 6vw, 72px) 32px; background: var(--ink-deep); border-top: 1px solid var(--line); }
.foot-top{ display: grid; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--line); }
@media (min-width: 900px){ .foot-top{ grid-template-columns: minmax(0, 1.2fr) minmax(0, 2.8fr); } }
.foot-marke{ display: grid; gap: 14px; align-content: start; }
.foot-marke p{ max-width: 36ch; font-size: .9375rem; color: var(--text-3); }
.foot-logo{ display: block; width: fit-content; }
.foot-logo img{ width: 240px; height: auto; }
.foot-cols{ display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.foot-col{ display: grid; gap: 10px; align-content: start; }
.foot-col .ct{ margin-bottom: 4px; font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.foot-col a{ width: fit-content; font-size: .9375rem; color: var(--text-2); text-decoration: none; transition: color .2s var(--ease); }
.foot-col a:hover{ color: var(--text); }
.foot-col .zeit{ margin-top: -6px; font-size: .8125rem; color: var(--text-3); }
.foot-in{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; padding-top: 24px; }
.foot .copy{ font-size: .8125rem; color: var(--text-3); }
.foot-links{ display: flex; flex-wrap: wrap; gap: 20px; }
.foot-links a{ font-size: .8125rem; color: var(--text-3); text-decoration: none; }
.foot-links a:hover{ color: var(--text); }

/* ---------- Bewegung ----------
   Eine einzige Einblendung beim ersten Sichtkontakt: kurz, leise, einmalig. */
.js-anim .reveal{ opacity: 0; transform: translateY(12px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js-anim .reveal.in{ opacity: 1; transform: none; }

/* ---------- Bewegung: Choreografie mit GSAP ----------
   Nur auf grossen Bildschirmen mit Zeigergeraet; dort uebernimmt GSAP die
   Einblendungen, deshalb wird die CSS-Fassung stillgelegt. */
.gsap-an .reveal{ opacity: 1; transform: none; transition: none; }
.gsap-an .hero-bild, .gsap-an .hero-inhalt{ will-change: transform; }
.gsap-an .tile, .gsap-an .preis, .gsap-an .beitrag{ transform-style: preserve-3d; }

/* Duenne Linie unter der Kopfzeile: wie weit die Seite gelesen ist.
   Ohne Skript bleibt sie bei Breite null und damit unsichtbar. */
.fortschritt{
  position: fixed; inset: 0 0 auto; z-index: 60; height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--accent));
  transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
}

/* ---------- Mobile Schnellleiste ----------
   Erscheint erst, wenn der Seitenkopf mit seinen eigenen Schaltflaechen aus
   dem Bild ist -- sonst stuenden zwei gleiche Aufrufe uebereinander. */
.mobil-cta{
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 58;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px;
  background: rgba(15,28,43,.9);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--line-strong); border-radius: 14px;
  box-shadow: 0 16px 32px -16px rgba(0,0,0,.7);
  transition: transform .35s var(--ease), opacity .35s var(--ease), visibility .35s;
}
.js-anim .mobil-cta:not(.sichtbar){ transform: translateY(calc(100% + 24px)); opacity: 0; visibility: hidden; }
@media (min-width: 1080px){ .mobil-cta{ display: none; } }
.mobil-cta a{
  display: flex; align-items: center; justify-content: center; min-height: 46px; border-radius: var(--r);
  font-size: .9375rem; font-weight: 600; color: var(--text); text-decoration: none;
}
.mobil-cta a:first-child{ background: var(--accent); color: #160A03; }
.mobil-cta a:last-child{ background: rgba(255,255,255,.05); }
@media (max-width: 1079px){ .foot{ padding-bottom: 104px; } }

/* ---------- KI-Rechner ---------- */
.rechner{ display: grid; gap: 16px; }
@media (min-width: 940px){ .rechner{ grid-template-columns: 1fr 1fr; align-items: start; } }
.rechner-eingabe, .rechner-ausgabe{
  display: grid; align-content: start; gap: 26px;
  padding: clamp(24px, 3.2vw, 40px);
  border: 1px solid var(--line); border-radius: var(--r-lg);
}
.rechner-ausgabe{ gap: 22px; background: var(--surface); }
/* Ergebnis bleibt beim Schieben der Regler im Blick */
@media (min-width: 940px){ .rechner-ausgabe{ position: sticky; top: 96px; } }

.feld{ display: grid; gap: 10px; }
.feld-kopf{ display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.feld label{ font-size: .9375rem; font-weight: 600; color: var(--text); }
.feld .wert{ font-size: .9375rem; font-weight: 600; color: var(--green); white-space: nowrap; }
.feld .hilf{ font-size: .8125rem; line-height: 1.5; color: var(--text-3); }
.feld select{
  appearance: none; width: 100%; min-height: 46px; padding: 0 40px 0 14px;
  background: var(--surface) var(--pfeil) no-repeat right 14px center / 12px;
  color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--r);
  font: inherit; font-size: .9375rem; cursor: pointer;
}
.feld select:focus-visible{ border-color: var(--accent); }

/* ---------- Kontaktformular ---------- */
.formular{ display: grid; gap: 20px; }
/* Neben dem hohen Formular oben anfangen statt in der Mitte zu schweben */
.cta-side.cta-side-oben{ justify-content: flex-start; }
.formular-reihe{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.formular .feld input, .formular .feld textarea{
  width: 100%; min-height: 46px; padding: 11px 14px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--r);
  font: inherit; font-size: 1rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.formular .feld textarea{ min-height: 150px; resize: vertical; line-height: 1.55; }
.formular .feld input::placeholder, .formular .feld textarea::placeholder{ color: var(--text-3); opacity: 1; }
.formular .feld input:hover, .formular .feld textarea:hover{ border-color: rgba(148,178,209,.42); }
.formular .feld input:focus-visible, .formular .feld textarea:focus-visible,
.formular .feld select:focus-visible{ outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,106,43,.18); }
.pflicht{ font-weight: 500; color: var(--text-3); }
.cta-main p.formular-hinweis{ max-width: none; margin: 0; font-size: .875rem; line-height: 1.6; color: var(--text-3); }
.formular-hinweis a{ color: var(--text); text-underline-offset: 3px; }
.formular .btn[disabled]{ opacity: .7; cursor: progress; }
/* Bot-Falle: aus dem Bild geschoben statt display:none, das erkennen manche Bots */
.formular-falle{ position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.formular-meldung{
  display: none; scroll-margin-top: 110px; padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--line-strong); border-left-width: 3px; border-radius: var(--r);
  font-size: .9375rem; line-height: 1.6; color: var(--text-2);
}
.formular-meldung b{ display: block; margin-bottom: 4px; color: var(--text); }
.formular-meldung a{ color: var(--text); text-underline-offset: 3px; }
.formular-meldung:focus{ outline: none; }
.formular-meldung:target, .formular-meldung.sichtbar{ display: block; }
.formular-ok{ border-left-color: var(--green); }
.formular-fehler{ border-left-color: rgba(255,106,43,.7); }
.formular-pruefen{ border-left-color: var(--blue); }
/* Nach dem Absenden bleibt nur die Bestaetigung stehen -- mit Skript ueber die
   Klasse, ohne Skript ueber die Sprungmarke aus der Weiterleitung. */
.formular.formular-fertig > :not(.formular-meldung),
.formular:has(#formular-gesendet:target) > :not(.formular-meldung){ display: none; }

input[type="range"]{ appearance: none; -webkit-appearance: none; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track{ height: 4px; border-radius: 999px; background: var(--line-strong); }
input[type="range"]::-moz-range-track{ height: 4px; border-radius: 999px; background: var(--line-strong); }
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px;
  border: 0; border-radius: 50%; background: var(--text);
  box-shadow: 0 0 0 4px rgba(255,255,255,.08), 0 2px 6px rgba(0,0,0,.4);
  transition: box-shadow .2s var(--ease);
}
input[type="range"]::-moz-range-thumb{ width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--text); box-shadow: 0 0 0 4px rgba(255,255,255,.08); }
input[type="range"]:hover::-webkit-slider-thumb{ box-shadow: 0 0 0 7px rgba(255,255,255,.1), 0 2px 6px rgba(0,0,0,.4); }
input[type="range"]:focus-visible{ outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb{ box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px var(--accent); }
input[type="range"]:focus-visible::-moz-range-thumb{ box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px var(--accent); }

.erg-haupt{ display: grid; gap: 6px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.erg-haupt .ek{ font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.erg-haupt .ev{
  font-size: clamp(2.5rem, 1.8rem + 2.4vw, 3.5rem); font-weight: 600; line-height: 1;
  letter-spacing: -.04em; color: var(--green);
}
.erg-haupt .en{ margin-top: 6px; font-size: .875rem; color: var(--text-3); }
.erg-zeilen{ display: grid; }
.erg-zeile{ display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.erg-zeile .zk{ font-size: .9375rem; color: var(--text-2); }
.erg-zeile .zv{ font-size: .9375rem; font-weight: 600; color: var(--text); white-space: nowrap; }
.erg-tipp{ display: grid; gap: 8px; padding: 18px 20px; border: 1px solid rgba(111,178,236,.28); border-radius: var(--r-lg); background: rgba(111,178,236,.07); }
.erg-tipp .tk{ font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.erg-tipp .tt{ font-size: 1.0625rem; font-weight: 600; color: var(--text); }
.erg-tipp .td{ font-size: .9375rem; line-height: 1.55; color: var(--text-2); }

/* ---------- Zusagen ---------- */
.garantien{ display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.garantie{
  display: flex; flex-direction: column; gap: 10px; padding: 26px 24px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.garantie .gn{ display: flex; align-items: center; gap: 8px; font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--green); }
.garantie .gn::before{
  content: ""; width: 16px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: var(--haken) center / contain no-repeat;
  mask: var(--haken) center / contain no-repeat;
}
.garantie .gt{ font-size: 1.125rem; font-weight: 600; line-height: 1.3; letter-spacing: -.012em; color: var(--text); }
.garantie .gd{ font-size: .9375rem; color: var(--text-2); }

/* ---------- Einsatzgebiet-Karte ---------- */
.karte{ display: block; width: 100%; height: auto; background: var(--ink); border: 1px solid var(--line); border-radius: var(--r-lg); }
.karte .kt{ font-family: var(--f-sans); font-size: 15px; fill: var(--text-3); }
.karte .kt-gross{ font-size: 20px; font-weight: 600; fill: var(--text); }
.karte .kt-fern{ font-size: 14px; fill: var(--text-3); }
.karte .kt-mass{ font-family: var(--f-mono); font-size: 13px; letter-spacing: .1em; fill: var(--text-3); }
.karten-legende{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding: 16px 4px 0; }
.legende-punkt{ display: flex; align-items: center; gap: 10px; font-size: .875rem; color: var(--text-2); }
.legende-punkt i{ width: 11px; height: 11px; flex: none; border-radius: 50%; }
.legende-punkt i.kern{ background: var(--accent); }
.legende-punkt i.fern{ border: 2px solid var(--blue); }
.legende-punkt i.ring{ border: 1.5px dashed var(--accent); }

/* ---------- Branchen-Zeichnungen ----------
   Die Klassen setzen bewusst NUR die Strichfarbe. Fuellungen stehen als
   Attribut am Element, weil eine CSS-Regel jedes fill-Attribut schlagen wuerde. */
.ill{ display: block; width: 100%; height: auto; background: var(--ink); border: 1px solid var(--line); border-radius: var(--r-lg); }
.ill .l-d{ stroke: var(--blue); stroke-width: 1.5; }
.ill .l-s{ stroke: var(--accent); stroke-width: 1.5; }
.ill .l-m{ stroke: var(--text-3); stroke-width: 1; }
.ill .l-x{ stroke: var(--text-3); stroke-width: 2; }
.ill .il{ font-family: var(--f-mono); font-size: 8px; letter-spacing: .12em; fill: var(--text-3); }
.ill .il-sig{ fill: var(--accent); }
.ill .il-mid{ text-anchor: middle; }

/* ---------- KI-Wissen (Beiträge) ---------- */
.beitrag-liste{ display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.beitrag{
  display: flex; flex-direction: column; gap: 12px; padding: 26px 24px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  text-decoration: none; transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.beitrag:hover{ border-color: var(--line-strong); background: var(--surface-2); }
.b-kopf{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.b-kat{ font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.b-meta{ margin-left: auto; font-size: .8125rem; color: var(--text-3); white-space: nowrap; }
.b-titel{ font-size: 1.1875rem; font-weight: 600; line-height: 1.3; letter-spacing: -.015em; color: var(--text); text-wrap: balance; }
.b-text{ flex: 1; font-size: .9375rem; color: var(--text-2); }
.b-mehr{ display: inline-flex; align-items: center; gap: 8px; font-size: .9375rem; font-weight: 600; color: var(--text); }
.b-mehr .arw{ transition: transform .2s var(--ease); }
.beitrag:hover .b-mehr .arw{ transform: translateX(3px); }

.artikel-meta{
  display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 24px; padding-top: 16px;
  border-top: 1px solid var(--line); font-size: .875rem; color: var(--text-3);
}
.artikel{ max-width: 68ch; font-size: 1.125rem; line-height: 1.75; color: var(--text-2); }
.artikel > * + *{ margin-top: 1.1em; }
.artikel h2{ margin-top: 2.2em; font-size: clamp(1.4rem, 1.15rem + 1vw, 1.875rem); }
.artikel h3{ margin-top: 1.8em; font-size: clamp(1.15rem, 1.05rem + .4vw, 1.375rem); }
.artikel a{ color: var(--text); text-decoration: underline; text-decoration-color: rgba(111,178,236,.6); text-underline-offset: 3px; }
.artikel a:hover{ text-decoration-color: currentColor; }
.artikel ul{ list-style: none; margin-left: 0; padding: 0; display: grid; gap: .6em; }
.artikel li{ display: flex; align-items: baseline; gap: 14px; }

/* Echtes Beitragsbild auf KI-Wissen-Seiten. */
.beitrag-bild{ margin: 0 0 .4em; }
.beitrag-bild img{ width: 100%; height: auto; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08); }
.beitrag-bild figcaption{ margin-top: .5em; font-size: .85rem; color: #8FA6B8; }
.artikel li::before{ content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--text-3); transform: translateY(-3px); }
.artikel blockquote{ margin: 1.8em 0; padding: 4px 0 4px 22px; border-left: 2px solid var(--line-strong); font-size: 1.1875rem; line-height: 1.6; color: var(--text); }
.artikel blockquote p{ margin: 0; }
.artikel code{ padding: 2px 6px; border-radius: 5px; background: var(--surface-2); font-family: var(--f-mono); font-size: .88em; color: var(--text); }

.nachbarn{ display: grid; gap: 16px; }
@media (min-width: 720px){ .nachbarn{ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }
.nachbar{
  display: flex; flex-direction: column; gap: 8px; padding: 22px 24px;
  border: 1px solid var(--line); border-radius: var(--r-lg); text-decoration: none;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.nachbar:hover{ border-color: var(--line-strong); background: var(--surface); }
.nachbar-rechts{ text-align: right; }
.nk{ font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.nt{ font-size: 1.0625rem; font-weight: 600; line-height: 1.3; color: var(--text); }

/* ---------- Vergleichstabelle ---------- */
.tabelle-scroll{ overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); }
.vergleich{ width: 100%; min-width: 660px; border-collapse: collapse; font-size: .9375rem; }
.vergleich caption{ caption-side: top; padding: 14px 18px; border-bottom: 1px solid var(--line); text-align: left; }
.vergleich th, .vergleich td{ padding: 13px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.vergleich thead th{ position: sticky; top: 0; background: var(--surface); font-weight: 600; color: var(--text); }
.vergleich tbody th{ width: 34%; font-weight: 500; color: var(--text-2); }
.vergleich td{ color: var(--text-3); }
.vergleich td.wert{ font-size: 1.0625rem; font-weight: 600; color: var(--text); }
.vergleich td.ja{ color: var(--green); }
.vergleich td.nein{ color: var(--text-3); }
.vergleich .hervor{ background: rgba(111,178,236,.05); }
.vergleich thead th.hervor{ background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--blue); }
.vergleich tbody tr:last-child th, .vergleich tbody tr:last-child td{ border-bottom: 0; }

/* ---------- Sprungmarke fuer die Tastaturbedienung ---------- */
.skip{
  position: absolute; top: -64px; left: 12px; z-index: 200;
  padding: 10px 16px; border-radius: var(--r);
  background: var(--accent); color: #160A03;
  font-size: .9375rem; font-weight: 600; text-decoration: none;
  transition: top .2s var(--ease);
}
.skip:focus{ top: 12px; }

/* ---------- Kenntnisse ---------- */
.kenntnisse{ display: grid; border-top: 1px solid var(--line); }
.kenntnis{ display: grid; gap: 12px 40px; align-items: start; padding-block: 22px; border-bottom: 1px solid var(--line); }
@media (min-width: 820px){ .kenntnis{ grid-template-columns: 260px minmax(0, 1fr); } }
.kenntnis .kb{ font-size: 1.0625rem; font-weight: 600; color: var(--text); }
.kenntnis .kb small{ display: block; margin-top: 4px; font-size: .8125rem; font-weight: 400; color: var(--text-3); }
.marken-liste{ display: flex; flex-wrap: wrap; gap: 8px; }
.marken-liste span{
  padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 999px;
  font-size: .875rem; line-height: 1; color: var(--text-2); white-space: nowrap;
}
.marken-liste span.tragend{ border-color: rgba(111,178,236,.5); background: rgba(111,178,236,.08); color: var(--text); }

/* ---------- Nachweis (Zertifikat) ---------- */
.nachweis{
  display: grid; gap: clamp(22px, 3vw, 44px); align-items: center;
  margin-top: clamp(28px, 3.6vw, 44px); padding: clamp(18px, 3vw, 36px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
}
@media (min-width: 820px){ .nachweis{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.nachweis-bild{ display: block; border-radius: var(--r-lg); }
.nachweis-bild img{ display: block; width: 100%; height: auto; transition: transform .3s var(--ease); }
.nachweis-bild:hover img{ transform: translateY(-3px); }
.nachweis-text{ display: grid; gap: 16px; justify-items: start; }
.nachweis-text h3{ font-size: clamp(1.2rem, 1.05rem + .5vw, 1.5rem); line-height: 1.3; }
.nachweis-text > p:not(.anno){ max-width: 52ch; color: var(--text-2); }

/* ---------- Zwei Wege: vor Ort oder aus der Ferne ---------- */
.wege{ display: grid; gap: 16px; }
@media (min-width: 860px){ .wege{ grid-template-columns: 1fr 1fr; } }
.weg{
  display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 3vw, 36px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.weg-fern{ background: transparent; }
.weg .wk{ display: flex; align-items: center; gap: 10px; font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.weg .wk::before{ content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--blue); }
.weg-fern .wk::before{ background: var(--green); }
.weg h3{ font-size: clamp(1.2rem, 1.05rem + .5vw, 1.5rem); }
.weg > p{ font-size: .9375rem; color: var(--text-2); }
.weg .specs{ margin-top: auto; }

/* ---------- Portraet ---------- */
.person{ display: grid; gap: clamp(28px, 3.4vw, 56px); align-items: start; margin-bottom: clamp(28px, 3.6vw, 44px); }
@media (min-width: 860px){ .person{ grid-template-columns: 400px minmax(0, 1fr); } }
.portraet{
  position: relative; margin: 0; overflow: hidden; padding: 20px 20px 0;
  background: radial-gradient(ellipse 70% 55% at 50% 40%, rgba(111,178,236,.14), transparent 70%), var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
}
.portraet img{ position: relative; width: 100%; height: auto; }
.portraet figcaption{
  position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  margin: 0 -20px; padding: 14px 20px; border-top: 1px solid var(--line);
  background: var(--surface); font-size: .8125rem; color: var(--text-3);
}
.portraet figcaption b{ color: var(--text); }
.cta-side .portraet-klein{ display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.portraet-klein img{
  width: 72px; height: 72px; flex: none; object-fit: cover; object-position: 50% 22%;
  border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface-2);
}
.portraet-klein span{ font-size: .875rem; line-height: 1.5; color: var(--text-3); }
.portraet-klein span b{ display: block; color: var(--text); }

/* ---------- Vorstellung auf der Startseite ---------- */
.vorstellung{ display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (min-width: 860px){ .vorstellung{ grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.vorstellung .bild{
  margin: 0; overflow: hidden; padding: 24px 24px 0;
  background: radial-gradient(ellipse 75% 60% at 50% 40%, rgba(111,178,236,.16), transparent 72%), var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
}
.vorstellung .bild img{ width: 100%; height: auto; }
.vorstellung .anno{ margin-bottom: 14px; }
.vorstellung h2{ margin-bottom: 18px; }
.vorstellung .text{ max-width: 56ch; color: var(--text-2); }
.vorstellung .zahlen{
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px;
  margin: 28px 0; padding-top: 24px; border-top: 1px solid var(--line);
}
@media (min-width: 1100px){ .vorstellung .zahlen{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vorstellung .zahlen span{ font-size: .8125rem; line-height: 1.4; color: var(--text-3); }
.vorstellung .zahlen b{ display: block; margin-bottom: 4px; font-size: 1.75rem; font-weight: 600; line-height: 1.1; letter-spacing: -.03em; }

/* ---------- Blocksatz ----------
   Nur fuer lange, zusammenhaengende Texte in breiter Spalte: Beiträge und
   Fliesstextseiten. Karten, Listen und schmale Spalten bleiben linksbuendig,
   sonst reisst der Blocksatz Loecher zwischen die Woerter. */
@media (min-width: 900px){
  .artikel p, .person .prose p{
    text-align: justify; text-justify: inter-word;
    -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 6 3 3;
  }
}

/* ---------- Druckausgabe: jemand druckt die Preisseite aus ---------- */
@media print{
  :root{ color-scheme: light; }
  body{ background: #fff; color: #111; font-size: 11pt; }
  .nav, .mobile-menu, .mobil-cta, .skip, .hero-bild, .page-head::before{ display: none !important; }
  .sheet, .hero, .page-head, .foot{ background: #fff !important; }
  h1, h2, h3, b, strong, em{ color: #000 !important; }
  .band{ padding-block: 14pt; }
  .tile, .preis, .garantie, .beitrag, .cta, .claim, .leistung, .chat, .figur{
    background: #fff !important; border: 1px solid #bbb; break-inside: avoid;
  }
  .vergleich td.ja{ color: #0a6b52; }
  a{ color: #000; text-decoration: underline; }
  /* Adressen ausschreiben, damit ein Ausdruck fuer sich steht */
  .artikel a[href^="/"]::after, .prose a[href^="/"]::after{
    content: " (itservice-beck.de" attr(href) ")"; font-size: .85em; color: #555;
  }
  .reveal{ opacity: 1 !important; transform: none !important; }
}

/* ---------- Reduzierte Bewegung ----------
   Steht zuletzt, damit es jede Bewegung darueber sicher aufhebt. */
/* ---------- Feinjustierungen ----------
   Fruehere style="..."-Angaben aus dem Markup. Im Stylesheet, damit die
   Sicherheitsrichtlinie eingebettete Stile verbieten kann und Abstaende
   aus einer Quelle kommen. */
.lede-eng{ margin-top: 20px; max-width: 52ch; }
.figur-flach{ margin: 0; }
.anno-unter{ padding-top: 10px; }
.link-blau{ color: var(--blue); }
.leise{ color: var(--text-3); }
.cline-fein{ font-size: .92rem; font-weight: 500; color: var(--text-3); }
.volle-zeile{ grid-column: 1 / -1; }
.dicht-oben{ margin-top: 1px; }
.eng-58{ max-width: 58ch; }
.eng-60{ max-width: 60ch; }
.eng-62{ max-width: 62ch; }
.eng-64{ max-width: 64ch; }
.abstand-oben{ margin-top: 28px; }
.abstand-weit{ margin-top: 30px; }
.ohne-einzug{ margin-left: 0; }
.nach-rechts{ margin-left: auto; }

/* ---------- Druck ----------
   AGB, Datenschutz und Preisliste landen regelmaessig auf Papier. Dort
   braucht niemand Menue, Schnellleiste oder dunklen Grund. */
@media print{
  .nav, .mobile-menu, .mobil-cta, .fortschritt, .skip, .cta{ display: none !important; }
  body, .sheet, .page-head, .band, .foot{ background: #fff !important; color: #111 !important; }
  .page-head{ border-bottom: 1px solid #bbb; }
  h1, h2, h3, b, .prose, .fact .fv{ color: #000 !important; }
  p, li, td, th, .lede, .faq .ans, .specs li{ color: #222 !important; }
  .crumb, .anno{ color: #555 !important; }
  a{ color: #000 !important; }
  .prose a[href^="https://"]::after{ content: " (" attr(href) ")"; font-size: .85em; word-break: break-all; }
  .foot-cols, .foot-marke{ display: none !important; }
  .band{ padding-block: 18px !important; break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce){
  .js-anim .reveal, .js-anim .chat-schritt{ opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after{
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .msg.tippt i{ animation: none; opacity: .6; }
  .hero-film{ display: none !important; }
}