/* ==========================================================================
   KD Strukturwerkstatt — Startseite
   Markenwelt: Weiß (Hauptfarbe), Beige #F4EFE8, Sand #D8C8B8,
   Anthrazit #333333, Gold #B89B5E
   Schrift: Cormorant Garamond (Display), Montserrat (Fließtext)
   ========================================================================== */

/* ---- Fonts (selbst gehostet, DSGVO-konform) ---- */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-italic-latin.woff2") format("woff2");
}

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

/* ---- Tokens ---- */

:root {
  --white: #ffffff;
  --beige: #f4efe8;
  --sand: #d8c8b8;
  --ink: #333333;
  --ink-soft: #5b564e;
  --gold: #b89b5e;
  --gold-deep: #7e6636;
  --gold-pale: #e6dcc8;
  --dark: #2e2b26;
  --dark-text: #efe9df;
  --dark-muted: #c9bfae;

  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-body: "Montserrat", "Segoe UI", Arial, sans-serif;

  /* Kleine Typo-Stufen: sichtbare Schritte, keine Beinahe-Dubletten */
  --fs-label: 0.78rem;
  --fs-button: 0.875rem;
  --fs-body-sm: 0.95rem;
  --fs-body: 1.0625rem;
  --fs-title-sm: 1.45rem;
  --fs-title: 1.6rem;
  --fs-monogram: 1.9rem;
  --fs-numeral: 3.6rem;

  /* Radien: Außenkante, genestete Innenkante, Chip */
  --radius: 4px;
  --radius-inner: 3px;
  --radius-sm: 2px;

  --measure: 62ch;
  --gutter: clamp(1.5rem, 5vw, 3rem);
  --section-y: clamp(4.5rem, 10vw, 8rem);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Reset & Grundlagen ---- */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
}

