/* =============================================================================
   ManagerProtect – manager-protect.de
   Stylesheet: Design-System, Layout, Komponenten
   -----------------------------------------------------------------------------
   Gestaltungsprinzip "Kachelflächen":
   Struktur entsteht über Flächen, nicht über Linien. Inhaltsblöcke sind Kacheln
   mit warmem oder weißem Hintergrund und, wo sie sich abheben sollen, einem
   weichen Schatten. Haarlinien werden nicht als Gestaltungselement verwendet;
   Umrandungen bleiben nur, wo sie eine Funktion haben (Formularfelder,
   Auswahlkacheln, Unterstreichung von Textlinks). Radien bleiben klein (2-4px).
   Farbwelt: edles Tiefblau (Autorität) + edles Hellbraun/Cognac (Wertigkeit).
   ========================================================================== */

/* =============================================================================
   1. DESIGN-TOKENS
   ========================================================================== */
:root{
  /* Blau – Primärfarbe, Autorität */
  --navy-900:   #0C2138;
  --navy-800:   #14314E;
  --navy-700:   #1C4067;
  --navy-600:   #2B5580;
  --navy-100:   #DCE5EE;
  --navy-050:   #EDF2F7;

  /* Hellbraun / Cognac – Akzent, Wertigkeit */
  --cognac-700: #6E5231;
  --cognac-600: #8A6739;
  --cognac-500: #A8814F;
  --cognac-400: #C2A277;
  --cognac-200: #E3D5C0;

  /* Sand – warme Flächen */
  --sand-100:   #F1E9DD;
  --sand-050:   #FAF7F2;

  /* Text & Linien */
  --ink:        #1D2630;
  --ink-soft:   #56616E;
  --ink-mute:   #7C8794;
  --line:       #E2DACE;
  --line-cool:  #DDE3EA;
  --white:      #FFFFFF;

  /* Signal */
  --alert:      #A8332B;
  --alert-soft: #FBF1F0;
  --ok:         #2F6B4F;

  /* Maße */
  --r-sm:       2px;
  --r:          4px;
  --r-lg:       6px;
  --container:  1200px;
  --gutter:     24px;
  --header-h:   84px;

  /* Schatten – sparsam eingesetzt */
  --shadow-panel: 0 18px 44px rgba(12,33,56,.10);
  --shadow-menu:  0 22px 48px rgba(12,33,56,.16);
  --shadow-thin:  0 1px 0 rgba(12,33,56,.06);
  /* Kachelschatten: weich und flach, damit Flächen und nicht Kanten tragen */
  --shadow-card:  0 2px 14px rgba(12,33,56,.07);
  --shadow-lift:  0 10px 28px rgba(12,33,56,.11);

  --ease:       cubic-bezier(.22,.61,.36,1);
}

/* =============================================================================
   2. RESET & BASIS
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 24px);
}
body{
  font-family:"Open Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:17px;
  line-height:1.72;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:3px solid var(--cognac-500);outline-offset:3px;border-radius:var(--r-sm)}

h1,h2,h3,h4,h5{
  font-family:"Montserrat","Open Sans",system-ui,sans-serif;
  color:var(--navy-800);
  font-weight:700;
  line-height:1.16;
  letter-spacing:-.021em;
  text-wrap:balance;
}
h1{font-size:clamp(2.05rem,4.4vw,3.35rem)}
h2{font-size:clamp(1.62rem,3vw,2.35rem)}
h3{font-size:clamp(1.2rem,1.7vw,1.45rem);line-height:1.26}
h4{font-size:1.08rem;line-height:1.4}
p{max-width:68ch}
strong{font-weight:700;color:var(--ink)}

/* Inline-Textlink im Fließtext */
.tlink{
  color:var(--navy-600);font-weight:600;
  border-bottom:1px solid var(--cognac-400);
  transition:color .18s var(--ease),border-color .18s var(--ease);
}
.tlink:hover{color:var(--cognac-600);border-color:var(--cognac-600)}

/* =============================================================================
   3. LAYOUT-GERÜST
   ========================================================================== */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container--narrow{max-width:820px}
.container--mid{max-width:1000px}

/* Desktop: Inhaltsbreite 85 % des Viewports statt fester Maximalbreite.
   Die engeren Varianten behalten ihre Lesebreite – Fließtext soll auch auf
   großen Bildschirmen nicht über die gesamte Breite laufen. */
@media (min-width:761px){
  .container{width:85%;max-width:none}
  .container--narrow{width:85%;max-width:820px}
  .container--mid{width:85%;max-width:1000px}
}

/* Flächenfarbe der Kacheln: auf weißen Abschnitten sandfarben, auf
   sandfarbenen Abschnitten weiß. Jede Kachel greift auf --surface zu.
   Der Schatten hängt an der Fläche: Auf hellbraunen Kacheln entfällt er,
   weil der Kontrast zum sandfarbenen Grund sonst verläuft. Nur weiße
   Kacheln heben sich ab. */
:root,.section{--surface:var(--sand-050);--surface-shadow:none}
.section--sand,.section--sand-strong,.voices-section{
  --surface:var(--white);--surface-shadow:var(--shadow-card);
}

.section{padding:clamp(56px,7vw,96px) 0}
.section--tight{padding:clamp(40px,5vw,64px) 0}
.section--sand{background:var(--sand-050)}
.section--sand-strong{background:var(--sand-100)}
.section--navy{background:var(--navy-800);color:#E8EEF4}
.section--navy h2,.section--navy h3{color:var(--white)}
.section--navy p{color:#C3D2E0}

/* Kapitelmarke: nur dort, wo sie eine echte Einordnung liefert.
   Ohne vorangestellte Linie – die Einordnung trägt der Text allein. */
.chapter{
  display:block;
  font-family:"Montserrat",sans-serif;font-size:.78rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--cognac-600);
  margin-bottom:18px;
}
.section--navy .chapter{color:var(--cognac-400)}

.sec-head{max-width:760px;margin-bottom:clamp(32px,4vw,52px)}
.sec-head p{margin-top:16px;color:var(--ink-soft);font-size:1.08rem}
.sec-head--center{text-align:center;margin-inline:auto}
/* Breiter Kopf: auf dem Desktop 80 % der Inhaltsbreite statt 760px */
@media (min-width:981px){
  .sec-head--wide{max-width:80%}
  .sec-head--wide p{max-width:none} /* hebt die allgemeine 68ch-Grenze für Absätze auf */
}
.sec-head--center p{margin-inline:auto}
.lead{font-size:1.13rem;color:var(--ink-soft)}

/* Zwei-Spalten-Raster für Text + Visual */
.split{display:grid;gap:clamp(32px,5vw,64px);align-items:center}
@media (min-width:900px){
  .split{grid-template-columns:1fr 1fr}
  .split--wide-text{grid-template-columns:1.15fr .85fr}
  .split--wide-visual{grid-template-columns:.85fr 1.15fr}
  /* Konzept-Abschnitt der Versicherungsseiten: Grafikspalte 30 % breiter
     als bei .split--wide-text (.85fr × 1,3 = 1,105fr). */
  .split--konzept{grid-template-columns:.895fr 1.105fr}
  .split--flip .split__visual{order:-1}
}

/* =============================================================================
   4. BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:"Montserrat",sans-serif;font-weight:700;font-size:.97rem;
  letter-spacing:.005em;padding:14px 26px;border-radius:var(--r);
  transition:background .18s var(--ease),color .18s var(--ease),
             border-color .18s var(--ease),transform .18s var(--ease);
  text-align:center;
}
.btn svg{width:17px;height:17px;flex:none}
.btn--primary{background:var(--navy-800);color:var(--white)}
.btn--primary:hover{background:var(--navy-900);transform:translateY(-1px)}
/* Brauner CTA mit weißer Schrift. Der Braunton ist dafür eine Stufe dunkler
   (cognac-600 statt cognac-500): Weiß auf #8A6739 erreicht 5,1:1 und damit
   WCAG AA, auf dem helleren #A8814F wären es nur 3,6:1. */
.btn--accent{background:var(--cognac-600);color:var(--white)}
.btn--accent:hover{background:var(--cognac-700);color:var(--white);transform:translateY(-1px)}
.btn--outline{border:1.5px solid var(--navy-800);color:var(--navy-800)}
.btn--outline:hover{background:var(--navy-800);color:var(--white)}
.btn--light{background:var(--white);color:var(--navy-800);border:1.5px solid var(--line)}
.btn--light:hover{border-color:var(--navy-800)}
.btn--ghost-light{border:1.5px solid rgba(255,255,255,.5);color:var(--white)}
.btn--ghost-light:hover{background:rgba(255,255,255,.12);border-color:var(--white)}
.btn--lg{padding:17px 34px;font-size:1.03rem}
.btn--block{width:100%}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
/* Zentrierter Handlungsaufruf am Fuß eines Abschnitts. */
.section-cta{display:flex;justify-content:center;margin-top:clamp(30px,3.5vw,46px)}

/* =============================================================================
   5. HEADER & NAVIGATION
   ========================================================================== */
.header{
  position:sticky;top:0;z-index:90;background:var(--white);
  box-shadow:var(--shadow-thin);
}
.header.is-stuck{box-shadow:var(--shadow-thin)}
.navbar{display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:var(--header-h)}

/* Wortmarke: im Header als Bild, im Footer weiter als Text. */
.brand{display:flex;align-items:center;flex:none}
.brand__logo{display:block;width:240px;height:48px;object-fit:contain}
.brand__text{display:flex;flex-direction:column;line-height:1.05}
.brand__name{font-family:"Montserrat",sans-serif;font-weight:800;font-size:1.28rem;color:var(--navy-800);letter-spacing:-.02em}
.brand__name em{font-style:normal;color:var(--cognac-500)}
.brand__sub{font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-mute);font-weight:600}

