/* PEREMAX – Kundenseite
   Layout/Struktur urspruenglich auf Basis eines TemplateMo-Templates,
   inzwischen vollstaendig auf ein eigenes PEREMAX-Design-System umgebaut:
   eigene Tokens, eigene Typografie, eigene Sektionsmuster.

   Leitidee: ruhig, hochwertig, uebersichtlich. Wenige, konsequente
   Radien und Abstaende statt der stark abgerundeten Template-Optik;
   Inter als Headline-Schrift – dieselbe wie auf der Vertriebsseite
   unter /vertrieb, damit beide Auftritte als eine Marke wirken. */

/* ---------------------------------------------
Inhalt
------------------------------------------------
01. Tokens
02. Reset & Basis
03. Typografie & Sektionskoepfe
04. Buttons & Links
05. Header / Navigation
06. Hero (Startseite + Unterseiten)
07. Leistungs-/Service-Karten
08. Feature-Raster
09. Leistungsliste
10. Portal-Bereich ("So arbeiten wir")
11. Ablauf / Schritte
12. Accordion (FAQ)
13. Team
14. CTA-Band
15. Kontakt
16. Rechtstexte
17. Footer
18. Responsive
--------------------------------------------- */

/*
---------------------------------------------
01. Tokens
---------------------------------------------
*/

:root {
  /* Marke */
  --navy: #002f6d;
  --navy-600: #0a3f86;
  --navy-deep: #04213f;
  --orange: #ff9202;
  --orange-600: #e67f00;

  /* Flaechen & Text
     Grundflaeche der Seite ist reines Weiss (bis Oktober 2026 ein warmes
     Creme). Karten sind ebenfalls weiss und heben sich deshalb nur ueber
     ihren Rahmen bzw. ueber getoente Bloecke ab. */
  --page: #ffffff;
  --ink: #0f1b2d;
  --ink-soft: #3d4d63;
  --muted: #64748b;
  --surface: #ffffff;
  --tint: #f5f8fc;
  --tint-strong: #eaf1fa;
  --border: #e7e2d9;
  --border-strong: #d8d1c5;

  /* Schrift */
  --font-body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Instrument Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Radien – bewusst knapp gehalten; die 25–90px des Ausgangstemplates
     haben die Seite verspielt statt hochwertig wirken lassen. */
  --r-sm: 0.5rem;
  --r-md: 1rem;
  --r-lg: 1.5rem;
  --r-xl: 2rem;
  --r-full: 62.4375rem;

  --shadow-xs: 0 1px 2px rgba(15, 27, 45, 0.05);
  --shadow-sm: 0 0.25rem 1rem rgba(15, 27, 45, 0.06);
  --shadow-md: 0 1rem 2.5rem rgba(15, 27, 45, 0.09);
  --shadow-lg: 0 1.875rem 4.375rem rgba(4, 33, 63, 0.18);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t: 220ms var(--ease);

  /* Vertikaler Rhythmus */
  --section-gap: clamp(4.5rem, 9vw, 8.125rem);
}

/*
---------------------------------------------
02. Reset & Basis
---------------------------------------------
*/

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

html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
address,
img,
ol,
ul,
li,
figure,
header,
nav,
section,
article,
aside,
footer,
figcaption {
  margin: 0;
  padding: 0;
  border: 0;
}

ul,
li {
  list-style: none;
}

header,
nav,
section,
article,
aside,
footer {
  display: block;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* Grosse Bildschirme (externe Monitore, Fernseher): Ab 1800px Fensterbreite
   waechst die Grundschriftgroesse mit dem Fenster. Weil die Masse der Seite
   in rem angegeben sind, skaliert damit der ganze Auftritt mit – Schrift,
   Abstaende, Inhaltsbreite, Karten. Bis 1800px (alle Laptops) bleibt alles
   unveraendert bei 16px. Die Hoehe begrenzt mit (100vh / 46), damit auf sehr
   breiten, flachen Bildschirmen nichts aus dem Fenster waechst; nach oben ist
   bei 40px Schluss. */
@media (min-width: 1800px) {
  html {
    font-size: clamp(1rem, min(calc(100vw / 112.5), calc(100vh / 46)), 2.5rem);
  }

  /* Bootstrap gibt die Inhaltsbreite fest in Pixeln vor (1320px) – hier in
     rem, damit sie mitwaechst. */
  .container {
    max-width: 82.5rem;
  }
}

body {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.62;
  color: var(--ink-soft);
  background-color: var(--page);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
  color: var(--navy);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

::selection {
  background: var(--navy);
  color: #fff;
}

[id] {
  scroll-margin-top: 6.875rem;
}

/* Sichtbarer Fokus – die Seite wird auch per Tastatur bedient. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 0.25rem;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/*
---------------------------------------------
03. Typografie & Sektionskoepfe
---------------------------------------------
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  color: var(--navy);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.022em;
  /* Deutsche Komposita nicht mitten im Wort trennen. */
  hyphens: none;
  overflow-wrap: break-word;
}

p {
  color: var(--ink-soft);
}

p + p {
  margin-top: 1.1em;
}

strong {
  color: var(--ink);
  font-weight: 600;
}

.section {
  margin-top: var(--section-gap);
}

.section.bg-tint {
  background-color: var(--tint-strong);
  padding-block: clamp(4rem, 7.5vw, 7rem);
  border-radius: var(--r-xl);
}

.section-heading {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* Reine Textbloecke haben nach dem Kopf keinen Inhalt mehr – der grosse
   Abstand darunter liesse den Bereich sonst unten leer wirken.
   Bewusst NUR fuer Abschnitte, die ausser dem Kopf nichts enthalten: Ein
   zusaetzliches :only-child hat vorher auch bei normalen Sektionskoepfen
   gegriffen (die sind fast immer das einzige Kind ihrer Spalte) und den
   Abstand zum Inhalt darunter mit entfernt. */
.problem-section .container > .row:only-child .section-heading:last-child {
  margin-bottom: 0;
}

.section-heading h2 {
  font-size: clamp(1.85rem, 1.35rem + 1.8vw, 2.7rem);
  margin: 0.875rem 0 0;
}

.section-heading h2 em {
  color: var(--orange-600);
  font-style: normal;
}

/* Eyebrow – kleine Kategoriezeile ueber der Ueberschrift. */
.section-heading h6 {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-body);
  color: var(--orange-600);
  font-size: 0.75rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
}

.section-heading h6::before {
  content: "";
  width: 1.5rem;
  height: 2px;
  border-radius: 2px;
  background-color: var(--orange);
}

.text-center .section-heading h6 {
  justify-content: center;
}

.section-intro {
  margin-top: 1.25rem;
  max-width: 41.25rem;
  font-size: 1.05rem;
  color: var(--muted);
}

.text-center .section-intro {
  margin-inline: auto;
}

.section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-md);
  background-color: var(--tint-strong);
  color: var(--navy);
  font-size: 1.0625rem;
  margin-bottom: 1.125rem;
}

.bg-tint .section-icon,
.bg-tint .feature-item__icon,
.bg-tint .leistungen-list li::before {
  background-color: #fff;
}

/*
---------------------------------------------
04. Buttons & Links
---------------------------------------------
*/

.main-button a,
.main-button-link,
.orange-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  height: 3.25rem;
  padding: 0 1.875rem;
  border: none;
  border-radius: var(--r-full);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background-color var(--t), transform var(--t), box-shadow var(--t);
}

.main-button a,
.orange-button {
  background-color: var(--orange);
  color: #fff;
  box-shadow: 0 0.5rem 1.375rem rgba(255, 146, 2, 0.26);
}

.main-button a:hover,
.orange-button:hover {
  background-color: var(--orange-600);
  color: #fff;
  box-shadow: 0 0.75rem 1.75rem rgba(255, 146, 2, 0.32);
}

.main-button-link {
  background-color: var(--navy);
  color: #fff;
  margin-top: 1.75rem;
}

.main-button-link:hover {
  background-color: var(--navy-600);
  color: #fff;
  box-shadow: 0 0.75rem 1.75rem rgba(0, 47, 109, 0.24);
}

@media (prefers-reduced-motion: no-preference) {
  .main-button a:hover,
  .main-button-link:hover,
  .orange-button:hover {
    transform: translateY(-2px);
  }
}

/* Sekundaerer Button: nur Kontur, damit pro Bereich genau eine
   Hauptaktion optisch fuehrt. */
.buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem 1.25rem;
  margin-top: 2.25rem;
}

.icon-button a {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  height: 3.25rem;
  padding: 0 1.625rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-full);
  color: var(--navy);
  font-size: 0.9375rem;
  font-weight: 600;
  transition: border-color var(--t), background-color var(--t), color var(--t);
}

.icon-button a:hover {
  border-color: var(--navy);
  background-color: var(--tint-strong);
  color: var(--navy);
}

.icon-button i {
  font-size: 0.8125rem;
  transition: transform var(--t);
}

.icon-button a:hover i {
  transform: translateX(3px);
}

/* Auf dunklem Grund invertieren. */
.main-banner .icon-button a,
.cta-band .icon-button a,
.closing-cta .icon-button a {
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

.main-banner .icon-button a:hover,
.cta-band .icon-button a:hover,
.closing-cta .icon-button a:hover {
  border-color: #fff;
  background-color: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* Textlink mit Pfeil */
.service-item__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5625rem;
  margin-top: auto;
  padding-top: 1.375rem;
  color: var(--navy);
  font-weight: 600;
  font-size: 0.9375rem;
}

.service-item__link i {
  font-size: 0.75rem;
  transition: transform var(--t);
}

.service-item__link:hover {
  color: var(--orange-600);
}

.service-item__link:hover i {
  transform: translateX(0.25rem);
}

/*
---------------------------------------------
05. Header / Navigation
---------------------------------------------
*/

.header-area {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(180%) blur(0.875rem);
  -webkit-backdrop-filter: saturate(180%) blur(0.875rem);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t), box-shadow var(--t);
}

.background-header {
  border-bottom-color: var(--border);
  box-shadow: 0 0.25rem 1.25rem rgba(15, 27, 45, 0.05);
}

.header-area .main-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-block: 1.125rem;
  transition: padding-block var(--t);
}

.background-header .main-nav {
  padding-block: 0.75rem;
}

.header-area .main-nav .logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.header-area .main-nav .logo-image {
  height: 2.875rem;
  width: auto;
}

/* Das PEREMAX-Logo ist ein flaches Querformat: unter ~40px wird die Wortmarke
   zu klein. */
@media (max-width: 575px) {
  .header-area .main-nav .logo-image {
    height: 2.5rem;
  }
}

.header-area .main-nav ul.nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-basis: 100%;
  justify-content: flex-end;
  /* Bootstraps .nav bricht sonst um: Die Leiste bleibt immer einzeilig,
     unter 1200px uebernimmt das Burger-Menue (siehe 18. Responsive). */
  flex-wrap: nowrap;
}

.header-area .main-nav .nav li a {
  display: block;
  padding: 0.625rem 1rem;
  border-radius: var(--r-full);
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink);
  transition: color var(--t), background-color var(--t);
}

.header-area .main-nav .nav li a:hover {
  color: var(--navy);
  background-color: var(--tint-strong);
}

.header-area .main-nav .nav li a.active {
  color: var(--navy);
  font-weight: 600;
  background-color: var(--tint-strong);
}

.header-area .main-nav .nav li.nav-cta {
  margin-left: 0.625rem;
}

.header-area .main-nav .nav li.nav-cta a {
  background-color: var(--orange);
  color: #fff;
  font-weight: 600;
  padding-inline: 1.375rem;
  box-shadow: 0 0.375rem 1rem rgba(255, 146, 2, 0.25);
}

.header-area .main-nav .nav li.nav-cta a:hover {
  background-color: var(--orange-600);
  color: #fff;
}

/* Burger */
.header-area .main-nav .menu-trigger {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1.875rem;
  height: 1.5rem;
  text-indent: -9999em;
  z-index: 99;
  right: 1rem;
  display: none;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  background-color: var(--navy);
  display: block;
  position: absolute;
  width: 1.75rem;
  height: 2px;
  border-radius: 2px;
  left: 0;
  transition: all 0.35s var(--ease);
}

.header-area .main-nav .menu-trigger span {
  top: 0.6875rem;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span:before {
  top: -0.5rem;
}

.header-area .main-nav .menu-trigger span:after {
  top: 0.5rem;
}

.header-area .main-nav .menu-trigger.active span {
  background-color: transparent;
}

.header-area .main-nav .menu-trigger.active span:before {
  transform: translateY(0.5rem) rotate(45deg);
}

.header-area .main-nav .menu-trigger.active span:after {
  transform: translateY(-0.5rem) rotate(-45deg);
}

/*
---------------------------------------------
06. Hero
---------------------------------------------
*/

.main-banner {
  padding: 0;
  /* transparent statt weiss: Der Hero ist eine Karte auf der Creme-Grundflaeche.
     Mit weissem Wrapper lief oben ein weisses Band um die Karte. */
  background-color: transparent;
}

.main-banner .item {
  position: relative;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border-radius: var(--r-xl);
  overflow: hidden;
  padding: clamp(3.5rem, 7vw, 6rem);
  margin-top: 1.375rem;
}

.main-banner .item-1 {
  background-image: linear-gradient(
      104deg,
      rgba(4, 25, 51, 0.94) 0%,
      rgba(4, 25, 51, 0.82) 38%,
      rgba(0, 47, 109, 0.5) 72%,
      rgba(0, 47, 109, 0.25) 100%
    ),
    url(../images/hero-daemmerung.jpg);
}

.main-banner .header-text {
  max-width: 45rem;
}

.main-banner .item span.category {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.5rem 1.125rem;
  border-radius: var(--r-full);
  margin-bottom: 1.875rem;
  backdrop-filter: blur(0.375rem);
}

.main-banner .item span.category::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background-color: var(--orange);
}

.main-banner .item h1,
.main-banner .item h2 {
  font-size: clamp(2.1rem, 1.35rem + 2.9vw, 3.65rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: #fff;
  width: 100%;
  margin-bottom: 1.625rem;
}

.main-banner .item p {
  color: rgba(255, 255, 255, 0.82);
  width: 100%;
  max-width: 38.75rem;
  font-size: 1.05rem;
}

.main-banner .item .buttons {
  margin-top: 2.375rem;
}

.trust-points {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem 2.125rem;
  margin-top: 2.75rem;
  padding-top: 1.875rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.trust-points li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.9062rem;
  font-weight: 500;
}

.trust-points i {
  color: var(--orange);
  font-size: 0.75rem;
}

/* Kompakter Hero fuer Unterseiten – ohne Foto, damit dasselbe Bild nicht
   auf jeder Seite wiederholt wird. */
.page-hero {
  background:
    radial-gradient(110% 130% at 88% 0%, rgba(255, 146, 2, 0.14) 0%, transparent 52%),
    linear-gradient(150deg, var(--navy-deep) 0%, var(--navy) 100%);
  border-radius: var(--r-xl);
  padding: clamp(3.25rem, 6.5vw, 5.25rem);
  margin-top: 1.375rem;
}

.page-hero .header-text {
  max-width: 48.75rem;
}

.page-hero span.category {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--orange);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 1.375rem;
}

.page-hero span.category::before {
  content: "";
  width: 1.5rem;
  height: 2px;
  border-radius: 2px;
  background-color: var(--orange);
}