a {
  color: var(--gold-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

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

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

::selection {
  background: var(--gold-pale);
  color: var(--ink);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--white);
  padding: 0.75rem 1.25rem;
  font-size: var(--fs-button);
}

.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

.wrap {
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section {
  scroll-margin-top: 5.5rem;
}

/* ---- Buttons ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: var(--fs-button);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.05rem 2.1rem;
  border-radius: var(--radius-sm);
  transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out),
    border-color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.btn:active {
  transform: translateY(1px);
}

.btn-gold {
  background: var(--gold);
  color: #241f16;
  border: 1px solid var(--gold);
}

.btn-gold:hover {
  background: #a5884c;
  border-color: #a5884c;
}

.btn-line {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--sand);
}

.btn-line:hover {
  border-color: var(--gold);
  background: rgba(184, 155, 94, 0.08);
}

.btn-dark-line {
  background: transparent;
  color: var(--dark-text);
  border: 1px solid rgba(233, 222, 202, 0.35);
}

.btn-dark-line:hover {
  border-color: var(--gold);
  background: rgba(184, 155, 94, 0.14);
}

/* ---- Gold-Flourish (Linie · Raute · Linie) ---- */

.flourish {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.4rem;
}

.flourish::before,
.flourish::after {
  content: "";
  height: 1px;
  flex: 0 0 3.5rem;
  background: var(--gold);
  transform-origin: center;
}

.flourish .gem {
  width: 7px;
  height: 7px;
  background: var(--gold);
  transform: rotate(45deg);
  flex: none;
}

.flourish.center {
  justify-content: center;
}

.reveal-flourish .flourish::before,
.reveal-flourish .flourish::after {
  transform: scaleX(0);
}

.reveal-flourish.in .flourish::before,
.reveal-flourish.in .flourish::after {
  transform: scaleX(1);
  transition: transform 0.9s var(--ease-out) 0.15s;
}

.reveal-flourish .flourish .gem {
  opacity: 0;
}

.reveal-flourish.in .flourish .gem {
  opacity: 1;
  transition: opacity 0.6s var(--ease-out);
}

/* ---- Goldener Faden am linken Rand ----
   Landkarte statt Zierrat: eine durchgehende blasse Spur zeigt den ganzen
   Weg, der gefuellte Teil den Lesestand, die Rauten die Abschnitte, das
   Blatt den Standort. Die Marken sind echte Links, also mit Tastatur und
   Screenreader bedienbar; Spur, Fuellung und Blatt sind dekorativ. */

.spine {
  display: none;
}

.js .spine {
  --p: 0;
  --leaf-y: 0px;
  --leaf-scale: 1;
  display: block;
  position: fixed;
  left: clamp(0.75rem, 2.6vw, 2.5rem);
  top: 6rem;
  bottom: 2.5rem;
  width: 1px;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.9s var(--ease-out);
}

.js .spine.ready {
  opacity: 1;
}

/* Die ganze Strecke, blass */
.spine-track {
  position: absolute;
  inset: 0;
  background: var(--gold);
  opacity: 0.22;
  transition: opacity 0.35s var(--ease-out);
}

/* Der zurueckgelegte Teil, satt */
.spine-fill {
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleY(var(--p));
  transform-origin: top;
}

/* Abschnittsmarke: kleine Raute auf der Spur, grosszuegiges Ziel darum */
.spine-mark {
  position: absolute;
  left: 50%;
  top: 0;
  width: clamp(24px, 4vw, 40px);
  height: 44px;
  margin: 0;
  transform: translate(-50%, calc(var(--mark-y, 0px) - 22px));
  display: grid;
  place-items: center;
  pointer-events: auto;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* Skalierung statt Breitenwechsel: veraendert keine Layoutgeometrie */
.spine-mark .dot {
  width: 8px;
  height: 8px;
  background: var(--gold);
  opacity: 0.55;
  transform: rotate(45deg) scale(0.62);
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.spine-mark:hover .dot,
.spine-mark:focus-visible .dot,
.spine-mark[aria-current="true"] .dot {
  transform: rotate(45deg) scale(1);
  opacity: 1;
}

/* Name des Abschnitts, nur bei Annaeherung oder Tastaturfokus */
.spine-mark .label {
  position: absolute;
  left: 100%;
  white-space: nowrap;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  background: rgba(255, 255, 255, 0.92);
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-sm);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
  pointer-events: none;
}

.spine-mark:hover .label,
.spine-mark:focus-visible .label {
  opacity: 1;
  transform: translateX(0);
}

/* Kontur statt Vollflaeche: erst der Innenraum macht die Form bei dieser
   Groesse als Blatt lesbar — gefuellt bleibt es ein Goldsplitter. */
.spine-leaf {
  position: absolute;
  left: 50%;
  top: 0;
  width: clamp(16px, 4.2vw, 26px);
  height: auto;
  transform: translate(-50%, calc(var(--leaf-y) - 6px)) scale(var(--leaf-scale));
  transform-origin: 50% 20%;
  transition: transform 0.3s var(--ease-out);
}

.spine-leaf .blade,
.spine-leaf .rib {
  fill: none;
  stroke: var(--gold);
  vector-effect: non-scaling-stroke;
}

.spine-leaf .blade {
  stroke-width: 1.6px;
}

.spine-leaf .rib {
  stroke-width: 1.2px;
  opacity: 0.75;
}

/* Bei Annaeherung tritt der Faden hervor */
.js .spine:hover {
  --leaf-scale: 1.22;
}

.js .spine:hover .spine-track {
  opacity: 0.4;
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.site-header.scrolled {
  border-bottom-color: rgba(184, 155, 94, 0.35);
  box-shadow: 0 10px 30px -18px rgba(51, 49, 46, 0.25);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.5rem;
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--ink);
}

.wordmark .monogram {
  font-family: var(--font-display);
  font-size: var(--fs-monogram);
  font-weight: 600;
  color: var(--gold-deep);
  line-height: 1;
}

.wordmark .name {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.2vw, 2rem);
}

.main-nav a:not(.btn) {
  font-size: var(--fs-button);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ink);
  padding-block: 0.4rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
}

.main-nav a:not(.btn):hover {
  color: var(--gold-deep);
  border-bottom-color: var(--gold);
}

.main-nav .btn {
  padding: 0.7rem 1.4rem;
  font-size: var(--fs-label);
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--sand);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.7rem;
  cursor: pointer;
}