.mainnav{display:flex;align-items:center;gap:2px}
.mainnav__item{position:relative}
.mainnav__link{
  display:flex;align-items:center;gap:7px;padding:10px 14px;border-radius:var(--r);
  font-family:"Montserrat",sans-serif;font-weight:600;font-size:.96rem;color:var(--navy-800);
  white-space:nowrap;
  transition:background .16s var(--ease),color .16s var(--ease);
}
/* Zwischen 981 und 1240px wird es eng: Navigation enger setzen und die
   Wortmarke kleiner zeigen, damit alles in einer Zeile bleibt. */
@media (min-width:981px) and (max-width:1240px){
  .mainnav__link{padding:10px 10px;font-size:.91rem}
  .brand__logo{width:200px;height:40px}
}
.mainnav__link:hover,.mainnav__item.is-open>.mainnav__link{background:var(--sand-100)}
.mainnav__link[aria-current="page"]{color:var(--cognac-600)}
.mainnav__link .chev{width:11px;height:11px;fill:currentColor;transition:transform .22s var(--ease)}
.mainnav__item.is-open .chev{transform:rotate(180deg)}

/* Aufklappmenü Versicherungen */
.submenu{
  position:absolute;top:calc(100% + 10px);left:0;min-width:330px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-menu);padding:10px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;
}
.mainnav__item.is-open .submenu{opacity:1;visibility:visible;transform:translateY(0)}
.submenu a{
  display:block;padding:11px 14px;border-radius:var(--r-sm);
  font-size:.95rem;font-weight:600;color:var(--navy-800);
  transition:background .16s,color .16s;
}
.submenu a span{display:block;font-weight:400;font-size:.83rem;color:var(--ink-mute);margin-top:2px}
.submenu a:hover{background:var(--sand-100);color:var(--cognac-700)}

.nav-actions{display:flex;align-items:center;gap:14px;flex:none}
.nav-phone{display:flex;align-items:center;gap:9px;font-family:"Montserrat",sans-serif;font-weight:700;color:var(--navy-800);font-size:.97rem}
.nav-phone svg{width:16px;height:16px;fill:var(--cognac-500)}

.burger{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:var(--r);position:relative}
.burger span{position:absolute;left:12px;right:12px;height:2px;background:var(--navy-800);transition:transform .22s var(--ease),opacity .18s}
.burger span:nth-child(1){top:15px}
.burger span:nth-child(2){top:21px}
.burger span:nth-child(3){top:27px}
.burger.is-active span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.is-active span:nth-child(2){opacity:0}
.burger.is-active span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Die Rufnummer im Header entfällt, sobald Marke, Navigation, Nummer und
   Schaltfläche nicht mehr nebeneinander passen – sie bleibt im Footer und im
   CTA-Band erreichbar. */
@media (max-width:1340px){
  .nav-phone{display:none}
}
@media (max-width:980px){
  .burger{display:block}
  .mainnav{
    position:fixed;inset:var(--header-h) 0 0 auto;width:min(88vw,380px);
    background:var(--white);
    flex-direction:column;align-items:stretch;gap:0;padding:16px;
    overflow-y:auto;transform:translateX(105%);transition:transform .28s var(--ease);
    box-shadow:var(--shadow-menu);
  }
  .mainnav.is-open{transform:translateX(0)}
  .mainnav__link{justify-content:space-between;padding:15px 12px;border-bottom:1px solid var(--line);border-radius:0}
  .submenu{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:0;border-bottom:1px solid var(--line);border-radius:0;padding:4px 0 12px;
    min-width:0;display:none;
  }
  .mainnav__item.is-open .submenu{display:block}
  .nav-actions .btn{display:none}
}
/* Auf schmalen Telefonen steht die Wortmarke neben dem Menuesymbol -
   deshalb hier noch eine Stufe kleiner. */
@media (max-width:620px){
  .brand__logo{width:190px;height:38px}
}

/* =============================================================================
   6. HERO – STARTSEITE
   ========================================================================== */
/* Hintergrundbild des Hero-Bereichs der Startseite: volle Viewportbreite,
   ohne Verlauf, und immer bündig unter dem Header – zwischen Header und Bild
   darf keine Hintergrundfläche stehen.
   Der Bereich ist dafür mindestens so hoch wie das Motiv (2400 × 900 px =
   37,5 % der Breite); der Inhalt steht darin senkrecht mittig. Ist der
   Inhalt höher – vor allem auf schmalen Geräten –, wächst der Bereich mit und
   das Bild füllt ihn über `object-fit:cover`: Es wird nie verzerrt, links und
   rechts aber beschnitten. Das Wesentliche eines Motivs gehört deshalb in die
   Mitte und in die untere Hälfte. */
.hero{position:relative;background:var(--sand-100);clip-path:inset(0 0 -100vh 0);display:flex;align-items:center;min-height:37.5vw}
/* Drehende Strichgrafik wie im Konzept-Abschnitt (img/m-bg-sand.png).
   Mittelpunkt bei 76 % der Breite, links vom Laptop im Motiv; der Ring wird
   oben und seitlich am Hero angeschnitten und ragt unten in den folgenden
   Abschnitt, dort über dessen Hintergrund, aber unter dessen Inhalt. Den
   Beschnitt übernimmt clip-path mit nach unten offenem Rand
   (inset … -100vh …) statt overflow. Beim Austausch des Motivs Mittelpunkt
   (left/top) nachziehen.
   Aufbau als Inline-SVG in /index.html (.hero__ring), nicht als CSS-Maske:
   CSS-Masken mit Bilddatei sperrt Chrome, wenn die Seite direkt aus dem
   Ordner geöffnet wird. Im SVG dient das PNG als Maske für eine Fläche mit
   Farbverlauf (oben links Weiß 50 %, unten rechts #E9E4DA 36 %); eine zweite
   Maske blendet die Grafik von der Kreismitte nach rechts oben aus, damit
   das Foto frei bleibt. Nur das Linienbild dreht sich – Verlauf und
   Ausblendung stehen still. */
.hero__ring{
  position:absolute;z-index:1;pointer-events:none;
  left:76%;top:73%;width:min(1500px,92vw);aspect-ratio:1;translate:-50% -50%;
}
.hero__ring svg{display:block;width:100%;height:100%}
.hero__ring-lines{transform-box:view-box;transform-origin:751px 751px;animation:konzept-spin 240s linear infinite reverse}
.hero + .section > .container{position:relative;z-index:1}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom}
/* Wichtig: nur padding-block setzen – .hero__inner trägt zugleich die Klasse
   .container, deren seitliche Abstände durch eine padding-Kurzschreibweise
   verloren gingen (Text klebte unter 1200px am Viewportrand). */
/* 40px zusaetzlich oben und unten: der Hero-Bereich ist damit 80px hoeher,
   der Inhalt bleibt optisch mittig. */
