/* ------------------------------------------------------------------
   tmtool – Stylesheet der öffentlichen Website (talent-mining.de)

   Bewusst eigenständig neben tm.css: die Website tritt als Marke auf,
   das Werkzeug als Werkzeug. Beide teilen die Machart (einfaches CSS,
   deutsche Klassennamen), nicht die Farben.
   ------------------------------------------------------------------ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
    --web-blau: #4a6573;
    --web-blau-tief: #3c525d;
    --web-blau-hell: #5e7a87;
    --web-auf-blau: #f8fafc;
    --web-text: #18181b;
    --web-grau: #71717a;
    --web-flaeche: #ffffff;
    --web-gedeckt: #f9fafb;
    --web-matt: #f3f5f7;
    --web-linie: #e4e4e7;
    --web-linie-hell: #f4f4f5;
    --web-gold: #b35e09;
    --web-gold-hell: #d38509;
    --web-silber: #71717a;
    --web-diamant: #069cb7;
    --web-gruen: #10b77f;
    --web-nacht: #1e293b;
    --web-nacht-tief: #0f172a;
    --web-radius: .5rem;
    --web-radius-gross: 1rem;
    --web-bahn: 1200px;
    --web-schatten: 0 1px 2px rgba(0, 0, 0, .05);
    --web-schatten-mittel: 0 4px 6px -1px rgba(0, 0, 0, .07), 0 2px 4px -1px rgba(0, 0, 0, .04);
    --web-schatten-hoch: 0 10px 15px -3px rgba(0, 0, 0, .08), 0 4px 6px -2px rgba(0, 0, 0, .04);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body.seite-web {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--web-text);
    background: var(--web-flaeche);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.seite-web h1, .seite-web h2, .seite-web h3,
.seite-web h4, .seite-web h5, .seite-web h6 {
    font-family: Inter, system-ui, sans-serif;
    letter-spacing: -.02em;
    text-wrap: balance;
}

.seite-web img { max-width: 100%; }
.seite-web svg { stroke-linecap: round; stroke-linejoin: round; }
.seite-web a { color: inherit; text-decoration: none; }
.seite-web :focus-visible { outline: 2px solid var(--web-blau); outline-offset: 2px; border-radius: 4px; }

/* --- Grundraster ---------------------------------------------------- */

.bahn { max-width: var(--web-bahn); margin: 0 auto; padding: 0 1.5rem; }

.abschnitt { padding: 5rem 0; }
.abschnitt.gedeckt { background: var(--web-gedeckt); }
.abschnitt.dunkel { background: var(--web-blau); color: var(--web-auf-blau); }
.abschnitt.schmal { padding: 3rem 0; }

@media (max-width: 768px) {
    .abschnitt { padding: 3.5rem 0; }
}

.abschnitt-kopf { max-width: 700px; margin: 0 auto 3rem; text-align: center; }
.abschnitt-kopf h2 { font-size: clamp(1.75rem, 4vw, 2.25rem); font-weight: 700; margin-bottom: .75rem; }
.abschnitt-kopf p { font-size: 1.125rem; color: var(--web-grau); }
.abschnitt.dunkel .abschnitt-kopf p { color: rgba(248, 250, 252, .8); }

.augenbraue {
    display: inline-block;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--web-blau);
    margin-bottom: .75rem;
}

.abschnitt.dunkel .augenbraue { color: rgba(248, 250, 252, .7); }

.quelle { text-align: center; font-size: .75rem; color: rgba(113, 113, 122, .8); margin-top: 2rem; }
.abschnitt.dunkel .quelle { color: rgba(248, 250, 252, .5); }

/* --- Kopfzeile ------------------------------------------------------ */

.web-kopf {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--web-linie-hell);
}

.web-kopf .bahn { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.web-kopf .marke img { height: 3.5rem; width: auto; display: block; }

/* Vorgangsseiten tragen statt der Navigation die Angabe, worum es geht.
   Ohne sie steht das Logo allein links, statt gegen eine leere Fläche
   geschoben zu werden. */
.web-kopf .bahn:has(> .marke:only-child) { justify-content: flex-start; }
.web-kopf .vorgang { text-align: right; line-height: 1.25; }
.web-kopf .vorgang .augenbraue { margin: 0; font-size: .7rem; }
.web-kopf .vorgang strong { display: block; font-size: 1.05rem; font-weight: 700; color: var(--web-nacht-tief); }
@media (max-width: 640px) {
    .web-kopf .bahn { height: auto; padding-top: .9rem; padding-bottom: .9rem; gap: 1rem; }
    .web-kopf .marke img { height: 2.6rem; }
    .web-kopf .vorgang strong { font-size: .95rem; }
}
.web-fuss.schlicht { padding-top: 2rem; padding-bottom: 2rem; }
.web-fuss.schlicht .abschluss { border-top: none; padding-top: 0; margin-top: 0; }
.web-kopf nav ul { display: flex; align-items: center; gap: 2rem; list-style: none; }
.web-kopf nav a { font-size: .875rem; font-weight: 500; color: var(--web-grau); text-decoration: none; transition: color .2s; }
.web-kopf nav a:hover, .web-kopf nav a.aktiv { color: var(--web-blau); }

.web-kopf .knopf { font-size: .875rem; padding: .625rem 1.25rem; }

.menue-schalter {
    display: none;
    background: none;
    border: 0;
    padding: .5rem;
    color: var(--web-text);
    cursor: pointer;
}

.menue-schalter svg { width: 1.5rem; height: 1.5rem; display: block; }

.web-kopf .mobil { display: none; border-top: 1px solid var(--web-linie-hell); padding: 1rem 0; }
.web-kopf .mobil ul { flex-direction: column; align-items: stretch; gap: 1rem; }
.web-kopf .mobil .knopf { display: block; text-align: center; }

@media (max-width: 1023px) {
    .web-kopf nav.gross { display: none; }
    .menue-schalter { display: block; }
    .web-kopf.offen .mobil { display: block; }
}

body.seite-web > main { padding-top: 72px; }

/* --- Schaltflächen --------------------------------------------------- */

.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .875rem 1.5rem;
    border-radius: var(--web-radius);
    border: 1px solid transparent;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
}

.knopf svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.knopf .pfeil-gross { width: 1.5rem; height: 1.5rem; }

.seite-web .knopf-voll { background: var(--web-blau); color: var(--web-auf-blau); }
.seite-web .knopf-voll:hover { background: var(--web-blau-tief); transform: translateY(-2px); box-shadow: var(--web-schatten-hoch); }

.seite-web .knopf-umriss { background: var(--web-flaeche); border-color: var(--web-linie); color: var(--web-text); }
.seite-web .knopf-umriss:hover { background: var(--web-gedeckt); }

.seite-web .knopf-weiss { background: var(--web-flaeche); color: var(--web-nacht-tief); width: 100%; }
.seite-web .knopf-weiss:hover { background: #f1f5f9; }

.seite-web .knopf-durchsichtig { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); color: #fff; width: 100%; }
.seite-web .knopf-durchsichtig:hover { background: rgba(255, 255, 255, .15); }

/* --- Aufmacher ------------------------------------------------------- */

.aufmacher { padding: 6rem 0 8rem; background: linear-gradient(to bottom, var(--web-gedeckt), var(--web-flaeche)); }
.aufmacher .inner { max-width: 750px; }

.marke-plakette {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--web-blau);
    color: var(--web-auf-blau);
    font-size: .75rem;
    font-weight: 600;
    padding: .5rem 1rem;
    border-radius: 99px;
    margin-bottom: 1rem;
    align-self: flex-start;
}

