/* =========================================================
   CSC Personaltraining: Gestaltung der Website
   Farben, Schriften und Abstände stehen oben als Variablen,
   damit sie sich an einer einzigen Stelle ändern lassen.
   ========================================================= */

/* ---------- Schriften (liegen lokal in assets/fonts) ---------- */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nunito Sans";
  src: url("../fonts/nunito-sans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Grundwerte ---------- */
:root {
  /* Farben: Pastelltöne aus dem Logo */
  --creme: #FAF7F0;         /* Seitenhintergrund */
  --beige: #F1E9DB;         /* ruhige Flächen */
  --beige-linie: #E2D5BF;   /* feine Linien und Rahmen */
  --oliv-hell: #DDE1CC;     /* Pastell-Olivgrün */
  --oliv: #8A976C;          /* Olivgrün für Symbole */
  --oliv-dunkel: #3B4B2D;   /* Knöpfe und Links, das Grün aus dem Logo */
  --oliv-tief: #2D3A22;     /* Knopf beim Darüberfahren */
  --braun: #B8956A;         /* Hellbraun für Akzente */
  --braun-hell: #CDB08A;    /* Hellbraun auf dunklem Grund */
  --braun-dunkel: #7D5F3D;  /* Hellbraun für kleine Schrift */
  --text: #2F3226;          /* Fließtext, dunkles Olivbraun */
  --text-weich: #5B5E4E;    /* Nebentexte */
  --dunkel: #353B27;        /* Fußbereich */
  --weiss: #FFFFFF;
  --fehler: #9A3B24;

  --schrift-titel: "Fraunces", Georgia, "Times New Roman", serif;
  --schrift-text: "Nunito Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --breite: 1160px;
  --rand: clamp(1.25rem, 4vw, 2rem);
  --abstand-abschnitt: clamp(4rem, 9vw, 7rem);
  --radius: 18px;
  --radius-gross: 28px;
  --schatten: 0 1px 2px rgba(47, 50, 38, 0.05), 0 8px 24px rgba(47, 50, 38, 0.07);
  --schatten-hover: 0 2px 4px rgba(47, 50, 38, 0.06), 0 18px 38px rgba(47, 50, 38, 0.12);
  --kopf-hoehe: 76px;
  --uebergang: 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-hoehe) + 16px);
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: 1.125rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
  overflow-x: hidden;
  overflow-x: clip;
}

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

a {
  color: var(--oliv-dunkel);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--uebergang);
}

a:hover {
  color: var(--oliv-tief);
}

:focus-visible {
  outline: 3px solid var(--braun);
  outline-offset: 3px;
  border-radius: 6px;
}

h1,
h2,
h3 {
  margin: 0 0 0.55em;
  font-family: var(--schrift-titel);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--text);
  /* lange deutsche Wörter auf schmalen Bildschirmen sauber trennen */
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 12 5 5;
}

h1 {
  font-size: clamp(2.3rem, 1.55rem + 3.3vw, 4rem);
}

h2 {
  font-size: clamp(1.85rem, 1.4rem + 1.9vw, 2.75rem);
}

h3 {
  font-size: clamp(1.22rem, 1.13rem + 0.4vw, 1.45rem);
  line-height: 1.25;
}

p {
  margin: 0 0 1em;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

.sym {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.symbol-vorrat {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.kein-umbruch {
  white-space: nowrap;
}

[hidden] {
  display: none !important;
}

.visuell-versteckt {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sprunglink {
  position: absolute;
  top: -120px;
  left: 1rem;
  z-index: 100;
  padding: 0.75rem 1.1rem;
  border-radius: 10px;
  background: var(--oliv-dunkel);
  color: var(--weiss);
  font-weight: 700;
  text-decoration: none;
}

.sprunglink:focus {
  top: 1rem;
  color: var(--weiss);
}

/* ---------- Aufbau ---------- */
.container {
  width: 100%;
  max-width: calc(var(--breite) + 2 * var(--rand));
  margin-inline: auto;
  padding-inline: var(--rand);
}

.abschnitt {
  padding-block: var(--abstand-abschnitt);
}

.abschnitt--beige {
  background: var(--beige);
}

.abschnitt--oliv {
  background: var(--oliv-hell);
}

.abschnitt__kopf {
  max-width: 44rem;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.abschnitt__kopf--mitte {
  margin-inline: auto;
  text-align: center;
}

.dachzeile {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 1rem;
  color: var(--braun-dunkel);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dachzeile::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.einleitung {
  max-width: 38em;
  color: var(--text-weich);
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3rem);
}

/* ---------- Knöpfe und Links ---------- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 52px;
  padding: 0.8rem 1.6rem;
  border: 0;
  border-radius: 999px;
  background: var(--oliv-dunkel);
  color: var(--weiss);
  font-family: var(--schrift-text);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(59, 75, 45, 0.24);
  transition: background-color var(--uebergang), transform var(--uebergang), box-shadow var(--uebergang);
}

.knopf:hover {
  background: var(--oliv-tief);
  color: var(--weiss);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(59, 75, 45, 0.3);
}

.knopf:active {
  transform: translateY(0);
}

.knopf .sym {
  width: 1.15em;
  height: 1.15em;
  transition: transform var(--uebergang);
}

.knopf:hover .sym {
  transform: translateX(3px);
}

.knopf--gross {
  min-height: 58px;
  padding: 0.95rem 1.9rem;
  font-size: 1.1rem;
}

.knopf--klein {
  min-height: 44px;
  padding: 0.55rem 1.25rem;
  font-size: 0.98rem;
  box-shadow: none;
}

.knopf[disabled] {
  opacity: 0.7;
  cursor: wait;
  transform: none;
}

.knopf-hinweis {
  display: block;
  margin-top: 0.85rem;
  color: var(--text-weich);
  font-size: 0.95rem;
}

.pfeil-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding-bottom: 0.15rem;
  border-bottom: 1.5px solid rgba(59, 75, 45, 0.35);
  color: var(--oliv-dunkel);
  font-weight: 700;
  text-decoration: none;
  transition: border-color var(--uebergang), color var(--uebergang);
}

.pfeil-link:hover {
  border-bottom-color: var(--oliv-dunkel);
}

/* größere Tippfläche, ohne die Optik zu verändern */
.pfeil-link::after,
.kontakt-liste a::after {
  content: "";
  position: absolute;
  inset: -10px -6px;
}

.pfeil-link .sym {
  width: 1.05rem;
  height: 1.05rem;
  transition: transform var(--uebergang);
}

.pfeil-link:hover .sym {
  transform: translateX(4px);
}

/* ---------- Kopfzeile ---------- */
.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 247, 240, 0.94);
  border-bottom: 1px solid transparent;
  transition: border-color var(--uebergang), box-shadow var(--uebergang);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .kopf {
    background: rgba(250, 247, 240, 0.86);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    backdrop-filter: saturate(140%) blur(12px);
  }
}

.kopf.ist-gescrollt {
  border-bottom-color: var(--beige-linie);
  box-shadow: 0 6px 20px rgba(47, 50, 38, 0.06);
}

.kopf__inhalt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--kopf-hoehe);
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding-block: 0.3rem;
  color: var(--text);
  text-decoration: none;
  line-height: 1;
}

.marke:hover {
  color: var(--text);
}

.marke__name {
  font-family: var(--schrift-titel);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.marke__logo {
  display: block;
  width: auto;
  height: 46px;
}

.marke__logo-gross {
  display: block;
  width: 190px;
  height: auto;
}

.marke__zusatz {
  padding-left: 0.8rem;
  border-left: 1px solid var(--beige-linie);
  line-height: 1.4;
  color: var(--braun-dunkel);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.marke--hell,
.marke--hell:hover {
  color: var(--creme);
}

.marke--hell .marke__zusatz {
  color: var(--braun-hell);
}

.nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav__liste {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  list-style: none;
}

.nav__link {
  position: relative;
  display: inline-block;
  padding-block: 0.4rem;
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
}

.nav__link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--braun);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--uebergang);
}

