/* ============================================================
   v41 · Design-Polish (nur Darstellung)
   Wird als letztes Stylesheet geladen und überschreibt gezielt.
   Keine Änderungen an Markup, Logik, Formularen oder Inhalten.
   Byte-identisch in paket_de und paket_com.
   ============================================================ */

/* ------------------------------------------------------------
   0 · Design-Tokens
   ------------------------------------------------------------ */
:root{
  --ha-muted:#5b6b80;                       /* vorher #6f7f94 (4,1:1) → ≥ 5:1 auf Weiß */
  --kha-link:#075fae;
  --kha-label:#146dcc;
  --kha-status-ok:#1d7a58;
  --kha-ease-out:cubic-bezier(.23,1,.32,1);
  --kha-ease-drawer:cubic-bezier(.32,.72,0,1);
  --kha-dur-press:120ms;
  --kha-dur-fast:160ms;
  --kha-dur-base:200ms;
  --kha-radius-btn:14px;
  --kha-radius-card:20px;
  --kha-radius-chip:8px;
}

/* ------------------------------------------------------------
   1 · Kritische Lesbarkeit
   ------------------------------------------------------------ */

/* A1 · Überschriften in dunklen Sektionen waren dunkel auf dunkel
   (.v23-main h2 überschrieb die geerbte weiße Farbe). */
