/* aufstellungsseminare.de – Farben, Schriften und Bausteine nach design.md (Schritt 8, Stand 14.09.2026) */

@font-face{font-family:"Lora";src:url(/fonts/lora-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Lora";src:url(/fonts/lora-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(/fonts/source-sans-3-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(/fonts/source-sans-3-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --papier:#f7f5f0; --tinte:#2b2724; --grau:#6a6560; --grau-hell:#a8a39d; --grau-blass:#c6c2bc; --grau-zart:#d6d2cc;
  --blau:#4a5d7a; --blau-dunkel:#3d4e67; --blau-hell:#dfe6ee; --blau-mittel:#a7b6c9;
  --salbei:#e4e9dc; --moos:#55684a; --moos-dunkel:#3b4a33; --auf-dunkel:#e9ece4;
  --linie:#d8d3ca;
  --serif:"Lora",Georgia,serif;
  --sans:"Source Sans 3","Helvetica Neue",Arial,sans-serif;
}

/* Grundlagen */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--tinte);font-family:var(--sans);font-size:1.125rem;line-height:1.6}
.wrap{max-width:1120px;margin:0 auto;padding-inline:20px}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0 0 .5em}
h1{font-size:2rem;line-height:1.15}
h2{font-size:1.6rem;line-height:1.2}
h3{font-size:1.25rem;line-height:1.3}
@media (min-width:760px){h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.4rem}}
p{margin:0 0 1em;max-width:38rem}
a{color:var(--blau)}
a:hover{color:var(--blau-dunkel)}
:focus-visible{outline:2px solid var(--blau);outline-offset:3px}
img{max-width:100%}
figure{margin:0}
figcaption{font-size:.6875rem;line-height:1.4;color:var(--grau-zart);margin-top:6px}
address{font-style:normal}
[id]{scroll-margin-top:24px}

/* Sprunglink für Tastatur und Vorlesehilfen, sichtbar erst beim Ansteuern */
.sprung{position:absolute;left:-9999px;top:0}
.sprung:focus{left:20px;top:12px;background:var(--papier);padding:8px 12px;z-index:10}

/* Kopfbereich */
.kopf{border-bottom:1px solid var(--linie)}
.kopf-inner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 32px;padding-block:20px}
.marke{text-decoration:none;color:var(--tinte);display:flex;flex-direction:column}
.marke:hover{color:var(--tinte)}
.marke-name{font-family:var(--serif);font-size:1.4rem;line-height:1.2}
.marke-zeile{font-size:.95rem;color:var(--grau)}
.menue ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 20px}
.menue a{color:var(--tinte);text-decoration:none;font-size:1rem}
.menue a:hover,.menue a[aria-current]{color:var(--tinte);text-decoration:underline;text-underline-offset:6px}