.page-hero h1 {
  font-size: clamp(1.95rem, 1.35rem + 2.3vw, 3.05rem);
  font-weight: 700;
  letter-spacing: -0.028em;
  color: #fff;
  margin-bottom: 1.375rem;
}

.page-hero p {
  color: rgba(255, 255, 255, 0.78);
  max-width: 41.25rem;
  font-size: 1.05rem;
}

/* Kennzahlen-/Vertrauensleiste direkt unter dem Hero */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background-color: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-top: 1.75rem;
}

.stat-strip__item {
  background-color: var(--surface);
  padding: 1.625rem 1.75rem;
}

.stat-strip__value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--navy);
  line-height: 1.15;
}

.stat-strip__label {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.8438rem;
  line-height: 1.45;
  color: var(--muted);
}

/*
---------------------------------------------
07. Leistungs-/Service-Karten
---------------------------------------------
*/

/* Beide Karten gleich hoch, unabhaengig von der Textlaenge. Bewusst nur
   auf die Kartenspalten, nicht auf die Ueberschriftenzeile – dort wuerde
   display:flex die zentrierte Ueberschrift auf Inhaltsbreite schrumpfen. */
.services .row > [class*="col-"]:has(> .service-item) {
  display: flex;
}

.services .service-item {
  display: flex;
  width: 100%;
  margin-top: 1.875rem;
}

.services .service-item .main-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  padding: 2.5rem;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background-color: var(--surface);
  box-shadow: var(--shadow-xs);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}

@media (prefers-reduced-motion: no-preference) {
  .services .service-item:hover .main-content {
    transform: translateY(-0.25rem);
    box-shadow: var(--shadow-md);
    border-color: var(--border-strong);
  }
}

/* Icon sitzt jetzt im Kartenfluss. Vorher schwebte ein 130px grosser
   Navy-Kreis halb ausserhalb der Karte und ueberlappte die Nachbarkarte. */
.services .service-item .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.375rem;
  height: 3.375rem;
  border-radius: var(--r-md);
  background-color: var(--tint-strong);
  margin-bottom: 1.5rem;
}

.services .service-item .icon i {
  color: var(--navy);
  font-size: 1.375rem;
  transition: transform var(--t);
}

.services .service-item:hover .icon i {
  transform: translateY(-2px);
}

.services .service-item h4 {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 0.875rem;
}

.services .service-item p {
  margin-bottom: 0;
  font-size: 0.97rem;
}

.verwaltungsart-hint {
  text-align: center;
  color: var(--muted);
  font-size: 0.9062rem;
  margin-top: 3.25rem;
  padding-top: 1.875rem;
  border-top: 1px solid var(--border);
}

/*
---------------------------------------------
08. Feature-Raster
---------------------------------------------
*/

.features-section {
  margin-top: var(--section-gap);
}

/* Haarlinien-Raster statt frei stehender Kacheln – gibt dem Block einen
   ruhigen, redaktionellen Rhythmus. Bewusst nur bei den dreispaltigen
   Rastern: dort gehen die sechs Eintraege glatt in zwei volle Reihen auf.
   Beim zweispaltigen Raster (5 Eintraege) bliebe in der letzten Reihe eine
   halbe Trennlinie stehen. */
.features-section .row > .col-lg-4 {
  border-top: 1px solid var(--border);
}

.feature-item {
  padding: 2.125rem 2.125rem 2.125rem 0;
  height: 100%;
}

.feature-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--r-md);
  background-color: var(--tint-strong);
  color: var(--navy);
  font-size: 1.25rem;
  margin-bottom: 1.25rem;
}

.feature-item h5 {
  font-size: 1.12rem;
  font-weight: 700;
  margin-bottom: 0.625rem;
}

.feature-item p {
  font-size: 0.97rem;
  margin-bottom: 0;
}

/*
---------------------------------------------
09. Leistungsliste
---------------------------------------------
*/

.leistungen-section {
  margin-top: var(--section-gap);
}

.leistungen-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 2.5rem;
  margin-top: 0.625rem;
}

.leistungen-list li {
  position: relative;
  padding: 1rem 0 1rem 2.125rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.98rem;
  color: var(--ink);
}

.leistungen-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.1875rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background-color: var(--tint-strong);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23002f6d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 0.75rem;
  background-repeat: no-repeat;
  background-position: center;
}

/*
---------------------------------------------
10. Portal-Bereich ("So arbeiten wir")
---------------------------------------------
*/

/* Die frueheren Halbkreis-Hintergruende (border-radius: 500px auf einem
   84%-Pseudoelement) haben die Sektion optisch schief wirken lassen und den
   Text teilweise ausserhalb der Flaeche stehen gelassen. Jetzt ein klares
   zweispaltiges Raster ohne Hintergrundform. */
.about-us {
  position: relative;
  margin-top: var(--section-gap);
  padding: 0;
}

.about-us .section-heading {
  margin-left: 0;
  margin-bottom: 0;
}

.about-us .section-heading p {
  margin-top: 1.125rem;
}

.portal-columns {
  display: grid;
  gap: 1.75rem;
  background-color: var(--tint);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 2.375rem;
}

.portal-columns__col h6 {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  margin-bottom: 1rem;
}

.portal-columns__col h6::before {
  content: "";
  width: 1.25rem;
  height: 2px;
  border-radius: 2px;
  background-color: var(--orange);
}

/* Portal-Vorschau: Fensterrahmen als Platzhalter fuer spaetere echte
   Screenshots (Login, Uebersicht etc.). */
.portal-preview {
  margin-top: 3.125rem;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}

.portal-preview__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9375rem 1.25rem;
  background-color: var(--navy);
}

.portal-preview__dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.35);
}

.portal-preview__title {
  margin-left: 0.75rem;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
}

.portal-preview__body {
  aspect-ratio: 16 / 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  background-color: var(--tint);
}

.portal-preview__body i {
  font-size: 1.875rem;
  color: rgba(0, 47, 109, 0.3);
}

.portal-preview__body p {
  color: var(--muted);
  font-size: 0.875rem;
}

.portal-hint {
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.98rem;
}

/*
---------------------------------------------
11. Ablauf / Schritte
---------------------------------------------
*/

.ablauf-section {
  margin-top: var(--section-gap);
}

.ablauf-section .text-center {
  margin-top: 0.75rem;
}

/* Nummerierte Schrittliste – ersetzt das fruehere Accordion im
   Ablauf-Bereich: vier kurze Schritte muss niemand aufklappen. */
.step-list {
  display: grid;
  gap: 0;
  counter-reset: step;
}

.step-list__item {
  position: relative;
  display: grid;
  grid-template-columns: 3.75rem 1fr;
  gap: 1.75rem;
  padding: 1.875rem 0;
  border-top: 1px solid var(--border);
}

.step-list__item:last-child {
  border-bottom: 1px solid var(--border);
}

.step-list__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.875rem;
  height: 2.875rem;
  border-radius: 50%;
  background-color: var(--navy);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
}

.step-list__item h3 {
  font-size: 1.18rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.step-list__item p {
  font-size: 0.98rem;
  margin: 0;
}

.bg-tint .step-list__item {
  border-color: var(--border-strong);
}

/*
---------------------------------------------
12. Accordion (FAQ)
---------------------------------------------
*/

/* Der navyblaue Kasten mit weissen Pillen aus dem Ausgangstemplate ist
   entfallen – jetzt ruhige, flache Zeilen mit Trennlinien. */
.accordion {
  margin: 0;
  padding: 0.375rem clamp(1.375rem, 3vw, 2.375rem);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.accordion-item {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0 !important;
  margin-bottom: 0;
}

.accordion-item:last-child {
  border-bottom: none;
}

.accordion-item .accordion-button,
.accordion-button {
  padding: 1.5rem 3.5rem 1.5rem 0;
  background-color: transparent;
  border-radius: 0 !important;
  box-shadow: none;
  outline: none;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: var(--navy);
  transition: color var(--t);
}

.accordion-button:not(.collapsed) {
  color: var(--navy);
  background-color: transparent;
}

.accordion-button:hover {
  color: var(--orange-600);
}

.accordion-button::after {
  position: absolute;
  right: 0;
  background-image: none;
  content: "+";
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 1.1875rem;
  font-weight: 400;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background-color: transparent;
  color: var(--navy);
  transform: none;
  transition: background-color var(--t), color var(--t), border-color var(--t);
}

.accordion-button:not(.collapsed)::after {
  content: "–";
  /* background-image zuruecksetzen: Bootstrap setzt im geoeffneten Zustand
     seinen eigenen blauen Chevron als Hintergrundbild. Der stand hinter
     unserem Minuszeichen und sah wie ein zweites Symbol aus. */
  background-image: none;
  background-color: var(--navy);
  border-color: var(--navy);
  color: #fff;
  transform: none;
}

.accordion-body {
  padding: 0 3.5rem 1.75rem 0;
  font-size: 0.98rem;
  color: var(--ink-soft);
}

.bg-tint .accordion,
.bg-tint .accordion-item {
  border-color: var(--border-strong);
}

/*
---------------------------------------------
13. Team
---------------------------------------------
*/

.team-section {
  margin-top: var(--section-gap);
}

.team-card {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 2rem;
  margin-bottom: 1.625rem;
  height: calc(100% - 1.625rem);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--t), border-color var(--t);
}

.team-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--border-strong);
}

.team-card img {
  width: 8.25rem;
  height: 8.25rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.team-card__body h4 {
  font-size: 1.24rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.team-card__role {
  display: inline-block;
  color: var(--orange-600);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 1rem;
}

.team-card__quals {
  display: grid;
  gap: 0.4375rem;
}

.team-card__quals li {
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--ink-soft);
  padding-left: 1.25rem;
  position: relative;
}

.team-card__quals li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5625rem;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background-color: var(--orange);
}

/*
---------------------------------------------
14. CTA-Band
---------------------------------------------
*/

/* Abschluss-Band fuer die Unterseiten, damit sie nicht ohne naechsten
   Schritt im Footer enden. */
.cta-band,
.closing-cta {
  margin-top: var(--section-gap);
  background:
    radial-gradient(110% 140% at 85% 0%, rgba(255, 146, 2, 0.16) 0%, transparent 55%),
    linear-gradient(150deg, var(--navy-deep) 0%, var(--navy) 100%);
  border-radius: var(--r-xl);
  padding: clamp(3.25rem, 6vw, 4.75rem);
}

.cta-band h2,
.closing-cta .section-heading h2 {
  color: #fff;
  font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.4rem);
  max-width: 43.75rem;
}

.cta-band p,
.closing-cta .section-intro {
  color: rgba(255, 255, 255, 0.76);
  margin-top: 1.125rem;
  max-width: 38.75rem;
}

.text-center .cta-band h2,
.text-center .cta-band p {
  margin-inline: auto;
}

.cta-band .buttons,
.closing-cta__buttons {
  margin-top: 2.125rem !important;
}

.closing-cta__buttons {
  justify-content: center;
}

.closing-cta__list {
  display: inline-grid;
  grid-template-columns: 1fr;
  text-align: left;
  margin: 1.875rem auto 0;
}

.closing-cta__list li {
  color: rgba(255, 255, 255, 0.86);
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

.closing-cta__list li::before {
  background-color: rgba(255, 146, 2, 0.18);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff9202' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/*
---------------------------------------------
15. Kontakt
---------------------------------------------
*/

.contact-us {
  margin-top: var(--section-gap);
  padding: 0;
  position: relative;
}

.contact-us .contact-us-content {
  border-radius: var(--r-xl);
  padding: clamp(2.5rem, 5vw, 4.5rem);
  background:
    radial-gradient(110% 140% at 90% 0%, rgba(255, 146, 2, 0.14) 0%, transparent 55%),
    linear-gradient(150deg, var(--navy-deep) 0%, var(--navy) 100%);
  position: relative;
  z-index: 1;
}

.contact-us .contact-us-content h2 {
  color: #fff;
  font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.4rem);
  max-width: 42.5rem;
}

.contact-us .contact-us-content > .contact-intro {
  color: rgba(255, 255, 255, 0.76);
  margin-top: 1.125rem;
  max-width: 38.75rem;
}

/* Direktkontakt als zwei ruhige Kacheln statt loser Textzeilen. */
.contact-direct {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 2.25rem 0 2.75rem;
}

.contact-direct__item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.125rem 1.375rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-md);
  background-color: rgba(255, 255, 255, 0.05);
  transition: background-color var(--t), border-color var(--t);
}

.contact-direct__item:hover {
  background-color: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.28);
}

.contact-direct__item i {
  color: var(--orange);
  font-size: 1rem;
}

.contact-direct__label {
  display: block;
  font-size: 0.7188rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.contact-direct__value {
  display: block;
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
}

/* Formular: sichtbare Labels statt reiner Platzhalter – Platzhaltertext
   verschwindet beim Tippen und ist als alleinige Beschriftung nicht
   barrierefrei. */
.field {
  margin-bottom: 1.375rem;
}

.field label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.8438rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
}

#contact-form input,
#contact-form select,
#contact-form textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-md);
  background-color: rgba(255, 255, 255, 0.07);
  outline: none;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.9375rem;
  color: #fff;
  transition: border-color var(--t), background-color var(--t);
}

#contact-form input,
#contact-form select {
  height: 3.25rem;
  padding: 0 1.125rem;
}

#contact-form textarea {
  min-height: 8.125rem;
  padding: 1rem 1.125rem;
  resize: vertical;
}

#contact-form input:hover,
#contact-form select:hover,
#contact-form textarea:hover {
  border-color: rgba(255, 255, 255, 0.32);
}

#contact-form input:focus,
#contact-form select:focus,
#contact-form textarea:focus {
  border-color: var(--orange);
  background-color: rgba(255, 255, 255, 0.11);
}

#contact-form input::placeholder,
#contact-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

#contact-form select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.125rem center;
  background-size: 1rem;
  cursor: pointer;
}

#contact-form select option {
  color: var(--ink);
  background-color: #fff;
}

#contact-form button {
  height: 3.25rem;
  padding: 0 2.125rem;
  border: none;
  border-radius: var(--r-full);
  background-color: var(--orange);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  transition: background-color var(--t), transform var(--t);
}

#contact-form button:hover {
  background-color: var(--orange-600);
}

@media (prefers-reduced-motion: no-preference) {
  #contact-form button:hover {
    transform: translateY(-2px);
  }
}

.form-note {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8438rem;
  margin-top: 1.375rem;
}

/* Der Datenschutz-Link steht auf dem navyblauen Formularblock und war in der
   Standard-Linkfarbe praktisch unsichtbar. */
