/* Persönlich-editorial: Gilda Display für Überschriften, Nunito Sans für Text,
   Bestermind als handschriftlicher Akzent. Blöcke wechseln Weiß / Creme / Schwarz. */
@font-face { font-family: "Gilda Display"; src: url("../fonts/GildaDisplay-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("../fonts/NunitoSans-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("../fonts/NunitoSans-SemiBold.woff") format("woff"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("../fonts/NunitoSans-Italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Bestermind"; src: url("../fonts/BestermindRegular.woff") format("woff"); font-weight: 400; font-display: swap; }

:root {
  --weiss: #ffffff;
  --creme: #f7f2ea;
  --sand: #e3d8c8;
  --tinte: #161616;
  --text: #4a4744;
  --grau: #7a746d;
  --schwarz: #141414;
  --auf-schwarz: #d8d3cc;
  --stern: #c9a96e;

  --titel: "Gilda Display", "Didot", "Georgia", serif;
  --sans: "Nunito Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --hand: "Bestermind", "Brush Script MT", cursive;

  --rund: 10px;
  --mass: 72rem;
  --rand: max(20px, env(safe-area-inset-left, 0px));
  --rand-r: max(20px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--weiss); color: var(--text);
  font-family: var(--sans); font-size: 1.0625rem; line-height: 1.7;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.innen { max-width: var(--mass); margin-inline: auto; padding-left: var(--rand); padding-right: var(--rand-r); }

h1, h2, h3 { font-family: var(--titel); font-weight: 400; color: var(--tinte); line-height: 1.15; text-wrap: balance; margin: 0; }
h2 { font-size: clamp(1.95rem, 3.4vw, 2.75rem); }
h3 { font-size: clamp(1.4rem, 2vw, 1.7rem); }
p { margin: 0; }
.lead { font-size: 1.18rem; max-width: 34em; }
.leise { color: var(--grau); }

/* Handschrift */
.hand { font-family: var(--hand); font-weight: 400; line-height: 1; color: var(--tinte); }
.hand--gross { font-size: clamp(2.6rem, 5vw, 3.6rem); }
.hand--mittel { font-size: clamp(2rem, 3.6vw, 2.6rem); }
.dunkel .hand { color: var(--weiss); }

/* Blöcke */
.block { padding-block: clamp(4rem, 8vw, 6.5rem); }
.block--creme { background: var(--creme); }
.dunkel { background: var(--schwarz); color: var(--auf-schwarz); }
.dunkel h2, .dunkel h3 { color: var(--weiss); }
.kopfzeile { display: grid; gap: 0.9rem; max-width: 40rem; margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.kopfzeile--mitte { margin-inline: auto; text-align: center; justify-items: center; }

/* Buttons */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.1rem; padding: 0.7rem 1.6rem;
  font-family: var(--sans); font-size: 0.98rem; font-weight: 600; letter-spacing: 0.04em;
  text-decoration: none; border: 1px solid var(--schwarz);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.knopf--voll { background: var(--schwarz); color: var(--weiss); }
.knopf--voll:hover { background: #3a3735; border-color: #3a3735; }
.knopf--rahmen { background: transparent; color: var(--schwarz); }
.knopf--rahmen:hover { background: var(--creme); }
.knopf--hell { background: var(--weiss); color: var(--schwarz); border-color: var(--weiss); }
.knopf--hell:hover { background: var(--creme); border-color: var(--creme); }
.knopf--linie-hell { background: transparent; color: var(--weiss); border-color: rgba(255,255,255,.55); }
.knopf--linie-hell:hover { border-color: var(--weiss); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.mehr { font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.mehr:hover { opacity: .7; }

/* Google-Bewertung */
.google {
  display: inline-flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
  text-decoration: none; font-size: 0.95rem;
}
.google__sterne { color: var(--stern); letter-spacing: 0.12em; font-size: 1.05rem; }
.google__note { font-weight: 600; color: var(--tinte); }
.google__text { color: var(--grau); }
.google:hover .google__text { text-decoration: underline; }
.dunkel .google__note { color: var(--weiss); }
.dunkel .google__text { color: var(--auf-schwarz); }

/* Kopf */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--weiss); }
.kopf { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--weiss); border-bottom: 1px solid var(--sand); }
.kopf .innen { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 5.4rem; }
.marke { display: block; line-height: 0; }
.marke img { height: 4.4rem; width: auto; }
@media (max-width: 520px) { .marke img { height: 3.6rem; } }
.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav a { text-decoration: none; font-size: 0.92rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinte); }
.nav a:not(.knopf):hover { color: var(--grau); }
.nav .knopf { min-height: 2.6rem; padding: 0.45rem 1.15rem; color: var(--weiss); }
.menue { display: none; }
@media (max-width: 980px) {
  .nav { display: none; }
  .menue { display: block; position: relative; }
  .menue summary { list-style: none; cursor: pointer; font-weight: 600; padding: 0.55rem 0.95rem; border: 1px solid var(--schwarz); }
  .menue summary::-webkit-details-marker { display: none; }
  .menue[open] summary { background: var(--schwarz); color: var(--weiss); }
  .menue__liste {
    position: absolute; right: 0; top: calc(100% + 0.6rem); width: min(18rem, calc(100vw - 40px));
    background: var(--weiss); border: 1px solid var(--sand); display: grid; padding: 0.5rem 0;
  }
  .menue__liste a { padding: 0.8rem 1.2rem; text-decoration: none; }
  .menue__liste a:hover { background: var(--creme); }
}

/* Hero */
.hero { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 6vw, 5rem); }
.hero .innen { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: stretch; }
.hero__text { display: grid; gap: 1.5rem; min-width: 0; }
.hero h1 { font-size: clamp(2.5rem, 5.2vw, 4.3rem); line-height: 1.06; }
.hero .hand { margin-top: -0.6rem; }
.hero__google { padding-top: 1.1rem; border-top: 1px solid var(--sand); }
.hero__bild { margin: 0; position: relative; min-height: 100%; }
.hero__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
@media (max-width: 820px) {
  .hero .innen { grid-template-columns: 1fr; }
  .hero__bild { max-width: 30rem; order: -1; min-height: 0; }
  .hero__bild img { position: static; height: auto; aspect-ratio: 1 / 1; object-position: left top; }
}

/* Marken */
.marken { background: var(--creme); padding-block: 1.6rem; }
.marken .innen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 2.25rem; }
.marken__titel { font-size: 0.9rem; color: var(--grau); }
.marken ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 2.25rem; }
.marken li { font-family: var(--sans); font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinte); }