.nav-toggle .bars {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink);
  position: relative;
  transition: background-color 0.2s;
}

.nav-toggle .bars::before,
.nav-toggle .bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: var(--ink);
  transition: transform 0.3s var(--ease-out), top 0.3s var(--ease-out);
}

.nav-toggle .bars::before {
  top: -6px;
}

.nav-toggle .bars::after {
  top: 6px;
}

.nav-toggle[aria-expanded="true"] .bars {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .bars::before {
  top: 0;
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .bars::after {
  top: 0;
  transform: rotate(-45deg);
}

/* ---- Hero ---- */

.hero {
  position: relative;
  overflow: clip;
  background: var(--white);
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  padding-block: clamp(4rem, 9vw, 7.5rem);
}

.hero h1 {
  font-size: clamp(2.7rem, 5.6vw, 4.35rem);
  font-weight: 600;
}

.hero h1 .line {
  display: block;
}

.hero h1 em {
  font-style: italic;
  color: var(--gold-deep);
}

.hero .lede {
  max-width: var(--measure);
  margin-top: 1.75rem;
  color: var(--ink-soft);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 2.5rem;
}

.hero-phone {
  margin-top: 1.5rem;
  font-size: var(--fs-body-sm);
  color: var(--ink-soft);
}

.hero-phone a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
}

.hero-phone a:hover {
  color: var(--gold-deep);
}

/* Logo frei stehend, darunter der Claim — kein Rahmen um das Medaillon */

.hero-figure {
  justify-self: center;
  width: min(100%, 24rem);
  text-align: center;
}

.hero-logo-wrap {
  position: relative;
  display: block;
  width: min(100%, 21rem);
  margin-inline: auto;
}

.hero-logo {
  display: block;
  width: 100%;
}

/* Einmaliger Lichtstrahl über das Gold — auf die Logo-Silhouette maskiert */
.hero-logo-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    105deg,
    rgba(255, 250, 240, 0) 40%,
    rgba(255, 250, 240, 0.8) 50%,
    rgba(255, 250, 240, 0) 60%
  );
  background-size: 260% 100%;
  background-position: 150% 0;
  background-repeat: no-repeat;
  /* Maske auf die WebP-Fassung: identischer Alphakanal, 73 statt 699 KB. Das
     PNG war die einzige Stelle, die es noch in den Browser gezogen hat. */
  -webkit-mask-image: url("../assets/logo.webp");
  mask-image: url("../assets/logo.webp");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.hero-figure .claim {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.9rem, 3.2vw, 2.9rem);
  line-height: 1.15;
  color: var(--gold-deep);
  margin-top: 1.6rem;
}

/* Hero-Entrance (die eine inszenierte Bewegung der Seite) */

.js .hero [data-rise] {
  opacity: 0;
  transform: translateY(22px);
}

.js .hero.play [data-rise] {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}

.js .hero.play [data-rise="2"] {
  transition-delay: 0.12s;
}

.js .hero.play [data-rise="3"] {
  transition-delay: 0.24s;
}

.js .hero.play [data-rise="4"] {
  transition-delay: 0.36s;
}

.js .hero .hero-logo-wrap {
  opacity: 0;
  transform: translateY(26px) scale(0.985);
}

.js .hero.play .hero-logo-wrap {
  opacity: 1;
  transform: none;
  transition: opacity 1.1s var(--ease-out) 0.55s, transform 1.1s var(--ease-out) 0.55s;
}

/* Der Claim kommt als letzte Stimme */
.js .hero .hero-figure .claim {
  opacity: 0;
  transform: translateY(14px);
}

.js .hero.play .hero-figure .claim {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s var(--ease-out) 1.05s, transform 0.9s var(--ease-out) 1.05s;
}

/* Schlussakzent: das Gold fängt einmal Licht */
.js .hero.play .hero-logo-sheen {
  animation: sheen 1.5s var(--ease-out) 1.5s 1 both;
}

