/* ===========================================================================
   marina-rauscher.at — Variante 4a „Salbei"
   Bearbeitet wird diese Datei, nicht dist/style.css (die wird überschrieben).
   =========================================================================== */

:root {
  /* Farben */
  --c-hintergrund:      #f8fbf7;
  --c-text:             #23302a;
  --c-text-ueberschrift:#2c3a33;
  --c-text-fliess:      #4b5a51;
  --c-text-ueber-mich:  #3b4a42;
  --c-text-gedaempft:   #6b7d72;
  --c-akzent:           #4f7d63;
  --c-akzent-hell:      #7fa48c;
  --c-flaeche-ablauf:   #eaf3e9;
  --c-nummernkreis:     #d5e7d9;
  --c-auf-akzent:       #dcecdf;
  --c-footer:           #93a89a;
  --c-platzhalter-a:    #e7f0e7;
  --c-platzhalter-b:    #dcebdd;
  --c-platzhalter-text: #7e9184;

  /* Schrift */
  --f-serif: Georgia, 'Times New Roman', serif;
  --f-sans:  'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Maße — werden in den Media Queries überschrieben */
  --pad-x:        80px;
  --abstand-gross: 104px;
  --abstand-mittel: 88px;
  --band-hoehe:    360px;
  --band-kurve:    70px;
  --kurve-hoehe:   80px;
  --kurve-hoehe-gross: 90px;

  /* Streifenmuster der Bildplatzhalter */
  --platzhalter: repeating-linear-gradient(160deg,
      var(--c-platzhalter-a) 0 11px, var(--c-platzhalter-b) 11px 22px);
}

/* --------------------------------------------------------------- Grundlagen */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  display: flex;
  justify-content: center;
  background: var(--c-hintergrund);
  font-family: var(--f-serif);
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
}

.page {
  width: 100%;
  max-width: 1080px;
  background: var(--c-hintergrund);
  overflow: hidden;
  border-radius: 4px;
}

h1, h2, h3, p, figure, blockquote, ol, ul {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:focus-visible,
:focus-visible {
  outline: 2px solid var(--c-akzent);
  outline-offset: 3px;
  border-radius: 2px;
}

img {
  display: block;
  max-width: 100%;
}

[id] {
  scroll-margin-top: 24px;
}

p { text-wrap: pretty; }

/* Beschriftung der Bildplatzhalter, solange keine Fotos vorliegen */
.platzhalter-label {
  font: 11px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-platzhalter-text);
  text-align: center;
}

/* ------------------------------------------------------------------- Header */

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 34px var(--pad-x);
}

.marke {
  font: 400 20px/1 var(--f-serif);
  letter-spacing: -.01em;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  font: 400 14px/1 var(--f-sans);
  color: var(--c-text-gedaempft);
}

/* ---------------------------------------------------------------- Einstieg */