.v32-flow h2,
.v32-review h2{color:#fff}

/* A2 · Hoher-Kontrast-Modus: dunkle Sektionen behalten helle Schrift.
   (Die globale Regel färbte dort alle Absätze dunkelblau.) */
body.a11y-high-contrast :is(.v23-ink,.v24-product-proof,.v23-final,.v23-experience,.v32-flow,.v32-review,.v32-trust-final__card) :is(p,small,li,figcaption){color:#fff!important}
body.a11y-high-contrast.page-contact .ent-contact-card--dark p{color:#fff!important}

/* A3 · Hinweis in der Ablauf-Demo: im Innenabstand, unten im Panel,
   mobil nicht mehr abgeschnitten. */
.v32-flow__stage{display:flex;flex-direction:column}
.v32-flow__note{position:relative;z-index:1;margin:auto 0 0;padding:0 40px 28px;color:#8ea6bb}
@media(max-width:720px){.v32-flow__note{padding:0 26px 22px}}

/* A4 · Statuswörter im Beispielverlauf (vorher 2,85:1) */
.v23-demo-events em{color:var(--kha-status-ok);font-size:12px}

/* A5 · Rechtsseiten: Abschnittslabel und Links mit ausreichendem Kontrast */
.legal-card .section-label{color:var(--kha-label)!important} /* Barrierefreiheit-Seite setzt die Farbe inline */
.legal-card a{color:var(--kha-link)}

/* A6 · Graue Kleintexte */
.page-contact .ent-form-submit>span{color:var(--ha-muted)}

/* ------------------------------------------------------------
   2 · Raster, Typografie, Abstände
   ------------------------------------------------------------ */

/* B1 · Gemeinsame linke Kante: Header, Seiten-Hero, Kontakt und Inhalt
   nutzen denselben Container wie die Startseite. */
.ent-pagehero .ent-shell,
.page-contact .ent-pagehero--contact .ent-shell,
.page-contact .ent-contact-grid{max-width:none}
@media(min-width:721px){.ent-header__inner{width:var(--ha-shell)}}

/* B3 · Einheitliche Überschriften: Stärke 800 statt 900, weniger enge Laufweite,
   eine Größe für alle Unterseiten-H1. */
:is(.v23-main,.ent-pagehero,.v32-trust-hero) h1,
.legal-card h1{font-weight:800;letter-spacing:-.03em}
.ent-pagehero h1,
.page-contact .ent-pagehero--contact h1,
.v32-trust-hero h1{font-size:clamp(38px,4vw,58px);line-height:1.06;letter-spacing:-.03em}
.v23-main h2,
.v32-trust-page main h2,
.ent-sectionhead h2{letter-spacing:-.025em}
.v26-visual-story__copy h2{font-size:clamp(32px,3vw,46px);line-height:1.08}
@media(max-width:720px){
  .ent-pagehero h1,
  .page-contact .ent-pagehero--contact h1,
  .v32-trust-hero h1{font-size:clamp(32px,8.6vw,44px);line-height:1.1}
  .v26-visual-story__copy h2{font-size:clamp(28px,7.4vw,37px)}
}

/* B2 · Abstand Überschrift → Absatz und zwischen Absätzen */
.v23-main h2 + p,
.v23-main h2 + .v23-lead-sm{margin-top:20px}
.v23-main .v23-lead-sm + p{margin-top:12px}

/* B4 · Sektionsabstände in zwei Stufen statt sechs */
.v23-section,.v23-editorial,.v24-product-proof,.v26-visual-story,
.v32-why,.v32-flow,.v32-architecture,.v32-trust-home,.v32-review,
.v38-deployment,.v23-final{padding-block:96px}
#incident-management{padding-top:168px}
@media(max-width:980px){
  .v23-section,.v23-editorial,.v24-product-proof,.v26-visual-story,
  .v32-why,.v32-flow,.v32-architecture,.v32-trust-home,.v32-review,
  .v38-deployment,.v23-final{padding-block:80px}
  #incident-management{padding-top:150px}
}
@media(max-width:720px){
  .v23-section,.v23-editorial,.v24-product-proof,.v26-visual-story,
  .v32-why,.v32-flow,.v32-architecture,.v32-trust-home,.v32-review,
  .v38-deployment,.v23-final{padding-block:64px}
  #incident-management{padding-top:120px}
}
/* Zweispaltige Kopfzeile mit hoher rechter Spalte (Lösung): oben bündig */
.v23-section-head--split:has(> div + div){align-items:start}

/* ------------------------------------------------------------
   3 · Komponenten
   ------------------------------------------------------------ */

/* B5 · Buttons: ein Primärstil, Rückmeldung beim Drücken, Hover nur mit Maus */
.v23-btn,.ent-btn{
  border-radius:var(--kha-radius-btn);
  transition:transform var(--kha-dur-press) var(--kha-ease-out),
             background-color var(--kha-dur-fast) ease,
             border-color var(--kha-dur-fast) ease,
             box-shadow var(--kha-dur-fast) ease;
}
.v23-btn{padding-block:12px;line-height:1.3;text-align:center} /* zweizeilige Beschriftung (FR/RU, mobil) bekommt Luft */
.v23-btn:hover{transform:none}
.v23-btn--primary:hover{background:var(--ha-navy)}
.v23-btn--ghost:hover{box-shadow:none}
.page-contact .ent-form-submit .ent-btn,
.page-contact .ent-form-submit .ent-btn:hover{
  min-height:52px;border-radius:var(--kha-radius-btn);
  background:var(--ha-navy);box-shadow:0 12px 28px rgba(15,47,89,.18);transform:none;
}
@media(hover:hover) and (pointer:fine){
  .v23-btn--primary:hover,
  .page-contact .ent-form-submit .ent-btn:not(:disabled):hover{background:#163d6d}
  .v23-btn--ghost:hover{border-color:#a9c1d8}
  .v23-btn--white:hover{background:#eef4fa}
}
.v23-btn:active,
.ent-btn:not(:disabled):active,
.page-contact .ent-form-submit .ent-btn:not(:disabled):active{transform:scale(.97)}

/* Textlink-Pfeil nur bei echtem Hover */
.v23-textlink span{transition:transform var(--kha-dur-fast) var(--kha-ease-out)}
.v23-textlink:hover span{transform:none}
@media(hover:hover) and (pointer:fine){.v23-textlink:hover span{transform:translateX(3px)}}

/* B7 · Chips sind keine Buttons: flach, ohne Rahmen, kleiner Radius */
.v23-trust-row span,.v23-chipset span,.v23-badges span,.v32-arch-foundations span{
  padding:6px 10px;border:0;border-radius:var(--kha-radius-chip);
  background:rgba(20,70,120,.07);color:#34516f;font-size:12px;font-weight:700;line-height:1.4;
}

/* B6 · Nummerierung: ein Badge-Stil (hell) für Karten, ein dunkler für Abläufe */
.v32-why__card b,.v32-trust-card b,.v23-bento-grid article>span{
  width:36px;height:36px;border-radius:10px;background:#e8f2fb;color:#0b5fa5;font-size:12px;font-weight:800;
}
.v23-steps article>b{width:36px;height:36px;border-radius:10px;font-size:12px}
.v23-area-grid b,.v23-ready-grid li span,.v23-data-points b{font-size:12px}
.v23-scenario-grid span{font-size:11px;letter-spacing:.06em;padding:6px 9px}

/* Karten: einheitlicher Radius und Schatten, Höhe nach Inhalt */
.v23-steps article,.v23-three-cards article,.v23-proof-grid article,.v23-scenario-grid article,
.v23-bento-grid article,.v23-area-grid article,.v32-why__card,.v32-trust-card,
.v32-trust-home__cards article,.ent-platform-grid article,.ent-usecase-grid article,.v38-deployment__card{
  border-radius:var(--kha-radius-card);min-height:0;
}
.v23-three-cards article,.v23-proof-grid article,.v32-why__card,.v32-trust-card,.v38-deployment__card{
  box-shadow:0 1px 2px rgba(16,46,85,.04),0 8px 24px rgba(16,46,85,.05);
}
.v23-proof-grid{align-content:start}

/* Nicht klickbare Karten heben sich beim Überfahren nicht mehr an */
.v23-steps article,.v23-area-grid article{transition:none}
.v23-steps article:hover{transform:none;box-shadow:none}
.v23-area-grid article:hover{transform:none;background:rgba(255,255,255,.055)}
@media(hover:hover) and (pointer:fine){
  .v32-arch-diagram__node--channel:hover{transform:none;border-color:#d6e5ef;box-shadow:0 10px 24px rgba(21,55,86,.06)}
  .v32-arch-diagram__node--uac:hover{transform:none;border-color:#cfe2ef;box-shadow:0 14px 34px rgba(21,55,86,.09)}
}

/* B9 · Keine Fake-Fensterpunkte über dem Klinik-Dashboard; ruhigerer Kicker */
.v24-dashboard-stage:before,.v24-dashboard-stage:after{display:none}
.v23-kicker{gap:10px;letter-spacing:.12em}
.v23-kicker span,.ent-eyebrow span{width:24px}
.ent-eyebrow{font-size:12px;letter-spacing:.12em}

/* B11 · Weicher Übergang Hero → Demo-Karte; Rahmen der Referenzbilder */
.v23-hero{border-bottom:0}
.v26-contact-reference,.v26-phone-reference{background:#fff}

/* ------------------------------------------------------------
   4 · Navigation, Header, Bedienbarkeit
   ------------------------------------------------------------ */

/* C3 · Etwas kompakterer Header auf großen Bildschirmen */
@media(min-width:981px){
  .ent-header__inner{height:76px}
  .ent-brand{width:205px;flex-basis:205px}
  html{scroll-padding-top:84px}
}

/* C2b · Nav-Unterstrich per transform statt Layout-Eigenschaft; nur bei echtem Hover */
.ent-nav a:after{right:0;transform:scaleX(0);transform-origin:left center;transition:transform var(--kha-dur-fast) var(--kha-ease-out)}
.ent-nav a:hover:after{transform:scaleX(0)}
.ent-nav a:focus-visible:after{transform:scaleX(1)}
@media(hover:hover) and (pointer:fine){.ent-nav a:hover:after{transform:scaleX(1)}}

/* C1 · Mobilmenü: 48 px Trefferfläche, 16 px Schrift, Trennlinien,
   kurzes Einblenden vom Menü-Button aus (öffnet ca. 6× pro Besuch → 160 ms). */
@media(max-width:980px){
  .ent-nav{padding:6px;transform-origin:top right}
  .ent-nav a{display:flex;align-items:center;min-height:48px;padding:0 14px;font-size:16px;border-radius:0}
  .ent-nav a + a{border-top:1px solid #edf2f7}
  .ent-nav a:hover{background:transparent}
  .ent-nav a:active{background:#eef4fa}
  .ent-nav.is-open{opacity:1;transform:none;transition:opacity var(--kha-dur-fast) var(--kha-ease-out),transform var(--kha-dur-fast) var(--kha-ease-out)}
  @starting-style{.ent-nav.is-open{opacity:0;transform:translateY(-4px) scale(.98)}}
}
@media(max-width:980px) and (hover:hover) and (pointer:fine){.ent-nav a:hover{background:#f4f8fb}}

/* Druck-Rückmeldung für Header- und Panel-Bedienelemente */
.ent-a11y,.ent-menu,#a11y-panel .a11y-reset,#a11y-panel .a11y-close,.v32-flow__step{
  transition:transform var(--kha-dur-press) var(--kha-ease-out),background-color var(--kha-dur-fast) ease,border-color var(--kha-dur-fast) ease;
}
.ent-a11y:active,.ent-menu:active,#a11y-panel .a11y-reset:active,#a11y-panel .a11y-close:active,.v32-flow__step:active{transform:scale(.97)}

/* Ablauf-Demo: kein seitliches Verrutschen beim Hover, Randfarbe nur mit Maus */
.v32-flow__step:hover{transform:none}
.v32-flow__step:not([aria-selected="true"]):hover{border-color:#24415e}
@media(hover:hover) and (pointer:fine){.v32-flow__step:not([aria-selected="true"]):hover{border-color:#3d87b8}}

/* E1 · Trefferflächen mindestens 44 px */
#a11y-panel .a11y-close{min-height:44px;padding-inline:14px}
#a11y-panel .a11y-toggle:before{content:"";position:absolute;inset:-10px 0}
.v23-textlink{padding-block:10px;margin-top:14px}
@media(max-width:720px){.v23-footer a{padding:11px 0}}

/* E2 · Keine Texte unter 12 px */
.v23-footer__channels span,.v23-float--b b,.v23-editorial__overlay span,.v23-footer__bottom p,
.v23-demo-head span,.v23-steps article>span,.page-contact .ent-contact-card--dark>span{font-size:12px}
@media(max-width:640px){.v32-arch-foundations span{font-size:12px}}

/* E3 · Fokusring: zweifarbig (auf hellem und dunklem Grund sichtbar),
   ohne die Form des Elements zu verändern */
body.a11y-keyboard-nav :focus-visible{
  outline:3px solid #0b5fa5!important;outline-offset:2px!important;box-shadow:0 0 0 7px #fff!important;
}
body.a11y-keyboard-nav :is(.v23-btn,.ent-btn):focus-visible{border-radius:var(--kha-radius-btn)!important}
body.a11y-keyboard-nav :is(.ent-a11y,.ent-menu,.a11y-reset,.a11y-close):focus-visible{border-radius:12px!important}
body.a11y-keyboard-nav .v32-flow__step:focus-visible{border-radius:16px!important}
body.a11y-keyboard-nav.page-contact .ent-form :is(input,select,textarea):focus-visible{border-radius:13px!important}
body.a11y-keyboard-nav .a11y-select:focus-visible{border-radius:10px!important}

/* ------------------------------------------------------------
   5 · Bewegung
   Global gilt weiterhin: prefers-reduced-motion und der Schalter
   „Bewegung reduzieren“ schalten alle Übergänge ab (bestehende Regeln).
   ------------------------------------------------------------ */

/* Barrierefreiheits-Panel: Drawer-Kurve, Schließen schneller als Öffnen */
#a11y-panel{transition:transform 180ms var(--kha-ease-drawer),visibility 0s linear 180ms}
#a11y-panel.is-open{transition:transform 260ms var(--kha-ease-drawer),visibility 0s}
.a11y-toggle-track::after{transition:transform var(--kha-dur-fast) var(--kha-ease-out)}

/* Ablauf-Demo: Panelwechsel als kurze Überblendung statt hartem Sprung */
.v32-flow__panel{transition:opacity var(--kha-dur-base) var(--kha-ease-out),transform var(--kha-dur-base) var(--kha-ease-out)}
@starting-style{.v32-flow__panel{opacity:0;transform:translateY(4px)}}
.v32-flow__progress i{transition:width var(--kha-dur-base) var(--kha-ease-out)}

/* Dekorative Zeiger-Parallaxe, Bild-Zoom und Anheben von Bildern entfernt
   (kein Nutzen für die Bedienung; spart dauerhaftes will-change auf allen Bildern) */
.ha-media-wrap-motion,.ha-media-wrap-motion:hover,
.ha-media-motion,.ha-media-wrap-motion:hover .ha-media-motion{transform:none!important;filter:none!important}
.ha-media-motion{will-change:auto;transition:none}
.ha-media-wrap-motion{transition:box-shadow var(--kha-dur-base) ease}

/* ------------------------------------------------------------
   6 · Header mit Sprachumschalter (mehrsprachiges Paket)
   Zwischen 981 und 1300 px schob der Sprachumschalter den
   Barrierefreiheits-Button aus dem sichtbaren Bereich (bestand
   bereits vor v41). Hier wird – wie auf Tablets – das vorhandene
   Menü-Muster genutzt. Ohne Sprachumschalter keine Wirkung.
   ------------------------------------------------------------ */
@media(min-width:981px) and (max-width:1300px){
  .ent-header:has(.v23-lang) .ent-menu{display:block;margin-left:auto}
  .ent-header:has(.v23-lang) .ent-actions{margin-left:0}
  .ent-header:has(.v23-lang) .ent-nav{
    display:none;position:absolute;left:auto;right:16px;top:calc(100% + 6px);width:340px;
    flex-direction:column;align-items:stretch;gap:0;margin:0;padding:6px;
    background:#fff;border:1px solid var(--ha-line);border-radius:18px;box-shadow:0 24px 55px rgba(25,56,86,.16);
    transform-origin:top right;
  }
  .ent-header:has(.v23-lang) .ent-nav.is-open{display:flex;opacity:1;transform:none;transition:opacity var(--kha-dur-fast) var(--kha-ease-out),transform var(--kha-dur-fast) var(--kha-ease-out)}
  @starting-style{.ent-header:has(.v23-lang) .ent-nav.is-open{opacity:0;transform:translateY(-4px) scale(.98)}}
  .ent-header:has(.v23-lang) .ent-nav a{display:flex;align-items:center;min-height:48px;padding:0 14px;font-size:16px;white-space:normal}
  .ent-header:has(.v23-lang) .ent-nav a + a{border-top:1px solid #edf2f7}
  .ent-header:has(.v23-lang) .ent-nav a:after{display:none}
  .ent-header:has(.v23-lang) .ent-nav a:hover{background:#f4f8fb}
  .ent-header:has(.v23-lang) .ent-nav a:active{background:#eef4fa}
}