.form-note a {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form-note a:hover,
.form-note a:focus-visible {
  color: #ff9202;
}

/* Honeypot des Kontaktformulars: fuer echte Besucher unsichtbar, aber nicht
   per display:none entfernt, damit Bots das Feld weiterhin finden und
   ausfuellen. */
.hidden-field {
  position: absolute;
  left: -624.9375rem;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Fehlermeldung nach dem Absenden des Kontaktformulars. */
.form-status {
  font-size: 0.9062rem;
  line-height: 1.5;
  margin-top: 1.125rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
}

.form-status--error {
  background: rgba(255, 146, 2, 0.16);
  color: #ffb554;
}

/* Bestaetigung nach erfolgreichem Absenden. Bewusst auffaelliger als eine
   blosse Textzeile: Der Absender soll auf einen Blick sehen, dass die Anfrage
   tatsaechlich rausgegangen ist – vorher war das Absenden kaum spuerbar. */
.form-success {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  margin-top: 1.25rem;
  padding: 1.125rem 1.25rem;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.form-success__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 50%;
  background: #ff9202;
  color: #0f1b2d;
}

.form-success__icon svg {
  width: 1.1875rem;
  height: 1.1875rem;
}

/* Der Block faehrt ein, der Kreis poppt auf, der Haken zeichnet sich hinein.
   Bewusst kein Popup wie in der Vertragsstrecke: Eine Kontaktanfrage ist kein
   abgeschlossener Vorgang, der den Besucher aus der Seite reissen muesste.

   Ausgeloest ueber :not([hidden]), weil das Skript beim Absenden genau dieses
   Attribut entfernt. Da [hidden] display:none setzt, starten die Animationen
   bei einer zweiten Anfrage von selbst neu.

   Der Hakenpfad misst rund 22 Einheiten – daran haengt der dasharray-Wert.
   Ohne Bewegungswunsch steht alles sofort fertig da, deshalb liegt die
   Animation vollstaendig in der Abfrage. */
@media (prefers-reduced-motion: no-preference) {
  .form-success:not([hidden]) {
    animation: form-success-auf 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .form-success:not([hidden]) .form-success__icon {
    animation: form-success-icon 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .form-success:not([hidden]) .form-success__icon svg path {
    stroke-dasharray: 22;
    stroke-dashoffset: 22;
    animation: form-success-haken 0.3s 0.25s ease-out forwards;
  }
}

@keyframes form-success-auf {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
}

@keyframes form-success-icon {
  from {
    transform: scale(0.4);
  }
}

@keyframes form-success-haken {
  to {
    stroke-dashoffset: 0;
  }
}

.form-success__body {
  min-width: 0;
}

.form-success__title {
  margin: 0 0 0.375rem;
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.35;
}

.form-success__text {
  margin: 0;
  font-size: 0.9062rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}

.form-status a {
  color: inherit;
  text-decoration: underline;
}

.direct-contact {
  margin-top: 1.875rem;
}

.direct-contact p {
  margin-bottom: 0.75rem;
}

.direct-contact i {
  color: var(--orange);
  width: 1.375rem;
  text-align: center;
  margin-right: 0.625rem;
}

.direct-contact a {
  color: var(--ink);
  font-weight: 500;
}

.direct-contact a:hover {
  color: var(--navy);
}

/*
---------------------------------------------
16. Rechtstexte / Prosa
---------------------------------------------
*/

.legal-page {
  margin-top: 4.375rem;
  margin-bottom: 6.25rem;
}

.legal-page .prose,
.prose {
  max-width: 47.5rem;
}

.about-page-intro.prose {
  max-width: 53.75rem;
}

.legal-page h1 {
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.7rem);
  margin-bottom: 0.75rem;
}

.legal-page .lead {
  color: var(--muted);
  font-size: 1.05rem;
  margin-bottom: 2.5rem;
}

.legal-page h2 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-top: 2.75rem;
  margin-bottom: 0.75rem;
  color: var(--navy);
}

.legal-page p {
  margin-bottom: 0.875rem;
  font-size: 0.98rem;
}

.legal-page ul {
  margin-bottom: 1rem;
  padding-left: 1.375rem;
}

.legal-page ul li {
  list-style: disc;
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.65;
  margin-bottom: 0.4375rem;
}

.legal-page a {
  color: var(--navy);
  font-weight: 500;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

.legal-page a:hover {
  color: var(--orange-600);
}

.legal-page .placeholder-notice {
  background-color: var(--tint);
  border: 1px solid var(--border);
  border-left: 3px solid var(--orange);
  padding: 1.25rem 1.625rem;
  border-radius: var(--r-md);
  margin: 1.625rem 0;
  font-size: 0.95rem;
}

/*
---------------------------------------------
17. Footer
---------------------------------------------
*/

footer {
  margin-top: var(--section-gap);
  position: relative;
  background: linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 100%);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding-top: 4.5rem;
  overflow: hidden;
}

.footer-top {
  padding-bottom: 2.875rem;
}

.footer-col {
  margin-bottom: 1.875rem;
  position: relative;
  z-index: 3;
}

.footer-logo {
  height: 2.75rem;
  width: auto;
  margin-bottom: 1.375rem;
  filter: brightness(0) invert(1);
}

.footer-col h6 {
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  margin-bottom: 1.25rem;
}

.footer-col p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 0.625rem;
}

.footer-col p + p {
  margin-top: 0;
}

footer p a {
  color: rgba(255, 255, 255, 0.82);
  transition: color var(--t);
  position: relative;
  z-index: 3;
}

footer p a:hover {
  color: var(--orange);
}

.footer-note {
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 0.8125rem !important;
  margin-top: 0.875rem !important;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding: 1.5rem 0;
}

.footer-bottom p {
  text-align: center;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.875rem;
  margin-bottom: 0;
}

/*
---------------------------------------------
18. Responsive
---------------------------------------------
*/

/* Zwischen 1200 und 1399px ist der Container nur 1140px breit: Die acht
   Eintraege der Startseite passen dort nur mit etwas engeren Links in
   eine Zeile. */
@media (min-width: 1200px) and (max-width: 1399px) {
  .header-area .main-nav .nav li a {
    padding-inline: 0.625rem;
    font-size: 0.875rem;
  }

  .header-area .main-nav .nav li.nav-cta {
    margin-left: 0.375rem;
  }

  .header-area .main-nav .nav li.nav-cta a {
    padding-inline: 1rem;
  }
}

@media (max-width: 991px) {
  :root {
    --section-gap: clamp(4rem, 9vw, 5.625rem);
  }

  .main-banner .item,
  .page-hero {
    padding: 3rem 1.75rem;
  }

  .main-banner .header-text,
  .page-hero .header-text {
    max-width: none;
  }

  .stat-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-us .section-heading {
    margin-left: 0;
    margin-bottom: 2.125rem;
  }

  .contact-direct {
    grid-template-columns: 1fr;
  }

  .leistungen-list {
    grid-template-columns: 1fr;
  }

  .feature-item {
    padding-right: 0;
  }

  footer {
    margin-top: 3.75rem;
  }
}

/* Burger-Menue: Unter 1200px passen die Links nicht mehr neben das Logo.
   Dieselbe Schwelle steht in assets/js/custom.js (mobileNav) – beide
   Stellen gemeinsam aendern. */
@media (max-width: 1199px) {
  .header-area .main-nav {
    position: relative;
    flex-wrap: wrap;
    padding-block: 0.875rem;
  }

  .header-area .menu-trigger {
    display: block !important;
  }

  /* Der Burger sitzt auf Höhe der Logo-Zeile, nicht mittig zum gesamten
     Nav-Block – sonst wandert er beim Aufklappen mit nach unten. */
  .header-area .main-nav .menu-trigger {
    top: 1.625rem;
    transform: none;
  }

  /* Muss ul.nav aus dem Basisblock ueberschreiben (dort display:flex).
     Ohne den gleich spezifischen Selektor bliebe das Menue auf dem Handy
     dauerhaft aufgeklappt. */
  .header-area .main-nav ul.nav {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    flex-basis: 100%;
    margin-top: 0.875rem;
    padding-block: 0.5rem;
    border-top: 1px solid var(--border);
  }

  .header-area .main-nav ul.nav li {
    width: 100%;
  }

  .header-area .main-nav .nav li a {
    padding: 0.875rem 0.75rem;
    border-radius: var(--r-sm);
    font-size: 1rem;
    text-align: left;
  }

  .header-area .main-nav .nav li.nav-cta {
    margin: 0.625rem 0 0.25rem;
  }

  .header-area .main-nav .nav li.nav-cta a {
    text-align: center;
  }
}

@media (max-width: 767px) {
  body {
    font-size: 1rem;
  }

  .header-area {
    padding: 0 0.5rem;
  }

  /* Auf sehr schmalen Viewports reicht die Zeilenbreite fuer Komposita wie
     "Verwaltungsaufwand" nicht mehr. Eine saubere Silbentrennung ist dort
     das kleinere Uebel gegenueber einem harten Umbruch mitten im Wort. */
  .main-banner .item h1,
  .page-hero h1,
  .section-heading h2 {
    hyphens: auto;
    -webkit-hyphens: auto;
  }

  .main-banner .item,
  .page-hero {
    padding: 2.75rem 1.5rem;
    border-radius: var(--r-lg);
  }

  .stat-strip {
    grid-template-columns: 1fr;
  }

  .services .service-item .main-content {
    padding: 1.875rem 1.625rem;
  }

  .portal-columns {
    padding: 1.75rem 1.5rem;
  }

  .step-list__item {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .team-card {
    flex-direction: column;
    text-align: center;
    padding: 1.875rem 1.5rem;
  }

  .team-card__quals li {
    text-align: left;
  }

  .accordion-button {
    font-size: 1rem;
    padding-right: 3rem;
  }

  .cta-band,
  .closing-cta,
  .contact-us .contact-us-content {
    padding: 2.5rem 1.5rem;
    border-radius: var(--r-lg);
  }

  footer {
    border-radius: var(--r-lg) var(--r-lg) 0 0;
  }
}

@media (max-width: 600px) {
  .leistungen-list {
    grid-template-columns: 1fr;
  }
}

/*
---------------------------------------------
19. Problem / Loesung (uebernommen von der Vertriebsseite)
---------------------------------------------
*/

.ps-table {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  margin-top: 0.5rem;
}

.ps-table__grid {
  display: grid;
  grid-template-columns: 1fr;
}

.ps-col-head {
  padding: 1.125rem clamp(1.125rem, 2.5vw, 1.75rem);
  background: var(--tint);
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.ps-col-head--problem {
  color: var(--ink-soft);
}

.ps-col-head--solution {
  color: var(--navy);
  border-top: 1px solid var(--border);
}

.ps-cell {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  padding: 0.9375rem clamp(1.125rem, 2.5vw, 1.75rem);
  font-size: 0.97rem;
  line-height: 1.5;
  border-top: 1px solid var(--border);
}

.ps-cell i {
  width: 1.375rem;
  height: 1.375rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 0.625rem;
  margin-top: 2px;
}

.ps-cell--problem i {
  color: #b4472f;
  background: #fbeae4;
}

.ps-cell--solution {
  background: #fff8ee;
}

.ps-cell--solution i {
  color: var(--orange-600);
  background: #fff;
}

@media (min-width: 700px) {
  .ps-table__grid {
    grid-template-columns: 1fr 1fr;
  }
  .ps-col-head--solution {
    border-top: none;
    border-left: 1px solid var(--border);
  }
  .ps-cell--solution {
    border-left: 1px solid var(--border);
  }
}

/*
---------------------------------------------
20. Praxisbeispiele (Auswahlkarten + Detailpanel)
---------------------------------------------
*/

.cs {
  display: grid;
  gap: 1.5rem;
}

.cs__grid {
  display: grid;
  gap: clamp(0.625rem, 1.4vw, 0.875rem);
}

.cs__card {
  position: relative;
  display: grid;
  /* align-content: start – sonst verteilt das Grid die ueberschuessige Hoehe
     der gestreckten Karten auf die Zeilen und Nummer, Kategorie und Titel
     stehen von Karte zu Karte auf leicht unterschiedlicher Hoehe. */
  align-content: start;
  gap: 0.3125rem;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 1.125rem 1.25rem 1.25rem;
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}

.cs__card-num {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--border-strong);
  transition: color var(--t);
}

.cs__card-tag {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange-600);
}

.cs__card-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--navy);
}

.cs__card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.cs__card[aria-selected="true"] {
  background: var(--navy);
  border-color: var(--navy);
  box-shadow: var(--shadow-md);
}

.cs__card[aria-selected="true"] .cs__card-num {
  color: rgba(255, 255, 255, 0.45);
}

.cs__card[aria-selected="true"] .cs__card-tag {
  color: var(--orange);
}

.cs__card[aria-selected="true"] .cs__card-title {
  color: #fff;
}

@media (min-width: 700px) {
  .cs__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1040px) {
  .cs__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.cs__panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.625rem, 3vw, 2.5rem);
}

.cs__panel[hidden] {
  display: none;
}

.cs__panel h3 {
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  margin-bottom: 1.75rem;
}

.cs__cols {
  display: grid;
  gap: 1.75rem;
}

.cs__block h4 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.875rem;
}

.cs__block p {
  font-size: 0.97rem;
}

.cs__benefit {
  margin-top: 1.875rem;
  padding: 1.375rem 1.625rem;
  background: var(--tint);
  border-left: 3px solid var(--orange);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}

.cs__benefit-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.625rem;
}

.cs__benefit p {
  font-size: 0.97rem;
}

@media (min-width: 820px) {
  .cs__cols {
    grid-template-columns: 1fr 1fr;
    gap: 2.75rem;
  }
}

/*
---------------------------------------------
21. Ablauf-Schritte: mitlaufende Markierung
---------------------------------------------
*/

/* Beim Scrollen ist immer genau der Schritt orange markiert, der gerade auf
   Hoehe der Lesezone steht. Ohne JavaScript bleiben alle Kreise navyblau –
   die Markierung ist eine Zugabe, keine Voraussetzung. */
.step-list__num {
  transition: background-color var(--t), box-shadow var(--t), transform var(--t);
}

.step-list__item.is-active .step-list__num {
  background-color: var(--orange);
  box-shadow: 0 0 0 0.375rem rgba(255, 146, 2, 0.16);
}

@media (prefers-reduced-motion: no-preference) {
  .step-list__item.is-active .step-list__num {
    transform: scale(1.08);
  }
}

/*
---------------------------------------------
22. Bausteine des Onepagers
---------------------------------------------
*/

/* Zwischenueberschrift innerhalb eines Abschnitts (unterhalb von h2). */
.block-title {
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem);
  margin-bottom: 1.625rem;
}

/* Innerhalb der Akkordeon-Panels */
.accordion-body .leistungen-list {
  margin-top: 0;
}

.accordion-lead {
  margin-bottom: 1.125rem;
  font-size: 0.98rem;
}

.accordion-note {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.92rem;
  color: var(--muted);
}

/* Ein Kartenraster direkt unter einem zweispaltigen Block braucht oben Luft,
   sonst klebt es an der Spalte darueber. */
.feature-row,
.team-row {
  margin-top: clamp(1.875rem, 4vw, 3.375rem);
}


/* Zeilen, die direkt auf eine andere Zeile folgen. Bewusst als eigene Klasse
   statt als Pauschalregel (.row + .row): Wo davor ein .section-heading mit
   eigenem Unterrand steht, kaeme der Abstand sonst doppelt zusammen. */
.stack-row {
  margin-top: clamp(2.125rem, 4.5vw, 3.75rem);
}

/*
---------------------------------------------
23. Akkordeon-Kopf mit Symbol und Anzahl
---------------------------------------------
*/

/* Der geschlossene Zustand soll schon verraten, was drin steckt: Symbol,
   Gruppentitel und Anzahl der Leistungen. Sonst muesste der Leser jede
   Gruppe aufklappen, um zu wissen, ob sie ihn betrifft. */
.acc-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: left;
}

.acc-head__icon {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background-color: var(--tint-strong);
  color: var(--navy);
  font-size: 1.0625rem;
  transition: background-color var(--t), color var(--t);
}

.bg-tint .acc-head__icon {
  background-color: #fff;
}