@keyframes sheen {
  0% {
    background-position: 150% 0;
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  100% {
    background-position: -50% 0;
    opacity: 0;
  }
}

/* ---- Vertrauensband ---- */

.trust-band {
  border-block: 1px solid rgba(184, 155, 94, 0.35);
  background: var(--white);
}

.trust-band ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 3.5rem;
  row-gap: 0.5rem;
  padding-block: 1.3rem;
}

.trust-band li {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* ---- Sektionen ---- */

.section {
  position: relative;
  padding-block: var(--section-y);
}

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

.section-head {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}

.section-head h2 {
  font-size: clamp(2.1rem, 3.6vw, 3rem);
}

.section-head .flourish {
  justify-content: center;
}

.section-head .sub {
  margin-top: 1.4rem;
  color: var(--ink-soft);
}

.section-body {
  margin-top: clamp(2.75rem, 6vw, 4.5rem);
}

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

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}

.portrait {
  justify-self: center;
  width: min(100%, 21rem);
  text-align: center;
}

/* Rundes Porträtfeld — nimmt die Kreisform des Logos auf */

.portrait-frame {
  position: relative;
  background: linear-gradient(170deg, #efe6d8 0%, var(--sand) 100%);
  border-radius: 50%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  box-shadow: 0 26px 50px -34px rgba(126, 102, 54, 0.55);
}

.portrait-frame::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 50%;
}

/* Das Foto fuellt den Kreis; die weisse Keyline darueber bleibt als Ring */
.portrait-frame img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}

.portrait figcaption {
  margin-top: 1.2rem;
  font-size: var(--fs-button);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.about-copy h2 {
  font-size: clamp(2.1rem, 3.6vw, 3rem);
}

.about-copy p {
  max-width: var(--measure);
  margin-top: 1.5rem;
  color: var(--ink-soft);
}

.about-copy p:first-of-type {
  margin-top: 2rem;
  color: var(--ink);
}

/* Muss .about-copy p schlagen, sonst gewinnen dessen Farbe und
   margin-top - die Signatur lief dadurch grau statt gold */
.about-copy .signature {
  margin-top: 2.25rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-title);
  color: var(--gold-deep);
}

/* Die Stimme im Fliesstext: nur der Claim selbst wechselt ins kursive
   Gold, der Satz drumherum bleibt Erzaehlung. Cormorant laeuft optisch
   kleiner als Montserrat, daher der Aufschlag auf 1.2em. */
.voice {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.2em;
  color: var(--gold-deep);
}

/* ---- Leistungen: Verzeichnis-Setzung ---- */

/* Ein Leistungsbereich: Kopf mit Stundensatz, darunter die Positionen */

.service-group + .service-group {
  margin-top: clamp(3rem, 6vw, 5rem);
}

.service-group-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem 2.5rem;
  align-items: end;
  padding-bottom: 1.35rem;
}

.service-group-head h3 {
  grid-column: 1;
  font-size: clamp(1.7rem, 2.6vw, 2.15rem);
}

.service-group-head .desc {
  grid-column: 1;
  margin-top: 0.7rem;
  max-width: 48ch;
  color: var(--ink-soft);
  font-size: var(--fs-body-sm);
}

/* Stundensatz: einmal am Bereich, nicht an jeder Zeile */
.rate {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3vw, 2.4rem);
  line-height: 1;
  white-space: nowrap;
}

.rate .unit {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: 400;
  color: var(--ink-soft);
}

.service-lines {
  border-top: 1px solid rgba(184, 155, 94, 0.4);
}

.service-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem 2.5rem;
  align-items: baseline;
  padding-block: clamp(1.35rem, 2.6vw, 1.9rem);
  border-bottom: 1px solid rgba(184, 155, 94, 0.4);
}

.service-line h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-title-sm);
  font-weight: 600;
  line-height: 1.12;
}

.service-line .desc {
  grid-column: 1;
  margin-top: 0.35rem;
  max-width: 54ch;
  color: var(--ink-soft);
  font-size: var(--fs-body-sm);
}

.service-line .price {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-family: var(--font-display);
  font-size: var(--fs-title);
  line-height: 1;
  white-space: nowrap;
}