/* Stärken (schwarz) */
.staerken { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.staerke { display: grid; grid-template-columns: 3.75rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.staerke img { width: 3.75rem; height: 3.75rem; }
.staerke h3 { font-size: clamp(1.2rem, 1.7vw, 1.4rem); margin-bottom: 0.5rem; }
@media (min-width: 1081px) { .staerke h3 { white-space: nowrap; } }
.staerke p { font-size: 0.98rem; }
@media (max-width: 1080px) { .staerken { grid-template-columns: 1fr; max-width: 34rem; } }

/* Leistungen: beige Karten, Bilder im Originalformat */
#leistungen .kopfzeile { max-width: none; }
#leistungen .kopfzeile h2 { font-size: clamp(2.2rem, 5vw, 3.75rem); white-space: nowrap; }
@media (max-width: 480px) { #leistungen .kopfzeile h2 { font-size: 1.95rem; } }
#leistungen .kopfzeile .leise { font-size: 1.15rem; }

.leistungen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
.leistung { background: var(--creme); border-radius: var(--rund); overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.leistung img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.leistung--gross { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; }
.leistung--gross .leistung__text { padding-block: clamp(1.75rem, 3.5vw, 3rem); }
.leistung--gross img { height: 100%; aspect-ratio: auto; min-height: 22rem; object-position: center top; }
.leistung__text { display: grid; gap: 0.9rem; align-content: start; justify-items: start; padding: clamp(1.5rem, 3vw, 2.5rem); min-width: 0; color: var(--tinte); }
.leistung--gross .leistung__text { align-content: center; }
.leistung h3 { text-transform: uppercase; letter-spacing: 0.02em; font-size: clamp(1.4rem, 2vw, 1.75rem); }
.leistung__fuer { margin-top: 0.25rem; }
.punkte { margin: -0.4rem 0 0; padding-left: 1.4rem; color: var(--text); display: grid; gap: 0.2rem; }
.leistung__claim { font-weight: 600; }
.leistung__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: 0.5rem; }
.leistung__preis { font-family: var(--titel); font-size: 1.3rem; }
.knopf--gross { white-space: nowrap; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 400; padding-inline: 1.9rem; }
.preis { font-family: var(--titel); font-size: 1.4rem; color: var(--tinte); }
@media (max-width: 860px) {
  .leistungen { grid-template-columns: 1fr; }
  .leistung--gross { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .leistung--gross img { height: auto; aspect-ratio: 1 / 1; min-height: 0; }
}
@media (max-width: 520px) {
  .knopf--gross { white-space: normal; text-align: center; }
}

/* Ablauf */
.schritte { list-style: none; margin: 0; padding: 0; counter-reset: schritt; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
.schritte li { counter-increment: schritt; display: grid; gap: 0.55rem; align-content: start; }
.schritte li::before { content: counter(schritt); font-family: var(--titel); font-size: 2.4rem; line-height: 1; color: var(--tinte); padding-bottom: 0.9rem; margin-bottom: 0.45rem; border-bottom: 1px solid var(--tinte); }
.schritte h3 { font-size: 1.3rem; }
.schritte p { color: var(--grau); font-size: 0.98rem; }
@media (max-width: 900px) { .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .schritte { grid-template-columns: 1fr; } }

/* Kundenstimmen: drei nebeneinander */
.stimmen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
.stimme {
  margin: 0; background: var(--weiss); border: 1px solid var(--sand);
  padding: clamp(1.5rem, 2.5vw, 2rem); display: grid; gap: 1rem; align-content: start; text-align: center; justify-items: center;
}
.stimme img { width: 5rem; height: 5rem; border-radius: 50%; object-fit: cover; }
.stimme__name { font-family: var(--titel); font-size: 1.3rem; color: var(--tinte); line-height: 1.2; }
.stimme__rolle { display: block; font-family: var(--sans); font-size: 0.9rem; color: var(--grau); margin-top: 0.2rem; }
.stimme__sterne { color: var(--stern); letter-spacing: 0.15em; }
.stimme blockquote { margin: 0; font-style: italic; }
.stimmen__google { margin-top: 2.25rem; display: flex; justify-content: center; }
@media (max-width: 900px) { .stimmen { grid-template-columns: 1fr; max-width: 34rem; margin-inline: auto; } }

/* Über Mona (schwarz) */
.mona .innen { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: stretch; }
.mona img { width: 100%; aspect-ratio: 900 / 1225; object-fit: cover; }
.mona__text { display: flex; flex-direction: column; gap: 1.2rem; min-width: 0; }
.mona__text > :last-child { margin-top: auto; }
.mona__text .mona__zahlen { margin-top: calc(45px - 1.2rem); }
.mona__zahlen { list-style: none; margin: 0.5rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid #3a3836; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.mona__zahlen strong { display: block; font-family: var(--titel); font-weight: 400; font-size: 2.2rem; line-height: 1; color: var(--weiss); }
.mona__zahlen span { font-size: 0.88rem; display: block; line-height: 1.4; margin-top: 0.4rem; }
.mona__unterschrift { margin-top: 0.6rem; }
.mona .mehr { color: var(--weiss); }
@media (max-width: 820px) { .mona .innen { grid-template-columns: 1fr; } .mona img { max-width: 24rem; } }

/* Abschluss */
.abschluss__kopf { text-align: center; }
.abschluss__kopf h2 { white-space: nowrap; }
.abschluss__kopf p { margin-top: 1rem; }
.abschluss__inhalt { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 4vw, 2.75rem); width: min(100%, 44rem); margin: clamp(2rem, 4vw, 2.75rem) auto 0; }
.abschluss__direkt { display: grid; gap: 0.9rem; justify-items: center; text-align: center; }
.abschluss__direkt-titel { font-family: var(--titel); font-size: 1.4rem; color: var(--tinte); }
@media (max-width: 900px) {
  .abschluss__kopf h2 { white-space: normal; }
  .abschluss__kopf p br { display: none; }
}

/* Unterseite Business Styling */
.zweier { display: grid; gap: clamp(2.25rem, 4vw, 3.25rem); }
.zweier__text { display: grid; gap: 1.1rem; max-width: 46rem; margin-inline: auto; text-align: center; }
.zweier__listen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); width: min(100%, 52rem); margin-inline: auto; }
.zweier__listen > div { background: var(--weiss); border-radius: var(--rund); padding: clamp(1.25rem, 3vw, 2rem); }
.zweier__listen h3 { margin-bottom: 0.9rem; }
.zweier__listen .punkte { margin: 0; }
@media (max-width: 700px) { .zweier__listen { grid-template-columns: minmax(0, 1fr); } }
.pakete { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2rem); }
.paket { border: 1px solid #3a3836; border-radius: var(--rund); padding: clamp(1.5rem, 3vw, 2.25rem); display: grid; gap: 0.9rem; align-content: start; }
.paket__preis { font-family: var(--titel); font-size: 1.5rem; color: var(--weiss); }
.paket .punkte { margin: 0; color: var(--auf-schwarz); }
.paket__fuer { font-size: 0.95rem; color: #a9a29a; padding-top: 0.75rem; border-top: 1px solid #3a3836; }
@media (max-width: 760px) { .pakete { grid-template-columns: minmax(0, 1fr); } }
.zitat { margin: clamp(3rem, 6vw, 4.5rem) auto 0; max-width: 44rem; text-align: center; display: grid; gap: 1.25rem; justify-items: center; }
.zitat blockquote { margin: 0; font-family: var(--titel); font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.5; color: var(--tinte); }
.zitat figcaption { display: flex; align-items: center; gap: 0.8rem; text-align: left; font-size: 0.95rem; color: var(--tinte); }
.zitat img { width: 3rem; height: 3rem; border-radius: 50%; }
.zitat__rolle { display: block; color: var(--grau); font-size: 0.88rem; }

/* Unterseite TV & Werbung */
.zweier__listen--creme > div { background: var(--creme); }
.produktionen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }
.produktionen h3 { margin-bottom: 0.9rem; }
.produktionen .punkte { margin: 0; color: var(--auf-schwarz); }
.produktionen__mehr { text-align: center; margin-top: clamp(2rem, 4vw, 3rem); }
.produktionen__mehr .mehr { color: var(--weiss); }
@media (max-width: 860px) { .produktionen { grid-template-columns: minmax(0, 1fr); max-width: 30rem; } }
.galerie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.75rem, 2vw, 1.25rem); }
.galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rund); }
@media (max-width: 760px) { .galerie { grid-template-columns: minmax(0, 1fr); } }

