/* Mobile reading patterns, loaded only by the fourteen shortened subpages. */
.seite-kompakt{--slate:#596174}
.seite-kompakt :is(.anfrage,.seite-hero--navy,.abschnitt--navy) .etikett{color:#fff}
.ck-tabs__bar,.ck-row-controls{display:none}
.ck-more-questions{grid-column:2;font-size:16px;font-weight:700}
.ck-more-questions a{text-decoration:underline;text-underline-offset:4px}
.ck-tabs [hidden]{display:none!important}
.ck-tabs [data-reveal],.ck-tabs [data-stagger]>*{opacity:1;transform:none;transition:none}
.ck-disclosure>summary{list-style:none}
.ck-disclosure>summary::-webkit-details-marker{display:none}
.ck-disclosure>summary svg{display:none}
.ck-enquiry>summary{display:none}
.ck-footer-group>summary{pointer-events:none}
.ck-footer-group>summary{margin-bottom:15px}
.ck-footer-group>div{display:flex;flex-direction:column;gap:9px}
.team-bio>summary{display:none}

@media (max-width:820px){
  :root{--rand:clamp(20px,5vw,72px)}
  .seite-kompakt{--slate:#4b5366}
  .seite-kompakt .abschnitt{padding-block:40px}
  .seite-kompakt .seite-hero{padding-bottom:40px}
  .seite-kompakt .seite-hero__raster{gap:28px}
  .seite-kompakt .seite-hero__bild{aspect-ratio:16/10}
  .seite-kompakt .seite-hero__visual .telefon{width:180px!important}
  .seite-kompakt .belege{padding-block:36px}
  .seite-kompakt .split__bild{aspect-ratio:16/10}
  .seite-kompakt .split__telefon .telefon{width:180px}
  .seite-kompakt .split{grid-template-columns:1fr;gap:28px}
  .seite-kompakt .split--dreh>:first-child{order:0}
  .seite-kompakt .kit-banner-abschnitt{padding-block:28px}
  .seite-kompakt .kit-banner{gap:16px}
  .seite-kompakt .kit-banner img{max-width:120px}
  .seite-kompakt .fragen-raster{gap:24px}
  .seite-kompakt .res-mehr-abschnitt{padding-block:36px}
  .seite-kompakt .res-text>*{min-width:0}
  .ck-more-questions{grid-column:1;margin-top:0}
  /* Fuss auf jeder Seite kompakt (22.10.2026, seit kompakt.css ueberall laedt): Gruppen zum Aufklappen */
  .fuss{padding-top:36px}
  .fuss__raster{grid-template-columns:1fr;gap:0}
  .fuss__marke{margin-bottom:24px}
  .fuss__recht{margin-top:24px;color:rgba(255,255,255,.72)}
  .fuss__marke p{max-width:none}
  .fuss__apps{margin-top:16px}
  .ck-disclosure>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:54px;cursor:pointer;pointer-events:auto;font-weight:700}
  .ck-disclosure>summary svg{display:block;flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .ck-disclosure[open][data-ck-ready]>summary svg{transform:rotate(180deg)}
  .ck-disclosure:not([data-ck-ready])>:not(summary){display:none}
  .ck-enquiry>summary{padding:12px 20px;border-radius:12px;background:#fff;color:var(--navy)}
  .ck-enquiry[open]>.formular{margin-top:16px}
  .ck-enquiry .formular form>h3{display:none}
  .ck-enquiry>summary:focus-visible{outline-color:#fff}
  .ck-footer-group>summary{border-top:1px solid rgba(255,255,255,.25);color:#fff;margin-bottom:0}
  .ck-footer-group>summary b{margin:0}
  .ck-footer-group>div{padding:4px 0 16px;gap:0}
  .ck-footer-group>div a{min-height:44px;display:flex;align-items:center;margin:0}
  .ck-footer-group>summary:focus-visible{outline-color:#fff}
  .team-bio>summary{display:flex;justify-content:flex-start;gap:6px;min-height:44px;font-size:14px;font-weight:600;color:var(--navy)}
  .team-bio>summary svg{width:16px;height:16px}
  .team-bio .bio{margin-top:2px;font-size:14px;line-height:1.55}

  /* The current panel is present before JS runs, so the layout does not collapse after load.
     The noscript stylesheet expands every panel when scripting is unavailable.
     Reiter als Chips direkt ueber dem Inhalt, nicht mehr klebend, wie der Umschalter auf How it works (22.10.2026). */
  .ck-tabs [data-ck-panel]:not([data-ck-current]){display:none}
  .ck-tabs [id]{scroll-margin-top:calc(var(--kopf) + 72px)}
  .ck-tabs__bar{display:block;padding-top:28px}
  .ck-tabs .ck-tabs__list{display:flex;gap:8px;width:100%;margin:0;padding:2px var(--rand);scroll-padding-inline:var(--rand);overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
  .ck-tabs .ck-tabs__list::-webkit-scrollbar{display:none}
  .ck-tabs__list button{flex:none;min-height:44px;padding:0 18px;border:1px solid rgba(4,5,80,.12);border-radius:var(--r-pill);background:rgba(255,255,255,.8);color:var(--navy);font:inherit;font-size:15px;font-weight:600;white-space:nowrap;cursor:pointer;box-shadow:0 1px 2px rgba(4,5,80,.05);transition:background-color .2s ease,color .2s ease,box-shadow .2s ease}
  .ck-tabs__list button:first-child:disabled,.ck-tabs__list [aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:0 6px 16px rgba(4,5,80,.2)}
  .ck-tabs__list button:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
  .ck-tabs--splits{padding-bottom:40px;background:var(--cloud)}
  .ck-tabs--splits>section,.seite-kompakt .ck-tabs--splits>section{padding:0;background:transparent}  /* auch die Huellen verborgener Reiter ohne Abstand, sonst entsteht eine Luecke */
  .ck-tabs--splits .split{padding-top:28px;margin-top:0}
  /* Telefon-Bilder in Reitern zeigen nur den oberen Teil und blenden weich aus, damit der Inhalt auf einen Bildschirm passt */
  .seite-kompakt .ck-tabs .split__telefon{max-height:260px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent)}
  .ck-tabs--sections>section{padding-block:28px 32px}
  .ck-tabs--sections .kopfzeile-abschnitt{margin-bottom:24px}
  .ck-tabs .abschnitt--navy .etikett{color:#fff}
  .ck-tabs .abschnitt--navy .unterzeile{color:rgba(255,255,255,.82)}

  /* Native scrolling preserves touch, keyboard and no-JS access to every item.
     Reihen auf dem Handy (22.10.2026): Zahlen, Bilder und Karten wischen, Schritte und Listen stehen untereinander.
     Wisch-Reihen laufen bis an den Bildschirmrand, die naechste Karte schaut als ganze Flaeche herein. */
  .seite-kompakt .ck-row{display:grid;gap:12px;margin:24px 0 0;padding:0;list-style:none;max-width:100%}
  .seite-kompakt .ck-row>*{min-width:0;max-width:none;opacity:1;transform:none;transition:none}
  .seite-kompakt .ck-row:focus-visible{outline:2px solid var(--navy);outline-offset:4px}
  .seite-kompakt :is(.res-einblick,.res-mehr,.seiten-raster,.preise__raster,.zahlen-3,.ck-related).ck-row{display:flex;gap:12px;overflow-x:auto;margin-inline:calc(-1*var(--rand));padding:6px var(--rand) 14px;scroll-padding-inline:var(--rand);scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;align-items:stretch}
  .seite-kompakt :is(.res-einblick,.res-mehr,.seiten-raster,.preise__raster,.zahlen-3,.ck-related).ck-row::-webkit-scrollbar{display:none}
  .seite-kompakt :is(.res-einblick,.res-mehr,.seiten-raster,.preise__raster,.zahlen-3,.ck-related).ck-row>*{flex:0 0 82%;scroll-snap-align:start}
  .seite-kompakt .ck-row.res-einblick>*{flex-basis:62%}
  .seite-kompakt .ck-row.preise__raster{width:auto;max-width:none;padding-top:24px}
  .seite-kompakt .ck-row .plan{padding:26px 22px;transform:none;box-shadow:var(--shadow-1)}
  .seite-kompakt .ck-row .plan--stark{transform:none}
  /* Glas-Karten: hell, leicht durchscheinend, feiner Rand, weicher Schatten. Auf Navy dieselbe Form, weiss auf Navy. */
  .seite-kompakt :is(.zahlen-3,.fakten-3:not(.regeln),.ck-related,.nutzen-raster,.pflege-beweis).ck-row>*{padding:18px 18px 16px;border:1px solid rgba(4,5,80,.08);border-radius:20px;background:rgba(255,255,255,.76);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 28px rgba(4,5,80,.06);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3)}
  .seite-kompakt :is(.abschnitt--navy,.seite-hero--navy) :is(.zahlen-3,.fakten-3:not(.regeln),.ck-related,.nutzen-raster,.pflege-beweis).ck-row>*{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
  .seite-kompakt .ck-row .beleg{margin:0}
  .seite-kompakt .ck-row .beleg__zahl{font-variant-numeric:tabular-nums}
  .seite-kompakt .ck-row.fakten-3 b{display:block;margin-bottom:4px}
  .seite-kompakt .ck-row.pflege-beweis article{grid-template-columns:76px 1fr;gap:16px}
  .seite-kompakt .ck-row.pflege-beweis img{width:76px;height:100px}
  /* Listen im Apple-Stil: eine Glas-Karte, Zeilen mit feiner Trennlinie, so sieht man alles und die Seite bleibt kurz (Download-Inhalt, Punkte) */
  .seite-kompakt :is(.res-punkte,.res-paket,.regeln).ck-row{grid-template-columns:1fr;gap:0;padding:2px 18px;border:1px solid rgba(4,5,80,.08);border-radius:20px;background:rgba(255,255,255,.8);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 28px rgba(4,5,80,.06);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3)}
  .seite-kompakt :is(.res-punkte,.res-paket,.regeln).ck-row>li{padding:14px 0;border:0;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .seite-kompakt .abschnitt--navy :is(.res-punkte,.res-paket,.regeln).ck-row{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
  .seite-kompakt .abschnitt--navy :is(.res-punkte,.res-paket,.regeln).ck-row>li+li{border-top-color:rgba(255,255,255,.12)}
  /* Lange Punktlisten (ab sechs) wischen als Glas-Karten, statt die Seite zu verlaengern */
  .seite-kompakt .ck-row.res-punkte:has(>li:nth-child(6)){display:flex;gap:12px;overflow-x:auto;margin-inline:calc(-1*var(--rand));padding:6px var(--rand) 14px;scroll-padding-inline:var(--rand);scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;border:0;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .seite-kompakt .ck-row.res-punkte:has(>li:nth-child(6))::-webkit-scrollbar{display:none}
  .seite-kompakt .ck-row.res-punkte:has(>li:nth-child(6))>li{flex:0 0 82%;scroll-snap-align:start;padding:18px;border:1px solid rgba(4,5,80,.08);border-radius:20px;background:rgba(255,255,255,.76);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 28px rgba(4,5,80,.06)}
  .seite-kompakt :is(.res-punkte,.res-paket,.regeln).ck-row>li+li{border-top:1px solid rgba(4,5,80,.08)}
  .seite-kompakt .ck-row.res-punkte li{grid-template-columns:34px minmax(0,1fr);gap:14px}
  .seite-kompakt .ck-row.res-punkte li::before{width:34px;height:34px;font-size:12px}
  .seite-kompakt .ck-row.res-punkte b{font-size:16px}
  .seite-kompakt .ck-row.res-punkte span{font-size:15px}
  .seite-kompakt .ck-row.res-paket>li{flex-direction:row;align-items:center;gap:14px;overflow:visible}
  .seite-kompakt .ck-row.res-paket .res-paket__bild{flex:none;width:52px;height:auto;min-height:0;aspect-ratio:3/4;border-radius:10px}
  .seite-kompakt .ck-row.res-paket .res-paket__bild img{position:static;width:100%;height:100%;object-fit:cover;transform:none;border-radius:6px;box-shadow:none}
  .seite-kompakt .ck-row.res-paket .res-paket__bild--audio svg{width:24px;height:24px}
  .seite-kompakt .ck-row.res-paket .res-paket__bild--audio span{display:none}
  .seite-kompakt .ck-row.res-paket .res-paket__text{padding:0;gap:3px}
  .seite-kompakt .ck-row.res-paket .res-paket__text b{font-size:16px}
  .seite-kompakt .ck-row.res-paket .res-paket__text span:not(.res-paket__meta){display:none}
  /* Zeitleiste senkrecht: goldene Linie links, alle Schritte auf einen Blick */
  .seite-kompakt .ck-row.zeitleiste{gap:0;margin:28px 0 8px;position:relative}
  .seite-kompakt .ck-row.zeitleiste::before{display:block;left:8px;right:auto;top:12px;bottom:24px;width:1px;height:auto;background:linear-gradient(var(--gold-1),rgba(246,196,83,.15));transform:none;transition:none}
  .seite-kompakt .ck-row.zeitleiste li{padding:0 0 18px 38px}
  .seite-kompakt .ck-row.zeitleiste li:last-child{padding-bottom:0}
  .seite-kompakt .ck-row.zeitleiste li::before{top:0;left:0;transform:none}
  .seite-kompakt .ck-row.zeitleiste p{margin-top:4px;font-size:15px;line-height:1.5}
  /* Team: zwei Spalten mit ganzen Portraets, die Kurz-Bio klappt auf */
  .seite-kompakt .ck-row.team-raster{grid-template-columns:1fr 1fr;gap:22px 14px}
  .seite-kompakt .ck-row .team-karte img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;object-position:center 16%;border-radius:18px}
  .seite-kompakt .ck-row.res-guides .res-guide--breit{display:flex;flex-direction:column}
  .seite-kompakt .ck-row.res-guides .res-guide{grid-column:auto}
  .seite-kompakt .ck-row .res-guide__bild{min-height:0}
  /* Statt "Swipe to explore", Zaehler und Pfeilen: kleine Punkte. Der Zaehler bleibt fuer Screenreader. */
  .ck-row-controls{display:flex;justify-content:center;align-items:center;min-height:22px;margin-top:0;color:var(--navy)}
  .ck-row-controls[hidden]{display:none!important}
  .ck-row-controls__hint,.ck-row-controls button{display:none}
  .ck-row-controls__count{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .ck-row-dots{display:flex;gap:6px}
  .ck-row-dots i{width:6px;height:6px;border-radius:var(--r-pill);background:rgba(4,5,80,.2);transition:width .25s ease,background-color .25s ease}
  .ck-row-dots i.ist-aktiv{width:18px;background:var(--navy)}
  .abschnitt--navy .ck-row-dots i{background:rgba(255,255,255,.32)}
  .abschnitt--navy .ck-row-dots i.ist-aktiv{background:#fff}
}
@media (hover:hover) and (pointer:fine){
  .ck-tabs__list button:hover{color:var(--navy)}
  .ck-row-controls button:not(:disabled):hover{background:var(--mist)}
  .abschnitt--navy .ck-row-controls button:not(:disabled):hover{background:rgba(255,255,255,.12)}
}
@media (prefers-reduced-motion:reduce){
  .seite-kompakt [data-reveal],.seite-kompakt [data-stagger]>*{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
}
@media print{
  .ck-tabs__bar,.ck-row-controls{display:none!important}
  .ck-tabs [data-ck-panel],.ck-tabs [data-ck-panel][hidden]{display:block!important}
  .ck-tabs .split[data-ck-panel]{display:grid!important}
  .seite-kompakt .ck-row{display:grid!important;grid-template-columns:1fr 1fr;overflow:visible!important;max-width:none}
  .seite-kompakt .ck-row>*{width:auto;break-inside:avoid;transform:none!important}
  .seite-kompakt [data-reveal],.seite-kompakt [data-stagger]>*{opacity:1!important;transform:none!important}
  .ck-disclosure::details-content{content-visibility:visible!important}
  .ck-disclosure>:not(summary){display:block!important}
  .ck-enquiry>summary{display:none!important}
}