/* =======================================================================
   komponenten.css - wiederverwendbare Bausteine "Ruhige Praezision"
   -----------------------------------------------------------------------
   Phase F1-P (01.11.2026), lokaler Musterprototyp. Eingebunden zunaechst
   NUR auf /photovoltaikreinigung/. Alle Selektoren tragen das Praefix vk-,
   damit auf anderen Seiten nichts greift, selbst wenn die Datei dort
   spaeter geladen wird.

   Bausteine
     vk-grid   Kartenraster (max. 4 je Reihe, ab 640 px 2, darunter 1 Spalte)
     vk-k1     Leistungs-/Weiterfuehrungskarte: ganze Karte verlinkt
     vk-k2     Prozesskarte: Stufe, Titel, kurzer Text, nicht verlinkt
     vk-k3     Merkmalskarte: Titel, Text, Bild nur wenn vorhanden
     vk-kern   Kernaussage: Titelspalte + Text mit goldener Kante
     vk-mt     Medien-Text-Modul (Hochformat-Video/Bild neben Text)
     vk-faq    FAQ als details/summary
     vk-afn    Anfragebereich AF-N (Variante dunkel: vk-afn--dunkel)
     Einblenden: [data-reveal] + js/einblenden.js

   Bewegung (B-2, 9B.1 §O): einmalig, von unten, 8 px, 400 ms, gestaffelt
   0/60/120/180 ms. Nur opacity/transform. Ohne JS, bei reduzierter
   Bewegung und im Druck ist alles sofort sichtbar.
   ======================================================================= */

/* ---------- Kartenraster ---------- */
.vk-grid{display:grid;gap:var(--s5);margin:var(--s7) 0 0;padding:0;list-style:none;
  grid-template-columns:repeat(2,minmax(0,1fr))}
.vk-grid > *{min-width:0}
@media(min-width:1024px){
  .vk-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:1240px){
  .vk-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:639px){
  .vk-grid{grid-template-columns:1fr;gap:var(--s4)}
}

/* gemeinsame Kartenbasis */
.vk-k1,.vk-k2,.vk-k3{background:#fff;border:1px solid var(--n200);border-radius:var(--r-s);
  padding:var(--s6);display:flex;flex-direction:column;gap:var(--s3);min-height:100%}
.vk-kick{display:block;font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;line-height:1.4;color:var(--n600)}
.vk-k1 h3,.vk-k2 h3,.vk-k3 h3{font-size:19px;line-height:1.3;font-weight:600;margin:0}
.vk-k1 p,.vk-k2 p,.vk-k3 p{font-size:15px;line-height:1.65;color:var(--n700);margin:0}
.vk-k3 p + p{margin-top:var(--s2)}
@media(max-width:639px){
  .vk-k1,.vk-k2,.vk-k3{padding:var(--s5)}
}

/* K1 - ganze Karte verlinkt, Verhalten wie Startseite "Weitere Leistungen" */
.vk-k1{text-decoration:none;color:inherit;
  transition:background 200ms var(--ease),box-shadow 200ms var(--ease),border-color 200ms var(--ease)}
.vk-k1 h3{transition:color 200ms var(--ease)}
.vk-k1 .vk-go{margin-top:auto;padding-top:var(--s3);color:var(--red);font-size:14.5px;font-weight:600}
.vk-k1 .vk-go .ar{display:inline-block;transition:transform 200ms var(--ease)}
.vk-k1:hover,.vk-k1:focus-visible{background:var(--n50);border-color:var(--n300);
  box-shadow:0 10px 26px rgba(24,23,22,.09)}
.vk-k1:hover h3,.vk-k1:focus-visible h3{color:var(--red)}
.vk-k1:hover .vk-go .ar,.vk-k1:focus-visible .vk-go .ar{transform:translateX(3px)}
.vk-k1:focus-visible{position:relative;z-index:1}

/* K2 - Prozess: goldene Oberkante, Stufe in Rot */
.vk-k2{border-top:2px solid var(--gold)}
.vk-k2 .vk-kick{color:var(--red)}

