/* cenroq-policies.css — die Formatvorlage fuer /open-source/policies und alles
   darunter: den Katalog, die Bundle-Uebersicht, 178 Policy-Seiten und die
   Bundle-Seiten.

   Warum diese eine Datei von der Hausregel abweicht (eine <style>-Insel je
   Seite): der Bereich hat ab jetzt 182 Seiten. Der frueher hier stehende
   Kommentar hielt fest, dass sich Verdopplung bei DREI Seiten lohnt, weil sie
   Auseinanderlaufen verhindert und nur vier Kilobyte kostet. Bei 182 kostet
   dieselbe Rechnung rund fuenf Megabyte im Binaerprogramm, und zwar an
   buchstaeblich identischen Bytes. Also eine Quelle, verlinkt statt eingebettet,
   einmal geladen und fuer den ganzen Bereich zwischengespeichert. Die neun
   Seiten ausserhalb des Bereichs bleiben unangetastet.

   Farben, die hier bewusst literal bleiben — siehe den gleichen Kommentar auf
   der kubeapt-Seite:

     · #050D16 #0A1320   Terminalgrund, hier fuer die CEL-Bloecke. Ein
       Schweregrad-Farbfeld auf hellem Grund waere fuer Code zu unruhig.
     · #CDD9E6           Terminalschrift auf ebendiesem Grund.

   Die vier Schweregrade kommen aus der Bibliothek: --cenroq-critical/-high/
   -medium/-low. Nur der Name weicht ab — die Annotation im Policy-Repo sagt
   "Moderate", das Token heisst "medium". Die Umbenennung passiert genau hier,
   einmal, in CSS: nicht im Generator, nicht in einem data-Attribut und nicht in
   einer URL, damit es nur eine Stelle gibt, an der beide Namen auftauchen. */
:root{
  --navy:var(--cenroq-core-navy);--navy-2:var(--cenroq-dark-2);--navy-3:var(--cenroq-dark-3);
  --blue:var(--cenroq-core-blue);--blue-deep:var(--cenroq-brand-dark);--blue-bright:var(--cenroq-brand-bright);
  --orange:var(--cenroq-core-amber);--tile:var(--cenroq-core-sky);--tile-2:var(--cenroq-panel-strong);
  --line:var(--cenroq-line);--line-dark:var(--cenroq-dark-line);
  --bg:var(--cenroq-core-white);--bg-soft:var(--cenroq-panel);
  --text:var(--cenroq-core-navy);--muted:var(--cenroq-muted);--muted-light:var(--cenroq-line-strong);
  --white:var(--cenroq-core-white);--green:var(--cenroq-ok);
  --term-bg:#050D16;--term-ink:#CDD9E6;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--cenroq-font);line-height: var(--cenroq-leading-loose);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
h1,h2,h3,h4,.display{font-family:var(--cenroq-font-display);letter-spacing: var(--cenroq-tracking-tighter)}
.mono{font-family:var(--cenroq-font-mono)}
a{color:inherit;text-decoration:none}
/* Das UA-[hidden] hat die schwaechste denkbare Spezifitaet; jede eigene
   display-Regel schlaegt es. Leiste, Blaetterer und Leermeldung werden ueber das
   Attribut gesteuert, also muss es hier durchgesetzt werden. */
[hidden]{display:none!important}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,0.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:inline-flex;align-items:center}
.logo img{height:30px;width:auto;display:block;transform:translateY(var(--cenroq-logo-optical-nudge))}
.nav-links{display:flex;gap:32px;align-items:center}
.nav-links a{color:var(--muted);font-size:var(--cenroq-text-lg);font-weight: var(--cenroq-weight-regular);transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--navy)}
.nav-links a.active{font-weight: var(--cenroq-weight-bold)}
.nav-cta{background:var(--blue);color:var(--white)!important;padding:10px 20px;border-radius:8px;font-size:var(--cenroq-text-lg);font-weight: var(--cenroq-weight-bold);transition:background .2s,transform .2s}
.nav-cta:hover{background:var(--blue-deep);transform:translateY(-1px)}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:0;padding:0}
.burger span{width:24px;height:2px;background:var(--navy);border-radius:2px}