.accordion-button:not(.collapsed) .acc-head__icon {
  background-color: var(--navy);
  color: #fff;
}

.acc-head__text {
  display: grid;
  gap: 3px;
}

.acc-head__title {
  font-size: 1.05rem;
  line-height: 1.3;
}

.acc-head__count {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
}

/* Der Akkordeon-Kopf traegt jetzt eine Kachel – etwas mehr Luft als bei
   einer reinen Textzeile. */
.accordion-item .accordion-button,
.accordion-button {
  padding-block: 1.25rem;
}

/* Zielgruppe als eine ruhige Zeile statt sechs umrandeter Pillen. Zwoelf
   Pillen auf der Seite haben mehr Aufmerksamkeit gebunden, als die
   Information wert ist. */
.fit-line {
  margin-top: clamp(2.125rem, 4.5vw, 3.5rem);
  padding-top: 1.625rem;
  border-top: 1px solid var(--border);
  font-size: 0.95rem;
  color: var(--muted);
}

.fit-line span {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--navy);
}

.bg-tint .fit-line {
  border-top-color: var(--border-strong);
}

/*
---------------------------------------------
24. Dunkle Ankerbereiche
---------------------------------------------
*/

/* Die Seite bestand fast nur aus weissen und leicht getoenten Flaechen –
   bis zu drei weisse Bereiche in Folge. Der Vertriebsauftritt setzt dagegen
   drei dunkle Anker und wirkt dadurch geordneter und hochwertiger. Dieselbe
   Behandlung hier: dunkler Verlauf, warmer Lichtschein oben rechts. */
.section--dark {
  position: relative;
  background:
    radial-gradient(110% 130% at 88% 0%, rgba(255, 146, 2, 0.14) 0%, transparent 52%),
    linear-gradient(150deg, var(--navy-deep) 0%, var(--navy) 100%);
  border-radius: var(--r-xl);
  padding-block: clamp(4rem, 7.5vw, 7rem);
  color: rgba(255, 255, 255, 0.82);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark h5 {
  color: #fff;
}

.section--dark p {
  color: rgba(255, 255, 255, 0.78);
}

.section--dark .section-intro {
  color: rgba(255, 255, 255, 0.72);
}

.section--dark .section-heading h6 {
  color: var(--orange);
}

/* Merkmale auf dunklem Grund: Haarlinie oben statt getoenter Kachel. */
.section--dark .feature-item {
  padding: 1.875rem 1.875rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.section--dark .feature-item__icon {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* Teamkarten auf dunklem Grund */
.section--dark .team-card {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: none;
}

.section--dark .team-card:hover {
  background-color: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.26);
  box-shadow: none;
}

.section--dark .team-card__quals li {
  color: rgba(255, 255, 255, 0.78);
}

/* Aussagesatz mit Akzentbalken – zweiter Ankermoment im dunklen Bereich. */
.dark-statement {
  margin-top: 1.625rem;
  padding-left: 1.25rem;
  border-left: 3px solid var(--orange);
  font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.22rem);
  line-height: 1.5;
  color: #fff !important;
  font-weight: 500;
}

/*
---------------------------------------------
25. Scroll-Einblendung
---------------------------------------------
*/

/* Nur bei aktivem JavaScript ausgeblendet (html.js), damit ohne JS alles
   sichtbar bleibt. Respektiert die Systemeinstellung fuer reduzierte
   Bewegung – dort erscheint alles sofort. */
html.js .reveal {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

html.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Zwei Teamkarten uebereinander statt nebeneinander: So bleiben die Portraits
   gross genug, um Gesichter zu erkennen – bei zwei Karten nebeneinander in
   der halben Zeilenbreite waren sie zu klein, um zu wirken. */
.team-stack {
  display: grid;
  gap: 1.125rem;
}

.team-stack .team-card {
  margin-bottom: 0;
  height: auto;
}


/* Das CTA-Band ist auf der Kundenseite mittig gesetzt – es unterbricht den
   Lesefluss bewusst und soll nicht wie ein weiterer Textblock wirken. */
.cta-band .row > [class*="col-"] {
  text-align: center;
}

.cta-band h2,
.cta-band p {
  margin-inline: auto;
}

.cta-band .buttons {
  justify-content: center;
}

/* Das Akkordeon ist eine weisse Karte. Die .bg-tint-Regeln weiter oben
   setzen Symbolflaechen auf Weiss – innerhalb der Karte waere das unsichtbar,
   dort gilt wieder die getoente Flaeche. */
.bg-tint .accordion .acc-head__icon,
.bg-tint .accordion .leistungen-list li::before {
  background-color: var(--tint-strong);
}

/* Die Regel darueber ist spezifischer als die Offen-Regel weiter oben und hat
   deren navyblaue Flaeche mit ueberschrieben – die weisse Glyphe stand dann
   unsichtbar auf hellem Grund. Offen bleibt offen. */
.bg-tint .accordion .accordion-button:not(.collapsed) .acc-head__icon {
  background-color: var(--navy);
  color: #fff;
}

.bg-tint .accordion,
.bg-tint .accordion-item {
  border-color: var(--border-cool, #e4eaf3);
}

/*
=========================================================
28. Block-System (Aufbau nach Taxfix-Vorbild)
=========================================================
Leitidee: Jeder Abschnitt ist ein grosser, abgerundeter Farbblock. Nicht
Inhalt auf Hintergrund, sondern gestapelte Farbkarten. Darin ein
Zweispalter – Headline, Text und Pillen-Button auf der einen Seite, Bild
oder Tabelle auf der anderen; die Seiten wechseln abschnittsweise.
Farben sind die eigenen von PEREMAX: Navy, Orange, helles Navy, Lavendel, Pfirsich.
*/

.blk {
  position: relative;
  border-radius: var(--r-block);
  padding: clamp(2.375rem, 4.5vw, 4.75rem);
  margin-top: clamp(1.125rem, 2vw, 1.75rem);
  overflow: hidden;
}

:root {
  --r-block: 2.5rem;
}

/* ---- Farbvarianten ---- */
.blk--navy {
  background:
    radial-gradient(110% 130% at 88% 0%, rgba(255, 146, 2, 0.16) 0%, transparent 52%),
    linear-gradient(150deg, var(--navy-deep) 0%, var(--navy) 100%);
  color: rgba(255, 255, 255, 0.82);
}

.blk--tint {
  background-color: var(--tint-strong);
}

.blk--lavender {
  background-color: #dbe4f7;
}

.blk--peach {
  background-color: #ffe6c9;
}

.blk--white {
  background-color: var(--surface);
  border: 1px solid var(--border);
}

.blk--navy h1,
.blk--navy h2,
.blk--navy h3,
.blk--navy h4,
.blk--navy h5 {
  color: #fff;
}

.blk--navy p {
  color: rgba(255, 255, 255, 0.78);
}

/* ---- Zweispalter im Block ---- */
.blk__grid {
  display: grid;
  gap: clamp(1.875rem, 4vw, 4rem);
  align-items: stretch;
}

/* Textspalte mittig, Bildspalte auf volle Hoehe – sonst blieb ueber und
   unter dem Bild eine leere Farbflaeche stehen. */
.blk__grid > *:not(.blk__visual) {
  align-self: center;
}

@media (min-width: 900px) {
  .blk__grid {
    grid-template-columns: 1fr 1fr;
  }
  /* Bild links, Text rechts – abschnittsweise gedreht. */
  .blk__grid--flip .blk__visual {
    order: -1;
  }
  .blk__grid--wide-text {
    grid-template-columns: 1.15fr 0.85fr;
  }
  .blk__grid--wide-visual {
    grid-template-columns: 0.85fr 1.15fr;
  }
}

/* ---- Typografie im Block: deutlich groesser als bisher ---- */
.blk__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-600);
  margin-bottom: 1.25rem;
}

.blk__eyebrow::before {
  content: "";
  width: 1.5rem;
  height: 2px;
  border-radius: 2px;
  background-color: var(--orange);
}

.blk--navy .blk__eyebrow {
  color: var(--orange);
}

.blk__title {
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.4rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 1.375rem;
}

.blk__lead {
  font-size: clamp(1.02rem, 0.97rem + 0.3vw, 1.15rem);
  line-height: 1.55;
  max-width: 46ch;
}

/* ---- Pillen-Button mit Pfeil-Badge ---- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0.5rem 0.5rem 1.875rem;
  border: none;
  border-radius: var(--r-full);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  transition: transform var(--t), box-shadow var(--t), background-color var(--t);
}

.pill__arrow {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 0.9375rem;
  transition: transform var(--t);
}

.pill:hover .pill__arrow {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: no-preference) {
  .pill:hover {
    transform: translateY(-2px);
  }
}

/* Auf hellem Grund: oranger Button */
.pill--primary {
  background-color: var(--orange);
  color: #fff;
  box-shadow: 0 0.625rem 1.625rem rgba(255, 146, 2, 0.3);
}

.pill--primary .pill__arrow {
  background-color: #fff;
  color: var(--orange-600);
}

.pill--primary:hover {
  background-color: var(--orange-600);
  color: #fff;
}

/* Auf farbigem/dunklem Grund: weisser Button mit Navy-Badge */
.pill--light {
  background-color: #fff;
  color: var(--navy);
  box-shadow: 0 0.625rem 1.625rem rgba(4, 33, 63, 0.18);
}

.pill--light .pill__arrow {
  background-color: var(--navy);
  color: #fff;
}

.pill--light:hover {
  background-color: #fff;
  color: var(--navy);
}

.blk__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem 1.375rem;
  margin-top: 2.125rem;
}

.blk__note {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.92rem;
  color: var(--muted);
}

.blk--navy .blk__note {
  color: rgba(255, 255, 255, 0.7);
}

.blk__note i {
  color: var(--orange);
}

/* ---- Bild im Block: vollflaechig, von der Rundung beschnitten ---- */
.blk__visual {
  position: relative;
  align-self: stretch;
  border-radius: calc(var(--r-block) - 1.125rem);
  overflow: hidden;
  min-height: 16.25rem;
}

.blk__visual img {
  width: 100%;
  height: 100%;
  min-height: 16.25rem;
  object-fit: cover;
  display: block;
}


@media (max-width: 767px) {
  :root {
    --r-block: 1.75rem;
  }
  .blk {
    padding: 1.875rem 1.375rem;
  }
  .blk__visual {
    min-height: 13.75rem;
  }
  .blk__visual img {
    min-height: 13.75rem;
  }
}

/* ---- Kopfbereich innerhalb eines Blocks (mittig, ueber voller Breite) ---- */
.blk__head {
  max-width: 40rem;
  margin: 0 auto clamp(1.875rem, 4vw, 3.25rem);
  text-align: center;
}

.blk__head .blk__eyebrow {
  justify-content: center;
}

.blk__head .blk__lead {
  margin-inline: auto;
}

.blk--center {
  text-align: center;
}

.blk--center .blk__title,
.blk--center .blk__lead {
  margin-inline: auto;
}

.blk--center .blk__eyebrow,
.blk--center .blk__actions {
  justify-content: center;
}

/* Inhaltsspalte im Block: nimmt bestehende Bausteine (Tabellen, Akkordeons,
   Listen) unveraendert auf. */
.blk__pane {
  min-width: 0;
}

/* Auf farbigem Grund brauchen die uebernommenen Bausteine weisse Flaechen,
   damit sie sich wie Karten abheben. */
.blk--tint .ps-table,
.blk--tint .accordion,
.blk--tint .portal-columns {
  background-color: var(--surface);
  border-color: var(--border-cool, #e4eaf3);
}

.blk--tint .accordion .acc-head__icon,
.blk--tint .accordion .leistungen-list li::before,
.blk--tint .feature-item__icon {
  background-color: var(--tint-strong);
}

.blk--tint .accordion .accordion-button:not(.collapsed) .acc-head__icon {
  background-color: var(--navy);
  color: #fff;
}

/* Auf weissem Grund die Karten leicht getoent absetzen. */
.blk--white .portal-columns {
  background-color: var(--tint);
}

/* ---- Auswahlkarten der Verwaltungsart ---- */
.choice {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
}

@media (min-width: 760px) {
  .choice {
    grid-template-columns: 1fr 1fr;
  }
}

.choice__card {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  background-color: var(--surface);
  border: 1px solid var(--border-cool, #e4eaf3);
  border-radius: calc(var(--r-block) - 1rem);
  padding: clamp(1.625rem, 3vw, 2.375rem);
  transition: transform var(--t), box-shadow var(--t);
}

.choice__card:hover {
  box-shadow: var(--shadow-md);
}

@media (prefers-reduced-motion: no-preference) {
  .choice__card:hover {
    transform: translateY(-0.25rem);
  }
}

.choice__icon {
  display: grid;
  place-items: center;
  width: 3.375rem;
  height: 3.375rem;
  border-radius: var(--r-md);
  background-color: var(--tint-strong);
  color: var(--navy);
  font-size: 1.3125rem;
  margin-bottom: 0.5rem;
}

/* Dachlinien-Symbole aus der Bildmarke: ein Dach mit orangem Kern fuer die
   einzelne Wohnung (Sondereigentum), drei Daecher fuer das ganze Haus.
   Die Symbolflaeche wird dafuer breiter als das uebliche Quadrat. */
.roof-ico {
  display: block;
  height: 1.625rem;
  width: auto;
  overflow: visible;
}

.roof-ico__n,
.roof-ico__o {
  fill: none;
  stroke: var(--navy);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.roof-ico__o {
  stroke: var(--orange);
}

.choice__icon--roof,
.section-icon--roof {
  width: auto;
  padding-inline: 0.875rem;
  justify-self: start;
}

.section-icon--roof .roof-ico {
  height: 1.375rem;
}

.choice__title {
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--navy);
}

.choice__text {
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.choice__more {
  display: inline-flex;
  align-items: center;
  gap: 0.5625rem;
  margin-top: 0.5rem;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--orange-600);
}

.choice__more i {
  font-size: 0.75rem;
  transition: transform var(--t);
}

.choice__card:hover .choice__more i {
  transform: translateX(0.25rem);
}

/* ---- Anpassungen uebernommener Bausteine im Block ---- */
.blk .fit-line {
  margin-top: 1.875rem;
  padding-top: 1.375rem;
}

.blk .step-list__item:first-child {
  border-top: none;
  padding-top: 0;
}

.blk--navy .dark-statement {
  margin-top: 1.5rem;
}

.blk--navy .form-note {
  margin-top: 1.125rem;
}

/* Das Kontaktformular sitzt jetzt im navyblauen Block – die alten Regeln
   hingen an .contact-us-content und greifen dort nicht mehr. */
.blk--navy .field label {
  color: rgba(255, 255, 255, 0.82);
}

.blk--navy #contact-form input,
.blk--navy #contact-form select,
.blk--navy #contact-form textarea {
  border-color: rgba(255, 255, 255, 0.18);
  background-color: rgba(255, 255, 255, 0.07);
  color: #fff;
}

.blk--navy #contact-form input:focus,
.blk--navy #contact-form select:focus,
.blk--navy #contact-form textarea:focus {
  border-color: var(--orange);
  background-color: rgba(255, 255, 255, 0.11);
}

.blk--navy #contact-form button {
  background-color: var(--orange);
  color: #fff;
}

.blk--navy .contact-direct {
  margin: 1.875rem 0 0;
  grid-template-columns: 1fr;
}


