/* =============================================================
   kostenlose-vordrucke.de · Kästen und Bausteine 2026
   Vorschlag vom 26.10.2026. Eigene Datei, NACH dem Seiten-CSS laden
   (css_pPoBeRPpSx9v…css). Ändert keine Inhalte.
   Nicht berührt: .werbung, AdSense, .briefrahmen, .postit,
   der Brief (.kv-paper, .kv-letter) und sein Druck.
   ============================================================= */

/* Grundwerte an einer Stelle */
:root{
  --kv-dunkel:#1F3A52;         /* Überschriften */
  --kv-rand:#dcdfe3;           /* Rand aller Karten */
  --kv-flaeche:#F7F9FB;        /* graue Werkzeug-Flächen */
  --kv-leise:#4a5560;          /* Nebentext, 7,6 : 1 */
  --kv-orange:#c4501a;         /* Knopf, weiße Schrift 4,7 : 1 */
  --kv-orange-dunkel:#a3410f;  /* Knopf beim Darüberfahren */
}

/* 1. HINWEIS-KÄSTEN: eine Form, drei Farben
      --f Streifen und Symbol, --bg Fläche, --r Rand, --i Zeichen im Symbol */
.rahmen,.wichtig,.tipp,.spartipp{
  --f:#345573;--bg:#F3F6F9;--r:#D3DEE8;   /* Das Wichtigste in Kürze: Blau, Zeichen i */
  --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Ccircle cx='12' cy='7.3' r='1.8'/%3E%3Crect x='10.5' y='10.2' width='3' height='8.3' rx='1.5'/%3E%3C/svg%3E");
  margin:28px 0;padding:18px 20px;min-width:0;line-height:1.55;
  background:var(--bg);border:1px solid var(--r);border-left:4px solid var(--f);
  border-radius:8px;box-shadow:none}