/* Unterseite Coaching */
.persoenlich { max-width: 42rem; margin-inline: auto; text-align: center; display: grid; gap: 1.1rem; justify-items: center; }
.persoenlich .lead { font-size: 1.3rem; color: var(--tinte); }
.persoenlich__zitat { margin: 0.75rem 0 0; font-family: var(--titel); font-size: clamp(1.35rem, 2.2vw, 1.7rem); color: var(--tinte); }
.angebote { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
.angebote .leistung img { aspect-ratio: 3 / 2; }
.angebote .leistung__text { padding: clamp(1.25rem, 2.5vw, 1.75rem); }
.angebote .leistung h3 { font-size: clamp(1.25rem, 1.7vw, 1.5rem); }
.angebote .punkte { margin: 0; }
.angebot__meta { font-size: 0.95rem; color: var(--grau); }
.angebote .leistung__fuss { margin-top: auto; padding-top: 0.25rem; }
.angebote .leistung__text { display: flex; flex-direction: column; align-items: flex-start; height: 100%; }
.angebote .leistung__preis { white-space: nowrap; }
.angebote .leistung__fuss { flex-wrap: nowrap; }
@media (max-width: 980px) { .angebote { grid-template-columns: minmax(0, 1fr); max-width: 34rem; margin-inline: auto; } }
.galerie--hoch img { aspect-ratio: 4 / 5; }
.zitat--hell blockquote, .zitat--hell figcaption { color: var(--weiss); }
.zitat--hell .zitat__rolle { color: #a9a29a; }

/* Unterseiten Kontakt / Danke */
.seite-kontakt h1, .seite-danke h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); }
.seite-kontakt .kopfzeile { max-width: 44rem; }
.kontakt-daten { gap: 0.6rem; }
.markierbar { color: var(--tinte); user-select: all; }
.seite-danke { padding-block: clamp(5rem, 12vw, 9rem); }
.seite-danke .kopfzeile { gap: 1.25rem; }