.nav__link:hover {
  color: var(--text);
}

.nav__link:hover::after,
.nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

.menue-knopf {
  display: none;
}

/* ---------- Startseite: Kopfbereich ---------- */
.held {
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3.5rem, 8vw, 6.5rem);
}

.held__raster {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

.held__text h1 {
  margin-bottom: 0.5em;
  line-height: 1.16;
}

.held__text .einleitung {
  margin-bottom: 2rem;
}

.held__fakten {
  display: grid;
  gap: 0.6rem;
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--beige-linie);
  color: var(--text-weich);
  font-size: 1rem;
  list-style: none;
}

.held__fakten li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.held__fakten .sym {
  color: var(--oliv);
}

.held__bild {
  position: relative;
  isolation: isolate;
  margin: 0;
}

.held__bild::before {
  content: "";
  position: absolute;
  right: -18px;
  bottom: -18px;
  z-index: -1;
  width: 62%;
  height: 62%;
  border-radius: var(--radius-gross);
  background: var(--oliv-hell);
}

.held__bild img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-gross);
}

.plakette {
  position: absolute;
  bottom: 1.5rem;
  left: -1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0.75rem 1.05rem;
  border-radius: 14px;
  background: var(--weiss);
  box-shadow: var(--schatten);
  font-size: 0.95rem;
  font-weight: 700;
}

.plakette .sym {
  width: 1.4rem;
  height: 1.4rem;
  color: var(--oliv-dunkel);
}

/* Handgezeichnete Linie unter einem Wort der Hauptüberschrift */
.unterstrich {
  position: relative;
  white-space: nowrap;
}

.unterstrich svg {
  position: absolute;
  bottom: -0.2em;
  left: -2%;
  width: 104%;
  height: auto;
  overflow: visible;
  pointer-events: none;
}

.unterstrich path {
  fill: none;
  stroke: var(--braun);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: linie-zeichnen 1.2s 0.5s cubic-bezier(0.6, 0.1, 0.3, 1) forwards;
}

@keyframes linie-zeichnen {
  to {
    stroke-dashoffset: 0;
  }
}

/* ---------- Startseite: Kennst du das? ---------- */
.kennst-du {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
}

.kennst-du .abschnitt__kopf {
  margin-bottom: 0;
}

.kennst-du__schluss {
  margin: 1.75rem 0 0;
  font-weight: 700;
}

.situationen {
  display: grid;
  gap: 0.75rem;
  list-style: none;
}

.situationen li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--beige-linie);
  border-radius: var(--radius);
  background: var(--weiss);
  font-size: 1.02rem;
  line-height: 1.5;
  transition: border-color var(--uebergang), transform var(--uebergang), box-shadow var(--uebergang), opacity 700ms ease;
}

.situationen li:hover {
  border-color: var(--oliv);
  box-shadow: var(--schatten);
}

.situationen .sym {
  margin-top: 0.1rem;
  color: var(--oliv);
}

/* ---------- Karten ---------- */
.karten {
  display: grid;
  gap: 1.25rem;
  list-style: none;
}

.karte {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.6rem 1.6rem;
  border-radius: var(--radius);
  background: var(--weiss);
  box-shadow: var(--schatten);
  transition: transform var(--uebergang), box-shadow var(--uebergang), opacity 700ms ease;
}

.karte:hover {
  box-shadow: var(--schatten-hover);
}

.karte:focus-within {
  outline: 3px solid var(--braun);
  outline-offset: 3px;
}

.karte__symbol {
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 1.25rem;
  place-items: center;
  border-radius: 50%;
  background: var(--oliv-hell);
  color: var(--oliv-dunkel);
  transition: background-color var(--uebergang), color var(--uebergang);
}

.karte__symbol .sym {
  width: 1.5rem;
  height: 1.5rem;
}

.karte:hover .karte__symbol {
  background: var(--oliv-dunkel);
  color: var(--weiss);
}

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

.karte h3 a {
  color: inherit;
  text-decoration: none;
}

.karte h3 a:focus-visible {
  outline: none;
}

.karte h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.karte p {
  margin-bottom: 1.25rem;
  color: var(--text-weich);
  font-size: 1rem;
}

.karte__mehr {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  color: var(--oliv-dunkel);
  font-size: 0.95rem;
  font-weight: 700;
}

.karte__mehr .sym {
  width: 1rem;
  height: 1rem;
  transition: transform var(--uebergang);
}

.karte:hover .karte__mehr .sym {
  transform: translateX(4px);
}

/* ---------- Punkte mit Symbol ---------- */
.ansatz {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.punkte {
  display: grid;
  gap: 1.5rem;
  list-style: none;
}

.punkt {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  align-items: start;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--beige-linie);
}

.punkt:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.punkt__symbol {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border-radius: 50%;
  background: var(--weiss);
  color: var(--oliv-dunkel);
}

.abschnitt--beige .punkt__symbol {
  background: var(--weiss);
}