/* K3 - Merkmal; Bildplatz nur, wenn ein Bild im Markup steht */
.vk-k3 .vk-img{margin:calc(var(--s6) * -1) calc(var(--s6) * -1) var(--s2);
  aspect-ratio:4/3;overflow:hidden;background:var(--n100)}
.vk-k3 .vk-img img{width:100%;height:100%;object-fit:cover}
.vk-grid--fl .vk-k3{background:var(--n50)}
@media(max-width:639px){
  .vk-k3 .vk-img{margin:calc(var(--s5) * -1) calc(var(--s5) * -1) var(--s2)}
}

/* ---------- Kernaussage ---------- */
.vk-kern{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s7);
  margin-top:var(--s8);padding-top:var(--s6);border-top:1px solid var(--n300)}
.vk-kern h3{font-size:clamp(21px,2vw,24px);line-height:1.25;font-weight:600;margin:0;max-width:16ch}
.vk-kern .vk-kick{color:var(--red);margin-bottom:var(--s3)}
.vk-kern .vk-tx{border-left:2px solid var(--gold);padding-left:var(--s6);max-width:68ch}
.vk-kern .vk-tx p{font-size:17px;line-height:1.7;color:var(--n700);margin:0}
.vk-kern .vk-tx p + p{margin-top:var(--s4)}
@media(max-width:1023px){
  .vk-kern{grid-template-columns:1fr;gap:var(--s5);margin-top:var(--s7)}
  .vk-kern h3{max-width:none}
}
@media(max-width:639px){
  .vk-kern .vk-tx{padding-left:var(--s4)}
  .vk-kern .vk-tx p{font-size:16px}
}

/* ---------- Medien-Text-Modul (Hochformat) ---------- */
.vk-mt{display:grid;grid-template-columns:minmax(220px,340px) minmax(0,1fr);gap:var(--s8);
  align-items:center;margin-top:var(--s8);background:#fff;border:1px solid var(--n200);
  border-radius:var(--r-s);padding:var(--s6)}
.vk-mt figure{margin:0}
.vk-mt video,.vk-mt .vk-media img{display:block;width:100%;height:auto;aspect-ratio:9/16;
  object-fit:cover;background:var(--n200)}
.vk-mt .vk-body{max-width:none;padding-right:var(--s5)}
.vk-mt .vk-body h3{font-size:clamp(21px,2vw,24px);line-height:1.25;font-weight:600;margin:0 0 var(--s4)}
.vk-mt .vk-body > p{font-size:17px;line-height:1.7;color:var(--n700);max-width:60ch}
.vk-steps{list-style:none;margin:var(--s6) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
.vk-steps li{border-top:2px solid var(--gold);padding-top:var(--s3);min-width:0}
.vk-steps .vk-kick{color:var(--red);margin-bottom:var(--s2)}
.vk-steps b{display:block;font-size:16px;font-weight:600;margin-bottom:var(--s1)}
.vk-steps p{font-size:14.5px;line-height:1.6;color:var(--n700);margin:0}
.vk-mt .vk-more{margin-top:var(--s6)}
.vk-mt .vk-more .tlink{display:inline}
@media(max-width:1023px){
  .vk-mt{grid-template-columns:minmax(200px,280px) minmax(0,1fr);gap:var(--s6)}
  .vk-steps{grid-template-columns:1fr;gap:var(--s4)}
}
@media(max-width:639px){
  .vk-mt{grid-template-columns:1fr;gap:var(--s6);padding:var(--s5)}
  .vk-mt figure{max-width:280px;width:100%;margin:0 auto}
  .vk-mt .vk-body{padding-right:0}
  .vk-mt .vk-body > p{font-size:16px}
}

/* ---------- Leistungsliste in Karten (Dokumentation) ---------- */
.vk-list{list-style:none;margin:var(--s2) 0 0;padding:0}
.vk-list li{position:relative;padding:var(--s2) 0 var(--s2) var(--s5);font-size:15px;
  line-height:1.55;color:var(--n700);border-top:1px solid var(--n200)}
.vk-list li:first-child{border-top:0}
.vk-list li::before{content:"";position:absolute;left:2px;top:calc(var(--s2) + .55em);
  width:7px;height:7px;background:var(--gold);transform:rotate(var(--tilt))}

/* ---------- Split: Text links, Karte rechts ---------- */
.vk-split{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--s8);align-items:start}
.vk-split > *{min-width:0}
.vk-split .vk-k3{margin-top:var(--s2)}
@media(max-width:1023px){
  .vk-split{grid-template-columns:1fr;gap:var(--s6)}
}

