/* Thomas Merz · Organisation & Wandel – Stylesheet
   Farben und Schriften nach Styleguide; Schriften lokal (Ordner /fonts), keine externen Dienste. */

@font-face { font-family: "Source Serif 4"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("../fonts/SourceSerif4-SemiBold.woff2") format("woff2"), url("../fonts/SourceSerif4-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Source Sans 3"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/SourceSans3-Regular.woff2") format("woff2"), url("../fonts/SourceSans3-Regular.ttf") format("truetype"); }
@font-face { font-family: "Source Sans 3"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("../fonts/SourceSans3-SemiBold.woff2") format("woff2"), url("../fonts/SourceSans3-SemiBold.ttf") format("truetype"); }

:root {
  --grund: #F8F7F4; --papier: #FFFFFF; --creme: #F3E9D2; --linie: #D5D9E0;
  --schiefer: #5B6270; --tinte: #1A1F2B; --akzent: #9A4A2C; --akzent-hell: #D08A6A;
  --text-auf-creme: #4A505C; --text-auf-dunkel: #C9CED6; --linie-dunkel: #3A4150;
  --serif: "Source Serif 4", Georgia, serif;
  --sans: "Source Sans 3", Aptos, Arial, sans-serif;
  --breite: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--grund); color: var(--tinte); font-family: var(--sans); font-size: 1.125rem; line-height: 1.55; }
img, svg { max-width: 100%; }
a { color: var(--akzent); }
a:hover { color: var(--tinte); }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; margin: 0; text-wrap: balance; }
p { margin: 0; }

.innen { max-width: var(--breite); margin: 0 auto; padding-left: max(16px, 2rem); padding-right: max(16px, 2rem); }
.label { font-size: .8125rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--akzent); }
.leise { color: var(--schiefer); }
.sprung { position: absolute; left: -999px; }
.sprung:focus { left: 1rem; top: 1rem; background: var(--papier); padding: .5rem 1rem; z-index: 10; }

/* Kopf */
.kopf .innen { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; justify-content: space-between; padding-block: 1.75rem; }
.marke { display: flex; align-items: center; gap: .875rem; text-decoration: none; color: var(--tinte); }
.marke-text { display: flex; flex-direction: column; gap: .2rem; }
.marke-name { font-family: var(--serif); font-weight: 600; font-size: 1.375rem; line-height: 1; }
.marke-zusatz { font-size: .6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--schiefer); line-height: 1; }
.navi { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; font-size: 1rem; }
.navi a { color: var(--tinte); text-decoration: none; padding-block: .5rem; }
.navi a:hover { color: var(--akzent); }

/* Einstieg */
.einstieg { display: flex; flex-wrap: wrap; gap: 3.5rem; align-items: center; padding-block: 4.5rem 6rem; }
.einstieg-text { flex: 999 1 32rem; min-width: 0; display: flex; flex-direction: column; gap: 1.5rem; }
.einstieg h1 { font-size: clamp(2.25rem, 4.5vw, 3.25rem); line-height: 1.08; letter-spacing: -.01em; }
.einstieg h1 .akzent { color: var(--akzent); }
.einstieg-unter { font-size: 1.3125rem; color: var(--schiefer); max-width: 40rem; }
.einstieg-bild { flex: 1 1 15rem; display: flex; justify-content: center; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .75rem; }
.knopf { display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.75rem; border-radius: 4px; font-weight: 600; font-size: 1rem; text-decoration: none; }
.knopf-voll { background: var(--tinte); color: var(--papier); }
.knopf-voll:hover { background: var(--akzent); color: var(--papier); }
.knopf-rand { border: 1px solid var(--tinte); color: var(--tinte); }
.knopf-rand:hover { border-color: var(--akzent); color: var(--akzent); }

/* Abschnitte */
.abschnitt { padding-block: 6rem; }
.abschnitt-kopf { display: flex; flex-direction: column; gap: .75rem; max-width: 45rem; }
.abschnitt h2 { font-size: clamp(1.875rem, 3.4vw, 2.375rem); line-height: 1.15; }
.zweispaltig { display: flex; flex-wrap: wrap; gap: 3.5rem; }
.zweispaltig > :first-child { flex: 1 1 17.5rem; }
.zweispaltig > :last-child { flex: 999 1 35rem; min-width: 0; }

.themen { border-top: 1px solid var(--linie); }
.themen .innen { display: flex; flex-direction: column; gap: 2.5rem; }
.karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18.75rem, 100%), 1fr)); gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.karte { background: var(--papier); border: 1px solid var(--linie); border-radius: 6px; padding: 1.75rem; display: flex; flex-direction: column; gap: .75rem; }
.karte h3 { font-size: 1.375rem; line-height: 1.25; }
.karte p { color: var(--schiefer); font-size: 1.0625rem; }
.kachel { width: 20px; height: 20px; border-radius: 2px; background: var(--k); }