.service-note {
  position: relative;
  margin-top: 1.35rem;
  padding-left: 1.5rem;
  max-width: 58ch;
  color: var(--ink-soft);
  font-size: var(--fs-body-sm);
}

.service-note::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
}

/* ---- Pakete: Beige-Felder am Fuss der Leistungen ---- */

.packages {
  margin-top: clamp(3rem, 6vw, 5rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.25rem);
}

.package {
  background: var(--beige);
  border-radius: var(--radius);
  padding: clamp(2rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
}

.package h3 {
  font-size: clamp(1.6rem, 2.4vw, 2rem);
}

.package .desc {
  margin-top: 0.8rem;
  color: var(--ink-soft);
  font-size: var(--fs-body-sm);
}

.package-items {
  display: grid;
  gap: 0.85rem;
  margin-top: 1.75rem;
}

.package-items li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--fs-body-sm);
}

.package-items li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
}

/* margin-top:auto haelt die Preise beider Felder auf einer Linie */
.package-price {
  margin-top: auto;
  padding-top: 1.75rem;
}

.package-price .amount {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1;
}

/* Das "ab" traegt sein Leerzeichen im Markup, damit der Betrag auch
   vorgelesen und kopiert als "ab 390 €" ankommt */
.package-price .from {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: 400;
  color: var(--ink-soft);
}

.package-price .detail {
  margin-top: 0.7rem;
  color: var(--ink-soft);
  font-size: var(--fs-body-sm);
}

.package .btn {
  margin-top: 1.75rem;
  align-self: start;
}

/* ---- Kanzlei Start: das breite dritte Feld ----
   Es laeuft ueber beide Spalten, aus zwei Gruenden. Inhaltlich: es ist das
   einzige Angebot der Seite fuer eine andere Zielgruppe - die Kanzlei, die
   fuer das Unternehmen arbeitet, nicht das Unternehmen selbst. Formal: als
   drittes Feld in einem Zweierraster haette es halbbreit und allein in der
   zweiten Reihe gestanden, und ein Waisenfeld liest sich als Layoutfehler.
   Gemessen wurde auch die Alternative, alle drei in eine Dreierreihe zu
   setzen: bei 256px Textbreite brechen die Buttons zweizeilig, die
   Beschreibung vierzeilig, und die drei Betraege stehen auf drei
   verschiedenen Hoehen - die Regel, dass die Preise eine Linie halten,
   waere gefallen. */
.package-wide {
  grid-column: 1 / -1;
}

/* Innen zweispaltig: Punkte links, Betrag und CTA rechts. Ohne diese
   Teilung wuerde das breite Feld die Leistungspunkte auf ueber 900px
   ziehen - Zeilen, die kein Auge mehr zurueckfindet. Die 19rem rechts
   sind gemessen, nicht gerundet: "Struktur-Check anfragen" braucht als
   Button 303px und brach bei 18.5rem (296px) auf zwei Zeilen; "Kanzlei
   Start anfragen" kommt mit 289px aus und passt erst recht. */
.package-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 19rem);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  margin-top: 1.75rem;
}

/* Sieben Punkte in einer Spalte waeren im breiten Feld eine Liste ohne
   Ende; zwei Spalten halten sie im Blickfeld. auto-fit statt fester Zwei,
   damit die Spalte selbst entscheidet: unter 17rem je Punkt zerfallen die
   laengeren Zeilen ("Vorbereitung zur weiteren Bearbeitung") in Stummel,
   dann ist eine Spalte die richtige Antwort - ohne eigenen Breakpoint. */
.package-wide .package-items {
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  column-gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: 0;
}

/* Im schmalen Feld schiebt margin-top:auto den Preis nach unten. Hier steht
   er oben in seiner eigenen Spalte, also faellt beides weg. */
.package-wide .package-price {
  margin-top: 0;
  padding-top: 0;
}

/* Der Button holt seinen Abstand aus .package .btn; im Seitenblock steht er
   direkt unter dem Betrag und braucht keine zweite Quelle dafuer. */
.package-side {
  display: flex;
  flex-direction: column;
  align-items: start;
}