/* ---------- FAQ ---------- */
.vk-faq{list-style:none;margin:var(--s7) 0 0;padding:0;border-top:1px solid var(--n300);max-width:var(--narrow)}
.vk-faq > li{border-bottom:1px solid var(--n300)}
.vk-faq summary{list-style:none;cursor:pointer;display:flex;gap:var(--s5);
  align-items:flex-start;justify-content:space-between;padding:var(--s5) 0;min-height:48px;
  font-size:17px;font-weight:600;line-height:1.4;color:var(--ink)}
.vk-faq summary::-webkit-details-marker{display:none}
.vk-faq summary:hover{color:var(--red)}
.vk-faq summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.vk-faq .vk-pl{flex:0 0 auto;font-weight:400;font-size:22px;line-height:1;color:var(--red);
  transition:transform 200ms var(--ease)}
.vk-faq details[open] .vk-pl{transform:rotate(45deg)}
.vk-faq .vk-ans{padding:0 0 var(--s6);color:var(--n700);line-height:1.7}
.vk-faq .vk-ans p + p{margin-top:var(--s3)}

/* ---------- Anfragebereich AF-N ---------- */
.vk-afn{border:1px solid var(--n200);background:#fff;padding:var(--s8) var(--s7);
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s5) var(--s8);align-items:end}
.vk-afn .lbl{color:var(--red);margin-bottom:var(--s4)}
.vk-afn h2{max-width:22ch}
.vk-afn .vk-tx{margin-top:var(--s4);max-width:56ch;color:var(--n700);line-height:1.7}
.vk-afn .anfacts{margin-top:0;flex-direction:column;align-items:flex-start;gap:var(--s4)}
.vk-afn .vk-akt .anfnote{margin-top:var(--s4)}
.vk-afn .vk-owner{grid-column:1 / -1;margin-top:var(--s2);padding-top:var(--s5);
  border-top:1px solid var(--n200);font-size:14px;line-height:1.6;color:var(--n600)}
