/* lueftungstool.com: Abschnitt „Sicherheit“ (Website-Paket 09.10.2026, Baustein 20; Gestaltung aus Entwurf a vom 08.10.2026)
   Eigener Abschnitt nach „Software-Wartung“ (data-szene="Sicherheit", id="sicherheit").
   Ergaenzt app.css und motion.css, aendert dort nichts. Geladen nach motion.css.
   - Weisser Abschnitt, darin EINE dunkle Tafel (Farben wie der Abspann): sechs Zusagen im Raster
     3 x 2, Tablet 2 x 3, Handy 1 Spalte. Die Tafel bleibt innerhalb des Satzspiegels, damit der
     Randcode (.reel-edge, fest am rechten Rand, dunkle Schrift) nie auf dunklem Grund steht.
   - Software-Wartung verliert ihre rechte Spalte (alte Sicherheitsliste .slist) und steht jetzt
     zweispaltig: Ueberschrift links, Liste rechts (.two--solo).
   - CSP style-src 'self': keine Inline-Styles, keine data:-Bilder. Keine Verlaufsflaechen ausser dem
     Raster, das auch Hero und Abspann tragen. */

/* Software-Wartung: eine Spalte weniger, Liste rechts neben der Ueberschrift */
.two--solo{grid-template-columns:minmax(0,1fr);}
.two--solo > .rv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:64px;}
.two--solo > .rv > *{grid-column:1;}
.two--solo .mlist{grid-column:2;grid-row:1 / span 3;align-self:start;margin-top:4px;}

/* Sicherheit */
.sich .head{max-width:820px;}
/* Zweiter Satz der Ueberschrift bleibt beisammen (bricht als Ganzes um; passt er nicht, darf er intern umbrechen) */
.sich .head h2 .u{display:inline-block;}
.sich__tafel{position:relative;background:var(--dark);border-radius:20px;overflow:hidden;box-shadow:var(--sh-3);color:var(--dark-text);}
/* Raster wie im Abspann, von oben links ausgeblendet */
.sich__tafel::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(ellipse 55% 60% at 0% 0%,rgba(0,180,216,.16),transparent 70%),
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:auto,44px 44px,44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 80% 90% at 0% 0%,#000 25%,transparent 75%);mask-image:radial-gradient(ellipse 80% 90% at 0% 0%,#000 25%,transparent 75%);}
.sich__raster{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}
.sich__k{padding:36px 34px 38px;border-right:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);}
.sich__k:nth-child(3n){border-right:0;}
.sich__ico{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:11px;
  background:rgba(0,180,216,.10);border:1px solid rgba(0,180,216,.30);color:var(--brand);}
.sich__ico .i{width:21px;height:21px;}
/* Ueberschriften der Karten sind seit dem Gutachten laenger: ausgeglichen umbrechen, kein einzelnes Wort in Zeile 2 */
.sich__k h3{margin:20px 0 10px;color:#fff;font-size:19px;font-weight:600;line-height:1.25;letter-spacing:-.01em;text-wrap:balance;}
.sich__k p{font-size:15px;line-height:1.62;color:var(--dark-text);}
/* Kernaussage je Karte: nur heller, nicht lauter */
.sich__k p b{font-weight:600;color:#fff;}
/* Fusszeile der Tafel: was ohnehin selbstverstaendlich ist, ruhig und klein */
.sich__fuss{position:relative;display:flex;flex-wrap:wrap;gap:12px 32px;padding:20px 34px 22px;background:rgba(255,255,255,.025);}
.sich__fuss li{display:inline-flex;align-items:center;gap:9px;font-size:14px;line-height:1.45;color:#AEB7BF;}
.sich__fuss .i{width:16px;height:16px;color:var(--brand);}
.sich__fuss a{color:#7FDBEF;text-decoration:none;}
.sich__fuss a:hover{text-decoration:underline;text-underline-offset:3px;}
.sich :focus-visible{outline-color:#7FDBEF;}

/* Responsiv */
@media (max-width:1060px){
  .two--solo > .rv{grid-template-columns:minmax(0,1fr);grid-template-rows:none;}
  .two--solo .mlist{grid-column:1;grid-row:auto;margin-top:32px;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 32px;}
  .sich__raster{grid-template-columns:repeat(2,minmax(0,1fr));}
  .sich__k:nth-child(3n){border-right:1px solid rgba(255,255,255,.08);}
  .sich__k:nth-child(2n){border-right:0;}
}
@media (max-width:600px){
  .two--solo .mlist{grid-template-columns:minmax(0,1fr);gap:20px;}
  .sich__tafel{border-radius:16px;}
  .sich__raster{grid-template-columns:minmax(0,1fr);}
  .sich__k,.sich__k:nth-child(3n){border-right:0;padding:28px 22px 30px;}
  .sich__k h3{margin-top:16px;font-size:18px;}
  .sich__fuss{flex-direction:column;gap:12px;padding:20px 22px 22px;}
  .sich__fuss li{align-items:flex-start;}
  .sich__fuss .i{margin-top:2px;}
}
@media print{
  .sich__tafel{background:#fff;color:var(--text);box-shadow:none;border:1px solid var(--line);}
  .sich__tafel::before{display:none;}
  .sich__k h3{color:var(--ink);}
  .sich__k p,.sich__fuss li{color:var(--text);}
}