.price-note {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.6rem;
  border-top: 1px solid rgba(184, 155, 94, 0.4);
  max-width: var(--measure);
  color: var(--ink-soft);
  font-size: var(--fs-body-sm);
}

.price-note p + p {
  margin-top: 0.55rem;
}

/* ---- Für wen ---- */

.audience {
  text-align: center;
}

.audience-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: 1.4rem;
  row-gap: 0.9rem;
  max-width: 56rem;
  margin-inline: auto;
}

.nowrap {
  white-space: nowrap;
}

.audience-list li {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3.2vw, 2.5rem);
  font-weight: 500;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 1.4rem;
}

/* Raute vor jedem Eintrag, nicht nur zwischen zweien. Als Trenner
   (li + li) fehlte sie beim ersten Eintrag - die Reihe begann nackt und
   las sich wie eine Aufzaehlung mit vergessenem ersten Marker. */
.audience-list li::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--gold);
  transform: rotate(45deg) translateY(-0.4em);
  flex: none;
}

/* ---- Warum ---- */

.reasons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.25rem) clamp(2rem, 4vw, 3.5rem);
  max-width: 66rem;
  margin-inline: auto;
}

.reason {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
}

.reason .mark {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--gold-deep);
  margin-top: 0.15rem;
}

.reason .mark svg {
  display: block;
}

.reason h3 {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.4;
}

.reason p {
  margin-top: 0.4rem;
  font-size: var(--fs-body-sm);
  color: var(--ink-soft);
}

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

.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3rem);
  max-width: 62rem;
  margin-inline: auto;
  counter-reset: step;
}

.step {
  position: relative;
  text-align: center;
  padding-top: 0.5rem;
}

.step .num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-numeral);
  line-height: 1;
  color: var(--gold-deep);
  display: block;
}

.step h3 {
  margin-top: 1.1rem;
  font-size: var(--fs-title-sm);
}

.step p {
  margin-top: 0.7rem;
  font-size: var(--fs-body-sm);
  color: var(--ink-soft);
  max-width: 30ch;
  margin-inline: auto;
}

.step + .step::before {
  content: "";
  position: absolute;
  top: 2rem;
  left: calc(-1 * clamp(1rem, 2vw, 1.5rem));
  width: clamp(2rem, 4vw, 3rem);
  height: 1px;
  background: var(--gold);
  transform: translateX(-50%);
}

/* ---- Kundenstimmen: Zitat-Zeilen im Duktus des Leistungsverzeichnisses ---- */

/* Zeilen statt Karten. Die beiden Stimmen sind sehr ungleich lang: bei Karten
   ist das ein Fehler, bei Zeilen ist es normal. Technik wie .service-lines /
   .service-line - Linie oben am Block, Linie unten an jeder Zeile, also N+1
   Linien ohne :last-child-Sonderfall. Alpha hier 0.5 statt 0.4, weil der
   Grund beige ist und nicht weiss. */

.testimonials {
  max-width: 58rem;
  margin-inline: auto;
  border-top: 1px solid rgba(184, 155, 94, 0.5);
}

.testimonial {
  margin: 0;
  padding-block: clamp(2rem, 4vw, 2.75rem);
  border-bottom: 1px solid rgba(184, 155, 94, 0.5);
}

.testimonial blockquote {
  margin: 0;
}

/* Der Schluesselsatz steht aufrecht in Ink. Kursives Gold ist Katjas Stimme -
   Hero-Claim, Signatur, "Struktur schafft Freiheit" -, und die Seite hat genau
   eine Handschrift. Eine Kundin darin wuerde die Unterscheidung aufloesen.
   Gewicht kommt aus Groesse und Position, dieselbe Regel wie bei den Preisen.
   Die Stufe ist die von .service-group-head h3, keine neue Typo-Stufe. */
.testimonial .key {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.6vw, 2.15rem);
  font-weight: 500;
  line-height: 1.2;
  max-width: 32ch;
  color: var(--ink);
}

/* .job ist Seitentext, kein Zitat, sieht aber gleich aus wie der zitierte
   Rest: beides ist die zweite Ebene der Zeile. Getrennt wird im Markup. */