.aufmacher .vorzeile { font-size: 1.125rem; color: var(--web-grau); font-weight: 500; margin-bottom: .5rem; }
.aufmacher h1 { font-size: clamp(2.25rem, 6vw, 3.75rem); font-weight: 800; line-height: 1.1; margin-bottom: 1.25rem; }
.aufmacher h1 .hervor { color: var(--web-blau); }
.aufmacher .anriss { font-size: 1.125rem; color: var(--web-grau); max-width: 600px; margin-bottom: 2rem; }

.knopfreihe { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.5rem; }

.zahlen { display: flex; flex-wrap: wrap; gap: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--web-linie); }
.zahlen .wert { font-family: Inter, system-ui, sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--web-blau); letter-spacing: -.02em; }
.zahlen .bezeichnung { font-size: .875rem; color: var(--web-grau); }

@media (max-width: 640px) {
    .knopfreihe { flex-direction: column; }
    .knopfreihe .knopf { width: 100%; }
    .zahlen { flex-direction: column; gap: 1.5rem; }
}

/* --- Kundenlogos ----------------------------------------------------- */

.kunden { padding: 3rem 0; border-bottom: 1px solid var(--web-linie-hell); }
.kunden .reihe { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 3rem; }
.kunden img { height: 3rem; width: auto; object-fit: contain; filter: grayscale(1); opacity: .6; transition: filter .3s, opacity .3s; }
.kunden img:hover { filter: none; opacity: 1; }

/* --- Zweispalter, Karten --------------------------------------------- */

.zweispalt { display: grid; gap: 3rem; align-items: start; }
@media (min-width: 1024px) { .zweispalt { grid-template-columns: 1fr 1fr; } }