/* Formular */
.formular { background: var(--weiss); border-radius: var(--rund); padding: clamp(1.25rem, 3vw, 2.25rem); display: grid; gap: 1.1rem; }
.formular__reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
@media (max-width: 600px) { .formular__reihe { grid-template-columns: minmax(0, 1fr); } }
.feld { display: grid; gap: 0.35rem; min-width: 0; }
.feld label { font-size: 0.92rem; font-weight: 600; color: var(--tinte); }
.feld__optional { font-weight: 400; color: var(--grau); }
.feld input, .feld select, .feld textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--tinte); background: var(--weiss);
  border: 1px solid #cfc4b4; border-radius: 8px; padding: 0.7rem 0.85rem; min-height: 2.9rem;
}
.feld textarea { resize: vertical; min-height: 7rem; }
.feld select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23161616' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; padding-right: 2.4rem; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 2px solid var(--tinte); outline-offset: 1px; border-color: var(--tinte); }
.feld input::placeholder, .feld textarea::placeholder { color: #9a9189; }
.formular__fuss { display: grid; gap: 0.75rem; justify-items: center; text-align: center; margin-top: 0.4rem; }
.formular__fuss .knopf { width: 100%; min-height: 3.4rem; }
.formular__hinweis { font-size: 0.82rem; color: var(--grau); }
.formular__hinweis a { color: inherit; }
.formular__falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formular__meldung { border-radius: 8px; padding: 0.85rem 1rem; background: #fbeaea; color: #7a1f1f; font-size: 0.95rem; }

/* FAQ */
.faq { margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.faq__liste { max-width: 52rem; margin-inline: auto; border-top: 1px solid var(--sand); }
.faq__frage { border-bottom: 1px solid var(--sand); }
.faq__frage summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding-block: 1.15rem; font-family: var(--titel); font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--tinte);
}
.faq__frage summary::-webkit-details-marker { display: none; }
.faq__frage summary::after { content: "+"; font-family: var(--sans); font-size: 1.5rem; line-height: 1; flex-shrink: 0; transition: transform .2s ease; }
.faq__frage[open] summary::after { transform: rotate(45deg); }
.faq__frage summary:hover { color: var(--grau); }
.faq__frage p { padding-bottom: 1.25rem; max-width: 46rem; }
.faq__frage p a { color: var(--tinte); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .faq__frage summary::after { transition: none; } }
.abschluss__zeile { padding-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--tinte); scroll-margin-top: 6rem; }