.testimonial .rest,
.testimonial .job {
  margin-top: 1.1rem;
  max-width: 58ch;
  color: var(--ink-soft);
  font-size: var(--fs-body-sm);
}

.testimonial figcaption {
  margin-top: 1.4rem;
  font-size: var(--fs-button);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

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

.contact {
  background: var(--dark);
  color: var(--dark-text);
}

.contact .claim-script {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  color: var(--gold);
  text-align: center;
}

.contact h2 {
  font-size: clamp(2.3rem, 4.2vw, 3.4rem);
  text-align: center;
  margin-top: 1rem;
  color: #f7f3ec;
}

.contact .sub {
  max-width: 46rem;
  margin: 1.4rem auto 0;
  text-align: center;
  color: var(--dark-muted);
}

.contact-channels {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}

.channel {
  min-width: 16rem;
}

.channel .label {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

.channel a {
  display: inline-block;
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 4.5vw, 2.1rem);
  overflow-wrap: anywhere;
  font-weight: 500;
  color: #f7f3ec;
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 155, 94, 0.5);
  transition: color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}

.channel a:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.contact-address {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
  font-style: normal;
  color: var(--dark-muted);
  font-size: var(--fs-body-sm);
  line-height: 1.9;
}

.contact-address .who {
  color: #f7f3ec;
  font-weight: 600;
}

.contact-cta {
  margin-top: 2.5rem;
  text-align: center;
}

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

.site-footer {
  background: var(--dark);
  border-top: 1px solid rgba(233, 222, 202, 0.14);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.75rem;
  font-size: var(--fs-button);
  color: var(--dark-muted);
}

.footer-inner nav {
  display: flex;
  gap: 1.75rem;
}

