/*--------------------------------------------------------------
# ARKANT – CI-Override (lädt als letztes Stylesheet)
# Template (NEXIN) bleibt unangetastet; alle CI-Anpassungen hier.
# CI: Urbanist · Schwarz #000000 · Grau #9d9d9c · Weiß
# Highlight/Akzent: helles Neon-Orange #FF8C00 (ersetzt das ursprüngliche Beige)
--------------------------------------------------------------*/

/* Urbanist (Variable Font, lokal — kein Google-CDN, DSGVO) */
@font-face {
  font-family: "Urbanist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/urbanist/urbanist-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: "Urbanist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/urbanist/urbanist-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;
}

/* Marcellus (Original-Display-Serif des Themes, lokal) — nur für die Hero-Riesenwörter */
@font-face {
  font-family: "Marcellus";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/marcellus/marcellus-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: "Marcellus";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/marcellus/marcellus-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;
}

:root {
  --nexin-font: "Urbanist", sans-serif;
  --nexin-font-two: "Urbanist", sans-serif;
  /* Schriftgrau. Das CI-Grau #9d9d9c ist eine Flaechenfarbe und als
     Schrift auf Weiss nicht lesbar (Kontrast 2,7 statt 4,5). Dieser Token
     wird in der Vorlage 47-mal fuer Schrift und 11-mal fuer Flaechen
     benutzt, deshalb steht er jetzt auf einem dunklen Ton; die elf
     Flaechen holen sich ihr helles Grau weiter unten zurueck.
     #3f3f3e auf Weiss: 10,3. Auf dem hellen Grund #f8f8f8: 9,6. */
  --nexin-gray: #3f3f3e;
  --nexin-gray-rgb: 63, 63, 62;
  /* Das urspruengliche CI-Grau, weiterhin fuer Flaechen und Linien. */
  --nexin-flaeche-grau: #9d9d9c;
  /* Orange als SCHRIFT auf hellem Grund. Das Marken-Orange kommt dort
     auf 2,2 bis 2,3, kleiner Text ist damit kaum zu lesen. Derselbe
     Farbton, nur dunkler: 5,3 auf Weiss, 5,0 auf #f8f8f8. Flaechen,
     Rahmen und grosse Schauschrift behalten das helle Orange. */
  --nexin-base-text: #a85500;
  --nexin-base: #FF8C00;
  --nexin-base-rgb: 255, 140, 0;
  --nexin-black: #000000;
  --nexin-black-rgb: 0, 0, 0;
}

/* Text-Markierung in der Markenfarbe statt Browser-Blau */
::selection {
  background-color: var(--nexin-base);
  color: var(--nexin-black);
}
::-moz-selection {
  background-color: var(--nexin-base);
  color: var(--nexin-black);
}

/* Sichtbarer Fokus fuer Tastaturbedienung. Vorher gab es nur den
   Browser-Standard, der auf dunklen Flaechen kaum zu sehen ist. Bewusst
   :focus-visible, damit ein Mausklick keinen Ring hinterlaesst.

   Das !important ist hier bewusst gesetzt: Mehrere Template-Dateien nehmen
   Formularfeldern per "outline: none" mit hoeherer Spezifitaet den Umriss
   (z. B. module-css/contact.css). Ein Fokus, den man nicht sieht, ist ein
   Defekt, den keine Gestaltungsregel ueberstimmen darf. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--nexin-base) !important;
  outline-offset: 3px !important;
  border-radius: 2px;
}
/* Auf schwarzen Flaechen braucht der Ring eine helle Trennung, sonst
   verschwimmt Orange mit dem Untergrund. */
.about-one a:focus-visible,
.laufband a:focus-visible,
.site-footer__top a:focus-visible,
.video-one a:focus-visible {
  /* Muss ebenfalls !important sein, sonst gewinnt die Grundregel darueber. */
  outline-color: var(--nexin-white) !important;
}

/*--------------------------------------------------------------
# Kundenreferenz (eine echte Referenz, siehe Referenz.jsx)
--------------------------------------------------------------*/
.arkant-referenz {
  padding: 60px 0;
}
.arkant-referenz__karte {
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 20px;
  padding: 40px;
}
.arkant-referenz__kopf {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-bottom: 20px;
  margin-bottom: 28px;
}
.arkant-referenz__kunde {
  font-size: clamp(24px, 3vw, 34px);
  margin: 0 0 6px;
}
.arkant-referenz__meta {
  margin: 0;
  color: rgba(0, 0, 0, 0.6);
  font-size: 16px;
}
.arkant-referenz__spalten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 32px;
}
.arkant-referenz__spalten h3 {
  font-size: 18px;
  margin: 0 0 8px;
}
.arkant-referenz__spalten p {
  margin: 0;
}
/* Die Zahl ist der Beweis. Sie bekommt deshalb die groesste Flaeche. */
.arkant-referenz__zahlen {
  background: var(--nexin-black);
  border-radius: 14px;
  padding: 28px 32px;
  margin-bottom: 32px;
}
.arkant-referenz__messgroesse {
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  margin: 0 0 14px;
}
.arkant-referenz__vergleich {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.arkant-referenz__wert {
  display: flex;
  flex-direction: column;
}
.arkant-referenz__label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}
.arkant-referenz__zahl {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 600;
  line-height: 1.1;
  color: var(--nexin-white);
}
.arkant-referenz__wert--vorher .arkant-referenz__zahl {
  color: rgba(255, 255, 255, 0.5);
}
.arkant-referenz__pfeil {
  font-size: 28px;
  color: var(--nexin-base);
}
.arkant-referenz__stimme {
  margin: 0 0 24px;
  border-left: 3px solid var(--nexin-base);
  padding-left: 22px;
}
.arkant-referenz__stimme blockquote {
  margin: 0 0 10px;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.45;
}
.arkant-referenz__stimme figcaption {
  color: rgba(0, 0, 0, 0.6);
  font-size: 15px;
}
.arkant-referenz__rueckfragen {
  margin: 0;
  padding: 16px 20px;
  background: rgba(255, 140, 0, 0.1);
  border-radius: 10px;
  font-weight: 500;
}
@media (max-width: 767px) {
  .arkant-referenz__karte {
    padding: 26px 22px;
  }
  .arkant-referenz__spalten {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .arkant-referenz__zahlen {
    padding: 22px;
  }
}

/* Bild der Wissens-Karten. Es hat jetzt feste Masse im Markup (gegen
   Layout-Spruenge), das Template gibt hier aber KEINE Hoehe vor. Ohne die
   folgende Regel wuerde das height-Attribut als feste Hoehe wirken und das
   Bild auf 1200px strecken. Verhaeltnis und Zuschnitt gehoeren ins CSS. */
.blog-one__img img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}

/* Feldbeschriftungen sind jetzt <label> statt <h4>: display sicherstellen,
   damit die Template-Optik unveraendert bleibt. */
label.contact-one__input-title {
  display: block;
  cursor: pointer;
}

/* CI-Typo: SemiBold für Headlines, Regular für Text (Light 300 verfügbar) */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
}

/* Finales Logo: SVG-Wortmarke der Grafikerin (Header dunkel auf hell,
   Mobile-Nav-Overlay hell auf dunkel via eigener Datei) */
.arkant-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
/* Logo mit dem Zusatz "Digital Architekten" darunter, Seitenverhaeltnis
   2,3. Die reine Wortmarke lag kurzzeitig hier (Verhaeltnis 3,8, deshalb
   geringere Hoehe) und ist auf Wunsch wieder zurueckgenommen. Die Dateien
   arkant-logo-wortmarke.svg und arkant-logo-light-wortmarke.svg bleiben
   liegen, falls die Entscheidung noch einmal kippt. */
.arkant-logo img {
  display: block;
  height: 52px;
  width: auto;
}
.mobile-nav__content .arkant-logo img {
  height: 46px;
}

/* Marken-Logo im hellen Footer-Unterteil */
.site-footer__brand {
  display: inline-block;
  padding-top: 58px;
}
.site-footer__brand img {
  display: block;
  height: 56px;
  width: auto;
}

/* Diagonale Streifen (CI-Beige) als dezentes Marken-Element im dunklen Footer-Kopf */
.site-footer__top {
  overflow: hidden;
}
.site-footer__top > .container {
  position: relative;
  z-index: 1;
}
.site-footer__stripes {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: auto;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 767px) {
  .site-footer__stripes {
    display: none;
  }
}

/* Hero-Hintergrund exakt wie Original: subtiles Raster (Original-Opacities NICHT
   überschreiben), nur den PNG-Grünstich entfärben. */
.banner-one__one-shape-bg,
.banner-one__shape-one {
  filter: grayscale(1);
}
/* Der weiche Glow (shape-two) ist im Template neon-grün → auf Neon-Orange umfärben */
.banner-one__shape-two {
  background: rgba(255, 140, 0, 0.32) !important;
}

/* Werkzeug-Icon füllt den 140×140-Kasten (unser PNG ist 320px → sonst quillt es über) */
.banner-one__content-two-single-two img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* Hero-Titel wie im NEXIN-Original: „Software" oben links, „nach Maß." auf EINER Zeile
   RECHTS neben Pill + Icon (wie „Solution"). Unsere Wörter sind länger/breiter als die
   Demo-Wörter („Digital"/„Solution") — bei 190px passt „Software" (753px) nicht mehr in
   den Platz links der absolut (right:0) verankerten Textbox und müsste den Anfangs-
   buchstaben abschneiden. Darum die Schriftgröße so gewählt (siehe font-size-Stufen
   weiter unten), dass die Wörter voll lesbar in den Platz passen. „nach Maß." steht dann
   per nowrap neben der Pill.
   content-one bekommt nur einen kleinen Links-Kick (Rand-Anschnitt wie im Original, ohne
   den Buchstaben zu killen); content-two bleibt auf 0 (Pill+Icon links, kollisionsfrei
   zum Bewertungs-Chip). AOS-Transform ist unzuverlässig → beide deterministisch fixieren
   (Selektor ohne „.aos-animate"; Opacity bleibt AOS). */
@media (min-width: 1320px) {
  .banner-one__content-two {
    flex-wrap: nowrap;
    column-gap: 40px;
  }
  .banner-one__content-two-list { flex-shrink: 0; }
  .banner-one__content-two .banner-one__big-title-two { flex-shrink: 0; }
}
/* 992–1319: daneben liefe „nach Maß." in den Bewertungs-Chip → per flex-basis:100% den
   Titel erzwungen in eine eigene Zeile UNTER die Pill (bei der kleineren Schrift würde er
   sonst noch daneben passen und den Chip touchieren). row-gap zu = enger Stapel. */
@media (min-width: 992px) and (max-width: 1319px) {
  .banner-one__content-two {
    column-gap: 24px;
    row-gap: 4px;
  }
  .banner-one__content-two .banner-one__big-title-two { flex-basis: 100%; }
}
@media (min-width: 992px) {
  .banner-one .banner-one__inner .banner-one__content-one {
    transform: translateX(-18px);
  }
  .banner-one .banner-one__inner .banner-one__content-two {
    transform: translateX(0);
  }
}
/* Falls „nach Maß." doch mal rechts rausläuft: im Hero abschneiden statt scrollen. */
.banner-one { overflow-x: clip; }

/* Testimonial ohne Trustpilot/Sterne: Platzhalter-Hinweis statt Bewertungszeile */
.testimonial-one__platzhalter-note {
  color: var(--nexin-gray);
  font-weight: 600;
  font-size: 14px;
}

/* Aktions-Banner: der Hintergrund ist jetzt ein echtes (helles) Bürofoto statt
   eines dunklen Motivs. Weiße Schrift braucht darauf einen Abdunkler — sonst
   ist die Überschrift nicht mehr lesbar. */
.video-one__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.62) 55%, rgba(0, 0, 0, 0.45) 100%);
}

/* Team-Karten: Social-Icons entfernt → das dunkle Hover-Overlay würde nur eine
   leere schwarze Fläche zeigen. Overlay deaktivieren, dezenter Bild-Zoom bleibt. */
.team-one__img::before {
  display: none !important;
}

/* Echte Team-Fotos haben unterschiedliche Seitenverhältnisse (Tobi Querformat,
   Rest Hochkant) → einheitlicher 3:4-Zuschnitt, Gesichter im oberen Drittel halten,
   damit alle vier Karten gleich hoch sind. */
.team-one__img img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 22%;
}


/* Explore-Badge als SVG-textPath (ersetzt circleType): Text füllt den Kreis
   exakt gleichmäßig über textLength. Nur noch Typo/Farbe stylen. */