/* HERO */
.hero{position:relative;background:var(--navy);overflow:hidden;padding:72px 0 64px}
.hero-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse 70% 80% at 30% 40%,var(--cenroq-core-black),transparent 72%);-webkit-mask-image:radial-gradient(ellipse 70% 80% at 30% 40%,var(--cenroq-core-black),transparent 72%)}
.hero-inner{position:relative}
.oss-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--cenroq-font-mono);font-size:var(--cenroq-text-sm);color:var(--blue-bright);margin-bottom:22px;border:1px solid var(--line-dark);background:var(--navy-2);padding:6px 13px;border-radius:7px}
.oss-eyebrow .lic{color:var(--muted-light)}
h1.hero-title{font-size:var(--cenroq-text-hero);line-height: var(--cenroq-leading-tight);color:var(--white);letter-spacing: var(--cenroq-tracking-tightest);font-family:var(--cenroq-font-mono);font-weight: var(--cenroq-weight-bold)}
h1.hero-title .b{color:var(--blue-bright)}
.hero-sub{margin-top:22px;font-size:var(--cenroq-text-3xl);color:#C3D2E2;max-width:640px;line-height: var(--cenroq-leading-loose)}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.badge{display:inline-flex;align-items:center;font-family:var(--cenroq-font-mono);font-size:var(--cenroq-text-xs);border-radius:6px;overflow:hidden;border:1px solid var(--line-dark)}
.badge .k{background:#0A1726;color:var(--muted-light);padding:4px 9px}
.badge .v{padding:4px 9px;font-weight: var(--cenroq-weight-regular);color:var(--white)}
.badge .v.green{background:rgba(47,174,120,.16);color:#5fd6a3}
.badge .v.blue{background:rgba(54,123,188,.18);color:var(--blue-bright)}
.badge .v.orange{background:rgba(255,177,0,.16);color:var(--orange)}
/* Das Schweregrad-Abzeichen im dunklen Hero traegt die Vollfarbe, nicht die
   16-Prozent-Fuellung der drei darueber: es ist die eine Angabe, nach der man
   auf einer Policy-Seite zuerst sucht. Amber braucht darauf Navy — dieselbe
   Rechnung wie bei .pcard-sev weiter unten. */
.badge .v.sev{background:var(--sev);color:var(--white)}
.badge.s-moderate .v.sev{color:var(--navy)}
.cta-row{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap;align-items:center}
.btn-primary{line-height:normal;background:var(--blue);color:var(--white);font-weight: var(--cenroq-weight-bold);font-size:var(--cenroq-text-xl);padding:14px 26px;border-radius:9px;border:1px solid transparent;cursor:pointer;transition:background .2s,transform .2s,box-shadow .2s;display:inline-flex;align-items:center;gap:9px}
.btn-primary:hover{background:var(--blue-bright);transform:translateY(-2px);box-shadow:0 4px 14px rgba(9,27,45,.13)}
.btn-ghost{line-height:normal;background:transparent;color:var(--white);font-weight: var(--cenroq-weight-bold);font-size:var(--cenroq-text-xl);padding:14px 24px;border-radius:9px;border:1px solid var(--line-dark);cursor:pointer;transition:border-color .2s,background .2s;display:inline-flex;align-items:center;gap:9px}
.btn-ghost:hover{border-color:var(--blue);background:var(--navy-2)}

/* SEVERITY BAR — die Spuren sind flex:<Anzahl>, das Band ist also selbst das
   Diagramm. Kein Balken unter 1fr-Mindestbreite, damit "High" mit 22 von 178
   noch seine Zahl zeigt. */
.sevbar{list-style:none;display:flex;gap:4px;margin-top:26px;max-width:680px}
.sevbar li{min-width:74px;border-radius:8px;background:var(--sev);overflow:hidden}
.sevbar a{display:block;padding:10px 12px;color:var(--white)}
.sevbar b{display:block;font-size:var(--cenroq-text-3xl);font-weight: var(--cenroq-weight-bold);line-height:1.1}
.sevbar span{font-family:var(--cenroq-font-mono);font-size:var(--cenroq-text-2xs);text-transform:uppercase;letter-spacing: var(--cenroq-tracking-wide);opacity:.86}
.sevbar li.s-moderate a{color:var(--navy)}

section.block{padding:88px 0}
/* Die Navbar klebt und ist 73px hoch (72 + 1px Rand). Ohne das hier landet jeder
   Sprung auf #catalog, #bundles oder #examples so, dass die Ueberschrift hinter
   der Leiste liegt — auch bei ?sev=critical#catalog aus dem Hero und bei der
   Weiterleitung aus den Bundle-READMEs. */
section[id]{scroll-margin-top:88px}
.sec-head{margin-bottom:34px;max-width:760px}
.sec-eyebrow{font-family:var(--cenroq-font-mono);font-size:var(--cenroq-text-sm);letter-spacing: var(--cenroq-tracking-widest);text-transform:uppercase;color:var(--blue);margin-bottom:14px;display:block}
h2.sec-title{font-size:var(--cenroq-text-section);font-weight: var(--cenroq-weight-bold);color:var(--navy);line-height: var(--cenroq-leading-tight);letter-spacing: var(--cenroq-tracking-tighter)}
.sec-desc{margin-top:16px;font-size:var(--cenroq-text-2xl);color:var(--muted);line-height: var(--cenroq-leading-loose)}
.sec-desc a{color:var(--blue);font-weight: var(--cenroq-weight-bold)}

/* SEVERITY TOKENS — die einzige Stelle, an der "Moderate" und "medium"
   aufeinandertreffen. --sev erbt in die Karte, das Abzeichen, den linken Rand
   und die Filterknoepfe, also faerbt eine Klasse alles vier. */
.s-critical{--sev:var(--cenroq-critical)}
.s-high{--sev:var(--cenroq-high)}
.s-moderate{--sev:var(--cenroq-medium)}
.s-low{--sev:var(--cenroq-low)}
/* s-none traegt die siebzehn Istio- und NetworkPolicy-Vorlagen. Sie haben keinen
   Schweregrad — nicht "noch keinen", sondern gar keinen: sie erzwingen nichts.
   Eine eigene, betont neutrale Farbe statt einer geerbten sagt genau das, und
   sie ist benannt, damit CSS sich nicht auf das FEHLEN einer Klasse verlassen
   muss. */
.s-none{--sev:var(--cenroq-line-strong)}
.s-none .pcard-sev{color:var(--navy);background:var(--bg-soft);border:1px solid var(--line)}

/* BUNDLE CARDS */
.bgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.bcard{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:24px 22px;display:flex;flex-direction:column;gap:14px;scroll-margin-top:96px}
.bcard-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.bcard-head h3{font-size:var(--cenroq-text-3xl);font-weight: var(--cenroq-weight-bold);color:var(--navy)}
.bver{font-family:var(--cenroq-font-mono);font-size:var(--cenroq-text-xs);color:var(--muted);background:var(--bg-soft);border:1px solid var(--line);padding:2px 8px;border-radius:5px}
.bdesc{font-size:var(--cenroq-text-md);color:var(--muted);line-height: var(--cenroq-leading-normal)}
.bstats{display:flex;flex-wrap:wrap;gap:16px;font-size:var(--cenroq-text-md);color:var(--muted)}
.bstats b{color:var(--navy);font-weight: var(--cenroq-weight-bold)}
.bmix{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.bmix li{font-family:var(--cenroq-font-mono);font-size:var(--cenroq-text-2xs);text-transform:uppercase;letter-spacing: var(--cenroq-tracking-wide);color:var(--white);background:var(--sev);padding:3px 8px;border-radius:5px}
.bmix li.s-moderate{color:var(--navy)}
.bcard-cta{margin-top:auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.bcard-cta .btn-primary{font-size:var(--cenroq-text-lg);padding:11px 20px}
.blabels{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
/* Kein text-transform hier, anders als bei den uebrigen Mono-Plaketten: das sind
   echte Label-Schluessel zum Abtippen, und in Grossbuchstaben gesetzt sahen sie
   aus, als waeren sie so zu schreiben. Kubernetes-Labelschluessel sind
   kleingeschrieben. */
.blabels li{font-family:var(--cenroq-font-mono);font-size:var(--cenroq-text-2xs);color:var(--blue-deep);background:var(--tile);padding:3px 8px;border-radius:5px;overflow-wrap:anywhere}

/* KATALOG-LAYOUT — Filter links angeheftet, Karten rechts.
   260px + 28px Spalte gehen von den 1124px Innenbreite ab und lassen 836px, in
   denen minmax(320px,1fr) genau zwei Kartenspalten ergibt. Zwoelf je Seite sind
   damit sechs Reihen. */
.cat-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:start}
/* Die zweite Spur haengt an .js, genau wie die Leiste selbst. Eine explizite
   260px-Spur steht auch dann da, wenn ihr einziges Kind display:none ist —
   ohne Skript blieben also 260px leere Rinne links und die Karten rueckten
   grundlos nach rechts. */
.js .cat-layout{grid-template-columns:260px minmax(0,1fr)}
.cat-main{min-width:0}

/* FILTERLEISTE — nur mit Skript. Ohne .js steht sie gar nicht da. */
.pol-toolbar{display:none}
/* max-height plus overflow-y sind kein Beiwerk: angeheftet und sechs Gruppen
   hoch passt die Leiste auf ein kurzes Fenster (etwa ein Laptop im Querformat mit
   offenen Entwicklerwerkzeugen) nicht mehr ganz, und ohne beides waere der
   Bundle-Filter dort unerreichbar — angeheftete Elemente scrollen nicht mit. */
.js .pol-toolbar{display:block;position:sticky;top:88px;max-height:calc(100dvh - 108px);overflow-y:auto;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:18px 18px 16px}
.pol-filters{display:flex;flex-direction:column;gap:18px}
.fgroup{display:flex;flex-direction:column;gap:8px;min-width:0}
.fgroup-h,.pol-search{font-family:var(--cenroq-font-mono);font-size:var(--cenroq-text-2xs);text-transform:uppercase;letter-spacing: var(--cenroq-tracking-widest);color:var(--muted)}
.fgroup input,.fgroup select{width:100%;min-width:0;font-family:inherit;font-size:var(--cenroq-text-md);color:var(--navy);background:var(--white);border:1px solid var(--line);border-radius:9px;padding:9px 11px}
.fgroup input:focus-visible,.fgroup select:focus-visible,.sevf:focus-visible,.pol-linkbtn:focus-visible,.pg:focus-visible{outline:var(--cenroq-focus)}
.sevf-row{display:flex;gap:6px;flex-wrap:wrap}
.sevf{font-family:var(--cenroq-font-mono);font-size:var(--cenroq-text-2xs);text-transform:uppercase;letter-spacing: var(--cenroq-tracking-wide);color:var(--muted);background:var(--white);border:1px solid var(--line);border-radius:7px;padding:8px 10px;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.sevf:hover{border-color:var(--sev);color:var(--navy)}
.sevf[aria-pressed="true"]{background:var(--sev);border-color:var(--sev);color:var(--white)}
.sevf.s-moderate[aria-pressed="true"]{color:var(--navy)}
.sevf-n{opacity:.75}
/* Steht in der Leiste, also unter den Filtern und nicht neben ihnen: bei 224px
   Innenbreite passen "64 of 195 policies · page 1 of 6" und "Clear filters"
   nicht auf eine Zeile, und space-between haette sie ineinander geschoben. */
.pol-status{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-family:var(--cenroq-font-mono);font-size:var(--cenroq-text-sm);color:var(--muted)}
.pol-linkbtn{font-family:var(--cenroq-font-mono);font-size:var(--cenroq-text-sm);color:var(--blue);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline}

/* Der Gegenhinweis zur Leiste: ohne Skript gibt es weder Filter noch Blaetterer,
   dafuer steht die Liste vollstaendig da. Das ist eine Zusage, kein Defekt —
   also wird sie auch ausgesprochen, statt den Leser raten zu lassen, warum
   178 Karten am Stueck kommen. */
.pol-nojs{margin-bottom:20px;border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:11px;padding:14px 16px;font-size:var(--cenroq-text-md);color:var(--muted);background:var(--bg-soft)}
.js .pol-nojs{display:none}

/* KATALOGKARTEN
   Das Raster fuellt automatisch auf: bei 1180px Innenbreite ergibt
   minmax(320px,1fr) drei Spalten, bei schmalen Fenstern zwei und dann eine, ohne
   dass eine Bruchstelle je gepflegt werden muesste.

   minmax(320px,1fr) und nicht auto-fit mit 1fr: eine reine fr-Spur faellt nie
   unter die min-content-Breite ihres Inhalts, und der laengste Policy-Name ist
   ein Token von 51 Zeichen ohne Trennstelle. Ohne die feste Untergrenze plus
   overflow-wrap:anywhere an .pcard-name risse diese eine Karte die Spalte auf
   und die 178 Karten stuenden auf verschiedenen Kanten. Dieselbe Falle wie beim
   .matrix-Raster auf der kubeapt-Seite. */
.pcard-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;align-items:stretch}
.pcard{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-left:3px solid var(--sev);border-radius:14px;padding:18px 20px 16px;scroll-margin-top:150px;transition:box-shadow .2s,transform .2s;content-visibility:auto;contain-intrinsic-size:auto 191px}
.pcard:hover{box-shadow:0 8px 24px rgba(9,27,45,.10);transform:translateY(-2px)}
.pcard:focus-visible{outline:var(--cenroq-focus);outline-offset:2px}
.pcard:target{box-shadow:0 0 0 2px var(--blue)}
.pcard-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.pcard-sev{font-family:var(--cenroq-font-mono);font-size:var(--cenroq-text-2xs);text-transform:uppercase;letter-spacing: var(--cenroq-tracking-wide);background:var(--sev);color:var(--white);padding:3px 8px;border-radius:5px;white-space:nowrap;flex-shrink:0}
/* Amber traegt auf Weiss nur 3.19:1 und das Abzeichen ist 10px gross. Navy
   darauf misst 5.46:1. (0,2,0) schlaegt die weisse Grundregel (0,1,0). */
.s-moderate .pcard-sev{color:var(--navy)}
.pcard-meta{font-family:var(--cenroq-font-mono);font-size:var(--cenroq-text-2xs);color:var(--muted);text-align:right;min-width:0;overflow-wrap:anywhere;line-height: var(--cenroq-leading-normal)}
.pcard-title{font-size:var(--cenroq-text-xl);font-weight: var(--cenroq-weight-bold);color:var(--navy);line-height: var(--cenroq-leading-tight)}
.pcard-name{margin-top:5px;font-family:var(--cenroq-font-mono);font-size:var(--cenroq-text-xs);color:var(--blue-deep);overflow-wrap:anywhere;line-height: var(--cenroq-leading-normal)}
/* Drei Zeilen, dann Auslassung. Die laengste Beschreibung hat 142 Zeichen und
   braucht in einer 320px-Karte vier Zeilen; ohne Deckel stuenden die Karten
   einer Reihe verschieden hoch. Der volle Text steht einen Klick weiter auf der
   Policy-Seite — genau die Teilung, fuer die es diese Seiten gibt. */
/* overflow-wrap:anywhere gehoert dazu und ist kein Beiwerk: einige
   Beschreibungen tragen Bezeichner wie
   "ValidatingWebhookConfiguration/MutatingWebhookConfiguration" ohne
   Trennstelle. Der Kasten ist auf drei Zeilen gedeckelt und schneidet ab —
   ein unbrechbares Wort laeuft dann waagerecht aus dem Kasten und wird hart
   abgeschnitten, statt umzubrechen, und die Auslassung erscheint nie, weil sie
   ans Zeilenende gehoert und nicht an die Kante. */
.pcard-desc{margin-top:12px;font-size:var(--cenroq-text-md);color:var(--muted);line-height: var(--cenroq-leading-normal);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* Kein text-transform: hier steht ein Kubernetes-Kind, und
   VALIDATINGADMISSIONPOLICY auf 178 Karten ist Laerm — ausserdem ist
   ValidatingAdmissionPolicy die richtige Schreibweise. */
.pcard-foot{margin-top:auto;padding-top:14px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-family:var(--cenroq-font-mono);font-size:var(--cenroq-text-2xs);color:var(--muted)}
.pcard-kind{min-width:0;overflow-wrap:anywhere}
.pcard-go{color:var(--blue);font-size:var(--cenroq-text-lg);line-height:1;transition:transform .2s}
.pcard:hover .pcard-go{transform:translateX(3px)}
.pcard.is-off,.pcard.is-page{display:none}
.pol-empty{padding:44px 20px;text-align:center;color:var(--muted);font-size:var(--cenroq-text-lg)}

/* BLAETTERER — vom Skript gefuellt und ohne Skript gar nicht da. Die Zahlen sind
   <button> und keine Links: ein Seitenwechsel laedt nichts nach, er blendet um,
   und ein Link, der das vortaeuscht, ist im neuen Tab eine leere Zusage. */
.pager{display:none}
.js .pager{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px;margin-top:30px}
.pg{font-family:var(--cenroq-font-mono);font-size:var(--cenroq-text-sm);min-width:38px;height:38px;padding:0 11px;display:inline-flex;align-items:center;justify-content:center;background:var(--white);border:1px solid var(--line);border-radius:9px;color:var(--muted);cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.pg:hover:not(:disabled){border-color:var(--blue);color:var(--navy)}
.pg[aria-current="page"]{background:var(--navy);border-color:var(--navy);color:var(--white)}
.pg:disabled{opacity:.38;cursor:default}
.pg-gap{display:inline-flex;align-items:center;padding:0 2px;font-family:var(--cenroq-font-mono);font-size:var(--cenroq-text-sm);color:var(--muted-light)}

/* CEL-BLOECKE — auf der Katalogseite nicht mehr gebraucht, auf jeder Policy- und
   Bundle-Seite schon.
   overflow-wrap:anywhere ist hier kein Kosmetikum. Die laengste CEL-Zeile hat
   296 Zeichen ohne Trennstelle, das sind rund 2300px min-content — ohne die
   Regel zieht dieser eine Ausdruck seinen Kasten und mit ihm die Seite auf.
   overflow-x faengt ab, was sich trotzdem nicht brechen laesst. */
.cel{background:var(--term-bg);border:1px solid var(--line-dark);border-radius:9px;padding:12px 14px;overflow-x:auto}
.cel+.cel{margin-top:8px}
.cel code{display:block;font-family:var(--cenroq-font-mono);font-size:var(--cenroq-text-sm);color:var(--term-ink);white-space:pre-wrap;overflow-wrap:anywhere;line-height: var(--cenroq-leading-relaxed)}

/* POLICY-SEITE */
/* flex mit width:fit-content, nicht inline-flex: .oss-eyebrow darunter ist
   selbst inline-flex, und nebeneinander lasen sich Rueckweg und Kennzeichnung
   wie eine Zeile. width:fit-content haelt trotzdem die Trefferflaeche am Text
   statt ueber die ganze Breite. */
.pback{display:flex;width:fit-content;align-items:center;gap:7px;font-family:var(--cenroq-font-mono);font-size:var(--cenroq-text-sm);color:var(--muted-light);margin-bottom:18px;transition:color .2s}
.pback:hover{color:var(--white)}
h1.phero-title{font-size:var(--cenroq-text-hero);line-height: var(--cenroq-leading-tight);color:var(--white);letter-spacing: var(--cenroq-tracking-tightest);font-weight: var(--cenroq-weight-bold)}
.phero-name{margin-top:10px;font-family:var(--cenroq-font-mono);font-size:var(--cenroq-text-lg);color:var(--blue-bright);overflow-wrap:anywhere}
.pdet{margin-top:38px}
.pdet:first-child{margin-top:0}
.pdet-h{font-family:var(--cenroq-font-mono);font-size:var(--cenroq-text-sm);letter-spacing: var(--cenroq-tracking-widest);text-transform:uppercase;color:var(--blue);margin-bottom:14px;font-weight: var(--cenroq-weight-regular)}
.pdet p{font-size:var(--cenroq-text-xl);color:var(--muted);line-height: var(--cenroq-leading-relaxed);max-width:820px}
/* Alle drei sind <p> INNERHALB von .pdet, also schlaegt .pdet p (0,1,1) eine
   blosse Klasse (0,1,0) und ihre Schriftgroesse kaeme nie an. Darum jeweils
   mitgeschriebenes .pdet davor — das ist (0,2,0) und gewinnt. */
.pdet .pdet-msg{border-left:3px solid var(--line);padding-left:14px;font-style:italic;font-size:var(--cenroq-text-lg)}
.plist{list-style:none;display:flex;flex-direction:column;gap:6px;max-width:820px}
.plist li{font-family:var(--cenroq-font-mono);font-size:var(--cenroq-text-md);color:var(--navy);background:var(--bg-soft);border:1px solid var(--line);border-radius:8px;padding:9px 12px;overflow-wrap:anywhere}
.pbundles{list-style:none;display:flex;flex-direction:column;gap:8px;max-width:820px}
.pbundles li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1px solid var(--line);border-radius:9px;padding:10px 14px;background:var(--white)}
.pbundles a{font-family:var(--cenroq-font-mono);font-size:var(--cenroq-text-md);color:var(--blue)}
.pol-nb{font-family:var(--cenroq-font-mono);color:var(--cenroq-high);border:1px solid var(--cenroq-high);border-radius:5px;padding:1px 6px;font-size:var(--cenroq-text-2xs)}
.pdet .pvar-n{font-family:var(--cenroq-font-mono);font-size:var(--cenroq-text-2xs);text-transform:uppercase;letter-spacing: var(--cenroq-tracking-wide);color:var(--muted);margin:12px 0 5px}
.pdet .pvar-n:first-of-type{margin-top:0}
.pdet-src{font-family:var(--cenroq-font-mono);font-size:var(--cenroq-text-sm);color:var(--blue);overflow-wrap:anywhere}
/* Das ganze Manifest, mit Kopierknopf oben rechts IM Kasten. Der Knopf sitzt
   absolut, damit er beim laengsten Manifest (3 KB, rund 90 Zeilen) nicht ans
   Ende wandert, wo ihn niemand sucht. max-height plus overflow-y deckelt genau
   dieses eine: neunzig Zeilen YAML schoeben die kubeapt-Befehle darunter aus
   dem Bild. */
.pyaml{position:relative;max-width:820px}
.pyaml .cel{max-height:420px;overflow-y:auto;padding-right:92px}
.pyaml .copy-btn{position:absolute;top:10px;right:10px}
.pdet .install{max-width:820px}
.pdet .bnote code{color:var(--navy);background:var(--bg-soft);border:1px solid var(--line);border-radius:5px;padding:1px 5px}
/* Ein Hinweis, kein Alarm: dass die Beschreibung stromaufwaerts noch ein
   Platzhalter ist, gehoert sichtbar gesagt statt weggelassen — weglassen liesse
   die Seite so aussehen, als gaebe es nichts zu sagen. */
.pdet .pstub{margin-top:14px;font-size:var(--cenroq-text-md);color:var(--muted);border:1px dashed var(--line);border-radius:9px;padding:11px 14px;max-width:820px}
.pnav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:48px;padding-top:26px;border-top:1px solid var(--line)}
.pnav a{display:flex;flex-direction:column;gap:5px;min-width:0;padding:14px 18px;border:1px solid var(--line);border-left:3px solid var(--sev);border-radius:12px;background:var(--white);transition:box-shadow .2s}
.pnav a:hover{box-shadow:0 6px 18px rgba(9,27,45,.09)}
.pnav .k{font-family:var(--cenroq-font-mono);font-size:var(--cenroq-text-2xs);text-transform:uppercase;letter-spacing: var(--cenroq-tracking-wide);color:var(--muted)}
.pnav .t{font-size:var(--cenroq-text-lg);font-weight: var(--cenroq-weight-bold);color:var(--navy);line-height: var(--cenroq-leading-normal)}
.pnav .n{font-family:var(--cenroq-font-mono);font-size:var(--cenroq-text-2xs);color:var(--muted);overflow-wrap:anywhere}
/* Die zweite Karte sitzt rechts, auch wenn die erste fehlt: die erste und die
   letzte Policy haben nur einen Nachbarn, und ohne das rutschte "weiter" dort
   in die linke Spalte und laese sich wie "zurueck". */
.pnav .next{text-align:right;grid-column:2}

/* BUNDLE-SEITEN */
.install{margin-top:16px;background:#0A1320;border:1px solid var(--line-dark);border-radius:11px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px}
.install code{font-family:var(--cenroq-font-mono);font-size:var(--cenroq-text-md);color:var(--cenroq-core-sky);overflow-wrap:anywhere;min-width:0}
.install code .pr{color:var(--blue-bright);user-select:none}
.copy-btn{background:var(--navy-3);border:1px solid var(--line-dark);color:var(--muted-light);font-size:var(--cenroq-text-sm);font-family:var(--cenroq-font-mono);padding:7px 12px;border-radius:7px;cursor:pointer;transition:.2s;display:flex;align-items:center;gap:6px;white-space:nowrap;flex-shrink:0}
.copy-btn:hover{color:var(--white);border-color:var(--blue)}
.copy-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
.bhero-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.bhero-desc{margin-top:22px;font-size:var(--cenroq-text-2xl);color:#C3D2E2;max-width:680px;line-height: var(--cenroq-leading-loose)}
.bnote{margin-top:14px;font-size:var(--cenroq-text-md);color:var(--muted);line-height: var(--cenroq-leading-normal)}
.bnote a,.bnote code{font-family:var(--cenroq-font-mono);font-size:var(--cenroq-text-sm)}
.bnote a{color:var(--blue);overflow-wrap:anywhere}
.lbl-list{list-style:none;display:flex;flex-direction:column;gap:10px}
.lbl-list li{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.lbl-mode{font-family:var(--cenroq-font-mono);font-size:var(--cenroq-text-2xs);text-transform:uppercase;letter-spacing: var(--cenroq-tracking-wide);background:var(--tile);color:var(--blue-deep);padding:3px 9px;border-radius:5px;min-width:74px;text-align:center}
.lbl-list code{font-family:var(--cenroq-font-mono);font-size:var(--cenroq-text-md);color:var(--navy);background:var(--bg-soft);border:1px solid var(--line);border-radius:7px;padding:6px 10px;overflow-wrap:anywhere}
/* Ein Kasten, keine Warnfarbe im Volltext: das ist eine Luecke in den Daten
   stromaufwaerts, kein Fehler der Seite. */
.bwarn{margin-top:18px;border:1px solid var(--cenroq-high);border-left-width:3px;border-radius:9px;padding:14px 16px;font-size:var(--cenroq-text-md);color:var(--muted);line-height: var(--cenroq-leading-normal)}
.bwarn b{color:var(--navy)}
.bwarn code{font-family:var(--cenroq-font-mono);font-size:var(--cenroq-text-sm)}
.broster{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.broster li{border:1px solid var(--line);border-left:3px solid var(--sev);border-radius:8px;background:var(--white)}
.broster a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px}
.broster a:hover{background:var(--bg-soft)}
.broster-n{font-family:var(--cenroq-font-mono);font-size:var(--cenroq-text-xs);color:var(--navy);overflow-wrap:anywhere;min-width:0}
.broster-s{font-family:var(--cenroq-font-mono);font-size:var(--cenroq-text-2xs);text-transform:uppercase;color:var(--sev);flex-shrink:0}

.ex-note{margin-top:22px;font-size:var(--cenroq-text-md);color:var(--muted);line-height: var(--cenroq-leading-normal)}
.ex-note a{color:var(--blue)}

/* UPGRADE BAND */
.upgrade{background:var(--navy);position:relative;overflow:hidden;padding:64px 0}
.upgrade-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.upgrade .sec-eyebrow{color:var(--blue-bright)}
.upgrade h2{font-size:var(--cenroq-text-6xl);font-weight: var(--cenroq-weight-bold);color:var(--white);letter-spacing: var(--cenroq-tracking-tighter);margin-bottom:14px}
.upgrade p{font-size:var(--cenroq-text-2xl);color:var(--muted-light);line-height: var(--cenroq-leading-loose);max-width:440px;margin-bottom:24px}
.ulist{list-style:none;display:flex;flex-direction:column;gap:12px}
.ulist li{display:flex;gap:11px;font-size:var(--cenroq-text-lg);color:var(--cenroq-core-sky)}
.ulist li svg{width:18px;height:18px;flex-shrink:0;margin-top:2px;stroke:var(--blue-bright);fill:none;stroke-width:2.2}

footer{border-top:1px solid var(--line-dark);padding:54px 0 40px;background:var(--navy)}
.foot-grid{display:grid;grid-template-columns:1fr auto auto auto;column-gap:64px;row-gap:30px}
.foot-brand{width:fit-content}
.foot-brand p{width:fit-content}
.foot-brand .logo{display:block;width:0;min-width:100%}
.foot-brand .logo img{width:100%;height:auto;margin-bottom:14px}
.foot-brand p{font-size:var(--cenroq-text-md);color:var(--muted-light);max-width:260px;line-height: var(--cenroq-leading-relaxed)}
.foot-col h4{font-size:var(--cenroq-text-xs);font-weight: var(--cenroq-weight-bold);letter-spacing: var(--cenroq-tracking-wide);text-transform:uppercase;color:var(--muted-light);margin-bottom:16px}
.foot-col a{display:block;font-size:var(--cenroq-text-lg);color:#B9C9DA;margin-bottom:11px;transition:color .2s}
.foot-col a:hover{color:var(--white)}
.foot-bot{margin-top:44px;padding-top:24px;border-top:1px solid var(--line-dark);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.foot-bot span{font-size:var(--cenroq-text-sm);color:var(--muted-light)}

/* Eine dritte Bruchstelle, nur fuer dieses Layout, und darum hier und nicht bei
   900: bei 900px ist der Innenkasten 844px breit, minus 260px Leiste und 28px
   Spalte bleiben 556px — das ist EINE Kartenspalte neben einer angehefteten
   Leiste, also schlechter als beides untereinander. Ab hier steht die Leiste
   wieder oben, ueber die volle Breite, nicht angeheftet und einreihig. */
@media(max-width:1080px){
  .js .cat-layout{grid-template-columns:minmax(0,1fr);gap:0}
  .cat-layout{gap:0}
  .js .pol-toolbar{position:static;max-height:none;overflow:visible;margin-bottom:20px}
  .pol-filters{flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:12px}
  .fgroup{flex:1 1 190px}
  .fgroup:first-child{flex:1 1 100%}
  /* Einreihig ist wieder Platz nebeneinander. */
  .pol-status{flex-direction:row;align-items:center;justify-content:space-between;width:100%;gap:18px}
}
@media(max-width:900px){
  .bgrid,.upgrade-inner{grid-template-columns:1fr;gap:20px}
  .foot-grid{grid-template-columns:1fr 1fr;column-gap:30px}
  .pnav{grid-template-columns:1fr}
  /* Einspaltig gibt es keine rechte Spalte mehr, in die "weiter" gehoerte. */
  .pnav .next{text-align:left;grid-column:1}
  .broster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .install{flex-direction:column;align-items:stretch;gap:12px}
  .nav-links{display:none}
  /* Aufgeklappt: die Leiste bekommt ein Feld darunter statt einer Reihe.
     Das Untermenue klappt mit auf, es hat auf dem Handy kein Hover. */
  nav.open .nav-links{display:flex;flex-direction:column;align-items:stretch;gap:0;position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 18px 44px rgba(9,27,45,.10);padding:6px 28px 16px;max-height:calc(100dvh - 73px);overflow-y:auto}
  nav.open .nav-links>a,nav.open .nav-dd-toggle{padding:13px 0;font-size:var(--cenroq-text-xl)}
  nav.open .nav-dd{display:block;width:100%}
  nav.open .nav-dd::after{display:none}
  nav.open .nav-dd-toggle .caret{display:none}
  nav.open .nav-dd .nav-dd-menu{display:block;position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:none;padding:0 0 6px 14px;min-width:0}
  nav.open .nav-dd .nav-dd-menu a{padding:9px 0}
  nav.open .nav-cta{margin-top:12px;text-align:center;justify-content:center}
  .burger{display:flex}
}
@media(max-width:560px){
  .wrap{padding:0 18px}
  .broster{grid-template-columns:1fr}
  /* Unter 360px Innenbreite passt die 320px-Untergrenze des Rasters nicht mehr
     in die Spalte; ohne das hier ragt die Karte ueber den rechten Rand hinaus
     und die Seite bekommt einen waagerechten Scrollbalken. */
  .pcard-grid{grid-template-columns:1fr}
  .sevbar{flex-wrap:wrap}
  .sevbar li{min-width:calc(50% - 2px)}
}
/* Diese Seiten springen bei jedem Anker. Ohne die zweite Zeile bleibt das weiche
   Scrollen aktiv, obwohl das System Bewegung abbestellt hat. */
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
/* navfooter-inject */
.nav-dd{position:relative;display:inline-flex;align-items:center}
.nav-dd::after{content:"";position:absolute;left:-12px;right:-12px;top:100%;height:18px}
.nav-dd-toggle{display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:var(--muted);font-size:var(--cenroq-text-lg);font-weight: var(--cenroq-weight-regular);transition:color .2s}
.nav-dd:hover .nav-dd-toggle,.nav-dd-toggle.active{color:var(--navy)}
.nav-dd-toggle.active{font-weight: var(--cenroq-weight-bold)}
.nav-dd-toggle .caret{font-size:var(--cenroq-text-2xs);opacity:.6;transition:transform .2s}
.nav-dd:hover .nav-dd-toggle .caret{transform:rotate(180deg)}
.nav-dd-menu{position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%) translateY(6px);background:var(--cenroq-core-white);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 44px rgba(9,27,45,.14);padding:8px;min-width:232px;opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s;z-index:60}
.nav-dd:hover .nav-dd-menu,.nav-dd:focus-within .nav-dd-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-dd-menu a{display:block;padding:10px 14px;border-radius:8px;font-size:var(--cenroq-text-lg);color:var(--muted);font-weight: var(--cenroq-weight-regular)}
.nav-dd-menu a:hover{background:var(--bg-soft);color:var(--navy)}
.foot-bot .legal{display:flex;gap:22px;flex-wrap:wrap}
.foot-bot .legal a{font-size:var(--cenroq-text-sm);color:var(--muted-light)}
.foot-bot .legal a:hover{color:var(--cenroq-core-white)}
@media(max-width:900px){
  .hero{padding:32px 0}
  section.block{padding:32px 0}
  .cta-band{padding:32px 0}
  .upgrade{padding:32px 0}
  .foot-grid{grid-template-columns:1fr max-content}
  .foot-bot .legal{display:grid;grid-template-columns:1fr auto 1fr;width:100%;gap:0}
  .foot-bot .legal a:first-child{justify-self:start}
  .foot-bot .legal a:nth-child(2){justify-self:center}
  .foot-bot .legal a:last-child{justify-self:end}
  .nav-dd-menu{display:none}
}