.abschnitt:not(.abschnitt--beige) .punkt__symbol {
  background: var(--oliv-hell);
}

.punkt__symbol .sym {
  width: 1.45rem;
  height: 1.45rem;
}

.punkt h3 {
  margin-bottom: 0.3rem;
  font-size: 1.3rem;
}

.punkt p {
  margin: 0;
  color: var(--text-weich);
}

/* ---------- Foto mit Rahmenlinie ---------- */
.vorstellung {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

.foto {
  margin: 0;
}

.foto__rahmen {
  position: relative;
  isolation: isolate;
}

.foto__rahmen::before {
  content: "";
  position: absolute;
  inset: 1.25rem -1rem -1rem 1.25rem;
  z-index: -1;
  border: 1.5px solid var(--braun);
  border-radius: var(--radius-gross);
}

.foto img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-gross);
}

.foto figcaption {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.6rem;
  color: var(--text-weich);
  font-size: 0.92rem;
}

.foto figcaption .sym {
  width: 1.05rem;
  height: 1.05rem;
  color: var(--braun);
}

/* ---------- Schritte ---------- */
.schritte {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 1.25rem;
  list-style: none;
}

.schritt {
  position: relative;
  padding: 1.75rem 1.5rem 1.6rem;
  border-radius: var(--radius);
  background: var(--weiss);
  box-shadow: var(--schatten);
  transition: transform var(--uebergang), box-shadow var(--uebergang), opacity 700ms ease;
}

.schritt__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.schritt__nummer {
  color: var(--braun);
  font-family: var(--schrift-titel);
  font-size: 2.6rem;
  font-weight: 600;
  line-height: 1;
}

.schritt__kopf .sym {
  width: 1.6rem;
  height: 1.6rem;
  color: var(--oliv);
}

.schritt h3 {
  margin-bottom: 0.4rem;
}

.schritt p {
  margin: 0;
  color: var(--text-weich);
  font-size: 1.02rem;
}

.schritte__mehr {
  margin: 2.25rem 0 0;
}

/* ---------- Aufruf am Seitenende ---------- */
.aufruf {
  text-align: center;
}

.aufruf__box {
  max-width: 46rem;
}

.aufruf__symbol {
  display: inline-grid;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 1.25rem;
  place-items: center;
  border-radius: 50%;
  background: var(--weiss);
  color: var(--oliv-dunkel);
}

.aufruf__symbol .sym {
  width: 1.6rem;
  height: 1.6rem;
}

.aufruf p {
  margin-inline: auto;
  margin-bottom: 2rem;
  max-width: 34em;
  color: var(--text-weich);
  font-size: 1.15rem;
}

/* ---------- Unterseiten: Kopfbereich ---------- */
.seitenkopf {
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 6vw, 5rem);
}

.seitenkopf__raster {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}

.seitenkopf h1 {
  font-size: clamp(2.2rem, 1.6rem + 2.7vw, 3.6rem);
}

.seitenkopf .einleitung:last-child {
  margin-bottom: 0;
}

.seitenkopf__bild {
  position: relative;
  isolation: isolate;
  margin: 0;
}

.seitenkopf__bild::before {
  content: "";
  position: absolute;
  right: -16px;
  bottom: -16px;
  z-index: -1;
  width: 60%;
  height: 60%;
  border-radius: var(--radius-gross);
  background: var(--oliv-hell);
}

.seitenkopf__bild img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-gross);
}

.sprungnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 2rem;
  list-style: none;
}

.sprungnav a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--beige-linie);
  border-radius: 999px;
  background: var(--weiss);
  color: var(--text);
  font-size: 0.98rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--uebergang), background-color var(--uebergang);
}

.sprungnav a:hover {
  border-color: var(--oliv);
  background: var(--oliv-hell);
}

.sprungnav .sym {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--oliv-dunkel);
}

/* ---------- Leistungen ---------- */
.leistung {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.leistung__bild {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-gross);
}

.leistung__bild img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.leistung__bild:hover img {
  transform: scale(1.03);
}

.leistung__nummer {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--braun);
  font-family: var(--schrift-titel);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.haken-liste {
  display: grid;
  gap: 0.7rem;
  margin: 1.5rem 0 1.75rem;
  list-style: none;
}

.haken-liste li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
}

.haken-liste .sym {
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.1rem;
  padding: 0.25rem;
  border-radius: 50%;
  background: var(--oliv-hell);
  color: var(--oliv-dunkel);
  stroke-width: 2.2;
}

.passt-gut {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--braun);
  border-radius: 0 12px 12px 0;
  background: var(--beige);
  font-size: 1rem;
}

.abschnitt--beige .passt-gut {
  background: var(--weiss);
}

.passt-gut .sym {
  margin-top: 0.15rem;
  color: var(--braun-dunkel);
}

.hinweis-klein {
  margin: 1rem 0 0;
  color: var(--text-weich);
  font-size: 0.92rem;
}

/* ---------- Über mich ---------- */
.weg {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
}

.zeitleiste {
  position: relative;
  display: grid;
  gap: 2.25rem;
  padding-left: 2.4rem;
  list-style: none;
}

.zeitleiste::before {
  content: "";
  position: absolute;
  top: 0.6rem;
  bottom: 0.6rem;
  left: 0.55rem;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(var(--braun), var(--oliv-hell));
}

.zeitleiste li {
  position: relative;
}

.zeitleiste li::before {
  content: "";
  position: absolute;
  top: 0.35rem;
  left: calc(-2.4rem + 0.55rem - 7px + 1px);
  width: 14px;
  height: 14px;
  border: 3px solid var(--braun);
  border-radius: 50%;
  background: var(--creme);
}

.zeitleiste__jahr {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--braun-dunkel);
  font-family: var(--schrift-titel);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
}

.zeitleiste h3 {
  margin-bottom: 0.3rem;
  font-size: 1.25rem;
}

.zeitleiste p {
  margin: 0;
  color: var(--text-weich);
}

.qualis {
  display: grid;
  gap: 1.25rem;
  list-style: none;
}

.quali {
  padding: 1.75rem 1.6rem;
  border-radius: var(--radius);
  background: var(--weiss);
  box-shadow: var(--schatten);
  transition: transform var(--uebergang), box-shadow var(--uebergang), opacity 700ms ease;
}

.quali:hover {
  box-shadow: var(--schatten-hover);
}

.quali h3 {
  margin-bottom: 0.35rem;
}

.quali p {
  margin: 0;
  color: var(--text-weich);
  font-size: 1.02rem;
}