.arkant-badge-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.arkant-badge-svg text {
  font-family: var(--nexin-font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  fill: var(--nexin-white);
}

/* Antwort-Chip: rechte Spalte höher setzen, damit Absatz + Chip + Caption ÜBER der
   Oberkante des Riesenworts bleiben (sonst läuft die Caption durch die Buchstaben).
   Caption kompakt (schmale Spaltenbreite, Umbruch erlaubt). */
@media (min-width: 992px) {
  .banner-one__details-box {
    top: 30px !important;
  }
}
.banner-one__review-text p {
  max-width: 210px;
  line-height: 1.3;
}

/* Template-Orange (#FF6633) → CI-Beige (A2: keine fremden Akzentfarben) */
.section-title__tagline-shape::before {
  border-color: var(--nexin-base);
}

/* Hero-Riesenwörter in der Original-Display-Serif des Themes (Marcellus), Weight 400.
   Der Rest der Headlines bleibt Urbanist (CI). */
.banner-one__big-title-one,
.banner-one__big-title-two {
  font-family: "Marcellus", serif;
  font-weight: 400;
}

/* „Digitale"/„Lösungen." sind ~13 % länger als die Demo-Wörter („Digital"/„Solution") →
   Titel proportional zu den Template-Stufen (220/170/130) verkleinern, damit sie
   groß bleiben, aber nicht mit der absolut positionierten Textbox (left:700px) kollidieren */
/* „Software" (753px @190px) muss LINKS der right:0-verankerten Textbox passen. Der Platz
   links davon ist ~700px (≥1320) bzw. enger bei kleineren Breiten. Schrift so gewählt,
   dass „Software" voll lesbar reinpasst UND „nach Maß." neben die Pill passt. */
@media (min-width: 1320px) {
  .banner-one__big-title-one,
  .banner-one__big-title-two {
    font-size: 165px;
    line-height: 1em;
    white-space: nowrap;
  }
}
@media (min-width: 1200px) and (max-width: 1319px) {
  .banner-one__big-title-one,
  .banner-one__big-title-two {
    font-size: 125px;
    line-height: 1em;
    white-space: nowrap;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .banner-one__big-title-one,
  .banner-one__big-title-two {
    font-size: 105px;
    line-height: 1em;
  }
}

/* Badge-Zeile ersetzt die Kundenlogo-Leiste (keine Fake-Logos, A4) */

/* video-one → Aktions-Banner (ruhige Fläche statt Video) */
.video-one__aktion {
  text-align: center;
  position: relative;
  z-index: 2;
}
.video-one__aktion h2 {
  color: var(--nexin-white);
  font-size: clamp(32px, 5vw, 56px);
  margin-bottom: 18px;
}
.video-one__aktion p {
  color: var(--nexin-white);
  font-weight: 300;
  font-size: 18px;
  max-width: 640px;
  margin: 0 auto 32px;
}
.video-one__aktion .thm-btn {
  background-color: var(--nexin-base);
  color: var(--nexin-black);
}

/* NEU: Preis-Sektion (im Template-Look, Sektion nach why-choose-one) */
.preis-one {
  padding: 120px 0;
  background-color: var(--nexin-primary);
}
.preis-one__table {
  width: 100%;
  margin-top: 50px;
  border-collapse: collapse;
  background-color: var(--nexin-white);
}
.preis-one__table th,
.preis-one__table td {
  border: 1px solid var(--nexin-bdr-color);
  padding: 22px 28px;
  text-align: left;
  font-size: 17px;
  vertical-align: top;
}
.preis-one__table th {
  font-weight: 600;
  font-size: 19px;
  color: var(--nexin-black);
}
.preis-one__table .preis-one__price {
  font-weight: 600;
  font-size: 22px;
  color: var(--nexin-black);
  white-space: nowrap;
}
.preis-one__note {
  margin-top: 28px;
  font-size: 16px;
  color: var(--nexin-gray);
}
.preis-one__table a {
  color: var(--nexin-black);
  font-weight: 600;
  text-decoration: underline;
}
@media (max-width: 767px) {
  .preis-one { padding: 80px 0; }
  .preis-one__table th, .preis-one__table td { padding: 14px 14px; font-size: 15px; }
}

/* NEU: Garantien-Block (gestalterisch an counter-one angelehnt) */
.garantien-one {
  padding: 100px 0;
  background-color: var(--nexin-black);
}
.garantien-one__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin: 0;
  padding: 0;
}
.garantien-one__single {
  border-left: 2px solid var(--nexin-base);
  padding-left: 24px;
}
.garantien-one__paragraf {
  display: block;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.1em;
  color: var(--nexin-base);
  margin-bottom: 12px;
}
.garantien-one__single h3 {
  color: var(--nexin-white);
  font-size: 22px;
  margin-bottom: 10px;
}
.garantien-one__single p {
  /* Auf schwarzem Grund. --nexin-gray ist seit dem Kontrast-Durchgang ein
     dunkler Schriftton fuer helle Flaechen und waere hier unlesbar
     (gemessen 1,99). Hier deshalb ein heller Ton: 12,6 auf Schwarz. */
  color: rgba(255, 255, 255, .82);
  font-weight: 300;
  font-size: 16px;
  margin: 0;
}
@media (max-width: 991px) {
  .garantien-one__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .garantien-one__list { grid-template-columns: 1fr; }
}

/* Innenseiten-Kopf (Template hat keine Innenseiten → eigener Kopf im Template-Look) */
/* Abstaende der Seitenabschnitte, einmal zusammengezogen.
   Vorher: Seitenkopf 100/70, danach ein Abschnitt mit 90 oben - also 160
   Pixel Leere zwischen Ueberschrift und erstem Inhalt, und das auf jeder
   Unterseite. Auf /software addierten sich neun solcher Abschnitte zu
   einer Seite von 9048 Pixeln. */
.arkant-page-header {
  padding: 88px 0 48px;
  background-color: var(--nexin-primary);
}
.arkant-page-header__intro {
  max-width: 760px;
  margin-top: 26px;
  font-size: 18px;
  font-weight: 300;
  color: var(--nexin-black);
  line-height: 1.7;
}
.arkant-page-header .thm-btn { margin-top: 30px; }
.arkant-frist-badge {
  display: inline-block;
  background-color: var(--nexin-base);
  color: var(--nexin-black);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.04em;
  padding: 8px 18px;
  border-radius: 30px;
  margin-bottom: 22px;
}

/* Fließtext-Sektionen der Unterseiten */
.arkant-prose {
  padding: 72px 0;
}
/* Zwei Prosa-Abschnitte hintereinander ergaben 90 unten plus 90 oben, also
   180 Pixel Luft zwischen zwei Absaetzen. Auf /software stehen drei davon
   in Folge. Der jeweils naechste bekommt deshalb keinen eigenen Deckel;
   der Abstand des vorigen reicht. Ausnahme: Wechselt die Hintergrundfarbe,
   braucht der Block seinen eigenen Rand, sonst klebt der Text an der
   Farbkante. */
.arkant-prose + .arkant-prose:not(.arkant-prose--grau) { padding-top: 0; }
.arkant-prose--grau + .arkant-prose { padding-top: 72px; }
.arkant-prose--grau { background-color: var(--nexin-primary); }
.arkant-prose h2 { font-size: clamp(26px, 3.5vw, 40px); margin-bottom: 24px; }
.arkant-prose h3 { font-size: 24px; margin: 36px 0 12px; }
/* Abschnittstitel in Rechtstexten: h2 wegen der Gliederung, aber in
   der Groesse einer h3 - eine Datenschutzerklaerung mit zwoelf
   40-Pixel-Ueberschriften liest sich wie ein Plakat. */
.arkant-prose h2.arkant-prose__abschnitt { font-size: 24px; margin: 36px 0 12px; }
.arkant-prose p { font-size: 17px; font-weight: 300; line-height: 1.75; color: var(--nexin-black); max-width: 820px; }
.arkant-prose ul { max-width: 820px; padding-left: 20px; }
.arkant-prose li { font-size: 17px; font-weight: 300; line-height: 1.75; margin-bottom: 8px; }
.arkant-pflichtsatz {
  border-left: 3px solid var(--nexin-base);
  background-color: var(--nexin-white);
  padding: 18px 24px;
  font-weight: 600 !important;
  margin-top: 28px;
}
.arkant-platzhalter {
  border: 2px dashed var(--nexin-gray);
  padding: 24px 28px;
  color: var(--nexin-gray);
  font-weight: 600;
  margin: 24px 0;
  max-width: 820px;
}

/* Bild-Text-Feature-Block (Unterseiten, FeatureSplit.jsx) */
.arkant-feature { padding: 72px 0; }
.arkant-feature--grau { background-color: var(--nexin-primary); }
.arkant-feature__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.arkant-feature__title {
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.15;
  margin: 18px 0 20px;
}
.arkant-feature__body p {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--nexin-black);
  margin-bottom: 14px;
}
.arkant-feature__body strong { font-weight: 600; }
.arkant-feature__body ul { list-style: none; padding: 0; margin: 18px 0 0; }
.arkant-feature__body li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
}
.arkant-feature__body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--nexin-base);
}
.arkant-feature__cta { margin-top: 28px; }
.arkant-feature__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  display: block;
}
@media (min-width: 992px) {
  .arkant-feature--img-left .arkant-feature__img { order: -1; }
}
@media (max-width: 991px) {
  .arkant-feature { padding: 60px 0; }
  .arkant-feature__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* Beispiel-/Projekt-Karten mit Bild (/beispiele) */
.arkant-cases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .arkant-cases { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .arkant-cases { grid-template-columns: 1fr; }
}
.arkant-case {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--nexin-white);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 18px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.arkant-case:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.09);
}
.arkant-case__img { aspect-ratio: 3 / 2; overflow: hidden; }
.arkant-case__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.arkant-case__body { display: flex; flex-direction: column; flex: 1; padding: 24px 26px 26px; }
.arkant-case__branche {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--nexin-black);
  background: rgba(var(--nexin-base-rgb), 0.16);
  padding: 5px 12px;
  border-radius: 20px;
  margin-bottom: 14px;
}
.arkant-case__body h3 { font-size: 21px; font-weight: 600; line-height: 1.25; margin: 0 0 10px; }
.arkant-case__body p {
  font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--nexin-black); margin: 0 0 18px;
}
.arkant-case__ergebnis {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 15px;
  font-weight: 600;
  color: var(--nexin-black);
}
.arkant-case__ergebnis::before { content: "→ "; color: var(--nexin-base); font-weight: 700; }

/* Feature-/Check-Liste (Lösungs-Detailseiten). .arkant-prose-Prefix schlägt die
   geerbten .arkant-prose ul/li-Regeln (max-width/padding/Größe). */
.arkant-prose .arkant-check-list {
  list-style: none;
  padding-left: 0;
  margin: 20px 0 0;
  max-width: 640px;
}
.arkant-prose .arkant-check-list li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 14px;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--nexin-black);
}
.arkant-prose .arkant-check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--nexin-base);
}

/* Ghost-Button (sekundär, z. B. „Live ansehen") */
.thm-btn.thm-btn--ghost {
  background: transparent;
  color: var(--nexin-black);
  box-shadow: inset 0 0 0 2px var(--nexin-black);
}
.thm-btn.thm-btn--ghost:hover { background: var(--nexin-black); color: var(--nexin-white); }

/* Ganze Karte klickbar: unsichtbarer Stretched-Link über der Karte. Der sichtbare
   Pfeil/Titel bleibt, liegt aber per z-index darüber. */
.arkant-stretch {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}

/* Beige Angebots-Kachel (Digital-Check auf /betreuung) */
.arkant-kachel {
  background-color: var(--nexin-base);
  padding: 40px 44px;
  border-radius: 20px;
}
.arkant-kachel h3 { margin: 0 0 6px; font-size: 26px; }
.arkant-kachel .arkant-kachel__preis {
  font-size: 44px;
  font-weight: 600;
  display: block;
  margin: 10px 0 18px;
}
.arkant-kachel p { font-size: 15px; font-weight: 300; margin: 0 0 20px; }
.arkant-kachel .thm-btn { background-color: var(--nexin-black); color: var(--nexin-white); }

/* Stufen-Karten (/betreuung) und Lösungs-Karten (/loesungen): Listen in service-Karten */
.service-one__text ul,
.arkant-card-list {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
}
.arkant-card-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
}
.arkant-card-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--nexin-base);
}
.arkant-card-list--minus li::before {
  background-color: transparent;
  border: 2px solid var(--nexin-gray);
}
.arkant-stufe-preis {
  font-size: 30px;
  font-weight: 600;
  color: var(--nexin-black);
  display: block;
  margin: 6px 0 14px;
}

/* Rubrik-Pills (/wissen) */
.arkant-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.arkant-pills li {
  background-color: var(--nexin-base);
  color: var(--nexin-black);
  font-weight: 600;
  font-size: 15px;
  padding: 10px 22px;
  border-radius: 30px;
}

/* Produkt-Karten (Startseite „Eigene Produkte"): der Name allein sagt dem Besucher
   nichts → je Karte Kategorie („für wen") + Name + ein Satz Erklärung. Weiße Karten auf
   grauem Sektions-Hintergrund. Selektoren unter .arkant-produkte, damit sie die
   .arkant-prose-Regeln (p/h3-Größen) sicher schlagen. */
/* .arkant-prose-Prefix: schlägt die geerbten „.arkant-prose ul/li"-Regeln (max-width 820,
   padding-left, li-margin) sicher. 6 Karten → 3 Spalten (2×3), darunter 2, dann 1. */
.arkant-prose .arkant-produkte {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 34px 0 0;
  padding: 0;
  max-width: none;
}
@media (max-width: 991px) {
  .arkant-prose .arkant-produkte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
  .arkant-prose .arkant-produkte { grid-template-columns: 1fr; }
}
.arkant-produkte .arkant-produkt {
  margin: 0;
  background-color: var(--nexin-white);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 16px;
  padding: 26px 28px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.arkant-produkte .arkant-produkt:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.09);
}
.arkant-produkte .arkant-produkt__cat {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--nexin-black);
  background: rgba(var(--nexin-base-rgb), 0.16);
  padding: 5px 12px;
  border-radius: 20px;
  margin-bottom: 14px;
}
.arkant-produkte .arkant-produkt__name {
  display: block;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--nexin-black);
  margin-bottom: 8px;
}
.arkant-produkte .arkant-produkt__desc {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--nexin-black);
  margin: 0;
  max-width: none;
}

/* Formular-Feedback (Projekt-Check + Aktion) */
.arkant-form-result {
  margin-top: 18px;
  font-size: 16px;
}
.arkant-form-result--ok { color: var(--nexin-base); font-weight: 600; }
.arkant-form-result--error { color: #c0392b; font-weight: 600; }

/* Deutsch statt Title-Case: alle capitalize-Regeln des Templates neutralisieren
   (Selektorliste generiert aus style.css + module-css, 88 Selektoren) */
.about-four__bottom-text-1,
.about-four__bottom-text-2,
.about-four__count-list-text,
.about-four__count-text,
.about-four__text,
.about-four__title-1,
.about-four__top-text,
.about-four__top-title,
.about-one__bottom-title,
.about-one__text,
.about-three__client-text p,
.about-three__progress-box .progress-box .bar-title,
.about-three__text-2,
.about-two__experience-count-text,
.about-two__more-btn a,
.about-two__project-complete p,
.about-two__project-complete p span,
.about-two__text-2,
.blog-details__tag-list a,
.blog-details__title-1,
.blog-list__title,
.blog-one__read-more a,
.blog-one__text,
.blog-one__title,
.blog-two__date>p>span,
.brand-three__curved-circle-box .curved-circle-3,
.contact-one__text,
.contact-page__contact-content h3,
.contact-page__top-title,
.error-page__title,
.faq-one__inner .faq-one-accrodion .accrodion-content p,
.faq-one__inner .faq-one-accrodion .accrodion-title h3,
.faq-one__inner .faq-one-accrodion .accrodion-title h4,
.footer-widget-two__link-list li a,
.footer-widget-two__title,
.footer-widget__btn a,
.footer-widget__text,
.footer-widget__title,
.home-showcase__title,
.main-menu .main-menu__list>li>a,
.main-menu .main-menu__list>li>ul>li>a,
.main-menu .main-menu__list>li>ul>li>ul>li>a,
.main-slider__title,
.page-header__inner h3,
.portfolio-details__title-2,
.portfolio-one__text,
.portfolio-one__view a,
.portfolio-page__title,
.portfolio-three__text,
.portfolio-two__view-all a,
.search-popup .form-group input[type="search"],
.search-popup .form-group input[type="text"],
.section-title-three__title,
.section-title-two__title,
.section-title__title,
.service-one__text,
.service-one__top-text,
.services-details__points-list li p,
.services-details__title-1,
.services-details__title-2,
.services-details__top-title,
.services-three__read-more a,
.services-two__btn-box a,
.services-two__title,
.sidebar__tags-list li a,
.sidebar__title,
.site-footer-two__bottom-menu li a,
.site-footer__bottom-menu li a,
.site-footer__copyright-text,
.sliding-text-two__title,
.sliding-text__title,
.stricky-header .main-menu__list>li>a,
.stricky-header .main-menu__list>li>ul>li>a,
.stricky-header .main-menu__list>li>ul>li>ul>li>a,
.team-details__bottom-title,
.team-details__name h3,
.testimonial-one__text,
.testimonial-three__client-text,
.testimonial-three__right-title,
.testimonial-three__text,
.thm-breadcrumb li,
.thm-breadcrumb li a,
.video-two__title,
.why-choose-one__text-1,
.why-choose-one__text-3,
.why-choose-one__text-4,
.why-choose-three__progress-content p,
.xs-sidebar-group .content-inner h4,
/* Thm Btn Css */

.thm-btn {
  text-transform: none;
}

/*--------------------------------------------------------------
# Alternativer Hero mit Video (nur auf /start-alt)
# Betrifft ausschliesslich die eigene Sektion .hero-video.
# Header, Menue und alle anderen Sektionen bleiben unberuehrt.
--------------------------------------------------------------*/
.hero-video {
  position: relative;
  display: flex;
  /* Inhalt sitzt unten, damit das Bild oben frei atmet. */
  align-items: flex-end;
  /* Header ist 110px hoch und steht im Fluss darueber. dvh statt vh,
     damit es nicht springt, wenn am iPhone die Adressleiste einfaehrt. */
  min-height: calc(100dvh - 110px);
  padding: 40px 0 90px;
  overflow: hidden;
  /* Weiss ringsum die Karte, damit der Rand sichtbar wird. */
  background: #fff;
  z-index: 1;
}
/* Das Video sitzt als gerahmte Karte im Bild, nicht randlos bis zur Kante.
   Der schmale Rand ringsum macht den Hero zu einem abgeschlossenen Element
   und nimmt dem Uebergang nach unten die Haerte. */
.hero-video__bg {
  position: absolute;
  inset: 0 18px 18px;
  border-radius: 28px;
  overflow: hidden;
  z-index: -1;
}
@media (max-width: 767px) {
  .hero-video__bg {
    inset: 0 10px 10px;
    border-radius: 18px;
  }
}
.hero-video__bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
  display: block;
}
/* Lesbarkeits-Schleier: Der Videoinhalt ist hell und wechselt beim Spulen.
   Ohne ihn waere schwarze Schrift darauf nicht zuverlaessig lesbar. */
