@import url("marke.css");

/* ============================================================
   seite.css — Layout der Website (Welle 1)
   ------------------------------------------------------------
   Farben, Schriften und Formen kommen ausschließlich aus
   marke.css (siehe Import oben). Diese Datei ergänzt nur
   Layout, Abstände, responsive Darstellung, Navigation,
   Platzhalterflächen und sichtbare Bedienzustände.

   Hier steht KEIN Farbwert und KEINE neue Schriftfamilie.
   ============================================================ */


/* ============================================================
   MARKENSCHRIFTEN — vom eigenen Server, NICHT von Google
   ------------------------------------------------------------
   Dateien liegen in "schriften/" neben dieser Datei
   (Markenhandbuch Abschnitt 4). Quelle: Fontsource, Zeichensatz
   Latin (inkl. Umlaute, ß, €, Anführungszeichen).
   Lizenz: SIL Open Font License 1.1, Texte in "schriften/".
   ============================================================ */
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("schriften/SourceSerif4-Semibold.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("schriften/SourceSans3-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("schriften/SourceSans3-Semibold.woff2") format("woff2");
}


/* ============================================================
   Hilfsvariablen für die Kopfzeile
   ------------------------------------------------------------
   Nur Verweise auf Farben aus marke.css, keine eigenen Werte.
   Hell:   Kopfzeile in Nachtblau, Schrift in Papier
   Dunkel: Kopfzeile in der Flächenfarbe, Schrift in der
           Überschriftenfarbe (Nachtblau wäre dort unsichtbar)
   ============================================================ */
:root {
  --kopf-hintergrund: var(--farbe-ueberschrift);
  --kopf-text:        var(--farbe-hintergrund);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --kopf-hintergrund: var(--farbe-flaeche);
    --kopf-text:        var(--farbe-ueberschrift);
  }
}

:root[data-theme="dark"] {
  --kopf-hintergrund: var(--farbe-flaeche);
  --kopf-text:        var(--farbe-ueberschrift);
}


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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;              /* nichts fährt ein, auch nicht beim Springen */
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;             /* Safari (iPhone) trennt nur damit */
  hyphens: auto;
}

main {
  flex: 1 0 auto;
}

h1, h2, h3 {
  margin: 0 0 0.6em;
  overflow-wrap: break-word;
}

h1 {
  font-size: clamp(2.125rem, 1.5rem + 3vw, 3.25rem);
  letter-spacing: -0.01em;
}

h2 {
  font-size: clamp(1.625rem, 1.25rem + 1.5vw, 2.125rem);
}

h3 {
  font-size: 1.3125rem;
  margin-bottom: 0.4em;
}

p, ul, ol, dl {
  margin: 0 0 1.1em;
}

p:last-child,
ul:last-child,
ol:last-child,
dl:last-child {
  margin-bottom: 0;
}

strong {
  font-weight: 600;
  color: var(--farbe-ueberschrift);
}

a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

a:hover {
  text-decoration-thickness: 2px;
}

/* Sichtbarer Fokus für alles, was man ansteuern kann */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--farbe-ueberschrift);
  outline-offset: 3px;
  border-radius: var(--radius);
}

/* Sprungmarken: etwas Luft über dem Ziel */
[id] {
  scroll-margin-top: 1.5rem;
}


/* ============================================================
   Raster
   ============================================================ */
.umschlag {
  width: 100%;
  max-width: var(--seitenbreite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.text {
  max-width: var(--textbreite);
}

/* Impressum und Datenschutz: Zwischenüberschriften mit Luft davor */
.rechtstext h2 {
  font-size: 1.3125rem;
  margin-top: 2.25rem;
}

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

.rechtstext ul {
  padding-left: 1.25rem;
}

.abschnitt {
  padding-block: clamp(2.75rem, 7vw, 5rem);
  border-top: 1px solid var(--farbe-linie);
}

.abschnitt > .umschlag > h2 {
  margin-bottom: 1.25rem;
}

/* Kleine Zeile über einer Zwischenüberschrift (Abschnittsname) */
.kicker {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--farbe-text);
  margin: 0 0 0.75rem;
}

/* Nur für Vorleseprogramme */
.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ============================================================
   Sprung zum Inhalt (nur bei Tastaturfokus sichtbar)
   ============================================================ */
.sprung-inhalt {
  position: absolute;
  left: var(--rand);
  top: -100%;
  z-index: 10;
  padding: 0.6em 1em;
  background: var(--farbe-flaeche);
  color: var(--farbe-ueberschrift);
  font-weight: 600;
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
}

.sprung-inhalt:focus {
  top: 0.75rem;
}


/* ============================================================
   Kopfzeile
   ============================================================ */
.kopfzeile {
  background: var(--kopf-hintergrund);
  color: var(--kopf-text);
  border-bottom: 1px solid var(--farbe-linie);
}

.kopfzeile-innen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-block: 1rem;
}