.csc-box {
  display: grid;
  gap: 1.75rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border-radius: var(--radius-gross);
  background: var(--weiss);
  box-shadow: var(--schatten);
}

.csc-box h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
}

.csc-box h3 .sym {
  width: 1.6rem;
  height: 1.6rem;
  color: var(--braun);
}

.csc-woerter {
  display: grid;
  gap: 1rem;
  list-style: none;
}

.csc-woerter li {
  padding-top: 1rem;
  border-top: 1px solid var(--beige-linie);
}

.csc-woerter strong {
  display: block;
  font-family: var(--schrift-titel);
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.9rem);
  font-weight: 600;
  line-height: 1.1;
}

.csc-woerter strong::first-letter {
  color: var(--oliv-dunkel);
}

.csc-woerter span {
  color: var(--text-weich);
  font-size: 1rem;
}

.csc-box p {
  margin: 0;
  color: var(--text-weich);
}

/* ---------- Ablauf und Kosten ---------- */
.zwei-karten {
  display: grid;
  gap: 1.25rem;
}

.info-karte {
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border-radius: var(--radius-gross);
  background: var(--weiss);
  box-shadow: var(--schatten);
  transition: opacity 700ms ease, transform var(--uebergang);
}

.info-karte h3 {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1rem;
}

.info-karte h3 .sym {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--oliv);
}

.info-karte .haken-liste {
  margin: 0;
}

.hervorhebung {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 2rem;
  padding: 1.35rem 1.5rem;
  border-radius: var(--radius);
  background: var(--oliv-hell);
}

.hervorhebung .sym {
  width: 1.6rem;
  height: 1.6rem;
  margin-top: 0.15rem;
  color: var(--oliv-dunkel);
}

.hervorhebung p {
  margin: 0;
}

.kosten {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.kosten__text p {
  max-width: 36em;
}

/* ---------- Kontakt ---------- */
.kontakt-raster {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

.formular {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: var(--radius-gross);
  background: var(--weiss);
  box-shadow: var(--schatten);
}

.formular h2 {
  margin-bottom: 0.4rem;
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.9rem);
}

.formular__hinweis {
  margin-bottom: 1.75rem;
  color: var(--text-weich);
  font-size: 0.98rem;
}

.formular__reihe {
  display: grid;
  gap: 0 1.1rem;
}

.feld {
  display: grid;
  align-content: start;
  gap: 0.4rem;
  margin-bottom: 1.15rem;
}

.feld label {
  font-size: 0.98rem;
  font-weight: 700;
}

.feld .zusatz {
  color: var(--text-weich);
  font-weight: 400;
}

.feld input,
.feld select,
.feld textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.75rem 0.95rem;
  border: 1.5px solid var(--beige-linie);
  border-radius: 12px;
  background: var(--creme);
  color: var(--text);
  font: inherit;
  font-size: 1.05rem;
  transition: border-color var(--uebergang), box-shadow var(--uebergang), background-color var(--uebergang);
}

.feld textarea {
  min-height: 140px;
  resize: vertical;
}

.feld select {
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B4B2D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 0.95rem center;
  background-repeat: no-repeat;
  background-size: 1.15rem;
  -webkit-appearance: none;
  appearance: none;
}

.feld input:hover,
.feld select:hover,
.feld textarea:hover {
  border-color: var(--braun);
}

.feld input:focus,
.feld select:focus,
.feld textarea:focus {
  outline: none;
  border-color: var(--oliv-dunkel);
  background-color: var(--weiss);
  box-shadow: 0 0 0 4px rgba(138, 151, 108, 0.28);
}

.feld [aria-invalid="true"] {
  border-color: var(--fehler);
}

.fehlertext {
  margin: 0;
  color: var(--fehler);
  font-size: 0.92rem;
  font-weight: 700;
}

.fehlertext:empty {
  display: none;
}

.honig {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formular__absenden {
  display: grid;
  gap: 1rem;
  margin-top: 0.5rem;
}

.formular__absenden .knopf {
  width: 100%;
}

.datenschutz-hinweis {
  margin: 0;
  color: var(--text-weich);
  font-size: 0.9rem;
}

.formular__status,
.rueckmeldung {
  display: none;
  margin: 0 0 1.5rem;
  padding: 1rem 1.2rem;
  border-radius: 12px;
  font-weight: 600;
}

.formular__status {
  margin: 1.25rem 0 0;
}

.formular__status:focus {
  outline: none;
}

.formular__status.ist-erfolg,
.rueckmeldung--erfolg:target {
  display: block;
  background: var(--oliv-hell);
  color: var(--oliv-tief);
}

.formular__status.ist-fehler,
.rueckmeldung--fehler:target {
  display: block;
  background: #F6E4DC;
  color: #7E2F1C;
}

.kontakt-karte {
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border-radius: var(--radius-gross);
  background: var(--oliv-hell);
}

.kontakt-karte h2 {
  margin-bottom: 0.4rem;
  font-size: clamp(1.4rem, 1.25rem + 0.6vw, 1.75rem);
}

.kontakt-karte > p {
  color: var(--text-weich);
  font-size: 1rem;
}

.kontakt-liste {
  display: grid;
  gap: 1.1rem;
  margin: 1.5rem 0 0;
  list-style: none;
}

.kontakt-liste li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: start;
  font-size: 1.02rem;
}

.kontakt-liste .sym {
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.2rem;
  color: var(--oliv-dunkel);
}

.kontakt-liste a {
  position: relative;
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.kontakt-liste a:hover {
  color: var(--oliv-dunkel);
  text-decoration: underline;
}

.kontakt-liste small {
  display: block;
  color: var(--text-weich);
  font-size: 0.88rem;
}

/* ---------- Rechtstexte ---------- */
.rechtstext {
  max-width: 46rem;
}

.rechtstext h2 {
  margin-top: 2.5rem;
  font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.7rem);
}

.rechtstext h3 {
  margin-top: 1.75rem;
  font-size: 1.15rem;
}

.rechtstext p,
.rechtstext li {
  font-size: 1.02rem;
}

.rechtstext ul {
  margin-bottom: 1em;
  padding-left: 1.2rem;
}

.rechtstext li + li {
  margin-top: 0.35rem;
}

.rechtstext a {
  overflow-wrap: anywhere;
}

.stand {
  margin-top: 2.5rem;
  color: var(--text-weich);
  font-size: 0.95rem;
}