.vk-afn--dunkel{background:var(--ink);color:#fff;border-color:var(--ink);--focus:var(--gold)}
.vk-afn--dunkel .lbl{color:var(--gold)}
.vk-afn--dunkel .vk-tx{color:var(--n300)}
.vk-afn--dunkel .anftel{color:var(--n300);border-bottom-color:var(--n600)}
.vk-afn--dunkel .anftel:hover{color:var(--gold);border-bottom-color:var(--gold)}
.vk-afn--dunkel .anfnote{color:rgba(255,255,255,.72)}
.vk-afn--dunkel .vk-owner{color:rgba(255,255,255,.72);border-top-color:var(--n800)}
@media(max-width:1023px){
  .vk-afn{grid-template-columns:1fr;align-items:start;padding:var(--s7) var(--s6)}
  .vk-afn .vk-akt{margin-top:var(--s2)}
}
@media(max-width:639px){
  .vk-afn{padding:var(--s7) var(--s5)}
  .vk-afn .anfacts .btn{align-self:stretch;width:100%;justify-content:center}
}

/* =======================================================================
   R2.1 (01.11.2026) - Ergaenzungen fuer die PV-Musterseite, gleiche Bausteinfamilie
   ======================================================================= */
/* K3-Variante mit goldener Oberkante (Situationskarten, Doku-Karte B) */
.vk-k3--akzent{border-top:2px solid var(--gold)}
/* Label als Chip (Standortkarten, ohne Oberkante) */
.vk-chip{align-self:flex-start;background:#fff;border:1px solid var(--n200);
  border-radius:var(--r-s);padding:4px 10px;color:var(--n700)}
/* Praxisaussage innerhalb einer Kernaussage: abgesetzt, kursiv */
.vk-praxis{display:block;margin-top:var(--s3);font-style:italic;color:var(--ink)}
/* Kernaussage als Fallbaustein (Einsatzplanung): Karte statt Linie */
.vk-kern--fall{margin-top:var(--s7);padding:var(--s6);background:#fff;
  border:1px solid var(--n200);border-radius:var(--r-s)}
.vk-kern--fall h3{font-size:19px}
.vk-kern--fall .vk-tx p{font-size:16px}
@media(max-width:1023px){ .vk-kern--fall{margin-top:var(--s6)} }
@media(max-width:639px){ .vk-kern--fall{padding:var(--s5)} }
/* Medien-Text-Modul im Querformat (Projektbeleg): Bild 7/12, Text 5/12 */
.vk-mt--quer{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s7);align-items:center}
.vk-mt--quer .vk-body{padding-right:0}
.vk-mt--quer .vk-body > p{font-size:16px;line-height:1.7}
.vk-mt--quer .vk-body > p + p{margin-top:var(--s4)}
.vk-mt--quer figcaption{padding-top:10px}
@media(max-width:1023px){
  .vk-mt--quer{grid-template-columns:1fr;gap:var(--s6)}
  .vk-mt--quer figure{max-width:none;width:auto;margin:0}
}
@media(max-width:639px){
  .vk-mt--quer figure{max-width:none;margin:0}
}
/* Dokumentation: Karte A 5/12, Karte B 7/12 (R2.3: Abgrenzungstext in Karte B) */
.vk-doku{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s5);
  margin-top:var(--s7);align-items:stretch}
.vk-doku > *{min-width:0}
.vk-zusatz{font-size:13px;font-weight:600;line-height:1.5;color:var(--red)}
.vk-nliste{margin:var(--s2) 0 0;padding:0;list-style:none;counter-reset:vkn}
.vk-nliste li{position:relative;padding:var(--s2) 0 var(--s2) var(--s6);font-size:15px;
  line-height:1.6;color:var(--n700);border-top:1px solid var(--n200);counter-increment:vkn}
.vk-nliste li:first-child{border-top:0}
.vk-nliste li::before{content:counter(vkn);position:absolute;left:0;top:var(--s2);
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:13px;font-weight:500;color:var(--red)}
@media(max-width:1023px){
  .vk-doku{grid-template-columns:1fr}
}
/* Region: zentrierte Informationskarte zwischen den Kartengruppen */
.vk-infowrap{margin:var(--s7) auto 0;max-width:var(--narrow)}
.vk-info{background:#fff;border:1px solid var(--n200);border-top:2px solid var(--gold);
  border-radius:var(--r-s);padding:var(--s6);text-align:left;display:flex;flex-direction:column;gap:var(--s3)}
.vk-info h3{font-size:19px;line-height:1.3;font-weight:600;margin:0}
.vk-info p{font-size:15px;line-height:1.65;color:var(--n700);margin:0}
.vk-info .vk-more{margin-top:var(--s2)}
@media(max-width:639px){ .vk-info{padding:var(--s5)} }

/* =======================================================================
   R2.3 (02.11.2026) - Absatzgliederung und Dokumentationskarten (PV-Musterseite)
   ======================================================================= */