.marke {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  color: var(--kopf-text);
  text-decoration: none;
  min-width: 0;
}

.marke:focus-visible {
  outline-color: var(--kopf-text);
}

.marke-name {
  font-family: var(--schrift-ueberschrift);
  font-weight: var(--schrift-ueberschrift-staerke);
  font-size: 1.5rem;
  line-height: 1.15;
  white-space: nowrap;
}

/* Untertitel: Farbe und Gewicht kommen aus marke.css.
   Die Größe ist so gewählt, dass er als „großer Text“ gilt. */
.kopfzeile .marke-untertitel {
  font-size: 1.1875rem;
  line-height: 1.3;
}

/* --- Menü --- */
.hauptmenue ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.hauptmenue a {
  display: block;
  color: var(--kopf-text);
  font-weight: 600;
  text-decoration: none;
  padding: 0.65em 0;
  border-top: 1px solid var(--farbe-linie);
}

.hauptmenue a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.hauptmenue a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--farbe-akzent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.hauptmenue a:focus-visible {
  outline-color: var(--kopf-text);
  outline-offset: -3px;
}

/* Der Knopf für kleine Bildschirme. Ohne JavaScript bleibt er
   versteckt (hidden-Attribut) und das Menü ist immer offen. */
.menue-knopf {
  font: inherit;
  font-weight: 600;
  color: var(--kopf-text);
  background: transparent;
  border: 2px solid currentColor;
  border-radius: var(--radius);
  padding: 0.45em 1em;
  cursor: pointer;
}

.menue-knopf:focus-visible {
  outline-color: var(--kopf-text);
}

.menue-knopf[aria-expanded="true"]::after {
  content: " ×";
}

/* Kleine Bildschirme: Menü nimmt eine ganze Zeile ein */
@media (max-width: 59.99em) {
  .hauptmenue {
    flex-basis: 100%;
  }

  .hauptmenue ul {
    padding-bottom: 0.25rem;
  }

  /* Mit JavaScript: eingeklappt, bis der Knopf gedrückt wird */
  .js .hauptmenue {
    display: none;
  }

  .js .hauptmenue.offen {
    display: block;
  }
}

/* Große Bildschirme: Menü in einer Reihe, kein Knopf */
@media (min-width: 60em) {
  .kopfzeile-innen {
    flex-wrap: nowrap;
    padding-block: 1.25rem;
  }

  .marke {
    flex-shrink: 0;
  }

  .marke-name {
    font-size: 1.625rem;
  }

  .hauptmenue a {
    white-space: nowrap;
  }

  .menue-knopf {
    display: none;
  }

  .hauptmenue ul {
    flex-direction: row;
    gap: 2rem;
  }

  .hauptmenue a {
    border-top: 0;
    padding: 0.35em 0;
  }
}


/* ============================================================
   Aufmacher (oberster Abschnitt jeder Seite)
   ============================================================ */
.aufmacher {
  padding-block: clamp(2.5rem, 8vw, 5.5rem) clamp(2.75rem, 7vw, 5rem);
}

.aufmacher h1 {
  max-width: 22ch;
}

.aufmacher .einleitung {
  font-size: 1.1875rem;
  max-width: var(--textbreite);
  margin-bottom: 1.75rem;
}

.kleingedruckt {
  margin-top: 0.9rem;
  font-size: 1.0625rem;
}



/* Foto auf „Über mich“: Porträt aus dem Shooting vom 03.10.2026
   (DSCF0807, ausgewählt am 21.10.2026). Klein unter dem Text,
   ab mittlerer Breite rechts daneben. */
.portraet {
  display: block;
  width: 100%;
  max-width: 20rem;
  height: auto;
  border-radius: var(--radius);
}

@media (min-width: 48em) {
  .aufmacher-mit-foto {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18rem;
    column-gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
  }

  .aufmacher-mit-foto .einleitung {
    margin-bottom: 0;
  }
}