/* ---------- Fußbereich ---------- */
.fuss {
  padding-block: clamp(3.5rem, 7vw, 5rem) 2rem;
  background: var(--dunkel);
  color: rgba(250, 247, 240, 0.8);
  font-size: 1rem;
}

.fuss a {
  color: var(--creme);
  text-decoration: none;
}

.fuss a:hover {
  color: var(--creme);
  text-decoration: underline;
}

.fuss__raster {
  display: grid;
  gap: 2.5rem;
}

.fuss__text {
  max-width: 24em;
  margin-top: 1.25rem;
}

.fuss__titel {
  margin: 0 0 1rem;
  color: var(--braun-hell);
  font-family: var(--schrift-text);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.fuss__liste {
  display: grid;
  gap: 0.15rem;
  list-style: none;
}

.fuss__liste li {
  padding-block: 0.25rem;
}

.fuss__liste a,
.fuss__recht a {
  display: inline-block;
  padding-block: 0.4rem;
  overflow-wrap: anywhere;
}

.fuss__unten {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(250, 247, 240, 0.14);
  font-size: 0.92rem;
}

.fuss__unten p {
  margin: 0;
}

.fuss__recht {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

/* ---------- Termin-Knopf am unteren Rand (nur Handy) ---------- */
.mobil-leiste {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  padding: 0.75rem var(--rand) calc(0.75rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--beige-linie);
  background: rgba(250, 247, 240, 0.97);
  box-shadow: 0 -8px 24px rgba(47, 50, 38, 0.08);
  visibility: hidden;
  transform: translateY(110%);
  transition: transform 300ms ease, visibility 0s linear 300ms;
}

.mobil-leiste.ist-sichtbar {
  visibility: visible;
  transform: none;
  transition: transform 300ms ease;
}

.mobil-leiste .knopf {
  width: 100%;
}

/* Bei offenem Menü reicht der Knopf im Menü */
.menue-offen .mobil-leiste {
  visibility: hidden;
  transform: translateY(110%);
}

/* ---------- Sanftes Einblenden beim Scrollen ---------- */
.js .zeige {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow var(--uebergang), border-color var(--uebergang);
  transition-delay: calc(var(--v, 0) * 90ms);
}

.js .zeige.ist-sichtbar {
  opacity: 1;
  transform: none;
}

/* Falls das Skript nicht lädt, erscheint trotzdem alles */
.js:not(.js-bereit) .zeige {
  animation: notfall-zeigen 0s 2.5s forwards;
}

@keyframes notfall-zeigen {
  to {
    opacity: 1;
    transform: none;
  }
}

.js .karte.zeige.ist-sichtbar:hover,
.js .schritt.zeige.ist-sichtbar:hover,
.js .quali.zeige.ist-sichtbar:hover,
.js .situationen li.zeige.ist-sichtbar:hover {
  transform: translateY(-4px);
  transition-delay: 0s;
}

/* ================= Tablet und Desktop ================= */
@media (min-width: 600px) {
  .situationen {
    grid-template-columns: 1fr 1fr;
  }

  .situationen li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .karten {
    grid-template-columns: repeat(2, 1fr);
  }

  .formular__reihe--zwei {
    grid-template-columns: 1fr 1fr;
  }

  .qualis {
    grid-template-columns: repeat(3, 1fr);
  }

  .csc-woerter {
    grid-template-columns: repeat(3, 1fr);
  }

  .zwei-karten {
    grid-template-columns: 1fr 1fr;
  }

  .schritte--vier {
    grid-template-columns: 1fr 1fr;
  }

  .fuss__raster {
    grid-template-columns: 1.3fr 1fr 1fr;
  }
}

@media (min-width: 900px) {
  .held__raster {
    grid-template-columns: 1.05fr 0.95fr;
  }

  .kennst-du {
    grid-template-columns: 0.85fr 1.15fr;
    align-items: start;
  }

  .kennst-du .abschnitt__kopf {
    position: sticky;
    top: calc(var(--kopf-hoehe) + 2rem);
  }

  .ansatz {
    grid-template-columns: 0.9fr 1.1fr;
  }

  .vorstellung {
    grid-template-columns: 0.8fr 1.2fr;
  }

  .vorstellung .foto {
    max-width: 440px;
  }

  .seitenkopf .foto {
    justify-self: center;
    width: 100%;
    max-width: 400px;
  }

  .schritte {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }

  /* feine gestrichelte Linie, die die Schritte verbindet */
  .schritte::before {
    content: "";
    position: absolute;
    top: 3.1rem;
    right: 8%;
    left: 8%;
    z-index: -1;
    border-top: 1.5px dashed var(--braun);
  }

  .schritte--vier {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }

  .seitenkopf__raster--bild {
    grid-template-columns: 1.1fr 0.9fr;
  }

  .leistung {
    grid-template-columns: 1fr 1fr;
  }

  .leistung--gespiegelt .leistung__bild {
    order: 2;
  }

  .weg {
    grid-template-columns: 0.8fr 1.2fr;
    align-items: start;
  }

  .kosten {
    grid-template-columns: 1.1fr 0.9fr;
  }

  .kontakt-raster {
    grid-template-columns: 1.4fr 0.8fr;
  }

  .kontakt-karte {
    position: sticky;
    top: calc(var(--kopf-hoehe) + 2rem);
  }
}

@media (min-width: 1100px) {
  .karten {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ================= Handy: eigener Durchgang ================= */
@media (max-width: 899.98px) {
  :root {
    --kopf-hoehe: 68px;
  }

  /* Menü klappt hinter dem Menü-Knopf auf */
  .menue-knopf {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.5rem 1rem;
    border: 1px solid var(--beige-linie);
    border-radius: 999px;
    background: var(--weiss);
    color: var(--text);
    font-family: var(--schrift-text);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
  }

  .menue-knopf .sym--schliessen,
  .menue-knopf[aria-expanded="true"] .sym--menue {
    display: none;
  }

  .menue-knopf[aria-expanded="true"] .sym--schliessen {
    display: block;
  }

  .nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100vh - var(--kopf-hoehe));
    overflow-y: auto;
    padding: 0.5rem var(--rand) 1.5rem;
    border-bottom: 1px solid var(--beige-linie);
    background: var(--creme);
    box-shadow: 0 18px 30px rgba(47, 50, 38, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--uebergang), transform var(--uebergang), visibility 0s linear 220ms;
  }

  .nav.ist-offen {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity var(--uebergang), transform var(--uebergang);
  }

  .nav__liste {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__link {
    display: block;
    padding: 1rem 0;
    border-bottom: 1px solid var(--beige-linie);
    font-size: 1.15rem;
  }

  .nav__link::after {
    display: none;
  }

  .nav__link[aria-current="page"] {
    color: var(--oliv-dunkel);
  }

  .nav .knopf {
    width: 100%;
    min-height: 52px;
    margin-top: 1.25rem;
  }

  .marke__name {
    font-size: 1.45rem;
  }

  /* Kopfbereich: Text zuerst, Bild flacher */
  .held {
    padding-top: 1.75rem;
  }

  .held__bild {
    margin-right: 10px;
  }

  .held__bild::before {
    right: -10px;
    bottom: -10px;
  }

  .held__bild img {
    aspect-ratio: 4 / 3;
    object-position: 50% 30%;
  }

  .plakette {
    bottom: 0.9rem;
    left: 0.9rem;
    padding: 0.6rem 0.85rem;
    font-size: 0.88rem;
  }

  .held__fakten {
    margin-top: 1.75rem;
    padding-top: 1.35rem;
    font-size: 0.95rem;
  }

  .knopf--gross {
    width: 100%;
  }

  /* Kompaktere Listen und Karten */
  .situationen li {
    padding: 0.95rem 1rem;
    font-size: 1rem;
  }

  .karte {
    padding: 1.5rem 1.35rem 1.35rem;
  }

  .karte__symbol {
    width: 2.9rem;
    height: 2.9rem;
    margin-bottom: 1rem;
  }

  /* Porträt nicht bildschirmfüllend */
  .vorstellung .foto,
  .seitenkopf .foto {
    max-width: 420px;
    margin-right: 1rem;
  }

  .seitenkopf__bild {
    margin-right: 10px;
  }

  .seitenkopf__bild::before {
    right: -10px;
    bottom: -10px;
  }

  .leistung__bild img {
    aspect-ratio: 3 / 2;
  }

  .sprungnav {
    gap: 0.5rem;
  }

  .sprungnav a {
    padding: 0.45rem 0.8rem;
    font-size: 0.92rem;
  }

  .schritt__nummer {
    font-size: 2.2rem;
  }

  .kontakt-karte {
    order: 2;
  }

  /* Platz für den Termin-Knopf am unteren Rand */
  .fuss {
    padding-bottom: 6.5rem;
  }

  .ohne-leiste .fuss {
    padding-bottom: 2rem;
  }
}

@media (min-width: 900px) {
  .mobil-leiste {
    display: none;
  }
}

/* ---------- Weniger Bewegung, wenn gewünscht ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
  }

  .js .zeige {
    opacity: 1;
    transform: none;
  }

  .unterstrich path {
    stroke-dashoffset: 0;
  }
}

/* =========================================================
   Ergänzungen: Preise, Terminkalender und Beiträge
   ========================================================= */

/* Menü mit fünf Einträgen auf mittleren Bildschirmen etwas enger */
@media (min-width: 900px) and (max-width: 1099.98px) {
  .nav,
  .nav__liste {
    gap: 1.15rem;
  }

  .nav__link {
    font-size: 0.95rem;
  }
}

/* Zweitknopf mit Rand, zum Beispiel für die Preise */
.knopf--rand {
  background: transparent;
  color: var(--oliv-dunkel);
  box-shadow: inset 0 0 0 2px var(--oliv-dunkel);
}

.knopf--rand:hover {
  background: var(--oliv-dunkel);
  color: var(--weiss);
  box-shadow: inset 0 0 0 2px var(--oliv-dunkel);
}

.knopf--mini {
  min-height: 40px;
  padding: 0.45rem 1rem;
  font-size: 0.92rem;
  box-shadow: none;
}

.knopf--rand.knopf--mini {
  box-shadow: inset 0 0 0 2px var(--oliv-dunkel);
}

.knopf--warnung {
  background: var(--fehler);
  box-shadow: none;
}

.knopf--warnung:hover {
  background: #7E2F1C;
  box-shadow: none;
}

.text-knopf {
  min-height: 44px;
  padding: 0.6rem 0.4rem;
  border: 0;
  background: none;
  color: var(--text-weich);
  font-family: var(--schrift-text);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.text-knopf:hover {
  color: var(--text);
}

/* Preisliste auf „Ablauf und Kosten“ */
.preisliste {
  margin: 0;
}

.preisliste div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.2rem 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px dashed var(--beige-linie);
}

.preisliste dt {
  font-size: 1rem;
}

.preisliste dd {
  margin: 0;
  color: var(--oliv-dunkel);
  font-weight: 700;
  white-space: nowrap;
}

.preisliste__hinweis {
  margin: 1rem 0 0;
  color: var(--text-weich);
  font-size: 0.88rem;
}

.kosten__text .pfeil-link {
  margin-top: 0.5rem;
}

/* Preis-Hinweis auf den Karten der Startseite */
.karte .karte__preis {
  margin: -0.4rem 0 1.25rem;
  color: var(--braun-dunkel);
  font-size: 0.98rem;
  font-weight: 700;
}

/* Leistungen: Hinweis, Preis-Knöpfe und Preis-Zeilen */
.sprungnav__tipp {
  margin: 1.75rem 0 0;
  color: var(--text-weich);
  font-size: 0.95rem;
}

.sprungnav__tipp + .sprungnav {
  margin-top: 0.9rem;
}

.leistung__aktion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: 1.5rem;
}

.leistung__ab {
  color: var(--braun-dunkel);
  font-family: var(--schrift-titel);
  font-size: 1.2rem;
  font-weight: 600;
}

.leistung__preis {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 1.25rem 0 0;
  color: var(--text-weich);
  font-size: 0.98rem;
}

.leistung__preis .sym {
  margin-top: 0.15rem;
  color: var(--oliv);
}

/* ---------- Fenster mit Details und Preisen ---------- */
html.fenster-offen {
  overflow: hidden;
}

.fenster {
  width: min(760px, calc(100% - 2rem));
  max-width: none;
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-gross);
  background: var(--creme);
  color: var(--text);
  box-shadow: 0 30px 80px rgba(24, 28, 18, 0.35);
}

.fenster--breit {
  width: min(940px, calc(100% - 2rem));
}

.fenster::backdrop {
  background: rgba(35, 39, 27, 0.55);
}

.fenster[open] {
  animation: fenster-auf 260ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes fenster-auf {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
}

.fenster__innen {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
}

.fenster__kopf {
  display: flex;
  flex: none;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 1.75rem 1.1rem;
  border-bottom: 1px solid var(--beige-linie);
  background: var(--creme);
}

.fenster__kopf .dachzeile {
  margin-bottom: 0.5rem;
}

.fenster__kopf h2 {
  margin: 0;
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem);
}

.fenster__schliessen {
  display: grid;
  flex: none;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--beige-linie);
  border-radius: 50%;
  background: var(--weiss);
  color: var(--text);
  cursor: pointer;
  transition: background-color var(--uebergang), border-color var(--uebergang);
}