/* Im Block steht das Akkordeon in einer halben Spalte (~500px). Die
   zweispaltige Leistungsliste hatte dort nur noch ~232px je Spalte – zu wenig
   fuer deutsche Komposita, "Verwaltung der Mietvertraege und Mieterdaten"
   lief dort ueber drei Zeilen. In dieser Umgebung einspaltig. */
.blk__pane .leistungen-list,
.blk__grid .leistungen-list {
  grid-template-columns: 1fr;
  column-gap: 0;
}

/* Echtes Minuszeichen (U+2212) statt Gedankenstrich: Der Gedankenstrich ist
   schmaler als das Plus und wirkte im Kreis wie ein Schraegstrich. */
.accordion-button:not(.collapsed)::after {
  content: "\2212";
}

/* Bootstrap liefert das Auf-/Zuklapp-Symbol als Hintergrundbild. Wir zeichnen
   es selbst als Textzeichen – daher in beiden Zustaenden abschalten. */
.accordion-button::after,
.accordion-button:not(.collapsed)::after {
  background-image: none;
}


/* Weisse Karten im navyblauen Block brauchen wieder dunkle Schrift.
   Die Regel .blk--navy h4 { color:#fff } gilt fuer den Blockinhalt, traf aber
   auch die Namen in den weissen Teamkarten – weiss auf weiss, also
   unsichtbar. Die Karten selbst sollen weiss bleiben: der Kontrast zum
   navyblauen Block ist gewollt. */
.blk--navy .team-card h4 {
  color: var(--navy);
}

.blk--navy .team-card p,
.blk--navy .team-card__quals li {
  color: var(--ink-soft);
}

/*
---------------------------------------------
Hero der Startseite: Navy ueber den ganzen ersten Bildschirm
---------------------------------------------
Kein abgerundeter Kasten mehr: Die Navy-Flaeche liegt auf #top selbst und
reicht von Rand zu Rand, direkt unter der hellen Kopfleiste. Der Block darin
ist nur noch Inhalt (ohne eigene Flaeche, Rundung und Seitenabstand – so steht
der Text buendig unter dem Logo).

Hoehe: Bildschirmhoehe minus Kopfleiste, damit auf dem ersten Bildschirm nur
Blau zu sehen ist und der helle Seitengrund erst beim Weiterscrollen kommt.
Bewusst min-height und nach oben gedeckelt:

- Bei kurzen Viewports (13"-Laptop 1280x720, Handy im Querformat) passt der
  Inhalt nicht in eine Bildschirmhoehe – der Bereich waechst dann mit.
- Bei sehr hohen Bildschirmen (hochkant gedrehte Monitore) entstuende sonst
  eine riesige leere Flaeche.

dvh statt vh, damit die ein- und ausfahrenden Browserleisten auf dem Handy
keine Spruenge verursachen; die vh-Zeile darueber ist der Rueckfall fuer
aeltere Browser.
*/

/* Der Hero endet unten mit einer geraden Kante (der weiche Verlauf ins Weiss
   ist im Oktober 2026 entfallen). */
.hero-full {
  --hero-header: 5.125rem;
  background:
    radial-gradient(90% 110% at 88% 0%, rgba(255, 146, 2, 0.16) 0%, transparent 52%),
    linear-gradient(150deg, var(--navy-deep) 0%, var(--navy) 100%);
}

/* ---- Hintergrundvideo (nur ab 992px) ----
   Liegt zwischen der Navy-Flaeche und dem Inhalt. Darueber eine dunkle,
   verlaufende Abdunklung (keine blaue Schicht mehr), passend zum
   Leistungen-Bereich darunter.
*/
.hero-full {
  position: relative;
}

.hero-full > .container {
  position: relative;
  z-index: 1;
}

.hero-full__media {
  display: none;
}

@media (min-width: 992px) {
  .hero-full__media {
    display: block;
    position: absolute;
    inset: 0;
    /* Eigene Stapelebene: Videos (z-index 1/2) und blaue Schicht (3) ordnen
       sich nur untereinander – der Inhalt des Hero (z-index 1 am Container)
       liegt als Ganzes darueber. Ohne diese Zeile deckte die blaue Schicht
       auch Headline und Knopf zu. */
    z-index: 0;
    overflow: hidden;
    background: url("../video/hero-poster.jpg?v=3") 62% 30% / cover no-repeat;
  }

  .hero-full__media::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Wie bei den Leistungen: keine blaue Schicht, sondern eine dunkle
       Abdunklung, die das Video in seinen Farben laesst. Rechts, wo die
       Headline buendig steht, und unten dichter; eine leichte Grundabdunklung
       haelt die weisse Schrift auch links lesbar. */
    background:
      linear-gradient(to top, rgba(3, 18, 38, 0.7) 0%, rgba(3, 18, 38, 0.22) 46%, rgba(3, 18, 38, 0.22) 100%),
      linear-gradient(270deg, rgba(3, 18, 38, 0.78) 0%, rgba(3, 18, 38, 0.52) 42%, rgba(3, 18, 38, 0.2) 100%);
    /* Ueber beiden Videos: Die bekommen beim Schleifenwechsel z-index 1 und 2
       (custom.js) und laegen sonst ueber der blauen Schicht. */
    z-index: 3;
  }

  .hero-full__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% 30%;
    opacity: 0;
    transition: opacity 0.8s linear;
  }

  /* Sichtbar, sobald das Video laeuft. Fuer die Schleife liegen zwei gleiche
     Videos uebereinander (siehe custom.js); das jeweils naechste blendet mit
     derselben Dauer ueber das auslaufende. */
  .hero-full__video.is-playing {
    opacity: 1;
  }
}

.hero-full .blk {
  display: flex;
  align-items: center;
  min-height: clamp(32rem, calc(100vh - var(--hero-header)), 64rem);
  min-height: clamp(32rem, calc(100dvh - var(--hero-header)), 64rem);
  margin-top: 0;
  padding-inline: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
}

/* Inhalt nach Vorlage: rechtsbuendig, als Gruppe mittig im Bildschirm.
   Die Schriftgroesse der Headline haengt an der Breite des Inhaltsbereichs
   (cqi), nicht am Fenster – so fuellt die laengste der drei Zeilen bei jeder
   Breite fast die ganze Zeile, ohne umzubrechen (sie ist rund 10,1em breit). Die vw-Zeile davor ist der Rueckfall fuer Browser
   ohne Container-Einheiten. */
.hero-full__content {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  text-align: right;
}

/* Headline durchgehend im fetten Schnitt 700, der als eigene Schriftfamilie
   vorliegt (fonts.css). Die Schriftgroesse ist so gewaehlt, dass die laengste
   Zeile die Breite des Inhaltsbereichs fast ganz fuellt. */
.hero-full__title {
  font-family: "Instrument Sans Hero", var(--font-display);
  font-size: clamp(1.6rem, 7.6vw, 8.6rem);
  font-size: clamp(1.6rem, 9.8cqi, 8.6rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 1.75rem rgba(4, 33, 63, 0.35);
}

.hero-full__title span {
  display: block;
  white-space: nowrap;
}

/* Mittlere Zeile "Werte schaffen." in Orange */
.hero-full__title .hero-full__accent {
  color: var(--orange);
}

/* ---- "Mehr erfahren": schmaler, eckiger Balken, der zum Schluessel wird ----
   In Ruhe ein voller oranger Balken. Beim Ueberfahren wird er zum Schluessel:
   Der Balken verschlankt sich leicht zum Schaft, links waechst ein Ring
   heraus, rechts unten ein Bart mit zwei Zaehnen. Bewusst ein Mittelweg –
   die erste Fassung war zu wuchtig, die zweite zu duenn.
   --key-h ist die Balkenhoehe, --key-shaft der Anteil, auf den der Schaft
   schrumpft; alle Schluesselteile leiten sich daraus ab. Die orange Flaeche
   ist eine Hintergrundebene, damit sich ihre Hoehe weich aendern laesst. */
.hero-full__cta {
  --key-h: clamp(2.375rem, 3.4cqi, 2.875rem);
  --key-shaft: 0.8;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(100%, clamp(15rem, 30cqi, 25.625rem));
  height: var(--key-h);
  margin-top: clamp(1.875rem, 4.6cqi, 4rem);
  background: linear-gradient(var(--orange), var(--orange)) 50% 50% / 100% 100% no-repeat;
  color: #fff;
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.08rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background-size 0.35s var(--ease);
}

.hero-full__cta:hover,
.hero-full__cta:focus-visible,
.hero-full__cta.is-key {
  color: #fff;
  background-size: 100% calc(var(--key-shaft) * 100%);
}

.hero-full__cta::before,
.hero-full__cta::after {
  content: "";
  position: absolute;
  transition: transform 0.35s var(--ease), opacity 0.2s var(--ease);
}

/* Ring (Schluesselkopf) am linken Ende */
.hero-full__cta::before {
  right: calc(100% - var(--key-h) * 0.14);
  top: 50%;
  width: calc(var(--key-h) * 1.9);
  height: calc(var(--key-h) * 1.9);
  margin-top: calc(var(--key-h) * -0.95);
  border: calc(var(--key-h) * 0.28) solid var(--orange);
  border-radius: 50%;
  transform: scale(0);
  transform-origin: 100% 50%;
  opacity: 0;
}

/* Bart: zwei Zaehne unter dem rechten Ende des Schafts – ein langer
   und ein kurzer, gezeichnet als zwei Farbflaechen mit Luecke dazwischen. */
.hero-full__cta::after {
  right: calc(var(--key-h) * 0.26);
  top: calc(50% + var(--key-h) * var(--key-shaft) / 2 - 1px);
  width: calc(var(--key-h) * 1.05);
  height: calc(var(--key-h) * 0.62);
  background:
    linear-gradient(var(--orange), var(--orange)) 0 0 / 31% 100% no-repeat,
    linear-gradient(var(--orange), var(--orange)) 100% 0 / 31% 64% no-repeat;
  transform: scaleY(0);
  transform-origin: 50% 0;
  opacity: 0;
}

.hero-full__cta:hover::before,
.hero-full__cta:focus-visible::before,
.hero-full__cta.is-key::before {
  transform: scale(1);
  opacity: 1;
}

.hero-full__cta:hover::after,
.hero-full__cta:focus-visible::after,
.hero-full__cta.is-key::after {
  transform: scaleY(1);
  opacity: 1;
}

/* Fahrender Schluessel: eine Kopie des Knopfs, fest im Fenster, die custom.js
   beim Klick erzeugt und nach rechts aus dem Bild fahren laesst. */
.hero-key-fly {
  position: fixed;
  z-index: 90;
  margin: 0;
  pointer-events: none;
  will-change: transform;
}

/* Auf dem Handy rueckt die Kopfleiste ihren Inhalt 8px ein und ist flacher –
   der Hero-Inhalt zieht mit, damit er buendig unter dem Logo steht. */
@media (max-width: 767px) {
  .hero-full {
    --hero-header: 4.25rem;
  }

  .hero-full .blk {
    padding-inline: 0.5rem;
  }
}

/*
---------------------------------------------
19. Blog
---------------------------------------------
Uebersicht (blog.html) und Beitragsseiten (blog/*.html). Die Uebersicht ist
bewusst schlicht: je Thema eine weisse Karte wie beim FAQ-Akkordeon, darin pro
Beitrag eine Zeile mit Ueberschrift und grober Lesezeit.
*/

.blog-topic + .blog-topic {
  margin-top: clamp(2.25rem, 4.5vw, 3.5rem);
}

.blog-topic h2 {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  margin-bottom: 1rem;
}

.blog-topic ul {
  padding: 0.375rem clamp(1.375rem, 3vw, 2.375rem);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.blog-topic li + li {
  border-top: 1px solid var(--border);
}

.blog-topic li a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-block: 1.375rem;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: var(--navy);
  transition: color var(--t);
}

.blog-topic li a:hover {
  color: var(--orange-600);
}

.blog-topic__time,
.post-meta {
  font-size: 0.82rem;
  color: var(--muted);
}

.blog-topic__time {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
}

/* Kleiner Zurueck-Knopf oben links im Navy-Hero der Blog-Uebersicht */
/* Knopf zurueck zur Blog-Uebersicht, oben im Kopf jedes Beitrags: steht in
   einer eigenen Zeile ueber der Kategorie. */
.page-hero .back-link {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.625rem;
  padding: 0.4375rem 0.875rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  transition: color var(--t), border-color var(--t), background-color var(--t);
}

.page-hero .back-link:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
  background-color: rgba(255, 255, 255, 0.08);
}

.page-hero .back-link i {
  font-size: 0.8em;
}

/* Lesezeit im Navy-Hero der Beitragsseite */
.page-hero .post-meta {
  margin-top: 1.625rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
}

/* Beitragstext */
.post {
  max-width: 47.5rem;
  margin-inline: auto;
}

.post h2 {
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem);
  margin-top: 3.5rem;
  margin-bottom: 1rem;
}

.post > h2:first-child {
  margin-top: 0;
}

.post h3 {
  font-size: 1.15rem;
  margin-top: 2.125rem;
  margin-bottom: 0.625rem;
}

.post p,
.post li {
  font-size: 1.04rem;
  line-height: 1.7;
}

.post ul {
  margin-block: 1rem;
  padding-left: 1.375rem;
}

.post ul li {
  list-style: disc;
  color: var(--ink-soft);
  margin-bottom: 0.375rem;
}

.post ul li::marker {
  color: var(--orange);
}