/* Sinneinheiten innerhalb einer Karte: eine Gruppe, kleiner Absatzabstand */
.vk-abs > p + p{margin-top:var(--s2)}
/* Praxisaussage als eigener Absatz in der Kernaussage */
p.vk-praxis{margin-top:var(--s4)}
/* Dokumentation Grundleistung: Bildpaar Vorher/Nachher */
.vk-paar{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.vk-paar li{min-width:0;background:var(--n50);border:1px solid var(--n200);
  border-left:2px solid var(--gold);border-radius:var(--r-s);padding:var(--s3) var(--s4);
  font-size:15px;line-height:1.5;color:var(--n700)}
.vk-paar .vk-kick{color:var(--red);margin-bottom:2px}
/* Abgrenzung am Kartenende (Grundleistung) */
.vk-k3 p.vk-grenze{margin-top:auto;padding-top:var(--s4);border-top:1px solid var(--n200)}
/* Umfang und Grenzen der erweiterten Dokumentation, innerhalb der Karte */
.vk-grenzen{margin-top:var(--s2);padding-top:var(--s4);border-top:1px solid var(--n200)}
.vk-grenzen .vk-kick{margin-bottom:var(--s2)}
.vk-k3 .vk-grenzen p + p{margin-top:var(--s3)}

/* Dokumentation gestapelt (vk-doku--gestapelt): ab 1024 px beide Leistungen
   als ganze Zeile, innen 5/12 Text und 7/12 Inhalt; darunter einspaltig wie vk-doku */
@media(min-width:1024px){
  .vk-doku--gestapelt{grid-template-columns:1fr;gap:var(--s5)}
  .vk-doku--gestapelt > .vk-k3{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    column-gap:var(--s7);row-gap:var(--s3);align-content:start}
  .vk-doku--gestapelt > .vk-k3 > *{grid-column:1}
  .vk-doku--gestapelt .vk-paar{grid-column:2;grid-row:1 / span 2;align-self:start}
  .vk-doku--gestapelt .vk-k3 p.vk-grenze{grid-column:2;grid-row:3 / span 2;align-self:start;margin-top:0}
  .vk-doku--gestapelt .vk-nliste{grid-column:2;grid-row:1 / span 4;margin-top:0}
  .vk-doku--gestapelt .vk-grenzen{grid-column:1 / -1;display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s7);margin-top:var(--s3)}
  .vk-doku--gestapelt .vk-grenzen .vk-kick{grid-column:1 / -1}
  .vk-doku--gestapelt .vk-k3 .vk-grenzen p + p{margin-top:0}
}

/* =======================================================================
   E1 (02.11.2026) - Ergaenzungen fuer die Leistungsseiten (Glas, Unterhalt,
   Bauend, Grund, Spezial). Nur neue Modifikatoren; bestehende Regeln und
   damit die PV-Seite bleiben unveraendert.
   ======================================================================= */
/* Medien-Text-Modul mit Hochformatfoto 3:4 (statt Video 9:16) */
.vk-mt--bild .vk-media img{aspect-ratio:3/4;object-fit:cover}
.vk-mt--bild figcaption{padding-top:10px;font-size:13px;line-height:1.5;color:var(--n600)}
.vk-mt--bild .vk-body > p + p{margin-top:var(--s4)}
/* Kernaussage als eigener Abschnittskopf (Titel ist H2 des Abschnitts) */
.vk-kern--oben{margin-top:0;padding-top:0;border-top:0}
.vk-kern--oben .h2{margin:0;max-width:14ch}
/* Kartentitel als H4, wenn die Karten unter einer H3 stehen (Grund "Drei Wege") */
.vk-k3 h4{font-size:19px;line-height:1.3;font-weight:600;margin:0}

/* =======================================================================
   E1.1 (03.11.2026) - Ergaenzungen fuer die Leistungsseiten. Nur neue
   Klassen; die PV-Seite verwendet keine davon und bleibt unveraendert.
   ======================================================================= */
/* Vorher/Nachher-Kennzeichnung UEBER dem Bild, Konvention wie Spezial-
   reinigung (.bset .tag): grauer Punkt "Vorher", gruener Punkt "Nachher".
   Die Bedeutung traegt der Text; der Punkt ist nur zusaetzliches Merkmal. */