.fenster__schliessen:hover {
  border-color: var(--oliv);
  background: var(--oliv-hell);
}

.fenster__inhalt {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.5rem 1.75rem 1.75rem;
}

.fenster__einleitung {
  margin: 0 0 1.25rem;
  color: var(--text-weich);
}

.fenster .haken-liste {
  margin: 1rem 0 0;
}

.fenster__hinweis {
  margin: 1.35rem 0 0;
  color: var(--text-weich);
  font-size: 0.92rem;
}

.fenster__aktion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: 1.5rem;
}

.preise {
  display: grid;
  gap: 1.25rem;
  padding-top: 0.75rem;
}

.preis-karte {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.4rem 1.3rem;
  border: 1px solid var(--beige-linie);
  border-radius: var(--radius);
  background: var(--weiss);
}

.preis-karte--hervorgehoben {
  border: 2px solid var(--oliv-dunkel);
  box-shadow: var(--schatten);
}

.preis-karte__abzeichen {
  position: absolute;
  top: -0.8rem;
  right: 1.2rem;
  margin: 0;
  padding: 0.25rem 0.8rem;
  border-radius: 999px;
  background: var(--oliv-dunkel);
  color: var(--weiss);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.preis-karte h3 {
  margin-bottom: 0.25rem;
}

.preis-karte__unterzeile {
  margin: 0 0 1rem;
  color: var(--text-weich);
  font-size: 0.95rem;
  line-height: 1.45;
}

.preis {
  margin: 0;
  color: var(--text);
  font-family: var(--schrift-titel);
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1;
}

.preis small {
  color: var(--text-weich);
  font-family: var(--schrift-text);
  font-size: 1rem;
  font-weight: 600;
}

.preis-karte .haken-liste {
  gap: 0.5rem;
  margin: 1.1rem 0;
  font-size: 0.96rem;
  line-height: 1.45;
}

.preis-karte .haken-liste .sym {
  width: 1.3rem;
  height: 1.3rem;
  margin-top: 0;
}

.preis-karte__fuss {
  margin: auto 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--beige-linie);
  color: var(--text-weich);
  font-size: 0.9rem;
}