.hero {
  padding: var(--abstand-mittel) var(--pad-x) 96px;
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.hero__eyebrow {
  font: 400 13px/1.4 var(--f-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-akzent);
}

.hero__titel {
  max-width: 20ch;
  font: 400 clamp(40px, 7.5vw, 78px)/1.02 var(--f-serif);
  letter-spacing: -.03em;
  text-wrap: pretty;
}

/* Die Schriftgröße steht bewusst auf dem Umschlag und nicht auf dem Absatz:
   die ch-Einheit in max-width rechnet gegen die eigene Schriftgröße. */
.hero__text {
  max-width: 44ch;
  margin-left: auto;      /* bewusste Asymmetrie */
  font: 400 clamp(18px, 2.02vw, 21px)/1.8 var(--f-serif);
  color: var(--c-text-fliess);
}

.hero__text p + p { margin-top: .9em; }

/* ------------------------------------------------------------ Bildband ---- */

.band {
  position: relative;
  height: calc(var(--band-hoehe) + 2 * var(--band-kurve));
  background: var(--platzhalter);
}

.band__media {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.band__media--platzhalter {
  background: var(--platzhalter);
}

.band__kurve {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--band-kurve);
  display: block;
}

/* 1 px über den Bildrand hinaus, gleiche Begründung wie bei .kurve — sonst
   blitzt bei gebrochener Displayskalierung eine Zeile des Fotos durch. */
.band__kurve--oben  { top: -1px;    height: calc(var(--band-kurve) + 1px); }
.band__kurve--unten { bottom: -1px; height: calc(var(--band-kurve) + 1px); }

/* --------------------------------------------------- Trenner zwischen Farben */

/* Zur margin-bottom unten: Ein Trenner ist exakt 80 bzw. 90 px hoch. Bei
   gebrochener Displayskalierung (Windows 125 % → 90 × 1.25 = 112.5) fällt
   seine Unterkante auf einen halben Gerätepixel. Der Browser deckt diese
   letzte Zeile dann nur zur Hälfte mit der Pfadfarbe ab, und die
   Hintergrundfarbe des SVG scheint als helle Linie durch. Der nachfolgende
   Block legt sich deshalb 1 px darüber. Die Oberkante braucht das nicht:
   dort ist die Hintergrundfarbe des SVG dieselbe wie die des Bereichs
   darüber, eine halb gedeckte Zeile fällt also nicht auf. */
.kurve {
  display: block;
  width: 100%;
  height: var(--kurve-hoehe);
  margin-bottom: -1px;
}

.kurve--zu-ablauf   { background: var(--c-hintergrund); }
.kurve--von-ablauf  { background: var(--c-flaeche-ablauf); }
.kurve--zu-kontakt  { background: var(--c-hintergrund); height: var(--kurve-hoehe-gross); }

/* ---------------------------------------------------------------- Leitsatz */

.leitsatz {
  padding: var(--abstand-gross) var(--pad-x);
  display: flex;
  justify-content: center;
  text-align: center;
}

.leitsatz__text {
  max-width: 34ch;
  font: 400 clamp(26px, 3.85vw, 40px)/1.35 var(--f-serif);
  letter-spacing: -.02em;
  color: var(--c-text-ueberschrift);
}

/* ------------------------------------------------------ Abschnitts-Titel H2 */

.abschnitt__titel {
  font: 400 clamp(28px, 4.04vw, 42px)/1.15 var(--f-serif);
  letter-spacing: -.025em;
  text-wrap: pretty;
}

.abschnitt__titel--schmal { max-width: 24ch; }

/* ----------------------------------------------------------------- Angebot */

.angebot {
  padding: 0 var(--pad-x) var(--abstand-gross);
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.kurse {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.kurs {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 56px;
  align-items: start;
}

.kurs__kopf {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kurs__titel {
  font: 400 clamp(24px, 2.89vw, 30px)/1.2 var(--f-serif);
  letter-spacing: -.015em;
}

.kurs__dauer {
  font: 400 13px/1.4 var(--f-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-akzent-hell);
}

.kurs__text p {
  font: 400 18px/1.85 var(--f-serif);
  color: var(--c-text-fliess);
}

.kurs__text p + p { margin-top: .9em; }

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

.ablauf {
  background: var(--c-flaeche-ablauf);
  padding: 24px var(--pad-x) var(--abstand-mittel);
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.schritte {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 56px 72px;
}

.schritt {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.schritt__nummer {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  background: var(--c-nummernkreis);
  color: var(--c-akzent);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 400 14px/1 var(--f-sans);
}

.schritt__titel {
  font: 400 24px/1.25 var(--f-serif);
  letter-spacing: -.015em;
}

.schritt__text p {
  font: 400 17px/1.8 var(--f-serif);
  color: var(--c-text-fliess);
}

.schritt__text p + p { margin-top: .9em; }

/* --------------------------------------------------------------- Über mich */

/* Deckend, damit der Block die letzte Zeile von .kurve--von-ablauf überdeckt. */
.uebermich {
  background: var(--c-hintergrund);
  padding: 64px var(--pad-x) var(--abstand-gross);
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 72px;
  align-items: center;
}

.portrait {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--platzhalter);
}

.portrait__media {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.portrait__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portrait__media--platzhalter {
  background: var(--platzhalter);
}

.uebermich__inhalt {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.uebermich__text p {
  font: 400 19px/1.85 var(--f-serif);
  color: var(--c-text-ueber-mich);
}

.uebermich__text p + p { margin-top: .9em; }

.uebermich__quali {
  font: 400 16px/1.8 var(--f-serif);
  color: var(--c-text-gedaempft);
}

/* ----------------------------------------------------------------- Stimmen */

.stimmen {
  padding: 0 var(--pad-x) var(--abstand-gross);
  display: flex;
  flex-direction: column;
  gap: 64px;
}

/* 60ch rechnet hier absichtlich gegen die geerbten 16px und nicht gegen die
   28px des Zitats — so steht es in der Referenz, und so ist der Umbruch der
   Zitate abgenommen worden (rund 480px, drei kurze Zeilen). */
.stimme {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 60ch;
}

.stimme__zitat {
  font: 400 clamp(20px, 2.7vw, 28px)/1.55 var(--f-serif);
  letter-spacing: -.015em;
  text-wrap: pretty;
}

.stimme__person {
  font: 400 14px/1.4 var(--f-sans);
  color: var(--c-akzent-hell);
}

/* ----------------------------------------------------------------- Kontakt */

.kontakt {
  background: var(--c-akzent);
  color: var(--c-hintergrund);
  padding: 32px var(--pad-x) var(--abstand-gross);
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.kontakt :focus-visible {
  outline-color: var(--c-hintergrund);
}

.kontakt__titel {
  max-width: 20ch;
  font: 400 clamp(30px, 4.81vw, 50px)/1.1 var(--f-serif);
  letter-spacing: -.025em;
  text-wrap: pretty;
}

.kontakt__text {
  max-width: 44ch;
  font: 400 18px/1.8 var(--f-serif);
  color: var(--c-auf-akzent);
}

.kontakt__text p + p { margin-top: .9em; }

.kontakt__daten {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding-top: 10px;
}

.kontakt__mail {
  font: 400 clamp(22px, 2.89vw, 30px)/1.3 var(--f-serif);
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}

.kontakt__tel {
  font: 400 19px/1.4 var(--f-serif);
  color: var(--c-auf-akzent);
}

/* ------------------------------------------------------------------ Footer */

.footer {
  padding: 32px var(--pad-x);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  font: 400 13px/1.5 var(--f-sans);
  color: var(--c-footer);
}

.footer__links {
  display: flex;
  gap: 24px;
}

/* ------------------------------------------------- Impressum / Datenschutz */

.legal {
  max-width: 640px;
  padding: 80px var(--pad-x);
}

.legal__titel {
  font: 400 clamp(28px, 4.04vw, 42px)/1.15 var(--f-serif);
  letter-spacing: -.025em;
  margin-bottom: 40px;
}

.legal__inhalt h2 {
  font: 400 30px/1.3 var(--f-serif);
  letter-spacing: -.015em;
  color: var(--c-text-ueberschrift);
  margin: 40px 0 12px;
}

.legal__inhalt h2:first-child { margin-top: 0; }

.legal__inhalt p,
.legal__inhalt li {
  font: 400 15px/1.7 var(--f-serif);
  color: var(--c-text-fliess);
}

.legal__inhalt p + p { margin-top: .9em; }

.legal__inhalt ul {
  margin: .9em 0;
  padding-left: 1.2em;
}

.legal__inhalt li { margin-bottom: .3em; }

.legal__inhalt a { text-decoration: underline; }

/* =============================================================== ≤ 900 px = */

@media (max-width: 900px) {
  :root {
    --pad-x: 32px;
    --abstand-gross: 64px;
    --abstand-mittel: 64px;
    --band-hoehe: 240px;
    --band-kurve: 40px;
    --kurve-hoehe: 40px;
    --kurve-hoehe-gross: 40px;
  }

  .hero { padding-bottom: var(--abstand-gross); }

  .hero__text { margin-left: 0; }

  .kurs,
  .schritte,
  .uebermich {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .schritte { gap: 40px; }

  .uebermich { gap: 40px; }

  .portrait {
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
  }

  .angebot { gap: 40px; }

  .kurse { gap: 48px; }

  .stimmen { gap: 48px; }

  .legal { padding: 56px var(--pad-x); }
}

/* =============================================================== ≤ 600 px = */

@media (max-width: 600px) {
  :root {
    --pad-x: 20px;
    --abstand-gross: 56px;
    --abstand-mittel: 56px;
  }

  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .nav { gap: 16px 20px; }

  .hero { gap: 26px; }

  .kurs__text p,
  .uebermich__text p,
  .kontakt__text p { font-size: 17px; }

  .schritt__text p { font-size: 17px; }

  /* Auf sehr schmalen Geräten darf die Adresse nicht mitten im Wort brechen. */
  .kontakt__mail { font-size: clamp(18px, 5.6vw, 22px); }

  .footer {
    flex-direction: column;
    align-items: flex-start;
  }
}