.arbeitsweise { background: var(--creme); }
.grundsaetze { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16.25rem, 100%), 1fr)); gap: 2.5rem 3rem; }
.grundsaetze h3 { font-size: 1.375rem; }
.grundsaetze div { display: flex; flex-direction: column; gap: .5rem; }
.grundsaetze p { color: var(--text-auf-creme); font-size: 1.0625rem; }

.ueber { background: var(--papier); border-bottom: 1px solid var(--linie); }
.ueber .innen { display: flex; flex-wrap: wrap; gap: 3.5rem; align-items: flex-start; }
.portraet { flex: 1 1 17.5rem; max-width: 26.25rem; aspect-ratio: 4 / 5; background: var(--creme); border-radius: 4px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1.5rem; color: var(--schiefer); font-size: .9375rem; object-fit: cover; }
img.portraet { padding: 0; width: 100%; height: auto; display: block; background: none; }
.ueber-text { flex: 999 1 30rem; min-width: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.ueber-text .gross { font-size: 1.1875rem; }
.fakten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11.25rem, 100%), 1fr)); gap: 1.5rem; border-top: 1px solid var(--linie); padding-top: 1.5rem; margin-top: .5rem; }
.fakten div { display: flex; flex-direction: column; gap: .25rem; }
.fakt-wert { font-family: var(--serif); font-weight: 600; font-size: 1.375rem; line-height: 1.35; }
.fakt-name { font-size: .9375rem; color: var(--schiefer); }

.zusammenarbeit .gross { font-size: 1.1875rem; }
.zusammenarbeit .zweispaltig > :last-child { display: flex; flex-direction: column; gap: 1rem; }

.kontakt { background: var(--tinte); color: var(--papier); }
.kontakt .innen { display: flex; flex-wrap: wrap; gap: 3rem; align-items: flex-end; justify-content: space-between; }
.kontakt .label { color: var(--akzent-hell); }
.kontakt h2 { font-size: clamp(2.125rem, 4vw, 2.75rem); line-height: 1.12; }
.kontakt-text { flex: 999 1 30rem; min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.kontakt-text p, .kontakt-daten span { color: var(--text-auf-dunkel); }
.kontakt-daten { flex: 1 1 17.5rem; display: flex; flex-direction: column; gap: .75rem; font-size: 1.1875rem; }
.kontakt-daten a { color: var(--papier); font-weight: 600; }
.kontakt-daten a:hover { color: var(--akzent-hell); }

/* Fuß */
.fuss { background: var(--tinte); color: var(--text-auf-dunkel); border-top: 1px solid var(--linie-dunkel); font-size: .875rem; }
.fuss .innen { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; padding-block: 1.75rem; }
.fuss nav { display: flex; gap: 1.5rem; }
.fuss a { color: var(--text-auf-dunkel); }
.fuss a:hover { color: var(--papier); }

/* Rechtstexte */
.rechtstext { padding-block: 3rem 6rem; }
.rechtstext .innen { max-width: 48rem; display: flex; flex-direction: column; gap: 1.25rem; }
.rechtstext h1 { font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.12; margin-bottom: .5rem; }
.rechtstext h2 { font-size: 1.375rem; margin-top: 1.75rem; }
.rechtstext h3 { font-size: 1.125rem; margin-top: .5rem; }
.rechtstext ul { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: .35rem; }
.rechtstext address { font-style: normal; }
.zurueck { font-size: 1rem; }
.stand { color: var(--schiefer); font-size: .9375rem; margin-top: 1.5rem; }

/* Fuß bei kurzen Seiten unten halten */
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }

/* Handy: Kachelzeichen im Einstieg kleiner und linksbündig */
@media (max-width: 640px) {
  .einstieg { padding-block: 2.5rem 4rem; gap: 2rem; }
  .einstieg-bild { justify-content: flex-start; order: -1; }
  .einstieg-bild svg { width: 96px; height: 96px; }
  .abschnitt { padding-block: 4rem; }
  .portraet { max-width: 100%; }
}

/* Gewollter Zeilenumbruch nur auf breiten Bildschirmen */
@media (max-width: 40rem) { br.umbruch { display: none; } }

/* Kontakt: Symbole vor E-Mail und Telefon */
.kontakt-daten a { display: inline-flex; align-items: center; gap: .625rem; align-self: flex-start; }
.kontakt-daten .icon { flex: none; color: var(--akzent-hell); }
.kontakt-daten a span { color: inherit; }
.kontakt-daten .hinweis { padding-left: 1.875rem; }

/* Link zum Beraterprofil (PDF) */
.profil-link { margin-top: .5rem; }
.profil-link a { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--akzent); }
.profil-link a:hover { color: var(--tinte); }
.profil-link .zusatz { color: var(--schiefer); font-weight: 400; }