.hero__inner{position:relative;z-index:2;padding-block:calc(clamp(56px,8vw,108px) + 40px) calc(clamp(48px,6vw,84px) + 40px)}
.hero__body{max-width:660px}
.hero h1{margin-bottom:22px}
.hero__sub{font-size:1.15rem;color:#3D4650;max-width:56ch;margin-bottom:30px}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
/* Pfeil am Fuß des Hero-Bereichs, springt zum ersten Abschnitt.
   Kreis ohne Rand mit zwei Winkeln: Die Winkel laufen nacheinander nach unten, ein
   Ring pulsiert nach außen, der ganze Knopf wippt leicht. Bei
   prefers-reduced-motion steht alles still. */
.hero__scroll{
  position:absolute;left:50%;bottom:clamp(14px,2.2vw,28px);z-index:3;
  width:69px;height:69px;margin-left:-34.5px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:rgba(255,255,255,.72);
  color:var(--navy-800);box-shadow:var(--shadow-card);
  animation:hero-scroll-bob 2.4s ease-in-out infinite;
  transition:background .2s var(--ease),color .2s var(--ease),opacity .35s var(--ease),visibility .35s;
}
/* Nach dem ersten Scrollen ausgeblendet (gesetzt in theme/main.js). */
.hero__scroll.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.hero__scroll::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1.6px solid var(--cognac-500);pointer-events:none;
  animation:hero-scroll-ring 2.4s ease-out infinite;
}
.hero__scroll svg{width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:1.8;overflow:visible}
.hero__chev{animation:hero-scroll-chev 1.6s ease-in-out infinite}
.hero__chev--2{animation-delay:.2s}
.hero__scroll:hover,.hero__scroll:focus-visible{background:var(--navy-800);color:var(--white)}
@keyframes hero-scroll-bob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(8px)}
}
@keyframes hero-scroll-ring{
  0%{transform:scale(1);opacity:.9}
  70%,100%{transform:scale(1.55);opacity:0}
}
@keyframes hero-scroll-chev{
  0%{transform:translateY(-5px);opacity:0}
  40%{opacity:1}
  80%,100%{transform:translateY(5px);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .hero__scroll,.hero__scroll::after,.hero__chev{animation:none}
  .hero__scroll::after{display:none}
}

/* Faktenband unter dem Hero */
.factband{background:var(--navy-800);color:#D6E1EC}
.factband__grid{display:grid;gap:0}
@media (min-width:760px){.factband__grid{grid-template-columns:repeat(4,1fr)}}
.fact{padding:26px 26px;border-bottom:1px solid rgba(255,255,255,.12)}
@media (min-width:760px){
  .fact{border-bottom:0;border-right:1px solid rgba(255,255,255,.12)}
  .fact:last-child{border-right:0}
}
.fact:first-child{padding-left:0}
.fact__num{font-family:"Montserrat",sans-serif;font-weight:800;font-size:1.85rem;color:var(--white);line-height:1.1}
.fact__num em{font-style:normal;color:var(--cognac-400)}
.fact__label{font-size:.9rem;margin-top:6px;color:#B9C8D8;max-width:30ch}

@media (max-width:899px){
  .fact{padding-inline:0}
}

/* =============================================================================
   7. SEITEN-HERO (Unterseiten)
   ========================================================================== */
.pagehero{background:var(--navy-800);color:#DCE6F0;position:relative;overflow:hidden}
/* Hintergrundbild wie beim Hero der Startseite: volle Breite, kein Verlauf,
   keine Verzerrung (siehe Hinweis dort). Motive müssen dunkel genug für weiße
   Schrift sein. */
.pagehero__media{position:absolute;inset:0;z-index:0}
.pagehero__media img{position:absolute;left:0;bottom:0;width:100%;height:auto}
/* Ebenfalls .container – deshalb nur padding-block (siehe Hinweis am Hero). */
/* Ebenfalls 80px hoeher, je 40px oben und unten (siehe Hinweis am Hero). */
.pagehero__inner{position:relative;z-index:1;padding-block:calc(clamp(44px,6vw,78px) + 40px)}
/* Einzelne Seiten mit höherem Hero-Bereich: nochmals 80px, je 40px oben und
   unten. Gesetzt über heroTall in der Seitendefinition. */
.pagehero--tall .pagehero__inner{padding-block:calc(clamp(44px,6vw,78px) + 80px)}
.pagehero h1{color:var(--white);max-width:24ch}
/* Leistungsbegriff in der Hero-Überschrift: Braun statt Weiß beziehungsweise
   Blau – je nach Untergrund im passenden Ton. */
.pagehero h1 .svc{color:var(--cognac-400)}
.hero h1 .svc{color:var(--cognac-600)}
.pagehero__sub{font-size:1.12rem;color:#C3D2E0;max-width:62ch;margin-top:20px}
.pagehero__cta{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px}

/* Brotkrumen */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.85rem;color:#9FB3C6;margin-bottom:20px}
.crumbs a{color:#C3D2E0;border-bottom:1px solid transparent}
.crumbs a:hover{border-bottom-color:var(--cognac-400)}
.crumbs svg{width:11px;height:11px;fill:currentColor;opacity:.7}
.crumbs--light{color:var(--ink-mute)}
.crumbs--light a{color:var(--navy-600)}

/* =============================================================================
   8. DREIER-BEISPIELE UND EINSTIEGSKACHELN (Flächen, kein Rahmen)
   ========================================================================== */
.pillars{display:grid;gap:22px}
@media (min-width:860px){.pillars{grid-template-columns:repeat(3,1fr)}}
.pillar{
  background:var(--surface);box-shadow:var(--surface-shadow);
  padding-bottom:clamp(24px,2.6vw,32px);
  display:flex;flex-direction:column;
}
/* Bild über der Karte: volle Kachelbreite, kein Rahmen. */
.pillar__img{margin:0}
.pillar__img img{width:100%;height:auto;aspect-ratio:8/5;object-fit:cover}
.pillar__body{padding:clamp(22px,2.4vw,30px) clamp(20px,2.2vw,28px) 0}
.pillar__body>*+*{margin-top:12px}
@media (min-width:860px){.pillars{grid-template-columns:repeat(3,1fr)}}
.pillar__icon{width:42px;height:42px;margin-bottom:18px}
.pillar__icon svg{width:100%;height:100%;fill:none;stroke:var(--cognac-500);stroke-width:1.6}
.pillar h3{margin-bottom:12px}
.pillar p{color:var(--ink-soft);font-size:1rem}

/* Abfolge: Kacheln mit Schrittnummer, dazwischen ein Pfeil. Unter 860px
   stehen die Kacheln untereinander und der Pfeil zeigt nach unten. */
.pillars--flow{counter-reset:pillarflow;gap:14px}
.pillars--flow .pillar__body::before{
  counter-increment:pillarflow;content:counter(pillarflow,decimal-leading-zero);
  font-family:"Montserrat",sans-serif;font-weight:800;font-size:clamp(2.2rem,3.2vw,2.8rem);
  line-height:1;color:var(--cognac-500);display:block;margin-bottom:14px;letter-spacing:.02em;
}
.pillars__arrow{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;margin-inline:auto;border-radius:50%;
  background:var(--cognac-600);
}
.pillars__arrow svg{width:22px;height:22px;fill:none;stroke:var(--white);stroke-width:2;transform:rotate(90deg)}
@media (min-width:860px){
  .pillars--flow{grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:16px}
  .pillars--flow .pillar{align-self:stretch}
  .pillars__arrow svg{transform:none}
}

/* -----------------------------------------------------------------------------
   Einstiegskacheln – der erste Block unter jedem Hero-Bereich.
   Ohne Trennlinien und ohne Rahmen: die Kachel entsteht über die Fläche
   (--surface) und einen weichen Schatten. Inhalt zentriert, Icon oben.
   -------------------------------------------------------------------------- */
.tiles-head{margin-bottom:clamp(26px,3vw,40px)}
/* Seiten ohne Hero (Kontakt, Blogübersicht) tragen hier ihre h1 – in der Größe der
   übrigen Kachelköpfe. */
.tiles-head h1{font-size:clamp(1.62rem,3vw,2.35rem)}
.tiles{display:grid;gap:20px}
@media (min-width:720px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.tiles{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1000px){.tiles--four{grid-template-columns:repeat(4,1fr)}}
.tile{
  background:var(--surface);border-radius:4px;box-shadow:var(--surface-shadow);
  padding:clamp(26px,3vw,38px) clamp(20px,2.4vw,30px);
  text-align:center;display:flex;flex-direction:column;align-items:center;
}
.tile__icon{width:46px;height:46px;margin-bottom:18px}
.tile__icon svg{width:100%;height:100%;fill:none;stroke:var(--cognac-500);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tile h3{font-size:1.14rem;color:var(--navy-800);margin-bottom:12px}
.tile h3 em{font-style:normal;color:var(--cognac-600)}
.tile p{color:var(--ink-soft);font-size:1rem;max-width:34ch}
.tile__action{
  margin-top:auto;padding-top:16px;font-family:"Montserrat",sans-serif;
  font-weight:600;font-size:.95rem;color:var(--navy-600);
  border-bottom:1px solid var(--cognac-400);
}
.tile__action:hover{color:var(--cognac-600);border-bottom-color:var(--cognac-600)}

/* =============================================================================
   9. SCHUTZDIAGRAMM (das mutige Element der Startseite)
   ========================================================================== */
.diagram{position:relative}

/* Hintergrund des Konzept-Abschnitts: Strichgrafik img/m-bg-sand.png
   (1502 × 1502 px, Linien in #E9E4DA auf Transparenz; eingefärbte Kopie von
   m-bg.png). Sie liegt konzentrisch hinter dem Konzeptkreis, dreht langsam
   gegenläufig zu ihm (240 s je Umdrehung) und ragt bewusst oben und unten
   in die Nachbarabschnitte, um die Abschnittsgrenzen aufzulockern.
   Ebenen: Die Ringe liegen über den Hintergründen der Nachbarabschnitte,
   aber unter deren Inhalt (Container mit z-index 1). Seitlich schneidet
   overflow-x:clip ab, damit keine waagerechte Scrollleiste entsteht. */
.section--konzept{overflow-x:clip;overflow-y:visible}
.section--konzept .diagram{isolation:isolate}
/* Die Grafik ragt nach links unter die Textspalte – der Text liegt darüber. */
.section--konzept .split__text,
.section:has(+ .section--konzept) > .container,
.section--konzept + .section > .container{position:relative;z-index:1}
.section--konzept .diagram::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:50.18%;top:50%;width:185%;aspect-ratio:1;translate:-50% -50%;
  background:url("../img/m-bg-sand.png") center/contain no-repeat;
  opacity:.36; /* 36 % Deckkraft auf #E9E4DA */
  animation:konzept-spin 240s linear infinite reverse;
}

/* Animierte Konzeptgrafik (.konzept). Drei deckungsgleiche Ebenen à
   1120 × 940 px, dazu zwei gezeichnete Ebenen:
     1. -bg.png    Kreis, dreht sich langsam um den Kreismittelpunkt
     2. Sweep      feiner Radarstrahl über der Kreisfläche
     3. SVG        Umlaufbahn mit Messpunkten, gegenläufiger Ring ums Schild
     4. Glow       atmendes Leuchten hinter dem Schild
     5. -brand.png Schild, steht still. Die Datei ist größer angelegt als in
                   der Gesamtgrafik und wird deshalb auf 36,7 % verkleinert.
     6. -over.png  sechsmal eingebunden und je Kachel per clip-path
                   ausgeschnitten, damit jede Kachel einzeln animiert und
                   verlinkt werden kann.
   Maße in Prozent beziehen sich auf die 1120 × 940 px der Vorlage;
   Kreismittelpunkt 562 / 470 px. Beim Austausch der Dateien Mittelpunkt,
   Schildmaßstab und die Ausschnitte der Kacheln neu vermessen.
   Ohne JavaScript und bei prefers-reduced-motion steht die Grafik ruhig
   und vollständig da. */
.konzept{position:relative;aspect-ratio:1120/940;width:100%}
.konzept img,
.konzept__card{position:absolute;inset:0;width:100%;height:100%;display:block}

.konzept__bg{
  transform-origin:50.18% 50%;
  animation:konzept-spin 140s linear infinite;
}
.konzept__sweep{
  position:absolute;left:13.66%;top:6.6%;width:73.04%;height:86.81%;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(43,85,128,0) 0deg,rgba(43,85,128,0) 290deg,rgba(43,85,128,.10) 340deg,rgba(43,85,128,.26) 360deg);
  mix-blend-mode:multiply;opacity:.7;pointer-events:none;
  animation:konzept-spin 11s linear infinite;
  transition:opacity .5s var(--ease);
}
.konzept__orbit{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.konzept__orbit g,.konzept__orbit circle{transform-box:view-box;transform-origin:562px 470px}
.konzept__track{animation:konzept-spin 36s linear infinite}
.konzept__ring{animation:konzept-spin 70s linear infinite reverse}
.konzept__arc{animation:konzept-spin 16s linear infinite}
.konzept__halo{transform-box:fill-box!important;transform-origin:center!important;animation:konzept-halo 2.8s ease-out infinite}
.konzept__glow{
  position:absolute;left:50.18%;top:50%;width:34%;height:40%;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(194,162,119,.42),rgba(194,162,119,.14) 55%,rgba(194,162,119,0));
  pointer-events:none;animation:konzept-breathe 4.6s ease-in-out infinite;
  transition:width .6s cubic-bezier(.2,.8,.2,1),height .6s cubic-bezier(.2,.8,.2,1);
}
.konzept__brand{
  transform-origin:50.04% 50.48%;
  transform:translate(-.04%,-.37%) scale(.367);
  pointer-events:none;
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
/* Unsichtbare Hover-Zone genau über dem Schild (in der Vorlage
   x 454–666, y 349–593 px). */
.konzept__core{position:absolute;left:40.54%;top:37.13%;width:18.93%;height:25.96%;z-index:2}

/* Kacheln: Ausschnitt je Kachel (40px Luft für den Schatten), Lage der
   Kachel als --l/--t/--w/--h, Richtung nach außen als Einheitsvektor
   --dx/--dy vom Kreismittelpunkt aus. Bewusst ohne CSS-filter: drop-shadow
   zusammen mit clip-path färbt in Chromium den ganzen Ausschnitt ein. Den
   Schatten trägt deshalb eine eigene Fläche unter der Kachel (::before). */
.konzept__card{
  --i:0;
  transform-origin:calc(var(--l) + var(--w) / 2) calc(var(--t) + var(--h) / 2);
  transition:
    translate .7s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 45ms),
    scale .45s cubic-bezier(.2,.8,.2,1),
    opacity .35s var(--ease);
}
.konzept__card::before,
.konzept__card::after{
  content:"";position:absolute;pointer-events:none;
  left:var(--l);top:var(--t);width:var(--w);height:var(--h);
  border-radius:999px 14px 14px 999px;opacity:0;
  transition:opacity .35s var(--ease);
}
.konzept__card::before{box-shadow:0 22px 34px -12px rgba(12,33,56,.38)}
.konzept__card::after{
  left:calc(var(--l) - 6px);top:calc(var(--t) - 6px);
  width:calc(var(--w) + 12px);height:calc(var(--h) + 12px);
  border:2px solid var(--cognac-500);
}
.konzept__card--do   {--i:0;--ax:1;--ay:-.8;--dx:-.673;--dy:-.740;--l:4.55%; --t:6.49%; --w:34.2%; --h:12.34%;clip-path:inset(2.23% 57.68% 76.91% .98%)}
.konzept__card--pers {--i:1;--ax:-.9;--ay:-1;--dx:.684; --dy:-.729;--l:59.55%;--t:9.57%; --w:35.09%;--h:12.55%;clip-path:inset(5.32% 1.79% 73.62% 55.98%)}
.konzept__card--vert {--i:2;--ax:-.7;--ay:.9;--dx:1;    --dy:0;    --l:61.7%; --t:42.77%;--w:36.79%;--h:14.26%;clip-path:inset(38.51% 0 38.72% 58.13%)}
.konzept__card--straf{--i:3;--ax:.8;--ay:1;--dx:.668; --dy:.744; --l:57.32%;--t:77.34%;--w:36.79%;--h:13.09%;clip-path:inset(73.09% 2.32% 5.32% 53.75%)}
.konzept__card--cyber{--i:4;--ax:1;--ay:-.9;--dx:-.736;--dy:.676; --l:5.27%; --t:73.3%; --w:35.18%;--h:13.19%;clip-path:inset(69.04% 55.98% 9.26% 1.7%)}
.konzept__card--verm {--i:5;--ax:-1;--ay:.7;--dx:-.966;--dy:-.258;--l:0%;    --t:32.98%;--w:36.07%;--h:13.62%;clip-path:inset(28.72% 60.36% 49.15% 0)}

/* Einflug beim ersten Erscheinen (die Grafik steht in .reveal): Die Kacheln
   kommen gestaffelt aus der Mitte. fill-mode backwards, damit danach die
   Hover-Übergänge greifen.
   Danach im Ruhezustand: Jede Kachel treibt für sich in einer kleinen,
   unregelmäßigen Schleife (bis etwa 9px) und kippt dabei kaum merklich.
   Richtung (--ax/--ay), Dauer und Startpunkt unterscheiden sich je Kachel,
   damit nichts im Gleichtakt läuft. Unter dem Zeiger hält die Bewegung an,
   damit sich die Kacheln in Ruhe lesen und anklicken lassen. */
.reveal.is-in .konzept__card{
  animation:
    konzept-in .9s cubic-bezier(.2,.8,.2,1) backwards,
    konzept-drift calc(7s + var(--i) * .9s) ease-in-out infinite;
  animation-delay:calc(.25s + var(--i) * 90ms),calc(var(--i) * -1.7s);
}
.konzept:hover .konzept__card,
.konzept:focus-within .konzept__card{animation-play-state:running,paused}
.reveal.is-in .konzept__brand{animation:konzept-brand-in .8s cubic-bezier(.2,.8,.2,1) backwards .1s}

@media (hover:hover){
  /* Zeiger über der Grafik: Kacheln rücken gestaffelt nach außen,
     der Radarstrahl wird deutlicher. */
  .konzept:hover .konzept__card{translate:calc(var(--dx) * 14px) calc(var(--dy) * 14px)}
  .konzept:hover .konzept__sweep{opacity:1}
  /* Einzelne Kachel: hebt sich mit Schatten an, die übrigen schrumpfen um
     die Hälfte (um ihren eigenen Mittelpunkt) und treten leicht zurück. */
  .konzept:has(.konzept__card:hover) .konzept__card:not(:hover){scale:.5;opacity:.75}
  .konzept__card:hover{scale:1.06}
  .konzept__card:hover::before{opacity:1}

  /* Zeiger auf dem Schild: Alle Kacheln ziehen sich zur Mitte zurück und
     verschwinden, das Schild wächst. Beim Verlassen läuft alles zurück. */
  .konzept:has(.konzept__core:hover) .konzept__card{
    opacity:0;scale:.85;pointer-events:none;
    translate:calc(var(--dx) * -40px) calc(var(--dy) * -40px);
  }
  .konzept:has(.konzept__core:hover) .konzept__brand{transform:translate(-.04%,-.37%) scale(.5)}
  .konzept:has(.konzept__core:hover) .konzept__glow{width:48%;height:56%}
  /* Die Zone wächst mit dem Schild (0,5 / 0,367), sonst flackert es am Rand. */
  .konzept__core:hover{scale:1.36}
}
/* Tastatur: dieselbe Hervorhebung plus Fokusrahmen in Cognac. */
.konzept__card:focus-visible{outline:none;scale:1.06}
.konzept__card:focus-visible::before,
.konzept__card:focus-visible::after{opacity:1}
.konzept:has(.konzept__card:focus-visible) .konzept__card:not(:focus-visible){scale:.5;opacity:.75}

@keyframes konzept-spin{to{rotate:1turn}}
@keyframes konzept-halo{
  0%{scale:1;opacity:.55}
  80%,100%{scale:2.6;opacity:0}
}
@keyframes konzept-breathe{
  0%,100%{opacity:.55;scale:.96}
  50%{opacity:1;scale:1.04}
}
@keyframes konzept-in{
  from{opacity:0;translate:calc(var(--dx) * -60px) calc(var(--dy) * -60px);scale:.9}
}
@keyframes konzept-brand-in{
  from{opacity:0;scale:.9}
}
@keyframes konzept-drift{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  25%{transform:translate(calc(var(--ax) * 7px),calc(var(--ay) * -5px)) rotate(calc(var(--ax) * .4deg))}
  50%{transform:translate(calc(var(--ax) * 3px),calc(var(--ay) * -9px)) rotate(0deg)}
  75%{transform:translate(calc(var(--ax) * -5px),calc(var(--ay) * -4px)) rotate(calc(var(--ax) * -.4deg))}
}
@media (prefers-reduced-motion:reduce){
  .konzept__bg,.konzept__sweep,.konzept__track,.konzept__ring,.konzept__arc,
  .konzept__halo,.konzept__glow,.section--konzept .diagram::before,.hero__ring-lines,
  .reveal.is-in .konzept__card,.reveal.is-in .konzept__brand{animation:none}
  .konzept__card{transition:opacity .2s linear}
  .konzept:hover .konzept__card{translate:none}
  .konzept__card:hover,.konzept__card:focus-visible{scale:none}
}

/* Leistungsliste mit Cognac-Linien */
.speclist{display:grid;gap:16px}
.speclist li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.speclist svg{width:20px;height:20px;fill:none;stroke:var(--cognac-500);stroke-width:2;margin-top:4px}
.speclist b{font-family:"Montserrat",sans-serif;color:var(--navy-800);font-weight:700;display:block;font-size:1rem}
.speclist span{color:var(--ink-soft);font-size:.97rem}

/* Fließtextliste mit kleinem Cognac-Haken */
.checklist{display:grid;gap:10px;margin:18px 0 20px}
.checklist li{position:relative;padding-left:24px}
.checklist li::before{content:"";position:absolute;left:2px;top:.5em;width:10px;height:5px;border-left:2px solid var(--cognac-500);border-bottom:2px solid var(--cognac-500);transform:rotate(-45deg)}

/* Bausteinliste im ManagerProtect-Abschnitt: einspaltig fortlaufend, ohne
   Trennlinien und mit engem Abstand, damit der Textblock trotz sieben
   Einträgen nicht zu hoch wird. */
.mplist{display:grid;gap:9px}
.mplist li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start}
.mplist svg{width:18px;height:18px;fill:none;stroke:var(--cognac-500);stroke-width:2;margin-top:3px}
.mplist b{font-family:"Montserrat",sans-serif;color:var(--navy-800);font-weight:700}
.mplist span{color:var(--ink-soft);font-size:.95rem;line-height:1.45}

/* =============================================================================
   9b. KUNDENSTIMMEN – Karussell über die gesamte Browserbreite
   Drei Karten im Blick, die mittlere hervorgehoben, die äußeren treten
   zurück. Inhalt zentriert: Sterne, Aussage in Kursiv, darunter die
   Zuordnung. Kanten bleiben scharf – keine abgerundeten Ecken.
   Der Schatten ist hier zugelassen, weil die aktive Karte tatsächlich über
   der Fläche liegt. Bewegung und Zurücksetzen steuert theme/main.js.
   ========================================================================== */
.voices-section{background:var(--sand-050);overflow:hidden}
.voices{position:relative}

/* Ohne JavaScript: waagerecht scrollbare Reihe, Kopien und Bedienelemente
   bleiben unsichtbar. */
.voices-rail{--voice-w:clamp(272px,80vw,420px);overflow-x:auto;padding-bottom:10px}
.voices-track,.logos-track{display:flex;align-items:stretch;flex:none}
.voices:not(.is-ready) .voice[data-clone]{display:none}
.voices:not(.is-ready) .voices-arrow,
.voices:not(.is-ready) .voices-dots,
.logos:not(.is-ready) .logos-arrow,
.logos:not(.is-ready) .logos-dots{display:none}

.voices.is-ready .voices-rail,
.logos.is-ready .logos-rail{overflow:hidden;padding-bottom:0}
.voices.is-ready .voices-track,
.logos.is-ready .logos-track{
  transition:transform .52s var(--ease);will-change:transform;
}

.voice{
  flex:0 0 var(--voice-w);width:var(--voice-w);
  margin-right:22px;padding:clamp(26px,3vw,38px) clamp(22px,2.6vw,34px);
  background:var(--white);box-shadow:var(--shadow-card);border-radius:0;
  text-align:center;
}
/* Die äußeren Karten treten zurück, die mittlere liegt vorn. */
.voices.is-ready .voice{
  opacity:.42;box-shadow:none;
  transition:opacity .52s var(--ease),box-shadow .52s var(--ease);
}
.voices.is-ready .voice.is-active{opacity:1;box-shadow:var(--shadow-lift)}
.voice figure{margin:0;display:flex;flex-direction:column;gap:16px;height:100%}
.voice__stars{display:flex;justify-content:center;gap:5px;max-width:none}
.voice__stars svg{width:17px;height:17px;fill:var(--cognac-500);stroke:none}
.voice blockquote{
  margin:0;max-width:none;font-style:italic;color:var(--ink);
  font-size:1.03rem;line-height:1.6;
}
.voice figcaption{
  margin-top:auto;padding-top:4px;font-family:"Montserrat",sans-serif;
  font-size:.9rem;font-weight:700;color:var(--navy-800);
}

/* Pfeile: quadratisch, weiße Fläche mit Schatten, ohne Radius. */
.voices-arrow,.logos-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:var(--white);box-shadow:var(--shadow-card);
  transition:box-shadow .18s var(--ease),background .18s var(--ease);
}
.voices-arrow:hover,.logos-arrow:hover{box-shadow:var(--shadow-lift)}
.voices-arrow svg,.logos-arrow svg{width:20px;height:20px;fill:none;stroke:var(--navy-800);stroke-width:1.8}
.voices-arrow--prev,.logos-arrow--prev{left:clamp(8px,2vw,28px)}
.voices-arrow--next,.logos-arrow--next{right:clamp(8px,2vw,28px)}

/* Punktnavigation: je Eintrag eine Marke, die laufende ist in Cognac gefüllt. */
.voices-dots,.logos-dots{display:flex;justify-content:center;gap:10px;margin-top:26px}
.voices-dot,.logos-dot{
  width:9px;height:9px;background:var(--cognac-200);
  transition:background .18s var(--ease),transform .18s var(--ease);
}
.voices-dot:hover,.logos-dot:hover{background:var(--cognac-400)}
.voices-dot.is-active,.logos-dot.is-active{background:var(--cognac-500);transform:scale(1.25)}

/* Ohne Bewegung: kein automatischer Lauf, Übergänge bleiben aus. */
@media (prefers-reduced-motion:reduce){
  .voices.is-ready .voices-track,
  .voices.is-ready .voice,
  .logos.is-ready .logos-track{transition:none}
}

/* =============================================================================
   10. BAUSTEIN-ÜBERSICHT
   ========================================================================== */
.modules{display:grid;gap:22px}
@media (min-width:700px){.modules{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){
  .modules{grid-template-columns:repeat(3,1fr)}
  /* Acht Kacheln lassen im Dreierraster eine Zelle frei – die letzte Karte
     füllt sie auf, statt eine Lücke stehen zu lassen. */
  .modules--fill-last>:last-child{grid-column:span 2}
}
.module{
  background:var(--surface);box-shadow:var(--surface-shadow);
  padding:30px 26px 26px;display:flex;flex-direction:column;
  transition:background .2s var(--ease);
}
.module:hover{background:var(--sand-100)}
.section--sand .module:hover,.section--sand-strong .module:hover{background:var(--sand-050)}
.module__icon{width:51px;height:51px;margin-bottom:18px}
.module__icon svg{width:100%;height:100%;fill:none;stroke:var(--navy-600);stroke-width:1.6}
.module h3{font-size:1.16rem;margin-bottom:6px}
.module__claim{font-family:"Montserrat",sans-serif;font-size:.92rem;font-weight:600;color:var(--cognac-600);margin-bottom:14px}
.module p{font-size:.97rem;color:var(--ink-soft);margin-bottom:20px;max-width:none}
.module__link{
  margin-top:auto;font-family:"Montserrat",sans-serif;font-weight:700;font-size:.93rem;
  color:var(--navy-800);display:inline-flex;align-items:center;gap:9px;
}
.module__link svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .18s var(--ease)}
.module__link:hover{color:var(--cognac-600)}
.module__link:hover svg{transform:translateX(3px)}

/* =============================================================================
   11. HAFTUNGSFALL / ZITATBLOCK (mutiges Element der Unterseiten)
   ========================================================================== */
.case{
  background:var(--sand-100);
  padding:clamp(28px,4vw,44px);border-radius:0 var(--r) var(--r) 0;
}
.case__label{
  font-family:"Montserrat",sans-serif;font-size:.78rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cognac-700);margin-bottom:14px;
}
.case__text{font-size:1.18rem;line-height:1.6;color:var(--navy-900);max-width:64ch}
.case__meta{margin-top:22px;font-size:.93rem;color:var(--ink-soft)}
/* Auf sandfarbenem Grund würde der Kasten verschwinden – dort weiß, und
   weil er weiß ist, darf er sich auch abheben. */
.section--sand-strong .case{background:var(--white);box-shadow:var(--shadow-card)}
.case__meta b{color:var(--navy-800)}

/* Zahlenreihe im Text */
.figures{display:grid;gap:24px;margin-top:8px}
@media (min-width:680px){.figures{grid-template-columns:repeat(3,1fr)}}
.figure__num{font-family:"Montserrat",sans-serif;font-weight:800;font-size:2rem;color:var(--navy-800);line-height:1}
.figure__num em{font-style:normal;color:var(--cognac-500);font-size:1.3rem}
.figure__label{font-size:.92rem;color:var(--ink-soft);margin-top:8px}

/* =============================================================================
   12. ABLAUF / PROZESS
   ========================================================================== */
.flow{counter-reset:flow;display:grid;gap:22px}
@media (min-width:840px){.flow{grid-template-columns:repeat(3,1fr)}}
/* Vier Kacheln: zweispaltig ab 640px, vierspaltig ab 1100px */
@media (min-width:640px){.flow--four{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.flow--four{grid-template-columns:repeat(4,1fr)}}
.flow__step{
  background:var(--surface);box-shadow:var(--surface-shadow);
  padding:clamp(24px,2.6vw,32px) clamp(20px,2.2vw,28px);
}

.flow__step::before{
  counter-increment:flow;content:counter(flow,decimal-leading-zero);
  font-family:"Montserrat",sans-serif;font-weight:800;font-size:.95rem;
  color:var(--cognac-500);display:block;margin-bottom:12px;letter-spacing:.06em;
}
/* Große Schrittnummern wie bei .pillars--flow */
.flow--four .flow__step::before{
  font-size:clamp(2.2rem,3.2vw,2.8rem);line-height:1;margin-bottom:14px;letter-spacing:.02em;
}
.flow__step h3{font-size:1.12rem;margin-bottom:10px}
.flow__step p{font-size:.97rem;color:var(--ink-soft)}

/* =============================================================================
   13. VERGLEICHSTABELLE
   ========================================================================== */
/* Hauptfläche der Tabelle immer weiß, auch auf sandfarbenen Abschnitten. */
.tablewrap{overflow-x:auto;background:var(--white);box-shadow:var(--shadow-card)}
.ctable{min-width:660px;font-size:.96rem}
/* Ausnahme von der linienfreien Gestaltung: Jede Zeile trägt eine
   waagerechte Linie, damit sich die Zeilen klar abheben. Die abwechselnde
   Fläche kommt zusätzlich dazu - eine Vergleichstabelle ohne Zeilentrennung
   ist schwer zu lesen. */
.ctable th,.ctable td{
  text-align:left;padding:15px 18px;vertical-align:top;
  border-bottom:1px solid var(--line);
}
.ctable tbody tr:nth-child(even){background:rgba(168,129,79,.07)}
.ctable thead th{
  background:var(--navy-800);color:var(--white);font-family:"Montserrat",sans-serif;
  font-size:.9rem;font-weight:700;letter-spacing:.01em;border-bottom:0;
}
.ctable tbody th{font-family:"Montserrat",sans-serif;color:var(--navy-800);font-weight:700;width:26%;background:var(--sand-050)}
.ctable td{color:var(--ink-soft)}
.ctable tbody tr:last-child th,.ctable tbody tr:last-child td{border-bottom:0}

/* =============================================================================
   14. FAQ-AKKORDEON
   ========================================================================== */
.faq{display:grid;gap:12px}
.faq__item{background:var(--surface);box-shadow:var(--surface-shadow)}
.faq__btn{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:22px 0;text-align:left;
  font-family:"Montserrat",sans-serif;font-weight:700;font-size:1.04rem;color:var(--navy-800);
}
.faq__btn:hover{color:var(--cognac-600)}
.faq__sign{position:relative;width:22px;height:22px;flex:none;margin-top:3px}
.faq__sign::before,.faq__sign::after{
  content:"";position:absolute;background:var(--cognac-500);transition:transform .24s var(--ease);
}
.faq__sign::before{top:10px;left:0;width:22px;height:2px}
.faq__sign::after{left:10px;top:0;width:2px;height:22px}
.faq__item.is-open .faq__sign::after{transform:scaleY(0)}
.faq__panel{overflow:hidden;max-height:0;transition:max-height .3s var(--ease)}
.faq__inner{padding:0 0 24px}
.faq__inner p+p{margin-top:14px}
.faq__inner p,.faq__inner li{color:var(--ink-soft);font-size:1rem}
.faq__inner ul{margin:12px 0 0}
.faq__inner li{position:relative;padding-left:20px;margin-bottom:8px}
.faq__inner li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:2px;background:var(--cognac-500)}
.faq-grid{display:grid;gap:0 clamp(28px,4vw,56px)}
@media (min-width:940px){.faq-grid{grid-template-columns:1fr 1fr}}

/* =============================================================================
   15. VERTRAUEN: KUNDENLOGOS, SIEGEL, EXPERTENBAND
   ========================================================================== */
/* Kundenlogos als Endlos-Schiene über die ganze Browserbreite - dieselbe
   Mechanik wie die Kundenstimmen (theme/main.js, Abschnitt 7), deshalb teilen
   sich beide die Regeln für Schiene, Pfeile und Punkte weiter oben.
   Unterschied: Logos treten nicht zurück. Alle Kacheln bleiben gleich
   sichtbar, weil eine abgedunkelte Wortmarke wie ein Fehler aussieht. */
.logos{position:relative}
.logos-rail{--logo-w:clamp(200px,44vw,260px);overflow-x:auto;padding-bottom:10px}
.logos:not(.is-ready) .logo[data-clone]{display:none}
.logo{
  flex:0 0 var(--logo-w);width:var(--logo-w);min-height:132px;
  margin-right:22px;padding:clamp(18px,2.2vw,26px);
  background:var(--surface);box-shadow:var(--surface-shadow);border-radius:0;
  display:flex;align-items:center;justify-content:center;
}
/* Wortmarken kommen in unterschiedlichen Formaten. Die Kachel gibt die Höhe
   vor, das Logo passt sich darin ein, ohne verzerrt zu werden. */
.logo img{max-width:100%;max-height:68px;width:auto;height:auto;object-fit:contain}


.trustband{display:grid;gap:clamp(28px,4vw,48px);align-items:center}
@media (min-width:900px){.trustband{grid-template-columns:.9fr 1.1fr}}
.trustband__img{box-shadow:var(--shadow-card)}
/* Ohne Schatten: Teamfoto auf Über uns (erstes Inhaltsbild) */
.trustband__img--flat{box-shadow:none}
.trustband__img img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}

/* Inhaltsbild in zweispaltigen Abschnitten: feine Linie, kein Schatten. */
.shot{margin:0;box-shadow:var(--shadow-card)}
.shot img{display:block;width:100%;height:auto}
.seal{display:flex;align-items:center;gap:18px;margin-top:30px}
.seal img{width:84px;height:auto;flex:none}
.seal p{font-size:.92rem;color:var(--ink-soft);margin:0}

/* =============================================================================
   16. CTA-BAND
   ========================================================================== */
.ctaband{background:var(--navy-900);color:#DCE6F0}
.ctaband__inner{
  display:grid;gap:28px;align-items:center;
  padding:clamp(38px,5vw,62px) 0;
}
@media (min-width:880px){.ctaband__inner{grid-template-columns:1.25fr .75fr}}
.ctaband h2{color:var(--white);font-size:clamp(1.5rem,2.4vw,2rem)}
.ctaband p{color:#B9C8D8;margin-top:14px}
.ctaband__actions{display:flex;flex-direction:column;gap:12px}
@media (min-width:880px){.ctaband__actions{align-items:flex-end}}
.ctaband__phone{font-family:"Montserrat",sans-serif;font-weight:700;color:var(--cognac-400);font-size:1.05rem}

/* =============================================================================
   17. FORMULARE – BASIS
   ========================================================================== */
.formpanel{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-panel);padding:clamp(24px,3.4vw,42px);
}
.field{margin-bottom:20px}
.field>label,.field__label{
  display:block;font-family:"Montserrat",sans-serif;font-weight:600;font-size:.92rem;
  color:var(--navy-800);margin-bottom:8px;
}
.field__hint{font-size:.84rem;color:var(--ink-mute);margin-bottom:10px}
.field input[type=text],.field input[type=email],.field input[type=tel],
.field input[type=number],.field select,.field textarea{
  width:100%;padding:13px 15px;background:var(--sand-050);
  border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .16s var(--ease),background .16s var(--ease),box-shadow .16s var(--ease);
}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;background:var(--white);border-color:var(--navy-600);
  box-shadow:0 0 0 3px rgba(43,85,128,.14);
}
.field input.is-invalid,.field select.is-invalid,.field textarea.is-invalid{
  border-color:var(--alert);background:var(--alert-soft);
}
.field select{appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2356616E'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:20px;padding-right:42px}
.field__error{display:block;min-height:20px;font-size:.85rem;color:var(--alert);margin-top:6px}
.field-row{display:grid;gap:0 18px}
@media (min-width:620px){.field-row{grid-template-columns:1fr 1fr}}

.field--checkbox label{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;font-family:"Open Sans",sans-serif;font-weight:400;font-size:.93rem;color:var(--ink-soft);margin:0}
.field--checkbox input{width:20px;height:20px;margin-top:2px;accent-color:var(--navy-700);flex:none}
.hp-field{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}
.form-trust{display:flex;align-items:center;gap:9px;margin-top:18px;font-size:.88rem;color:var(--ink-soft)}
.form-trust svg{width:15px;height:15px;fill:var(--ok);flex:none}

/* =============================================================================
   18. MULTISTEP-LEADFORMULAR
   ========================================================================== */
/* Kopf über der Formularstrecke zentriert: Kapitelmarke, Überschrift, Text */
.form-section .sec-head{text-align:center;margin-inline:auto}
.form-section .sec-head p{margin-inline:auto}

.progress-wrap{margin-bottom:30px}
.progress__label{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  font-family:"Montserrat",sans-serif;font-size:.86rem;font-weight:600;color:var(--ink-soft);
  margin-bottom:10px;
}
.progress__label b{color:var(--navy-800)}
.progress{height:4px;background:var(--sand-100);border-radius:999px;overflow:hidden}
.progress__bar{height:100%;background:var(--cognac-500);width:25%;transition:width .34s var(--ease)}

.step{display:none;border:0}
.step.is-active{display:block;animation:stepIn .34s var(--ease) both}
@keyframes stepIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.step__legend{
  font-family:"Montserrat",sans-serif;font-weight:700;font-size:1.22rem;color:var(--navy-800);
  margin-bottom:8px;padding:0;
}
.step__hint{font-size:.95rem;color:var(--ink-soft);margin-bottom:24px}
.step__nav{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:30px}
.step__nav--submit{flex-wrap:wrap}

/* Auswahlkacheln */
.choice-grid{display:grid;gap:14px}
@media (min-width:600px){.choice-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.choice-grid--4{grid-template-columns:repeat(4,1fr)}}
.choice{position:relative;display:block;cursor:pointer}
.choice input{position:absolute;opacity:0;width:1px;height:1px}
.choice__box{
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;height:100%;
  padding:20px 18px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .16s var(--ease),background .16s var(--ease),box-shadow .16s var(--ease);
}
.choice:hover .choice__box{border-color:var(--cognac-400);background:var(--sand-050)}
.choice input:checked+.choice__box{
  border-color:var(--navy-700);background:var(--navy-050);
  box-shadow:inset 0 0 0 1px var(--navy-700);
}
.choice input:focus-visible+.choice__box{outline:3px solid var(--cognac-500);outline-offset:2px}
.choice__icon{width:30px;height:30px}
.choice__icon svg{width:100%;height:100%;fill:none;stroke:var(--navy-600);stroke-width:1.6}
.choice input:checked+.choice__box .choice__icon svg{stroke:var(--cognac-600)}
.choice__title{font-family:"Montserrat",sans-serif;font-weight:700;font-size:1rem;color:var(--navy-800)}
.choice__desc{font-size:.86rem;color:var(--ink-soft);line-height:1.5}

/* Zusammenfassung im letzten Schritt */
.summary{background:var(--sand-100);border-radius:var(--r);padding:18px 20px;margin-bottom:24px}
.summary h4{font-size:.92rem;color:var(--navy-800);margin-bottom:10px}
.summary dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:.92rem}
.summary dt{color:var(--ink-mute)}
.summary dd{color:var(--navy-800);font-weight:600;overflow-wrap:anywhere}

/* =============================================================================
   19. KONTAKTWEGE
   ========================================================================== */
.ways{display:grid;gap:22px}
@media (min-width:640px){.ways{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.ways{grid-template-columns:repeat(4,1fr)}}
.way{background:var(--white);padding:26px 22px;transition:background .18s var(--ease)}
.way:hover{background:var(--sand-050)}
.way__icon{width:34px;height:34px;margin-bottom:16px}
.way__icon svg{width:100%;height:100%;fill:none;stroke:var(--cognac-500);stroke-width:1.6}
.way h3{font-size:1.05rem;margin-bottom:6px}
.way p{font-size:.93rem;color:var(--ink-soft);margin-bottom:12px}
.way a.way__action{font-family:"Montserrat",sans-serif;font-weight:700;font-size:.94rem;color:var(--navy-700);border-bottom:1px solid var(--cognac-400)}
.way a.way__action:hover{color:var(--cognac-600)}

/* =============================================================================
   20. BLOG
   ========================================================================== */
.postlist{display:grid;gap:clamp(24px,3vw,34px)}
@media (min-width:780px){.postlist{grid-template-columns:repeat(2,1fr)}}
.post{
  display:flex;flex-direction:column;background:var(--surface);
  border-radius:var(--r);padding:26px 24px;box-shadow:var(--surface-shadow);
  transition:box-shadow .18s var(--ease),transform .18s var(--ease);
}
.post:hover{transform:translateY(-2px)}
.post__meta{font-size:.82rem;color:var(--ink-mute);margin-bottom:12px;display:flex;gap:14px;flex-wrap:wrap}
.post__meta b{color:var(--cognac-700);font-family:"Montserrat",sans-serif;font-weight:700}
.post h3{font-size:1.2rem;margin-bottom:12px}
.post p{font-size:.97rem;color:var(--ink-soft);margin-bottom:20px;max-width:none}
.post__more{margin-top:auto;font-family:"Montserrat",sans-serif;font-weight:700;font-size:.93rem;color:var(--navy-800);display:inline-flex;gap:9px;align-items:center}
.post__more svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.post:hover .post__more{color:var(--cognac-600)}
.post--lead{grid-column:1/-1;background:var(--sand-050)}
.post--lead h3{font-size:clamp(1.35rem,2.2vw,1.75rem)}

/* Artikel-Typografie */
.article{max-width:760px}
.article__meta{display:flex;flex-wrap:wrap;gap:16px;font-size:.87rem;color:var(--ink-mute);margin-bottom:30px}
.article__lead{font-size:1.16rem;color:var(--navy-800);line-height:1.6;margin-bottom:30px}
.article h2{font-size:clamp(1.4rem,2.2vw,1.8rem);margin:40px 0 16px}
.article h3{margin:30px 0 12px}
.article p{margin-bottom:18px;color:var(--ink-soft)}
.article ul,.article ol{margin:0 0 22px}
.article li{position:relative;padding-left:24px;margin-bottom:10px;color:var(--ink-soft)}
.article ul li::before{content:"";position:absolute;left:0;top:12px;width:10px;height:2px;background:var(--cognac-500)}
.article ol{counter-reset:art}
.article ol li{padding-left:34px}
.article ol li::before{
  counter-increment:art;content:counter(art)".";position:absolute;left:0;top:0;
  font-family:"Montserrat",sans-serif;font-weight:700;color:var(--cognac-600);
}
.article blockquote{
  margin:28px 0;padding:22px 26px;background:var(--sand-100);
  background:var(--sand-100);font-size:1.08rem;color:var(--navy-900);
}
.article__note{background:var(--navy-050);border-radius:var(--r);padding:22px 24px;margin:28px 0}
.article__note h4{margin-bottom:10px}
.article__note p:last-child{margin-bottom:0}
.article figure{margin:28px 0}
.article figcaption{font-size:.86rem;color:var(--ink-mute);margin-top:10px}
.toc{background:var(--sand-100);padding:22px 24px;margin-bottom:34px}
.toc h2{font-size:1rem!important;margin:0 0 12px!important}
.toc li{padding-left:0;margin-bottom:8px}
.toc li::before{display:none}
.toc a{color:var(--navy-600);font-weight:600;border-bottom:1px solid transparent}
.toc a:hover{border-bottom-color:var(--cognac-400)}

/* =============================================================================
   21. RECHTSTEXTE
   ========================================================================== */
.legal{max-width:820px}
.legal h2{font-size:clamp(1.3rem,2vw,1.6rem);margin:38px 0 14px}
.legal h3{font-size:1.08rem;margin:26px 0 10px}
/* Angabenkasten – nur noch auf der Kontaktseite in Gebrauch. In Impressum
   und Datenschutz läuft der Text durch, ohne Farbflächen. */
.legal__block{padding:22px 24px;margin-bottom:22px;background:var(--sand-050)}
.legal p,.legal li{color:var(--ink-soft);font-size:.99rem}
.legal p{margin-bottom:16px}
.legal ul{margin:0 0 18px}
.legal li{position:relative;padding-left:22px;margin-bottom:8px}
.legal li::before{content:"";position:absolute;left:0;top:12px;width:9px;height:2px;background:var(--cognac-400)}
.legal address{font-style:normal;margin-bottom:18px;color:var(--ink-soft)}
.legal dl{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;font-size:.97rem}
.legal dt{color:var(--ink-mute)}
.legal dd{color:var(--ink)}
@media (max-width:560px){.legal dl{grid-template-columns:1fr;gap:2px 0}.legal dd{margin-bottom:10px}}

/* =============================================================================
   22. DANKESEITE
   ========================================================================== */
.thanks{text-align:center;max-width:640px;margin-inline:auto}
.thanks p{margin-inline:auto}
.thanks__mark{width:78px;height:78px;margin:0 auto 26px}
.thanks__mark svg{width:100%;height:100%;fill:none;stroke:var(--ok);stroke-width:1.6}
.thanks .flow{text-align:left;margin-top:40px}

/* =============================================================================
   23. FOOTER
   ========================================================================== */
.footer{background:var(--navy-900);color:#A9BBCC;font-size:.94rem}
.footer__main{display:grid;gap:36px;padding:clamp(44px,5vw,68px) 0 40px}
@media (min-width:760px){.footer__main{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1060px){.footer__main{grid-template-columns:1fr 1fr 1.1fr 1.3fr}}
.footer h4{
  color:var(--white);font-size:.84rem;letter-spacing:.11em;text-transform:uppercase;
  margin-bottom:18px;font-weight:700;
}
.footer ul li{margin-bottom:11px}
.footer a{transition:color .16s var(--ease)}
.footer a:hover{color:var(--cognac-400)}
.footer__brand .brand__name{color:var(--white)}
.footer__brand .brand__sub{color:#8298AD}
.footer__logo{display:block;width:240px;height:48px;object-fit:contain}
.footer__about{margin-top:18px;max-width:38ch;color:#A9BBCC}
.footer__contact li{display:flex;gap:11px;align-items:flex-start}
.footer__contact svg{width:15px;height:15px;fill:var(--cognac-400);flex:none;margin-top:5px}
.footer__bottom{border-top:1px solid rgba(255,255,255,.12);padding:20px 0}
.footer__bottom-inner{display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:space-between;align-items:center;font-size:.87rem}
.footer__legal{display:flex;flex-wrap:wrap;gap:8px 18px}
.footer__disclaimer{padding-bottom:26px;font-size:.8rem;color:#7A8FA3;max-width:none}

/* =============================================================================
   24. HILFSKLASSEN & BEWEGUNG
   ========================================================================== */
.mt-0{margin-top:0}
.mt-s{margin-top:14px}
.mt-m{margin-top:26px}
.mt-l{margin-top:42px}
.mb-m{margin-bottom:26px}
.text-center{text-align:center}
.nowrap{white-space:nowrap}
.visually-hidden{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}
/* Sprunglink: unsichtbar, bis er per Tastatur fokussiert wird */
a.visually-hidden:focus{
  position:fixed!important;top:12px;left:12px;width:auto;height:auto;
  clip:auto;overflow:visible;z-index:200;
  padding:13px 20px;border-radius:var(--r);
  background:var(--navy-800);color:var(--white);
  font-family:"Montserrat",sans-serif;font-weight:700;font-size:.95rem;
}

/* Volle Breite für Aktionen auf schmalen Geräten – größere Tap-Flächen */
@media (max-width:520px){
  .hero__cta .btn,
  .pagehero__cta .btn,
  .step__nav--submit .btn{flex:1 1 100%}
  .btn{padding:14px 20px}
  .step__nav{gap:10px}
  .footer__bottom-inner{flex-direction:column;align-items:flex-start}
}

/* Bewegung: bewusst nur an zwei Stellen – Hero-Einstieg und Diagramm */
/* Insolvenzdiagramm: Die Säulen wachsen aus der Grundlinie (y = 316 im
   viewBox), von links nach rechts versetzt; Direktwerte und Anmerkung folgen.
   Die Klasse .is-armed setzt theme/main.js - ohne JavaScript und bei
   prefers-reduced-motion steht das Diagramm sofort vollständig da. */
.chart.is-armed .chart__bar{
  transform:scaleY(0);transform-box:view-box;transform-origin:0 316px;
  transition:transform .62s var(--ease);
}
.chart.is-armed.is-in .chart__bar{transform:scaleY(1)}
.chart.is-armed .chart__value,
.chart.is-armed .chart__note{opacity:0;transition:opacity .5s var(--ease)}
.chart.is-armed.is-in .chart__value,
.chart.is-armed.is-in .chart__note{opacity:1;transition-delay:.85s}

.reveal{opacity:0;transform:translateY(14px)}
.reveal.is-in{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal--d1.is-in{transition-delay:.08s}
.reveal--d2.is-in{transition-delay:.16s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
}