/* Fuß: wie die alte Seite */
.fuss { background: var(--schwarz); color: #ababab; padding-block: 4rem 2.5rem; text-align: center; }
.fuss .innen { display: grid; justify-items: center; gap: 0.9rem; }
.fuss a { text-decoration: none; }
.fuss a:hover { color: var(--weiss); }
.fuss__titel { color: var(--weiss); font-size: clamp(1.4rem, 3.2vw, 2.5rem); letter-spacing: 0.25em; text-transform: uppercase; line-height: 1.3; margin-right: -0.25em; }
.fuss__klein { font-size: 0.78rem; }
.fuss__klein a { color: var(--weiss); }
.fuss__follow { width: 5.9rem; margin-top: 2rem; }
.fuss__insta { color: var(--weiss); display: inline-flex; padding: 0.4rem; }
.fuss__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.25rem; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 0.75rem; }
.fuss button.link { background: none; border: 0; padding: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.fuss button.link:hover { color: var(--weiss); }

/* Mobile Anfrage-Leiste */
.leiste { display: none; }
@media (max-width: 720px) {
  .leiste {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
    background: var(--weiss); border-top: 1px solid var(--sand);
    padding: 0.6rem var(--rand-r) calc(0.6rem + env(safe-area-inset-bottom, 0px)) var(--rand);
  }
  .leiste .knopf { min-height: 2.9rem; padding-inline: 0.75rem; font-size: 0.92rem; }
  body { padding-bottom: calc(4.2rem + env(safe-area-inset-bottom, 0px)); }
}

/* Abgerundete Ecken wie auf der alten Seite */
.hero__bild img, .mona img, .stimme, .menue__liste, .menue summary, .knopf { border-radius: var(--rund); }

/* Referenzen (about-me) */
.hero__bild--mitte img { object-position: center top; }
.trenner-zitat { padding-block: clamp(3rem, 6vw, 4.75rem); text-align: center; }
.trenner-zitat figure { margin-block: 0; display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); justify-items: center; }
.trenner-zitat blockquote { margin: 0; max-width: 46rem; font-family: var(--titel); font-style: italic; font-size: clamp(2rem, 4.4vw, 3.6rem); line-height: 1.32; color: #66615c; text-wrap: balance; }
.trenner-zitat figcaption { font-family: var(--titel); font-size: 1.15rem; color: var(--grau); }
.vita strong { display: block; font-weight: 600; color: var(--tinte); }
.vita { gap: 0.6rem; }
.zweier__listen a { color: var(--tinte); }
@media (min-width: 1240px) {
  .produktionen--einzeilig { grid-template-columns: repeat(3, auto); justify-content: center; column-gap: clamp(2.5rem, 4vw, 4rem); }
  .produktionen--einzeilig li { white-space: nowrap; }
}
@media (max-width: 860px) { .produktionen--einzeilig { margin-inline: auto; } }
.ref__zahlen { max-width: 46rem; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; text-align: center; }
.namen { list-style: none; margin: 0 auto; padding: 0; max-width: 62rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 2.25rem; font-family: var(--titel); font-size: clamp(1.1rem, 1.8vw, 1.35rem); color: var(--tinte); line-height: 1.6; }
.namen__mehr { text-align: center; margin-top: 1rem; }
.ref__stimmen-kopf { margin-top: clamp(4rem, 8vw, 6rem); }
.ref__abschluss { max-width: 46rem; margin-bottom: 0; }
.ref__abschluss .knopfreihe { justify-content: center; margin-top: 0.6rem; }

/* Preise */
.preis-kopf { padding-block: clamp(3rem, 6vw, 5rem) clamp(3rem, 6vw, 4.5rem); }
.preis-kopf .kopfzeile { max-width: 46rem; margin-bottom: 0; gap: 1.2rem; }
.preis-kopf h1 { font-size: clamp(2.4rem, 5vw, 3.9rem); line-height: 1.08; }
.preis-kopf .hand { margin-bottom: -0.5rem; }
.preis-karten .leistung { background: var(--weiss); }
.preis-karten .leistung img { aspect-ratio: 3 / 2; object-position: center 30%; }
.preis-karten__titel { text-transform: uppercase; letter-spacing: 0.02em; font-size: clamp(1.25rem, 1.7vw, 1.5rem); }
.preis-karten__preis { font-family: var(--titel); font-size: clamp(1.7rem, 2.6vw, 2.1rem); line-height: 1.1; color: var(--tinte); margin-top: -0.3rem; }
.preis-liste { list-style: none; padding-left: 0; gap: 0.5rem; width: 100%; }
.preis-liste li { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--sand); }
.preis-liste strong { font-weight: 600; color: var(--tinte); white-space: nowrap; }
.preis-karten .leistung__fuss { gap: 1.25rem; align-items: center; }
.preis-hinweise p { color: var(--auf-schwarz); }
.preis-hinweise h3 { margin-bottom: 0.6rem; }
.preis-kopf .google { justify-content: center; text-align: center; }
@media (max-width: 520px) { .preis-kopf .google__text { flex-basis: 100%; } }

/* Impressum / Datenschutz */
.rechtsseite { padding-top: clamp(3rem, 6vw, 4.5rem); }
.rechtsseite h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); }
.rechtsseite .hand { margin-bottom: -0.6rem; }
.rechtstext { max-width: 46rem; margin-inline: auto; display: grid; gap: 1rem; }
.rechtstext h2 { font-size: clamp(1.35rem, 2.2vw, 1.65rem); margin-top: 1.6rem; }
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext p, .rechtstext ul { margin: 0; }
.rechtstext ul { padding-left: 1.4rem; display: grid; gap: 0.2rem; }
.rechtstext a { color: var(--tinte); }
.rechtstext__stand { color: var(--grau); font-size: 0.95rem; }

/* 404 */
.seite-404 { padding-block: clamp(4rem, 10vw, 7rem); }
.seite-404 h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); }
.seite-404 .hand { margin-bottom: -0.6rem; }
.seite-404 .kopfzeile { max-width: 40rem; }
.seite-404__links { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; max-width: 46rem; }
.seite-404__direkt { text-align: center; margin-top: 2rem; color: var(--grau); }
.seite-404__direkt a { color: var(--tinte); }