.footer-inner a {
  color: var(--dark-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.footer-inner a:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* ---- Unterseiten (Impressum / Datenschutz) ---- */

.legal-main {
  padding-block: clamp(3.5rem, 8vw, 6rem);
}

.legal-main .wrap {
  max-width: 46rem;
}

.legal-main h1 {
  font-size: clamp(2.4rem, 5vw, 3.4rem);
}

/* Das Zeichen fuehrt die Seite an, aber es fuehrt sie nicht: linksbuendig
   zur Textspalte und klein genug, dass die H1 die groesste Stimme bleibt.
   Doppelte Klasse, weil .legal-main p sonst das margin-top zurueckholt. */
.legal-main .legal-logo {
  margin: 0 0 clamp(1.5rem, 3.5vw, 2.25rem);
  max-width: none;
}

.legal-main .legal-logo img {
  display: block;
  width: min(100%, 9.5rem);
}

.legal-main h2 {
  font-size: var(--fs-title);
  margin-top: 3rem;
}

.legal-main p,
.legal-main li {
  color: var(--ink-soft);
  max-width: var(--measure);
}

.legal-main p {
  margin-top: 1.1rem;
}

/* Die Raute ist der einzige Listenmarker der Seite. Hier stand
   list-style: square - ein unrotiertes Quadrat, also die eigene Regel um
   45 Grad verfehlt. Technik woertlich von .package-items li, damit es im
   Projekt genau ein Bullet-Muster gibt und nicht zwei aehnliche.
   top: 0.62em setzt die Raute auf die optische Mitte der ersten Zeile. Das
   ist hier nicht Kosmetik: die Gewerbeeintraege im Impressum laufen ueber
   mehrere Zeilen, vertikal zentriert waere die Raute mitten im Absatz. */
.legal-main ul {
  margin-top: 1.1rem;
  list-style: none;
}

.legal-main li {
  position: relative;
  padding-left: 1.5rem;
}

.legal-main li + li {
  margin-top: 0.6rem;
}

.legal-main li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
}

/* Ehrlicher Platzhalter fuer Angaben, die nicht erfunden werden duerfen.
   Stand schon einmal hier und wurde in da86eee entfernt, als alle Werte da
   waren - genau so ist er gedacht: er verschwindet wieder, sobald der echte
   Wert eintrifft. Gestrichelte Raender gibt es nirgends sonst auf der Seite,
   der Strich ist das Signal "noch nicht ausgefuellt". */
.legal-main .placeholder {
  background: var(--beige);
  border: 1px dashed var(--gold);
  border-radius: var(--radius-inner);
  padding: 0.05rem 0.45rem;
  color: var(--gold-deep);
  font-size: 0.92em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---- Reduced motion ---- */

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

  .js .hero [data-rise],
  .js .hero .hero-logo-wrap,
  .js .hero .hero-figure .claim {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hero-logo-sheen {
    display: none !important;
  }

  /* Die Landkarte bleibt — sie ist Navigation, nicht Zierde.
     Nur die weichen Uebergaenge entfallen. */
  .js .spine,
  .js .spine * {
    transition: none !important;
  }

  .js .spine {
    opacity: 1 !important;
  }

  .reveal-flourish .flourish::before,
  .reveal-flourish .flourish::after,
  .reveal-flourish .flourish .gem {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }

  .btn,
  .main-nav a {
    transition: none !important;
  }
}

/* ---- Responsive ---- */

@media (max-width: 56rem) {
  .hero-inner {
    grid-template-columns: 1fr;
    padding-block: clamp(3rem, 8vw, 5rem);
  }

  .hero-figure {
    margin-top: clamp(2.5rem, 7vw, 3.5rem);
  }

  .hero-logo-wrap {
    width: min(62%, 17rem);
  }

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

  .portrait {
    width: min(65%, 17rem);
  }

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

  /* Das breite Feld verliert hier seine Innenteilung: einspaltig bleiben der
     rechten Spalte keine 18.5rem, der Betrag stuende gequetscht neben
     halbierten Leistungspunkten. Der Preis sitzt dann wieder unter den
     Punkten, also kommt sein Abstand zurueck. Die Punkteliste braucht keine
     Regel - ihr auto-fit klappt von selbst auf eine Spalte. */
  .package-body {
    grid-template-columns: 1fr;
  }

  .package-wide .package-price {
    padding-top: 1.75rem;
  }

  .service-group-head {
    grid-template-columns: 1fr;
  }

  /* Stundensatz rutscht unter den Bereichstitel statt daneben */
  .rate {
    grid-column: 1;
    grid-row: auto;
    margin-top: 0.9rem;
  }

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

  .steps {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    max-width: 26rem;
  }

  .step + .step::before {
    display: none;
  }
}

/* Navigation klappt frueher ein: darunter passt die volle Leiste nicht mehr.
   Gemessen, nicht geschaetzt: mit "Rezensionen" braucht die Leiste
   Wortmarke 247px + 5 Abstaende + 605px Navigationsbreite + 2x48px Gutter,
   das geht sich erst ab ~1092px auf. 70rem laesst dazu noch Luft zwischen
   Wortmarke und erstem Link, statt sie auf den Mindestabstand zu pressen. */
@media (max-width: 70rem) {
  .nav-toggle {
    display: block;
  }

  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid rgba(184, 155, 94, 0.35);
    box-shadow: 0 24px 40px -24px rgba(51, 49, 46, 0.3);
    padding: 0.5rem var(--gutter) 1.5rem;
    display: none;
  }

  .main-nav.open {
    display: flex;
  }

  /* Unterseiten: statische Nav ohne Toggle bleibt sichtbar */
  .main-nav.open-static {
    display: flex;
    position: static;
    flex-direction: row;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
  }

  .main-nav.open-static a:not(.btn) {
    border-bottom: 1px solid transparent;
    padding-block: 0.4rem;
  }

  .main-nav a:not(.btn) {
    padding-block: 0.9rem;
    border-bottom: 1px solid var(--beige);
  }

  .main-nav .btn {
    margin-top: 1rem;
  }
}

@media (max-width: 47rem) {
  .reasons {
    grid-template-columns: 1fr;
    max-width: 26rem;
  }

  .service-items {
    grid-template-columns: 1fr;
  }

  .hero-actions .btn {
    flex: 1 1 100%;
  }

  .trust-band ul {
    column-gap: 1.75rem;
  }

  .audience-list li {
    gap: 0.9rem;
  }

  .audience-list {
    column-gap: 0.9rem;
  }
}