.vk-tag,.ba .vk-tag{display:flex;align-items:center;gap:8px;margin:0 0 8px;padding:0;
  font-size:12.5px;font-weight:600;letter-spacing:.02em;line-height:1.3;color:var(--n700)}
.vk-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.vk-vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* Geteiltes Einzelbild: je Bildhaelfte eine Kennzeichnung; die Spaltengrenze
   liegt an der sichtbaren Trennlinie (--vk-teil, gemessen am Bild). */
.vk-teil{display:grid;grid-template-columns:minmax(0,var(--vk-teil,50%)) minmax(0,1fr);margin:0}
.vk-teil .vk-tag{margin:0;padding:0 0 8px}
.vk-teil .vk-tag + .vk-tag{padding-left:12px}
/* Unterschrift unter einem Bildpaar: Motiv und Aufnahmesituation */
.vk-paarcap{margin-top:12px;font-size:13px;line-height:1.55;color:var(--n600);max-width:68ch}
/* Drei Prozesskarten mit kurzer dritter Karte: Karten 1 und 2 nebeneinander,
   Karte 3 als ganze Zeile darunter - keine Karte bleibt unten leer.
   Reihenfolge 1-2-3 bleibt; mobil wie bisher untereinander. */
@media(min-width:640px){
  .vk-grid--zeile3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vk-grid--zeile3 > :nth-child(3){grid-column:1 / -1}
  .vk-grid--zeile3 > :nth-child(3) .vk-abs{max-width:68ch}
}
@media(min-width:1024px){
  .vk-grid--zeile3 > :nth-child(3) .vk-abs{max-width:none;display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6)}
  .vk-grid--zeile3 > :nth-child(3) .vk-abs > p + p{margin-top:0}
}
/* kompakte Kachel ohne eigenen Titel */
.vk-k3--kurz{padding:var(--s5)}
.vk-k3--kurz p{font-size:15.5px;color:var(--n800)}
/* Bildfolge: zwei Praxisaufnahmen im Hochformat nebeneinander, Textbreite */
.vk-folge{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5);
  max-width:var(--narrow);margin:var(--s5) 0 0;padding:0;list-style:none}
.vk-folge figure{margin:0;min-width:0}
.vk-folge .vk-fph{aspect-ratio:3/4;overflow:hidden;border:1px solid var(--n200);background:var(--n150)}
.vk-folge .vk-fph picture{display:block;width:100%;height:100%}
.vk-folge .vk-fph img{width:100%;height:100%;object-fit:cover;display:block}
.vk-folge figcaption{padding-top:10px;font-size:13px;line-height:1.5;color:var(--n600)}
.vk-folge figcaption b{display:block;font-weight:600;color:var(--n800)}
@media(max-width:639px){
  .vk-folge{gap:var(--s3)}
  .vk-folge figcaption{font-size:12.5px}
}

/* ---------- Einblenden (B-2) ---------- */
.js [data-reveal].vk-warten > *{opacity:0;transform:translateY(8px)}
.js [data-reveal].vk-ein > *{transition:opacity 400ms var(--ease),transform 400ms var(--ease)}
.js [data-reveal].vk-ein > :nth-child(2){transition-delay:60ms}
.js [data-reveal].vk-ein > :nth-child(3){transition-delay:120ms}
.js [data-reveal].vk-ein > :nth-child(n+4){transition-delay:180ms}
.js [data-reveal].vk-sofort > *{transition:none}
@media(prefers-reduced-motion:reduce){
  [data-reveal] > *{opacity:1!important;transform:none!important;transition:none!important}
  .vk-k1,.vk-k1 h3,.vk-k1 .vk-go .ar,.vk-faq .vk-pl{transition-duration:1ms!important}
  .vk-k1:hover .vk-go .ar,.vk-k1:focus-visible .vk-go .ar{transform:none}
}
@media print{
  [data-reveal] > *{opacity:1!important;transform:none!important}
}