.hero-video__schleier {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(245, 242, 236, 0.97) 0%,
    rgba(245, 242, 236, 0.93) 30%,
    rgba(245, 242, 236, 0.6) 56%,
    rgba(245, 242, 236, 0.15) 100%
  );
}
/* Nach unten laeuft das Video aus, damit es nicht mitten im Bild abreisst.
   Die harte Kante uebernimmt danach das schwarze Laufband. */
.hero-video__schleier::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 26%;
  background: linear-gradient(
    to bottom,
    rgba(245, 242, 236, 0) 0%,
    rgba(245, 242, 236, 0.75) 60%,
    rgba(245, 242, 236, 1) 100%
  );
}
.hero-video__inhalt {
  position: relative;
  z-index: 2;
  /* Mitgewachsen mit der groesseren Schrift, sonst braeuche der Satz
     fuenf Zeilen. So bleiben es drei. */
  max-width: 780px;
}
/* Einordnung ueber dem Claim. Bewusst OHNE Versalien und ohne gesperrte
   Schrift: das wirkt schnell nach Schablone. Klein und grau reicht, damit
   sie den Claim nicht bedraengt. */
.hero-video__einordnung {
  font-size: clamp(14px, 1.15vw, 17px);
  font-weight: 500;
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.6);
  margin: 0 0 14px;
}

/* Der Claim traegt die Aussage und ist deshalb das Groesste im Bild. */
.hero-video__claim {
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1.06;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--nexin-black);
  margin: 0 0 20px;
}
/* Die Ansprache steht jetzt UNTER dem Claim und ist bewusst kleiner:
   Sie begruesst, sie behauptet nichts. */
.hero-video__satz {
  position: relative;
  font-size: clamp(17px, 1.7vw, 22px);
  line-height: 1.45;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.72);
  margin: 0 0 30px;
  max-width: 34em;
}
.hero-video__platzhalter {
  visibility: hidden;
}
.hero-video__getippt {
  position: absolute;
  inset: 0;
}
.hero-video__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.hero-video__cursor {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  margin-left: 2px;
  background: var(--nexin-black);
  vertical-align: middle;
  animation: arkantBlink 1s step-end infinite;
}
@keyframes arkantBlink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
.hero-video__pillen {
  display: flex;
  flex-wrap: wrap;
  row-gap: 4px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.hero-video__pillen.is-da {
  opacity: 1;
  transform: translateY(0);
}
.hero-video__pille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  background: #fff;
  color: var(--nexin-black);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 999px;
  font-size: 16px;
  padding: 0.5em 22px;
  margin: 0 0.25em 0.5em;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.hero-video__pille:hover {
  background: var(--nexin-black);
  color: #fff;
}
/* Die Haupt-Handlung hebt sich ab: gefuellt statt weiss. */
.hero-video__pille--stark {
  background: var(--nexin-black);
  color: #fff;
  border-color: var(--nexin-black);
  font-weight: 600;
  cursor: pointer;
}
.hero-video__pille--stark:hover {
  background: var(--nexin-base);
  color: var(--nexin-black);
  border-color: var(--nexin-base);
}

/*--------------------------------------------------------------
# Aufklappbares Kontaktformular
--------------------------------------------------------------*/
.kontakt-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
  background: rgba(17, 17, 17, 0.55);
  backdrop-filter: blur(3px);
  animation: kmEinblenden 0.18s ease-out;
}
@keyframes kmEinblenden {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.kontakt-modal__karte {
  position: relative;
  /* Am unteren Ende des Formulars soll nicht die Seite dahinter
     weiterscrollen (vor allem am Telefon spuerbar). */
  overscroll-behavior: contain;
  width: 100%;
  max-width: 560px;
  margin: auto;
  background: #fff;
  border-radius: 20px;
  padding: 34px 32px 30px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
}
.kontakt-modal__zu {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.05);
  color: var(--nexin-black);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.kontakt-modal__zu:hover {
  background: rgba(0, 0, 0, 0.11);
}
.kontakt-modal__titel {
  font-size: 27px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 44px 20px 0;
  color: var(--nexin-black);
}
.kontakt-modal__direkt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  background: #f5f2ec;
  border-radius: 12px;
  padding: 14px 16px;
}
.kontakt-modal__direkt-label {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.62);
}
.kontakt-modal__telefon {
  font-size: 18px;
  font-weight: 600;
  color: var(--nexin-black);
}
.kontakt-modal__telefon:hover {
  text-decoration: underline;
}
.kontakt-modal__termin {
  margin-left: auto;
  font-size: 14px;
  font-weight: 500;
  color: var(--nexin-black);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.kontakt-modal__oder {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0;
  color: rgba(0, 0, 0, 0.5);
  font-size: 14px;
}
.kontakt-modal__oder::before,
.kontakt-modal__oder::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(0, 0, 0, 0.12);
}
.kontakt-modal__reihe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 520px) {
  .kontakt-modal__reihe {
    grid-template-columns: 1fr;
  }
  .kontakt-modal__karte {
    padding: 30px 20px 24px;
  }
}
.kontakt-modal__feld {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.kontakt-modal__feld label {
  font-size: 14px;
  font-weight: 500;
  color: var(--nexin-black);
}
.kontakt-modal__feld input,
.kontakt-modal__feld textarea {
  width: 100%;
  font-family: var(--nexin-font);
  font-size: 16px;
  color: var(--nexin-black);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.22);
  border-radius: 10px;
  padding: 11px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.kontakt-modal__feld textarea {
  resize: vertical;
  min-height: 96px;
}
.kontakt-modal__feld input:focus,
.kontakt-modal__feld textarea:focus {
  outline: none;
  border-color: var(--nexin-black);
  box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.35);
}
.kontakt-modal__hinweis {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.55);
}
/* Honeypot: nicht display:none, sonst ueberspringen ihn manche Bots. */
.kontakt-modal__falle {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.kontakt-modal__themen {
  border: 0;
  padding: 0;
  margin: 4px 0 20px;
}
.kontakt-modal__themen legend {
  font-size: 14px;
  font-weight: 500;
  color: var(--nexin-black);
  padding: 0;
  margin-bottom: 10px;
}
.kontakt-modal__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.kontakt-modal__chip {
  font-family: var(--nexin-font);
  font-size: 14px;
  color: var(--nexin-black);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.22);
  border-radius: 999px;
  padding: 7px 15px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease;
}
.kontakt-modal__chip:hover {
  border-color: var(--nexin-black);
}
.kontakt-modal__chip.is-aktiv {
  background: var(--nexin-black);
  border-color: var(--nexin-black);
  color: #fff;
}
.kontakt-modal__senden {
  width: 100%;
  font-family: var(--nexin-font);
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  background: var(--nexin-black);
  border: 0;
  border-radius: 999px;
  padding: 15px 24px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.kontakt-modal__senden:hover:not(:disabled) {
  background: var(--nexin-base);
  color: var(--nexin-black);
}
.kontakt-modal__senden:disabled {
  opacity: 0.6;
  cursor: default;
}
.kontakt-modal__fehler {
  color: #b3261e;
  font-size: 14px;
  margin: 0 0 12px;
}
.kontakt-modal__dsgvo {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.55);
  margin: 12px 0 0;
  text-align: center;
}
.kontakt-modal__fertig {
  text-align: center;
  padding: 20px 0 10px;
}
.kontakt-modal__haken {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: rgba(255, 140, 0, 0.16);
  color: var(--nexin-black);
  font-size: 24px;
  line-height: 1;
}
.kontakt-modal__fertig h2 {
  font-size: 27px;
  font-weight: 600;
  margin: 0 0 12px;
}
.kontakt-modal__fertig p {
  color: rgba(0, 0, 0, 0.72);
  margin: 0 0 22px;
}
.kontakt-modal__fertig a {
  font-weight: 600;
  color: var(--nexin-black);
  text-decoration: underline;
}
@media (prefers-reduced-motion: reduce) {
  .kontakt-modal {
    animation: none;
  }
}

/*--------------------------------------------------------------
# Laufband (nur auf /start-alt, direkt unter dem Video-Hero)
--------------------------------------------------------------*/
.laufband {
  position: relative;
  z-index: 2;
  background: var(--nexin-black);
  overflow: hidden;
  padding: 20px 0;
}
.laufband__spur {
  display: flex;
  width: max-content;
  animation: laufbandLauf 38s linear infinite;
}
.laufband:hover .laufband__spur {
  animation-play-state: paused;
}
/* Zwei gleiche Listen, Verschiebung um genau die halbe Spurbreite:
   dadurch springt nichts, wenn die Schleife von vorn beginnt. */