/* Knöpfe */
.knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.anruf{margin:28px 0 0}
.anruf + .knoepfe{margin-top:12px}
.knopf{display:inline-block;background:var(--blau);color:#fff;text-decoration:none;font-weight:600;font-size:1.05rem;padding:12px 20px;border-radius:3px;border:1px solid var(--blau)}
.knopf:hover{background:var(--blau-dunkel);border-color:var(--blau-dunkel);color:#fff}
.knopf-zwei{background:transparent;color:var(--blau)}
.knopf-zwei:hover{background:var(--blau-hell);color:var(--blau-dunkel)}

.dachzeile{font-size:1rem;color:var(--moos);margin-bottom:.75em}

/* Startbereich der Startseite: Foto links, Text rechts (7 : 5) */
.start{display:grid;gap:32px;padding-block:48px 64px;align-items:center}
@media (min-width:860px){.start{grid-template-columns:7fr 5fr;gap:56px}.start .bild{order:-1}}
.bild img{display:block;width:100%;height:auto;border-radius:3px}

/* Kopf der Unterseiten: Text links, Bild rechts (5 : 7); Foto einer Person links */
.seitenkopf{display:grid;gap:32px;padding-block:48px 64px;align-items:center}
.seitenkopf>*{min-width:0}
.seitenkopf h1{-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:14 8 6}  /* nur sehr lange Wörter trennen, z. B. Organisations-aufstellung; "Aufstellung" bleibt ganz */
@media (min-width:860px){
  .seitenkopf{grid-template-columns:5fr 7fr;gap:56px}
  .seitenkopf.person .bild{order:-1}
}
.seitenkopf.ohne-bild{display:block}

/* Bänder */
.band{padding-block:48px}
.band-blau{background:var(--blau-hell)}
.band-salbei{background:var(--salbei)}

/* Fakten-Zeile */
.fakten{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px;margin-block:0}
.fakten div{border-top:1px solid var(--blau-mittel);padding-top:12px}
.fakten dt{font-size:1rem}
.fakten dd{margin:0;font-family:var(--serif);font-size:1.35rem;line-height:1.3}

/* DGfS-Logo (nur auf „Über mich“) */
.siegel-gross{margin-top:32px}
.siegel-gross img{display:block;width:100%;max-width:300px;height:auto}

/* Textabschnitte */
.text{padding-block:64px}
.text + .text{padding-top:0}
.mit-linie{border-top:1px solid var(--linie);padding-top:48px}

/* Wegweiser mit Bild */
.wegweiser{display:grid;gap:48px 32px;margin-top:32px}
@media (min-width:760px){.wegweiser{grid-template-columns:1fr 1fr}}
.weg img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:3px}
.weg h3{margin-top:16px;margin-bottom:.35em}
.weg h3 a{color:var(--tinte);text-decoration:none}
.weg h3 a:hover{text-decoration:underline;text-underline-offset:5px}

/* Orte nebeneinander */
.orte{display:grid;gap:32px}
@media (min-width:760px){.orte{grid-template-columns:1fr 1fr;gap:48px}}

/* Ablauf */
.ablauf{max-width:38rem;padding-left:1.8em;margin:0 0 1em}
.ablauf li{margin-bottom:.75em;padding-left:.4em}
.ablauf li::marker{font-family:var(--serif);color:var(--blau);font-size:1.15em}

/* Häufige Fragen */
.fragen{max-width:38rem}
.frage{border-top:1px solid var(--linie);padding-top:24px;margin-top:24px}
.frage h3{margin-bottom:.4em}

/* Kundenstimmen */
blockquote{margin:0;font-family:var(--serif);font-style:italic;font-size:1.5rem;line-height:1.45;max-width:36rem}
.quelle{font-size:1rem;color:var(--tinte);margin-top:12px}
.stimmen{display:grid;gap:40px 56px;margin-top:32px}
@media (min-width:760px){.stimmen{grid-template-columns:1fr 1fr}}
.stimmen blockquote{font-size:1.3rem}

/* Wechselnde Kundenstimmen (stimmen.js): ohne JavaScript alle untereinander, mit JavaScript eine nach der anderen.
   Alle Stimmen liegen übereinander, so bleibt das Band gleich hoch und die Seite springt nicht. */
.wechsel{display:grid;gap:32px}
.wechsel.aktiv{gap:0}
.wechsel.aktiv .stimme{grid-area:1/1;align-self:center;opacity:0;visibility:hidden;transition:opacity .8s,visibility .8s}
.wechsel.aktiv .stimme.sichtbar{opacity:1;visibility:visible}
@media (prefers-reduced-motion:reduce){.wechsel.aktiv .stimme{transition:none}}
.wechsel-leiste{margin-top:16px;font-size:1rem}

/* Listen: Erfahrungsberichte, Qualifikationen, Seitenübersicht */
.liste{max-width:38rem;padding-left:1.2em;margin:0 0 1em}
.liste li{margin-bottom:.5em}
.bericht{border-top:1px solid var(--linie);padding-top:24px;margin-top:24px;max-width:38rem}

/* Impressum und Datenschutz */
.recht{max-width:38rem}
.recht h2{font-size:1.35rem;margin-top:1.8em}
.recht h2:first-child{margin-top:0}

/* Einladung am Seitenende */
.einladung{padding-block:64px}
.gruss{font-family:var(--serif);font-style:italic}

/* Fußbereich */
.fuss{background:var(--moos-dunkel);padding-block:40px;font-size:1rem;color:var(--auf-dunkel)}
.fuss p{max-width:none;margin:0}
.fuss ul{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-wrap:wrap;gap:8px 20px}
.fuss a{color:var(--auf-dunkel)}
.fuss a:hover{color:#fff}
.fuss a:focus-visible{outline-color:var(--auf-dunkel)}

/* Platzhalter (Texte aus Schritt 9, offene Angaben). Vor dem Livegang darf class="offen" in keiner Seite mehr stehen. */
.offen{outline:1px dashed var(--grau);outline-offset:8px}
.offen::before{content:"Platzhalter, vor dem Livegang ersetzen";display:block;grid-column:1/-1;font-family:var(--sans);font-style:normal;font-size:.85rem;line-height:1.4;color:var(--grau);margin-bottom:8px}