@media (max-width: 47.99em) {
  .portraet {
    margin-top: 0.5rem;
  }
}


/* ============================================================
   Knopf — Ergänzungen zur Klasse aus marke.css
   ============================================================ */
.knopf {
  font-size: 1.0625rem;
  line-height: 1.3;
  border: 2px solid var(--farbe-knopf);
  text-align: center;
}

.knopf:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.knopf:focus-visible {
  outline: 3px solid var(--farbe-ueberschrift);
  outline-offset: 3px;
}

@media (max-width: 30em) {
  .knopf {
    display: block;
    width: 100%;
  }
}


/* ============================================================
   Drei Situationen (Startseite)
   ============================================================ */
.situationen {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: situation;
  display: grid;
  gap: 1.75rem;
}

.situationen li {
  counter-increment: situation;
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  column-gap: 0.75rem;
  align-items: start;
  max-width: var(--textbreite);
}

.situationen li::before {
  content: counter(situation);
  font-family: var(--schrift-ueberschrift);
  font-weight: var(--schrift-ueberschrift-staerke);
  font-size: 2rem;
  line-height: 1;
  color: var(--farbe-ueberschrift);
  border-right: 1px solid var(--farbe-linie);
  padding-right: 0.5rem;
  margin-top: 0.1em;
}

@media (min-width: 48em) {
  .situationen {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
  }
}


/* ============================================================
   Leistungen (Startseite)
   ============================================================ */
.leistungen {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.25rem;
}

.leistungen li {
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.leistungen h3 {
  margin-bottom: 0.5rem;
}

@media (min-width: 48em) {
  .leistungen {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }

  .leistungen li {
    padding: 1.75rem;
  }
}


/* ============================================================
   Zusammenarbeit (Startseite)
   ============================================================ */
.ablauf {
  list-style: none;
  padding: 0;
  margin: 1.75rem 0 0;
  counter-reset: stufe;
  display: grid;
  gap: 2rem;
}

.ablauf li {
  counter-increment: stufe;
  border-top: 1px solid var(--farbe-linie);
  padding-top: 1.25rem;
}

.ablauf h3 {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.ablauf h3::before {
  content: counter(stufe);
  font-size: 1.0625rem;
  font-family: var(--schrift-text);
  font-weight: 600;
  color: var(--farbe-text);
  min-width: 1.5em;
  height: 1.5em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--farbe-linie);
  border-radius: 50%;
  flex-shrink: 0;
  transform: translateY(-0.1em);
}

.ablauf .preis {
  margin-top: 0.75rem;
  font-weight: 600;
  color: var(--farbe-ueberschrift);
}

/* Auch am großen Bildschirm untereinander: Es ist eine Abfolge. */
.ablauf {
  max-width: 40rem;
}


/* ============================================================
   Vier Zusagen (Startseite)
   ============================================================ */
.zusagen {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.75rem;
}

.zusagen li {
  max-width: var(--textbreite);
}

/* Die vierte Zusage trägt die Seite — sie bekommt mehr Gewicht */
.zusagen .zusage-hervorgehoben {
  max-width: none;
  border-left: var(--akzentstrich-hoehe) solid var(--farbe-akzent);
  padding-left: 1.25rem;
  margin-top: 0.5rem;
}

.zusagen .zusage-hervorgehoben h3 {
  font-size: clamp(1.625rem, 1.25rem + 1.5vw, 2.125rem);
}

.zusagen .zusage-hervorgehoben p {
  font-size: 1.1875rem;
  max-width: var(--textbreite);
}

@media (min-width: 48em) {
  .zusagen {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 3rem;
    row-gap: 2.25rem;
  }

  .zusagen .zusage-hervorgehoben {
    grid-column: 1 / -1;
  }
}


/* ============================================================
   Kurzer Verweis auf „Über mich“ (Startseite)
   ============================================================ */
.person-verweis .verweis-link {
  font-weight: 600;
}

.portraet-rund {
  display: block;
  width: 8.5rem;
  height: auto;
  border-radius: 50%;
  margin-bottom: 1.25rem;
}

@media (min-width: 48em) {
  .person-verweis {
    display: flex;
    align-items: center;
    gap: 2.5rem;
  }

  .portraet-rund {
    width: 10rem;
    flex-shrink: 0;
    margin-bottom: 0;
  }
}


/* ============================================================
   Abschluss (alle Seiten)
   ============================================================ */
.abschluss .umschlag > div {
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 5vw, 3rem);
}