@keyframes laufbandLauf {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.laufband__gruppe {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.laufband__eintrag {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-right: 18px;
  white-space: nowrap;
  color: var(--nexin-white);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.laufband__punkt {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--nexin-base);
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .laufband {
    padding: 15px 0;
  }
  .laufband__eintrag {
    font-size: 15px;
    gap: 14px;
    padding-right: 14px;
  }
}
/* Wer Bewegung abgestellt hat, sieht die Liste still stehen. */
@media (prefers-reduced-motion: reduce) {
  .laufband__spur {
    animation: none;
  }
}
/* Der runde Badge der Folgesektion ragt absichtlich nach oben heraus. Auf
   der normalen Startseite ist das ein schoenes Detail, hier laege er als
   schwarzer Kreis mitten auf dem schwarzen Laufband. Nur wenn ein Laufband
   davor steht, rutscht er nach unten in seine eigene Sektion. */
.laufband + .explore-one .explore-one__rounded-text {
  top: 104px;
}
/* Unter 992 Pixeln sass der Kreis auf top: 2px und ragte damit 75 Pixel
   nach oben aus der Sektion heraus - genau in das schwarze Laufband
   darueber, das ihn halb verschluckt hat. Nachgemessen bei 375, 541, 768
   und 992 Pixeln: unterhalb 992 immer 75 Pixel Ueberlappung, darueber
   keine. Der Kreis steht jetzt auch dort im Bild statt auf der Kante. */
@media (max-width: 991px) {
  .laufband + .explore-one .explore-one__rounded-text {
    top: 101px;
  }
}
@media (max-width: 575px) {
  /* 150 Pixel Kreis auf einem 375 Pixel breiten Schirm nehmen zu viel vom
     Foto weg. Die Verschiebung um -75 muss erhalten bleiben, sie zentriert
     den Kreis auf seinem Ankerpunkt. */
  .explore-one__curved-circle-box {
    transform: translateX(-75px) scale(.78);
    transform-origin: 75px 75px;
  }
  .laufband + .explore-one .explore-one__rounded-text { top: 88px; }
}
.hero-video__pille--umriss {
  background: transparent;
  border-color: var(--nexin-black);
}
@media (max-width: 767px) {
  .hero-video {
    /* Der Header ist auch am Handy 110px hoch (nachgemessen), nicht kleiner.
       Unten viel Luft, weil der runde Badge der naechsten Sektion nach oben
       ragt und sonst auf der Telefon-Schaltflaeche liegt. */
    align-items: flex-end;
    padding: 32px 0 104px;
  }
  /* Mobil steht der Text unten, der Schleier muss also von unten kommen. */
  .hero-video__schleier {
    background: linear-gradient(
      to top,
      rgba(245, 242, 236, 0.97) 0%,
      rgba(245, 242, 236, 0.92) 40%,
      rgba(245, 242, 236, 0.5) 68%,
      rgba(245, 242, 236, 0.12) 100%
    );
  }
  .hero-video__pille {
    font-size: 13px;
    padding: 0.45em 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-video__cursor {
    animation: none;
  }
  .hero-video__pillen {
    transition: none;
  }
}

/* ── Eckdaten-Leiste unter dem Hero ────────────────────────────────────
   Die vier Entscheidungsfakten (Betriebsgroesse, Aufbaupreis, Pauschale,
   Dauer). Standen vorher nur im FAQ am Seitenende; Testleser sind vorher
   abgesprungen. Beige Flaeche, damit sie sich vom schwarzen Laufband
   darueber und vom Bildband darunter absetzt. */
.arkant-eckdaten {
  /* --nexin-base ist die Akzentfarbe (Orange) - als vollflaechige Bahn viel zu
     laut. Wir nehmen dieselbe helle Wechselflaeche wie .arkant-prose--grau,
     damit sich die Leiste in den Sektionsrhythmus einfuegt. Orange erscheint
     nur als Akzentkante: als Textfarbe bestuende es den Kontrast auf Hell
     nicht. */
  background: var(--nexin-primary, #f8f8f8);
  color: var(--nexin-black, #000);
  padding: 56px 0 60px;
}
.arkant-eckdaten__intro {
  margin: 0 0 30px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .01em;
  opacity: .75;
}
.arkant-eckdaten__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px 40px;
}
.arkant-eckdaten__punkt {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Trennlinie zwischen den Spalten statt Kaesten - ruhiger im Template-Look. */
  padding-left: 22px;
  border-left: 2px solid var(--nexin-base, #ff8c00);
}
.arkant-eckdaten__punkt:first-child { padding-left: 0; border-left: 0; }
.arkant-eckdaten__wert {
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.02em;
}
.arkant-eckdaten__einheit {
  font-size: 16px;
  font-weight: 500;
  opacity: .7;
}
.arkant-eckdaten__zusatz {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.5;
  opacity: .85;
}
@media (max-width: 991px) {
  .arkant-eckdaten__liste { grid-template-columns: repeat(2, 1fr); }
  .arkant-eckdaten__punkt:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 575px) {
  /* Kompakter als auf dem Desktop: Vier Fakten fuellten sonst einen ganzen
     Handy-Bildschirm, und genau die Leserin mit drei Minuten Zeit soll hier
     nicht scrollen muessen. */
  .arkant-eckdaten { padding: 34px 0 36px; }
  .arkant-eckdaten__intro { margin-bottom: 22px; font-size: 16px; }
  .arkant-eckdaten__liste { grid-template-columns: 1fr; gap: 18px; }
  .arkant-eckdaten__punkt { padding-left: 0; border-left: 0; }
  .arkant-eckdaten__punkt + .arkant-eckdaten__punkt {
    padding-top: 17px;
    border-top: 1px solid rgba(0, 0, 0, .18);
  }
  .arkant-eckdaten__wert { font-size: 26px; }
  .arkant-eckdaten__einheit { font-size: 15px; }
  .arkant-eckdaten__zusatz { margin-top: 5px; font-size: 14px; line-height: 1.45; }
}

/* ── Montagmorgen: zwei Kalenderblaetter in einem Programmfenster ──────
   Links traegt die Unruhe die Aussage (Kategoriefarben, Doppelbelegung,
   98 Benachrichtigungen), rechts die Ruhe (zwei Termine, gruene Ampel,
   null Benachrichtigungen, freie Flaeche mit Begruendung). */
.arkant-montag { padding: 90px 0 100px; }
.arkant-montag__intro {
  max-width: 720px;
  margin: -10px 0 40px;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.7;
}
/* Programmfenster */
.arkant-fenster {
  border: 1px solid rgba(0, 0, 0, .16);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .10), 0 3px 10px rgba(0, 0, 0, .05);
}
.arkant-fenster__leiste {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, .12);
  background: linear-gradient(#fbfbfb, #f1f1f1);
}
.arkant-fenster__punkte { display: inline-flex; gap: 7px; }
.arkant-fenster__punkte span {
  width: 11px; height: 11px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .10);
}
.arkant-fenster__punkte span:nth-child(1) { background: #ff5f57; }
.arkant-fenster__punkte span:nth-child(2) { background: #febc2e; }
.arkant-fenster__punkte span:nth-child(3) { background: #28c840; }
.arkant-fenster__titel {
  position: absolute; left: 0; right: 0; text-align: center;
  font-size: 13px; font-weight: 600; color: #6b6b6b; pointer-events: none;
}
.arkant-fenster__inhalt { padding: 22px; background: #fafafa; }

.arkant-kalender-paar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: start;
}

.arkant-kalender {
  margin: 0;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.arkant-kalender__kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0, 0, 0, .12);
  background: #f6f6f6;
}
.arkant-kalender__tag {
  font-size: 11px; font-weight: 600; letter-spacing: .11em;
  text-transform: uppercase; color: var(--nexin-gray);
}
.arkant-kalender__titel { font-size: 16px; font-weight: 600; }
.arkant-kalender__status { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; }
.arkant-kalender--danach .arkant-kalender__kopf { background: #fff7ef; }

/* Gruene Ampel nur rechts */
.arkant-kalender__ampel {
  width: 10px; height: 10px; border-radius: 50%;
  background: #28a745;
  box-shadow: 0 0 0 3px rgba(40, 167, 69, .18);
}

/* Benachrichtigungsglocke mit Zaehler */
.arkant-kalender__glocke { position: relative; display: inline-flex; color: #6b6b6b; }
.arkant-kalender__badge {
  position: absolute; top: -7px; right: -11px;
  min-width: 18px; padding: 0 5px;
  border-radius: 9px;
  font-size: 10px; font-weight: 700; line-height: 18px; text-align: center;
  color: #fff; background: #c0332d;   /* 5,3 statt 3,96 bei 10px */
}
.arkant-kalender__badge--still {
  /* Weiss auf hellem Grau war 1,66. Auf dieser Flaeche gehoert
     dunkle Schrift hin, nicht helle. Jetzt 8,9. */
  background: #c9c9c7;
  color: #1d1d1b;
}
.arkant-kalender__glocke--still { color: var(--nexin-gray); }

/* Raster: Halbstunde = 46px */
.arkant-kalender__blatt {
  display: grid;
  grid-template-columns: 54px 1fr;
  grid-auto-rows: 46px;
  padding: 8px 12px 14px 0;
}
.arkant-kalender__zeit {
  grid-column: 1; padding-right: 9px; text-align: right;
  font-size: 12px; font-weight: 500; color: var(--nexin-gray);
  transform: translateY(-6px);
}
.arkant-kalender__linie { grid-column: 2; border-top: 1px solid rgba(0, 0, 0, .07); }
.arkant-kalender__linie--voll { border-top-color: rgba(0, 0, 0, .14); }

.arkant-kalender__termin {
  grid-column: 2;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  margin: 2px 0 2px 6px;
  padding: 7px 10px;
  border-left: 3px solid #9d9d9c;
  border-radius: 4px;
  background: #f1f1f1;
  color: #3f3f3f;
  font-size: 13.5px; line-height: 1.32;
  position: relative; z-index: 1;
  overflow: hidden;
}
.arkant-kalender__uhrzeit { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; opacity: .65; }
.arkant-kalender__betreff { font-weight: 400; }
.arkant-kalender__zusatz {
  margin-top: 8px; font-size: 13px; font-weight: 300; line-height: 1.55; color: #4a4a4a;
}

/* Doppelbelegung: zwei Termine teilen sich eine Zeile. */
.arkant-kalender__termin--links { margin-right: 51%; }
.arkant-kalender__termin--rechts { margin-left: 51%; }

/* Kategoriefarben - bewusst nur im linken Blatt. Sie stellen ein
   ueberladenes Kalenderprogramm dar, nicht die Hausfarben. */
.arkant-kalender__termin--rot    { border-left-color: #d8544f; background: #fbeceb; }
.arkant-kalender__termin--blau   { border-left-color: #4a7ab8; background: #eaf0f8; }
.arkant-kalender__termin--lila   { border-left-color: #8a6bb1; background: #f1ecf7; }
.arkant-kalender__termin--gelb   { border-left-color: #d9a441; background: #fbf3e3; }
.arkant-kalender__termin--orange { border-left-color: #e07b39; background: #fdeee2; }
.arkant-kalender__termin--grau   { border-left-color: var(--nexin-gray); background: #f1f1f1; }

/* Rechtes Blatt: ruhig, in der Hausfarbe. */
.arkant-kalender--danach .arkant-kalender__termin {
  border-left-color: var(--nexin-base, #ff8c00);
  background: #fff3e6;
  color: var(--nexin-black, #000);
  font-weight: 500;
}
/* Die freie Flaeche ist der eigentliche Gewinn - offen gezeichnet, mit der
   Begruendung darin, damit sie nicht wie ein Versprechen wirkt. */
.arkant-kalender--danach .arkant-kalender__termin--frei {
  justify-content: flex-start;
  border-left-style: dashed;
  background: transparent;
  color: var(--nexin-black, #000);
}
/* Die freie Flaeche ist der eigentliche Gewinn - deshalb steht ihre Zeile
   kraeftiger als die beiden Termine darueber. */
.arkant-kalender--danach .arkant-kalender__termin--frei .arkant-kalender__betreff {
  font-weight: 700;
}

/* Eine Ueberschrift, die nur die Gliederung schliesst: Sie ist fuer
   Vorlesesoftware und Suchmaschinen da, optisch soll die Sektion aber
   unveraendert bleiben. Nicht display:none - das wuerde sie auch fuer
   Vorlesesoftware entfernen. */
.sr-only-h2,
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (max-width: 991px) {
  .arkant-kalender-paar { grid-template-columns: 1fr; gap: 18px; }
  .arkant-fenster__inhalt { padding: 16px; }
}
@media (max-width: 575px) {
  .arkant-montag { padding: 56px 0 60px; }
  .arkant-fenster__titel { font-size: 12px; }
  .arkant-kalender__blatt { grid-template-columns: 46px 1fr; grid-auto-rows: 44px; padding-right: 9px; }
  .arkant-kalender__termin { font-size: 12.5px; padding: 6px 8px; }
  .arkant-kalender__titel { font-size: 15px; }
  /* Die Doppelbelegung bleibt auch schmal geteilt: Bei voller Breite
     wuerden die beiden Termine derselben Zeile exakt uebereinander
     liegen. Enger Text ist hier das kleinere Uebel - und genau das
     Gedraenge ist ja die Aussage. */
  .arkant-kalender__termin--links { margin-right: 50%; }
  .arkant-kalender__termin--rechts { margin-left: 50%; }
  .arkant-kalender__termin--links,
  .arkant-kalender__termin--rechts { padding: 5px 7px; }
  .arkant-kalender__termin--links .arkant-kalender__betreff,
  .arkant-kalender__termin--rechts .arkant-kalender__betreff {
    font-size: 12px;
    line-height: 1.25;
  }
  /* In der halben Spalte kostet die Uhrzeit eine ganze Zeile, und der
     Betreff wurde dadurch abgeschnitten. Die Zeit steht ohnehin links in
     der Zeitspalte. */
  .arkant-kalender__termin--links .arkant-kalender__uhrzeit,
  .arkant-kalender__termin--rechts .arkant-kalender__uhrzeit { display: none; }
}

/* ── Konzept-Chat: Einstieg auf der Startseite ─────────────────────────── */
.arkant-konzept-einstieg { padding: 80px 0 90px; background: var(--nexin-primary, #f8f8f8); }
.arkant-konzept-einstieg__karte { max-width: 860px; }
.arkant-konzept-einstieg__text {
  max-width: 720px; margin: -6px 0 28px;
  font-size: 17px; font-weight: 300; line-height: 1.7;
}
.arkant-konzept-einstieg__label {
  display: block; margin-bottom: 10px;
  font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.arkant-konzept-einstieg__feld,
.arkant-chat__eingabe textarea,
.arkant-chat__feld {
  width: 100%; padding: 14px 16px;
  border: 1px solid rgba(0, 0, 0, .18); border-radius: 8px;
  background: #fff; font-family: inherit; font-size: 16px; font-weight: 300; line-height: 1.55;
  resize: vertical;
}
.arkant-konzept-einstieg__feld:focus-visible,
.arkant-chat__eingabe textarea:focus-visible,
.arkant-chat__feld:focus-visible { outline: 3px solid var(--nexin-base); outline-offset: 2px; }
.arkant-konzept-einstieg__aktion {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 18px;
}
.arkant-konzept-einstieg__hinweis { font-size: 14px; font-weight: 300; color: #6b6b6b; }
.arkant-konzept-einstieg .thm-btn[disabled] { opacity: .45; pointer-events: none; }

/* ── Konzept-Chat: Seite ───────────────────────────────────────────────── */
.arkant-konzept-seite { padding: 70px 0 90px; }
.arkant-chat { max-width: 820px; }
.arkant-chat__verlauf { display: flex; flex-direction: column; gap: 18px; }
.arkant-chat__blase { max-width: 88%; }
.arkant-chat__blase--besucher { align-self: flex-end; text-align: right; }
.arkant-chat__wer {
  display: block; margin-bottom: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--nexin-gray);
}
.arkant-chat__text {
  padding: 14px 17px; border-radius: 12px;
  font-size: 16px; font-weight: 300; line-height: 1.6; white-space: pre-wrap;
}
.arkant-chat__blase--assistent .arkant-chat__text {
  background: var(--nexin-primary, #f8f8f8);
  border-left: 3px solid var(--nexin-base, #ff8c00);
}
.arkant-chat__blase--besucher .arkant-chat__text { background: #000; color: #fff; }
.arkant-chat__tippt { color: var(--nexin-gray); font-style: italic; }

.arkant-chat__eingabe { display: flex; gap: 12px; align-items: flex-end; margin-top: 26px; }
.arkant-chat__eingabe textarea { flex: 1; }
.arkant-chat__eingabe .thm-btn[disabled] { opacity: .45; pointer-events: none; }
.arkant-chat__abschluss { margin-top: 14px; }
.arkant-chat__skizze-btn {
  border: 0; background: none; padding: 0;
  font-family: inherit; font-size: 15px; font-weight: 600; color: #000;
  text-decoration: underline; text-underline-offset: 4px; cursor: pointer;
}
.arkant-chat__skizze-btn[disabled] { opacity: .45; cursor: default; }
.arkant-chat__fehler {
  margin-top: 16px; padding: 12px 15px; border-left: 3px solid #d8544f;
  background: #fbeceb; font-size: 15px;
}

.arkant-chat__skizze {
  margin-top: 12px; padding: 28px 30px;
  border: 1px solid rgba(0, 0, 0, .14); border-radius: 12px; background: #fff;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .07);
}
.arkant-chat__skizze-titel { font-size: 24px; font-weight: 600; margin: 0 0 18px; }
.arkant-chat__h3 { font-size: 17px; font-weight: 600; margin: 22px 0 8px; }
.arkant-chat__p { font-size: 16px; font-weight: 300; line-height: 1.65; margin: 0 0 10px; }
.arkant-chat__li {
  list-style: none; position: relative; padding-left: 20px; margin-bottom: 7px;
  font-size: 16px; font-weight: 300; line-height: 1.6;
}
.arkant-chat__li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 8px; height: 2px; background: var(--nexin-base, #ff8c00);
}
.arkant-chat__mail { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(0, 0, 0, .12); }
.arkant-chat__label {
  display: block; margin-bottom: 10px;
  font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.arkant-chat__mail-zeile { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.arkant-chat__mail-zeile .arkant-chat__feld { flex: 1; min-width: 240px; }
.arkant-chat__klein { margin-top: 12px; font-size: 13.5px; font-weight: 300; color: #6b6b6b; }
.arkant-chat__erfolg {
  margin-top: 24px; padding: 16px 18px;
  border-left: 3px solid #28a745; background: #f1f8f3;
  font-size: 16px; font-weight: 300; line-height: 1.6;
}

.arkant-konzept-seite__fuss {
  max-width: 820px; margin-top: 44px; padding-top: 26px;
  border-top: 1px solid rgba(0, 0, 0, .12);
}
.arkant-konzept-seite__fuss p {
  font-size: 15.5px; font-weight: 300; line-height: 1.65; margin: 0 0 12px;
}
.arkant-konzept-seite__fuss a { text-decoration: underline; }
.arkant-konzept-seite__hinweis { color: #6b6b6b; font-size: 14px !important; }

@media (max-width: 575px) {
  .arkant-konzept-einstieg { padding: 52px 0 56px; }
  .arkant-konzept-seite { padding: 44px 0 60px; }
  .arkant-chat__blase { max-width: 100%; }
  .arkant-chat__eingabe { flex-direction: column; align-items: stretch; }
  .arkant-chat__skizze { padding: 20px 18px; }
}

/* ── Konzept-Chat im Hero ──────────────────────────────────────────────
   Der Kopfblock (Einordnung, Claim, getippter Satz) wandert mit jeder
   Nachricht ein Stueck nach oben aus dem Bild und macht dem Gespraech
   Platz. Gedeckelt, damit er nicht hinter der Menueleiste verschwindet. */
.hero-video__kopf {
  /* Der Aussenabstand wandert mit: Ohne ihn bliebe ein Loch stehen, wo die
     Ueberschrift war, und der Chat kaeme nicht nach oben. */
  transition:
    transform 620ms cubic-bezier(.22, .61, .36, 1),
    margin-bottom 620ms cubic-bezier(.22, .61, .36, 1);
  will-change: transform, margin-bottom;
}
@media (prefers-reduced-motion: reduce) {
  .hero-video__kopf { transition: none; }
}

.hero-chat { max-width: 100%; margin-top: 26px; }
/* Sobald das Gespraech laeuft, darf es den Hero fuellen. Vorher ist die
   Eingabezeile bewusst schmal, damit sie neben dem Claim nicht erschlaegt. */
.hero-chat:not(.is-aktiv) .hero-chat__eingabe,
.hero-chat:not(.is-aktiv) .hero-chat__hinweis { max-width: 660px; }

.hero-chat__verlauf {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 56vh;
  overflow-y: auto;
  margin-bottom: 14px;
  padding-right: 6px;
  overscroll-behavior: contain;
}
.hero-chat__blase {
  max-width: 72%;
  padding: 11px 15px;
  border-radius: 12px;
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.5;
  white-space: pre-wrap;
}
.hero-chat__blase--besucher {
  align-self: flex-end;
  background: #000;
  color: #fff;
}
.hero-chat__blase--assistent {
  align-self: flex-start;
  background: rgba(255, 255, 255, .92);
  color: #000;
  border-left: 3px solid var(--nexin-base, #ff8c00);
}
.hero-chat__tippt { color: #6b6b6b; font-style: italic; }

/* Eingabezeile: waechst mit dem Text, Knopf sitzt buendig rechts. */
.hero-chat__eingabe {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid rgba(0, 0, 0, .22);
  border-radius: 12px;
  background: rgba(255, 255, 255, .94);
  overflow: hidden;
}
.hero-chat__eingabe:focus-within { outline: 3px solid var(--nexin-base); outline-offset: 2px; }
.hero-chat__eingabe textarea {
  flex: 1;
  min-height: 54px;
  padding: 16px 18px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
  resize: none;
}
.hero-chat__eingabe textarea:focus { outline: none; }
.hero-chat__senden {
  flex: 0 0 auto;
  width: 56px;
  border: 0;
  background: var(--nexin-black, #000);
  color: #fff;
  font-size: 17px;
  cursor: pointer;
  transition: background 200ms;
}
.hero-chat__senden:hover:not([disabled]) { background: var(--nexin-base, #ff8c00); }
.hero-chat__senden[disabled] { opacity: .4; cursor: default; }

.hero-chat__hinweis {
  margin: 10px 0 0;
  font-size: 14px;
  font-weight: 300;
  color: #5d5d5d;
}
.hero-chat__fehler {
  margin: 10px 0 0;
  padding: 9px 13px;
  border-left: 3px solid #d8544f;
  background: rgba(251, 236, 235, .95);
  font-size: 14.5px;
}
.hero-chat__weiter {
  margin-top: 12px;
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #000;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.hero-chat__weiter[disabled] { opacity: .45; cursor: default; }

/* Aktionen und Themen-Chips getrennt: erst die beiden Wege zum Menschen,
   dann die Themen. */
.hero-video__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 500ms, transform 500ms;
}
.hero-video__aktionen.is-da { opacity: 1; transform: none; }
.hero-video__pillen { margin-top: 14px; }

@media (max-width: 767px) {
  .hero-chat { margin-top: 20px; max-width: 100%; }
  .hero-chat__verlauf { max-height: 46vh; }
  .hero-chat__blase { max-width: 88%; }
  .hero-chat__eingabe textarea { font-size: 16px; padding: 14px 15px; }
  .hero-video__aktionen { margin-top: 18px; }
}


/* Sobald das Gespraech laeuft, hebt der Hero seine Inhaltsbreite auf: Die
   780px des Claims sind fuer einen Chat zu eng, und genau daran ist das
   "ueber den ganzen Bildschirm" vorher gescheitert. */
.hero-video__inhalt.is-chat { max-width: none; }

/* ── Zusicherungen als feste Reihe ─────────────────────────────────────
   Loest die durchlaufende Leiste ab. Dort waren die Symbole mit 34px
   kleiner als die Beschriftung daneben, gingen im Schwarz unter, und man
   sah nie alle sechs gleichzeitig. Jetzt gleich gewichtete Kacheln:
   sechs nebeneinander, drei auf dem Tablet, zwei auf dem Handy. */
.arkant-zusicherungen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 34px 20px;
}
.arkant-zusicherung {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.arkant-zusicherung__icon {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  /* Die Dateien sind freigestellt, deshalb kein Blendmodus. */
}
.arkant-zusicherung__label {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .01em;
  color: #fff;
}

@media (max-width: 1199px) {
  .arkant-zusicherungen { grid-template-columns: repeat(3, 1fr); gap: 40px 20px; }
}
@media (max-width: 575px) {
  .arkant-zusicherungen { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
  .arkant-zusicherung__icon { width: 60px; height: 60px; }
  .arkant-zusicherung__label { font-size: 14.5px; }
}

/* ── "4 Köpfe" mittig zur Textspalte ───────────────────────────────────
   Die Zahlen-Spalte stand oben buendig, ihr Inhalt ist aber nur rund 88px
   hoch, waehrend die Textspalte daneben knapp 240px misst. Darunter klaffte
   ein Loch von etwa 124px, das im Ausschnitt wie ein Fehler aussah. Auf
   halber Hoehe verteilt sich der Freiraum, und die Zahl liest sich als
   gesetzter Blickfang statt als abgerutschter Rest.
   Nur auf breiten Schirmen: Sobald die Spalten stapeln, gibt es kein
   Ungleichgewicht mehr. */
@media (min-width: 1200px) {
  .about-one__experience-box {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Das Template setzt hier 27px Abstand nach oben. Zusammen mit
       height:100% ragte der Kasten unten heraus, und der Freiraum verteilte
       sich 103 zu 49 statt gleichmaessig. */
    margin-top: 0;
  }
}

/* ══ ENTWURF: Neue Startseite (Ideenschmiede-Konzept) ══════════════════
   Alle Sektionen im bestehenden Look: gleiche Tokens, gleiche
   section-title-Muster, Orange nur als Akzent. Beim Tausch auf / werden
   die entwurf-*-Klassen zu den regulaeren. */

/* Hero-Anpassungen: Claim dreizeilig, Frist in Orange als eigene Zeile.
   Die orange Zeile ist bewusst kleiner als die zwei schwarzen darueber.
   In gleicher Groesse trugen alle drei Zeilen dasselbe Gewicht, und der
   Claim wurde dadurch wuchtig statt klar. Jetzt fuehrt die Aussage
   ("Dein Betrieb bekommt sein eigenes Werkzeug"), das Versprechen
   ("In Wochen statt Monaten, zum Festpreis") folgt eine Stufe leiser.
   Als em-Wert, damit es ueber alle Schirmgroessen mitskaliert. */
.entwurf-hero__claim { max-width: 900px; }
.entwurf-hero__frist {
  color: var(--nexin-base, #ff8c00);
  display: inline-block;
  font-size: 0.62em;
  line-height: 1.18;
  /* Ohne den kleinen Abstand klebt die kleinere Zeile an der grossen,
     weil die Zeilenhoehe der Ueberschrift nicht mehr passt. */
  margin-top: 0.22em;
}
.entwurf-hero__subline { max-width: 640px; }
.entwurf-hero__cta-hinweis {
  margin: 12px 0 0;
  font-size: 14.5px;
  font-weight: 300;
  color: #5d5d5d;
}

/* Deal-Block: helle Wechselflaeche wie die Eckdaten, links das Ritual,
   rechts die Mini-Referenz als Karte. */
.entwurf-deal { background: var(--nexin-primary, #f8f8f8); padding: 64px 0 68px; }
.entwurf-deal__label {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nexin-black, #000);
  border-bottom: 2px solid var(--nexin-base, #ff8c00);
  padding-bottom: 4px;
}
.entwurf-deal__wort { max-width: 940px; }
.entwurf-deal__text {
  margin: 0;
  font-size: clamp(19px, 2.2vw, 25px);
  font-weight: 300;
  line-height: 1.55;
  color: var(--nexin-black, #000);
}
.entwurf-deal__text strong { font-weight: 600; }
/* Fuenf Schritte als nummerierte Reihe, mit Foto im Kopf */
/* ── Gezeichnete Symbole ───────────────────────────────────────────────
   Dieselbe Technik wie der Bauplan: Jeder Pfad traegt seine Laenge als
   Strichmuster, der Versatz laeuft auf null. Gezeichnet wird erst, wenn
   die Sektion im Blick ist (Klasse is-da vom IntersectionObserver). */
.skizzen-icon { display: block; width: 100%; height: 100%; overflow: visible; }
.skizzen-icon__z {
  fill: none;
  stroke: #2b2b2b;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  opacity: 0;
}
.is-da .skizzen-icon__z {
  stroke-dashoffset: 0;
  opacity: 1;
  transition: stroke-dashoffset 850ms ease-out, opacity 200ms ease-out, stroke 250ms;
}

/* ── Fuenf Schritte: der Bauzeitenplan ─────────────────────────────── */
.entwurf-schritte { padding: 90px 0 96px; background: var(--nexin-primary, #f8f8f8); }
.entwurf-schritte__intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 64px;
}
.entwurf-schritte__intro .entwurf-kopf { margin-bottom: 0; }
.entwurf-schritte__bilanz {
  margin: 20px 0 0;
  padding: 14px 18px;
  border-left: 3px solid var(--nexin-base, #ff8c00);
  background: #fff;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
}
.entwurf-schritte__bilanz span { font-weight: 700; }
.entwurf-schritte__foto img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .12);
}

/* Der Plan selbst. Die Linie faehrt ueber scaleX durch, damit sie bei
   jeder Fensterbreite von allein die richtige Laenge hat. */
.entwurf-schritte__plan {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.entwurf-schritte__linie {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 33px;
  height: 2px;
  background: repeating-linear-gradient(90deg,
    rgba(0, 0, 0, .32) 0 7px, transparent 7px 14px);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 2200ms cubic-bezier(.22, .61, .36, 1);
}
.entwurf-schritte__plan.is-da .entwurf-schritte__linie { transform: scaleX(1); }
.entwurf-schritte__station {
  position: relative;
  padding-top: 0;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 550ms ease-out var(--verzug, 0ms), transform 550ms ease-out var(--verzug, 0ms);
}
.entwurf-schritte__plan.is-da .entwurf-schritte__station { opacity: 1; transform: none; }
.entwurf-schritte__marke {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  padding: 13px;
  margin-bottom: 16px;
  border: 1.5px solid rgba(0, 0, 0, .16);
  border-radius: 50%;
  background: var(--nexin-primary, #f8f8f8);
  transition: border-color 250ms, background 250ms;
}
.entwurf-schritte__nr {
  position: absolute;
  right: -4px;
  bottom: -2px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--nexin-black, #000);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.entwurf-schritte__station:hover .entwurf-schritte__marke { border-color: var(--nexin-base, #ff8c00); background: #fff; }
.entwurf-schritte__station:hover .skizzen-icon__z { stroke: var(--nexin-base, #ff8c00); }
.entwurf-schritte__dauer {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 9px;
  border-radius: 20px;
  background: rgba(0, 0, 0, .06);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #4a4a4a;
  font-variant-numeric: tabular-nums;
}
.entwurf-schritte__titel { font-size: 18px; font-weight: 600; margin: 0 0 8px; }
.entwurf-schritte__text { margin: 0; font-size: 14.5px; font-weight: 300; line-height: 1.6; color: #3f3f3f; }
/* Der Stempel belegt die Ueberschrift: zwei Schritte kosten nichts. */
.entwurf-schritte__stempel {
  display: inline-block;
  margin-top: 12px;
  padding: 4px 10px;
  border: 1.5px solid var(--nexin-base, #ff8c00);
  border-radius: 3px;
  color: var(--nexin-base, #ff8c00);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  transform: rotate(-3deg);
}

/* ── Abo oder Kauf ─────────────────────────────────────────────────── */
.entwurf-wege { padding: 90px 0 96px; }
.entwurf-wege__fundament {
  margin-bottom: 46px;
  padding: 30px 32px 0;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 10px;
  background: var(--nexin-primary, #f8f8f8);
}
.entwurf-wege__fundament-label {
  display: block;
  margin-bottom: 26px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #6b6b6b;
}
.entwurf-wege__saeulen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: end;
}
.entwurf-wege__saeulen li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms ease-out var(--verzug, 0ms), transform 520ms ease-out var(--verzug, 0ms);
}
.entwurf-wege.is-da .entwurf-wege__saeulen li { opacity: 1; transform: none; }
/* Der Pfeilerkopf: das Symbol sitzt in einer Platte, nicht frei im Raum.
   Vorher schwebten die Zeichnungen klein und duenn in einer weissen
   Flaeche und wirkten wie Aufkleber. */
.entwurf-wege__pfeiler-kopf {
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  padding: 17px;
  border: 1.5px solid rgba(0, 0, 0, .2);
  border-radius: 8px;
  background: #fff;
  transition: border-color 250ms, box-shadow 250ms;
}
.entwurf-wege__saeulen li:hover .entwurf-wege__pfeiler-kopf {
  border-color: var(--nexin-base, #ff8c00);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .09);
}
.entwurf-wege__saeulen li:hover .skizzen-icon__z { stroke: var(--nexin-base, #ff8c00); }
.entwurf-wege__pfeiler-schaft {
  width: 2px;
  height: 22px;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .34) 0 6px, transparent 6px 11px);
}
.entwurf-wege__saeulen strong { margin-top: 14px; font-size: 15.5px; font-weight: 600; }
.entwurf-wege__pfeiler-text {
  margin-top: 5px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.55;
  color: #4a4a4a;
}
/* Erdreich-Schraffur: das Zeichen fuer "hier ist der Baugrund". */
.entwurf-wege__baugrund {
  height: 15px;
  margin-top: 22px;
  border-top: 2px solid rgba(0, 0, 0, .55);
  background: repeating-linear-gradient(45deg,
    rgba(0, 0, 0, .34) 0 1.5px, transparent 1.5px 9px);
}
.entwurf-wege__grundsatz {
  margin: 0;
  padding: 20px 0 24px;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.6;
  color: #4a4a4a;
}
.entwurf-wege__grundsatz strong { font-weight: 600; color: var(--nexin-black, #000); }

/* Das Zahlungsbild: der Unterschied der beiden Wege auf einen Blick. */
.zahlbild { margin: 22px 0 4px; }
.zahlbild svg { display: block; width: 100%; height: auto; }
.zahlbild__achse { stroke: rgba(0, 0, 0, .5); stroke-width: 1.5; }
.zahlbild__teil { stroke: rgba(0, 0, 0, .28); stroke-width: 1; }
.zahlbild__leer { stroke: rgba(0, 0, 0, .22); stroke-width: 2; stroke-dasharray: 3 6; }
.zahlbild__start, .zahlbild__monat {
  transform: scaleY(0);
  transform-origin: center bottom;
  transform-box: fill-box;
}
.zahlbild__start { fill: var(--nexin-black, #000); }
.zahlbild__monat { fill: var(--nexin-base, #ff8c00); }
.is-da .zahlbild__start,
.is-da .zahlbild__monat {
  transform: scaleY(1);
  transition: transform 620ms cubic-bezier(.2, .8, .3, 1) var(--verzug, 60ms);
}
.zahlbild figcaption {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
  color: #4a4a4a;
}
.zahlbild figcaption strong { font-weight: 700; color: var(--nexin-black, #000); }

.entwurf-wege__hilfe { margin-bottom: 28px; text-align: center; }
.entwurf-wege__hilfe-frage {
  display: block;
  margin-bottom: 14px;
  font-size: 20px;
  font-weight: 600;
}
.entwurf-wege__merksaetze { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.entwurf-wege__merksatz {
  padding: 9px 16px;
  border: 1.5px solid rgba(0, 0, 0, .2);
  border-radius: 22px;
  background: transparent;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 400;
  cursor: pointer;
  transition: border-color 220ms, background 220ms, color 220ms, transform 220ms;
}
.entwurf-wege__merksatz:hover { border-color: var(--nexin-black, #000); transform: translateY(-1px); }
.entwurf-wege__merksatz.is-aktiv {
  border-color: var(--nexin-black, #000);
  background: var(--nexin-black, #000);
  color: #fff;
}

.entwurf-wege__raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  /* stretch, damit beide Karten gleich hoch sind: Der schwarze Abschluss
     sitzt dann in beiden Wegen auf derselben Linie und die Karten lesen
     sich als Vergleich statt als zwei zufaellige Bloecke. */
  align-items: stretch;
}
.entwurf-wege__karte {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 30px 26px;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 10px;
  background: #fff;
  transition: border-color 300ms, box-shadow 300ms, transform 300ms, opacity 300ms;
}
.entwurf-wege__karte.is-passt {
  border-color: var(--nexin-base, #ff8c00);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .1);
  transform: translateY(-4px);
}
.entwurf-wege__karte.is-blass { opacity: .55; }
.entwurf-wege__karte-kopf { padding-bottom: 20px; border-bottom: 1px solid rgba(0, 0, 0, .1); }
.entwurf-wege__tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nexin-base, #ff8c00);
}
.entwurf-wege__titel { font-size: 26px; font-weight: 600; margin: 2px 0 0; }
.entwurf-wege__kurz { margin: 4px 0 10px; font-size: 16px; font-weight: 400; }
.entwurf-wege__fuer { margin: 0; font-size: 14.5px; font-weight: 300; line-height: 1.55; color: #6b6b6b; }
.entwurf-wege__zeilen { margin: 0; padding: 22px 0 0; }
.entwurf-wege__zeile { margin-bottom: 18px; }
.entwurf-wege__zeile dt {
  position: relative;
  padding-left: 20px;
  margin-bottom: 4px;
  font-size: 15.5px;
  font-weight: 600;
}
.entwurf-wege__zeile dt::before {
  content: "";
  position: absolute;
  left: 0;
  top: .66em;
  width: 11px;
  height: 2px;
  background: var(--nexin-base, #ff8c00);
}
.entwurf-wege__zeile dd {
  margin: 0 0 0 20px;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.6;
  color: #4a4a4a;
}
/* Der Abschluss gehoert zum jeweiligen Weg: Beteiligung beim Abo,
   Exklusivitaet beim Kauf. Vorher stand das als ein Band ueber beiden. */
.entwurf-wege__schluss {
  margin-top: auto;
  padding: 20px 22px;
  /* Der unsichtbare Rahmen ist Absicht: Auf der dunklen Karte hat der
     Abschluss einen sichtbaren Umriss. Ohne dieses Gegenstueck saessen die
     beiden Bloecke drei Pixel versetzt, und genau das faellt beim
     Nebeneinanderlesen auf. */
  border: 1.5px solid transparent;
  border-radius: 8px;
  background: var(--nexin-black, #000);
  color: #fff;
}
.entwurf-wege__schluss h4 { margin: 0 0 8px; font-size: 17px; font-weight: 600; color: #fff; }
.entwurf-wege__schluss p { margin: 0; font-size: 14.5px; font-weight: 300; line-height: 1.65; color: rgba(255, 255, 255, .9); }
.entwurf-wege__empfehlung {
  position: absolute;
  top: -12px;
  right: 22px;
  padding: 5px 12px;
  border-radius: 20px;
  background: var(--nexin-base, #ff8c00);
  color: #000;
  font-size: 12px;
  font-weight: 700;
}
/* Die dunkle Karte.
   Alles, was auf Weiss stimmte, muss hier gegengerechnet werden: Der
   schwarze Startbalken waere unsichtbar, der schwarze Abschlussblock
   ebenfalls, und Fliesstext in #4a4a4a faellt unter die Lesbarkeit.
   Deshalb kein Filter und kein "invert", sondern eigene Werte pro
   Element - Kontrast nachgemessen statt geschaetzt. */
.entwurf-wege__karte.is-dunkel {
  border-color: var(--nexin-black, #000);
  background: var(--nexin-black, #000);
  color: #fff;
}
.entwurf-wege__karte.is-dunkel .entwurf-wege__karte-kopf { border-bottom-color: rgba(255, 255, 255, .2); }
.entwurf-wege__karte.is-dunkel .entwurf-wege__titel { color: #fff; }
.entwurf-wege__karte.is-dunkel .entwurf-wege__kurz { color: #fff; }
.entwurf-wege__karte.is-dunkel .entwurf-wege__fuer { color: rgba(255, 255, 255, .72); }
.entwurf-wege__karte.is-dunkel .entwurf-wege__zeile dt { color: #fff; }
.entwurf-wege__karte.is-dunkel .entwurf-wege__zeile dd { color: rgba(255, 255, 255, .78); }
/* Der Abschluss war das Gegenteil: schwarzer Block auf Weiss. Auf der
   dunklen Karte wird daraus ein umrissenes Feld, sonst verschwindet er. */
.entwurf-wege__karte.is-dunkel .entwurf-wege__schluss {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, .38);
}
.entwurf-wege__karte.is-dunkel .entwurf-wege__schluss h4 { color: var(--nexin-base, #ff8c00); }
.entwurf-wege__karte.is-dunkel .zahlbild__start { fill: #fff; }
.entwurf-wege__karte.is-dunkel .zahlbild__achse { stroke: rgba(255, 255, 255, .6); }
.entwurf-wege__karte.is-dunkel .zahlbild__teil { stroke: rgba(255, 255, 255, .34); }
.entwurf-wege__karte.is-dunkel .zahlbild__leer { stroke: rgba(255, 255, 255, .3); }
.entwurf-wege__karte.is-dunkel .zahlbild figcaption { color: rgba(255, 255, 255, .78); }
.entwurf-wege__karte.is-dunkel .zahlbild figcaption strong { color: #fff; }
.entwurf-wege__karte.is-dunkel.is-passt { box-shadow: 0 16px 44px rgba(0, 0, 0, .3); }

.entwurf-wege__wechsel {
  margin: 26px 0 0;
  padding: 18px 22px;
  border: 1px dashed rgba(0, 0, 0, .28);
  border-radius: 8px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.65;
  text-align: center;
}
.entwurf-wege__wechsel strong { font-weight: 600; }

.entwurf-preise { padding: 90px 0 96px; background: var(--nexin-primary, #f8f8f8); }
.entwurf-preise__raster {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 46px;
  align-items: start;
}
.entwurf-preise__erklaerung p {
  margin: 0 0 16px;
  font-size: 16.5px;
  font-weight: 300;
  line-height: 1.7;
  max-width: 52ch;
}
.entwurf-preise__klein { font-size: 14px !important; color: #4a4a4a; }

.entwurf-preisdoc__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.entwurf-preisdoc__tab {
  padding: 9px 18px;
  border: 1px solid rgba(0, 0, 0, .22);
  border-radius: 999px;
  background: #fff;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--nexin-black, #000);
  cursor: pointer;
  transition: background 200ms, border-color 200ms, color 200ms;
}
.entwurf-preisdoc__tab:hover { border-color: var(--nexin-base, #ff8c00); }
.entwurf-preisdoc__tab.is-aktiv {
  background: var(--nexin-black, #000);
  border-color: var(--nexin-black, #000);
  color: #fff;
}

.entwurf-preisdoc__blatt {
  position: relative;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .16);
  border-radius: 12px;
  padding: 30px 32px 26px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .07);
  animation: preisdoc-rein 320ms ease;
}
@keyframes preisdoc-rein {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .entwurf-preisdoc__blatt { animation: none; }
}
.entwurf-preisdoc__stempel {
  position: absolute;
  top: -12px;
  right: 24px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--nexin-base, #ff8c00);
  color: #000;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.entwurf-preisdoc__titel { font-size: 21px; font-weight: 600; margin: 0 0 4px; padding-right: 40px; }
.entwurf-preisdoc__meta { margin: 0 0 20px; font-size: 14px; font-weight: 300; color: #6b6b6b; }
.entwurf-preisdoc__zeilen { margin: 0; }
.entwurf-preisdoc__zeile {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 0;
}
.entwurf-preisdoc__zeile + .entwurf-preisdoc__zeile { border-top: 1px solid rgba(0, 0, 0, .07); }
.entwurf-preisdoc__zeile dt { font-size: 15.5px; font-weight: 300; color: #3f3f3f; }
.entwurf-preisdoc__zeile dt::after {
  /* Punktlinie zum Betrag, wie auf einem Beleg. */
  content: "";
  display: inline-block;
}
.entwurf-preisdoc__zeile::after { content: none; }
.entwurf-preisdoc__zeile dd {
  margin: 0 0 0 auto;
  font-size: 20px;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.entwurf-preisdoc__fuss {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px dashed rgba(0, 0, 0, .22);
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.6;
  color: #4a4a4a;
}
.entwurf-preise__badges {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 26px 44px;
}
.entwurf-preise__badges li { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; }
.entwurf-preise__badges img { width: 44px; height: 44px; }

/* Beweise */
.entwurf-beweise { padding: 90px 0 96px; }
.entwurf-beweise__raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.entwurf-beweise__bild {
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;
  aspect-ratio: 3 / 2;
  background: #eee;
}
.entwurf-beweise__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.entwurf-beweise__fuer {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--nexin-gray);
}
.entwurf-beweise__name { font-size: 20px; font-weight: 600; margin: 6px 0 8px; }
.entwurf-beweise__ergebnis { margin: 0; font-size: 15px; font-weight: 300; line-height: 1.6; color: #3f3f3f; }
.entwurf-beweise__note { margin: 30px 0 0; font-size: 14.5px; font-weight: 300; color: #4a4a4a; max-width: 760px; }

/* Aktion schmal */
.entwurf-aktion { padding: 0 0 8px; }
.entwurf-aktion__zeile {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 24px;
  border: 1px solid rgba(0, 0, 0, .16);
  border-radius: 12px;
  background: #fff;
  transition: border-color 180ms;
}
.entwurf-aktion__zeile:hover { border-color: var(--nexin-base, #ff8c00); }
.entwurf-aktion__frist {
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--nexin-base, #ff8c00);
  color: #000;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.entwurf-aktion__text { font-size: 16px; font-weight: 500; color: var(--nexin-black, #000); }
.entwurf-aktion__pfeil { margin-left: auto; font-size: 18px; color: var(--nexin-base, #ff8c00); }

/* Umbrueche */
@media (max-width: 1199px) {
  .entwurf-schritte__plan { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .entwurf-schritte__linie { display: none; }
  .entwurf-wege__saeulen { grid-template-columns: 1fr 1fr; gap: 32px 30px; }
}
@media (max-width: 991px) {
  .entwurf-wege__raster { grid-template-columns: 1fr; }
  .entwurf-wege__karte.is-blass { opacity: 1; }
  .entwurf-schritte__intro { grid-template-columns: 1fr; gap: 24px; }
  .entwurf-preise__raster { grid-template-columns: 1fr; gap: 28px; }
  .entwurf-beweise__raster { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .entwurf-schritte__plan { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575px) {
  .entwurf-deal { padding: 46px 0 50px; }
  .entwurf-schritte, .entwurf-wege, .entwurf-preise, .entwurf-beweise { padding: 56px 0 60px; }
  .entwurf-schritte__plan { grid-template-columns: 1fr; row-gap: 30px; }
  .entwurf-wege__saeulen { grid-template-columns: 1fr; gap: 26px; }
  .entwurf-wege__pfeiler-schaft { display: none; }
  .entwurf-wege__fundament { padding: 24px 20px 0; }
  .entwurf-wege__karte { padding: 24px 22px 22px; }
  .entwurf-wege__hilfe { flex-direction: column; align-items: stretch; }
  .entwurf-wege__merksatz { text-align: left; }
  .entwurf-aktion__zeile { flex-wrap: wrap; gap: 10px; }
  .entwurf-aktion__pfeil { display: none; }
}

/* ── Werkbank: der Einstieg als Skizzenblock ───────────────────────────
   Hebt sich vom Rest der Seite ab, weil hier gearbeitet wird: kariertes
   Papier statt glatter Flaeche, Bleistiftskizzen statt Kacheln, und der
   Bauplan zeichnet sich mit jeder Antwort weiter. */
.werkbank {
  padding: 96px 0 100px;
  position: relative;
  /* Feines Karopapier: zwei Linienraster uebereinander, das groebere alle
     fuenf Kaestchen. Rein aus Verlaeufen gebaut, kein Bild noetig. */
  background-color: #fbfaf7;
  background-image:
    linear-gradient(rgba(0, 0, 0, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, .045) 1px, transparent 1px),
    linear-gradient(rgba(0, 0, 0, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, .075) 1px, transparent 1px);
  background-size: 22px 22px, 22px 22px, 110px 110px, 110px 110px;
  border-top: 1px solid rgba(0, 0, 0, .1);
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.werkbank__kopf { max-width: 640px; }

/* Die drei Skizzen. Leicht verdreht, mit Klebestreifen - sie liegen auf
   dem Papier, statt darin gesetzt zu sein. */
.werkbank__kacheln {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.werkbank__kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 26px 24px 24px;
  text-align: left;
  font-family: inherit;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .07);
  transition: transform 260ms cubic-bezier(.22, .61, .36, 1), box-shadow 260ms, border-color 200ms;
}
.werkbank__kachel:nth-child(1) { transform: rotate(-1.1deg); }
.werkbank__kachel:nth-child(2) { transform: rotate(.5deg); }
.werkbank__kachel:nth-child(3) { transform: rotate(-.4deg); }
.werkbank__kachel::before {
  /* Klebestreifen oben rechts. */
  content: "";
  position: absolute;
  top: -9px;
  right: 22px;
  width: 62px;
  height: 20px;
  background: rgba(255, 140, 0, .18);
  border-left: 1px solid rgba(0, 0, 0, .06);
  border-right: 1px solid rgba(0, 0, 0, .06);
  transform: rotate(3deg);
}
.werkbank__kachel:hover,
.werkbank__kachel:focus-visible {
  transform: rotate(0deg) translateY(-4px);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .13);
  border-color: var(--nexin-base, #ff8c00);
}
.werkbank__kachel-bild {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 150px;
  margin-bottom: 8px;
}
.werkbank__kachel-bild img { max-height: 100%; max-width: 74%; width: auto; height: auto; }
.werkbank__kachel-titel { font-size: 19px; font-weight: 600; }
.werkbank__kachel-text { font-size: 15px; font-weight: 300; line-height: 1.5; color: #4a4a4a; }
.werkbank__kachel-los {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--nexin-base, #e07b1f);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Der Tisch: links das Gespraech, rechts das Blatt. */
.werkbank__tisch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: start;
}
.werkbank__gespraech {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: 6px;
  padding: 24px 26px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .06);
}
.werkbank__verlauf {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 46vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}
.werkbank__zeile { font-size: 16px; font-weight: 300; line-height: 1.6; }
.werkbank__zeile--assistent { padding-left: 14px; border-left: 2px solid rgba(0, 0, 0, .14); color: #3f3f3f; }
.werkbank__zeile--assistent.is-frage {
  border-left-color: var(--nexin-base, #ff8c00);
  font-size: 18px;
  font-weight: 500;
  color: var(--nexin-black, #000);
}
.werkbank__zeile--besucher {
  align-self: flex-end;
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--nexin-black, #000);
  color: #fff;
  font-weight: 400;
}
.werkbank__zeile.is-tippt { color: var(--nexin-gray); font-style: italic; }
.werkbank__eingabe { display: flex; gap: 12px; align-items: flex-end; margin-top: 20px; }
.werkbank__eingabe textarea {
  flex: 1;
  padding: 13px 15px;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 8px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 300;
  resize: vertical;
  background: #fff;
}
.werkbank__eingabe textarea:focus-visible { outline: 3px solid var(--nexin-base); outline-offset: 2px; }
.werkbank__eingabe .thm-btn[disabled] { opacity: .45; pointer-events: none; }
.werkbank__fehler {
  margin: 14px 0 0;
  padding: 10px 13px;
  border-left: 3px solid #d8544f;
  background: #fbeceb;
  font-size: 14.5px;
}
.werkbank__abschluss { margin-top: 20px; padding-top: 18px; border-top: 1px dashed rgba(0, 0, 0, .2); }
.werkbank__abschluss p { margin: 0 0 16px; font-size: 16px; font-weight: 300; line-height: 1.65; }
.werkbank__abschluss p:last-child { margin-bottom: 0; }

/* "Wir zeichnen deine Skizze" - der Punkt pulst, damit klar ist, dass
   etwas laeuft, ohne einen Spinner ins Skizzenbuch zu setzen. */
.werkbank__arbeitet { position: relative; padding-left: 20px; font-style: italic; color: #6b6b6b; }
.werkbank__arbeitet::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--nexin-base, #ff8c00);
  animation: werkbank-puls 1.1s ease-in-out infinite;
}
@keyframes werkbank-puls {
  0%, 100% { opacity: .25; transform: scale(.75); }
  50%      { opacity: 1;   transform: scale(1); }
}

.werkbank__mail-label {
  display: block;
  margin-bottom: 9px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.werkbank__mail-zeile { display: flex; gap: 12px; align-items: stretch; }
.werkbank__mail-zeile input {
  flex: 1;
  min-width: 0;
  padding: 13px 15px;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 300;
}
.werkbank__mail-zeile input:focus-visible { outline: 3px solid var(--nexin-base); outline-offset: 2px; }
.werkbank__mail-zeile .thm-btn[disabled] { opacity: .45; pointer-events: none; }
.werkbank__klein { margin: 12px 0 0 !important; font-size: 13.5px !important; color: #6b6b6b; }
.werkbank__klein a { color: var(--nexin-black, #000); text-decoration: underline; }
.werkbank__erfolg {
  margin: 0 !important;
  padding: 14px 16px;
  border-left: 3px solid var(--nexin-base, #ff8c00);
  background: rgba(var(--nexin-base-rgb, 255, 140, 0), .09);
}

/* Die fertige Skizze auf demselben Blatt wie der Bauplan: Sie ist die
   Reinschrift dessen, was daneben gezeichnet wurde, deshalb steht sie
   nicht in einer eigenen Sektion. */
.werkbank__skizze {
  position: relative;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px dashed rgba(0, 0, 0, .2);
  animation: werkbank-blatt 600ms ease-out both;
}
@keyframes werkbank-blatt {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.werkbank__skizze-stempel {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 11px;
  border: 1.5px solid var(--nexin-base, #ff8c00);
  border-radius: 3px;
  color: var(--nexin-base, #ff8c00);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  transform: rotate(-2.5deg);
}
.werkbank__skizze-h {
  margin: 18px 0 7px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
}
.werkbank__skizze-h:first-of-type { margin-top: 0; }
.werkbank__skizze-p { margin: 0 0 10px; font-size: 15px; font-weight: 300; line-height: 1.6; }
.werkbank__skizze-liste { list-style: none; margin: 0 0 12px; padding: 0; }
.werkbank__skizze-li {
  position: relative;
  margin: 0 0 7px;
  padding-left: 18px;
  list-style: none;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.55;
}
.werkbank__skizze-li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 8px;
  height: 1.5px;
  background: var(--nexin-base, #ff8c00);
}

/* Das Blatt mit dem Bauplan. */
.werkbank__blatt {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: 6px;
  padding: 18px 20px 22px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .06);
  position: sticky;
  top: 96px;
}
/* Sobald die Skizze auf dem Blatt steht, wird es zu lang zum Kleben. */
.werkbank__blatt:has(.werkbank__skizze) { position: static; }
.werkbank__blatt-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, .12);
}
.werkbank__blatt-titel { font-size: 16px; font-weight: 600; }
.werkbank__blatt-stand {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--nexin-base, #e07b1f);
  font-variant-numeric: tabular-nums;
}
.werkbank__legende { list-style: none; margin: 14px 0 0; padding: 0; }
.werkbank__legende li {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.45;
  color: var(--nexin-gray);
  transition: color 300ms;
}
.werkbank__legende li.is-da { color: var(--nexin-black, #000); font-weight: 500; }
.werkbank__haken {
  flex: 0 0 16px;
  color: var(--nexin-base, #ff8c00);
  font-weight: 700;
}

/* ── Der Bauplan zeichnet sich ─────────────────────────────────────────
   Jeder Pfad traegt seine Laenge als Strichmuster; der Versatz laeuft von
   voller Laenge auf null, das liest sich als gezogener Strich. 900px
   deckt jeden Pfad dieser Zeichnung ab. */
.bauplan { display: block; width: 100%; height: auto; margin-top: 14px; }
.bauplan path,
.bauplan circle {
  fill: none;
  stroke: #2b2b2b;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bauplan__hilfe path { stroke: rgba(0, 0, 0, .22); stroke-width: 1; stroke-dasharray: 5 6; }
.bauplan__stufe .z {
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  opacity: 0;
}
/* Sichtbar wird eine Stufe, sobald der Bauplan mindestens so weit ist. */
.bauplan[data-stufe="1"] .bauplan__stufe--1 .z,
.bauplan[data-stufe="2"] .bauplan__stufe--1 .z,
.bauplan[data-stufe="2"] .bauplan__stufe--2 .z,
.bauplan[data-stufe="3"] .bauplan__stufe--1 .z,
.bauplan[data-stufe="3"] .bauplan__stufe--2 .z,
.bauplan[data-stufe="3"] .bauplan__stufe--3 .z,
.bauplan[data-stufe="4"] .bauplan__stufe--1 .z,
.bauplan[data-stufe="4"] .bauplan__stufe--2 .z,
.bauplan[data-stufe="4"] .bauplan__stufe--3 .z,
.bauplan[data-stufe="4"] .bauplan__stufe--4 .z,
.bauplan[data-stufe="5"] .bauplan__stufe:not(.bauplan__stufe--6) .z,
.bauplan[data-stufe="6"] .bauplan__stufe .z {
  stroke-dashoffset: 0;
  opacity: 1;
  transition: stroke-dashoffset 900ms ease-out, opacity 200ms ease-out;
}
/* Gestaffelt, damit es gezogen wirkt und nicht aufblendet. */
.bauplan__stufe .z:nth-child(2) { transition-delay: 120ms; }
.bauplan__stufe .z:nth-child(3) { transition-delay: 240ms; }
.bauplan__stufe .z:nth-child(4) { transition-delay: 360ms; }
.bauplan__stufe .z:nth-child(5) { transition-delay: 480ms; }
.bauplan__stufe .z:nth-child(6) { transition-delay: 600ms; }
.bauplan__stufe .z:nth-child(7) { transition-delay: 720ms; }
.bauplan__stufe .z:nth-child(8) { transition-delay: 840ms; }
.bauplan__pfeil { stroke-dasharray: 4 4 !important; stroke-dashoffset: 0 !important; }
.bauplan[data-stufe="5"] .bauplan__stufe--5 .z,
.bauplan[data-stufe="6"] .bauplan__stufe--5 .z { stroke: var(--nexin-base, #e07b1f); }
/* Stufe 6 zeichnet langsamer: Sie ueberbrueckt die Zeit, in der die Skizze
   geschrieben wird, und soll nicht vorher fertig sein. */
.bauplan[data-stufe="6"] .bauplan__stufe--6 .z { transition-duration: 1500ms; }
.bauplan__stufe--6 .z:nth-child(1) { transition-delay: 200ms; }
.bauplan__stufe--6 .z:nth-child(2) { transition-delay: 900ms; }
.bauplan__stufe--6 .z:nth-child(3) { transition-delay: 1500ms; }
.bauplan__stufe--6 .z:nth-child(4) { transition-delay: 2100ms; }
.bauplan__stufe--6 .z:nth-child(5) { transition-delay: 2700ms; }
.bauplan__stufe--6 .z:nth-child(6) { transition-delay: 3200ms; }

@media (prefers-reduced-motion: reduce) {
  .bauplan__stufe .z { transition: none !important; }
  .skizzen-icon__z, .entwurf-schritte__linie, .entwurf-schritte__station,
  .entwurf-wege__saeulen li, .zahlbild__start, .zahlbild__monat { transition: none !important; }
  .zahlbild__start, .zahlbild__monat { transform: scaleY(1); }
  .werkbank__kachel { transition: none; }
  .werkbank__skizze { animation: none; }
  .werkbank__arbeitet::before { animation: none; opacity: 1; }
}

@media (max-width: 991px) {
  .werkbank__kacheln { gap: 18px; }
  .werkbank__kachel { transform: none !important; }
  .werkbank__tisch { grid-template-columns: 1fr; gap: 22px; }
  /* Auf schmalen Schirmen wandert das Blatt nach oben: Erst sehen, was
     entsteht, dann antworten. */
  .werkbank__blatt { position: static; order: -1; }
  .werkbank__verlauf { max-height: 40vh; }
}
@media (max-width: 575px) {
  .werkbank { padding: 60px 0 64px; }
  .werkbank__eingabe { flex-direction: column; align-items: stretch; }
  .werkbank__mail-zeile { flex-direction: column; }
}

/* ══ Touch und kleine Schirme ═════════════════════════════════════════
   Nachgemessen an echten Seitenladungen bei 320, 390, 768, 1024 und 1600
   Pixeln. Ueberlauf gab es auf keiner Seite; was fehlte, waren
   Tippflaechen und lesbare Schriftgroessen.

   Die Trennung ist Absicht: Tippflaechen haengen an der EINGABEART, nicht
   an der Fensterbreite. Ein Tablet mit 800 Pixeln wird mit dem Finger
   bedient und braucht dieselben Flaechen wie ein Handy - eine reine
   max-width-Regel haette es uebersprungen, genau das war der erste
   Messfehler hier. Schriftgroessen dagegen haengen an der Breite: Auf dem
   grossen Schirm ist klein gesetzt in Ordnung, im schmalen Layout nicht,
   weil dort ohnehin alles enger steht. */

@media (pointer: coarse) {
  /* Der Template-Mauszeiger ist ein Ring, der dem Zeiger folgt. Auf einem
     Touch-Geraet gibt es keinen Zeiger: Der Ring bleibt einfach stehen, wo
     er zuletzt war, und liegt dann als Fleck mitten im Text. Auf dem
     Desktop bleibt er, dort gehoert er zur Vorlage. */
  .custom-cursor__cursor,
  .custom-cursor__cursor-two { display: none !important; }

  /* Das Hamburger-Symbol war 18 mal 24 Pixel und ist auf dem Handy der
     EINZIGE Weg in die Navigation. Unter 44 Pixeln trifft man das mit dem
     Daumen nicht zuverlaessig. Die Flaeche waechst, das Symbol bleibt
     gleich gross. */
  .mobile-nav__toggler,
  .mobile-nav__close {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    min-height: 46px;
  }

  /* Knoepfe auf Daumengroesse. Im Hero waren sie 40 Pixel hoch, die
     Banner-Knoepfe weiter unten auf derselben Seite 56 - beides
     gleichzeitig falsch und uneinheitlich. */
  .thm-btn,
  .hero-video__pille,
  .entwurf-wege__merksatz,
  .entwurf-preisdoc__tab,
  .werkbank__kachel-los {
    min-height: 48px;
  }
  .hero-video__pille { padding-top: 0; padding-bottom: 0; }

  /* Eingabefelder: 16 Pixel Schrift, sonst zoomt iOS beim Antippen in die
     Seite hinein und der Besucher landet in einer verschobenen Ansicht.
     Dazu 48 Pixel Hoehe, vorher waren es 42. */
  input, select, textarea { font-size: 16px !important; }
  .contact-one__input-box input,
  .contact-one__input-box select,
  .werkbank__mail-zeile input {
    min-height: 48px;
  }
  .werkbank__eingabe textarea,
  .contact-one__input-box textarea { min-height: 96px; }
}

@media (max-width: 991px) {
  .werkbank__kacheln { grid-template-columns: repeat(3, 1fr); }

  /* Der Montags-Kalender ist die erklaerendste Grafik der Startseite und
     hatte im schmalen Layout 10 bis 12,5 Pixel Schrift. Als Zeichnung
     nett, zum Lesen zu klein. */
  .arkant-kalender__zeit { font-size: 12.5px; }
  .arkant-kalender__uhrzeit { font-size: 12px; opacity: .75; }
  .arkant-kalender__badge { font-size: 11px; line-height: 19px; min-width: 19px; }
  .arkant-fenster__titel { font-size: 13px; }
  .arkant-kalender__tag { font-size: 12px; }

  /* Gesperrte Versalien brauchen mehr Groesse als normaler Text, um noch
     lesbar zu sein. Dauer-Chips, Stempel und Etiketten lagen bei 11 bis
     11,5 Pixeln. */
  .entwurf-schritte__dauer { font-size: 12.5px; letter-spacing: .04em; }
  .entwurf-schritte__stempel { font-size: 12px; letter-spacing: .09em; }
  .entwurf-wege__tag,
  .entwurf-wege__fundament-label,
  .entwurf-preisdoc__stempel,
  .arkant-case__branche,
  .arkant-chat__wer { font-size: 12.5px; }

  /* Die Zaehler im Kalender bleiben bei 11 Pixeln: Es sind Ziffern in
     einem runden Feld, groesser wuerde die Form sprengen. */
}

@media (max-width: 991px) {
  /* "Nach oben" war ein um 90 Grad gedrehter Balken, 35 mal 117 Pixel, am
     rechten Rand bei right: -12px. Im schmalen Layout ragte er damit in
     den Fliesstext. Auf kleinen Schirmen jetzt ein rundes Feld in der
     Ecke: gleiche Funktion, 46 Pixel Tippflaeche, kein Schriftzug, und
     weit genug vom Text weg. Der Pfeil wird aus Rahmenkanten gebaut, weil
     das Element im Original nur einen Balken enthaelt. */
  .scroll-to-top {
    right: 16px !important;
    bottom: 18px !important;
    width: 46px !important;
    height: 46px !important;
    transform: none !important;
    border-radius: 50%;
    background: var(--nexin-black, #000) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
    align-items: center;
    justify-content: center;
  }
  .scroll-to-top__text { display: none !important; }
  .scroll-to-top__wrapper {
    width: 13px !important;
    height: 13px !important;
    background: transparent !important;
    border-left: 2.5px solid var(--nexin-base, #ff8c00);
    border-top: 2.5px solid var(--nexin-base, #ff8c00);
    transform: rotate(45deg);
    margin-top: 4px;
    overflow: visible !important;
  }
  .scroll-to-top__inner { display: none !important; }
}

@media (max-width: 767px) {
  .werkbank__kacheln { grid-template-columns: 1fr; gap: 22px; }
  .werkbank__zettel { margin-left: auto; margin-right: auto; max-width: none; transform: none; }
}

@media (max-width: 575px) {
  .arkant-kalender__termin { font-size: 13.5px; padding: 7px 9px; }
  .arkant-kalender__titel { font-size: 16px; }
  .team-one__title { line-height: 1.35; }
}

/* ── Schemazeichnungen neben dem Text ──────────────────────────────────
   /software war der textlastigste Teil der Seite: drei Abschnitte am
   Stueck, nur Ueberschrift und Absaetze. Die Zeichnungen daneben nehmen
   die Bildsprache des Bauplans auf (orange Linien, Masspfeile,
   gestrichelte Hilfslinien) und erklaeren, was der Abschnitt sagt.

   Zwei Kinder, nicht viele: Text und Zeichnung. Ein frueherer Stand liess
   die Ueberschrift und jeden Absatz einzeln im Raster liegen; die
   Zeichnung musste dann ueber "span 20" Zeilen greifen, um daneben zu
   stehen, und erzeugte damit zwanzig Rasterzeilen mit je 44 Pixel
   Abstand. Nachgemessen: Inhalt 310 Pixel hoch, Kasten 1146. Genau das
   waren die "viel zu vielen Abstaende". */
.arkant-prose__raster {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 48px;
  align-items: center;
}
/* Spalten ausdruecklich zuweisen. Die Zeichnung steht im Quelltext VOR
   dem Text - fuer Vorlesesoftware ist das egal, sie traegt kein alt, das
   etwas erklaert. Ohne diese Zuweisung landet sie aber automatisch in
   Spalte eins und wird dort 962 statt 280 Pixel breit. */
.arkant-prose__text { grid-column: 1; grid-row: 1; }
.arkant-prose__schema { grid-column: 2; grid-row: 1; }
.arkant-prose__text > :first-child { margin-top: 0; }
.arkant-prose__text > :last-child { margin-bottom: 0; }
.arkant-prose__schema img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;   /* nimmt das Weiss der Zeichnung raus */
}
@media (max-width: 991px) {
  .arkant-prose__raster { grid-template-columns: 1fr; gap: 20px; }
  .arkant-prose__text { grid-column: 1; grid-row: 2; }
  /* Gestapelt steht die Zeichnung ueber dem Text und kostet dort volle
     Hoehe. Drei Abschnitte am Stueck ergeben schnell zwei Bildschirme
     Zeichnung. Deshalb schmaler als auf dem grossen Schirm. */
  .arkant-prose__schema { grid-column: 1; grid-row: 1; max-width: 150px; }
}


/* ── FAQ-Frage: Ebene korrigiert, Aussehen festgehalten ────────────────
   Die Fragen standen als h4 direkt unter einer h2 - eine Ebene wird damit
   uebersprungen, was Vorlesesoftware und Suchmaschinen woertlich lesen und
   was die FAQ-Auszeichnungsdaten stoert. Jetzt h3. Damit sich optisch
   nichts aendert, sind die vorher geerbten Werte hier festgeschrieben
   (nachgemessen an der Live-Seite: 24px/34px, Gewicht 700). */
.faq-one__inner .faq-one-accrodion .accrodion-title h3 {
  margin: 0;
  font-size: 24px;
  line-height: 34px;
  font-weight: 700;
}
@media (max-width: 767px) {
  .faq-one__inner .faq-one-accrodion .accrodion-title h3 {
    font-size: 20px;
    line-height: 29px;
  }
}

/* ── Lange deutsche Woerter auf schmalen Schirmen ──────────────────────
   Deutsch baut Komposita am laufenden Band ("Digital-Architekt" ist bei
   30 Pixeln Schriftgroesse 213 Pixel breit). Passt so ein Wort nicht mehr
   in die Zeile, braucht der Browser eine Erlaubnis zum Trennen: Er steht
   von Haus aus auf hyphens:manual.

   Vorsorge, kein Fehlerbericht: Ein gemessener Ueberlauf lag dem hier
   NICHT zugrunde. Die Messung, die ihn zu zeigen schien, hat die
   Verschiebungen der Ueberschriften-Animation mitgemessen (siehe den
   ausfuehrlichen Vermerk in TemplateScripts.jsx). Die Trennung bleibt
   trotzdem drin, weil sie bei echten langen Woertern hilft und nichts
   kostet.

   Nur unter 768 Pixeln: In grossen Schaugroessen sieht Trennung unruhig
   aus, und dort ist Platz genug. */
@media (max-width: 767px) {
  h1, h2, h3, h4,
  .section-title__title,
  .section-title__title .split-line,
  .entwurf-kopf h2,
  .hero-video__claim,
  .page-header__title {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
}

/* Der Montags-Kalender ist eine Nachbildung mit engen Spalten. Bei 320
   Pixeln wurden die Betreffzeilen abgeschnitten statt umzubrechen. */
@media (max-width: 400px) {
  .arkant-kalender__betreff {
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
  .arkant-kalender__termin { padding: 6px 7px; }
}

/* ── Bildmasse: Platzhalter ja, feste Hoehe nein ──────────────────────
   Die width/height-Attribute an einem Bild sind fuer den Browser eine
   Formatierungsangabe: Er setzt daraus eine feste Pixelhoehe. Genau das
   ist ihr Zweck - er kann den Platz reservieren, bevor das Bild da ist,
   und das Layout springt nicht.
   Sobald aber das CSS die Groesse bestimmt, kollidieren beide. Bei den
   Teamfotos war das sichtbar: aspect-ratio 3/4 wurde ignoriert, weil die
   Hoehe schon feststand, und ein Querformat-Foto (1100x619) stand neben
   drei Hochformaten - 300x619 neben 300x1100.
   height:auto gibt die Hoehe wieder ans CSS zurueck. Der Platzhalter
   bleibt erhalten, denn das Verhaeltnis kennt der Browser weiterhin. */
.team-one__img img,
.arkant-feature__img img,
.arkant-prose__schema img,
.entwurf-schritte__foto img,
.entwurf-beweise__bild img,
.werkbank__kachel-bild img,
.arkant-case__bild img {
  height: auto;
}

/* Zwei Abschnitte der Vorlage bringen 120 Pixel Deckel mit. Das passt auf
   der Startseite, wo sie einzeln zwischen ganz anderen Bloecken stehen -
   auf den Unterseiten stehen sie in einer Reihe gleichartiger Abschnitte
   und wirken dort wie ein Loch. */
.arkant-page-header + .service-one,
.arkant-page-header + .process-one,
.arkant-feature + .service-one,
.arkant-prose + .service-one,
.arkant-feature + .process-one,
.arkant-prose + .process-one {
  padding-top: 72px;
}

/* ── Verweise auf die Beratung (Sascha Dargel) ─────────────────────────
   Sascha beraet, Arkant baut. Wer noch nicht weiss, wo es hakt, braucht
   kein Werkzeug. Drei Stellen verweisen deshalb hinueber: die neue
   FAQ-Frage, der Team-Eintrag und die zweite Einstiegskachel.

   Der Nachsatz an der Kachel steht bewusst AUSSERHALB des Knopfes: Ein
   Link in einem Knopf ist kaputtes Markup, und ein Klick auf die Kachel
   soll den Chat oeffnen, nicht die fremde Seite. */
/* Der kleine Zettel unten rechts.
   Er stand vorher unter der mittleren Kachel und hat dort zwei Dinge
   kaputt gemacht: Die Spalte wurde hoeher als die anderen beiden, und er
   las sich wie ein vierter Einstieg, obwohl er woanders hinfuehrt. Jetzt
   liegt er neben dem Raster, wie ein nachtraeglich hingeklebter Zettel,
   und beruehrt die drei Skizzen nicht mehr.

   Gelb statt Papierweiss, damit er sich als Randnotiz zu erkennen gibt
   und nicht als vergessene vierte Kachel. */
.werkbank__zettel {
  position: relative;
  width: fit-content;
  max-width: 340px;
  margin: 30px 6px 0 auto;
  padding: 16px 20px 18px;
  background: #fdf3d0;
  border: 1px solid rgba(0, 0, 0, .1);
  box-shadow: 2px 3px 10px rgba(0, 0, 0, .1);
  transform: rotate(1.6deg);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--nexin-black, #000);
}
/* Klebestreifen wie an den Kacheln, nur schmaler. */
.werkbank__zettel::before {
  content: "";
  position: absolute;
  top: -9px;
  right: 26px;
  width: 54px;
  height: 18px;
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(0, 0, 0, .07);
  transform: rotate(-4deg);
}
.werkbank__zettel a {
  color: var(--nexin-black, #000);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.team-one__beratung {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.faq-one__inner .accrodion-content a {
  color: var(--nexin-black, #000);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* WhatsApp-Zeile im Abschluss-Banner und in der Fusszeile. Bewusst
   zurueckhaltend: Der Haupt-Weg bleibt der Termin, das hier ist die
   Abkuerzung fuer alle, die weder tippen noch anrufen wollen. */
.video-one__whatsapp,
.footer-widget__whatsapp {
  margin: 14px 0 0;
  font-size: 15px;
  font-weight: 300;
}
.video-one__whatsapp { color: rgba(255, 255, 255, .82); }
.video-one__whatsapp a,
.footer-widget__whatsapp a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-widget__whatsapp { color: rgba(255, 255, 255, .78); }

/* ── Flaechen behalten das helle CI-Grau ───────────────────────────────
   --nexin-gray ist zur Schriftfarbe geworden (siehe :root). Wo die
   Vorlage damit FLAECHEN oder LINIEN faerbt, waere ein dunkler Ton
   falsch: Aus einem zarten Trennstrich wuerde ein Balken. Diese Stellen
   holen sich das urspruengliche #9d9d9c hier zurueck. */
.nice-select::after,
.nice-select .option::after,
.arkant-upload,
.arkant-upload--aktiv,
.service-one__single-inner-shape-1,
.banner-one__shape-3,
.pricing-one__dot,
.pricing-one__line,
.blog-one__date-shape {
  border-color: var(--nexin-flaeche-grau);
}
.service-one__single-inner-shape-1,
.banner-one__shape-3,
.pricing-one__dot,
.pricing-one__line,
.blog-one__date-shape {
  background-color: var(--nexin-flaeche-grau);
}

/* ── Orange als Schrift: dunklere Fassung ─────────────────────────────
   Gemessen ueber 12 Seiten: Das Marken-Orange als KLEINE Schrift auf
   hellem Grund liegt bei 2,2 bis 2,33, gefordert sind 4,5. Diese Stellen
   nehmen deshalb den dunkleren Ton. Was Flaeche ist (Knoepfe, Balken,
   Rahmen) und die grosse Schauschrift im Hero behalten das helle Orange:
   Dort traegt die Farbe die Marke, nicht den Text. */
.werkbank__kachel-los,
.entwurf-schritte__stempel,
.entwurf-wege__tag,
.werkbank__skizze-stempel,
.arkant-form-result--ok,
.entwurf-wege__hilfe-frage,
.arkant-chat__wer,
.arkant-case__branche {
  color: var(--nexin-base-text);
}
.entwurf-schritte__stempel,
.werkbank__skizze-stempel {
  border-color: var(--nexin-base-text);
}
/* NICHT dabei: .entwurf-preisdoc__stempel und .entwurf-aktion__frist. Die
   beiden sitzen auf einer orangen Flaeche und tragen dort schwarze
   Schrift. Ein dunkleres Orange waere dort 2,27 und damit schlechter als
   vorher. Ein erster Anlauf hatte sie mit in der Liste - der Kontrast
   haengt am Grund, nicht am Element. */

/* Auf der dunklen Kauf-Karte steht der Weg-Aufkleber auf Schwarz. Dort
   ist das helle Marken-Orange richtig (8,4), das dunkle waere 3,96. */
.entwurf-wege__karte.is-dunkel .entwurf-wege__tag {
  color: var(--nexin-base, #ff8c00);
}

/* Textlinks in Orange auf hellem Grund. Betrifft "Nach oben", den
   Verweis auf die Teilnahmebedingungen und Links im Fliesstext. */
.scroll-to-target,
.arkant-prose a,
.footer-widget__text a,
.entwurf-preise__klein a,
.arkant-konzept-seite__fuss a,
.arkant-konzept-seite__hinweis a {
  color: var(--nexin-base-text);
}
/* NICHT .contact-one__text a: Der Kontaktabschnitt steht auf schwarzem
   Grund, dort ist das helle Marken-Orange richtig (8,4). Ein erster
   Anlauf hatte ihn mit in der Liste und kam damit auf 3,96. Der Kontrast
   haengt am Grund, nicht am Element - dieser Fehler ist mir hier zweimal
   passiert. */
.arkant-case__ergebnis::before { color: var(--nexin-base-text); }

/* ── Das Ende der Skizze ───────────────────────────────────────────────
   Saschas Einwand: Das Ergebnis war unuebersichtlich, und es stand nicht
   da, was der Kunde damit anfangen soll. Drei Aenderungen:

   1. "Heute: ... / Danach: ..." ist ein Gegensatzpaar. Als lose Absaetze
      las es sich wie Fliesstext, die Aussage steckt aber im Vergleich.
   2. Die Fortschritts-Haken sind nach der Skizze weg (im JSX geregelt).
   3. Unter der Skizze stehen drei Wege statt eines Formulars weit oben in
      der anderen Spalte. */

.werkbank__skizze-wandel {
  position: relative;
  margin: 0 0 6px;
  padding: 7px 12px 7px 74px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.5;
}
.werkbank__skizze-wandel--heute { background: rgba(0, 0, 0, .035); }
.werkbank__skizze-wandel--danach { background: rgba(var(--nexin-base-rgb, 255, 140, 0), .09); margin-bottom: 18px; }
.werkbank__skizze-wann {
  position: absolute;
  left: 12px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.9;
}
.werkbank__skizze-wandel--heute .werkbank__skizze-wann { color: #6b6b6b; }
.werkbank__skizze-wandel--danach .werkbank__skizze-wann { color: var(--nexin-base-text); }

/* Die drei Wege nach der Skizze. */
.werkbank__weiter {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 2px solid var(--nexin-black, #000);
}
.werkbank__weiter-titel {
  margin: 0 0 18px;
  font-size: 19px;
  font-weight: 700;
}
.werkbank__weiter-schritt {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 12px;
  align-items: start;
  margin-bottom: 20px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.55;
}
.werkbank__weiter-schritt:last-child { margin-bottom: 0; }
.werkbank__weiter-schritt strong { font-weight: 600; }
.werkbank__weiter-nr {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1.5px solid var(--nexin-black, #000);
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.werkbank__weiter-tat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 12px 0 0;
}
.werkbank__weiter-anruf {
  color: var(--nexin-black, #000);
  font-size: 14.5px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.werkbank__weiter .werkbank__mail-zeile { margin-top: 12px; }
.werkbank__fertig-hinweis {
  margin: 0;
  padding: 14px 16px;
  border-left: 3px solid var(--nexin-black, #000);
  background: rgba(0, 0, 0, .035);
  font-size: 15px;
  font-weight: 300;
}
@media (max-width: 991px) {
  /* Gestapelt steht die Skizze ueber dem Gespraech, der Hinweis nach
     rechts waere dann falsch. */
  .werkbank__fertig-hinweis { display: none; }
}

/* ── Das Werkstattfenster waehrend des Zeichnens ───────────────────────
   Vorher stand hier eine Zeile mit einem pulsierenden Punkt, unten links
   in einer halben Spalte. Bei zehn bis zwanzig Sekunden Wartezeit sieht
   man daran nicht, dass etwas passiert. Jetzt laeuft die Arbeit in der
   Mitte: Bauplan, Balken, und die Schritte, die gerade drankommen. */
.werkbank__werkstatt {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 40px;
  align-items: center;
  max-width: 820px;
  margin: 0 auto;
  padding: 34px 38px 38px;
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .08);
}
.werkbank__werkstatt-blatt { border-right: 1px dashed rgba(0, 0, 0, .18); padding-right: 34px; }
.werkbank__werkstatt-titel {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 700;
}

/* Der Balken zeigt bewusst keine Prozente: Wie lange das Modell braucht,
   weiss vorher niemand. Er waechst mit den Schritten und bleibt vor dem
   Ende stehen, statt fertig zu behaupten. Die Streifen laufen weiter,
   solange gewartet wird - daran sieht man, dass nichts haengt. */
.werkbank__balken {
  height: 8px;
  margin-bottom: 22px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .08);
  overflow: hidden;
}
.werkbank__balken-fuellung {
  display: block;
  width: var(--anteil, 10%);
  height: 100%;
  border-radius: 999px;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--nexin-base, #ff8c00) 0 10px,
    #ffa640 10px 20px
  );
  background-size: 28px 100%;
  animation: werkbank-streifen 900ms linear infinite;
  transition: width 700ms cubic-bezier(.3, .7, .4, 1);
}
@keyframes werkbank-streifen {
  from { background-position: 0 0; }
  to   { background-position: 28px 0; }
}

.werkbank__werkstatt-liste { list-style: none; margin: 0; padding: 0; }
.werkbank__werkstatt-liste li {
  display: grid;
  grid-template-columns: 26px 1fr 20px;
  gap: 12px;
  align-items: center;
  padding: 7px 0;
  font-size: 15.5px;
  transition: opacity 300ms, color 300ms;
}
.werkbank__werkstatt-icon { width: 26px; height: 26px; }
.werkbank__werkstatt-liste .is-offen { opacity: .32; font-weight: 300; }
.werkbank__werkstatt-liste .is-dran { font-weight: 700; }
.werkbank__werkstatt-liste .is-fertig { opacity: .6; font-weight: 400; }
.werkbank__werkstatt-liste .is-fertig .skizzen-icon__z,
.werkbank__werkstatt-liste .is-dran .skizzen-icon__z {
  stroke-dashoffset: 0;
  opacity: 1;
  transition: stroke-dashoffset 800ms ease-out, opacity 200ms;
}
.werkbank__werkstatt-liste .is-dran .skizzen-icon__z { stroke: var(--nexin-base, #ff8c00); }
.werkbank__werkstatt-haken {
  text-align: right;
  font-weight: 700;
  color: var(--nexin-base-text);
}
.werkbank__werkstatt-liste .is-dran .werkbank__werkstatt-haken {
  animation: werkbank-puls 1.1s ease-in-out infinite;
}

/* ── Das fertige Dokument steht allein ─────────────────────────────────
   Gespraech und Blatt lagen nebeneinander, jede Spalte halb so breit.
   Das Dokument ist aber das Ergebnis und braucht die ganze Breite. */
.werkbank__dokument {
  max-width: 860px;
  margin: 0 auto;
  padding: 26px 38px 34px;
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .08);
}
.werkbank__dokument .bauplan { max-width: 420px; margin: 10px auto 0; }
.werkbank__dokument .werkbank__skizze { margin-top: 26px; }

@media (max-width: 767px) {
  .werkbank__werkstatt { grid-template-columns: 1fr; gap: 24px; padding: 24px 22px 28px; }
  .werkbank__werkstatt-blatt { border-right: 0; padding-right: 0; max-width: 220px; margin: 0 auto; }
  .werkbank__dokument { padding: 22px 20px 26px; }
}