.post a {
  color: var(--navy);
  font-weight: 500;
  /* !important wie bei den Rechtstexten: Die Basisregel fuer a nimmt Links
     seitenweit die Unterstreichung, im Fliesstext muessen sie erkennbar sein. */
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

.post a:hover {
  color: var(--orange-600);
}

/* Schlusssatz zu PEREMAX am Ende jedes Beitrags */
.post__note {
  margin-top: 2.25rem;
  padding: clamp(1.25rem, 2.6vw, 1.75rem);
  border-radius: var(--r-lg);
  background-color: var(--tint-strong);
  font-weight: 600;
  color: var(--navy);
}

.post__back {
  margin-top: 3.5rem;
  padding-top: 1.625rem;
  border-top: 1px solid var(--border);
  font-size: 0.95rem;
}

.post__back a {
  text-decoration: none !important;
  font-weight: 600;
}

.post__back i {
  font-size: 0.8em;
  margin-right: 0.375rem;
}

/*
---------------------------------------------
20. Kantige Baender statt Farbblasen (Oktober 2026)
---------------------------------------------
Die grossen abgerundeten Farbflaechen hinter den Abschnitten ("Blasen")
passen nicht mehr zum Auftritt. Seitdem gilt:

- Jeder Abschnitt ist ein kantiges Band ueber die volle Seitenbreite.
- Die Hintergruende wechseln, damit sich die Abschnitte voneinander abheben:
  weiss (.blk--plain), hell getoent (.blk--tint bzw. .bg-tint auf den
  Unterseiten) und navyblau (.blk--navy, .page-hero, .cta-band).
- Die Baender stossen ohne Zwischenraum aneinander.

Baender, die in einem .container sitzen, reichen per box-shadow bis an die
Fensterraender: ein 100vmax breiter Schatten in derselben Farbe, den clip-path
oben und unten wieder abschneidet. Deshalb sind diese Flaechen einfarbig –
ein Verlauf liesse am Uebergang zum Schatten eine Kante erkennen.
*/

.blk--plain,
.blk--tint,
.blk--navy {
  margin-top: 0;
  padding: clamp(3.5rem, 7vw, 7rem) 0;
  border: 0;
  border-radius: 0;
}

.blk--plain {
  overflow: visible;
}

.blk--tint {
  background: var(--tint-strong);
  box-shadow: 0 0 0 100vmax var(--tint-strong);
  clip-path: inset(0 -100vmax);
}

.blk--navy,
.page-hero {
  background: var(--navy);
  border-radius: 0;
  box-shadow: 0 0 0 100vmax var(--navy);
  clip-path: inset(0 -100vmax);
}

.page-hero {
  margin-top: 0;
  padding-inline: 0;
}

/* Auf dem Handy rueckt die Kopfleiste ihren Inhalt 8px ein – die Abschnitte
   ziehen mit, damit Text buendig unter dem Logo steht. */
@media (max-width: 767px) {
  .blk--plain,
  .blk--tint,
  .blk--navy,
  .page-hero {
    padding-inline: 0.5rem;
  }
}

/* Der Hero der Startseite bringt seine Flaeche selbst mit. */
.hero-full .blk {
  padding-block: clamp(2.375rem, 4.5vw, 4.75rem);
  background: none;
  box-shadow: none;
  clip-path: none;
}

/* Diese Baender sind ohnehin fensterbreit – hier faellt nur die Rundung weg. */
.section.bg-tint,
.cta-band,
.closing-cta,
footer {
  border-radius: 0;
}

/* Auf der Startseite schliesst der Footer direkt an das navyblaue
   Kontakt-Band an; eine feine Linie trennt die beiden Blautoene. */
#kontakt + footer {
  margin-top: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

/* Schlusssatz im Blogbeitrag: statt getoenter Blase eine orange Linie links. */
.post__note {
  padding: 0.25rem 0 0.25rem clamp(1rem, 2vw, 1.5rem);
  border-radius: 0;
  border-left: 3px solid var(--orange);
  background: none;
}

/*
---------------------------------------------
21. Leistungen als "Timed Cards" (Startseite)
---------------------------------------------
Vier Folien, eine je Leistungsbereich. Die aktive Folie fuellt den Abschnitt:
links Ueberschrift, Liste und Button, rechts die naechsten Bereiche als
Karten. Nach Ablauf des Zeitbalkens (oder per Klick auf Karte/Pfeil) waechst
die naechste Karte zur vollen Flaeche auf – custom.js legt dafuer kurz eine
Flaeche (.svc__grow) auf die Karte und zieht sie auf Abschnittsgroesse.

Hintergruende: .svc-tone-1 bis -4, je ein Foto aus assets/images/leistungen/
links abgedunkelt fuer den Text.

Ohne JavaScript (kein .is-ready) stehen die Folien einfach untereinander.
*/

.svc {
  --svc-pad: clamp(3rem, 6vw, 5.5rem);
  position: relative;
  overflow: hidden;
  color: #fff;
  background-color: var(--navy-deep);
}

.svc__bg,
.svc__grow {
  position: absolute;
  inset: 0;
}

/* ---- Toene = Bilder der vier Bereiche ----
   Jeder Ton traegt sein Foto (--svc-img) und zwei Bildausschnitte: einen fuer
   die volle Flaeche (--svc-pos), einen fuer das Hochformat der Karte
   (--svc-pos-card, dazu --svc-zoom-card als Vergroesserung: 1 = Bild fuellt
   die Kartenhoehe genau, 1.5 = anderthalbfach herangeholt). custom.js liest
   diese Werte aus, um beim Aufwachsen der Karte weich vom Karten- zum
   Vollbild-Ausschnitt zu fahren. Ueber dem Foto liegt
   immer ein Verlauf, der nach unten abdunkelt (Lesbarkeit der Kartentitel,
   der Pfeile und des Zaehlers). Auf der vollen Flaeche kommt links eine
   Abdunklung dazu (::after), weil dort Ueberschrift und Liste stehen. */
.svc-tone-1,
.svc-tone-2,
.svc-tone-3,
.svc-tone-4 {
  --svc-pos: 50% 50%;
  --svc-pos-card: 50% 50%;
  --svc-zoom-card: 1;
  background-color: var(--navy);
  background-image:
    linear-gradient(to top, rgba(2, 22, 48, 0.92) 0%, rgba(2, 22, 48, 0.45) 42%, rgba(0, 47, 109, 0.18) 100%),
    var(--svc-img);
  background-repeat: no-repeat;
  background-position: 0 0, var(--svc-pos);
  background-size: cover, cover;
}

.svc-tone-1 {
  --svc-img: url("../images/leistungen/leistung-1.jpg");
  --svc-pos: 50% 40%;
  /* Karte: das Paar am Boden vollstaendig im Ausschnitt */
  --svc-pos-card: 28% 50%;
}

.svc-tone-2 {
  --svc-img: url("../images/leistungen/leistung-2.jpg");
  --svc-pos-card: 48% 50%;
}

.svc-tone-3 {
  --svc-img: url("../images/leistungen/leistung-3.jpg");
  --svc-pos: 50% 30%;
  /* Karte: herangeholt auf die Haende mit dem Abflussrohr */
  --svc-pos-card: 39% 90%;
  --svc-zoom-card: 1.5;
}

.svc-tone-4 {
  --svc-img: url("../images/leistungen/leistung-4.jpg");
  --svc-pos-card: 46% 50%;
}

/* Abdunklung ueber der vollen Flaeche – bewusst KEINE blaue Schicht wie im
   Hero (das wirkte direkt darunter wie ein einziger blauer Klumpen): Das Foto
   bleibt in seinen Farben, nur links, wo Ueberschrift und Liste stehen, liegt
   ein dunkler Verlauf, der nach rechts auslaeuft. Auf der wachsenden Flaeche
   blendet er waehrend des Aufwachsens ein, damit der Uebergang von der Karte
   zur fertigen Folie nicht springt. */
.svc__bg::after,
.svc__grow::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(3, 18, 38, 0.88) 0%, rgba(3, 18, 38, 0.72) 30%, rgba(3, 18, 38, 0.3) 62%, rgba(3, 18, 38, 0) 100%);
}

.svc__grow::after {
  animation: svc-veil-in 1.1s var(--ease) both;
}

@keyframes svc-veil-in {
  from { opacity: 0; }
}

/* ---- Zeitbalken oben ---- */
.svc__timer {
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 3;
}

.svc__timer span {
  display: block;
  width: 0;
  height: 100%;
  background-color: var(--orange);
}

.svc.is-timing .svc__timer span {
  animation: svc-timer var(--svc-interval, 7s) linear forwards;
}

.svc.is-paused .svc__timer span {
  animation-play-state: paused;
}

@keyframes svc-timer {
  to { width: 100%; }
}

/* ---- Aufbau ---- */
.svc__inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  padding-block: var(--svc-pad);
}

.svc__slide + .svc__slide {
  margin-top: 3.5rem;
}

.svc__rail {
  display: none;
}

.svc.is-ready .svc__inner {
  min-height: clamp(36rem, calc(100vh - 5.125rem), 56rem);
  min-height: clamp(36rem, calc(100dvh - 5.125rem), 56rem);
  align-items: end;
}

/* Alle Folien liegen in derselben Rasterzelle uebereinander – der Bereich
   ist dadurch immer so hoch wie die laengste Folie und springt nicht. */
.svc.is-ready .svc__slides {
  display: grid;
  container-type: inline-size;
}

.svc.is-ready .svc__slide {
  grid-area: 1 / 1;
  align-self: end;
  margin-top: 0;
  visibility: hidden;
  /* Sichtbarkeit erst wegnehmen, wenn die Zeilen ausgeblendet sind. */
  transition: visibility 0s 0.35s;
}

.svc.is-ready .svc__slide.is-active {
  visibility: visible;
  transition: none;
}

/* Jede Zeile der Folie (Label, Ueberschrift, Listenpunkte, Knopf) blendet fuer
   sich ein: von unten, lange Dauer, weiche Kurve, leicht gestaffelt. Das ist
   ruhiger, als den ganzen Block auf einmal einzublenden. --svc-i ist die
   Position in der Staffel (nth-child-Regeln darunter). */
.svc.is-ready .svc__slide > *:not(.svc__list),
.svc.is-ready .svc__list li {
  --svc-i: 0;
  opacity: 0;
  transform: translateY(1.625rem);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.svc.is-ready .svc__slide.is-active > *:not(.svc__list),
.svc.is-ready .svc__slide.is-active .svc__list li {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--svc-i) * 55ms),
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--svc-i) * 55ms);
}

.svc.is-ready .svc__slide > .svc__title { --svc-i: 1; }
.svc.is-ready .svc__list li:nth-child(1) { --svc-i: 2; }
.svc.is-ready .svc__list li:nth-child(2) { --svc-i: 3; }
.svc.is-ready .svc__list li:nth-child(3) { --svc-i: 4; }
.svc.is-ready .svc__list li:nth-child(4) { --svc-i: 5; }
.svc.is-ready .svc__list li:nth-child(5) { --svc-i: 6; }
.svc.is-ready .svc__list li:nth-child(6) { --svc-i: 7; }
.svc.is-ready .svc__list li:nth-child(7) { --svc-i: 8; }
.svc.is-ready .svc__list li:nth-child(8) { --svc-i: 9; }
.svc.is-ready .svc__list li:nth-child(9) { --svc-i: 10; }
.svc.is-ready .svc__list li:nth-child(10) { --svc-i: 11; }
.svc.is-ready .svc__slide > .svc__cta { --svc-i: 12; }

/* Waehrend eine Karte aufwaechst, tritt der Text der alten Folie zurueck. */
.svc.is-switching .svc__slide.is-active > *:not(.svc__list),
.svc.is-switching .svc__slide.is-active .svc__list li {
  opacity: 0;
  transform: translateY(-0.75rem);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .svc.is-ready .svc__slide > *:not(.svc__list),
  .svc.is-ready .svc__list li {
    transition: none !important;
    transform: none !important;
  }
}

.svc.is-ready .svc__rail {
  display: grid;
  gap: clamp(1.375rem, 2.6vw, 2.125rem);
  min-width: 0;
}

@media (min-width: 992px) {
  .svc.is-ready .svc__inner {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  }
}

/* ---- Text der Folie ---- */
.svc__label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.875rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 1.125rem;
}

.svc__label::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  background-color: var(--orange);
}

.svc__label span {
  color: rgba(255, 255, 255, 0.7);
}

.svc__title {
  font-family: "Instrument Sans Hero", var(--font-display);
  font-size: clamp(2rem, 4.8vw, 4.2rem);
  font-size: clamp(1.8rem, 11.3cqi, 4.3rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: clamp(1.125rem, 2.4vw, 1.875rem);
}

.svc__list {
  display: grid;
  gap: 0.625rem;
  max-width: 38rem;
}

.svc__list li {
  position: relative;
  padding-left: 1.75rem;
  /* an die Spaltenbreite gekoppelt, damit auch der laengste Listenpunkt
     einzeilig bleibt und die Folie auf einen Bildschirm passt */
  font-size: clamp(0.98rem, 0.92rem + 0.3vw, 1.14rem);
  font-size: clamp(0.95rem, 3.45cqi, 1.14rem);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
}

.svc__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 0.75rem;
  height: 2px;
  background-color: var(--orange);
}

.svc__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 15rem;
  height: 3.125rem;
  padding-inline: 1.875rem;
  margin-top: clamp(1.5rem, 3vw, 2.375rem);
  background-color: var(--orange);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
  transition: background-color var(--t);
}

.svc__cta:hover,
.svc__cta:focus-visible {
  background-color: var(--orange-600);
  color: #fff;
}

/* ---- Karten der naechsten Bereiche ---- */
.svc__cards {
  display: flex;
  gap: clamp(0.75rem, 1.6vw, 1.375rem);
  /* Die Reihe darf rechts ueber den Inhaltsrand hinauslaufen (wie in der
     Vorlage); der Abschnitt schneidet sie am Fensterrand ab. */
  min-width: 0;
}

.svc__card {
  container-type: inline-size;
  position: relative;
  flex: 0 0 clamp(9.375rem, 15.8vw, 14.75rem);
  aspect-ratio: 2 / 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 1.375rem 2.75rem rgba(2, 16, 34, 0.5);
  color: #fff;
  text-align: left;
  cursor: pointer;
  /* Im Hochformat der Karte gilt der eigene Bildausschnitt. Das Querformat-
     Foto fuellt die Kartenhoehe (auto 100%), mal Vergroesserung. */
  background-position: 0 0, var(--svc-pos-card);
  background-size: cover, auto calc(var(--svc-zoom-card) * 100%);
  transition: transform var(--t), border-color var(--t);
}

/* Oben leicht abgedunkelt, damit Symbol und Nummer auch auf hellen Fotos
   lesbar bleiben. */
.svc__card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 36%;
  background: linear-gradient(to bottom, rgba(2, 22, 48, 0.62) 0%, rgba(2, 22, 48, 0) 100%);
}

.svc__card:hover,
.svc__card:focus-visible {
  transform: translateY(-0.5rem);
  border-color: rgba(255, 255, 255, 0.55);
}

.svc__card-icon {
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-size: 1.15rem;
  color: var(--orange);
}

.svc__card-num {
  position: absolute;
  top: 0.9375rem;
  right: 1rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.6);
}

.svc__card-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 0.375rem;
}

.svc__card-label::before {
  content: "";
  display: block;
  width: 1.125rem;
  height: 2px;
  margin-bottom: 0.5rem;
  background-color: var(--orange);
}