.abschluss p {
  max-width: var(--textbreite);
}

.abschluss .knopf {
  margin-top: 1.5rem;
}


/* ============================================================
   Über mich: Zusagen und Abgrenzung
   ============================================================ */
.zusagen-liste {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: zusage;
  display: grid;
  gap: 1.5rem;
}

.zusagen-liste li {
  counter-increment: zusage;
  max-width: var(--textbreite);
  padding-left: 2.5rem;
  position: relative;
}

.zusagen-liste li::before {
  content: counter(zusage);
  position: absolute;
  left: 0;
  top: 0.05em;
  font-family: var(--schrift-ueberschrift);
  font-weight: var(--schrift-ueberschrift-staerke);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--farbe-ueberschrift);
}

.zusagen-liste h3 {
  margin-bottom: 0.25rem;
}

.nicht-liste {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1rem;
}

.nicht-liste li {
  max-width: var(--textbreite);
  padding-left: 1.25rem;
  border-left: 1px solid var(--farbe-linie);
}

.nicht-liste strong {
  display: block;
}


/* ============================================================
   Kontakt: Angaben
   ============================================================ */
.kontaktangaben {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--farbe-linie);
  max-width: var(--textbreite);
}

.kontaktangaben > div {
  display: grid;
  grid-template-columns: minmax(6.5rem, 9rem) 1fr;
  gap: 0.25rem 1rem;
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--farbe-linie);
}

.kontaktangaben dt {
  font-weight: 600;
  color: var(--farbe-ueberschrift);
}

.kontaktangaben dd {
  margin: 0;
}

.kontakt-telefon {
  font-family: var(--schrift-ueberschrift);
  font-weight: var(--schrift-ueberschrift-staerke);
  font-size: 1.5rem;
}

/* Rückruf-Zusage unter der Nummer. Muss zur Mailbox-Ansage passen (EB-05). */
.kontakt-hinweis {
  margin: 0.35rem 0 0;
  font-size: 1.0625rem;
}

/* Knopf „Kontakt speichern" unter den Kontaktangaben */
.kontakt-speichern {
  margin-top: 1.75rem;
  margin-bottom: 0;
}


/* ============================================================
   Kontaktformular (Kontaktseite)
   ============================================================ */
.formular {
  max-width: var(--textbreite);
  margin-top: 1.5rem;
}

.formular-feld {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 1.1rem;
}

.formular label {
  font-weight: 600;
  color: var(--farbe-ueberschrift);
}

.formular .pflicht {
  font-weight: 400;
  color: var(--farbe-text);
}

.formular input,
.formular textarea {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  color: var(--farbe-text);
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
  padding: 0.65em 0.8em;
}

.formular textarea {
  resize: vertical;
  min-height: 8rem;
}

.formular input:focus-visible,
.formular textarea:focus-visible {
  outline: 3px solid var(--farbe-ueberschrift);
  outline-offset: 1px;
}

.formular-hinweis {
  font-size: 1.0625rem;
  margin: -0.4rem 0 1.1rem;
}

.formular button.knopf {
  cursor: pointer;
}

.formular button.knopf:disabled {
  cursor: wait;
  opacity: 0.7;
}

/* Falle für Spam-Roboter: aus dem sichtbaren Bereich geschoben,
   nicht mit display:none, weil manche Roboter das erkennen. */
.formular-falle {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formular-meldung {
  margin-top: 1.25rem;
  padding: 0.9rem 1.1rem;
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-linie);
  border-left: var(--akzentstrich-hoehe) solid var(--farbe-akzent);
  color: var(--farbe-ueberschrift);
}

.formular-meldung-fehler {
  border-left-color: var(--farbe-ueberschrift);
}


/* ============================================================
   Fußzeile
   ============================================================ */
.fusszeile {
  border-top: 1px solid var(--farbe-linie);
  padding-block: 2rem 2.5rem;
  font-size: 1.0625rem;
}

.fusszeile-innen {
  display: grid;
  gap: 0.75rem;
}

.fusszeile-innen p {
  margin: 0;
}

.fusszeile ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.fusszeile a {
  display: inline-block;
  padding-block: 0.25em;
}