@media (min-width: 700px) {
  .preise--zwei,
  .preise--vier {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 699.98px) {
  .fenster,
  .fenster--breit {
    width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    border-radius: 0;
  }

  .fenster__innen {
    height: 100vh;
    height: 100dvh;
    max-height: none;
  }

  .fenster__kopf {
    padding: 1rem 1.25rem 0.9rem;
  }

  .fenster__inhalt {
    padding: 1.25rem 1.25rem 2rem;
  }

  .fenster__aktion .knopf {
    width: 100%;
  }
}

/* ---------- Terminbuchung (Kontaktseite) ---------- */
.kalender {
  max-width: 880px;
  margin-inline: auto;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border-radius: var(--radius-gross);
  background: var(--weiss);
  box-shadow: var(--schatten);
  text-align: center;
}

.kalender h2 {
  margin-bottom: 0.6rem;
}

.kalender .aufruf__symbol {
  background: var(--oliv-hell);
}

.kalender p {
  max-width: 36em;
  margin-inline: auto;
  color: var(--text-weich);
}

.kalender__datenschutz {
  font-size: 0.92rem;
}

.kalender__knoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.5rem;
  margin-top: 1.5rem;
}

.kalender__bald {
  padding: 1rem 1.25rem;
  border-radius: 12px;
  background: var(--oliv-hell);
  font-weight: 600;
}

.kalender .kalender__bald {
  color: var(--oliv-tief);
}

.kalender--geladen {
  padding: 0.5rem;
}

.kalender__rahmen {
  display: block;
  width: 100%;
  height: 760px;
  border: 0;
  border-radius: var(--radius);
  background: var(--creme);
}

@media (max-width: 699.98px) {
  .kalender__rahmen {
    height: 1080px;
  }
}

/* ---------- Beiträge ---------- */
.beitrag-liste {
  display: grid;
  gap: 1.5rem;
  list-style: none;
}

.beitrag-karte {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--weiss);
  box-shadow: var(--schatten);
  transition: transform var(--uebergang), box-shadow var(--uebergang);
}

.beitrag-karte:hover {
  box-shadow: var(--schatten-hover);
  transform: translateY(-4px);
}

.beitrag-karte:focus-within {
  outline: 3px solid var(--braun);
  outline-offset: 3px;
}

.beitrag-karte__bild {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--oliv-hell);
}

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

.beitrag-karte__platzhalter {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  background: linear-gradient(135deg, var(--oliv-hell), var(--beige));
  color: var(--oliv-dunkel);
}

.beitrag-karte__platzhalter .sym {
  width: 2.75rem;
  height: 2.75rem;
  stroke-width: 1.4;
}

.beitrag-karte__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.35rem 1.4rem 1.4rem;
}

.beitrag-karte time,
.beitrag__datum {
  color: var(--braun-dunkel);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.beitrag-karte h2,
.beitrag-karte h3 {
  margin: 0.45rem 0 0.5rem;
  font-size: 1.3rem;
}

.beitrag-karte h2 a,
.beitrag-karte h3 a {
  color: inherit;
  text-decoration: none;
}

.beitrag-karte h2 a::after,
.beitrag-karte h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.beitrag-karte h2 a:focus-visible,
.beitrag-karte h3 a:focus-visible {
  outline: none;
}

.beitrag-karte p {
  margin: 0 0 1rem;
  color: var(--text-weich);
  font-size: 1rem;
}

.beitrag-karte__mehr {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  color: var(--oliv-dunkel);
  font-size: 0.95rem;
  font-weight: 700;
}

.beitrag-karte__mehr .sym {
  width: 1rem;
  height: 1rem;
  transition: transform var(--uebergang);
}

.beitrag-karte:hover .beitrag-karte__mehr .sym {
  transform: translateX(4px);
}

.leer-hinweis {
  padding: 2.5rem 1.5rem;
  border-radius: var(--radius-gross);
  background: var(--weiss);
  color: var(--text-weich);
  text-align: center;
}

.container--schmal {
  max-width: calc(46rem + 2 * var(--rand));
}

.beitrag__bild {
  margin: 0 0 2rem;
  overflow: hidden;
  border-radius: var(--radius-gross);
}

.beitrag__bild img {
  width: 100%;
}

.beitrag__text {
  font-size: 1.15rem;
  line-height: 1.75;
}

.beitrag__text h2 {
  margin-top: 2rem;
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem);
}

