/* Hover-Zustände aus style-hover des Prototyps */
[data-hv="hv0"]:hover{background:#2A1B52 !important}
[data-hv="hv1"]:hover{filter:brightness(1.14) !important}
[data-hv="hv2"]:hover{filter:brightness(1.14) !important}
[data-hv="hv3"]:hover{transform:scale(1.05) !important;background:#D4EEFB !important}
[data-hv="hv4"]:hover{background:#D4EEFB !important}

/* Schleifen, Zweige und Scopes zaehlen im Layout nicht als eigenes Element */
dc-for, dc-branch, dc-scope{ display:contents; }
dc-branch[hidden]{ display:none !important; }

/* =========================================================================
   Responsive-Schicht über die Original-Inline-Styles.
   Greift ausschließlich über Attribut-Selektoren auf die im Entwurf
   vorkommenden Werte zu. Oberhalb der Breakpoints bleibt jeder Wert
   des Prototyps unangetastet.
   ========================================================================= */

html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
img{ max-width:100%; }
/* Kein globales min-width:0, das lässt Flex-Container wie die
   Kategorie-Chips und die Pagination auf Null schrumpfen. */
body{ overflow-x:hidden; }

/* Tap-Verhalten und Fokus */
[data-act-click],a,button,input,textarea{ touch-action:manipulation; }
:focus-visible{ outline:3px solid #4E9BD4; outline-offset:2px; }

/* ---------------------------------------------------------- ab 1160px ---- */
@media (max-width:1160px){
  [style*="grid-template-columns:1.2fr 0.85fr 0.85fr 0.95fr 1fr"]{
    grid-template-columns:1fr 1fr 1fr !important;
  }
  [style*="gap:80px"]{ gap:40px !important; }
  [style*="gap:64px"]{ gap:36px !important; }
  [style*="gap:56px"]{ gap:32px !important; }
  [style*="margin-right:160px"]{ margin-right:0 !important; }
}

/* ---------------------------------------------------------- ab 1080px ---- */
@media (max-width:1080px){
  [style*="grid-template-columns:1fr 1fr"]:not([style*="1fr 1fr 1fr"]),
  [style*="grid-template-columns:0.85fr 1.15fr"],
  [style*="grid-template-columns:1.15fr 1.15fr"],
  [style*="grid-template-columns:1.1fr 0.9fr"],
  [style*="grid-template-columns:0.9fr 1.1fr"],
  [style*="grid-template-columns:1.8fr 1fr"],
  [style*="grid-template-columns:1fr 1.8fr"],
  [style*="grid-template-columns:1.3fr 1fr"],
  [style*="grid-template-columns:1fr 1.2fr"],
  [style*="grid-template-columns:0.7fr 1.3fr"],
  [style*="grid-template-columns:280px 1fr"],
  [style*="grid-template-columns:140px 1fr"],
  [style*="grid-template-columns:1fr 1fr 1fr"]{
    grid-template-columns:1fr !important;
  }
  /* Bild-Text-Blöcke: Bild wieder nach oben */
  [style*="order:1"]{ order:0 !important; }
  [style*="order:2"]{ order:0 !important; }
  /* negative Überlappungen aufheben */
  [style*="margin-top:-170px"], [style*="margin-top:-110px"]{ margin-top:0 !important; }
  [style*="flex:0 0 280px"]{ flex:1 1 auto !important; }
  [style*="width:480px"], [style*="max-width:480px"]{ max-width:100% !important; }
  [style*="height:480px"]{ height:auto !important; }
  [style*="height:460px"]{ height:min(340px,52vw) !important; }
  [style*="height:420px"]{ height:min(320px,52vw) !important; }
  [style*="height:380px"]{ height:min(300px,50vw) !important; }
  [style*="height:340px"]{ height:min(280px,48vw) !important; }
}

/* ------------------------------------------------- Mobil, ab 900px ------- */
@media (max-width:900px){
  /* Kopfzeile: Navigation scrollt, Suche tritt zurück */
  header[style*="display:flex"]{ flex-wrap:wrap !important; gap:12px !important; padding:16px 20px !important; }
  header nav{
    order:3 !important; width:100% !important; justify-content:flex-start !important;
    overflow-x:auto !important; flex-wrap:nowrap !important;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  header nav::-webkit-scrollbar{ display:none; }
  header nav > *{ flex-shrink:0 !important; }

  /* Sektionsabstände */
  [style*="padding:120px 32px"]{ padding:64px 20px !important; }
  [style*="padding:100px 32px"]{ padding:56px 20px !important; }
  [style*="padding:96px 32px"]{ padding:56px 20px !important; }
  [style*="padding:80px 32px"]{ padding:48px 20px !important; }
  [style*="padding:72px 32px"]{ padding:44px 20px !important; }
  [style*="padding:64px 32px"]{ padding:40px 20px !important; }
  [style*="padding:48px 32px"]{ padding:32px 20px !important; }
  [style*="padding:36px 32px"]{ padding:24px 20px !important; }
  [style*="padding:24px 32px"]{ padding:20px !important; }
  [style*="padding:22px 32px"]{ padding:16px 20px !important; }
  [style*="padding:0 32px"]{ padding-left:20px !important; padding-right:20px !important; }
  [style*="padding:48px 40px"]{ padding:28px 22px !important; }
  [style*="padding:48px"]{ padding:28px 22px !important; }
  [style*="padding:40px"]{ padding:24px 20px !important; }
  [style*="padding:36px 32px"]{ padding:24px 20px !important; }

  /* Überschriften */
  [style*="font-size:64px"]{ font-size:clamp(30px,8.4vw,46px) !important; letter-spacing:-.5px !important; }
  [style*="font-size:56px"]{ font-size:clamp(29px,8vw,42px) !important; letter-spacing:-.5px !important; }
  [style*="font-size:52px"]{ font-size:clamp(27px,7.4vw,40px) !important; }
  [style*="font-size:50px"]{ font-size:clamp(26px,7.2vw,38px) !important; }
  [style*="font-size:46px"]{ font-size:clamp(25px,6.8vw,36px) !important; }
  [style*="font-size:44px"]{ font-size:clamp(25px,6.6vw,34px) !important; }
  [style*="font-size:40px"]{ font-size:clamp(24px,6.2vw,32px) !important; }
  [style*="font-size:38px"]{ font-size:clamp(23px,6vw,30px) !important; }
  [style*="font-size:36px"]{ font-size:clamp(23px,5.8vw,30px) !important; }
  [style*="font-size:34px"]{ font-size:clamp(22px,5.6vw,28px) !important; }
  [style*="font-size:32px"]{ font-size:clamp(21px,5.4vw,28px) !important; }
  [style*="font-size:30px"]{ font-size:clamp(20px,5.2vw,26px) !important; }
  [style*="font-size:28px"]{ font-size:clamp(20px,5vw,25px) !important; }
  [style*="font-size:26px"]{ font-size:clamp(19px,4.8vw,24px) !important; }

  /* Hero-Höhen */
  [style*="min-height:640px"]{ min-height:min(600px,80svh) !important; }
  [style*="min-height:560px"]{ min-height:min(520px,74svh) !important; }
  [style*="min-height:420px"]{ min-height:0 !important; }

  /* feste Breiten und Karten */
  [style*="width:400px"]{ width:100% !important; }
  [style*="width:420px"]{ width:100% !important; }
  [style*="width:260px"]{ width:calc(50% - 8px) !important; }
  [style*="flex:0 0 360px"]{ flex:0 0 min(84vw,340px) !important; }
  [style*="flex:0 0 340px"]{ flex:0 0 min(84vw,320px) !important; }
  [style*="flex:0 0 300px"]{ flex:0 0 min(80vw,300px) !important; }
  [style*="height:320px"]{ height:min(260px,52vw) !important; }
  [style*="height:220px"]{ height:min(180px,34vw) !important; }
  [style*="height:200px"]{ height:min(170px,42vw) !important; }
  [style*="height:90px"]{ height:64px !important; }

  /* Abstände in Reihen */
  [style*="gap:48px"]{ gap:24px !important; }
  [style*="gap:40px"]{ gap:20px !important; }
  [style*="gap:36px"]{ gap:20px !important; }
  [style*="gap:32px"]{ gap:18px !important; }
  [style*="margin-bottom:96px"]{ margin-bottom:48px !important; }
  [style*="margin-bottom:88px"]{ margin-bottom:44px !important; }
  [style*="margin-bottom:80px"]{ margin-bottom:40px !important; }
  [style*="margin:80px auto 10px"]{ margin:44px auto 10px !important; }
  [style*="gap:96px"]{ gap:48px !important; }

  /* Eingaben: 16px verhindert den iOS-Zoom beim Fokus */
  input, textarea, select{ font-size:16px !important; }

  /* Tap-Ziele */
  header nav a, header nav [data-act-click]{ min-height:44px; display:flex !important; align-items:center; }
}

/* ------------------------------------------------- Mobil, ab 600px ------- */
@media (max-width:600px){
  [style*="grid-template-columns:repeat(auto-fit,minmax(150px,1fr))"]{
    grid-template-columns:1fr 1fr !important;
  }
  [style*="width:260px"]{ width:100% !important; }
  [style*="padding:0 32px"]{ padding-left:16px !important; padding-right:16px !important; }
  [style*="display:flex"][style*="gap:56px"]{ flex-wrap:wrap !important; }
  [style*="justify-content:space-between"][style*="gap:40px"]{ flex-wrap:wrap !important; }
}

/* Bewegung reduzieren */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
}

/* =========================================================================
   Umbrechende Flex-Container, die selbst Flex-Elemente sind, dürfen von
   sich aus nicht kleiner werden als ihr Inhalt (min-width:auto). Auf
   schmalen Geräten schiebt das ganze Spalten aus dem Bild, wo sie das
   overflow-x:hidden der Seite unsichtbar abschneidet.
   ========================================================================= */
@media (max-width:1080px){
  [style*="display:flex"][style*="flex-wrap:wrap"]{ min-width:0; }
}

/* Spalten mit flex:1 rechnen beim Umbruch mit Breite 0 und bleiben
   deshalb in einer Reihe, obwohl ihre Mindestbreite nicht mehr passt.
   Unterhalb der Mindestbreite bekommt jede Spalte eine eigene Zeile. */
@media (max-width:900px){
  [style*="flex:1"][style*="min-width:280px"]{ flex-basis:100% !important; }
}
@media (max-width:620px){
  [style*="flex:1"][style*="min-width:220px"]{ flex-basis:100% !important; }
}

/* =========================================================================
   Kinder von senkrechten Flex-Containern nehmen sonst ihre Inhaltsbreite
   statt der Spaltenbreite. Bei breiten Inhalten wie waagerechten Schiebern
   schiebt das den ganzen Block aus dem Bild, wo das overflow-x:hidden der
   Seite ihn unsichtbar abschneidet.
   ========================================================================= */
[style*="margin:0 auto;display:flex;flex-direction:column"] > *{
  width:100%;
  min-width:0;
}

/* =========================================================================
   Abweichungen und Ergänzungen zum Prototyp, ausdrücklich gewünscht.
   Bewusst isoliert, damit Original und Kundenwunsch trennbar bleiben.
   ========================================================================= */

/* ------------------------------------------------------------------------
   1. Sticky funktioniert nur, wenn kein Vorfahre einen Scroll-Container
   aufmacht. overflow-x:hidden tut genau das, clip nicht.
   ------------------------------------------------------------------------ */
body{ overflow-x:clip !important; }
[style*="overflow-x:hidden"]{ overflow-x:clip !important; }

/* ------------------------------------------------------------------------
   2. Startseite: die beiden Zielgruppen-Karten
   höher, Inhalt mittig, Headline und Icon deutlich größer
   ------------------------------------------------------------------------ */
body[data-page="home"] [style*="border-radius:36px"][style*="padding:48px 40px"]{
  min-height:560px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding-bottom:52px !important;
}
body[data-page="home"] [style*="border-radius:36px"][style*="padding:48px 40px"] > svg{
  width:88px !important;
  height:88px !important;
  margin-bottom:8px;
}
body[data-page="home"] [style*="border-radius:36px"][style*="padding:48px 40px"] > h3{
  font-size:36px !important;
  line-height:1.15 !important;
  max-width:16ch;
}
body[data-page="home"] [style*="border-radius:36px"][style*="padding:48px 40px"] > p{
  font-size:16px !important;
  max-width:44ch;
  margin-bottom:40px !important;
}
body[data-page="home"] [style*="border-radius:36px"][style*="padding:48px 40px"] > button{
  margin-top:auto !important;
  padding-top:16px !important;
  padding-bottom:16px !important;
}

/* ------------------------------------------------------------------------
   3. Artikel: Inhaltsverzeichnis klebt mit und markiert den Abschnitt,
   in dem gerade gelesen wird
   ------------------------------------------------------------------------ */
.toc-link{
  position:relative;
  padding-left:14px;
  transition:color .2s, font-weight .2s;
}
.toc-link::before{
  content:"";
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:0; border-radius:2px; background:#4E9BD4;
  transition:height .2s;
}
.toc-link.is-current{ color:#150C2C !important; font-weight:800 !important; }
.toc-link.is-current::before{ height:18px; }

/* ------------------------------------------------------------------------
   4. Zitat: ohne Kasten, Bild oben mittig, Zitat in Serifen, darunter
   Name und Position
   ------------------------------------------------------------------------ */
blockquote[style]{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:18px !important;
  background:none !important;
  padding:0 !important;
  margin:3rem 0 !important;
  text-align:center;
}
blockquote[style] > div:first-child{
  width:88px !important; height:88px !important;
  border:3px solid #EAF6FF;
}
blockquote[style] > div:last-child{
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
/* Anführungszeichen frei stehend und größer */
blockquote[style] > div:last-child > div:first-child{
  width:auto !important; height:auto !important;
  background:none !important; margin-bottom:0 !important;
}
blockquote[style] svg{ width:38px !important; height:25px !important; }
blockquote[style] p{
  font-family:"Sora",Georgia,"Times New Roman",serif !important;
  font-size:27px !important;
  line-height:1.4 !important;
  font-style:italic !important;
  font-weight:600 !important;
  max-width:24ch;
}
.quote-by{
  display:flex; flex-direction:column; gap:2px; margin-top:2px;
}
.quote-by b{ font-size:15px; font-weight:800; color:#150C2C; }
.quote-by span{ font-size:13px; color:#8B84A3; }

/* ------------------------------------------------------------------------
   5. Info-Box im Artikel: moderner, mit eigenem Icon
   ------------------------------------------------------------------------ */
[style*="background:#F1E6D3"]{
  background:linear-gradient(135deg,#FFFFFF 0%,#F3F8FE 100%) !important;
  border:1px solid #DCE9F6;
  border-radius:24px !important;
  padding:26px 28px 26px 96px !important;
  position:relative;
  margin-top:32px !important;
}
[style*="background:#F1E6D3"]::before{
  content:"";
  position:absolute; left:26px; top:26px;
  width:52px; height:52px; border-radius:16px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 0-3.6 10.8c.5.4.8 1 .9 1.6l.1.6h5.2l.1-.6c.1-.6.4-1.2.9-1.6A6 6 0 0 0 12 3Z'/%3E%3C/svg%3E"),
    linear-gradient(135deg,#4E9BD4 0%,#2A1B52 100%);
  background-repeat:no-repeat;
  background-position:center;
}
[style*="background:#F1E6D3"] > div:first-child{
  font-size:12px !important; font-weight:800 !important;
  letter-spacing:.08em; text-transform:uppercase;
  color:#4E9BD4 !important; margin-bottom:8px !important;
}
[style*="background:#F1E6D3"] > div:last-child{
  font-size:15px !important; color:#3D3652 !important;
}

/* ------------------------------------------------------------------------
   6. Banner vor der vorletzten Überschrift
   ------------------------------------------------------------------------ */

@media (max-width:760px){
}

/* ------------------------------------------------------------------------
   7. Akkordeons: die ganze Karte ist klickbar, nicht nur die Kopfzeile
   ------------------------------------------------------------------------ */
[data-act-click]{ cursor:pointer; }
.acc-clickable{ cursor:pointer; }

/* ------------------------------------------------------------------------
   Mobile Feinschliff der obigen Blöcke
   ------------------------------------------------------------------------ */
@media (max-width:1080px){
  body[data-page="home"] [style*="border-radius:36px"][style*="padding:48px 40px"]{ min-height:440px; }
  body[data-page="home"] [style*="border-radius:36px"][style*="padding:48px 40px"] > h3{ font-size:30px !important; }
  body[data-page="home"] [style*="border-radius:36px"][style*="padding:48px 40px"] > svg{ width:72px !important; height:72px !important; }
}
@media (max-width:900px){
  body[data-page="home"] [style*="border-radius:36px"][style*="padding:48px 40px"]{
    min-height:0; padding-bottom:32px !important;
  }
  body[data-page="home"] [style*="border-radius:36px"][style*="padding:48px 40px"] > h3{ font-size:26px !important; }
  body[data-page="home"] [style*="border-radius:36px"][style*="padding:48px 40px"] > p{ margin-bottom:28px !important; }
  blockquote[style] p{ font-size:22px !important; }
  [style*="background:#F1E6D3"]{ padding:22px !important; }
  [style*="background:#F1E6D3"]::before{ position:relative; left:0; top:0; display:block; margin-bottom:14px; }
}

/* Das Inhaltsverzeichnis darf nicht unter der Kopfzeile kleben bleiben */
[style*="position:sticky"][style*="top:24px"]{
  top:112px !important;
  max-height:calc(100vh - 140px);
  overflow-y:auto;
  scrollbar-width:none;
}
[style*="position:sticky"][style*="top:24px"]::-webkit-scrollbar{ display:none; }

/* =========================================================================
   Korrekturen aus der Abnahme, zweite Runde.
   Steht bewusst hinter dc-tweaks.css und überschreibt gezielt.
   ========================================================================= */

/* ------------------------------------------------------------------------
   Info-Box: keine Kontur, Emoji-Icon, Label als Mini-Box, die zur Hälfte
   auf der oberen Kante sitzt
   ------------------------------------------------------------------------ */
[style*="background:#F1E6D3"]{
  background:linear-gradient(135deg,#F7FBFF 0%,#EEF6FD 100%) !important;
  border:none !important;
  border-radius:22px !important;
  padding:30px 28px 26px !important;
  margin-top:48px !important;
  position:relative;
  overflow:visible;
}
/* das alte Icon-Badge entfällt */
[style*="background:#F1E6D3"]::before{ content:none !important; }

/* Label wird zur Mini-Box auf der Kante */
[style*="background:#F1E6D3"] > div:first-child{
  position:absolute;
  top:0;
  left:26px;
  transform:translateY(-50%);
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#fff !important;
  border-radius:999px;
  padding:8px 16px 8px 12px;
  margin:0 !important;
  font-size:11px !important;
  font-weight:800 !important;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#150C2C !important;
  white-space:nowrap;
}
[style*="background:#F1E6D3"] > div:first-child::before{
  content:"💡";
  font-size:16px;
  line-height:1;
  transform:translateY(-1px);
}
[style*="background:#F1E6D3"] > div:last-child{
  font-size:15px !important;
  color:#3D3652 !important;
  line-height:1.75 !important;
}

/* ------------------------------------------------------------------------
   CTA-Banner: Bild bleibt innerhalb der Box
   ------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------
   Zitat: mehr Luft, breiter, echte Serifen, Bild ohne Rahmen und Schatten
   ------------------------------------------------------------------------ */
blockquote[style]{
  margin:5rem 0 !important;
  gap:20px !important;
}
blockquote[style] > div:first-child{
  border:none !important;
  box-shadow:none !important;
}
blockquote[style] img{ box-shadow:none !important; border:none !important; }
blockquote[style] p{
  font-family:Georgia,"Iowan Old Style","Times New Roman",serif !important;
  font-size:30px !important;
  line-height:1.35 !important;
  font-style:italic !important;
  font-weight:400 !important;
  max-width:34ch !important;
  letter-spacing:-.2px;
}
.quote-by b{ font-family:"Plus Jakarta Sans",sans-serif; }

/* ------------------------------------------------------------------------
   Sehr helle Trennlinie zwischen Autorenzeile und Textbeginn
   ------------------------------------------------------------------------ */
[style*="justify-content:space-between"][style*="margin-top:36px"][style*="flex-wrap:wrap"]{
  border-bottom:1px solid #F0F4F8;
  padding-bottom:26px;
  margin-bottom:10px;
}

/* ------------------------------------------------------------------------
   Inhaltsverzeichnis: der erste Punkt ist von Anfang an markiert
   ------------------------------------------------------------------------ */
.toc-link:first-of-type:not(.is-current){ color:#150C2C; }

@media (max-width:900px){
  blockquote[style] p{ font-size:23px !important; max-width:none !important; }
  blockquote[style]{ margin:3.5rem 0 !important; }
  [style*="background:#F1E6D3"]{ padding:28px 20px 22px !important; }
  [style*="background:#F1E6D3"] > div:first-child{ left:16px; }
}

/* ------------------------------------------------------------------------
   Nachtrag: Anführungszeichen über dem Zitat entfällt
   ------------------------------------------------------------------------ */
blockquote[style] > div:last-child > div:first-child{ display:none !important; }

/* ------------------------------------------------------------------------
   Nachtrag: Startseiten-Karten, mehr Luft zwischen Zielgruppen-Label
   und Fließtext
   ------------------------------------------------------------------------ */
[style*="border-radius:36px"][style*="padding:48px 40px"] > p{
  margin-top:34px !important;
}
@media (max-width:900px){
  [style*="border-radius:36px"][style*="padding:48px 40px"] > p{
    margin-top:24px !important;
  }
}

/* =========================================================================
   Jobs-Seite: Hero doppelt so hoch, Startseiten-Motiv dahinter,
   Inhalt weiter unten, Reveal-Text größer
   ========================================================================= */
section[style*="background:linear-gradient(135deg,#150C2C 0%,#2A1B52 100%)"][style*="padding:96px 32px 80px"]{
  min-height:76svh;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding-top:180px !important;
  padding-bottom:110px !important;
  background-image:
    linear-gradient(180deg, rgba(21,12,44,.62) 0%, rgba(21,12,44,.78) 55%, rgba(21,12,44,.92) 100%),
    url("../img/hero-bg.webp") !important;
  background-size:cover, cover !important;
  background-position:center, center 30% !important;
  background-repeat:no-repeat, no-repeat !important;
}

/* Reveal-Absatz: größer und ruhiger gesetzt */
[data-ref="revealRef"] p{
  font-size:34px !important;
  line-height:1.5 !important;
  letter-spacing:-.3px;
}
[data-ref="revealRef"]{ max-width:960px !important; }

@media (max-width:900px){
  section[style*="background:linear-gradient(135deg,#150C2C 0%,#2A1B52 100%)"][style*="padding:96px 32px 80px"]{
    min-height:64svh;
    padding-top:110px !important;
    padding-bottom:64px !important;
  }
  [data-ref="revealRef"] p{ font-size:24px !important; }
}

/* Jobs-Hero: Headline deutlich größer, blauer Untertitel entfällt */
section[style*="background:linear-gradient(135deg,#150C2C 0%,#2A1B52 100%)"][style*="padding:96px 32px 80px"] h1{
  font-size:clamp(48px,7.2vw,108px) !important;
  line-height:1.02 !important;
  letter-spacing:-2px !important;
}
section[style*="background:linear-gradient(135deg,#150C2C 0%,#2A1B52 100%)"][style*="padding:96px 32px 80px"] p[style*="#8FC7EA"]{
  display:none !important;
}
section[style*="background:linear-gradient(135deg,#150C2C 0%,#2A1B52 100%)"][style*="padding:96px 32px 80px"] > div{
  max-width:1100px !important;
}
@media (max-width:900px){
  section[style*="background:linear-gradient(135deg,#150C2C 0%,#2A1B52 100%)"][style*="padding:96px 32px 80px"] h1{
    font-size:clamp(38px,10vw,64px) !important;
    letter-spacing:-1px !important;
  }
}

/* =========================================================================
   Globale Headline-Gewichte: eine Stufe leichter als im Entwurf,
   ganz große Überschriften noch eine Stufe darunter
   ========================================================================= */
h1, h2, h3, h4{ font-weight:700 !important; }
h1[style*="font-size:64px"], h1[style*="font-size:56px"], h1[style*="font-size:52px"],
h1[style*="font-size:46px"], h1[style*="font-size:44px"], h1[style*="font-size:40px"],
h2[style*="font-size:52px"], h2[style*="font-size:50px"], h2[style*="font-size:46px"],
h2[style*="font-size:40px"], h2[style*="font-size:38px"]{
  font-weight:600 !important;
}

/* Jobs-Hero: Headline wieder etwas kleiner */
section[style*="background:linear-gradient(135deg,#150C2C 0%,#2A1B52 100%)"][style*="padding:96px 32px 80px"] h1{
  font-size:clamp(40px,5.2vw,76px) !important;
  letter-spacing:-1.4px !important;
  font-weight:600 !important;
}
@media (max-width:900px){
  section[style*="background:linear-gradient(135deg,#150C2C 0%,#2A1B52 100%)"][style*="padding:96px 32px 80px"] h1{
    font-size:clamp(34px,8.4vw,54px) !important;
  }
}

/* =========================================================================
   Jobs-Reveal: jedes Wort kommt aus der Unschärfe nach oben herein.
   Der Zeitpunkt kommt aus dem Scroll-Fortschritt des Prototyps, deshalb
   staffelt sich die Bewegung von allein.
   ========================================================================= */
[data-ref="revealRef"] dc-for > span{
  display:inline-block;
  margin-right:.26em;
  opacity:.32;
  transform:translateY(.5em);
  filter:blur(5px);
  transition:color .5s ease,
             opacity .5s ease,
             transform .6s cubic-bezier(.22,1,.36,1),
             filter .5s ease !important;
  will-change:transform, opacity, filter;
}
[data-ref="revealRef"] dc-for > span[style*="#150C2C"]{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}
@media (prefers-reduced-motion:reduce){
  [data-ref="revealRef"] dc-for > span{
    opacity:1; transform:none; filter:none; transition:color .2s ease !important;
  }
}

/* =========================================================================
   Jobs-Hero: Badge, Headline und Button kommen beim Laden gestaffelt
   aus der Unschärfe nach oben herein
   ========================================================================= */
@keyframes heroIn{
  from{ opacity:0; transform:translateY(30px); filter:blur(8px); }
  to{ opacity:1; transform:translateY(0); filter:blur(0); }
}
section[style*="background:linear-gradient(135deg,#150C2C 0%,#2A1B52 100%)"][style*="padding:96px 32px 80px"] > div > *{
  animation:heroIn .95s cubic-bezier(.22,1,.36,1) both;
}
section[style*="background:linear-gradient(135deg,#150C2C 0%,#2A1B52 100%)"][style*="padding:96px 32px 80px"] > div > *:nth-child(1){ animation-delay:.08s; }
section[style*="background:linear-gradient(135deg,#150C2C 0%,#2A1B52 100%)"][style*="padding:96px 32px 80px"] > div > *:nth-child(2){ animation-delay:.22s; }
section[style*="background:linear-gradient(135deg,#150C2C 0%,#2A1B52 100%)"][style*="padding:96px 32px 80px"] > div > *:nth-child(3){ animation-delay:.34s; }
section[style*="background:linear-gradient(135deg,#150C2C 0%,#2A1B52 100%)"][style*="padding:96px 32px 80px"] > div > *:nth-child(4){ animation-delay:.46s; }

@media (prefers-reduced-motion:reduce){
  section[style*="background:linear-gradient(135deg,#150C2C 0%,#2A1B52 100%)"][style*="padding:96px 32px 80px"] > div > *{
    animation:none;
  }
}

/* Headline wortweise: die Wörter animieren, nicht der ganze Block */
section[style*="background:linear-gradient(135deg,#150C2C 0%,#2A1B52 100%)"][style*="padding:96px 32px 80px"] h1{
  animation:none !important;
}
.word-in{
  display:inline-block;
  animation:heroIn .85s cubic-bezier(.22,1,.36,1) both;
}
/* Button erst nach der Headline */
section[style*="background:linear-gradient(135deg,#150C2C 0%,#2A1B52 100%)"][style*="padding:96px 32px 80px"] > div > *:nth-child(4){
  animation-delay:.86s;
}
@media (prefers-reduced-motion:reduce){
  .word-in{ animation:none !important; }
}

/* Reveal-Wörter etwas flotter schalten */
[data-ref="revealRef"] dc-for > span{
  transition:color .3s ease,
             opacity .3s ease,
             transform .38s cubic-bezier(.22,1,.36,1),
             filter .3s ease !important;
}

/* =========================================================================
   Jobs: weniger Luft zwischen den Stellenkarten und dem Block darunter
   ========================================================================= */
body[data-page="jobs"] section[style*="background:#fff;padding:0 32px 96px"]{
  padding-bottom:36px !important;
}
body[data-page="jobs"] section[style*="padding:96px 32px 0"]{
  padding-top:44px !important;
}
@media (max-width:900px){
  body[data-page="jobs"] section[style*="background:#fff;padding:0 32px 96px"]{
    padding-bottom:24px !important;
  }
  body[data-page="jobs"] section[style*="padding:96px 32px 0"]{
    padding-top:32px !important;
  }
}

/* =========================================================================
   Seitenbreite: der Inhalt läuft überall etwas schmaler,
   allein die Kopfzeile behält ihre ursprüngliche Breite
   ========================================================================= */
[style*="max-width:1320px"]{ max-width:1180px !important; }
dc-scope[data-scope="header"] [style*="max-width:1320px"]{ max-width:1320px !important; }

/* =========================================================================
   Sales Experts: zwei Karten passen nebeneinander in eine Region
   ========================================================================= */
body[data-page="team-sales-experts"] [style*="flex:0 0 300px"][style*="border-radius:24px"]{
  flex:1 1 250px !important;
  max-width:300px;
}

/* =========================================================================
   Jobs: Kacheln, Icons, Stellenzähler und der Block ohne Foto
   ========================================================================= */

/* Icons deutlich größer */
body[data-page="jobs"] [style*="border-radius:20px"][style*="min-height:220px"] > svg,
body[data-page="jobs"] [style*="border-radius:20px"][style*="min-height:180px"] > svg{
  width:46px !important;
  height:46px !important;
  margin-bottom:0 !important;
}
body[data-page="jobs"] [style*="border-radius:20px"][style*="min-height:220px"] > div,
body[data-page="jobs"] [style*="border-radius:20px"][style*="min-height:180px"] > div{
  margin-top:26px !important;
}
body[data-page="jobs"] [style*="border-radius:20px"] [style*="line-height:1.5"]{
  font-size:14px !important;
  line-height:1.65 !important;
  margin-top:10px !important;
}

/* Abschnittsüberschriften wie "Work & Flexibility" größer */
body[data-page="jobs"] h2[style*="font-size:30px"]{
  font-size:44px !important;
  line-height:1.12 !important;
  letter-spacing:-1px;
}
body[data-page="jobs"] h2[style*="font-size:34px"]{
  font-size:44px !important;
  letter-spacing:-1px;
}

/* Zählmarke an "Offene Stellen" */
.stellen-zahl{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:26px;
  height:26px;
  padding:0 8px;
  margin-left:10px;
  border-radius:999px;
  background:#150C2C;
  color:#fff;
  font-size:13px;
  font-weight:800;
  line-height:1;
  vertical-align:super;
  letter-spacing:0;
  top:0;
}

/* Stellenkarten: der Button sitzt unten auf gleicher Höhe */
body[data-page="jobs"] [style*="background:#EAF6FF;border-radius:24px;padding:40px"]{
  display:flex;
  flex-direction:column;
}
body[data-page="jobs"] [style*="background:#EAF6FF;border-radius:24px;padding:40px"] > a{
  margin-top:auto !important;
  align-self:flex-start;
}

/* "Arbeiten bei COVAGO": dunkles Blau mit sehr zurückhaltendem Muster */
.jobs-muster{
  background-color:#150C2C;
  background-image:
    radial-gradient(circle at 18% 20%, rgba(78,155,212,.22) 0%, rgba(78,155,212,0) 55%),
    radial-gradient(circle at 82% 78%, rgba(120,86,220,.20) 0%, rgba(120,86,220,0) 55%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 1px, rgba(255,255,255,0) 1px 14px);
}

@media (max-width:900px){
  body[data-page="jobs"] h2[style*="font-size:30px"],
  body[data-page="jobs"] h2[style*="font-size:34px"]{
    font-size:32px !important;
  }
  body[data-page="jobs"] [style*="border-radius:20px"][style*="min-height:220px"] > svg,
  body[data-page="jobs"] [style*="border-radius:20px"][style*="min-height:180px"] > svg{
    width:40px !important;
    height:40px !important;
  }
}

/* =========================================================================
   Kategorie-Pillen über den Hero-Überschriften: Glasoptik statt Flächenton.
   Der Verlauf läuft von oben hell nach unten fast durchsichtig, dazu eine
   feine Lichtkante oben. So bekommt die Pille Tiefe, ohne Schlagschatten.
   ========================================================================= */
[style*="background:rgba(255,255,255,0.15)"][style*="border-radius:999px"][style*="padding:8px 18px"]{
  background:linear-gradient(180deg,
    rgba(255,255,255,.30) 0%,
    rgba(255,255,255,.16) 46%,
    rgba(255,255,255,.06) 100%) !important;
  border-top:1px solid rgba(255,255,255,.42);
  border-bottom:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding:9px 20px 8px !important;
}

/* -------------------------------------------------------------------------
   Dieselbe Glasoptik für alle übrigen Pillen dieser Bauart.
   Heller Ansatz oben, zum Fuß hin durchsichtiger, feine Lichtkante.
   Bedienelemente wie Filter und Reiter bleiben ausgenommen.
   ------------------------------------------------------------------------- */

/* helle Pille auf hellem Grund, etwa COVAGO BLOG */
[style*="letter-spacing:0.08em"][style*="background:#fff"][style*="border-radius:999px"]{
  background:linear-gradient(180deg,#FFFFFF 0%,#F6FAFE 55%,#EEF5FC 100%) !important;
  border-top:1px solid #FFFFFF;
  border-bottom:1px solid rgba(21,12,44,.07);
}

/* blau hinterlegte Pillen, etwa HELPCENTER und SALES EXPERTS */
[style*="letter-spacing:0.08em"][style*="background:#EAF6FF"][style*="border-radius:999px"]{
  background:linear-gradient(180deg,#F5FAFF 0%,#E7F3FD 52%,#DCEEFB 100%) !important;
  border-top:1px solid rgba(255,255,255,.9);
  border-bottom:1px solid rgba(21,12,44,.07);
}

/* dunkle Pille über einem Foto, etwa die Kategorie im Beitragskopf */
[style*="background:rgba(21,12,44,0.55)"][style*="border-radius:999px"]{
  background:linear-gradient(180deg,
    rgba(21,12,44,.62) 0%,
    rgba(21,12,44,.50) 50%,
    rgba(21,12,44,.34) 100%) !important;
  border-top:1px solid rgba(255,255,255,.24);
  border-bottom:1px solid rgba(255,255,255,.06);
}

/* Bewertungs-Pille im Hero von Startseite und Gesundheit */
[style*="background:rgba(255,255,255,0.28)"][style*="border-radius:999px"]{
  background:linear-gradient(180deg,
    rgba(255,255,255,.44) 0%,
    rgba(255,255,255,.28) 50%,
    rgba(255,255,255,.14) 100%) !important;
  border-top-color:rgba(255,255,255,.72) !important;
  border-bottom-color:rgba(255,255,255,.28) !important;
}

/* Pille mit Symbol auf der Kontaktseite */
[style*="background:#fff;border-radius:999px;padding:8px 16px;margin-bottom:20px"]{
  background:linear-gradient(180deg,#FFFFFF 0%,#F6FAFE 55%,#EEF5FC 100%) !important;
  border-top:1px solid #FFFFFF;
  border-bottom:1px solid rgba(21,12,44,.07);
}

/* Prüfsiegel im Beitragskopf, gleiche Bauart */
[style*="background:#EAF6FF;border-radius:999px;padding:8px 16px"]{
  background:linear-gradient(180deg,#F5FAFF 0%,#E7F3FD 52%,#DCEEFB 100%) !important;
  border-top:1px solid rgba(255,255,255,.9);
  border-bottom:1px solid rgba(21,12,44,.07);
}

/* In der Brotkrumen-Pille steht jede Stufe in Weiß, auch die Pfeile */
[style*="background:rgba(21,12,44,0.55)"][style*="border-radius:999px"] a,
[style*="background:rgba(21,12,44,0.55)"][style*="border-radius:999px"] span{
  color:#fff !important;
}
[style*="background:rgba(21,12,44,0.55)"][style*="border-radius:999px"] svg{
  stroke:#fff !important;
  opacity:.75;
}

/* =========================================================================
   Akkordeon-Kopfzeilen: der Verlauf endete im Weiß, dadurch löste sich die
   rechte Kartenhälfte auf. Er endet jetzt in einem klar sichtbaren Hellblau,
   damit die Karte bis zum Rand als Fläche stehen bleibt.
   ========================================================================= */
[style*="linear-gradient(90deg,#DCEFFB 0%,#ffffff 100%)"]{
  background:linear-gradient(90deg,#DCEFFB 0%,#DFF0FC 60%,#E2F1FD 100%) !important;
}

/* =========================================================================
   Blogübersicht: breitere Bilder in den Fokus-Karten der rechten Spalte
   und das Muster der Jobs-Seite auf dem Newsletter-Aufruf
   ========================================================================= */
body[data-page="blog"] [style*="width:140px;flex-shrink:0;border-radius:14px"]{
  width:190px !important;
}
body[data-page="blog"] [style*="background:linear-gradient(135deg,#150C2C 0%,#2A1B52 100%)"][style*="border-radius:32px"]{
  background:
    radial-gradient(circle at 18% 20%, rgba(78,155,212,.22) 0%, rgba(78,155,212,0) 55%),
    radial-gradient(circle at 82% 78%, rgba(120,86,220,.20) 0%, rgba(120,86,220,0) 55%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 1px, rgba(255,255,255,0) 1px 14px),
    linear-gradient(135deg,#150C2C 0%,#2A1B52 100%) !important;
}
@media (max-width:900px){
  body[data-page="blog"] [style*="width:140px;flex-shrink:0;border-radius:14px"]{
    width:130px !important;
  }
}

/* =========================================================================
   Gesundheit, Auswahl "Was suchst Du?": die Karten standen im Entwurf auf
   festen 400 px. Seit der Inhalt schmaler läuft, passt die dritte nicht
   mehr in die Reihe. Sie teilen sich die Zeile jetzt gleichmäßig auf.
   ========================================================================= */
[style*="width:400px;min-height:220px;flex-shrink:0"]{
  width:auto !important;
  flex:1 1 260px !important;
}

/* =========================================================================
   Social-Media-Karten: einheitliches Badge unter den Linien-Symbolen
   ========================================================================= */
.social-badge{
  width:52px;
  height:52px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  background:linear-gradient(180deg,
    rgba(255,255,255,.20) 0%,
    rgba(255,255,255,.10) 50%,
    rgba(255,255,255,.04) 100%);
  border-top:1px solid rgba(255,255,255,.32);
  border-bottom:1px solid rgba(255,255,255,.08);
}

/* =========================================================================
   Vergleichsblock: die beiden Gesichter über den Karten
   ========================================================================= */
.vergleich-emoji{
  font-size:46px;
  line-height:1;
  /* Emoji-Glyphen sitzen mit etwas Luft in ihrem Kasten, das gleicht
     der negative Rand aus, damit sie bündig zur Überschrift stehen. */
  margin-left:-3px;
  margin-bottom:18px;
  filter:saturate(1.05);
}

/* =========================================================================
   Serviceversprechen: das Schild liegt groß und blass hinter dem Text
   ========================================================================= */
section[style*="background:#EAF6FF"][style*="padding:64px 32px"][style*="text-align:center"]{
  position:relative;
  overflow:hidden;
  padding-top:128px !important;
  /* Die Brotkrumen stehen am Fuß dieses Abschnitts, deshalb fällt der Rand
     darunter kleiner aus als oben. */
  padding-bottom:52px !important;
}
section[style*="background:#EAF6FF"][style*="padding:64px 32px"][style*="text-align:center"] > img[src*="shield-badge"]{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:300px !important;
  height:300px !important;
  margin:0 !important;
  opacity:.10;
  z-index:0;
  pointer-events:none;
}
section[style*="background:#EAF6FF"][style*="padding:64px 32px"][style*="text-align:center"] > h3,
section[style*="background:#EAF6FF"][style*="padding:64px 32px"][style*="text-align:center"] > p,
section[style*="background:#EAF6FF"][style*="padding:64px 32px"][style*="text-align:center"] > button{
  position:relative;
  z-index:1;
}
@media (max-width:900px){
  section[style*="background:#EAF6FF"][style*="padding:64px 32px"][style*="text-align:center"] > img[src*="shield-badge"]{
    width:210px !important;
    height:210px !important;
  }
}

/* =========================================================================
   Suche in der Kopfzeile
   ========================================================================= */
.kopfsuche{ transition:min-width .25s cubic-bezier(.22,1,.36,1); }
.kopfsuche.ist-offen{ min-width:320px !important; }
.kopfsuche-feld{
  display:none;
  flex:1;
  min-width:0;
  border:none;
  outline:none;
  background:transparent;
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  color:#150C2C;
  padding:0;
}
.kopfsuche-feld::placeholder{ color:#5C7C93; font-weight:600; }
.kopfsuche-feld::-webkit-search-cancel-button{ -webkit-appearance:none; }
.kopfsuche.ist-offen .kopfsuche-feld{ display:block; }

.kopfsuche-liste{
  display:none;
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  width:420px;
  max-width:78vw;
  max-height:60vh;
  overflow-y:auto;
  background:#fff;
  border-radius:20px;
  border-top:1px solid #F0F5FA;
  padding:8px;
  z-index:200;
}
.kopfsuche-liste.hat-treffer{ display:block; }
.kopfsuche-treffer{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:11px 14px;
  border-radius:14px;
  text-decoration:none;
  cursor:pointer;
}
.kopfsuche-treffer.ist-aktiv{ background:#EAF6FF; }
.kopfsuche-titel{
  font-size:14px;
  font-weight:700;
  color:#150C2C;
  letter-spacing:0;
  text-transform:none;
}
.kopfsuche-titel b{ color:#2C7CB8; font-weight:800; }
.kopfsuche-kontext{
  font-size:12px;
  font-weight:500;
  color:#5C5570;
  letter-spacing:0;
  text-transform:none;
}
.kopfsuche-leer{
  padding:14px;
  font-size:13px;
  font-weight:600;
  color:#5C5570;
  letter-spacing:0;
  text-transform:none;
}
@media (max-width:900px){
  .kopfsuche.ist-offen{ min-width:220px !important; }
  .kopfsuche-liste{ width:min(420px,86vw); }
}

/* Die Auswahlkarten tragen jetzt einen Überlagerungs-Link zur Unterseite */
[style*="width:400px;min-height:220px;flex-shrink:0"]{ position:relative; }

/* =========================================================================
   Sales Experts auf schmalen Geräten: die Regionen stehen im Entwurf als
   Flex-Spalten nebeneinander und lassen sich nicht zuverlässig umbrechen.
   Unter 900 px werden daraus schlichte Blöcke, dann steht jede Region und
   jede Karte über die volle Breite.
   ========================================================================= */
/* Die Regionenreihe nimmt sonst ihre Inhaltsbreite statt der Spaltenbreite */
body[data-page="team-sales-experts"] [style*="display:flex;gap:56px;flex-wrap:wrap"]{
  width:100%;
}
@media (max-width:900px){
  body[data-page="team-sales-experts"] [style*="display:flex;gap:56px;flex-wrap:wrap"]{
    display:block !important;
  }
  body[data-page="team-sales-experts"] [style*="flex:1;min-width:280px"]{
    width:100% !important;
    min-width:0 !important;
  }
  body[data-page="team-sales-experts"] [style*="flex:1;min-width:280px"] + [style*="flex:1;min-width:280px"]{
    margin-top:48px;
  }
  body[data-page="team-sales-experts"] [style*="display:flex;flex-wrap:wrap;gap:24px"]{
    display:block !important;
  }
  body[data-page="team-sales-experts"] [style*="flex:0 0 300px"]{
    width:100% !important;
    max-width:none !important;
    margin-bottom:20px;
  }
}

/* Die Titel auf den dunklen Kacheln standen im Entwurf drei Punkt kleiner
   als auf den hellen. Jetzt tragen alle Kacheln dieselbe Größe. */
body[data-page="jobs"] [style*="font-size:17px;font-weight:800;color:#fff"]{
  font-size:20px !important;
  line-height:1.25;
}

/* =========================================================================
   Mega-Menü, Spalte WISSEN: die Symbole standen nackt und zu klein neben
   der Beschriftung. Sie sitzen jetzt in einem Badge und stehen mittig zur
   Zeile, wie die Symbole im Rest der Seite.
   ========================================================================= */
dc-scope[data-scope="header"] a[style*="align-items:center;gap:14px"]{
  align-items:center !important;
  line-height:1.2;
  padding:6px 8px;
  margin:-6px -8px;
  border-radius:14px;
  transition:background .15s ease;
}
dc-scope[data-scope="header"] a[style*="align-items:center;gap:14px"]:hover{
  background:#F3F9FE;
}
dc-scope[data-scope="header"] a[style*="align-items:center;gap:14px"] svg{
  box-sizing:border-box;
  width:40px !important;
  height:40px !important;
  padding:7px;
  border-radius:12px;
  background:linear-gradient(180deg,#F2F9FF 0%,#E4F1FC 100%);
  stroke-width:1.7;
  align-self:center;
  overflow:visible;
}
/* Der Träger des Symbols schrumpft nicht und bleibt mittig */
dc-scope[data-scope="header"] a[style*="align-items:center;gap:14px"] > span:first-child{
  flex-shrink:0;
  display:flex;
  align-items:center;
}

/* -------------------------------------------------------------------
   Bedienflächen der Fußzeile: die Rechtsverweise waren 15 Pixel hoch
   und damit auf dem Telefon kaum zu treffen.
   ------------------------------------------------------------------- */
footer a[href^="/impressum"], footer a[href^="/datenschutz"],
footer a[href^="/erstinformation"], footer a[href^="/widerruf"],
footer a[href^="/beschwerde"], footer button{
  display:inline-flex; align-items:center; min-height:32px;
}

/* Die Beschriftungen im PKV-Vergleich standen auf 10 Pixel */
.pkv-vgl-mini{ font-size:12px !important; }

/* =========================================================================
   Landingpage PKV-Beratung.
   Alles hier gehört allein zu dieser Seite, Klassen tragen das Kürzel pkv.
   ========================================================================= */

/* ------------------------------------------------------------------ Hero */
.pkv-hero h1{ font-weight:600 !important; max-width:840px; }

/* =========================================================================
   Hinweiskasten mit den Rechengrößen
   ========================================================================= */
.pkv-hinweis{
  position:relative;
  margin-top:40px;
  background:#fff;
  border-radius:24px;
  padding:34px 36px 30px;
}
.pkv-hinweis[hidden]{ display:none; }
.pkv-hinweis-zu{
  position:absolute;
  top:18px;
  right:18px;
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  border-radius:999px;
  background:#F2F7FC;
  color:#5C5570;
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.pkv-hinweis-zu:hover{ background:#E4EFF9; color:#150C2C; }
.pkv-hinweis-kopf{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:17px;
  font-weight:800;
  color:#150C2C;
  padding-right:44px;
}
.pkv-hinweis-kopf svg{ flex-shrink:0; }
.pkv-hinweis-text{
  font-size:15px;
  color:#3D3652;
  line-height:1.75;
  margin:16px 0 0;
  max-width:78ch;
}
.pkv-hinweis-text b{ color:#150C2C; font-weight:800; }
.pkv-hinweis-fuss{
  font-size:13px;
  color:#5C5570;
  line-height:1.7;
  margin:20px 0 0;
}

/* =========================================================================
   Vergleich: kein Tabellenkopf, links zurückhaltend, rechts dominant
   ========================================================================= */
.pkv-vgl{ margin-top:44px; }
.pkv-vgl-zeile{
  display:grid;
  grid-template-columns:0.8fr 1fr 1.3fr;
  align-items:stretch;
  column-gap:20px;
}
.pkv-vgl-merkmal{
  display:flex;
  align-items:center;
  padding:20px 4px;
  font-size:15px;
  font-weight:800;
  color:#150C2C;
}
.pkv-vgl-gkv,
.pkv-vgl-pkv{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
}
.pkv-vgl-mini{ display:none; }

/* linke Spalte: zurückhaltend */
.pkv-vgl-gkv{
  background:#F7FAFD;
  padding:20px 24px;
  border-bottom:1px solid #EDF2F8;
}
.pkv-vgl-zeile:last-child .pkv-vgl-gkv{ border-radius:0 0 20px 20px; border-bottom:none; }
.pkv-vgl-gkv .pkv-vgl-wert{
  font-size:14px;
  color:#6B7A8C;
  line-height:1.6;
}

/* rechte Spalte: größer, dunkel, hervorgehoben */
.pkv-vgl-pkv{
  background:linear-gradient(135deg,#150C2C 0%,#2A1B52 100%);
  padding:24px 30px;
  position:relative;
}
.pkv-vgl-pkv::after{
  content:"";
  position:absolute;
  left:30px;
  right:30px;
  bottom:0;
  height:1px;
  background:rgba(255,255,255,.09);
}
.pkv-vgl-pkv.ist-letzte::after{ display:none; }
.pkv-vgl-pkv .pkv-vgl-wert{
  font-size:16px;
  color:#fff;
  line-height:1.55;
  font-weight:600;
}

/* Kopfzeile der beiden Spalten */
.pkv-vgl-kopf .pkv-vgl-gkv{
  border-radius:20px 20px 0 0;
  padding:26px 24px;
}
.pkv-vgl-kopf .pkv-vgl-pkv{
  border-radius:26px 26px 0 0;
  padding:30px 30px 28px;
  margin-top:-14px;
}
.pkv-vgl-kopf .pkv-vgl-pkv::after{ display:none; }
.pkv-vgl-titel-name{
  font-size:19px;
  font-weight:800;
  color:#150C2C;
  line-height:1.25;
}
.pkv-vgl-pkv .pkv-vgl-titel-name{ font-size:23px; color:#fff; }
.pkv-vgl-titel-sub{
  font-size:13px;
  color:#6B7A8C;
  margin-top:6px;
}
.pkv-vgl-pkv .pkv-vgl-titel-sub{ color:#8FC7EA; font-size:14px; }
.pkv-vgl-marke{
  display:inline-flex;
  align-self:flex-start;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#150C2C;
  background:#8FC7EA;
  border-radius:999px;
  padding:6px 14px;
  margin-bottom:12px;
}
.pkv-vgl-zeile:last-child .pkv-vgl-pkv{ border-radius:0 0 26px 26px; padding-bottom:30px; }

/* =========================================================================
   Ansatz: Stufen und Pyramide
   ========================================================================= */
.pkv-stufe{
  background:#fff;
  border-radius:20px;
  margin-bottom:14px;
  overflow:hidden;
}
.pkv-stufe-kopf{
  width:100%;
  display:flex;
  align-items:center;
  gap:14px;
  padding:22px 24px;
  background:transparent;
  border:none;
  cursor:pointer;
  text-align:left;
  font-family:inherit;
}
.pkv-stufe-nr{
  flex-shrink:0;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  color:#4E9BD4;
  background:#EAF6FF;
  border-radius:999px;
  padding:6px 12px;
}
.pkv-stufe-titel{
  flex:1;
  font-size:18px;
  font-weight:800;
  color:#150C2C;
}
.pkv-stufe-pfeil{ flex-shrink:0; transition:transform .3s ease; }
.pkv-stufe.ist-offen .pkv-stufe-pfeil{ transform:rotate(180deg); }
.pkv-stufe-text{
  max-height:0;
  overflow:hidden;
  transition:max-height .38s cubic-bezier(.22,1,.36,1);
}
.pkv-stufe.ist-offen .pkv-stufe-text{ max-height:560px; }
.pkv-stufe-text > p{
  overflow:hidden;
  margin:0;
  padding:0 24px;
  font-size:15px;
  line-height:1.75;
  color:#5C5570;
  transition:padding .35s ease;
}
.pkv-stufe.ist-offen .pkv-stufe-text > p{ padding:0 24px 24px; }

.pkv-pyramide-box{
  /* ohne eigene Fläche, die Pyramide steht frei im Abschnitt */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:0;
}
.pkv-pyramide{ width:100%; height:auto; max-width:560px; }
.pkv-ebene path{
  fill:#CFE4F6;
  /* Kontur in derselben Farbe mit runden Ecken: so werden die Außenecken
     weich, ohne dass die Form ihre Fläche verliert. */
  stroke:#CFE4F6;
  stroke-width:14;
  stroke-linejoin:round;
  transition:fill .4s ease, stroke .4s ease, transform .45s cubic-bezier(.22,1,.36,1);
  transform-origin:200px 178px;
}
.pkv-ebene text{
  font-family:inherit;
  font-size:15px;
  font-weight:800;
  fill:#6E8AA6;
  transition:fill .4s ease;
}
.pkv-ebene.ist-aktiv path{
  fill:#150C2C;
  stroke:#150C2C;
  transform:scale(1.04);
}
.pkv-ebene.ist-aktiv text{ fill:#fff; }
.pkv-pyramide-fuss{
  margin-top:20px;
  font-size:12px;
  color:#8FA9C2;
  font-weight:600;
}

/* =========================================================================
   Ablauf: eigener dunkler Kasten mit Rundung oben und unten
   ========================================================================= */
.pkv-ablauf{
  max-width:1320px;
  margin:0 auto;
  border-radius:40px;
  padding:96px 40px 80px;
  background:
    radial-gradient(circle at 15% 10%, rgba(78,155,212,.20) 0%, rgba(78,155,212,0) 52%),
    radial-gradient(circle at 85% 88%, rgba(120,86,220,.18) 0%, rgba(120,86,220,0) 52%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 1px, rgba(255,255,255,0) 1px 14px),
    linear-gradient(135deg,#150C2C 0%,#241546 100%);
}

.pkv-zeitstrahl{
  position:relative;
  max-width:1000px;
  margin:64px auto 0;
}
/* Gleis und Füllung liegen exakt auf derselben Achse */
.pkv-gleis{
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:3px;
  margin-left:-1.5px;
  background:rgba(143,199,234,.20);
  border-radius:999px;
  overflow:hidden;
}
.pkv-gleis-fuell{
  display:block;
  width:100%;
  height:0;
  background:#8FC7EA;
  border-radius:999px;
  /* keine Übergangszeit: die Höhe folgt dem Scrollen ohne Nachlauf */
  transition:none;
}
.pkv-schritt{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
  padding:34px 0;
}
.pkv-punkt{
  position:absolute;
  left:50%;
  top:50%;
  width:18px;
  height:18px;
  margin:-9px 0 0 -9px;
  border-radius:999px;
  background:rgba(143,199,234,.20);
  border:none;
  z-index:2;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.pkv-schritt.ist-erreicht .pkv-punkt{
  background:#8FC7EA;
  transform:scale(1.08);
}
.pkv-schritt.ist-gedreht .pkv-schritt-text{ order:2; }
.pkv-schritt.ist-gedreht .pkv-schritt-bild{ order:1; }
.pkv-schritt-nr{
  font-size:13px;
  font-weight:800;
  letter-spacing:.1em;
  color:#8FC7EA;
}
.pkv-schritt-text h3{
  font-size:26px;
  color:#fff;
  font-weight:800;
  line-height:1.25;
  margin:12px 0 0;
}
.pkv-schritt-text p{
  font-size:15px;
  color:#C6BEDE;
  line-height:1.75;
  margin:12px 0 0;
}
.pkv-schritt-bild{
  border-radius:24px;
  overflow:hidden;
  aspect-ratio:4 / 3;
}
.pkv-schritt-bild img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* =========================================================================
   Stimmen
   ========================================================================= */
.pkv-bahnen{ margin-top:52px; display:flex; flex-direction:column; gap:20px; }
.pkv-bahn{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.pkv-bahn-lauf{
  display:flex;
  gap:20px;
  width:max-content;
  will-change:transform;
}
.pkv-bahn-links .pkv-bahn-lauf{ animation:pkvLaufLinks 64s linear infinite; }
.pkv-bahn-rechts .pkv-bahn-lauf{ animation:pkvLaufRechts 64s linear infinite; }
.pkv-bahn:hover .pkv-bahn-lauf,
.pkv-bahn:focus-within .pkv-bahn-lauf{ animation-play-state:paused; }
@keyframes pkvLaufLinks{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@keyframes pkvLaufRechts{
  from{ transform:translateX(-50%); }
  to{ transform:translateX(0); }
}
@media (prefers-reduced-motion:reduce){
  .pkv-bahn-lauf{ animation:none !important; }
  .pkv-bahn{ overflow-x:auto; }
}

.pkv-stimme{
  flex:0 0 400px;
  width:400px;
  background:#F7FBFF;
  border-radius:24px;
  padding:28px 26px;
  text-align:left;
}
.pkv-stimme-kopf{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.pkv-avatar{
  flex-shrink:0;
  width:44px;
  height:44px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#F1F6FC;
}
.pkv-avatar svg{ width:22px; height:22px; }
.pkv-stimme{ position:relative; }
.pkv-stimme-raus{
  position:absolute; top:16px; right:16px;
  width:30px; height:30px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  color:#4E9BD4; background:#F1F6FC;
  transition:background .15s, color .15s;
}
.pkv-stimme-raus:hover{ background:#4E9BD4; color:#fff; }
.pkv-stimme-wer{ flex:1; min-width:0; }
.pkv-stimme-name{ font-size:15px; font-weight:800; color:#150C2C; }
.pkv-stimme-rolle{ font-size:12px; color:#5C5570; margin-top:2px; }
.pkv-stimme-google{ flex-shrink:0; display:flex; }
.pkv-sterne{
  display:block;
  color:#FBBC05;
  font-size:15px;
  letter-spacing:2px;
}
.pkv-stimme-text{
  font-size:14px;
  color:#3D3652;
  line-height:1.75;
  margin:10px 0 0;
}

/* =========================================================================
   PKV-Wissen als Schieber
   ========================================================================= */
.pkv-wissen-kopf{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.pkv-wissen-nav{ display:flex; gap:10px; }
.pkv-pfeil{
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  border-radius:999px;
  background:#fff;
  color:#150C2C;
  cursor:pointer;
  transition:background .2s ease, color .2s ease, opacity .2s ease;
}
.pkv-pfeil:hover{ background:#150C2C; color:#fff; }
.pkv-pfeil[disabled]{ opacity:.35; cursor:default; }
.pkv-pfeil[disabled]:hover{ background:#fff; color:#150C2C; }

.pkv-wissen-bahn{
  margin-top:40px;
  overflow-x:auto;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.pkv-wissen-bahn::-webkit-scrollbar{ display:none; }
.pkv-wissen-lauf{
  display:flex;
  gap:24px;
  padding:0 max(32px, calc((100vw - 1180px) / 2));
  width:max-content;
}
.pkv-wissen-karte{
  flex:0 0 360px;
  width:360px;
  display:flex;
  flex-direction:column;
  background:#fff;
  border-radius:24px;
  overflow:hidden;
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.pkv-wissen-karte:hover{ filter:brightness(1.03); }
.pkv-wissen-bild{ height:200px; flex-shrink:0; }
.pkv-wissen-bild img{ width:100%; height:100%; object-fit:cover; display:block; }
.pkv-wissen-text{ padding:26px 26px 30px; display:flex; flex-direction:column; flex:1; }
.pkv-wissen-kat{
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  color:#4E9BD4;
}
.pkv-wissen-text h3{
  font-size:18px;
  color:#150C2C;
  font-weight:800;
  margin:8px 0 0;
  line-height:1.3;
}
.pkv-wissen-text p{
  font-size:14px;
  color:#5C5570;
  line-height:1.65;
  margin:10px 0 0;
}

/* =========================================================================
   Fragen
   ========================================================================= */
.pkv-faq{
  border-radius:18px;
  margin-bottom:12px;
  overflow:hidden;
  background:linear-gradient(90deg,#DCEFFB 0%,#DFF0FC 60%,#E2F1FD 100%);
}
.pkv-faq-kopf{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:20px 24px;
  background:transparent;
  border:none;
  cursor:pointer;
  text-align:left;
  font-family:inherit;
  font-size:16px;
  font-weight:800;
  color:#150C2C;
}
.pkv-faq-kopf svg{ flex-shrink:0; transition:transform .3s ease; }
.pkv-faq.ist-offen .pkv-faq-kopf svg{ transform:rotate(180deg); }
.pkv-faq-text{
  max-height:0;
  overflow:hidden;
  transition:max-height .38s cubic-bezier(.22,1,.36,1);
}
.pkv-faq.ist-offen .pkv-faq-text{ max-height:560px; }
.pkv-faq-text > p{
  overflow:hidden;
  margin:0;
  padding:0 24px;
  font-size:15px;
  line-height:1.75;
  color:#3D3652;
  transition:padding .35s ease;
}
.pkv-faq.ist-offen .pkv-faq-text > p{ padding:0 24px 22px; }

/* =========================================================================
   Aufruf
   ========================================================================= */
.pkv-aufruf{
  background:
    radial-gradient(circle at 18% 20%, rgba(78,155,212,.22) 0%, rgba(78,155,212,0) 55%),
    radial-gradient(circle at 82% 78%, rgba(120,86,220,.20) 0%, rgba(120,86,220,0) 55%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 1px, rgba(255,255,255,0) 1px 14px),
    linear-gradient(135deg,#150C2C 0%,#2A1B52 100%);
}
.pkv-aufruf h2{ font-weight:600 !important; }

/* Überlagerungs-Link auf der Auswahlkarte der Gesundheitsseite */
.pkv-kartenlink{
  position:absolute;
  inset:0;
  border-radius:24px;
  z-index:2;
}

/* =========================================================================
   Tablet
   ========================================================================= */
@media (max-width:1080px){
  .pkv-hero h1{ font-size:44px !important; letter-spacing:-1px !important; }
  .pkv-grid-3{ grid-template-columns:1fr 1fr !important; }
  .pkv-ansatz{ grid-template-columns:1fr !important; gap:44px !important; }
  .pkv-pyramide{ max-width:460px; }
  .pkv-faq-lauf{ grid-template-columns:1fr !important; gap:36px !important; }
  .pkv-stimme{ flex-basis:340px; width:340px; }
  .pkv-schritt{ gap:36px; }
  .pkv-schritt-text h3{ font-size:22px; }
  .pkv-ablauf{ padding:72px 28px 64px; border-radius:32px; }
  .pkv-vgl-zeile{ grid-template-columns:0.7fr 1fr 1.25fr; column-gap:14px; }
  .pkv-vgl-pkv{ padding:22px 22px; }
  .pkv-vgl-kopf .pkv-vgl-pkv{ padding:26px 22px 24px; }
  .pkv-wissen-lauf{ padding:0 32px; }
}

/* =========================================================================
   Handy
   ========================================================================= */
@media (max-width:760px){
  .pkv-hero{ min-height:0 !important; padding:120px 20px 56px !important; }
  .pkv-hero h1{ font-size:34px !important; letter-spacing:-.6px !important; }
  .pkv-grid-3{ grid-template-columns:1fr !important; }

  .pkv-hinweis{ padding:28px 22px 24px; }
  .pkv-hinweis-kopf{ font-size:16px; }
  .pkv-hinweis-text{ font-size:14px; }

  /* Vergleich: je Merkmal ein Block, beide Werte untereinander */
  .pkv-vgl-zeile{ grid-template-columns:1fr; column-gap:0; row-gap:0; margin-bottom:14px; }
  .pkv-vgl-merkmal{ padding:0 0 10px; font-size:16px; }
  .pkv-vgl-mini{
    display:block;
    font-size:10px;
    font-weight:800;
    letter-spacing:.09em;
    text-transform:uppercase;
    opacity:.7;
  }
  .pkv-vgl-gkv{ border-radius:18px 18px 0 0 !important; border-bottom:none; padding:18px 20px; }
  .pkv-vgl-pkv{ border-radius:0 0 18px 18px !important; padding:20px 20px 22px !important; margin-top:0 !important; }
  .pkv-vgl-pkv::after{ display:none; }
  .pkv-vgl-pkv .pkv-vgl-wert{ font-size:15px; }
  .pkv-vgl-kopf{ margin-bottom:20px; }
  .pkv-vgl-kopf .pkv-vgl-gkv{ padding:20px; }
  .pkv-vgl-titel-name{ font-size:17px; }
  .pkv-vgl-pkv .pkv-vgl-titel-name{ font-size:20px; }

  .pkv-ablauf{ padding:56px 20px 52px; border-radius:26px; }
  .pkv-zeitstrahl{ margin-top:44px; }
  .pkv-gleis{ left:9px; margin-left:0; }
  .pkv-schritt{
    grid-template-columns:1fr;
    gap:20px;
    padding:26px 0 26px 40px;
  }
  .pkv-punkt{ left:9px; top:38px; margin:-9px 0 0 -7.5px; }
  .pkv-schritt.ist-gedreht .pkv-schritt-text{ order:0; }
  .pkv-schritt.ist-gedreht .pkv-schritt-bild{ order:0; }
  .pkv-schritt-bild{ aspect-ratio:16 / 10; }

  .pkv-stimme{ flex-basis:290px; width:290px; padding:24px 22px; }
  .pkv-bahn-links .pkv-bahn-lauf,
  .pkv-bahn-rechts .pkv-bahn-lauf{ animation-duration:44s; }

  .pkv-wissen-karte{ flex-basis:280px; width:280px; }
  .pkv-wissen-lauf{ padding:0 20px; gap:16px; }
  .pkv-wissen-bild{ height:170px; }
  .pkv-wissen-nav{ display:none; }

  .pkv-pyramide{ max-width:330px; }
  .pkv-stufe-kopf{ padding:18px 18px; gap:10px; }
  .pkv-stufe-titel{ font-size:16px; }
  .pkv-stufe-text > p{ padding:0 18px; font-size:14px; }
  .pkv-stufe.ist-offen .pkv-stufe-text > p{ padding:0 18px 20px; }
  .pkv-faq-kopf{ padding:17px 18px; font-size:15px; }
  .pkv-faq-text > p{ padding:0 18px; font-size:14px; }
  .pkv-faq.ist-offen .pkv-faq-text > p{ padding:0 18px 18px; }
  .pkv-aufruf{ padding:56px 24px !important; border-radius:26px !important; }
  .pkv-aufruf h2{ font-size:28px !important; }
}

/* =========================================================================
   Produkt- und Übersichtsseiten
   ========================================================================= */

/* Übersicht: Kachelraster mit Verlinkung */
.pkv-hub{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:24px;
}
.pkv-hub-karte{
  display:flex;
  flex-direction:column;
  background:#fff;
  border-radius:24px;
  padding:34px 30px 30px;
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.pkv-hub-karte:hover{ filter:brightness(1.03); }
.pkv-hub-karte h3{
  font-size:20px;
  color:#150C2C;
  font-weight:800;
  margin:26px 0 0;
  line-height:1.3;
}
.pkv-hub-unter{
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#4E9BD4;
  margin-top:8px;
}
.pkv-hub-karte p{
  font-size:14px;
  color:#5C5570;
  line-height:1.7;
  margin:12px 0 0;
  flex:1;
}
.pkv-hub-mehr{
  display:inline-block;
  margin-top:22px;
  font-size:14px;
  font-weight:800;
  color:#150C2C;
}
.pkv-hub-mehr::after{ content:" →"; }

/* Aussage-Block: Punkte in zwei Spalten */
.pkv-einwaende{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 32px;
  max-width:900px;
  margin:44px auto 0;
}
.pkv-einwand{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:15px;
  color:#E4DFF2;
  line-height:1.6;
}
.pkv-einwand svg{ flex-shrink:0; margin-top:3px; }

/* Personenkarten */
.pkv-personen{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:24px;
  margin-top:44px;
}
.pkv-person{
  background:#fff;
  border-radius:24px;
  padding:26px;
  display:flex;
  flex-direction:column;
}
.pkv-person-bild{
  border-radius:18px;
  overflow:hidden;
  aspect-ratio:1 / 1;
}
.pkv-person-bild img{ width:100%; height:100%; object-fit:cover; display:block; }
.pkv-person h3{
  font-size:18px;
  color:#150C2C;
  font-weight:800;
  margin:18px 0 0;
}
.pkv-person-rolle{ font-size:13px; color:#5C5570; margin-top:3px; }
.pkv-person-kontakt{
  display:flex;
  flex-direction:column;
  gap:5px;
  margin-top:14px;
  flex:1;
}
.pkv-person-kontakt a{ font-size:13px; color:#150C2C; }
.pkv-person-cta{
  display:block;
  text-align:center;
  margin-top:18px;
  background:#150C2C;
  color:#fff;
  border-radius:999px;
  padding:13px 20px;
  font-size:13px;
  font-weight:700;
}

/* Fragen in Gruppen */
.pkv-faq-gruppe + .pkv-faq-gruppe{ margin-top:34px; }
.pkv-faq-titel{
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#4E9BD4;
  margin:0 0 14px;
}

@media (max-width:1080px){
  .pkv-hub{ grid-template-columns:1fr 1fr; }
  .pkv-personen{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  .pkv-hub{ grid-template-columns:1fr; }
  .pkv-personen{ grid-template-columns:1fr; }
  .pkv-einwaende{ grid-template-columns:1fr; margin-top:32px; }
}

/* Personen ohne Porträt: Initialen im selben Feld */
.pkv-person-initialen{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:38px;
  font-weight:800;
  color:#fff;
  letter-spacing:.02em;
  background:linear-gradient(135deg,#4E9BD4 0%,#2A1B52 100%);
}

/* =========================================================================
   Lange Komposita wie „Betriebsunterbrechungsversicherung" bestimmen sonst
   die Mindestbreite ihrer Kachel und sprengen auf schmalen Geräten das
   Raster. Sie dürfen deshalb umbrechen und werden getrennt.
   ========================================================================= */
.pkv-grid-3 > div,
.pkv-hub-karte,
.pkv-person,
.pkv-vgl-merkmal,
.pkv-vgl-gkv,
.pkv-vgl-pkv{
  min-width:0;
}
.pkv-grid-3 h3,
.pkv-hub-karte h3,
.pkv-person h3,
.pkv-faq-kopf span,
.pkv-stufe-titel,
.pkv-vgl-merkmal,
.pkv-vgl-wert,
.pkv-schritt-text h3,
.pkv-wissen-text h3{
  overflow-wrap:break-word;
  hyphens:auto;
}
.pkv-person-kontakt a{ overflow-wrap:anywhere; }

/* -------------------------------------------------------------------------
   Die Bausteine unter „Die Lücken" standen als Raster mit sechs Kästen und
   nahmen eine halbe Bildschirmhöhe ein. Jetzt laufen sie waagerecht, mit
   denselben Pfeilen wie die Personenkarten und ohne sichtbaren Balken.
   ------------------------------------------------------------------------- */
.pkv-bahn-kopf{
  display:flex; justify-content:flex-end; margin-top:28px;
}
.pkv-bahn-kopf .cv-pfeile{ margin-top:0; }
.pkv-luecken{
  display:flex; gap:24px; margin-top:20px;
  overflow-x:auto; scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none;
  padding-bottom:4px;
}
.pkv-luecken::-webkit-scrollbar{ display:none; }
.pkv-luecken > div{
  flex:0 0 340px; scroll-snap-align:start;
}

@media (max-width:900px){
  .pkv-bahn-kopf{ justify-content:center; }
  .pkv-luecken{ gap:16px; }
  .pkv-luecken > div{ flex:0 0 82%; padding:28px 24px !important; }
}

/* Der hellblaue Streifen mit den Beiträgen läuft von Rand zu Rand. Mit
   Radius an den Ecken setzt er sich als eigener Abschnitt ab, wie die
   Fußzeile und die dunklen Bänder. */
.pkv-wissen-band{
  border-radius:40px;
  overflow:hidden;
}
@media (max-width:760px){
  .pkv-wissen-band{ border-radius:28px; }
}

/* =========================================================================
   Unterseiten nach der Gesundheits-Vorlage.
   Die Werte stammen aus dem Entwurf der Gesundheitsseite, ergänzt um das,
   was der Entwurf dort nicht braucht: Schieber und Reiterzustände.
   ========================================================================= */

/* -------------------------------------------------------------- Auswahl */
.cv-auswahl{
  display:flex;
  justify-content:center;
  gap:16px;
  margin-top:48px;
  flex-wrap:wrap;
}
.cv-auswahl-karte{
  background:#fff;
  border-radius:24px;
  padding:40px 32px;
  text-align:left;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:32px;
  flex:1 1 260px;
  max-width:400px;
  min-height:220px;
  min-width:0;
  position:relative;
}
.cv-auswahl-karte:hover{ background:#F7FBFF; }

/* Das Zeichen steht groß und fein über dem Text */
.cv-auswahl-karte > svg:not(.cv-auswahl-pfeil){
  width:58px;
  height:58px;
  stroke-width:1.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0;
}

/* Der schräge Pfeil weist auf die eigene Unterseite hin */
.cv-auswahl-pfeil{
  position:absolute;
  top:24px;
  right:24px;
  width:28px;
  height:28px;
  color:#4E9BD4;
  opacity:.45;
  transition:opacity .2s;
}
.cv-auswahl-karte:hover .cv-auswahl-pfeil{ opacity:1; }

/* Ab vier Kacheln wird daraus ein Schieber */
.cv-auswahl.ist-schieber{
  display:flex;
  flex-wrap:nowrap;
  justify-content:flex-start;
  overflow-x:auto;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -ms-overflow-style:none;
  gap:24px;
  text-align:left;
}
.cv-auswahl.ist-schieber::-webkit-scrollbar{ display:none; }
.cv-auswahl.ist-schieber .cv-auswahl-karte{
  flex:0 0 340px;
  width:340px;
  max-width:none;
}

/* Pfeile, gleiche Bauform wie im Blog */
.cv-pfeile{
  display:flex;
  gap:10px;
  justify-content:center;
  margin-top:32px;
}
.cv-pfeil{
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  border-radius:999px;
  background:#fff;
  color:#150C2C;
  cursor:pointer;
  transition:background .2s ease, color .2s ease, opacity .2s ease;
}
.cv-pfeil:hover{ background:#150C2C; color:#fff; }
.cv-pfeil[disabled]{ opacity:.35; cursor:default; }
.cv-pfeil[disabled]:hover{ background:#fff; color:#150C2C; }

/* ------------------------------------------------------ Ansprechpartner */
.cv-berater-feld{
  display:flex;
  justify-content:center;
  gap:56px;
}
.cv-berater{ width:260px; text-align:center; flex-shrink:0; }
.cv-berater-bild{
  border-radius:20px;
  overflow:hidden;
  height:320px;
  background:linear-gradient(135deg,#4E9BD4 0%,#2A1B52 100%);
}
.cv-berater-bild img{ width:100%; height:100%; object-fit:cover; display:block; }
.cv-berater-initialen{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:44px;
  font-weight:800;
  color:#fff;
}
.cv-berater-label{
  font-size:12px;
  font-weight:700;
  color:#150C2C;
  opacity:.65;
  margin-top:14px;
  border-top:1px solid rgba(21,12,44,.15);
  padding-top:10px;
  line-height:1.45;
  min-height:4.35em;
}
.cv-berater-name{ font-size:17px; font-weight:800; color:#150C2C; margin-top:4px; }
.cv-berater-cta{
  display:block;
  margin-top:14px;
  background:transparent;
  color:#150C2C;
  border:1.5px solid #150C2C;
  border-radius:999px;
  padding:11px 18px;
  font-size:13px;
  font-weight:700;
  text-align:center;
}

/* Einer allein steht größer */
.cv-berater-feld.ist-einzeln .cv-berater{ width:340px; }
.cv-berater-feld.ist-einzeln .cv-berater-bild{ height:400px; }
.cv-berater-feld.ist-einzeln .cv-berater-name{ font-size:20px; }

/* Ab drei wird geschoben */
.cv-berater-feld.ist-schieber{
  justify-content:flex-start;
  overflow-x:auto;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -ms-overflow-style:none;
  gap:24px;
}
.cv-berater-feld.ist-schieber::-webkit-scrollbar{ display:none; }
.cv-berater-feld.ist-schieber .cv-berater{ width:240px; }
.cv-berater-feld.ist-schieber .cv-berater-bild{ height:280px; }

/* -------------------------------------------------------------- Reiter */
.cv-reiter-spalte{ display:flex; flex-direction:column; }
.cv-reiter{
  cursor:pointer;
  padding:18px 0;
  border-bottom:1px solid rgba(21,12,44,.15);
  font-size:18px;
  font-weight:800;
  color:#150C2C;
  opacity:.4;
  transition:color .2s ease, opacity .2s ease;
}
.cv-reiter.ist-aktiv{ color:#4E9BD4; opacity:1; }
.cv-reiter-text{ display:none; }
.cv-reiter-text.ist-aktiv{ display:block; }

/* ---------------------------------------------------------------- FAQ */
.cv-faq-gruppen{ display:flex; flex-direction:column; gap:2px; margin-top:32px; }
.cv-faq-gruppe{
  cursor:pointer;
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.12);
  font-size:14px;
  font-weight:800;
  color:#fff;
  transition:color .2s ease;
}
.cv-faq-gruppe.ist-aktiv{ color:#4E9BD4; }
.cv-faq-liste{ display:none; flex-direction:column; gap:12px; }
.cv-faq-liste.ist-aktiv{ display:flex; }
.cv-faq{
  background:linear-gradient(90deg,#DCEFFB 0%,#DFF0FC 60%,#E2F1FD 100%);
  border-radius:18px;
  padding:20px 24px;
}
.cv-faq-kopf{
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  gap:16px;
  font-size:16px;
  font-weight:700;
  color:#150C2C;
}
.cv-faq-kopf svg{ flex-shrink:0; }
.cv-faq.ist-offen .cv-faq-kopf svg{ transform:rotate(180deg); }
.cv-faq-text{ display:none; }
.cv-faq.ist-offen .cv-faq-text{ display:block; }
.cv-faq-text > p{
  margin:0;
  padding-top:14px;
  font-size:14px;
  color:#5C5570;
  line-height:1.7;
}

/* ------------------------------------------------------------ Beiträge */
.cv-beitraege{
  display:flex;
  gap:28px;
  overflow-x:auto;
  scroll-behavior:smooth;
  padding-bottom:8px;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.cv-beitraege::-webkit-scrollbar{ display:none; }
.cv-beitrag{
  flex:0 0 360px;
  background:#fff;
  border-radius:24px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.cv-beitrag-bild{ height:200px; }
.cv-beitrag-bild img{ width:100%; height:100%; object-fit:cover; display:block; }
.cv-beitrag-autor{
  width:32px;
  height:32px;
  border-radius:999px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:800;
  color:#fff;
  background:linear-gradient(135deg,#4E9BD4 0%,#2A1B52 100%);
}

/* Lange Komposita dürfen umbrechen */
.cv-auswahl-karte h3,
.cv-reiter,
.cv-faq-kopf span,
.cv-beitrag h3{
  overflow-wrap:break-word;
  hyphens:auto;
}

/* =========================================================================
   Tablet
   ========================================================================= */
@media (max-width:1080px){
  .cv-split{ grid-template-columns:1fr !important; gap:32px !important; }
  .cv-ansprech{ grid-template-columns:1fr !important; gap:40px !important; }
  .cv-reiter-lauf{ grid-template-columns:1fr !important; gap:32px !important; }
  .cv-berater-feld{ gap:28px; }
}

/* =========================================================================
   Handy
   ========================================================================= */
@media (max-width:760px){
  .cv-auswahl{ flex-direction:column; align-items:stretch; }
  .cv-auswahl-karte{ max-width:none; padding:32px 24px; }
  .cv-auswahl.ist-schieber{ flex-direction:row; }
  .cv-auswahl.ist-schieber .cv-auswahl-karte{ flex:0 0 280px; width:280px; }
  .cv-berater-feld{ flex-wrap:wrap; gap:20px; }
  .cv-berater,
  .cv-berater-feld.ist-einzeln .cv-berater,
  .cv-berater-feld.ist-schieber .cv-berater{ width:100%; max-width:320px; margin:0 auto; }
  .cv-berater-feld.ist-schieber{ flex-wrap:nowrap; }
  .cv-berater-feld.ist-schieber .cv-berater{ width:240px; }
  .cv-beitrag{ flex-basis:280px; }
  .cv-faq-kopf{ font-size:15px; }
}

/* ------------------------------------------------------------ Presseseite */

.cv-kit {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.cv-kit-karte {
  background: #fff;
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cv-kit-bild {
  background: #EAF6FF;
  border-radius: 14px;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cv-kit-bild img { max-width: 82%; max-height: 82%; object-fit: contain; }
.cv-kit-karte:first-child .cv-kit-bild img { max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: cover; }
.cv-kit-titel { font-size: 17px; font-weight: 800; color: #150C2C; margin-top: 18px; }
.cv-kit-sub { font-size: 13px; line-height: 1.6; color: #5B5470; margin-top: 6px; flex: 1; }
.cv-kit-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  background: #150C2C;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 700;
}
.cv-kit-cta:hover { background: #0E7AB8; }

.cv-jahre { margin-top: 48px; display: flex; flex-direction: column; gap: 40px; }
.cv-jahr { display: grid; grid-template-columns: 140px 1fr; gap: 32px; align-items: start; }
.cv-jahr-marke {
  font-size: 34px;
  font-weight: 800;
  color: #7FC6EC;
  line-height: 1;
  padding-top: 18px;
}
.cv-jahr-liste { display: flex; flex-direction: column; }
.cv-auftritt {
  display: grid;
  grid-template-columns: 150px 1fr auto 24px;
  gap: 20px;
  align-items: center;
  padding: 20px 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  min-width: 0;
}
.cv-jahr-liste .cv-auftritt:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.cv-auftritt:hover { background: rgba(255, 255, 255, 0.05); }
.cv-auftritt-medium { font-size: 13px; font-weight: 800; letter-spacing: 0.04em; color: #7FC6EC; }
.cv-auftritt-titel { font-size: 16px; font-weight: 600; color: #fff; line-height: 1.5; min-width: 0; overflow-wrap: break-word; }
.cv-auftritt-datum { font-size: 14px; color: #C6BEDE; white-space: nowrap; }
.cv-auftritt-pfeil { color: #7FC6EC; }

.cv-presse-form { background: #fff; border-radius: 24px; padding: 32px; }
.cv-presse-kopf { display: flex; align-items: center; gap: 16px; }
.cv-presse-avatar {
  width: 76px;
  height: 76px;
  border-radius: 999px;
  background: linear-gradient(160deg, #7FC6EC, #0E7AB8);
  color: #fff;
  font-weight: 800;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.cv-presse-name { font-size: 18px; font-weight: 800; color: #150C2C; }
.cv-presse-rolle { font-size: 14px; color: #5B5470; margin-top: 2px; }
.cv-presse-mail { font-size: 14px; color: #0E7AB8; font-weight: 700; }
.cv-presse-label { font-size: 13px; font-weight: 800; color: #150C2C; margin-top: 28px; }
.cv-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.cv-chip { position: relative; }
.cv-chip input { position: absolute; opacity: 0; pointer-events: none; }
.cv-chip span {
  display: inline-block;
  background: #EAF6FF;
  color: #150C2C;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.cv-chip input:checked + span { background: #150C2C; color: #fff; }
.cv-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.cv-presse-form label > span { display: block; font-size: 13px; font-weight: 700; color: #150C2C; margin-bottom: 6px; }
.cv-presse-form input,
.cv-presse-form textarea {
  width: 100%;
  background: #F4FAFE;
  border: 1px solid #D3ECFA;
  border-radius: 12px;
  padding: 13px 14px;
  font: inherit;
  font-size: 15px;
  color: #150C2C;
}
.cv-presse-form input:focus,
.cv-presse-form textarea:focus { outline: none; border-color: #0E7AB8; }
.cv-feld-voll { display: block; margin-top: 16px; }
.cv-presse-cta {
  margin-top: 22px;
  background: #150C2C;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 16px 30px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.cv-presse-cta:hover { background: #0E7AB8; }
.cv-presse-hinweis { font-size: 13px; color: #5B5470; margin-top: 14px; }
.cv-presse-danke { font-size: 15px; font-weight: 700; color: #0E7AB8; margin-top: 14px; }

@media (max-width: 1080px) {
  .cv-kit { grid-template-columns: repeat(2, 1fr); }
  .cv-jahr { grid-template-columns: 1fr; gap: 12px; }
  .cv-jahr-marke { padding-top: 0; }
  .cv-auftritt { grid-template-columns: 1fr auto; row-gap: 6px; }
  .cv-auftritt-medium { grid-column: 1 / -1; }
  .cv-auftritt-pfeil { display: none; }
}
@media (max-width: 760px) {
  .cv-kit { grid-template-columns: 1fr; }
  .cv-felder { grid-template-columns: 1fr; }
  .cv-presse-form { padding: 24px 20px; }
  .cv-auftritt { grid-template-columns: 1fr; }
  .cv-auftritt-datum { white-space: normal; }
}
.cv-kit-karte.ist-dunkel .cv-kit-bild { background: #150C2C; }

/* Footer-Spalten laufen auf schmalen Geräten über, deshalb weiter aufbrechen */
@media (max-width: 760px) {
  [style*="grid-template-columns:1.2fr 0.85fr 0.85fr 0.95fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
  }
  [style*="grid-template-columns:1.2fr 0.85fr 0.85fr 0.95fr 1fr"] > * { min-width: 0; }
}
@media (max-width: 520px) {
  [style*="grid-template-columns:1.2fr 0.85fr 0.85fr 0.95fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

.cv-presse-avatar { overflow: hidden; }
.cv-presse-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 1080px) {
  .cv-medien { padding: 64px 32px !important; border-radius: 32px !important; }
}
@media (max-width: 760px) {
  .cv-medien { padding: 48px 22px !important; border-radius: 24px !important; }
}

/* Die Pfeile der Ansprechpartner sitzen über den Personen, rechts bündig */
.cv-berater-spalte { min-width: 0; }
.cv-berater-spalte .cv-pfeile {
  justify-content: flex-end;
  margin: 0 0 20px;
}
@media (max-width: 900px) {
  .cv-berater-spalte .cv-pfeile { justify-content: flex-start; }
}

/* ----------------------------------------------------- Team-Unterseiten */

.tm-reihe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  max-width: 1068px;
  margin: 0 auto;
}
.tm-karte {
  flex: 0 0 340px;
  max-width: 340px;
  background: #fff;
  border-radius: 24px;
  padding: 28px;
  text-align: left;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tm-hinweis {
  margin-top: 14px;
  background: #EAF6FF;
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.6;
  color: #150C2C;
}
.tm-text { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.tm-text p { font-size: 13.5px; line-height: 1.75; color: #5C5570; overflow-wrap: break-word; }

.tm-kanaele {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1068px;
  margin: 36px auto 0;
}
.tm-kanal {
  background: #fff;
  border-radius: 24px;
  padding: 28px;
  display: block;
  min-width: 0;
}
.tm-kanal:hover { background: #F7FBFF; }

@media (max-width: 1080px) {
  .tm-kanaele { grid-template-columns: repeat(2, 1fr); max-width: 704px; }
}
@media (max-width: 760px) {
  .tm-reihe { max-width: 100%; }
  .tm-karte { flex: 1 1 100%; max-width: 420px; padding: 22px; }
  .tm-kanaele { grid-template-columns: 1fr; max-width: 420px; }
  .tm-kanal { padding: 22px; }
}

/* Kontaktzeilen sitzen unten in der Karte, mit Symbol davor */
.tm-kontakte {
  margin-top: auto;
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tm-kontakt {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: #150C2C;
  min-width: 0;
}
.tm-kontakt svg { flex: none; }
.tm-kontakt span { overflow-wrap: anywhere; }
.tm-kontakt:hover span { color: #0E7AB8; }

/* Symbol-Badge der Kanalkarten, helle Fassung der Startseiten-Badges */
.tm-social {
  width: 52px;
  height: 52px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: linear-gradient(180deg, #F5FAFF 0%, #E7F3FD 52%, #DCEEFB 100%);
  border-top: 1px solid #FFFFFF;
  border-bottom: 1px solid rgba(21, 12, 44, .07);
}

/* Ab vier Personen wird die Kartenreihe zum Schieber */
.tm-pfeilzeile {
  max-width: 1068px;
  margin: 0 auto 20px;
  display: flex;
  justify-content: flex-end;
}
.tm-pfeilzeile .cv-pfeile { margin: 0; justify-content: flex-end; }
.tm-reihe.ist-schieber {
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tm-reihe.ist-schieber::-webkit-scrollbar { display: none; }
.tm-reihe.ist-schieber .tm-karte { flex: 0 0 340px; width: 340px; max-width: none; }

@media (max-width: 760px) {
  .tm-pfeilzeile { justify-content: flex-start; }
  .tm-reihe.ist-schieber .tm-karte { flex: 0 0 300px; width: 300px; }
}

/* ------------------------------------------------------ Nachhaltigkeit */

.nh-projekt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.nh-text { min-width: 0; }
.nh-bild {
  height: 380px;
  border-radius: 28px;
  overflow: hidden;
  min-width: 0;
}
.nh-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nh-bild.ist-symbol {
  background: linear-gradient(150deg, #EAF6FF 0%, #D3ECFA 55%, #BFE3F5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.nh-bild.ist-symbol svg { width: 168px; height: 168px; opacity: .85; }

@media (max-width: 900px) {
  .nh-projekt { grid-template-columns: 1fr; gap: 32px; }
  /* Auf schmalen Geräten steht das Bild immer oben, sonst springt die Lesefolge */
  .nh-projekt.ist-gedreht .nh-text { order: 2; }
  .nh-projekt.ist-gedreht .nh-bild { order: 1; }
  .nh-bild { height: 280px; }
  .nh-bild.ist-symbol svg { width: 128px; height: 128px; }
}

/* =========================================================================
   Kopfzeile über dem ersten Abschnitt.
   Ganz oben ist sie durchsichtig und verschmilzt mit dem Hero, beim
   Scrollen legt sich Weiß darunter. Auf Fotos und dunklen Flächen wird
   die Schrift weiß, sonst bleibt sie dunkel.

   Der Zustand hängt am Wurzelelement, nicht an der Kopfzeile selbst:
   die Laufzeit baut den Kopfbereich neu auf und würde eine Klasse dort
   sofort wieder entfernen.
   ========================================================================= */

html { scroll-padding-top: calc(var(--kopf-h, 68px) + 24px); }

.cv-kopf {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  background: transparent !important;
  border-bottom: 1px solid transparent;
  transition: background .28s ease, border-color .28s ease;
  will-change: background;
}
html.kopf-fest .cv-kopf,
html.kopf-offen .cv-kopf {
  background: #fff !important;
  border-bottom-color: rgba(21, 12, 44, .07);
}

/* Der erste Abschnitt läuft unter die Kopfzeile, deshalb bekommt er
   oben so viel Luft, wie die Kopfzeile gerade hoch ist. */
body[data-kopf="hell"] .cv-erster { padding-top: calc(var(--kopf-h, 68px) + 40px) !important; }
body[data-kopf="dunkel"] .cv-erster { padding-top: calc(var(--kopf-h, 68px) + 28px) !important; }

/* Weicher Verlauf auf Fotomotiven, damit Logo und Menü lesbar bleiben.
   Er sitzt auf einer eigenen Fläche, die deutlich tiefer reicht als die
   Kopfzeile, damit unten keine sichtbare Kante entsteht. */
.cv-kopf::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 220px;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .28s ease;
  background: linear-gradient(180deg,
    rgba(21, 12, 44, .58) 0%,
    rgba(21, 12, 44, .40) 22%,
    rgba(21, 12, 44, .20) 46%,
    rgba(21, 12, 44, .07) 72%,
    rgba(21, 12, 44, 0) 100%);
}
html:not(.kopf-fest):not(.kopf-offen) body[data-kopf="foto"] .cv-kopf::before { opacity: 1; }

/* Helle Schrift, solange die Kopfzeile auf Bild oder dunkler Fläche liegt */
html:not(.kopf-fest):not(.kopf-offen) body[data-kopf="foto"] .cv-kopf header a,
html:not(.kopf-fest):not(.kopf-offen) body[data-kopf="foto"] .cv-kopf header nav > div,
html:not(.kopf-fest):not(.kopf-offen) body[data-kopf="dunkel"] .cv-kopf header a,
html:not(.kopf-fest):not(.kopf-offen) body[data-kopf="dunkel"] .cv-kopf header nav > div {
  color: #fff !important;
}
html:not(.kopf-fest):not(.kopf-offen) body[data-kopf="foto"] .cv-kopf header nav > div:hover,
html:not(.kopf-fest):not(.kopf-offen) body[data-kopf="foto"] .cv-kopf header nav > a:hover,
html:not(.kopf-fest):not(.kopf-offen) body[data-kopf="dunkel"] .cv-kopf header nav > div:hover,
html:not(.kopf-fest):not(.kopf-offen) body[data-kopf="dunkel"] .cv-kopf header nav > a:hover {
  background: rgba(255, 255, 255, .18) !important;
  color: #fff !important;
}
html:not(.kopf-fest):not(.kopf-offen) body[data-kopf="foto"] .cv-kopf header > a img,
html:not(.kopf-fest):not(.kopf-offen) body[data-kopf="dunkel"] .cv-kopf header > a img {
  filter: brightness(0) invert(1);
}
html:not(.kopf-fest):not(.kopf-offen) body[data-kopf="foto"] .cv-kopf header :is([style*="background:#BFE3F5"], .kopfsuche),
html:not(.kopf-fest):not(.kopf-offen) body[data-kopf="dunkel"] .cv-kopf header :is([style*="background:#BFE3F5"], .kopfsuche) {
  background: rgba(255, 255, 255, .18) !important;
}
html:not(.kopf-fest):not(.kopf-offen) body[data-kopf="foto"] .cv-kopf header :is([style*="background:#BFE3F5"], .kopfsuche) span,
html:not(.kopf-fest):not(.kopf-offen) body[data-kopf="dunkel"] .cv-kopf header :is([style*="background:#BFE3F5"], .kopfsuche) span,
html:not(.kopf-fest):not(.kopf-offen) body[data-kopf="foto"] .cv-kopf header .kopfsuche-feld,
html:not(.kopf-fest):not(.kopf-offen) body[data-kopf="dunkel"] .cv-kopf header .kopfsuche-feld {
  color: #fff !important;
}
html:not(.kopf-fest):not(.kopf-offen) body[data-kopf="foto"] .cv-kopf header :is([style*="background:#BFE3F5"], .kopfsuche) svg,
html:not(.kopf-fest):not(.kopf-offen) body[data-kopf="dunkel"] .cv-kopf header :is([style*="background:#BFE3F5"], .kopfsuche) svg {
  stroke: #fff !important;
}

/* Öffnet sich ein Menü, wird die Kopfzeile ohne Überblendung weiß */
html.kopf-offen .cv-kopf,
html.kopf-offen .cv-kopf::before,
html.kopf-offen .cv-kopf > header,
html.kopf-offen .cv-kopf > header * { transition: none !important; }

/* Liegt über dem Foto ein heller Schleier, bleibt die Schrift tintenblau.
   Ein zarter weißer Ansatz oben hält Logo und Menü trotzdem lesbar. */
html:not(.kopf-fest):not(.kopf-offen) body[data-kopf="fotohell"] .cv-kopf::before {
  opacity: 1;
  height: 180px;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, .72) 0%,
    rgba(255, 255, 255, .46) 34%,
    rgba(255, 255, 255, .18) 66%,
    rgba(255, 255, 255, 0) 100%);
}

/* Der Hero der Leistungsseiten stellt seinen Inhalt an die Unterkante.
   Wächst die Überschrift auf schmalen Fenstern, rückte die Bewertungspille
   bis unter die Kopfzeile. Oben bleibt jetzt immer deren Höhe frei. */
[style*="min-height:640px"][style*="align-items:flex-end"][style*="padding:0 32px 64px"] {
  padding-top: calc(var(--kopf-h, 68px) + 104px) !important;
}

/* =========================================================================
   Kontaktformular: gleichbleibende Höhe, breite Kacheln, klare Kopfzeile
   ========================================================================= */

body[data-page="kontakt"] [style*="border-radius:36px"][style*="padding:48px 40px"] {
  display: flex;
  flex-direction: column;
  min-height: 520px;
  padding: 44px 44px 48px !important;
}
/* Die Schrittzeile steht oben, der Inhalt füllt den Rest */
body[data-page="kontakt"] .kf-kopf {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  margin-bottom: 30px !important;
}
body[data-page="kontakt"] .kf-kopf > * { flex: none; }

/* Jeder Schritt füllt die Karte, damit die Höhe nie springt */
body[data-page="kontakt"] dc-branch[data-branch^="is"] > h2 { width: 100%; }
body[data-page="kontakt"] .kf-feld {
  min-height: 260px !important;
  align-content: center;
  width: 100%;
}

/* Kacheln: größer, gleich hoch, volle Breite der Karte */
body[data-page="kontakt"] .kf-feld > dc-for > div,
body[data-page="kontakt"] .kf-feld > div {
  min-height: 132px;
  padding: 22px 24px !important;
  border-radius: 22px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  transition: transform .18s ease, background .18s ease;
}
body[data-page="kontakt"] .kf-feld > dc-for > div:hover,
body[data-page="kontakt"] .kf-feld > div:hover {
  background: #F4FAFF !important;
}
body[data-page="kontakt"] .kf-feld .kf-symbol {
  width: 52px;
  height: 52px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: linear-gradient(180deg, #F5FAFF 0%, #E7F3FD 52%, #DCEEFB 100%);
  border-top: 1px solid #FFFFFF;
  border-bottom: 1px solid rgba(21, 12, 44, .07);
}

@media (max-width: 900px) {
  body[data-page="kontakt"] [style*="border-radius:36px"][style*="padding:48px 40px"] {
    min-height: 0;
    padding: 26px 20px 30px !important;
  }
  body[data-page="kontakt"] .kf-feld { min-height: 0 !important; }
  body[data-page="kontakt"] .kf-feld > dc-for > div,
  body[data-page="kontakt"] .kf-feld > div { min-height: 104px; }
}

/* ------------------------------------------------------- Partnerseiten */

.pa-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.pa-logos img {
  max-height: 56px;
  max-width: 220px;
  width: auto;
  object-fit: contain;
  background: #fff;
  border-radius: 14px;
  padding: 10px 16px;
}
.pa-sprachen { display: flex; justify-content: center; gap: 10px; margin-top: 30px; }
.pa-sprache {
  display: inline-block;
  border-radius: 999px;
  padding: 9px 20px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, .14);
}
.pa-sprache:hover { background: rgba(255, 255, 255, .26); }
.pa-sprache.ist-aktiv { background: #fff; color: #150C2C; }

.pa-raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.pa-karte {
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: transform .18s ease;
}
.pa-karte:hover { background: #F7FBFF; }
.pa-karte-bild { background: #EAF6FF; }
.pa-karte-bild img { width: 100%; height: 180px; object-fit: cover; display: block; }
.pa-karte-inhalt { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.pa-karte-inhalt h3 { font-size: 19px; font-weight: 800; color: #150C2C; line-height: 1.3; }
.pa-karte-inhalt p { font-size: 14px; line-height: 1.7; color: #5C5570; margin-top: 10px; flex: 1; }
.pa-karte-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: 20px;
  background: #150C2C;
  color: #fff;
  border-radius: 999px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 700;
}
.pa-karte:hover .pa-karte-cta { background: #0E7AB8; }

.pa-dateien { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pa-datei {
  background: #fff;
  border-radius: 24px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pa-datei-marke {
  align-self: flex-start;
  background: #EAF6FF;
  color: #0E7AB8;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
}
.pa-datei h3 { font-size: 18px; font-weight: 800; color: #150C2C; line-height: 1.4; margin-top: 16px; flex: 1; }
.pa-datei-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
  background: #150C2C;
  color: #fff;
  border-radius: 999px;
  padding: 13px 20px;
  font-size: 14px;
  font-weight: 700;
}
.pa-datei-cta:hover { background: #0E7AB8; }

@media (max-width: 1080px) {
  .pa-raster, .pa-dateien { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .pa-raster, .pa-dateien { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
}

/* Flaggen in der Sprachwahl */
.pa-sprache { display: inline-flex; align-items: center; gap: 10px; }
.pa-flagge {
  width: 20px;
  height: 14px;
  flex: none;
  display: block;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .45);
}
.pa-sprache.ist-aktiv .pa-flagge { border-color: rgba(21, 12, 44, .18); }
.pa-flagge svg { width: 100%; height: 100%; display: block; }

/* Auf den Partnerseiten steht das Logo ganz oben, deshalb dort mehr Luft
   unter der Kopfzeile als auf den übrigen dunklen Seiten. */
.pa-hero.cv-erster {
  padding-top: calc(var(--kopf-h, 68px) + 150px) !important;
}

/* --- Schwebende Elemente unten rechts --- */
.cv-schwebe{
  position:fixed; right:24px; bottom:24px; z-index:95;
  display:flex; flex-direction:column; align-items:flex-end; gap:14px;
  pointer-events:none;
}
.cv-schwebe > *{ pointer-events:auto; }

/* Runder Knopf zur Kontaktseite */
.cv-schwebe-knopf{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:60px; height:60px; border-radius:999px;
  background:linear-gradient(135deg,#150C2C 0%,#3B2470 100%);
  color:#fff; border:none;
  transition:transform 0.18s ease;
}
.cv-schwebe-knopf:hover{ transform:scale(1.06); }
.cv-schwebe-knopf svg{ position:relative; z-index:1; }
.cv-schwebe-knopf::before{
  content:""; position:absolute; inset:0; border-radius:999px;
  border:2px solid rgba(59,36,112,0.45);
  animation:cv-puls 2.4s ease-out infinite;
}
@keyframes cv-puls{
  0%{ transform:scale(1); opacity:0.9; }
  70%{ transform:scale(1.35); opacity:0; }
  100%{ transform:scale(1.35); opacity:0; }
}
.cv-schwebe-punkt{
  position:absolute; top:2px; right:2px; width:12px; height:12px;
  border-radius:999px; background:#22C55E; border:2px solid #fff; z-index:2;
}

/* Karte mit der Google-Bewertung */
.cv-schwebe-google{
  display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid #E4E0EE; border-radius:16px;
  padding:12px 18px 12px 16px;
  transition:transform 0.18s ease, border-color 0.18s ease;
}
.cv-schwebe-google:hover{ border-color:#C9C1E0; }
.cv-schwebe-g{ display:flex; flex-shrink:0; }
.cv-schwebe-inhalt{ display:flex; flex-direction:column; gap:1px; line-height:1.25; }
.cv-schwebe-sterne{ color:#F5A623; font-size:15px; letter-spacing:2.5px; }
.cv-schwebe-zahl{ font-size:14px; font-weight:600; color:#6B6483; white-space:nowrap; }
.cv-schwebe-zahl b{ color:#150C2C; font-weight:800; }

@media (max-width:640px){
  .cv-schwebe{ right:16px; bottom:16px; gap:10px; }
  .cv-schwebe-knopf{ width:54px; height:54px; }
  .cv-schwebe-knopf svg{ width:25px; height:25px; }
  .cv-schwebe-google{ padding:8px 13px 8px 11px; border-radius:14px; }
  .cv-schwebe-zahl{ font-size:13px; }
}

@media print{ .cv-schwebe{ display:none; } }

/* --- Detailseiten unter den Leistungsseiten --- */
/* Kennzeichen über der Überschrift. Die Werte stammen eins zu eins aus
   dc-tweaks2.css, wo die Pillen des Entwurfs ihre Glasoptik bekommen:
   Verlauf von oben hell nach unten durchsichtig, feine Lichtkante oben,
   dunklere Kante unten, dazu ein leichter Weichzeichner dahinter. */
.cv-marke{
  display:inline-flex; align-items:center;
  font-size:12px; font-weight:700; letter-spacing:0.08em; color:#150C2C;
  background:linear-gradient(180deg,#FFFFFF 0%,#F6FAFE 55%,#EEF5FC 100%);
  border-top:1px solid #FFFFFF;
  border-bottom:1px solid rgba(21,12,44,0.07);
  border-left:none; border-right:none;
  border-radius:999px; padding:9px 20px 8px; margin-bottom:24px;
}
.cv-marke.ist-dunkel{
  color:#fff;
  background:linear-gradient(180deg,
    rgba(255,255,255,0.30) 0%,
    rgba(255,255,255,0.16) 46%,
    rgba(255,255,255,0.06) 100%);
  border-top:1px solid rgba(255,255,255,0.42);
  border-bottom:1px solid rgba(255,255,255,0.10);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}

/* Eckdaten als Liste im Text */
.dt-zahlen{ list-style:none; margin:28px 0 0; padding:0; }
.dt-zahlen li{
  position:relative; padding-left:22px; font-size:15px; color:#150C2C;
  line-height:1.65; margin-top:12px;
}
.dt-zahlen li::before{
  content:""; position:absolute; left:0; top:9px;
  width:8px; height:8px; border-radius:999px; background:#4E9BD4;
}
.dt-zahlen b{ font-weight:800; }

/* Kopfzeile mit Pfeilen rechts oben */
.dt-kopfzeile{ display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.dt-kopfzeile .cv-pfeile{ margin:0 0 4px; }
.dt-tabelle-titel{ font-size:14px; font-weight:800; color:#150C2C; }

/* Leistungen als waagerechter Schieber, ohne Rahmen */
.dt-karten{
  display:flex; gap:24px; margin-top:44px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none;
  padding-bottom:4px;
}
.dt-karten::-webkit-scrollbar{ display:none; }
.dt-karte{
  flex:0 0 320px; scroll-snap-align:start;
  background:#fff; border:none; border-radius:24px; padding:30px 28px;
}
.dt-karte-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:999px;
  background:rgba(78,155,212,0.12);
}
.dt-karte h3{ font-size:18px; font-weight:800; color:#150C2C; line-height:1.3; margin-top:18px; }
.dt-karte p{ font-size:14px; color:#5C5570; line-height:1.65; margin-top:10px; }

/* Dunkler Block mit den Grenzen, rundum abgerundet */
.dt-dunkel{
  position:relative; max-width:1320px; margin:0 auto;
  background:#150C2C; border-radius:36px; padding:72px 64px;
}
.dt-dunkel::before, .dt-dunkel::after{ content:""; position:absolute; inset:0; border-radius:36px; z-index:0; }
.dt-dunkel::before{ background:url("../img/abschnitt-dunkel.webp") center/cover no-repeat; opacity:0.7; }
.dt-dunkel::after{ background:linear-gradient(130deg,rgba(21,12,44,0.86) 0%,rgba(36,21,70,0.7) 55%,rgba(21,12,44,0.8) 100%); }
.dt-dunkel > *{ position:relative; z-index:2; }
.dt-dunkel .cv-split{ align-items:start; }
.dt-dunkel-text{ position:sticky; top:140px; }

/* Die Punkte stapeln sich beim Scrollen übereinander */
.dt-grenzen{ display:block; padding-bottom:40px; }
.dt-grenze{
  display:flex; gap:18px; position:sticky;
  background:rgba(255,255,255,0.07);
  -webkit-backdrop-filter:blur(22px) saturate(140%); backdrop-filter:blur(22px) saturate(140%);
  border:none;
  border-radius:22px; padding:26px 28px; margin-bottom:20px;
}
.dt-grenze:nth-child(1){ top:120px; }
.dt-grenze:nth-child(2){ top:136px; }
.dt-grenze:nth-child(3){ top:152px; }
.dt-grenze:nth-child(4){ top:168px; }
.dt-grenze:nth-child(5){ top:184px; }
.dt-grenze:nth-child(6){ top:200px; }
.dt-grenze:nth-child(7){ top:216px; }
.dt-grenze:last-child{ margin-bottom:0; }
.dt-grenze-icon{
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:42px; height:42px; border-radius:999px;
  background:rgba(255,255,255,0.14); color:#BFE3F5;
}
.dt-grenze h3{ font-size:17px; font-weight:800; color:#fff; line-height:1.3; }
.dt-grenze p{ font-size:14px; color:#C6BEDE; line-height:1.65; margin-top:8px; }

/* Kosten: Text links, Übersicht rechts bis an die Kante des Abschnitts */
.dt-kosten h2{ overflow-wrap:break-word; hyphens:auto; }
.dt-kosten{
  max-width:1320px; margin:0 auto;
  display:grid; grid-template-columns:minmax(0,0.78fr) minmax(0,1.22fr); gap:56px; align-items:stretch;
}
.dt-kosten-tabelle{ display:flex; min-width:0; }
.dt-tab-karte{
  display:flex; flex-direction:column; flex:1; min-width:0;
  background:#fff; border:none; border-radius:24px; overflow:hidden;
}
.dt-tab-kopf{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:22px 28px 18px;
}
.dt-tab-kopf .cv-pfeile{ margin:0; }
.dt-tab-lauf{
  flex:1; min-width:0; overflow-x:auto;
  scrollbar-width:none; -ms-overflow-style:none;
}
.dt-tab-lauf::-webkit-scrollbar{ display:none; }
/* Weicher Auslauf an den Kanten, solange die Übersicht breiter ist als ihr Feld */
.dt-tab-lauf.ist-ueberlauf{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 72px,#000 calc(100% - 96px),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 72px,#000 calc(100% - 96px),transparent 100%);
}
.dt-tab-lauf.ist-ueberlauf.ist-anfang{
  -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 96px),transparent 100%);
  mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 96px),transparent 100%);
}
.dt-tab-lauf.ist-ueberlauf.ist-ende{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 72px,#000 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 72px,#000 100%);
}
.dt-tab{ display:grid; align-content:start; }
.dt-zelle{
  padding:16px 24px; font-size:14px; color:#150C2C;
  border-bottom:1px solid #EDF5FB; white-space:nowrap;
  display:flex; align-items:center;
}
.dt-zelle.ist-erste{ font-weight:800; padding-left:28px; }
.dt-zelle.ist-letzte{ padding-right:32px; }
.dt-zelle.ist-kopf{
  font-size:11px; font-weight:800; letter-spacing:0.07em; color:#4E9BD4;
  background:#F5FAFE; padding-top:14px; padding-bottom:14px;
}
.dt-hinweis{ font-size:13px; color:#5C5570; line-height:1.6; margin-top:22px; }

/* Banner mit Bild, das oben ansetzt und unten abgeschnitten wird */
.dt-banner{
  position:relative; max-width:1320px; margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; align-items:stretch;
  background:linear-gradient(135deg,#150C2C 0%,#2A1B52 100%);
  border-radius:36px; overflow:hidden;
}
.dt-banner:not(.ist-hell)::before{ content:""; position:absolute; inset:0; z-index:0; background:url("../img/abschnitt-dunkel.webp") center/cover no-repeat; opacity:0.5; }
.dt-banner:not(.ist-hell)::after{ content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(120deg,rgba(21,12,44,0.9) 0%,rgba(42,27,82,0.66) 100%); }
.dt-banner > *{ position:relative; z-index:2; }
.dt-banner.ist-hell{ background:linear-gradient(135deg,#DCEEFA 0%,#BFE3F5 100%); }
.dt-banner-text{ padding:64px 8px 64px 64px; }
.dt-banner-text h2{ font-size:34px; font-weight:800; line-height:1.2; color:#fff; }
.dt-banner-text p{ font-size:16px; line-height:1.7; color:#C6BEDE; margin-top:16px; }
.dt-banner.ist-hell .dt-banner-text h2{ color:#150C2C; }
.dt-banner.ist-hell .dt-banner-text p{ color:#150C2C; }

.dt-banner-bild{ position:relative; overflow:hidden; min-height:520px; }
.dt-banner-bild img{
  position:absolute; top:40px; left:50%; transform:translateX(-50%);
  height:150%; width:auto; max-width:none; display:block;
}
.dt-banner-bild.ist-mittig{
  display:flex; align-items:center; justify-content:center;
  padding:48px 16px 48px 64px; min-height:640px; overflow:visible;
}

/* Sechs Vertragsblätter, drei liegen hinten und klappen beim Scrollen auf */
.dt-stapel{ --auf:0; position:relative; width:100%; max-width:520px; margin-left:auto; aspect-ratio:1 / 1.0; }
.dt-blatt{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  will-change:transform;
}
.dt-blatt-inhalt{ position:relative; width:52%; }
.dt-blatt .dt-blatt-inhalt > img{ position:static; width:100%; height:auto; display:block; max-width:none; transform:none; }
.dt-blatt .dt-blatt-inhalt > img.dt-blatt-logo{
  position:absolute; left:13%; top:8%; width:20%; height:auto;
  opacity:0.85; max-width:none; transform:none; display:block;
}

.dt-blatt-1{ opacity:var(--auf); z-index:1;
  transform:rotate(calc(var(--auf) * -19deg)) translate(calc(var(--auf) * -23%), calc(var(--auf) * 6%)); }
.dt-blatt-2{ opacity:var(--auf); z-index:1;
  transform:rotate(calc(var(--auf) * -13deg)) translate(calc(var(--auf) * -16%), calc(var(--auf) * 4%)); }
.dt-blatt-3{ opacity:var(--auf); z-index:1;
  transform:rotate(calc(var(--auf) * 11deg)) translate(calc(var(--auf) * 16%), calc(var(--auf) * 5%)); }
.dt-blatt-4{ z-index:2;
  transform:rotate(calc(-8deg + var(--auf) * -3deg)) translate(calc(-11% + var(--auf) * -4%), 2%); }
.dt-blatt-5{ z-index:3;
  transform:rotate(calc(-4deg + var(--auf) * -2deg)) translate(calc(-5% + var(--auf) * -2%), 1%); }
.dt-blatt-6{ z-index:4;
  transform:rotate(calc(2deg + var(--auf) * 2deg)) translate(calc(var(--auf) * 3%), 0); }

.dt-verlauf{ list-style:none; margin:28px 0 0; padding:0; }
.dt-verlauf li{ display:flex; gap:16px; padding:12px 0; border-top:1px solid rgba(255,255,255,0.12); }
.dt-verlauf li:first-child{ border-top:none; }
.dt-verlauf b{ flex:0 0 96px; font-size:14px; font-weight:800; color:#9FD3F2; }
.dt-verlauf span{ font-size:14px; color:#C6BEDE; line-height:1.6; }

/* Punkteliste läuft nach unten weich aus, bis der Nutzer sie aufklappt */
.dt-punkte{
  list-style:none; margin:26px 0 0; padding:0;
  max-height:340px; overflow:hidden;
  transition:max-height 0.7s cubic-bezier(0.2,0.8,0.2,1);
  -webkit-mask-image:linear-gradient(to bottom,#000 62%,rgba(0,0,0,0.35) 84%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 62%,rgba(0,0,0,0.35) 84%,transparent 100%);
}
.dt-punkte.ist-offen{
  max-height:1600px;
  -webkit-mask-image:none; mask-image:none;
}
.dt-punkte li{ padding:14px 0; border-top:1px solid rgba(21,12,44,0.12); }
.dt-punkte li:first-child{ border-top:none; padding-top:0; }
.dt-punkte b{ display:block; font-size:16px; font-weight:800; color:#150C2C; line-height:1.3; }
.dt-punkte span{ display:block; font-size:14px; color:#3F3757; line-height:1.6; margin-top:6px; }

/* Alle Knöpfe einer Reihe tragen dieselbe Höhe */
.dt-knopfreihe{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:28px; }
.dt-mehr, .dt-banner-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:56px; padding:0 30px; border:none; border-radius:999px;
  font-size:15px; font-weight:700; font-family:inherit; cursor:pointer;
  line-height:1; white-space:nowrap; transition:background 0.2s ease;
}
.dt-mehr{ background:rgba(255,255,255,0.75); color:#2E6F9E; }
.dt-mehr:hover{ background:#fff; }
.dt-banner-cta{ background:#fff; color:#150C2C; }
.dt-banner.ist-hell .dt-banner-cta{ background:#150C2C; color:#fff; }

@media (max-width:1100px){
  .dt-dunkel{ padding:56px 40px; border-radius:28px; }
  .dt-dunkel-text{ position:static; }
  .dt-banner{ grid-template-columns:1fr; border-radius:28px; }
  .dt-banner-text{ padding:48px 40px 32px; }
  .dt-banner-bild{ min-height:420px; }
  .dt-banner-bild.ist-mittig{ padding:0 40px 56px; }
  .dt-stapel{ max-width:460px; margin:0 auto; }
  .dt-kosten{ grid-template-columns:1fr; gap:36px; }
}
@media (max-width:820px){
  .dt-karte{ flex-basis:270px; }
  .dt-dunkel{ padding:44px 24px; }
  .dt-grenze{ position:static; margin-bottom:14px; }
  .dt-banner-text{ padding:40px 24px 28px; }
  .dt-banner-text h2{ font-size:28px; }
  .dt-banner-bild{ min-height:340px; }
  .dt-stapel{ max-width:340px; }
  .dt-verlauf li{ flex-direction:column; gap:4px; }
  .dt-verlauf b{ flex-basis:auto; }
}

/* --- Rechnerseiten und Rechnerknöpfe --- */
.rn-block{ max-width:1320px; margin:0 auto; }
.rn-kopf{ max-width:720px; }
.rn-kopf h2{ font-size:36px; color:#150C2C; font-weight:800; line-height:1.2; }
.rn-kopf p{ font-size:16px; color:#150C2C; line-height:1.7; margin-top:14px; }
.rn-karten{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:40px; }
.rn-karte{
  display:flex; align-items:center; gap:16px;
  background:#fff; border:none; border-radius:20px; padding:22px 24px;
  transition:transform 0.18s ease, background 0.18s ease;
}
.rn-karte:hover{ background:#F7FBFF; }
.rn-karte-icon{
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:44px; height:44px; border-radius:999px; background:rgba(78,155,212,0.12);
}
.rn-karte-text{ flex:1; font-size:15px; font-weight:800; color:#150C2C; line-height:1.35; }
.rn-karte-pfeil{ display:inline-flex; color:#4E9BD4; flex-shrink:0; }

/* Bühne für den Rechner des Anbieters */
.rn-buehne{
  position:relative; z-index:2;
  max-width:1120px; margin:0 auto;
  background:#fff; border:none; border-radius:28px; padding:16px;
  overflow:hidden;
}
.rn-feld{ display:block; width:100%; border:none; min-height:900px; }
iframe.rn-feld{ border:0; }
#covomo-iframe{ width:100%; border:none; min-height:900px; }
#bay_widget iframe{ width:100%; border:none; min-height:900px; }

.rn-fuss{
  max-width:1120px; margin:28px auto 0;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.rn-zurueck{ font-size:14px; font-weight:700; color:#4E9BD4; }
.rn-hilfe{
  display:inline-flex; align-items:center; gap:10px;
  background:#150C2C; color:#fff; border:none; border-radius:999px;
  height:52px; padding:0 28px; font-size:15px; font-weight:700;
}

@media (max-width:1100px){
  .rn-karten{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  .rn-karten{ grid-template-columns:1fr; }
  .rn-buehne{ padding:8px; border-radius:20px; }
  .rn-kopf h2{ font-size:28px; }
}

/* --- Menü für kleine Bildschirme --- */
/* Der Knopf erscheint erst, wenn die Leiste zu eng wird */
.cv-burger{
  display:none; align-items:center; justify-content:center;
  width:46px; height:46px; flex-shrink:0;
  background:#EAF6FF; border:none; border-radius:16px; cursor:pointer;
  padding:0; margin-left:auto;
  transition:background 0.18s ease;
}
.cv-burger:hover{ background:#DCEEFA; }
.cv-burger-striche{ display:block; width:20px; height:14px; position:relative; }
.cv-burger-striche span{
  position:absolute; left:0; width:100%; height:2px; border-radius:2px;
  background:#150C2C;
  transition:transform 0.28s cubic-bezier(0.2,0.8,0.2,1), opacity 0.2s ease, top 0.2s ease;
}
.cv-burger-striche span:nth-child(1){ top:0; }
.cv-burger-striche span:nth-child(2){ top:6px; }
.cv-burger-striche span:nth-child(3){ top:12px; }
html.menue-offen .cv-burger-striche span:nth-child(1){ top:6px; transform:rotate(45deg); }
html.menue-offen .cv-burger-striche span:nth-child(2){ opacity:0; }
html.menue-offen .cv-burger-striche span:nth-child(3){ top:6px; transform:rotate(-45deg); }

/* Die Fläche nimmt den ganzen Bildschirm ein */
.cv-mobil{
  position:fixed; inset:0; z-index:99;
  display:none;
}
.cv-mobil[hidden]{ display:none; }
html.menue-offen{ overflow:hidden; }
html.menue-offen .cv-mobil{ display:block; }
html.menue-offen .cv-kopf{ background:#fff !important; }
.cv-mobil-flaeche{
  position:absolute; inset:0;
  background:#fff;
  padding-top:var(--kopf-h, 72px);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  opacity:0; transform:translateY(-10px);
  animation:mn-auf 0.32s cubic-bezier(0.2,0.8,0.2,1) forwards;
}
@keyframes mn-auf{ to{ opacity:1; transform:translateY(0); } }
.cv-mobil-inhalt{
  display:flex; flex-direction:column; min-height:100%;
  padding:12px 24px 32px;
}

/* Gruppen klappen auf */
.mn-gruppen{ display:block; }
.mn-gruppe + .mn-gruppe{ border-top:1px solid #E8F2FA; }
.mn-kopf{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  width:100%; background:none; border:none; cursor:pointer;
  padding:20px 4px; font-family:inherit;
  font-size:22px; font-weight:800; color:#150C2C; text-align:left;
}
.mn-kopf .mn-pfeil{ flex-shrink:0; color:#4E9BD4; transition:transform 0.28s cubic-bezier(0.2,0.8,0.2,1); }
.mn-gruppe.ist-offen .mn-kopf .mn-pfeil{ transform:rotate(180deg); }
.mn-liste{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows 0.36s cubic-bezier(0.2,0.8,0.2,1);
}
.mn-gruppe.ist-offen .mn-liste{ grid-template-rows:1fr; }
.mn-liste-inhalt{ overflow:hidden; min-height:0; padding-bottom:4px; }
.mn-punkt{
  display:block; padding:13px 16px; border-radius:16px;
  background:#F5FAFE; margin-bottom:8px;
  transition:background 0.18s ease;
}
.mn-punkt:active{ background:#E4F1FC; }
.mn-punkt.ist-alle{ background:#EAF6FF; }
.mn-punkt-titel{ display:block; font-size:16px; font-weight:800; color:#150C2C; line-height:1.3; }
.mn-punkt-teaser{ display:block; font-size:13px; color:#5C5570; line-height:1.5; margin-top:3px; }

/* Fuß mit Aufruf, Telefon und Rechtlichem */
.mn-fuss{ margin-top:auto; padding-top:28px; }
.mn-cta{
  display:flex; align-items:center; justify-content:center;
  height:56px; border-radius:999px; border:none;
  background:#150C2C; color:#fff; font-size:16px; font-weight:700;
}
.mn-tel{
  display:flex; align-items:center; justify-content:center; gap:10px;
  height:52px; margin-top:12px; border-radius:999px; border:none;
  background:#EAF6FF; color:#150C2C; font-size:15px; font-weight:700;
}
.mn-recht{ display:flex; flex-wrap:wrap; gap:18px; justify-content:center; margin-top:24px; }
.mn-recht a{ font-size:13px; font-weight:600; color:#5C5570; }

/* Ab hier übernimmt der Knopf die Führung */
@media (max-width:1080px){
  .cv-burger{ display:flex; }
  .cv-kopf header > nav{ display:none !important; }
  .cv-kopf header > div:last-of-type{ display:none !important; }
  .cv-kopf header{ gap:12px !important; padding:16px 20px !important; }
}
@media (min-width:1081px){
  .cv-mobil{ display:none !important; }
}
@media (max-width:520px){
  .cv-mobil-inhalt{ padding:8px 18px 28px; }
  .mn-kopf{ font-size:20px; padding:18px 2px; }
}

/* --- Rechnerknöpfe im Reiter --- */
.tr-rechner{ margin-top:30px; }
.tr-rechner-titel{
  display:block; font-size:12px; font-weight:800; letter-spacing:0.08em;
  color:#4E9BD4; text-transform:uppercase; margin-bottom:14px;
}
.tr-rechner-reihe{ display:flex; flex-wrap:wrap; gap:12px; }
.tr-rechner-knopf{
  display:inline-flex; align-items:center; gap:12px;
  background:#fff; border:none; border-radius:999px;
  height:56px; padding:0 24px 0 10px;
  font-size:14px; font-weight:800; color:#150C2C;
  transition:transform 0.18s ease, background 0.18s ease;
}
.tr-rechner-knopf:hover{ background:#F7FBFF; }
.tr-rechner-icon{
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:36px; height:36px; border-radius:999px; background:rgba(78,155,212,0.12);
}
.tr-rechner-wort{ line-height:1.3; }
.tr-rechner-pfeil{ display:inline-flex; color:#4E9BD4; flex-shrink:0; }

@media (max-width:760px){
  .tr-rechner-knopf{ width:100%; }
  .tr-rechner-pfeil{ margin-left:auto; }
}

/* --- Umbrüche auf kleinen Bildschirmen --- */
/* Überschriften und Knopftexte verteilen ihre Zeilen gleichmäßig, damit in der
   letzten Zeile kein einzelnes Wort stehen bleibt. Nur bis Tabletbreite. */
@media (max-width:1080px){
  h1, h2, h3,
  .cv-auswahl-karte, .cv-berater-label, .dt-punkt-kopf,
  .rn-karte-text, .tr-rechner-wort, .mn-punkt-titel{
    text-wrap:balance;
  }
  .cv-cta, .dt-banner-cta, .cv-berater-cta, .rn-hilfe, .mn-cta, .dt-mehr,
  a[style*="border-radius:999px"], button[style*="border-radius:999px"]{
    text-wrap:balance;
  }
  /* Lange Fachwörter dürfen trennen, statt die Zeile zu sprengen */
  p, li, .dt-zelle, .cv-faq-kopf{ overflow-wrap:break-word; }
}

/* --- Feinschliff für kleine Bildschirme --- */
/* Auf schmalen Geräten belegte das Google-Feld über die Hälfte der Breite.
   Dort entfällt das Wort "Bewertungen", die Zahl bleibt lesbar. */
@media (max-width:520px){
  .cv-schwebe-lang{ display:none; }
}

/* Die Links im Fuß waren nur 16 Pixel hoch und damit schwer zu treffen.
   Die zusätzliche Höhe kommt aus Innenabstand, der Abstand der Spalten
   wird im Gegenzug aufgehoben, damit der Fuß nicht auseinanderläuft. */
@media (max-width:1080px){
  footer a[style*="font-size:13px"]{
    display:block;
    padding:9px 0;
  }
  footer div[style*="flex-direction:column"][style*="gap:12px"]{
    gap:0 !important;
  }
}

/* Lange Komposita wie "Auslandskrankenversicherung" wurden so getrennt, dass
   nur zwei Buchstaben in der zweiten Zeile standen. Mindestens fünf Zeichen
   vor und nach der Trennstelle, sonst bleibt das Wort zusammen. */
@media (max-width:1080px){
  h1, h2, h3, h4,
  .cv-reiter, .cv-auswahl-karte, .dt-punkt-kopf, .rn-karte-text,
  .mn-punkt-titel, .cv-berater-label{
    hyphenate-limit-chars:12 5 5;
  }
}

/* --- Termin buchen in der Kopfzeile, rechts neben der Suche --- */
.cv-kopf-termin{
  display:inline-flex; align-items:center; justify-content:center;
  background:#150C2C; color:#fff; border-radius:999px;
  padding:11px 22px; font-size:14px; font-weight:700; white-space:nowrap;
  transition:background 0.15s;
}
.cv-kopf-termin:hover{ background:#2A1B52; color:#fff; }
@media (max-width:1180px){ .cv-kopf-termin{ display:none; } }

/* --- Kontakt: der Schrittbereich soll nicht mitwachsen ---
   Die alte Regel hing an .kf-feld, diese Klasse steht nicht mehr im Markup.
   Der Bereich hängt am eigenen Mindestmaß und nimmt sich nicht die
   Resthöhe der Karte, sonst klafft unter dem ersten Schritt eine Lücke. */
body[data-page="kontakt"] [style*="min-height:280px"]{
  min-height:200px !important;
  flex:0 0 auto !important;
  align-content:start;
}
/* Die Fortschrittsleiste sitzt unten an der Karte */
body[data-page="kontakt"] [style*="border-radius:36px"] > div[style*="display:flex;gap:6px"]{
  margin-top:auto !important;
  padding-top:28px;
}
/* Im ersten Schritt stehen nur zwei Kacheln, die dürfen höher sein */
body[data-page="kontakt"] [style*="min-height:280px"][style*="gap:20px"] > div{
  min-height:260px;
}

/* =========================================================================
   Überschrift im Kopfbereich
   Ab Tablet aufwärts steht die H1 eine Stufe größer. Unterhalb von 900
   Pixeln gilt weiter die Staffelung aus dc-responsive.css.
   ========================================================================= */
@media (min-width:901px){
  h1[style*="font-size:56px"]{ font-size:clamp(56px,5.4vw,68px) !important; }
  h1[style*="font-size:64px"]{ font-size:clamp(64px,6.2vw,80px) !important; }
}

/* Das Foto im App-Abschnitt sitzt weiter oben auf der Kante der dunklen
   Fläche. Unterhalb von 1081 Pixeln hebt dc-responsive.css die
   Überlappung auf, dort bleibt es wie gehabt. */
@media (min-width:1081px){
  [style*="margin-top:-170px"][style*="height:480px"]{ margin-top:-205px !important; }
}

/* =========================================================================
   Überschrift im Kopfbereich erscheint Wort für Wort
   Die Wörter stehen schon im Markup, die Bewegung startet mit dem ersten
   Bild. Der Platz ist von Anfang an reserviert, deshalb rutscht nichts.
   ========================================================================= */
.cv-wort{
  display:inline-block;
  opacity:0;
  transform:translateY(0.28em);
  animation:cv-wort-auf .45s cubic-bezier(.2,.7,.3,1) both;
  will-change:opacity, transform;
}
@keyframes cv-wort-auf{
  to{ opacity:1; transform:none; }
}
/* Wer Bewegung abbestellt hat, sieht die Zeile sofort */
@media (prefers-reduced-motion:reduce){
  .cv-wort{ animation:none; opacity:1; transform:none; }
}

/* =========================================================================
   Cyber-Check
   ========================================================================= */
.cv-cyber-cta{
  display:inline-block; margin-top:28px;
  background:#150C2C; color:#fff; border:none; border-radius:999px;
  padding:16px 30px; font-size:15px; font-weight:700;
  transition:background .15s;
}
.cv-cyber-cta:hover{ background:#2A1B52; color:#fff; }

.cv-cyber-kacheln{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px;
  /* Die Kacheln hängen über die Kante des Abschnitts in die Fläche darunter */
  margin-bottom:-176px;
}
.cv-cyber-kachel{
  background:linear-gradient(150deg,#D7EAF9 0%,#EAF6FF 60%,#F4FAFF 100%);
  border-radius:24px; padding:30px 28px;
}
.cv-cyber-zeichen{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:999px; background:rgba(255,255,255,.75);
}
.cv-cyber-kachel-titel{ font-size:19px; font-weight:800; color:#150C2C; margin-top:18px; }
.cv-cyber-kachel-text{ font-size:14px; color:#3E3752; line-height:1.6; margin-top:8px; }

.cv-cyber-feldung{
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:0;
  background:linear-gradient(135deg,#150C2C 0%,#2A1B52 100%);
  border-radius:32px; overflow:hidden;
}
.cv-cyber-bild{ position:relative; min-height:100%; }
.cv-cyber-bild img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 12%; display:block;
}
.cv-cyber-name{
  position:absolute; left:50%; transform:translateX(-50%); bottom:22px;
  background:#fff; color:#150C2C; border-radius:999px;
  padding:9px 20px; font-size:13px; font-weight:700; white-space:nowrap;
}
.cv-cyber-form{ padding:48px 44px; }
.cv-cyber-form form{ display:flex; flex-direction:column; gap:16px; margin-top:28px; }
.cv-cyber-feld{ display:flex; flex-direction:column; gap:7px; }
.cv-cyber-feld > span{ font-size:13px; font-weight:700; color:#C6BEDE; }
.cv-cyber-feld input{
  width:100%; background:rgba(255,255,255,.1); border:none; border-radius:14px;
  padding:14px 18px; font-size:15px; color:#fff; outline:none;
  font-family:inherit;
}
.cv-cyber-feld input::placeholder{ color:rgba(255,255,255,.45); }
.cv-cyber-feld input:focus{ background:rgba(255,255,255,.16); }
.cv-cyber-haken{ display:flex; gap:12px; align-items:flex-start; margin-top:6px; }
.cv-cyber-haken input{ margin-top:3px; width:18px; height:18px; flex-shrink:0; accent-color:#4E9BD4; }
.cv-cyber-haken span{ font-size:13px; color:#C6BEDE; line-height:1.6; }
.cv-cyber-haken a{ color:#8FC7EA; text-decoration:underline; }
.cv-cyber-senden{
  align-self:flex-start; margin-top:8px;
  background:linear-gradient(135deg,#7FB6E4 0%,#4E9BD4 100%);
  color:#150C2C; border:none; border-radius:999px;
  padding:15px 32px; font-size:15px; font-weight:700; cursor:pointer;
  font-family:inherit; transition:filter .15s;
}
.cv-cyber-senden:hover{ filter:brightness(1.06); }
.cv-cyber-pflicht{ font-size:12px; color:#8B84A3; margin-top:4px; }

@media (max-width:1080px){
  .cv-cyber-oben{ grid-template-columns:minmax(0,1fr) !important; gap:36px !important; }
  .cv-cyber-kacheln{ grid-template-columns:minmax(0,1fr); margin-bottom:-156px !important; }
  .cv-cyber-feldung{ grid-template-columns:minmax(0,1fr); }
  .cv-cyber-bild{ height:320px; min-height:0; }
  .cv-cyber-form{ padding:36px 24px; }
  .cv-cyber-senden{ align-self:stretch; text-align:center; }
}

/* Stellenkachel: die Fläche öffnet die Ausschreibung */
.jobs-stelle-knopf{ position:relative; z-index:2; }
.jobs-stelle-bewerben{
  display:inline-block; margin:22px 0 0 18px; color:#150C2C;
  font-size:13px; font-weight:700; text-decoration:underline;
}
.jobs-stelle:hover{ background:#E1F0FC; }

@media (max-width:1080px){
  .cv-cyber-anfrage{ padding-top:150px !important; }
}

/* -------------------------------------------------------------------------
   Handlungsaufruf als Banner. Einzige Quelle für den Blog im Theme und
   für die statischen Seiten, dc.css liegt auf beiden Seiten.
   ------------------------------------------------------------------------- */
/* ------------------------------------------- Handlungsaufruf im Beitrag */
.cv-cta-banner{
  display:grid;
  grid-template-columns:1fr 340px;
  gap:0;
  align-items:stretch;
  background:linear-gradient(135deg,#150C2C 0%,#241544 100%);
  border-radius:28px;
  overflow:hidden;
  margin:56px 0 48px;
}
.cv-cta-text{ padding:38px 36px; display:flex; flex-direction:column; }
/* Das Schild bleibt oben, alles darunter steht mittig in der Spalte */
.cv-cta-mitte{ margin:auto 0; }
.cv-cta-google{
  display:inline-flex; align-items:center; gap:10px; align-self:flex-start;
  background:linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.02));
  backdrop-filter:blur(14px) saturate(110%);
  -webkit-backdrop-filter:blur(14px) saturate(110%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
  border-radius:999px; padding:8px 18px 8px 14px;
}
.cv-cta-g{ display:flex; }
.cv-cta-wert{ font-size:12.5px; color:#EDEAF7; letter-spacing:.01em; }
.cv-cta-wert b{ font-weight:700; color:#fff; }
.cv-cta-titel{
  margin-top:26px;
  font-family:"Sora",sans-serif;
  font-size:28px; line-height:1.2; color:#fff; font-weight:700; letter-spacing:-.6px;
}
.cv-cta-titel span{ color:#7FB6E4; }

/* Die Liste beginnt an derselben Kante wie die Überschrift */
.cv-cta-punkte, .cv-artikel-text .cv-cta-punkte{
  list-style:none !important;
  margin:30px 0 0 !important;
  padding:0 !important;
  display:flex; flex-direction:column; gap:9px;
}
.cv-cta-punkte li, .cv-artikel-text .cv-cta-punkte li{
  display:flex; align-items:center; gap:11px;
  margin:0 !important; padding:0 !important;
  font-size:15px; color:#B9B1D2; line-height:1.4;
}
.cv-cta-punkte li b, .cv-artikel-text .cv-cta-punkte li b{ color:#fff; font-weight:700; }
.cv-cta-punkte li::marker, .cv-artikel-text .cv-cta-punkte li::marker{ content:none; }
.cv-cta-punkte svg{ width:17px; height:17px; color:#fff; }
/* Glasplättchen hinter dem Symbol, dieselbe Machart wie beim Bewertungsschild */
.cv-cta-punkte .cv-cta-glas, .cv-artikel-text .cv-cta-punkte .cv-cta-glas{
  flex-shrink:0; width:32px; height:32px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.02));
  backdrop-filter:blur(14px) saturate(110%);
  -webkit-backdrop-filter:blur(14px) saturate(110%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}

.cv-cta-knopf, .cv-artikel-text .cv-cta-knopf{
  display:block; align-self:stretch; text-align:center; margin-top:30px;
  background:linear-gradient(135deg,#7FB6E4 0%,#4E9BD4 100%);
  color:#150C2C; border:none; border-radius:999px;
  padding:15px 30px; font-size:15px; font-weight:700;
  /* Der Knopf ist mal ein Verweis und mal ein echter Knopf. Als Knopf
     erbt er weder Schrift noch Zeigefinger, beides steht deshalb hier. */
  font-family:inherit; cursor:pointer;
  transition:filter .15s;
}
.cv-cta-knopf:hover, .cv-artikel-text .cv-cta-knopf:hover{ filter:brightness(1.06); color:#150C2C; }

/* Das Bild füllt die rechte Spalte vollständig */
.cv-cta-bild{ position:relative; overflow:hidden; min-height:100%; }
.cv-cta-bild img, .cv-artikel-text .cv-cta-bild img{
  position:absolute; inset:0;
  width:100% !important; height:100% !important; max-width:none !important;
  margin:0 !important; border-radius:0 !important;
  object-fit:cover; object-position:center 15%; display:block;
}
.cv-cta-bild.ist-motiv img, .cv-artikel-text .cv-cta-bild.ist-motiv img{ object-position:72% center; }
.cv-cta-name{
  position:absolute; left:50%; transform:translateX(-50%); bottom:18px;
  background:#fff; color:#150C2C; border-radius:999px;
  padding:8px 18px; font-size:13px; font-weight:700; white-space:nowrap;
}

@media (max-width:900px){
  .cv-cta-banner{ grid-template-columns:minmax(0,1fr); }
  .cv-cta-text{ padding:30px 18px; order:2; }
  .cv-cta-bild{ order:1; height:280px; min-height:0; }
  .cv-cta-titel{ font-size:22px; }
  .cv-cta-punkte li, .cv-artikel-text .cv-cta-punkte li{ font-size:12px; gap:9px; }
  .cv-cta-punkte svg{ width:15px; height:15px; }
  .cv-cta-punkte .cv-cta-glas, .cv-artikel-text .cv-cta-punkte .cv-cta-glas{ width:28px; height:28px; }
}

/* -------------------------------------------------------------------------
   Quick-Check im Dialogfenster, unter den Beiträgen zur Krankenversicherung
   ------------------------------------------------------------------------- */
.cv-qc{
  width:min(780px,calc(100vw - 32px));
  /* Das Fenster bleibt im Bild, gescrollt wird innen */
  max-height:calc(100dvh - 48px);
  border:none; border-radius:28px; padding:0;
  background:#fff; color:#150C2C;
  box-shadow:0 24px 80px rgba(21,12,44,.28);
}
.cv-qc::backdrop{ background:rgba(21,12,44,.62); backdrop-filter:blur(3px); }
.cv-qc-form{
  position:relative; padding:34px 34px 0; display:flex; flex-direction:column;
  max-height:calc(100dvh - 48px); overflow-y:auto;
}
.cv-qc-zu{
  position:absolute; top:18px; right:18px; width:34px; height:34px;
  border:none; border-radius:999px; background:#F1F6FC; color:#150C2C;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.cv-qc-zu:hover{ background:#E2EFFA; }
.cv-qc-marke-oben{
  font-family:"Sora",sans-serif; font-size:12px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:#4E9BD4;
}
.cv-qc-balken{ height:4px; border-radius:999px; background:#EAF0F8; margin:12px 0 24px; overflow:hidden; }
.cv-qc-balken span{
  display:block; height:100%; width:20%; border-radius:999px;
  background:linear-gradient(135deg,#7FB6E4,#4E9BD4); transition:width .25s;
}
.cv-qc-schritt{ display:none; }
.cv-qc-schritt.ist-auf{ display:block; }
.cv-qc-schritt h3{
  font-family:"Sora",sans-serif; font-size:22px; font-weight:700;
  line-height:1.25; margin:0;
}
.cv-qc-schritt > p{ font-size:14.5px; color:#5C5570; line-height:1.6; margin:10px 0 20px; }
.cv-qc-liste{
  margin-bottom:10px;
  display:grid; grid-template-columns:1fr 1fr; gap:0 10px; align-content:start;
}
.cv-qc-wahl{
  display:flex; gap:12px; align-items:flex-start;
  padding:13px 15px; border-radius:14px; background:#F7FAFD;
  cursor:pointer; margin-bottom:8px;
}
.cv-qc-wahl:hover{ background:#EFF5FB; }
.cv-qc-wahl input{ position:absolute; opacity:0; pointer-events:none; }
.cv-qc-marke{
  position:relative; flex-shrink:0; width:20px; height:20px; margin-top:1px;
  border-radius:6px; background:#fff; box-shadow:inset 0 0 0 2px #C9D9E8;
}
/* Der Haken macht das Gewählte auf den ersten Blick erkennbar */
.cv-qc-wahl input:checked + .cv-qc-marke::after{
  content:""; position:absolute; left:6.5px; top:3px;
  width:5px; height:10px; border:solid #fff; border-width:0 2.5px 2.5px 0;
  transform:rotate(45deg);
}
.cv-qc-wahl input[type="radio"] + .cv-qc-marke{ border-radius:999px; }
.cv-qc-wahl input:checked + .cv-qc-marke{
  background:linear-gradient(135deg,#7FB6E4,#4E9BD4); box-shadow:inset 0 0 0 2px #4E9BD4;
}
.cv-qc-text b{ display:block; font-size:15px; font-weight:700; line-height:1.35; }
.cv-qc-text span{ display:block; font-size:13px; color:#5C5570; margin-top:3px; line-height:1.5; }
.cv-qc-text a{ color:#4E9BD4; text-decoration:underline; }
.cv-qc-felder{ display:flex; flex-direction:column; gap:10px; margin:0 0 14px; }
.cv-qc-felder input{
  width:100%; border:none; border-radius:14px; background:#F7FAFD;
  padding:15px 16px; font-size:15px; font-family:inherit; color:#150C2C;
}
.cv-qc-felder input::placeholder{ color:#8B84A3; }
.cv-qc-ergebnis{
  background:#EAF6FF; border-radius:16px; padding:16px 18px;
  font-size:14.5px; line-height:1.6; margin:20px 0 18px;
}
.cv-qc-danke{ font-size:15px; color:#5C5570; line-height:1.7; }
.cv-qc-danke a{ color:#4E9BD4; font-weight:700; }
.cv-qc-fuss{
  display:flex; gap:10px; margin-top:22px;
  /* Der Fuß klebt unten, damit „Weiter" nie weggescrollt ist */
  position:sticky; bottom:0; background:#fff; padding:14px 0 26px;
}
.cv-qc-fuss button{
  border:none; border-radius:999px; padding:14px 26px;
  font-family:inherit; font-size:15px; font-weight:700; cursor:pointer;
}
.cv-qc-zurueck{ background:#F1F6FC; color:#150C2C; }
.cv-qc-weiter, .cv-qc-senden{
  margin-left:auto; background:linear-gradient(135deg,#7FB6E4,#4E9BD4); color:#150C2C;
}
.cv-qc-weiter:hover, .cv-qc-senden:hover{ filter:brightness(1.06); }
.cv-qc-schritt.ist-fehlend .cv-qc-wahl{ box-shadow:inset 0 0 0 1.5px #D64B3F; }

@media (max-width:560px){
  .cv-qc{ width:100vw; max-width:100vw; max-height:100dvh; height:100dvh; border-radius:0; }
  .cv-qc-form{ padding:26px 20px 0; min-height:100dvh; max-height:100dvh; }
  .cv-qc-schritt h3{ font-size:20px; }
  .cv-qc-liste{ max-height:none; }
  .cv-qc-fuss{ margin-top:auto; padding:18px 0 20px; }
  .cv-qc-fuss button{ flex:1; padding:15px 18px; }
}

/* Rufnummer mit Landesvorwahl */
.cv-qc-telefon{ display:flex; gap:8px; }
.cv-qc-telefon select{
  flex:0 0 132px; border:none; border-radius:14px; background:#F7FAFD;
  padding:15px 12px; font-size:15px; font-family:inherit; color:#150C2C; cursor:pointer;
}
.cv-qc-telefon input{ flex:1; min-width:0; }
.cv-qc-fehler{ display:none; font-size:13px; color:#A93A31; margin:6px 0 0; }
.cv-qc-fehler.ist-auf{ display:block; }

/* Wer sich meldet, steht mit Bild im Dank */
.cv-qc-person{ display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.cv-qc-person img{
  width:64px; height:64px; border-radius:999px; object-fit:cover;
  object-position:center 20%; flex-shrink:0;
}
.cv-qc-person b{ display:block; font-size:16px; font-weight:700; }
.cv-qc-person span{ display:block; font-size:13px; color:#5C5570; margin-top:2px; }

@media (max-width:560px){
  /* Auf dem Telefon steht die Vorwahl über der Nummer, sonst wird
     das Nummernfeld so schmal, dass nichts mehr zu lesen ist */
  .cv-qc-telefon{ flex-direction:column; gap:10px; }
  .cv-qc-telefon select{ flex:none; width:100%; }
}

/* Die Einschätzung bekommt ein Gesicht, halb über dem Rand */
.cv-qc-einschaetzung{ position:relative; padding-right:52px; }
.cv-qc-lutz{
  position:absolute; right:-14px; top:50%; transform:translateY(-50%);
  width:112px; height:112px; border-radius:999px; object-fit:cover;
  object-position:center 18%;
}

@media (max-width:700px){
  .cv-qc-liste{ grid-template-columns:1fr; }
}

@media (max-width:560px){
  /* Auf dem Telefon fehlt die Breite für das Bild neben dem Text */
  .cv-qc-einschaetzung{ padding-right:0; }
  .cv-qc-lutz{ display:none; }
}