/* Kubernetes-Hub (Livegang 09.10.2026, vorher Draft 07.10.) - nur fuer
   /ressourcen/glossar/kubernetes und /en/ressourcen/glossary/kubernetes.

   Geladen per <link> am Anfang von artikel-body.md dieses Drafts, kein
   gemeinsames Stylesheet. Alle Regeln haengen an .k8s-hub (Wrapper um den
   Draft-Body) bzw. fuer Kopf und Inhaltsverzeichnis, die das gemeinsame
   Template artikel.html.twig ausserhalb des Bodys rendert, an
   section:has(.k8s-hub). Farben ueber die Theme-Tokens aus home.css, damit
   Hell und Dunkel ohne Sonderfall funktionieren. Optik nach der
   HTML-Referenz index.html (SHA256 25a0f5e2...). */

/* ---------- Kopf: zweizeiliger Titel, Lead, Schnelleinstieg ---------- */
section:has(.k8s-hub) > .wrap:has(> h1){position:relative}
/* !important nur, wo artikel.html.twig Inline-Stile setzt (H1: font-size,
   max-width, line-height; Lead: max-width). */
section:has(.k8s-hub) > .wrap > h1{white-space:pre-line;max-width:none!important;font-size:clamp(2rem,3.6vw,2.9rem)!important;line-height:1.12!important;letter-spacing:-.025em!important}
section:has(.k8s-hub) > .wrap > .lead{font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.62;max-width:62ch!important;color:var(--muted)}
/* Der Body-Container blendet per .rv mit translateY ein; transform wuerde
   zum Bezugsrahmen des absolut gesetzten Schnelleinstiegs. */
section:has(.k8s-hub) .art-body.rv:has(.k8s-hub){transform:none}

.k8s-hub .k8s-schnell{display:none}
@media (min-width:1100px){
  section:has(.k8s-hub) > .wrap > h1,
  section:has(.k8s-hub) > .wrap > .lead{max-width:calc(100% - 360px)!important}
  .k8s-hub .k8s-schnell{display:block;position:absolute;top:84px;right:24px;width:300px;border-left:3px solid var(--accent-text);padding:4px 0 4px 22px}
  .k8s-hub .k8s-schnell .k8s-schnell-titel{margin:0 0 .7rem;font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--heading)}
  .k8s-hub .k8s-schnell a{display:block;margin:.55rem 0;font-size:.92rem;font-weight:600;text-decoration:none;color:var(--accent-text)}
  .k8s-hub .k8s-schnell a:hover{text-decoration:underline;text-underline-offset:3px}
}

/* ---------- Inhaltsverzeichnis (Theme: sticky ab 961 px) ---------- */
/* responsive.css setzt html,body{overflow-x:hidden}. overflow-y wird dadurch
   zu auto, body wird Scroll-Container - gescrollt wird aber der Viewport, und
   das Inhaltsverzeichnis klebt an einem body, der nie scrollt (gemessen:
   top -776 px nach Sprung zu Abschnitt 02). clip schneidet ebenfalls
   horizontal ab, erzeugt aber keinen Scroll-Container; overflow-y bleibt
   visible. hidden davor als Rueckfall fuer Browser ohne clip. */
html:has(.k8s-hub),body:has(.k8s-hub){overflow-x:hidden;overflow-x:clip}
section:has(.k8s-hub) .art-toc{border-top:2px solid var(--accent-text)}
section:has(.k8s-hub) .art-toc ol{gap:.15rem}
section:has(.k8s-hub) .art-toc a{font-size:.9rem;line-height:1.4;padding:.42rem 0}
section:has(.k8s-hub) .art-toc a::before{content:counter(toc,decimal-leading-zero);min-width:1.4rem;padding-top:.12rem}

/* ---------- Abschnitte: Trennlinie + nummeriertes Label ---------- */
.k8s-hub .k8s-label{margin:3.4rem 0 0;padding-top:2.6rem;border-top:1px solid var(--line);font-family:var(--display);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);scroll-margin-top:90px}
.k8s-hub .k8s-label:first-of-type{margin-top:0;padding-top:0;border-top:0}
.k8s-hub .k8s-label + h2{margin-top:.55rem;font-size:clamp(1.45rem,2.4vw,1.85rem);line-height:1.22;letter-spacing:-.015em}
.k8s-hub h2#was-ist-kubernetes + p{font-size:1.08rem;color:var(--text)}
.k8s-hub h3{scroll-margin-top:90px}

.k8s-hub .k8s-hinweis{margin:1.5rem 0;padding:1.1rem 1.4rem;background:var(--surface-2);border-left:3px solid var(--accent-text);border-radius:0 var(--radius) var(--radius) 0}
.k8s-hub .k8s-hinweis p{margin:0;color:var(--text)}
.k8s-hub .k8s-klein p{font-size:.87rem;line-height:1.6}