.beitrag__text ul {
  margin: 0 0 1.2em;
  padding-left: 1.3rem;
}

.beitrag__text li + li {
  margin-top: 0.35rem;
}

.beitrag__fuss {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--beige-linie);
}

@media (min-width: 700px) {
  .beitrag-liste {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .beitrag-liste {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- Verwaltung der Beiträge (nur für Sebastian) ---------- */
.verwaltung-kopf {
  background: var(--dunkel);
  color: var(--creme);
}

.verwaltung-kopf .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  min-height: 68px;
}

.verwaltung-kopf a {
  color: var(--creme);
}

.verwaltung-kopf__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
}

.verwaltung-kopf .text-knopf {
  color: var(--creme);
}

.verwaltung {
  padding-block: clamp(2rem, 5vw, 3.5rem) 4rem;
}

.verwaltung h1 {
  font-size: clamp(1.8rem, 1.5rem + 1.2vw, 2.4rem);
}

.v-karte {
  max-width: 52rem;
  padding: clamp(1.25rem, 4vw, 2rem);
  border-radius: var(--radius-gross);
  background: var(--weiss);
  box-shadow: var(--schatten);
}

.v-karte--schmal {
  max-width: 30rem;
}

.v-meldung {
  max-width: 52rem;
  margin: 0 0 1.5rem;
  padding: 1rem 1.2rem;
  border-radius: 12px;
  font-weight: 600;
}

.v-meldung--ok {
  background: var(--oliv-hell);
  color: var(--oliv-tief);
}

.v-meldung--fehler {
  background: #F6E4DC;
  color: #7E2F1C;
}

.v-liste {
  display: grid;
  gap: 0.75rem;
  max-width: 52rem;
  margin-top: 1.5rem;
  list-style: none;
}

.v-eintrag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--beige-linie);
  border-radius: 14px;
  background: var(--weiss);
}

.v-eintrag__titel {
  display: block;
  font-weight: 700;
}

.v-eintrag__info {
  color: var(--text-weich);
  font-size: 0.9rem;
}

.v-status {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}

.v-status--an {
  background: var(--oliv-hell);
  color: var(--oliv-tief);
}

.v-status--aus {
  background: var(--beige);
  color: var(--braun-dunkel);
}

.v-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.v-aktionen form {
  margin: 0;
}

.v-hilfe {
  margin: 0.35rem 0 0;
  color: var(--text-weich);
  font-size: 0.9rem;
}

.v-bild-vorschau {
  max-width: 260px;
  margin: 0.4rem 0;
  border-radius: 12px;
}

.feld input[type="file"] {
  min-height: 0;
  padding: 0.65rem;
  background: var(--weiss);
}

.v-checkbox {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
}

.v-checkbox input {
  width: 1.2rem;
  height: 1.2rem;
  accent-color: var(--oliv-dunkel);
}

.v-knoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* ---------- Logo auf kleinen Bildschirmen ---------- */
@media (max-width: 899.98px) {
  .marke__logo {
    height: 40px;
  }
}

@media (max-width: 400px) {
  .kopf .marke__zusatz {
    display: none;
  }
}

/* ---------- Kundenstimme ---------- */
.stimme {
  position: relative;
  max-width: 50rem;
  margin: 1.5rem auto 0;
  padding: clamp(2.5rem, 5vw, 3.25rem) clamp(1.5rem, 5vw, 3.5rem) clamp(1.75rem, 4vw, 2.5rem);
  border-radius: var(--radius-gross);
  background: var(--weiss);
  box-shadow: var(--schatten);
}

.stimme__zeichen {
  position: absolute;
  top: -1.6rem;
  left: clamp(1.5rem, 5vw, 3.5rem);
  display: grid;
  width: 3.2rem;
  height: 3.2rem;
  place-items: center;
  border-radius: 50%;
  background: var(--oliv-dunkel);
  color: var(--weiss);
  font-family: var(--schrift-titel);
  font-size: 2.6rem;
  line-height: 1;
  padding-top: 0.9rem;
}

.stimme blockquote {
  margin: 0;
}

.stimme blockquote p {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.06rem, 1rem + 0.3vw, 1.2rem);
  line-height: 1.75;
}

.stimme blockquote strong {
  font-family: var(--schrift-titel);
  font-size: 1.12em;
  font-weight: 600;
}

.stimme__person {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--beige-linie);
}

.stimme__person .stimme__initialen {
  display: grid;
  flex: none;
  width: 2.8rem;
  height: 2.8rem;
  place-items: center;
  border-radius: 50%;
  background: var(--oliv-hell);
  color: var(--oliv-tief);
  font-size: 1rem;
  font-weight: 700;
}

.stimme__person strong {
  display: block;
  line-height: 1.3;
}

.stimme__person span {
  color: var(--text-weich);
  font-size: 0.95rem;
}

/* ---------- Logo im Kasten „Wofür CSC steht“ ---------- */
.csc-box__logo {
  width: min(300px, 80%);
  height: auto;
  margin: 0 auto 0.5rem;
}
/* ---------- Kundenstimme mit Foto ---------- */
.stimme-raster {
  display: grid;
  gap: clamp(2.75rem, 5vw, 3.5rem);
  align-items: center;
  max-width: 68rem;
  margin: 0 auto;
}

.stimme-raster .stimme {
  margin: 0;
}

.stimme-foto {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}

.stimme-foto img {
  aspect-ratio: 4 / 5;
}

@media (min-width: 900px) {
  .stimme-raster {
    grid-template-columns: 0.62fr 1.38fr;
  }

  .stimme-foto {
    max-width: 340px;
  }
}

@media (max-width: 899.98px) {
  .stimme-foto {
    max-width: 280px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 1rem;
  }
}
/* Hinweis auf die Google-Bewertungen unter der Kundenstimme */
.stimme__google {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1rem;
  margin: 2.75rem auto 0;
  color: var(--text-weich);
  text-align: center;
}