.raster { display: grid; gap: 1.5rem; }
.raster.zwei { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.raster.drei { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.karte {
    background: var(--web-flaeche);
    border: 1px solid var(--web-linie);
    border-radius: var(--web-radius-gross);
    padding: 1.5rem;
}

.karte.gedeckt { background: var(--web-gedeckt); border-color: transparent; }
.karte h3 { font-size: 1.125rem; font-weight: 700; margin-bottom: 1rem; }
.karte h4 { font-size: .875rem; font-weight: 600; margin-bottom: .25rem; }
.karte p { font-size: .875rem; color: var(--web-grau); }

/* --- Aufzählungen und Hinweise --------------------------------------- */

.punkte { list-style: none; display: flex; flex-direction: column; gap: .625rem; margin-bottom: 1.25rem; }
.punkte li { position: relative; padding-left: 1.25rem; font-size: .875rem; color: var(--web-grau); }
.punkte li::before { content: ''; position: absolute; left: 0; top: .55rem; width: .375rem; height: .375rem; background: var(--web-blau); border-radius: 50%; }

.haken { list-style: none; display: flex; flex-direction: column; gap: .375rem; }
.haken li { display: flex; align-items: flex-start; gap: .5rem; font-size: .8125rem; color: var(--web-grau); }
.haken li::before { content: '✓'; color: var(--web-blau); font-weight: 700; }

.merksatz { background: var(--web-gedeckt); border-left: 3px solid var(--web-blau); padding: 1rem; font-size: .875rem; }

.einschub {
    max-width: 650px;
    margin: 0 auto 2.5rem;
    background: var(--web-gedeckt);
    border-radius: .75rem;
    padding: 1.25rem;
    text-align: center;
    font-size: .875rem;
    color: var(--web-grau);
}

.einschub strong { color: var(--web-text); }

/* --- Säulendiagramm (Herausforderung) -------------------------------- */

.saeulen-block { background: var(--web-gedeckt); border-radius: var(--web-radius-gross); padding: 1.5rem; }
.saeulen-block h4 { font-size: .875rem; font-weight: 600; text-align: center; margin-bottom: 1.5rem; }
.saeulen-bild { display: flex; align-items: center; justify-content: center; gap: 2rem; flex-wrap: wrap; }

.saeulen { display: flex; align-items: flex-end; gap: 1.5rem; }
.saeule { display: flex; flex-direction: column; align-items: center; }
.saeule .stapel { display: flex; flex-direction: column-reverse; width: 4rem; height: 200px; }
.saeule .jahr { font-size: .875rem; font-weight: 600; margin-top: .5rem; }

.stueck { display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 600; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .2); }
.stueck:first-child { border-radius: 0 0 4px 4px; }
.stueck:last-child { border-radius: 4px 4px 0 0; }
.stueck.wartend { background: var(--web-blau); }
.stueck.suchend { background: var(--web-blau-hell); }
.stueck.desinteressiert { background: rgba(113, 113, 122, .4); }

.legende { display: flex; flex-direction: column; gap: .75rem; }
.legende div { display: flex; align-items: center; gap: .5rem; font-size: .75rem; color: var(--web-grau); }
.legende .farbe { width: .75rem; height: .75rem; border-radius: 2px; flex-shrink: 0; }
.legende .farbe.wartend { background: var(--web-blau); }
.legende .farbe.suchend { background: var(--web-blau-hell); }
.legende .farbe.desinteressiert { background: rgba(113, 113, 122, .4); }

/* --- Gegenüberstellung ----------------------------------------------- */

.gegenueber { display: grid; gap: 1.5rem; max-width: 900px; margin: 0 auto; }
@media (min-width: 768px) { .gegenueber { grid-template-columns: 1fr 1fr; } }

.gegenueber > div {
    background: var(--web-flaeche);
    border: 2px solid var(--web-linie);
    border-radius: var(--web-radius-gross);
    padding: 2rem;
    display: flex;
    flex-direction: column;
}

.gegenueber > div.betont { border-color: var(--web-blau); box-shadow: var(--web-schatten-hoch); }
.gegenueber .kopfzone { min-height: 72px; }
.gegenueber .kennzeichen { display: block; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: rgba(113, 113, 122, .6); margin-bottom: .75rem; }
.gegenueber .betont .kennzeichen { color: var(--web-blau); }
.gegenueber .frage { font-family: Inter, system-ui, sans-serif; font-size: 1.125rem; font-weight: 700; }
.gegenueber .nachfrage { font-size: .875rem; color: var(--web-grau); font-style: italic; }
.gegenueber ul { list-style: none; flex-grow: 1; margin-top: 1rem; display: flex; flex-direction: column; gap: .375rem; }
.gegenueber li { display: flex; gap: .375rem; font-size: .875rem; color: var(--web-grau); }
.gegenueber li::before { content: '→'; color: rgba(113, 113, 122, .5); }
.gegenueber .betont li::before { color: var(--web-blau); }
.gegenueber .ergebnis { margin-top: auto; padding-top: 1.25rem; border-top: 1px solid var(--web-linie); font-family: Inter, system-ui, sans-serif; font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: rgba(113, 113, 122, .6); }
.gegenueber .betont .ergebnis { color: var(--web-blau); }

/* --- Leistungskacheln ------------------------------------------------ */

.leistung { display: grid; gap: 1.5rem; margin-top: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.leistung > div { text-align: center; padding: 1.5rem; border-radius: var(--web-radius-gross); background: rgba(248, 250, 252, .05); border: 1px solid rgba(248, 250, 252, .1); }
.leistung > div.betont { background: rgba(248, 250, 252, .1); border-color: rgba(248, 250, 252, .2); transform: scale(1.03); }
.leistung .bezeichnung { font-size: .875rem; color: rgba(248, 250, 252, .7); margin-bottom: .375rem; }
.leistung .wert { font-family: Inter, system-ui, sans-serif; font-size: 2.25rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: .375rem; }
.leistung .erlaeuterung { font-size: .875rem; color: rgba(248, 250, 252, .6); }

/* --- Produkte -------------------------------------------------------- */

.entscheidungshilfe {
    max-width: 550px;
    margin: 0 auto 2.5rem;
    background: var(--web-gedeckt);
    border: 2px dashed var(--web-linie);
    border-radius: var(--web-radius-gross);
    padding: 1.25rem;
}

.entscheidungshilfe h4 { font-size: .875rem; font-weight: 600; text-align: center; margin-bottom: .75rem; }
.entscheidungshilfe .zeile { display: flex; align-items: center; gap: .75rem; font-size: .875rem; margin-bottom: .375rem; }
.entscheidungshilfe .faktor { color: var(--web-grau); min-width: 130px; }
.entscheidungshilfe .pfeil { color: rgba(113, 113, 122, .5); }
.entscheidungshilfe .schluss { text-align: center; font-size: .875rem; color: var(--web-grau); padding-top: .75rem; margin-top: .75rem; border-top: 1px solid var(--web-linie); }
.entscheidungshilfe .schluss a { color: var(--web-blau); font-weight: 500; }

.produkte { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.produkt {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--web-flaeche);
    border: 1px solid var(--web-linie);
    border-top: 3px solid var(--web-silber);
    border-radius: var(--web-radius-gross);
    padding: 1.5rem;
}

.produkt.gold { border-top-color: var(--web-gold); background: linear-gradient(to bottom, #fffbeb, var(--web-flaeche)); }
.produkt.diamant { border-top-color: var(--web-diamant); }

.produkt .plakette {
    position: absolute;
    top: -.625rem;
    right: 1rem;
    background: var(--web-gold);
    color: #fff;
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: .25rem .625rem;
    border-radius: 99px;
}

.produkt .zeichen { width: 2.5rem; height: 2.5rem; border-radius: .75rem; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; margin-bottom: 1rem; background: #f4f4f5; }
.produkt.gold .zeichen { background: #fffbeb; }
.produkt.diamant .zeichen { background: #ecfeff; }
.produkt .zielgruppe { font-size: .75rem; color: var(--web-grau); margin-bottom: .25rem; }
.produkt h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: .75rem; }
.produkt .umfang { background: var(--web-gedeckt); border-radius: var(--web-radius); padding: .625rem; margin-bottom: .75rem; font-size: .875rem; }
.produkt .umfang strong { color: var(--web-blau); }
.produkt > p { font-size: .75rem; color: var(--web-grau); margin-bottom: .75rem; }
.produkt .haken { margin-bottom: 1rem; }
.produkt .preis { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--web-linie-hell); }
.produkt .preis .betrag { font-family: Inter, system-ui, sans-serif; font-size: 1.875rem; font-weight: 700; letter-spacing: -.02em; }
.produkt .preis .waehrung { color: var(--web-grau); }

.entscheidungshilfe .silber { color: var(--web-silber); }
.entscheidungshilfe .gold { color: var(--web-gold); }
.entscheidungshilfe .diamant { color: var(--web-diamant); }

.enthalten { margin-top: 4rem; max-width: 900px; margin-left: auto; margin-right: auto; }
.enthalten > h3, .zusatzleistungen > h3 { font-size: 1.25rem; font-weight: 700; text-align: center; margin-bottom: 1.5rem; }
.enthalten .liste { background: var(--web-gedeckt); border-radius: var(--web-radius-gross); padding: 2rem; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.enthalten .liste > div { display: flex; gap: .75rem; }
.enthalten .liste .haken-zeichen { color: var(--web-blau); }
.enthalten .liste p:first-of-type { font-weight: 600; font-size: .875rem; }
.enthalten .liste p:last-of-type { font-size: .75rem; color: var(--web-grau); }

.zusatzleistungen { margin-top: 3rem; max-width: 900px; margin-left: auto; margin-right: auto; }
.zusatzleistungen .kopfzeile { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.zusatzleistungen .kopfzeile h4 { font-family: Inter, system-ui, sans-serif; font-weight: 700; }
.zusatzleistungen .art { font-size: .75rem; background: var(--web-matt); color: var(--web-grau); padding: .125rem .5rem; border-radius: 99px; }
.zusatzleistungen svg { width: 1.25rem; height: 1.25rem; color: var(--web-blau); }

.preishinweis { text-align: center; font-size: .75rem; color: var(--web-grau); margin-top: 2rem; }

/* --- Ablauf ---------------------------------------------------------- */

.ablauf { position: relative; max-width: 950px; margin: 0 auto; }
.ablauf .linie { position: absolute; top: 1.25rem; left: 8%; right: 8%; height: 2px; background: var(--web-linie); }
.ablauf .schritte { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
.ablauf .schritt { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ablauf .nummer { width: 2.5rem; height: 2.5rem; background: var(--web-flaeche); border: 2px solid var(--web-blau); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: Inter, system-ui, sans-serif; font-weight: 700; color: var(--web-blau); margin-bottom: .75rem; position: relative; z-index: 1; flex-shrink: 0; }
.ablauf h4 { font-size: .875rem; font-weight: 600; margin-bottom: .125rem; }
.ablauf p { font-size: .75rem; color: var(--web-grau); }

@media (max-width: 767px) { .ablauf .linie { display: none; } }

.aufwandshinweis { max-width: 380px; margin: 2.5rem auto 0; background: var(--web-flaeche); border: 2px solid var(--web-blau); border-radius: var(--web-radius); padding: 1rem; text-align: center; font-size: .875rem; }
.aufwandshinweis strong { color: var(--web-blau); }

/* --- Kundenstimmen --------------------------------------------------- */

.stimmen { display: grid; gap: 1.5rem; max-width: 1000px; margin: 0 auto; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.stimme { background: var(--web-gedeckt); border-radius: var(--web-radius-gross); padding: 1.5rem; display: flex; flex-direction: column; }
.stimme blockquote { font-size: .875rem; flex-grow: 1; margin-bottom: 1.25rem; }
.stimme .anfuehrung { display: block; font-size: 2.25rem; line-height: 1; color: rgba(74, 101, 115, .3); margin-bottom: .5rem; }
.stimme .person { display: flex; align-items: center; gap: .75rem; padding-top: 1rem; border-top: 1px solid var(--web-linie); }
.stimme .person .angaben { flex-grow: 1; }
.stimme .name { font-size: .875rem; font-weight: 600; }
.stimme .rolle { font-size: .75rem; color: var(--web-grau); }
.stimme .person img { height: 1.5rem; width: auto; filter: grayscale(1); opacity: .6; }

/* --- Fragen (details/summary statt JS-Akkordeon) --------------------- */

.fragen { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: .75rem; }

.fragen details { background: var(--web-flaeche); border: 1px solid var(--web-linie-hell); border-radius: var(--web-radius); overflow: hidden; }
.fragen summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after {
    content: '';
    width: .625rem; height: .625rem;
    border-right: 2px solid var(--web-grau);
    border-bottom: 2px solid var(--web-grau);
    transform: rotate(45deg);
    transition: transform .2s;
    flex-shrink: 0;
}
.fragen details[open] summary { background: rgba(249, 250, 251, .6); }
.fragen details[open] summary::after { transform: rotate(-135deg); }
.fragen summary:hover { background: var(--web-gedeckt); }
.fragen .antwort { padding: 0 1.25rem 1rem; font-size: .875rem; color: var(--web-grau); }

/* --- Kontaktabschluss ------------------------------------------------ */

.kontaktblock {
    background: linear-gradient(to bottom right, var(--web-nacht), var(--web-nacht-tief));
    border-radius: 1.5rem;
    padding: 3rem;
    color: #fff;
}

@media (max-width: 768px) { .kontaktblock { padding: 2rem; } }

.kontaktblock .aufteilung { display: grid; gap: 3rem; align-items: start; }
@media (min-width: 1024px) { .kontaktblock .aufteilung { grid-template-columns: 1fr 1fr; } }
.kontaktblock h2 { font-size: clamp(1.75rem, 4vw, 2.25rem); font-weight: 700; margin-bottom: .75rem; }
.kontaktblock .anriss { font-size: 1.125rem; color: rgba(255, 255, 255, .8); margin-bottom: 1.5rem; }
.kontaktblock .zusagen { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.kontaktblock .zusagen li { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: rgba(255, 255, 255, .7); }
.kontaktblock .zusagen svg { width: 1rem; height: 1rem; }

.kontaktkarte { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--web-radius-gross); padding: 1.5rem; }
.kontaktkarte .person { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.kontaktkarte .person img { width: 4rem; height: 4rem; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, .2); }
.kontaktkarte .person h4 { font-weight: 600; }
.kontaktkarte .person p { font-size: .875rem; color: rgba(255, 255, 255, .7); }
.kontaktkarte .angaben { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.5rem; }
.kontaktkarte .angaben div { display: flex; align-items: center; gap: .75rem; font-size: .875rem; color: rgba(255, 255, 255, .8); }
.kontaktkarte .angaben svg { width: 1rem; height: 1rem; opacity: .6; flex-shrink: 0; }
.kontaktkarte .angaben a { text-decoration: none; }
.kontaktkarte .angaben a:hover { color: #fff; }
.kontaktkarte .schaltflaechen { display: flex; flex-direction: column; gap: .625rem; }
.kontaktkarte .schaltflaechen .knopf { font-size: .875rem; padding: .75rem 1rem; }

/* --- Fußzeile -------------------------------------------------------- */

.web-fuss { background: var(--web-gedeckt); border-top: 1px solid var(--web-linie-hell); }
.web-fuss .bahn { padding-top: 3rem; padding-bottom: 3rem; }
.web-fuss .spalten { display: grid; gap: 2.5rem; margin-bottom: 2rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.web-fuss img { height: 2rem; margin-bottom: .75rem; }
.web-fuss .beschreibung { font-size: .875rem; color: var(--web-grau); max-width: 260px; }
.web-fuss h4 { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .75rem; }
.web-fuss ul { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.web-fuss li, .web-fuss a { font-size: .875rem; color: var(--web-grau); text-decoration: none; }
.web-fuss a:hover { color: var(--web-blau); }
.web-fuss .kontakt li { display: flex; align-items: flex-start; gap: .5rem; }
.web-fuss .kontakt svg { width: .875rem; height: .875rem; margin-top: .25rem; opacity: .6; flex-shrink: 0; }

.web-fuss .abschluss { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--web-linie); font-size: .75rem; color: var(--web-grau); }
.web-fuss .siegel { display: flex; gap: 1.25rem; }
.web-fuss .siegel span { display: flex; align-items: center; gap: .375rem; }
.web-fuss .siegel svg { width: .875rem; height: .875rem; opacity: .6; }
.web-fuss .rechtliches { display: flex; gap: 1.25rem; }

/* --- Fließtextseiten (AGB, Datenschutz, Impressum) -------------------- */

.textseite { max-width: 800px; margin: 0 auto; }
.textseite h1 { font-size: clamp(1.75rem, 4vw, 2.25rem); font-weight: 700; margin-bottom: .5rem; }
.textseite .stand { font-size: .875rem; color: var(--web-grau); margin-bottom: 2.5rem; }
.textseite section { margin-bottom: 2rem; scroll-margin-top: 88px; }
.textseite h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: .75rem; padding-top: 1rem; }
.textseite h3 { font-size: 1rem; font-weight: 600; margin: 1.25rem 0 .5rem; }
.textseite p, .textseite li { font-size: .9375rem; color: var(--web-grau); margin-bottom: .75rem; }
.textseite ul, .textseite ol { padding-left: 1.25rem; margin-bottom: .75rem; }
.textseite li { margin-bottom: .375rem; }
.textseite strong { color: var(--web-text); }
.textseite a { color: var(--web-blau); text-decoration: underline; }
.textseite dl { margin-bottom: .75rem; }
.textseite dt { font-weight: 600; font-size: .875rem; margin-top: .75rem; }
.textseite dd { font-size: .9375rem; color: var(--web-grau); }

.sprungmarken { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 2.5rem; }
.sprungmarken { gap: 1.5rem; }
.sprungmarken a { font-size: 1rem; font-weight: 500; color: var(--web-blau); }
.sprungmarken a:hover { text-decoration: underline; }

/* --- Seitenkopf für Unterseiten -------------------------------------- */

.seitenkopf { background: linear-gradient(to bottom, var(--web-gedeckt), var(--web-flaeche)); padding: 4rem 0 3rem; }
.seitenkopf .inner { max-width: 750px; }
.seitenkopf h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; line-height: 1.15; margin-bottom: 1rem; }
.seitenkopf .anriss { font-size: 1.125rem; color: var(--web-grau); max-width: 620px; }

/* --- Unterseiten ------------------------------------------------------ */

.inhaltsbahn { max-width: 1000px; margin: 0 auto; padding: 0 1.5rem; }

.titelband { background: var(--web-gedeckt); padding: 6rem 0; text-align: center; }
.titelband h1 { font-size: clamp(2.25rem, 5vw, 3rem); font-weight: 800; }

.abschnitt-titel { font-size: clamp(1.5rem, 3vw, 1.875rem); font-weight: 700; margin-bottom: 1rem; }
.fliess { color: var(--web-grau); margin-bottom: 1rem; }
.fliess:last-child { margin-bottom: 0; }

.leitsatz {
    background: var(--web-flaeche);
    border: 2px solid var(--web-blau);
    border-radius: var(--web-radius-gross);
    padding: 2rem;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 500;
}

.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.kennzahlen > div { background: var(--web-flaeche); border: 1px solid var(--web-linie-hell); border-radius: .75rem; padding: 1.5rem; text-align: center; }
.kennzahlen .wert { display: block; font-family: Inter, system-ui, sans-serif; font-size: 1.875rem; font-weight: 700; color: var(--web-blau); letter-spacing: -.02em; }
.kennzahlen .bezeichnung { display: block; font-size: .875rem; color: var(--web-grau); margin-top: .25rem; }

.datenpunkte { display: grid; gap: 1rem; }
@media (min-width: 768px) { .datenpunkte { grid-template-columns: 1fr 1fr; } }
.datenpunkte > div { background: var(--web-flaeche); border: 1px solid var(--web-linie-hell); border-radius: .75rem; padding: 1.25rem; }
.datenpunkte .wert { font-family: Inter, system-ui, sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--web-blau); margin-bottom: .25rem; }
.datenpunkte .bezeichnung { font-size: .875rem; color: var(--web-grau); }

.hinweiskarte {
    margin-top: 2rem;
    background: linear-gradient(to bottom right, var(--web-blau), var(--web-blau-tief));
    border-radius: var(--web-radius-gross);
    padding: 2rem;
    color: var(--web-auf-blau);
}

.hinweiskarte h4 { font-size: 1.125rem; font-weight: 600; margin-bottom: .75rem; }
.hinweiskarte p { font-size: .875rem; color: rgba(248, 250, 252, .9); }

.pfeilliste { list-style: none; }
.pfeilliste li { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--web-linie-hell); color: var(--web-grau); }
.pfeilliste li:last-child { border-bottom: none; }
.pfeilliste li::before { content: '→'; color: var(--web-blau); font-weight: 600; flex-shrink: 0; }

.vergleich { overflow-x: auto; }
.vergleich table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.vergleich th { text-align: left; padding: 1rem; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: rgba(113, 113, 122, .6); border-bottom: 1px solid var(--web-linie); }
.vergleich td { padding: 1rem; color: var(--web-grau); border-bottom: 1px solid var(--web-linie-hell); }
.vergleich td:first-child { font-weight: 500; color: var(--web-text); }

.siegelraster { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.siegelraster > div { display: flex; align-items: center; gap: .5rem; background: var(--web-flaeche); border: 1px solid var(--web-linie-hell); border-radius: var(--web-radius); padding: 1rem; font-size: .875rem; font-weight: 500; }
.siegelraster svg { width: 1.25rem; height: 1.25rem; color: var(--web-gruen); flex-shrink: 0; }

/* --- Erfolgsbeispiele -------------------------------------------------- */

.fallstudien { display: grid; gap: 2rem; }

.fallstudie {
    border: 1px solid var(--web-linie-hell);
    border-radius: var(--web-radius-gross);
    overflow: hidden;
    display: grid;
    transition: box-shadow .2s;
}

.fallstudie:hover { box-shadow: var(--web-schatten-mittel); }

@media (min-width: 768px) { .fallstudie { grid-template-columns: 1fr 2fr; } }

.fallstudie .steckbrief { background: var(--web-gedeckt); padding: 2rem; display: flex; flex-direction: column; justify-content: center; }
.fallstudie .steckbrief h3 { font-size: 1.375rem; font-weight: 700; margin-bottom: 1rem; }
.fallstudie .merkmale { list-style: none; display: flex; flex-direction: column; gap: .5rem; font-size: .875rem; color: var(--web-grau); }
.fallstudie .merkmale li { display: flex; align-items: center; gap: .5rem; }
.fallstudie .merkmale svg { width: 1rem; height: 1rem; color: var(--web-blau); flex-shrink: 0; }
.fallstudie .merkmale .ergebnis { font-weight: 600; color: var(--web-text); }

.fallstudie .darstellung { padding: 2rem; display: flex; flex-direction: column; gap: 1.25rem; }
.fallstudie .darstellung h4 { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: rgba(113, 113, 122, .7); margin-bottom: .5rem; }
.fallstudie .darstellung p { color: var(--web-grau); }

.kennzahlentabelle { background: var(--web-flaeche); border: 1px solid var(--web-linie-hell); border-radius: .75rem; overflow: hidden; }
.kennzahlentabelle table { width: 100%; border-collapse: collapse; font-size: .875rem; font-variant-numeric: tabular-nums; }
.kennzahlentabelle th { background: rgba(243, 245, 247, .5); text-align: left; padding: .875rem 1rem; font-weight: 600; }
.kennzahlentabelle th:not(:first-child), .kennzahlentabelle td:not(:first-child) { text-align: right; }
.kennzahlentabelle td { padding: .875rem 1rem; border-top: 1px solid var(--web-linie-hell); }
.kennzahlentabelle td:first-child { font-weight: 500; }

.fussnote { text-align: center; font-size: .875rem; color: var(--web-grau); margin-top: 1.5rem; }

/* --- Bewerberseite ----------------------------------------------------- */

.vorzuege { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; }
.vorzuege > div { background: var(--web-gedeckt); border: 1px solid var(--web-linie-hell); border-radius: var(--web-radius-gross); padding: 1.5rem; }
.vorzuege svg { width: 2rem; height: 2rem; color: var(--web-blau); margin-bottom: 1rem; }
.vorzuege h3 { font-size: 1.125rem; font-weight: 700; margin-bottom: .5rem; }
.vorzuege p { font-size: .875rem; color: var(--web-grau); }

.ansprechpartner { background: var(--web-gedeckt); border: 1px solid var(--web-linie-hell); border-radius: var(--web-radius-gross); padding: 2rem; }
.ansprechpartner .aufteilung { display: flex; flex-wrap: wrap; align-items: center; gap: 2rem; }
.ansprechpartner img { width: 8rem; height: 8rem; border-radius: 50%; object-fit: cover; }
.ansprechpartner .kennzeichen { display: block; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--web-blau); margin-bottom: .25rem; }
.ansprechpartner h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; }
.ansprechpartner .wege { display: flex; flex-direction: column; gap: .5rem; }
.ansprechpartner .wege a { display: flex; align-items: center; gap: .5rem; color: var(--web-grau); text-decoration: none; }
.ansprechpartner .wege a:hover { color: var(--web-blau); }
.ansprechpartner .wege svg { width: 1rem; height: 1rem; flex-shrink: 0; }

.kleingedrucktes { font-size: .75rem; color: rgba(113, 113, 122, .7); text-align: center; margin-top: 2rem; }

/* Auf breiten Fragen-Blöcken (Bewerberseite) sitzt der Text etwas großzügiger. */
.fragen.weit summary { padding: 1.25rem 1.5rem; font-size: 1rem; }
.fragen.weit .antwort { padding: 0 1.5rem 1.25rem; }
.fragen.weit details { border-color: var(--web-linie); border-radius: .75rem; }

/* --- Factsheet (A4-Blatt zum Ausdrucken) ------------------------------- */

.blattleiste { position: fixed; top: 1rem; right: 1rem; z-index: 50; display: flex; gap: .5rem; }
.blattleiste .knopf { padding: .5rem 1rem; font-size: .875rem; }

.blatt { max-width: 210mm; margin: 0 auto; background: var(--web-flaeche); padding: 2rem; }

.blatt .blattkopf { display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid var(--web-blau); padding-bottom: 1rem; margin-bottom: 1.5rem; }
.blatt .blattkopf img { height: 2.5rem; }
.blatt .blattkopf .rechts { text-align: right; }
.blatt .blattkopf .rechts p:first-child { font-size: .75rem; color: var(--web-grau); }
.blatt .blattkopf .rechts p:last-child { font-family: Inter, system-ui, sans-serif; font-size: 1.125rem; font-weight: 700; color: var(--web-blau); }

.blatt section { margin-bottom: 1.5rem; }
.blatt h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.125rem; font-weight: 700; margin-bottom: .75rem; }
.blatt h2::before { content: '▸'; color: var(--web-blau); }
.blatt h2.klein { font-size: .875rem; }

.blatt .versprechen { background: var(--web-gedeckt); border-radius: .75rem; padding: 1rem; }
.blatt .versprechen h1 { font-size: 1.25rem; font-weight: 700; margin-bottom: .5rem; }
.blatt .versprechen p { font-size: .875rem; color: var(--web-grau); }

.blattprodukte { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.blattprodukt { border: 2px solid var(--web-silber); border-radius: var(--web-radius); padding: .75rem; }
.blattprodukt.gold { border-color: var(--web-gold-hell); background: rgba(255, 251, 235, .5); }
.blattprodukt.diamant { border-color: var(--web-diamant); }
.blattprodukt .kopfzeile { display: flex; align-items: center; gap: .5rem; margin-bottom: .25rem; }
.blattprodukt h3 { font-size: .875rem; font-weight: 700; }
.blattprodukt .zielgruppe { font-size: .625rem; color: var(--web-grau); margin-bottom: .25rem; }
.blattprodukt .umfang { background: var(--web-gedeckt); border-radius: 4px; padding: .25rem .5rem; font-size: .75rem; text-align: center; margin-bottom: .5rem; }
.blattprodukt .umfang strong { color: var(--web-blau); }
.blattprodukt > p { font-size: .625rem; color: var(--web-grau); line-height: 1.35; margin-bottom: .5rem; }
.blattprodukt .preis { border-top: 1px solid var(--web-linie); padding-top: .5rem; font-family: Inter, system-ui, sans-serif; font-size: 1.125rem; font-weight: 700; }
.blattprodukt .plakette { display: inline-block; margin-top: .25rem; background: var(--web-gold-hell); color: #fff; font-size: .5625rem; font-weight: 600; padding: .125rem .5rem; border-radius: 99px; }

.blatt .zweierlei { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
.blatt .sammelkasten { background: var(--web-gedeckt); border-radius: var(--web-radius); padding: .75rem; }
.blatt .sammelkasten ul { list-style: none; display: flex; flex-direction: column; gap: .25rem; }
.blatt .sammelkasten li { display: flex; align-items: center; gap: .5rem; font-size: .75rem; }
.blatt .sammelkasten svg { width: .75rem; height: .75rem; color: var(--web-blau); flex-shrink: 0; }

.blatt .zusatz { border: 1px solid var(--web-linie); border-radius: var(--web-radius); padding: .5rem; margin-bottom: .5rem; }
.blatt .zusatz .kopfzeile { display: flex; align-items: center; gap: .25rem; margin-bottom: .25rem; }
.blatt .zusatz .name { font-weight: 600; font-size: .75rem; }
.blatt .zusatz .art { font-size: .5625rem; background: var(--web-matt); color: var(--web-grau); padding: .125rem .375rem; border-radius: 4px; }
.blatt .zusatz p { font-size: .625rem; color: var(--web-grau); }
.blatt .zusatz .preis { font-size: .75rem; font-weight: 700; margin-top: .25rem; }

.blatt .ablauf .nummer { width: 2rem; height: 2rem; margin-bottom: .5rem; font-size: .875rem; }
.blatt .ablauf .schritte { grid-template-columns: repeat(5, 1fr); gap: .5rem; }
.blatt .ablauf h4 { font-size: .625rem; }
.blatt .ablauf p { font-size: .6875rem; line-height: 1.35; }
.blatt .ablauf .linie { top: 1rem; left: 10%; right: 10%; }

.blatt .aufwand { margin-top: .75rem; background: rgba(74, 101, 115, .1); border-radius: var(--web-radius); padding: .5rem; text-align: center; font-size: .75rem; font-weight: 600; color: var(--web-blau); }

.blatt .blattfuss { background: var(--web-nacht); color: #fff; border-radius: .75rem; padding: 1rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.blatt .blattfuss img { width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, .2); }
.blatt .blattfuss .person { display: flex; align-items: center; gap: 1rem; }
.blatt .blattfuss .person p:first-child { font-size: .75rem; color: rgba(255, 255, 255, .6); }
.blatt .blattfuss .person p:last-child { font-weight: 600; }
.blatt .blattfuss .wege { display: flex; flex-direction: column; gap: .25rem; font-size: .75rem; }
.blatt .blattfuss .wege div { display: flex; align-items: center; gap: .5rem; }
.blatt .blattfuss .wege svg { width: .75rem; height: .75rem; opacity: .6; }
.blatt .blattfuss .abbinder { text-align: right; }
.blatt .blattfuss .abbinder p { font-size: .625rem; color: rgba(255, 255, 255, .6); margin-bottom: .25rem; }
.blatt .blattfuss .abbinder .adresse { display: flex; align-items: center; gap: .25rem; font-size: .875rem; font-weight: 600; }
.blatt .blattfuss .abbinder svg { width: 1rem; height: 1rem; }

.blatt .hinweiszeile { font-size: .625rem; color: var(--web-grau); text-align: center; margin-top: .5rem; }

@media print {
    @page { size: A4; margin: 10mm; }
    body { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    .blattleiste { display: none; }
    .blatt { max-width: none; padding: 0; }
}

/* --- Pitch-Deck (Foliensatz) ------------------------------------------- */

body.seite-deck { display: flex; flex-direction: column; min-height: 100vh; background: var(--web-flaeche); }

.deck-werkzeuge { position: fixed; top: 1rem; right: 1rem; z-index: 50; display: flex; gap: .5rem; }
.deck-werkzeuge a, .deck-werkzeuge button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem;
    background: rgba(255, 255, 255, .8);
    backdrop-filter: blur(8px);
    border: 1px solid var(--web-linie);
    border-radius: var(--web-radius);
    color: var(--web-text);
    cursor: pointer;
}
.deck-werkzeuge a:hover, .deck-werkzeuge button:hover { background: var(--web-gedeckt); }
.deck-werkzeuge svg { width: 1rem; height: 1rem; }

.deck-buehne { flex: 1; display: flex; align-items: center; justify-content: center; padding-bottom: 5rem; }
.deck-rahmen { width: 100%; max-width: 1280px; aspect-ratio: 16 / 9; position: relative; overflow: hidden; }

.folie { display: flex; flex-direction: column; justify-content: center; height: 100%; padding: 0 4rem; }
.folie.mittig { align-items: center; text-align: center; }
.folie h1 { font-size: clamp(2.5rem, 5vw, 3.75rem); font-weight: 700; margin-bottom: 1rem; }
.folie h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; margin-bottom: 1.5rem; }
.folie .anriss { font-size: clamp(1.125rem, 2vw, 1.5rem); color: var(--web-grau); max-width: 48rem; }
.folie .marke { height: 4rem; margin-bottom: 2rem; }
.folie .riesenzahl { font-family: Inter, system-ui, sans-serif; font-size: clamp(5rem, 14vw, 10rem); font-weight: 700; color: rgba(113, 113, 122, .3); line-height: 1; margin-bottom: 1rem; }

.folie .kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; max-width: 56rem; }
.folie .kacheln > div { display: flex; align-items: flex-start; gap: .75rem; background: var(--web-gedeckt); border-radius: var(--web-radius); padding: 1rem; color: var(--web-grau); }
.folie .kacheln .punkt { width: .5rem; height: .5rem; background: var(--web-blau); border-radius: 50%; margin-top: .5rem; flex-shrink: 0; }

/* Folien mit Navigation: ohne JavaScript liegen alle untereinander. */
.deck-rahmen .folie { display: none; }
.deck-rahmen .folie.sichtbar { display: flex; }
body:not(.mit-skript) .deck-rahmen { aspect-ratio: auto; }
body:not(.mit-skript) .deck-rahmen .folie { display: flex; min-height: 80vh; border-bottom: 1px solid var(--web-linie); }
body:not(.mit-skript) .deck-leiste, body:not(.mit-skript) .deck-hinweis { display: none; }

.deck-leiste { position: fixed; bottom: 0; left: 0; right: 0; background: rgba(255, 255, 255, .8); backdrop-filter: blur(8px); border-top: 1px solid var(--web-linie); padding: 1rem 0; }
.deck-leiste .bahn { display: flex; align-items: center; justify-content: space-between; }
.deck-leiste button.blaettern { display: inline-flex; align-items: center; gap: .5rem; background: none; border: 0; font: inherit; font-weight: 500; color: var(--web-text); cursor: pointer; padding: .5rem .75rem; border-radius: var(--web-radius); }
.deck-leiste button.blaettern:hover:not(:disabled) { background: var(--web-gedeckt); }
.deck-leiste button.blaettern:disabled { opacity: .4; cursor: default; }
.deck-leiste button.blaettern svg { width: 1rem; height: 1rem; }

.deck-punkte { display: flex; align-items: center; gap: .5rem; }
.deck-punkte button { width: .625rem; height: .625rem; padding: 0; border: 0; border-radius: 99px; background: rgba(113, 113, 122, .3); cursor: pointer; transition: width .2s, background .2s; }
.deck-punkte button:hover { background: rgba(113, 113, 122, .5); }
.deck-punkte button[aria-current='true'] { width: 1.5rem; background: var(--web-blau); }

.deck-hinweis { position: fixed; bottom: 5rem; left: 1rem; font-size: .75rem; color: rgba(113, 113, 122, .5); }

.deck-produkte { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; max-width: 64rem; }
.deck-produkt { background: var(--web-flaeche); border: 1px solid var(--web-linie); border-top: 4px solid var(--web-silber); border-radius: .75rem; padding: 1.5rem; }
.deck-produkt.gold { border-top-color: var(--web-gold-hell); }
.deck-produkt.diamant { border-top-color: var(--web-diamant); }
.deck-produkt.hervorgehoben { box-shadow: 0 0 0 2px var(--web-blau), var(--web-schatten-hoch); }
.deck-produkt h3 { font-size: 1.125rem; font-weight: 700; margin-bottom: .5rem; }
.deck-produkt .umfang { background: var(--web-gedeckt); border-radius: var(--web-radius); padding: .5rem; margin-bottom: .75rem; font-size: .875rem; text-align: center; }
.deck-produkt .umfang strong { color: var(--web-blau); }
.deck-produkt .beschreibung { font-size: .875rem; color: var(--web-grau); }
.deck-produkt .zusatz { font-size: .875rem; font-weight: 600; color: var(--web-blau); }
.deck-produkt .preis { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--web-linie); font-family: Inter, system-ui, sans-serif; font-size: 1.5rem; font-weight: 700; }

@media (max-width: 768px) {
    .folie { padding: 0 1.5rem; }
    .deck-hinweis { display: none; }
}

/* --- Diagramme --------------------------------------------------------
   Farbgebung wie im ursprünglichen Pitch-Deck. Talent-Mining trägt das
   Marken-Blaugrau, der Vergleich tritt grau zurück. Jede Serie ist
   zusätzlich beschriftet, weil die Töne allein nicht überall
   ausreichend trennen.
   -------------------------------------------------------------------- */

:root {
    --dia-mining: #4d646f;
    --dia-vergleich: #abb5ba;
    --dia-aktiv: #21c45d;
    --dia-latent: #b86405;
    --dia-rest: #abb5ba;
    --dia-stufe-1: #abb5ba;
    --dia-stufe-2: #698796;
    --dia-stufe-3: #4d646f;
    --dia-silber: #999999;
    --dia-gold: #e7b008;
    --dia-diamant: #32c8dc;
}

.diagramm { width: 100%; height: auto; display: block; overflow: visible; }
.diagramm text { font-family: inherit; }
.diagramm .achsentext { font-size: 11px; fill: var(--web-grau); }
.diagramm .direktwert { font-size: 12px; font-weight: 600; fill: var(--web-text); }
.diagramm .wertaufbalken { font-size: 11px; font-weight: 600; fill: #fff; }
.diagramm .gitter { stroke: var(--web-linie); stroke-width: 1; }
.diagramm .achse { stroke: var(--web-rand, #cdd7e1); stroke-width: 1; }
.diagramm .mining { fill: var(--dia-mining); stroke: var(--dia-mining); }
.diagramm .vergleich { fill: var(--dia-vergleich); stroke: var(--dia-vergleich); }
.diagramm .rest { fill: var(--dia-rest); stroke: var(--dia-rest); }
.diagramm .aktiv { fill: var(--dia-aktiv); stroke: var(--dia-aktiv); }
.diagramm .latent { fill: var(--dia-latent); stroke: var(--dia-latent); }
.diagramm .linie { fill: none; stroke-width: 2; }
.diagramm .flaeche { stroke: none; opacity: .18; }
.diagramm .punkt { r: 4.5; stroke: var(--web-flaeche); stroke-width: 2; }
.diagramm .netz { fill: none; stroke: var(--web-linie); stroke-width: 1; }
.diagramm .netzachse { stroke: var(--web-linie); stroke-width: 1; }
.diagramm .radarflaeche { fill-opacity: .25; stroke-width: 2; }

.diagramm-legende { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 1rem; }
.diagramm-legende div { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--web-grau); }
.diagramm-legende .zeichen { width: .875rem; height: .875rem; border-radius: 3px; flex-shrink: 0; }
.diagramm-legende .zeichen.strich { height: .25rem; width: 1.5rem; border-radius: 2px; }
.diagramm-legende .zeichen.mining { background: var(--dia-mining); }
.diagramm-legende .zeichen.vergleich { background: var(--dia-vergleich); }
.diagramm-legende .zeichen.rest { background: var(--dia-rest); }
.diagramm-legende .zeichen.aktiv { background: var(--dia-aktiv); }
.diagramm-legende .zeichen.latent { background: var(--dia-latent); }
.diagramm-legende .zeichen.silber { background: var(--dia-silber); }

.folie .diagrammbereich { display: grid; gap: 2rem; align-items: center; max-width: 64rem; }
@media (min-width: 900px) { .folie .diagrammbereich { grid-template-columns: 1fr 1fr; } }
.folie .diagrammbereich.breit { max-width: 56rem; grid-template-columns: 1fr; }

.werteliste { display: flex; flex-direction: column; gap: 1rem; }
.werteliste .zeile { display: flex; align-items: center; gap: .75rem; }
.werteliste .zeichen { width: 1rem; height: 1rem; border-radius: 4px; flex-shrink: 0; }
.werteliste .zahl { margin-left: auto; font-weight: 700; font-size: 1.125rem; }
.werteliste .abbinder { padding-top: 1rem; border-top: 1px solid var(--web-linie); font-size: .875rem; color: var(--web-grau); }
.werteliste .abbinder strong { color: var(--web-text); }

/* Dichte Folien: die Website-Inhalte als Foliensatz, eine Stufe kleiner. */
.folie.dicht h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: .5rem; }
.folie.dicht .anriss { font-size: 1rem; margin-bottom: 1rem; }
.folie.dicht .karte { padding: 1rem; }
.folie.dicht .karte h3 { font-size: 1rem; margin-bottom: .5rem; }
.folie.dicht .karte h4 { font-size: .8125rem; }
.folie.dicht .karte p { font-size: .8125rem; }
.folie.dicht .punkte { gap: .375rem; margin-bottom: .75rem; }
.folie.dicht .punkte li { font-size: .8125rem; }
.folie.dicht .merksatz { padding: .75rem; font-size: .8125rem; }
.folie.dicht .saeule .stapel { height: 150px; width: 3rem; }
.folie.dicht .produkte { gap: .75rem; }
.folie.dicht .produkt { padding: 1rem; }
.folie.dicht .produkt h3 { font-size: 1rem; }
.folie.dicht .produkt .preis .betrag { font-size: 1.5rem; }
.folie.dicht .ablauf p { font-size: .6875rem; }
.folie.dicht .stimme { padding: 1rem; }
.folie.dicht .stimme blockquote { font-size: .8125rem; margin-bottom: .75rem; }
.folie.dicht .fragen { gap: .5rem; }
.folie.dicht .fragen summary { padding: .625rem 1rem; font-size: .8125rem; }
.folie.dicht .fragen .antwort { padding: 0 1rem .75rem; font-size: .8125rem; }
.folie.dicht .kontaktblock { padding: 1.5rem; }
.folie.dicht .kontaktblock h2 { font-size: 1.5rem; }
.folie.dicht .kontaktblock .anriss { font-size: 1rem; margin-bottom: 1rem; }
.folie.dicht .kontaktblock .aufteilung { gap: 1.5rem; }
.folie.dicht .zahlen { gap: 1.5rem; padding-top: 1rem; }
.folie.dicht .leistung { gap: 1rem; margin-top: 1rem; }
.folie.dicht .leistung .wert { font-size: 1.875rem; }
.folie.dicht .abschnitt-kopf { margin-bottom: 1.5rem; }
.folie.dunkel { background: var(--web-blau); color: var(--web-auf-blau); }
.folie.dunkel .augenbraue { color: rgba(248, 250, 252, .7); }
.folie.dunkel .quelle { color: rgba(248, 250, 252, .5); }

/* Schaltflächen in der Kopfzeile: die Navigationsfarbe darf sie nicht
   einfärben, und der Umriss trägt dort die Markenfarbe. */
.web-kopf nav a.knopf-umriss { color: var(--web-blau); border-color: var(--web-blau); }
.web-kopf nav a.knopf-umriss:hover { background: var(--web-blau); color: var(--web-auf-blau); }

/* --- Anfrageformular ---------------------------------------------------
   Die öffentliche Ersteinschätzung (Lead-Modul) tritt im Gewand der
   Website auf, nicht in dem des Werkzeugs.
   -------------------------------------------------------------------- */

.anfrage { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 900px) { .anfrage { grid-template-columns: 5fr 6fr; } }

.anfrage-pitch {
    background: linear-gradient(to bottom right, var(--web-nacht), var(--web-nacht-tief));
    border-radius: 1.5rem;
    padding: 2.5rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media (max-width: 768px) { .anfrage-pitch { padding: 1.75rem; } }

.anfrage-pitch h1 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; }
.anfrage-pitch .augenbraue { color: rgba(255, 255, 255, .7); margin-bottom: .5rem; }
.anfrage-pitch .unterzeile { color: rgba(255, 255, 255, .8); }

.anfrage-pitch .zusagen { list-style: none; display: flex; flex-direction: column; gap: .75rem; }
.anfrage-pitch .zusagen li { display: flex; gap: .625rem; align-items: flex-start; font-size: .9375rem; color: rgba(255, 255, 255, .85); }
.anfrage-pitch .zusagen svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; margin-top: .2rem; color: var(--web-gruen); }

.anfrage-pitch .ablaufliste { border-top: 1px solid rgba(255, 255, 255, .18); padding-top: 1.25rem; display: flex; flex-direction: column; gap: .875rem; }
.anfrage-pitch .schritt { display: flex; gap: .75rem; align-items: flex-start; font-size: .9rem; color: rgba(255, 255, 255, .85); }
.anfrage-pitch .schritt b { color: #fff; }
.anfrage-pitch .schritt .nr {
    width: 1.5rem; height: 1.5rem; flex-shrink: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3);
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums;
}

.anfrage-pitch .portalhinweis { margin-top: auto; font-size: .875rem; color: rgba(255, 255, 255, .7); }
.anfrage-pitch .portalhinweis a { color: #fff; font-weight: 600; text-decoration: underline; }

.anfrage-formular {
    background: var(--web-flaeche);
    border: 1px solid var(--web-linie);
    border-radius: var(--web-radius-gross);
    box-shadow: var(--web-schatten-mittel);
    padding: 2rem;
}

@media (max-width: 768px) { .anfrage-formular { padding: 1.5rem; } }

.anfrage-formular h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: .25rem; }
.anfrage-formular .hinweis { color: var(--web-grau); font-size: .875rem; margin-bottom: 1.5rem; }
.anfrage-formular .doppel { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .875rem; }
@media (max-width: 560px) { .anfrage-formular .doppel { grid-template-columns: 1fr; } }

.formularfeld { margin-bottom: 1rem; }
.formularfeld label { display: block; font-weight: 600; font-size: .875rem; margin-bottom: .375rem; }
.formularfeld input[type=text],
.formularfeld input[type=email],
.formularfeld input[type=tel],
.formularfeld input[type=file],
.formularfeld textarea {
    width: 100%;
    padding: .625rem .75rem;
    border: 1px solid var(--web-linie);
    border-radius: var(--web-radius);
    font: inherit;
    background: var(--web-flaeche);
    color: var(--web-text);
}
.formularfeld input:focus, .formularfeld textarea:focus {
    outline: none;
    border-color: var(--web-blau);
    box-shadow: 0 0 0 3px rgba(74, 101, 115, .18);
}
.formularfeld input::placeholder, .formularfeld textarea::placeholder { color: rgba(113, 113, 122, .7); }
.formularfeld .fehler { color: #b3261e; font-size: .875rem; margin-top: .375rem; }

fieldset.anzeigefeld { border: 1px solid var(--web-linie); border-radius: var(--web-radius); padding: 1rem; margin-bottom: 1rem; }
fieldset.anzeigefeld legend { font-weight: 600; font-size: .875rem; padding: 0 .375rem; }
fieldset.anzeigefeld .erklaerung { font-size: .8125rem; color: var(--web-grau); margin-bottom: .75rem; }

.anfrage-formular .knopf { width: 100%; padding: .875rem; }
.datenschutzzeile { font-size: .8125rem; color: var(--web-grau); margin-top: .875rem; }

/* --- Bestätigungsseite -------------------------------------------------- */

.bestaetigung { max-width: 560px; margin: 0 auto; text-align: center; }
.bestaetigung .zeichen {
    width: 3.5rem; height: 3.5rem; margin: 0 auto 1.5rem; border-radius: 50%;
    background: rgba(16, 183, 127, .12);
    display: flex; align-items: center; justify-content: center;
}
.bestaetigung .zeichen svg { width: 1.75rem; height: 1.75rem; color: var(--web-gruen); }
.bestaetigung h1 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; margin-bottom: 1rem; }
.bestaetigung p { color: var(--web-grau); margin-bottom: 1rem; }
.bestaetigung strong { color: var(--web-text); }

/* --- Vorgangsseiten: Bogen mit begleitendem Austausch ------------------- */

.vorgang-raster { max-width: 1120px; }
.vorgang-inhalt { min-width: 0; }

/* Der Umbruch liegt bewusst tief: bei 1000px griff er auf einem nicht
   maximierten Laptopfenster nie, und übrig blieb nur ein breiterer
   Container ohne die zweite Spalte. 300px Spalte plus Mindestbreite für
   das Formular gehen sich ab knapp 900px aus. */
@media (min-width: 900px) {
    .vorgang-raster { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.75rem; align-items: start; }
    /* Klebt beim Blättern mit: Rückfragen entstehen mitten im Bogen. */
    .vorgang-kontakt { position: sticky; top: 5.5rem; }
    .vorgang-kontakt .verlauf { max-height: 34vh; overflow-y: auto; }
}

.vorgang-kontakt .karte { margin-bottom: 0; }
.vorgang-kontakt h2 { font-size: 1rem; margin-bottom: .9rem; }

/* Nicht „.betreuung" als „.ansprechpartner": den Namen belegt der
   Kontaktblock der Webseite bereits mit Fläche, Rahmen und 2rem Polsterung. */
.vorgang-kontakt .betreuung { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.vorgang-kontakt .betreuung img {
    width: 46px; height: 46px; border-radius: 50%;
    object-fit: cover; object-position: top center; flex: none;
}
.vorgang-kontakt .betreuung strong { display: block; font-size: .95rem; }
.vorgang-kontakt .verlauf { margin-bottom: .85rem; }
.vorgang-kontakt .verlauf:empty { display: none; }
.vorgang-kontakt .nachricht {
    background: var(--web-gedeckt); border-radius: 10px;
    padding: .55rem .7rem; margin-bottom: .5rem; font-size: .88rem;
}
.vorgang-kontakt .nachricht.eigen { background: #eef4fb; }
.vorgang-kontakt .nachricht small { display: block; margin-bottom: .15rem; }
.vorgang-kontakt .feld { margin-bottom: .6rem; }

.vorgang-kontakt .karte.stand { margin-bottom: 1rem; padding: .8rem .9rem; border-left: 3px solid var(--web-blau); }
.vorgang-kontakt .karte.stand strong { display: block; font-size: .95rem; }
.vorgang-kontakt .karte.stand.erledigt { border-left-color: #1f8a4c; }
.vorgang-kontakt .karte.stand.erledigt strong { color: #1f8a4c; }