/* ---------- Karten: Entscheidung und Einstiegswege ---------- */
.k8s-hub .k8s-zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:1.6rem 0}
.k8s-hub .k8s-karte{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:1.4rem 1.5rem 1.5rem}
.k8s-hub .k8s-karte.k8s-weg{background:var(--surface-2)}
.k8s-hub .k8s-karte h3{margin-top:0;font-size:1.08rem;line-height:1.35}
.k8s-hub .k8s-karte ul{margin-top:.8rem}
.k8s-hub .k8s-karte li p{margin-top:0}
.k8s-hub .k8s-karte p{font-size:.94rem}
/* Link-Absatz der Einstiegswege (Absatz 1 ist das Kartenlabel) */
.k8s-hub .k8s-weg p:nth-of-type(3){font-weight:700}
.k8s-hub .k8s-tag{margin:0 0 .6rem;font-size:.68rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--accent-text)}

/* ---------- Architektur: hervorgehobener Bereich ---------- */
.k8s-hub .k8s-arch{margin:1.8rem 0;padding:18px;border-radius:14px;background:#112e3d}
.k8s-hub .k8s-arch img{margin:0;border:0;border-radius:10px;width:100%}
.k8s-hub .k8s-arch > p:has(img){margin:0}
.k8s-hub .k8s-bildtext p{margin:.9rem .2rem 0;font-size:.86rem;color:#c6dce5}
/* Schmale Ansicht: die SVG-Beschriftung waere unter 6 px - dort dieselbe
   Grafik als umbrechendes HTML. Immer nur eine Fassung sichtbar. */
.k8s-hub .k8s-arch-html{display:none;color:#fff;font-size:.82rem;line-height:1.35}
.k8s-hub .k8s-arch-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;margin-bottom:12px;font-weight:700}
.k8s-hub .k8s-arch-kopf small{font-weight:400;color:#c6dce5}
.k8s-hub .k8s-arch-cp{border:1px solid #577381;background:#1b3b4b;border-radius:8px;padding:12px}
.k8s-hub .k8s-arch-cp b{display:block;color:#a8e8f7;font-size:1rem}
.k8s-hub .k8s-arch-cp > span{display:block;margin-top:2px;color:#c6dce5}
.k8s-hub .k8s-arch-teile{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}
.k8s-hub .k8s-arch-teile span,.k8s-hub .k8s-arch-node span{border:1px solid #648492;border-radius:5px;padding:6px;text-align:center}
.k8s-hub .k8s-arch-pfeil{margin:10px 0;text-align:center;color:#a8e8f7}
.k8s-hub .k8s-arch-nodes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.k8s-hub .k8s-arch-node{border:1px solid #648492;background:#183644;border-radius:8px;padding:10px}
.k8s-hub .k8s-arch-node > div{display:grid;gap:6px;margin-top:8px}
.k8s-hub .k8s-arch-node span{background:#284f60;border-color:#91c5d5}
@media (max-width:719px){
  .k8s-hub .k8s-arch > p:has(img){display:none}
  .k8s-hub .k8s-arch-html{display:block}
  .k8s-hub .k8s-arch{padding:16px}
}

/* ---------- Begriffe als Definitionsbloecke ---------- */
.k8s-hub .k8s-begriffe{margin:1rem 0 1.4rem;border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
.k8s-hub .k8s-begriffe p{display:grid;grid-template-columns:140px minmax(0,1fr);gap:18px;margin:0;padding:.85rem 1.2rem;border-top:1px solid var(--line);font-size:.95rem}
.k8s-hub .k8s-begriffe p:first-child{border-top:0}
.k8s-hub .k8s-begriffe strong{color:var(--heading)}
.k8s-hub .k8s-kette p{display:inline-block;margin:.6rem 0 0;padding:.75rem 1.1rem;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);font-weight:700;color:var(--heading)}

/* ---------- Tabelle: scrollt im eigenen Rahmen ----------
   width:0 + min-width:100% nimmt die Mindestbreite der Tabelle aus der
   Spaltenberechnung - sonst laeuft schmal der ganze Artikel ueber. */
.k8s-hub .k8s-tabelle{width:0;min-width:100%;overflow-x:auto;margin:1.6rem 0;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.k8s-hub .k8s-tabelle table{display:table;margin:0;min-width:560px;font-size:.9rem}
.k8s-hub .k8s-tabelle th,.k8s-hub .k8s-tabelle td{border:0;border-bottom:1px solid var(--line);padding:.85rem 1rem}
.k8s-hub .k8s-tabelle th{font-size:.8rem}
.k8s-hub .k8s-tabelle tr:last-child td{border-bottom:0}
.k8s-hub .k8s-tabelle td:first-child{width:24%;font-weight:700;color:var(--heading)}

/* ---------- Lernstrecke: fuenf nummerierte Schritte ---------- */
.k8s-hub .k8s-schritte{counter-reset:k8s-schritt;margin:2rem 0 1rem}
.k8s-hub .k8s-schritt{counter-increment:k8s-schritt;position:relative;padding:0 0 1.6rem 3.6rem}
.k8s-hub .k8s-schritt::before{content:counter(k8s-schritt,decimal-leading-zero);position:absolute;left:0;top:0;width:2.3rem;height:2.3rem;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:var(--surface);font-family:var(--display);font-size:.78rem;font-weight:700;color:var(--accent-text)}
.k8s-hub .k8s-schritt::after{content:"";position:absolute;left:1.15rem;top:2.6rem;bottom:.3rem;border-left:1px solid var(--line)}
.k8s-hub .k8s-schritt:last-child::after{display:none}
.k8s-hub .k8s-schritt h3{margin-top:.3rem;font-size:1.06rem}
.k8s-hub .k8s-schritt p{margin-top:.45rem;font-size:.94rem}
.k8s-hub .k8s-schritt p:nth-of-type(2){font-size:.84rem}
.k8s-hub .k8s-schritt p:last-of-type{font-weight:700}

/* ---------- Vertiefung: vier Linkkarten (ganze Karte klickbar) ---------- */
.k8s-hub .k8s-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:1.6rem 0 2rem}
.k8s-hub .k8s-linkkarte{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:1.25rem 1.35rem;transition:border-color .15s}
.k8s-hub .k8s-linkkarte:hover,.k8s-hub .k8s-linkkarte:focus-within{border-color:var(--accent-text)}
.k8s-hub .k8s-linkkarte h3{margin-top:0;font-size:1.02rem;line-height:1.4}
.k8s-hub .k8s-linkkarte p{margin-top:.5rem;font-size:.9rem}
.k8s-hub .k8s-linkkarte p:last-child{margin-top:auto;padding-top:.8rem;font-weight:700}
.k8s-hub .k8s-linkkarte p:last-child a{text-decoration:none}
.k8s-hub .k8s-linkkarte p:last-child a::after{content:"";position:absolute;inset:0;border-radius:12px}
.k8s-hub .k8s-linkkarte p:last-child a:focus-visible{outline:none}
.k8s-hub .k8s-linkkarte:has(a:focus-visible){outline:3px solid var(--accent-text);outline-offset:3px}

/* ---------- Angebot: ruhiger CTA-Bereich ---------- */
.k8s-hub .k8s-cta{margin:1.8rem 0 0;padding:1.6rem 1.8rem 1.8rem;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}
.k8s-hub .k8s-cta h3{margin-top:0;font-size:1.2rem}
.k8s-hub .k8s-cta a.btn{margin:1.1rem .6rem 0 0}

/* ---------- FAQ: native details/summary ---------- */
.k8s-hub .k8s-faq{border-bottom:1px solid var(--line)}
.k8s-hub .k8s-faq:first-of-type{border-top:1px solid var(--line);margin-top:1.2rem}
.k8s-hub .k8s-faq summary{display:flex;justify-content:space-between;align-items:center;gap:1.2rem;padding:1.05rem 0;cursor:pointer;list-style:none}
.k8s-hub .k8s-faq summary::-webkit-details-marker{display:none}
.k8s-hub .k8s-faq summary::after{content:"+";flex:none;font-size:1.5rem;line-height:1;color:var(--accent-text)}
.k8s-hub .k8s-faq[open] summary::after{content:"−"}
.k8s-hub .k8s-faq summary:focus-visible{outline:3px solid var(--accent-text);outline-offset:4px;border-radius:4px}
.k8s-hub .k8s-faq summary h3{margin:0;font-size:1.02rem;line-height:1.45}
.k8s-hub .k8s-faq > p{margin:0 2.2rem 1.2rem 0;font-size:.95rem}

/* ---------- Quellen ---------- */
.k8s-hub .k8s-quellen > p{font-size:.87rem}
.k8s-hub .k8s-quellen ol{font-size:.9rem}
.k8s-hub .k8s-quellen li p{margin-top:0}

/* ---------- Schmal ---------- */
@media (max-width:719px){
  .k8s-hub .k8s-zwei,.k8s-hub .k8s-links{grid-template-columns:minmax(0,1fr)}
  .k8s-hub .k8s-begriffe p{grid-template-columns:minmax(0,1fr);gap:.2rem}
  .k8s-hub .k8s-label{margin-top:2.6rem;padding-top:2rem}
  .k8s-hub .k8s-schritt{padding-left:3.1rem}
  .k8s-hub .k8s-cta{padding:1.3rem 1.2rem 1.4rem}
}