/* Inhalts-Bausteine */
/* --------------------------------------------------------------------------
   Inhalts-Bausteine für Text- und Roh-HTML-Sektionen.

   Diese Datei wird in der Verwaltung unter Inhalte > Design gepflegt und NACH
   dem gebauten welcome.css geladen. Sie darf deshalb Projektstile überschreiben.
   Farben und Maße kommen aus den Variablen des Projekts (--red, --text, --muted,
   --line); --chip wird hier ergänzt, weil es im Projekt bisher fehlt.
   -------------------------------------------------------------------------- */
:root {
    --chip: #eef2f7;
}

/* ---------- Hinweis: Varianten zum vorhandenen .hinweis ----------
   Unveraendert so uebernommen, wie geliefert. Auffaellig: --warnung (#158036) und
   --tipp (#15803d) sind beide gruen und unterscheiden sich um ein Zeichen; fuer eine
   Warnung war vermutlich ein Orange (#f58036) gemeint. Hier aendern, wenn gewuenscht. */
.hinweis--warnung { border-left-color: #158036; }
.hinweis--tipp { border-left-color: #15803d; }
.hinweis--ruhig { border-left-color: var(--muted); }

/* ---------- Weg durch das Programm ---------- */
.weg {
    background: var(--chip, #eef2f7);
    border-radius: 14px;
    padding: 14px 18px;
    margin: 0 0 20px;
    font-size: 16px;
    line-height: 1.9;
    color: var(--text);
}
.weg b { font-weight: 700; }
.weg i {
    color: var(--red);
    font-style: normal;
    font-weight: 700;
    padding: 0 7px;
}

/* ---------- Nummerierte Schritte ---------- */
.schritte {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    counter-reset: schritt;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.schritte li {
    counter-increment: schritt;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    color: var(--muted);
}
.schritte li::before {
    content: counter(schritt);
    flex: 0 0 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--red);
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    display: grid;
    place-items: center;
}
.schritte b { color: var(--text); }

/* ---------- Checkliste ---------- */
.checkliste {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.checkliste li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    color: var(--muted);
}
.checkliste li::before {
    content: "";
    flex: 0 0 22px;
    height: 22px;
    margin-top: 3px;
    background: no-repeat center/22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.checkliste b { color: var(--text); }

/* ---------- Merksatz ---------- */
.merksatz {
    margin: 24px 0;
    padding: 6px 0 6px 26px;
    border-left: 4px solid var(--red);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.32;
    color: var(--text);
}
.merksatz em { font-style: normal; color: var(--red); }

/* ---------- Bildunterschrift ---------- */
.bildunterschrift {
    margin: 8px 0 22px;
    font-size: 15px;
    color: var(--muted);
    text-align: center;
}

/* ---------- Feldname im Text ---------- */
.feld {
    background: var(--chip, #eef2f7);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 1px 7px;
    font-size: .92em;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
}

/* ---------- Vergleich ----------
   Achtung: .vergleich gibt es im Projekt bereits als Rahmen einer Vergleichs-
   TABELLE (welcome.css). Weil dieses Stylesheet spaeter geladen wird, gewinnen
   die Regeln hier. Auf den drei statischen Seiten mit Vergleichstabelle
   (funktionen-beitragsabrechnung, funktionen-verein-3-vs-4,
   ueber-uns-installationsarten) aendert sich dadurch die Darstellung. */
.vergleich {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
    margin: 0 0 20px;
}
.vergleichkarte {
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 20px 22px;
    background: #fff;
}
.vergleichkarte--empfohlen { border: 2px solid #ff000040; }
.vergleich__titel {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 800;
    color: var(--text);
}
.vergleich ul {
    margin: 0;
    padding-left: 20px;
    color: var(--muted);
    font-size: 16px;
}