.wichtig{  /* Wichtig: Rot, Zeichen ! */
  --f:#B42318;--bg:#FDF3F2;--r:#F1CFCB;
  --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Crect x='10.5' y='5' width='3' height='9.6' rx='1.5'/%3E%3Ccircle cx='12' cy='18.2' r='1.8'/%3E%3C/svg%3E")}
.tipp,.spartipp{  /* Tipp: Grün, Zeichen Glühbirne */
  --f:#2E7D5B;--bg:#F1F8F4;--r:#CBE4D6;
  --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Ccircle cx='12' cy='10' r='5'/%3E%3Crect x='9.7' y='12.6' width='4.6' height='3.8' rx='.9'/%3E%3Crect x='9.9' y='17.2' width='4.2' height='1.4' rx='.7'/%3E%3Crect x='10.7' y='19.2' width='2.6' height='1.2' rx='.6'/%3E%3C/svg%3E")}

/* alte Symbole über dem Rand abschalten */
.wichtig::before,.tipp::before,.spartipp::before{content:none}

/* Symbol vor der ersten Zeile (Überschrift oder erster Absatz) */
:is(.rahmen,.wichtig,.tipp,.spartipp)>:is(h2,h3,h4,p):first-child::before{
  content:"";display:inline-block;width:1.2em;height:1.2em;margin-right:.4em;vertical-align:-.25em;
  border-radius:50%;background:var(--f) var(--i) center/100% no-repeat}

/* Inhalt im Kasten */
:is(.rahmen,.wichtig,.tipp,.spartipp) :is(h2,h3,h4){
  margin:0 0 8px;font-size:1.1em;font-weight:700;line-height:1.3;color:var(--kv-dunkel)}
:is(.rahmen,.wichtig,.tipp,.spartipp) :is(h2,h3,h4):not(:first-child){margin-top:20px}
:is(.rahmen,.wichtig,.tipp,.spartipp) :is(ul,ol){margin:0 0 .8em;padding-left:1.25em}
:is(.rahmen,.wichtig,.tipp,.spartipp)>:last-child{margin-bottom:0}

/* 2. VORTEILE-KASTEN: weiß, grüne Häkchen, nah am Werkzeug.
      Neue Seiten: class="tipp kv-vorteile". Alte Seiten werden erkannt:
      Tipp-Kasten direkt vor den Auswahl-Karten oder vor Überschrift + Formular.
      Browser ohne :has() zeigen ihn als normalen Tipp. */
.tipp:is(.kv-vorteile,:has(+.kv-wahl),:has(+h2+.kv-generator)){
  --f:#2E7D5B;
  --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 8.9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background:#fff;border:1px solid var(--kv-rand);margin-bottom:16px}
.tipp:is(.kv-vorteile,:has(+.kv-wahl),:has(+h2+.kv-generator)) ul{list-style:none;padding-left:0}
.tipp:is(.kv-vorteile,:has(+.kv-wahl),:has(+h2+.kv-generator)) li{position:relative;padding-left:1.75em}
.tipp:is(.kv-vorteile,:has(+.kv-wahl),:has(+h2+.kv-generator)) li::before{
  content:"";position:absolute;left:0;top:.15em;width:1.2em;height:1.2em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23DDEFE5'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 8.9' fill='none' stroke='%232E7D5B' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}

/* 3. FRAGEN-KARTEN (orange Kante wie festgelegt) */
body .kv-faq-frage{background:#fff;border:1px solid var(--kv-rand);border-left:4px solid #e66221;border-radius:8px;padding:14px 18px;margin:0 0 15px}
body .kv-faq-frage h3{font-size:1.1em;line-height:1.3;margin:0 0 6px;color:var(--kv-dunkel)}

/* 4. AUSWAHL-KARTEN UND KNÖPFE (Schatten = anklickbar) */
body a.kv-wahl-karte{border:1px solid #c9d0d7;border-radius:8px;padding:16px 18px;box-shadow:0 1px 3px rgba(31,58,82,.10)}
body a.kv-wahl-karte:hover,body a.kv-wahl-karte:focus{border-color:#e66221;box-shadow:0 4px 12px rgba(31,58,82,.16)}
body a.kv-wahl-karte:focus-visible{outline:3px solid #345573;outline-offset:2px}
body .kv-wahl-text{font-size:16px}
body .kv-wahl-knopf,body a.kv-vordruck-knopf{background:var(--kv-orange);border-radius:6px;padding:10px 18px}
body a.kv-wahl-karte:hover .kv-wahl-knopf,body a.kv-vordruck-knopf:hover,body a.kv-vordruck-knopf:focus{background:var(--kv-orange-dunkel)}

/* 5. SCHRITTE ÜBER DEM FORMULAR */
body .kv-schritte{gap:12px}
body .kv-schritte li{background:var(--kv-flaeche);border:1px solid var(--kv-rand);border-radius:8px;padding:12px 14px;gap:12px}
body .kv-schritt-nr{width:28px;height:28px;line-height:28px;font-size:16px;background:var(--kv-orange)}
body .kv-schritte strong{font-size:17px}
body .kv-schritt-text{font-size:16px;line-height:1.45}
body .kv-intro-neu p.kv-schutz{font-size:15px;color:var(--kv-leise)}

/* 6. ALTE FORMULAR-EINLEITUNG: grau statt gelb, größere Schrift */
.kv-generator-intro:not(.kv-intro-neu){background:var(--kv-flaeche);border:1px solid var(--kv-rand);border-radius:8px;padding:16px 20px;font-size:16px}
.kv-generator-intro:not(.kv-intro-neu) p:first-child{font-size:inherit;color:#2b2b2b}
.kv-generator-intro:not(.kv-intro-neu) p:last-child{font-size:15px;color:var(--kv-leise)}

/* 7. RECHTLICHER HINWEIS: lesbar statt winzig */
.kv-legal{font-size:14px;color:var(--kv-leise);background:var(--kv-flaeche);border-color:var(--kv-rand);border-radius:8px}

/* HANDY */
@media (max-width:600px){
  .rahmen,.wichtig,.tipp,.spartipp{margin:22px 0;padding:14px 16px}
  body .kv-faq-frage{padding:12px 14px}
  .kv-generator-intro:not(.kv-intro-neu){padding:12px 14px;font-size:15px}
  .kv-legal{font-size:13px}
}

/* DRUCK DER GANZEN SEITE (der Brief-Druck hat eigenes CSS) */
@media print{
  .rahmen,.wichtig,.tipp,.spartipp,.kv-faq-frage{break-inside:avoid}
}

/* Grundform der drei Schritte über dem Formular (26.10.2026). Die Seitenvorlage (inc/seite.php, kv_schritte) ersetzt
   die alte Formular-Einleitung durch diese Schritte; die Zeilen mit body weiter oben verfeinern sie. */
.kv-generator-intro.kv-intro-neu{background:none;border:0;padding:0;margin-bottom:16px}
.kv-schritte{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 8px;padding:0;list-style:none}
.kv-schritte li{display:flex;gap:10px;align-items:flex-start;margin:0}
.kv-schritt-nr{flex:none;border-radius:50%;color:#fff;font-weight:700;text-align:center}
.kv-schritte strong{display:block;line-height:1.35;color:var(--kv-dunkel)}
.kv-schritt-text{display:block;color:#3d4248}
.kv-blau{background:#DBEAFE;color:#1E40AF;border-radius:3px;padding:0 4px}
.kv-intro-neu p.kv-zusatz{margin:0 0 6px;font-size:15px;color:var(--kv-leise)}
.kv-intro-neu p.kv-schutz{margin:0}
@media (max-width:640px){.kv-schritte{grid-template-columns:1fr}}