.svc__card-title {
  font-family: "Instrument Sans Hero", var(--font-display);
  font-size: 0.95rem;
  font-size: clamp(0.8rem, 8.6cqi, 1.25rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* Die Flaeche, die von der Karte auf Abschnittsgroesse aufwaechst */
.svc__grow {
  inset: auto;
  z-index: 1;
}

/* ---- Pfeile, Linie, Zaehler ---- */
.svc__nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.svc__arrow {
  display: grid;
  place-items: center;
  width: 3.125rem;
  height: 3.125rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: none;
  color: #fff;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color var(--t), border-color var(--t), color var(--t);
}

.svc__arrow:hover,
.svc__arrow:focus-visible {
  background-color: #fff;
  border-color: #fff;
  color: var(--navy);
}

.svc__line {
  flex: 1;
  height: 1px;
  margin-inline: 0.625rem;
  background-color: rgba(255, 255, 255, 0.28);
}

.svc__count {
  font-family: "Instrument Sans Hero", var(--font-display);
  font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
}

/* ---- Schmal: Text oben, Karten als Reihe zum Wischen darunter ---- */
@media (max-width: 991px) {
  .svc.is-ready .svc__inner {
    min-height: 0;
  }

  /* Untereinander: Folien oben buendig, sonst stuende ueber kuerzeren Listen
     ein leerer Streifen (die Zelle ist so hoch wie die laengste Folie). */
  .svc.is-ready .svc__slide {
    align-self: start;
  }

  .svc__cards {
    overflow-x: auto;
    padding-bottom: 0.875rem;
    margin-right: -0.75rem;
    scrollbar-width: none;
  }

  .svc__cards::-webkit-scrollbar {
    display: none;
  }

  .svc__card {
    flex-basis: clamp(8.25rem, 38vw, 11.875rem);
    box-shadow: 0 0.75rem 1.5rem rgba(2, 16, 34, 0.45);
  }
}

@media (max-width: 767px) {
  .svc__inner {
    padding-inline: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .svc__timer {
    display: none;
  }
}

/*
---------------------------------------------
22. Eckiger Knopf
---------------------------------------------
(Der fruehere Abschnitt "Im Alltag" mit der Gegenueberstellung
Ohne Verwaltung / Mit uns ist im Oktober 2026 entfallen.)
*/

/* Eckiger Knopf fuer helle Abschnitte (wie "Zum Angebot" bei den Leistungen) */
.btn-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 13.75rem;
  height: 2.875rem;
  padding-inline: 1.75rem;
  background-color: var(--orange);
  color: #fff;
  font-weight: 600;
  transition: background-color var(--t);
}

.btn-box:hover,
.btn-box:focus-visible {
  background-color: var(--orange-600);
  color: #fff;
}

/*
---------------------------------------------
23. Praxisbeispiele: Auswahlkacheln + Ablauf in drei Schritten (Startseite)
---------------------------------------------
Oben vier kantige Kacheln (Nummer, Symbol, Stichwort); die aktive ist navy.
Darunter das Beispiel als drei navyblaue Schrittkarten nebeneinander, durch
orange Pfeile verbunden: Situation, PEREMAX-Prozess, Vorteil.
Die Karten sind so hoch wie ihr Inhalt (gleich hoch innerhalb eines
Beispiels) – lange Texte bekommen Platz, kurze stehen nicht verloren in einer
grossen Flaeche.
*/

.pcases {
  padding-block: clamp(3.5rem, 6.4vw, 6rem);
}

.pcases__head {
  margin-bottom: clamp(1.75rem, 3.6vw, 3.125rem);
}

.pcases__heading {
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.1rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.03em;
}

/* ---- Auswahlkacheln ---- */
.pcases__tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.625rem;
}

@media (min-width: 768px) {
  .pcases__tabs {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
  }
}

.pcases__tab {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.625rem 0.75rem;
  padding: clamp(0.875rem, 1.5vw, 1.125rem) clamp(1rem, 1.7vw, 1.375rem) clamp(0.9375rem, 1.6vw, 1.25rem);
  border: 0;
  background-color: #e3e9f2;
  color: var(--navy);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}

.pcases__tab:hover,
.pcases__tab:focus-visible {
  background-color: #d5deec;
}

.pcases__tab.is-active {
  background-color: var(--navy);
  color: #fff;
}

.pcases__num {
  grid-column: 1 / -1;
  font-family: "Instrument Sans Hero", var(--font-display);
  font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.3rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: rgba(0, 47, 109, 0.2);
  transition: color 0.3s var(--ease);
}

.pcases__tab.is-active .pcases__num {
  color: rgba(255, 255, 255, 0.28);
}

.pcases__icon {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  background-color: #fff;
  color: var(--navy);
  font-size: 0.78rem;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}

.pcases__tab.is-active .pcases__icon {
  background-color: var(--orange);
  color: #fff;
}

.pcases__tag {
  font-size: clamp(0.9rem, 0.84rem + 0.3vw, 1.05rem);
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

/* ---- Beispiel ---- */
.pcases__panels {
  margin-top: clamp(2.125rem, 4.2vw, 3.625rem);
}

.pcase:not([hidden]) {
  animation: pcase-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes pcase-in {
  from { opacity: 0; transform: translateY(0.875rem); }
}

.pcase__title {
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.9rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: clamp(1.375rem, 2.8vw, 2.25rem);
}

.pcase__steps {
  --pcase-gap: clamp(2.125rem, 3.6vw, 3.25rem);
  display: grid;
  gap: var(--pcase-gap);
}

.pcase__step {
  position: relative;
  padding: clamp(1.375rem, 2.2vw, 1.875rem);
}

/* Alle drei Karten in demselben Navy (drei verschiedene Flaechen waren zu
   unruhig). Unterschieden werden sie ueber Nummer und Ueberschrift; der
   Vorteil bekommt als einzige eine orange Oberkante. */
.pcase__step {
  background-color: var(--navy);
}

.pcase__step--benefit {
  box-shadow: inset 0 0.25rem 0 var(--orange);
}

.pcase__label {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 0.875rem;
}

.pcase__label b {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  background-color: var(--orange);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0;
}

.pcase__step p {
  font-size: 0.97rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
}

.pcase__step p + p {
  margin-top: 0.7em;
}

.pcase__step--benefit p {
  color: #fff;
  font-weight: 600;
}

/* Pfeil zum naechsten Schritt: einfacher oranger Pfeil in der Luecke */
.pcase__step:not(:last-child)::after {
  content: "\2193";
  position: absolute;
  left: 50%;
  top: 100%;
  z-index: 1;
  width: var(--pcase-gap);
  height: var(--pcase-gap);
  margin-left: calc(var(--pcase-gap) / -2);
  display: grid;
  place-items: center;
  color: var(--orange);
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1;
}

@media (min-width: 992px) {
  .pcase__steps {
    grid-template-columns: repeat(3, 1fr);
  }

  .pcase__step:not(:last-child)::after {
    content: "\2192";
    left: 100%;
    top: 50%;
    margin: calc(var(--pcase-gap) / -2) 0 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pcase:not([hidden]) {
    animation: none;
  }
}

/*
---------------------------------------------
24. "So arbeiten wir": Portal-Vorteile als kantige Flaeche
---------------------------------------------
*/
.portal-columns--box,
.blk--plain .portal-columns--box {
  padding: clamp(1.375rem, 2.6vw, 2.125rem);
  border: 0;
  border-radius: 0;
  background-color: #e3e9f2;
  box-shadow: none;
}

/*
---------------------------------------------
25. Ablauf als festgehaltene Szene (Startseite)
---------------------------------------------
Der Abschnitt ist hoeher als der Bildschirm; .flow__sticky bleibt beim
Scrollen stehen, bis alle Schritte durch sind. custom.js rechnet aus der
Scrollposition den Schritt aus und setzt .is-active (Text), .is-on (Balken)
sowie .is-built / .is-current (Haeuser). --flow-step ist die Scrollstrecke
je Schritt.

Rechts eine isometrische Zeichnung: ein helles Band mit vier Bauplaetzen,
auf denen nacheinander Haeuser mit den Dachlinien der Bildmarke entstehen.
Das zuletzt gebaute Haus ist weiss mit orangem Dach, die frueheren treten in
Blaugrau zurueck.

Ohne JavaScript (kein .is-ready): normale Hoehe, Schritte untereinander,
alle Haeuser gebaut.
*/

.flow {
  --flow-top: 4.375rem;
  --flow-step: 62vh;
  background-color: #eef2f8;
}

.flow__sticky {
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.flow.is-ready {
  height: calc(100vh - var(--flow-top) + 3.4 * var(--flow-step));
  height: calc(100svh - var(--flow-top) + 3.4 * var(--flow-step));
}

.flow.is-ready .flow__sticky {
  position: sticky;
  top: var(--flow-top);
  display: flex;
  align-items: center;
  height: calc(100vh - var(--flow-top));
  height: calc(100svh - var(--flow-top));
  padding-block: clamp(1.125rem, 3vh, 2.75rem);
  overflow: hidden;
}

.flow__inner {
  display: grid;
  gap: clamp(1.125rem, 3vw, 3rem);
  align-items: center;
  width: 100%;
}

@media (min-width: 992px) {
  .flow__inner {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

.flow__text .blk__eyebrow {
  margin-bottom: 0.625rem;
}

.flow__heading {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.flow__lead {
  margin-top: 0.5rem;
  max-width: 46ch;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--muted);
}

/* ---- Schritte ---- */
.flow__steps {
  margin-top: clamp(1.125rem, 3vh, 2.125rem);
}

.flow__step + .flow__step {
  margin-top: 1.75rem;
}

.flow__num {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: "Instrument Sans Hero", var(--font-display);
  font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  font-weight: 700;
  line-height: 1;
  color: var(--orange);
  margin-bottom: 0.625rem;
}

.flow__num i {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.flow__title {
  font-family: "Instrument Sans Hero", var(--font-display);
  font-size: clamp(1.7rem, 1.1rem + 2.6vw, 3.3rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: clamp(0.625rem, 1.4vw, 1.125rem);
}

.flow__step p {
  max-width: 44ch;
  font-size: clamp(0.98rem, 0.94rem + 0.2vw, 1.08rem);
  line-height: 1.55;
}

/* Im festgehaltenen Zustand liegen alle Schritte uebereinander. */
.flow.is-ready .flow__steps {
  display: grid;
}

.flow.is-ready .flow__step {
  grid-area: 1 / 1;
  margin-top: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(1.75rem);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0s 0.35s;
}

.flow.is-ready .flow__step.is-past {
  transform: translateY(-1.75rem);
}

.flow.is-ready .flow__step.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}

/* ---- Fortschrittsbalken ---- */
.flow__bars {
  display: none;
  gap: 0.5rem;
  margin-top: clamp(1.125rem, 3vh, 1.875rem);
}

.flow.is-ready .flow__bars {
  display: flex;
}

.flow__bars span {
  width: 2.75rem;
  height: 0.25rem;
  background-color: rgba(0, 47, 109, 0.16);
  transition: background-color 0.35s var(--ease), width 0.35s var(--ease);
}

.flow__bars span.is-on {
  width: 4.5rem;
  background-color: var(--orange);
}

.flow .btn-box {
  margin-top: clamp(1.125rem, 3vh, 1.875rem);
}

/* ---- Zeichnung ---- */
.flow__art {
  min-width: 0;
}

.flow__svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(62vh, 32.5rem);
  overflow: visible;
}

.fl-belt {
  fill: #fff;
  stroke: rgba(0, 47, 109, 0.12);
  stroke-width: 1.2;
}

.fl-plot {
  fill: none;
  stroke: rgba(0, 47, 109, 0.3);
  stroke-width: 1.2;
  stroke-dasharray: 5 5;
}

.flow-house {
  --h-wall-l: #dbe3ef;
  --h-wall-r: #c5d0e2;
  --h-roof: #7f93b3;
  --h-roof-b: #6b7f9f;
}

.flow-house.is-current {
  --h-wall-l: #ffffff;
  --h-wall-r: #e9eef6;
  --h-roof: var(--orange);
  --h-roof-b: #d97a00;
}

.flow-house polygon,
.flow-house polyline {
  stroke: #002f6d;
  stroke-width: 1.3;
  stroke-linejoin: round;
  stroke-linecap: round;
  transition: fill 0.5s var(--ease);
}

.fl-wall-l { fill: var(--h-wall-l); }
.fl-wall-r { fill: var(--h-wall-r); }
.fl-roof-f { fill: var(--h-roof); }
.fl-roof-b { fill: var(--h-roof-b); }
.fl-door { fill: #002f6d; }
.fl-win { fill: #fff; }

.flow-house .fl-logo-n,
.flow-house .fl-logo-o {
  fill: none;
  stroke-width: 3.2;
}

.flow-house .fl-logo-o {
  stroke: var(--orange);
}

/* Bauen: Das Haus waechst vom Boden her mit leichtem Ueberschwingen. */
.flow-house__body {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s var(--ease);
}

.flow.is-ready .flow-house:not(.is-built) .flow-house__body {
  opacity: 0;
  transform: translateY(0.875rem) scale(0.55);
  transition: transform 0.35s var(--ease), opacity 0.3s var(--ease);
}

@media (max-width: 991px) {
  .flow__lead {
    display: none;
  }

  .flow__art {
    order: -1;
  }

  .flow__svg {
    max-height: 30vh;
  }
}

@media (max-width: 767px) {
  .flow__inner {
    padding-inline: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flow.is-ready .flow__step,
  .flow.is-ready .flow__step.is-active,
  .flow-house__body,
  .flow.is-ready .flow-house:not(.is-built) .flow-house__body,
  .flow-house polygon,
  .flow-house polyline {
    transition: none;
  }
}

/*
---------------------------------------------
26. Ueber uns als Kachelreihe (Startseite)
---------------------------------------------
Eine navyblaue Textkachel und je Person eine Portraitkachel. Name und Funktion
stehen unten auf dem Foto; beim Ueberfahren, Fokussieren oder Antippen
(.is-open) legt sich eine navyblaue Flaeche mit den Qualifikationen darueber.
*/

.team {
  padding-block: clamp(3rem, 6vw, 5.75rem);
}

.team__head {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.team__heading {
  max-width: 20ch;
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.1rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.team__row {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .team__row {
    grid-template-columns: repeat(2, 1fr);
  }

  .team__text {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1100px) {
  .team__row {
    grid-template-columns: 1.15fr 1fr 1fr;
  }

  .team__text {
    grid-column: auto;
  }
}

.team__tile {
  position: relative;
  min-height: clamp(22rem, 34vw, 30rem);
  overflow: hidden;
}

.team__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background-color: var(--navy);
}

.team__text p {
  font-size: clamp(0.98rem, 0.94rem + 0.2vw, 1.08rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
}

.team__text .team__statement {
  margin-top: 1.4em;
  padding-left: 1rem;
  border-left: 3px solid var(--orange);
  font-weight: 600;
  color: #fff;
}

.team__person {
  background-color: #7d7d7f;
  cursor: pointer;
}

.team__person img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  transition: transform 0.6s var(--ease);
}

.team__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 4.375rem 1.375rem 1.25rem;
  background: linear-gradient(to top, rgba(2, 22, 48, 0.9) 0%, rgba(2, 22, 48, 0) 100%);
  color: #fff;
  transition: opacity 0.3s var(--ease);
}

.team__caption h3,
.team__info h3 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
}

.team__caption span,
.team__info > span {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
}

/* Flaeche mit den Qualifikationen */
.team__info {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem 1.375rem 1.375rem;
  background-color: rgba(0, 47, 109, 0.94);
  color: #fff;
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 0.35s var(--ease), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.team__info ul {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.125rem;
}

.team__info li {
  position: relative;
  padding-left: 1.375rem;
  font-size: 0.98rem;
  color: rgba(255, 255, 255, 0.9);
}

.team__info li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 0.75rem;
  height: 2px;
  background-color: var(--orange);
}

.team__person.is-open .team__info,
.team__person:focus-visible .team__info {
  opacity: 1;
  transform: none;
}

.team__person.is-open .team__caption,
.team__person:focus-visible .team__caption {
  opacity: 0;
}

@media (hover: hover) {
  .team__person:hover .team__info {
    opacity: 1;
    transform: none;
  }

  .team__person:hover .team__caption {
    opacity: 0;
  }

  .team__person:hover img {
    transform: scale(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  .team__info,
  .team__caption,
  .team__person img {
    transition: none;
  }
}

/*
---------------------------------------------
27. Haeufige Fragen: kantig
---------------------------------------------
*/
.accordion--box,
.blk--tint .accordion--box {
  border: 0;
  border-radius: 0;
}

.accordion--box .accordion-button::after {
  border-radius: 0;
}

/*
---------------------------------------------
28. Kontakt als geteilte Flaeche (Startseite)
---------------------------------------------
Links navy (Ueberschrift, Einleitung, Direktkontakt), rechts weiss das
Formular. Die Formularfelder sind im Grundzustand fuer dunklen Grund
gestaltet (Abschnitt 15); hier bekommen sie ihre helle, kantige Fassung.
--kontakt-gutter haelt die aeusseren Kanten buendig mit dem Rest der Seite.
*/

.kontakt {
  --kontakt-container: 100vw;
  --kontakt-gutter: max(1.25rem, calc((100vw - var(--kontakt-container)) / 2 + 0.75rem));
  display: grid;
}

@media (min-width: 576px) { .kontakt { --kontakt-container: 33.75rem; } }
@media (min-width: 768px) { .kontakt { --kontakt-container: 45rem; } }
@media (min-width: 992px) { .kontakt { --kontakt-container: 60rem; } }
@media (min-width: 1200px) { .kontakt { --kontakt-container: 71.25rem; } }
@media (min-width: 1400px) { .kontakt { --kontakt-container: 82.5rem; } }

.kontakt__info {
  padding: clamp(2.5rem, 5vw, 5rem) var(--kontakt-gutter);
  background-color: var(--navy);
  color: #fff;
}

.kontakt__info .blk__eyebrow {
  color: var(--orange);
}

.kontakt__heading {
  font-family: "Instrument Sans Hero", var(--font-display);
  font-size: clamp(1.7rem, 1.1rem + 1.7vw, 2.45rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #fff;
}

.kontakt__lead {
  margin-top: clamp(0.875rem, 1.8vw, 1.375rem);
  max-width: 40ch;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.8);
}

.kontakt .contact-direct {
  grid-template-columns: 1fr;
  gap: 0.625rem;
  margin: clamp(1.625rem, 3.4vw, 2.75rem) 0 0;
  max-width: 26rem;
}

.kontakt .contact-direct__item {
  border-radius: 0;
}

.kontakt__form {
  padding: clamp(2.25rem, 4.6vw, 4.5rem) var(--kontakt-gutter);
  background-color: var(--surface);
}

.kontakt__formtitle {
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: clamp(1.125rem, 2.2vw, 1.75rem);
}

@media (min-width: 992px) {
  .kontakt {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }

  .kontakt__info {
    padding-right: clamp(2rem, 4vw, 4rem);
  }

  .kontakt__form {
    padding-left: clamp(2rem, 5vw, 5rem);
  }
}

/* Formular auf hellem Grund */
.kontakt__form .field {
  margin-bottom: 1.125rem;
}

.kontakt__form .field label {
  color: var(--ink-soft);
}

.kontakt__form #contact-form input,
.kontakt__form #contact-form select,
.kontakt__form #contact-form textarea {
  border: 1px solid #c9d3e3;
  border-radius: 0;
  background-color: #fff;
  color: var(--ink);
}

.kontakt__form #contact-form input:hover,
.kontakt__form #contact-form select:hover,
.kontakt__form #contact-form textarea:hover {
  border-color: #8fa2bd;
}

.kontakt__form #contact-form input:focus,
.kontakt__form #contact-form select:focus,
.kontakt__form #contact-form textarea:focus {
  border-color: var(--navy);
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(0, 47, 109, 0.12);
}

.kontakt__form #contact-form input::placeholder,
.kontakt__form #contact-form textarea::placeholder {
  color: #94a0b3;
}

.kontakt__form #contact-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23002f6d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.kontakt__form #contact-form button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: 100%;
  height: 3.375rem;
  border-radius: 0;
  font-size: 0.86rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.kontakt__form #contact-form button:hover {
  transform: none;
}

.kontakt__form .form-note {
  color: var(--muted);
}

.kontakt__form .form-note a {
  color: var(--navy);
}

.kontakt__form .form-status--error {
  color: #b42318;
}

/* Erfolgsmeldung: im Grundzustand weiss auf dunklem Grund – hier dunkel auf
   heller Flaeche, sonst waere sie auf dem weissen Formular unsichtbar. */
.kontakt__form .form-success {
  border: 1px solid #c9d3e3;
  border-radius: 0;
  background: var(--tint-strong);
}

.kontakt__form .form-success__title {
  color: var(--navy);
}

.kontakt__form .form-success__text {
  color: var(--ink-soft);
}

/* Footer schliesst direkt an (beide enden navy bzw. weiss sauber ab). */
#kontakt + footer {
  margin-top: 0;
  border-top: 0;
}

/*
---------------------------------------------
29. Leichte Hintergruende fuer helle Abschnitte
---------------------------------------------
Nach dem bildstarken Einstieg (Video-Hero, Leistungen mit Fotos) sollen die
folgenden Abschnitte nicht einfach weiss sein. .band-soft gibt ihnen einen
hellen, leicht blauen Grund mit einem sanften Verlauf und den Dachlinien der
Bildmarke als sehr blassem Muster in einer Ecke – ruhig genug, um dem Inhalt
nichts wegzunehmen. Weisse und getoente Abschnitte wechseln sich ab.
*/

.band-soft {
  background-color: #eef2f8;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 300' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20,290 300,30 580,290' stroke='%23002f6d' stroke-opacity='.07' stroke-width='3'/%3E%3Cpolyline points='150,290 300,150 450,290' stroke='%23ff9202' stroke-opacity='.3' stroke-width='3'/%3E%3C/svg%3E"),
    linear-gradient(160deg, #f6f8fc 0%, #e8eef7 100%);
  background-repeat: no-repeat;
  background-position: right -6% bottom -1px, 0 0;
  background-size: min(46%, 38.75rem) auto, cover;
}

/*
---------------------------------------------
30. So arbeiten wir (Startseite)
---------------------------------------------
Bewusst schlicht: weisser Grund, Schrift in den Markenfarben. Steht zwischen
dem Video-Hero und dem Leistungen-Bereich mit Fotos und trennt die beiden
dunklen Bildflaechen. Links die grosse Ueberschrift (zweiter Satz orange),
darunter die Portal-Vorteile als zwei kleine Spalten und der Knopf; rechts
der Fliesstext.
*/

.work {
  padding-block: clamp(4.5rem, 9vw, 8.5rem);
  background-color: var(--surface);
}

/* Der Fliesstext rechts steht mittig neben dem linken Block (Ueberschrift,
   Vorteile, Knopf), nicht oben buendig. */
.work__top {
  display: grid;
  gap: clamp(1.625rem, 4vw, 4.5rem);
  align-items: center;
}

@media (min-width: 992px) {
  .work__top {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  }
}

.work__heading {
  /* so gewaehlt, dass jeder der beiden Saetze in seiner Spalte moeglichst
     nicht mitten im Satz umbricht */
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.3rem);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.03em;
  color: var(--navy);
}

.work__heading span {
  display: block;
  color: var(--orange);
}

.work__text > p {
  font-size: clamp(1rem, 0.96rem + 0.25vw, 1.12rem);
  line-height: 1.6;
  color: var(--ink-soft);
}

.work__lead .btn-box {
  margin-top: clamp(1.375rem, 2.6vw, 2.125rem);
}

/* Portal-Vorteile unter der Ueberschrift, zwischen zwei feinen Linien */
.work__perks {
  display: grid;
  gap: 1.375rem clamp(1.375rem, 3vw, 2.5rem);
  margin-top: clamp(1.625rem, 3.2vw, 2.75rem);
  padding-block: clamp(1.25rem, 2.4vw, 1.875rem);
  border-block: 1px solid rgba(0, 47, 109, 0.16);
}

@media (min-width: 576px) {
  .work__perks {
    grid-template-columns: 1fr 1fr;
  }
}

.work__perks h3 {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 0.75rem;
}

.work__perks ul {
  display: grid;
  gap: 0.5rem;
}

.work__perks li {
  position: relative;
  padding-left: 1.375rem;
  font-size: 0.97rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

.work__perks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 0.75rem;
  height: 2px;
  background-color: var(--orange);
}

/*
---------------------------------------------
31. Blog-Uebersicht als Kachelraster
---------------------------------------------
Kantige Bildkacheln in einem Vier-Spalten-Raster, breite (.bpost--wide, zwei
Spalten) und schmale im Wechsel. Ueber dem Bild liegt eine blaue Schicht, die
nach oben links dichter wird – dort stehen Thema und Ueberschrift in Weiss.
Unten links ein weisser Knopf mit der Lesezeit. Die ganze Kachel ist ueber den
Link in der Ueberschrift anklickbar.
*/

.bposts {
  display: grid;
  gap: 0.875rem;
}

@media (min-width: 640px) {
  .bposts {
    grid-template-columns: repeat(2, 1fr);
  }

  .bpost--wide {
    grid-column: span 2;
  }
}

@media (min-width: 1100px) {
  .bposts {
    grid-template-columns: repeat(4, 1fr);
  }
}

.bpost {
  position: relative;
  display: flex;
  min-height: clamp(17rem, 24vw, 21rem);
  overflow: hidden;
  background-color: var(--navy);
  color: #fff;
}

.bpost img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

.bpost::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(2, 22, 48, 0.55) 0%, rgba(2, 22, 48, 0) 45%),
    linear-gradient(160deg, rgba(0, 47, 109, 0.92) 0%, rgba(0, 47, 109, 0.72) 42%, rgba(0, 47, 109, 0.25) 100%);
  transition: opacity 0.4s var(--ease);
}

.bpost__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: clamp(1.125rem, 2vw, 1.625rem);
}

.bpost__tag {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 0.625rem;
}

.bpost__title {
  max-width: 22ch;
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.55rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.015em;
  color: #fff;
}

/* "Sondereigentumsverwaltung" passt in schmalen Kacheln nicht in eine Zeile.
   Getrennt wird nur an der im HTML vorgegebenen Stelle (­ zwischen
   "Sondereigentums" und "verwaltung") – die automatische Trennung des
   Browsers setzte den Strich an unschoenen Stellen. */
.bpost__title {
  hyphens: manual;
  -webkit-hyphens: manual;
}

.bpost--wide .bpost__title {
  max-width: 26ch;
  font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.9rem);
}

.bpost__title a {
  color: inherit;
}

.bpost__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.bpost__more {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  align-self: flex-start;
  margin-top: auto;
  padding: 0.5625rem 0.875rem;
  background-color: #fff;
  color: var(--navy);
  font-size: 0.84rem;
  font-weight: 600;
  transition: background-color var(--t), color var(--t);
}

.bpost__more span {
  font-weight: 500;
  color: var(--muted);
  transition: color var(--t);
}

@media (hover: hover) {
  .bpost:hover img {
    transform: scale(1.05);
  }

  .bpost:hover .bpost__more {
    background-color: var(--orange);
    color: #fff;
  }

  .bpost:hover .bpost__more span {
    color: rgba(255, 255, 255, 0.85);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bpost img {
    transition: none;
  }
}

/*
---------------------------------------------
32. Haeufige Fragen (Startseite)
---------------------------------------------
Ueberschrift oben, darunter die Fragen als weisse, kantige Kacheln auf hell
blauem Grund, untereinander ueber die volle Breite, am Ende der Knopf.
Die geoeffnete Frage bekommt links eine orange Kante.
*/

.faq {
  padding-block: clamp(4rem, 8vw, 7.75rem);
  background-color: #eef2f8;
}

.faq__head {
  margin-bottom: clamp(1.75rem, 3.6vw, 3.25rem);
}

.faq__heading {
  font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.9rem);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.03em;
}

.faq__lead {
  margin-top: 0.75rem;
  font-size: clamp(1rem, 0.96rem + 0.25vw, 1.12rem);
  color: var(--ink-soft);
}

.accordion--tiles {
  display: grid;
  gap: 0.625rem;
  align-items: start;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}


.accordion--tiles .accordion-item {
  border: 0;
  background-color: var(--surface);
  box-shadow: inset 3px 0 0 transparent;
  transition: box-shadow 0.3s var(--ease);
}

.accordion--tiles .accordion-item:has(.accordion-button:not(.collapsed)) {
  box-shadow: inset 3px 0 0 var(--orange);
}

.accordion--tiles .accordion-button {
  padding: 1.375rem 4.25rem 1.375rem 1.5rem;
}

.accordion--tiles .accordion-button::after {
  right: 1.375rem;
  border-radius: 0;
}

.accordion--tiles .accordion-button:not(.collapsed)::after {
  background-color: var(--orange);
  border-color: var(--orange);
}

.accordion--tiles .accordion-body {
  padding: 0 1.5rem 1.5rem;
}

.faq__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: clamp(1.625rem, 3.4vw, 2.75rem);
}


/*
---------------------------------------------
33. Kopfleiste kantig
---------------------------------------------
Die Menuepunkte hatten runde Flaechen (Pillen) fuer Hover und aktiven Punkt,
der Kundenportal-Knopf war eine Pille mit Schatten. Passend zum uebrigen
Auftritt jetzt: Menuepunkte ohne Flaeche, stattdessen eine orange Linie unter
dem Wort (laeuft beim Ueberfahren von links ein, steht beim aktiven Punkt);
Kundenportal als kantiger oranger Knopf.
*/

.header-area .main-nav .nav li a {
  border-radius: 0;
}

.header-area .main-nav .nav li:not(.nav-cta) a {
  background-image: linear-gradient(var(--orange), var(--orange));
  background-repeat: no-repeat;
  background-origin: content-box;
  background-position: 0 calc(100% + 0.375rem);
  background-size: 0 2px;
  transition: color var(--t), background-size 0.3s var(--ease);
}

.header-area .main-nav .nav li:not(.nav-cta) a:hover,
.header-area .main-nav .nav li:not(.nav-cta) a.active {
  background-color: transparent;
  background-size: 100% 2px;
  color: var(--navy);
}

.header-area .main-nav .nav li.nav-cta a {
  border-radius: 0;
  box-shadow: none;
}

/*
---------------------------------------------
34. Kopf der Blog-Seite
---------------------------------------------
Wie der Hero der Startseite, nur ruhiger: ein Standbild ueber die volle
Breite, darueber dieselbe dunkle, nach rechts dichter werdende Abdunklung.
Oben links der Knopf zurueck, rechtsbuendig das grosse "BLOG" in fetten
Versalien und darunter die Einleitung.
*/

.blog-hero {
  position: relative;
  color: #fff;
  background-color: var(--navy-deep);
  background-image:
    linear-gradient(to top, rgba(3, 18, 38, 0.72) 0%, rgba(3, 18, 38, 0.24) 46%, rgba(3, 18, 38, 0.24) 100%),
    linear-gradient(270deg, rgba(3, 18, 38, 0.82) 0%, rgba(3, 18, 38, 0.56) 44%, rgba(3, 18, 38, 0.22) 100%),
    url("../images/hero-daemmerung.jpg");
  background-size: cover;
  background-position: 0 0, 0 0, 40% 45%;
}

.blog-hero__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(1.75rem, 5vw, 4rem);
  min-height: clamp(17rem, 40vh, 25rem);
  padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(1.875rem, 4vw, 3.25rem);
}

.blog-hero .back-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
  transition: background-color var(--t), border-color var(--t), color var(--t);
}

.blog-hero .back-link:hover {
  background-color: #fff;
  border-color: #fff;
  color: var(--navy);
}

.blog-hero .back-link i {
  font-size: 0.8em;
}

.blog-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.blog-hero__title {
  font-family: "Instrument Sans Hero", var(--font-display);
  font-size: clamp(3.4rem, 1.8rem + 7vw, 7.5rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 1.75rem rgba(4, 33, 63, 0.35);
}

.blog-hero__text {
  margin-top: clamp(0.75rem, 1.6vw, 1.25rem);
  max-width: 62ch;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
}

@media (max-width: 767px) {
  .blog-hero__inner {
    padding-inline: 1.25rem;
  }
}