@font-face {
  font-family: Heading;
  src: url('assets/heading.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: Body;
  src: url('assets/body.woff2') format('woff2');
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
}
:root {
  --berry: #913460;
  --berry-deep: #74294d;
  --berry-28: #e0c6d3;
  --berry-12: #f2e7ed;
  --ink: #383638;
  --muted: #626063;
  --paper: #fff;
  --soft: #f5f4f4;
  --line: #ded8db;
  --max: 1180px;
  --gutter: 112px;
  /* Abschnittsrhythmus: drei Stufen statt einem Wert */
  --pad-s: 76px;
  --pad-m: 108px;
  --pad-l: 140px;
  --header-h: 92px;
  --sticky-top: 122px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 19px/1.7 Body, 'Open Sans', Arial, sans-serif; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 5px; }
a:hover { color: var(--berry); }
button, input, textarea { font: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--berry); outline-offset: 5px; }
h1, h2, h3, p, figure, ul, ol, blockquote { margin: 0; }
h1, h2, h3 { font-family: Heading, 'Arial Narrow', Arial, sans-serif; font-weight: 650; line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
h1, h2 { font-weight: 700; }
h1 { font-weight: 760; }
h1 { font-size: clamp(44px, 4.2vw, 60px); }
h2 { font-size: clamp(36px, 4vw, 54px); max-width: 15ch; }
h3 { font-size: clamp(26px, 2.4vw, 32px); }
.wrap { max-width: var(--max); width: calc(100% - var(--gutter)); margin-inline: auto; }
.narrow { max-width: 760px; }
.section { padding-block: var(--pad-m); }
.prose p + p { margin-top: 24px; }
.emphasis { font-weight: 600; }
/* Anker im Fließtext: kräftig genug zum Hängenbleiben, nicht so fett, dass der Absatz zerfällt. */
strong { font-weight: 650; }
.sticky { position: sticky; top: var(--sticky-top); }

/* ---------- Kopf ---------- */
.header-bar { position: sticky; top: 0; z-index: 30; background: var(--paper); border-bottom: 1px solid transparent; }
.site-header { min-height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand { width: 250px; flex-shrink: 0; display: flex; }
.brand img { width: 100%; }
.site-header nav { display: flex; gap: 28px; align-items: center; }
.site-header nav a { text-decoration: none; font-size: 14px; font-weight: 600; padding: 12px 0; }
.site-header nav .nav-cta { color: var(--berry); }
.skip-link { position: absolute; top: -100px; left: 20px; z-index: 40; background: white; padding: 12px; }
.skip-link:focus { top: 15px; }

/* ---------- Hero ---------- */
/* Der Hero lief früher nur bis 1600 px, während das Stimmen-Band darunter den
   Fensterrand erreichte. Jetzt läuft alles randlos. Damit das Porträt auf
   breiten Schirmen nicht zum Streifen wird, wächst die Höhe mit. */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--soft); }
.hero-photo { position: absolute; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.hero-inner { min-height: 660px; display: flex; align-items: center; }
.hero-copy { width: 49%; padding-block: 58px; transform: translateY(12px); }
.hero h1 { color: var(--berry); max-width: none; }
.hero h1 span { color: var(--ink); }
.signature { max-width: 500px; margin-top: 10px; font-family: Heading, Arial, sans-serif; font-size: 23px; font-weight: 600; line-height: 1.24; letter-spacing: -.01em; }
.hero-intro { max-width: 440px; margin-top: 14px; font-size: 18px; line-height: 1.7; }
.audience { max-width: 410px; margin-top: 14px; font-size: 14px; color: var(--muted); line-height: 1.65; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 32px; padding: 14px 25px; color: white; background: var(--berry); border: 1px solid var(--berry); text-decoration: none; font-size: 15px; font-weight: 700; cursor: pointer; min-height: 52px; }
.button:hover { background: var(--berry-deep); color: white; }
.button:disabled { opacity: .65; cursor: wait; }
.button span { font-size: 22px; font-weight: 400; line-height: 1; }
.button-light { background: white; color: var(--berry); border-color: white; }
.button-light:hover { background: var(--berry-12); color: var(--berry); }
.hero .button { margin-top: 28px; }

/* ---------- Stimmen-Streifen ---------- */
.proof { background: var(--soft); padding-block: 54px; }
.proof-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.proof blockquote { font-family: Heading, Arial, sans-serif; font-size: 22px; line-height: 1.32; font-weight: 500; }
.proof figcaption { margin-top: 14px; font-size: 13px; line-height: 1.55; }
.proof figcaption strong { display: block; color: var(--berry); }
.proof figcaption span { color: var(--muted); }
.proof-note { margin-top: 36px; font-size: 13px; color: var(--muted); }
.proof-note a { font-weight: 600; color: var(--ink); }

/* ---------- Muster A: schmale Spalte ---------- */
.situation { padding-block: var(--pad-l); }
.situation h2 { color: var(--berry); margin-bottom: 40px; max-width: 18ch; }
.pullquote { font-family: Heading, Arial, sans-serif; font-size: clamp(26px, 2.8vw, 34px); font-weight: 600; line-height: 1.22; color: var(--berry); border-left: 3px solid var(--berry); padding-left: 30px; margin-block: 44px; }

/* ---------- Muster B: asymmetrisch mit klebender Spalte ---------- */
.split { display: grid; grid-template-columns: 340px 1fr; grid-template-rows: auto 1fr auto; column-gap: 90px; }
.split > * { min-width: 0; }
.split-aside { grid-column: 1; grid-row: 1 / 3; }
.split-head { grid-column: 2; grid-row: 1; }
.split-main { grid-column: 2; grid-row: 2; }
/* Persönliche Notiz, kein Leistungsraster: eine Trennlinie für den ganzen
   Block statt einer je Spalte, Titel statt Überschriften, Lead im Fließtext. */
.split-foot { grid-column: 1 / -1; grid-row: 3; margin-top: 58px; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, .35); }
.sources-title { font-family: Heading, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.2; }
.sources { display: grid; grid-template-columns: repeat(3, 1fr); gap: 46px; margin-top: 22px; }
/* Zeichnungen statt Piktogramme: gleiche Höhe, unterschiedliche Breite, kein
   Rahmen und keine Fläche darunter. Zurückgenommen, damit der Block eine
   persönliche Notiz bleibt und nicht doch wie ein Leistungsraster wirkt. */
.source svg { display: block; height: 44px; width: auto; margin-bottom: 16px; color: rgba(255, 255, 255, .62); }
.sources p { font-size: 16px; line-height: 1.7; }
.sources strong { font-weight: 650; }
.split-foot .text-link { margin-top: 42px; }
.about { background: var(--berry); color: white; padding-block: var(--pad-m); }
.about h2 { font-size: clamp(40px, 4vw, 56px); color: white; max-width: none; margin-bottom: 30px; }
.aloha { display: inline-block; font-size: clamp(56px, 5.2vw, 74px); letter-spacing: -.025em; margin-bottom: 12px; }
.about .lead { font-family: Heading, Arial, sans-serif; font-size: 27px; font-weight: 500; line-height: 1.22; margin-bottom: 26px; }
.about-quote { border-top: 2px solid rgba(255, 255, 255, .55); padding-top: 24px; }
.about-quote blockquote { font-family: Heading, Arial, sans-serif; font-size: 26px; font-weight: 500; line-height: 1.24; }
.about-quote figcaption { margin-top: 16px; font-size: 13px; font-weight: 600; }
.about-quote figcaption span { font-weight: 400; color: rgba(255, 255, 255, .7); }
.facts { list-style: none; padding: 0; margin-top: 30px; font-size: 14px; line-height: 1.5; }
.facts li { padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .35); }
.facts li + li { margin-top: 12px; }
.text-link { display: inline-block; margin-top: 28px; font-size: 15px; font-weight: 600; color: var(--berry); }
.text-link span { margin-left: 15px; }
.about .text-link, .about a:hover { color: white; }
.about a:focus-visible { outline-color: white; }

/* ---------- Begleitung: nummerierter Bogen ---------- */
.section-heading { margin-bottom: 56px; }
.section-heading > p { max-width: 560px; margin-top: 26px; }
.section-heading.duo { display: grid; grid-template-columns: 1.15fr 1fr; align-items: end; gap: 70px; }
.section-heading.duo > p { margin: 0; }
.steps { list-style: none; padding: 0; }
.step { display: grid; grid-template-columns: 300px 1fr; gap: 70px; border-top: 2px solid var(--berry); padding-block: 42px; }
.step > * { min-width: 0; }
.step:last-child { border-bottom: 2px solid var(--berry); }
.step-no { font-family: Heading, Arial, sans-serif; font-size: 62px; font-weight: 650; line-height: 1; color: var(--berry-28); letter-spacing: -.03em; margin-bottom: 6px; }
.step h3 { color: var(--berry); }
.step-lead { font-family: Heading, Arial, sans-serif; font-size: 25px; font-weight: 500; line-height: 1.3; max-width: 30ch; }
.step-note { margin-top: 20px; max-width: 62ch; font-size: 17px; line-height: 1.65; }
/* Honigtopf gegen Formular-Bots: für Menschen unsichtbar, nicht per Tab erreichbar. */
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.asks { list-style: none; padding: 0; margin-top: 28px; max-width: 62ch; }
.asks li { position: relative; padding-left: 30px; }
.asks li + li { margin-top: 14px; }
.asks li::before { content: ""; position: absolute; left: 0; top: .72em; width: 16px; height: 2px; background: var(--berry); }
.asks strong { font-weight: 650; }
.diagram { margin-top: 30px; max-width: 520px; }
.diagram svg { width: 100%; height: auto; display: block; }
.diagram text { font-family: Body, 'Open Sans', Arial, sans-serif; font-size: 15px; font-weight: 600; }
details { margin-top: 28px; max-width: 62ch; border-top: 1px solid var(--line); }
summary { padding-top: 18px; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--berry); list-style: none; display: flex; align-items: center; gap: 12px; }
summary::-webkit-details-marker { display: none; }
summary::before { content: "+"; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid var(--berry); font-size: 17px; font-weight: 400; flex-shrink: 0; }
details[open] summary::before { content: "–"; }
details .prose { padding-top: 20px; }
.delivery { margin-top: 48px; max-width: 700px; margin-left: auto; }
.delivery-lead { font-weight: 600; }
.delivery > p:last-child { margin-top: 22px; font-size: 18px; color: var(--muted); }
.tags { list-style: none; padding: 0; margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; }
.tags li { border: 1px solid var(--berry); color: var(--berry); padding: 7px 15px; font-size: 14px; font-weight: 600; }

/* ---------- Muster C: Reihen ---------- */
.fit { background: var(--soft); padding-block: var(--pad-s); }
.fit h2 { color: var(--berry); }
.fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; }
.fit-col h3 { font-size: 24px; margin-bottom: 24px; }
.fit-col ul { list-style: none; padding: 0; font-size: 18px; }
.fit-col li { position: relative; padding-left: 34px; }
.fit-col li + li { margin-top: 16px; }
.fit-yes li::before { content: ""; position: absolute; left: 4px; top: .34em; width: 8px; height: 15px; border: solid var(--berry); border-width: 0 2px 2px 0; transform: rotate(42deg); }
.fit-no { color: var(--muted); }
.fit-no h3 { color: var(--muted); }
.fit-no li::before { content: ""; position: absolute; left: 0; top: .72em; width: 16px; height: 2px; background: #a9a4a7; }

.cta-band { background: var(--berry); color: white; padding-block: 44px; }
.cta-band .wrap { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.cta-band p { font-family: Heading, Arial, sans-serif; font-size: clamp(25px, 2.6vw, 33px); font-weight: 600; line-height: 1.2; }
.cta-band a:focus-visible { outline-color: white; }

.start { padding-block: var(--pad-m); }
.start h2 { color: var(--berry); }
.start-steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; }
.start-steps > li { border-top: 2px solid var(--berry); padding-top: 24px; }
.start-steps h3 { font-size: 25px; margin-block: 10px 14px; }
.start-steps p:last-child { font-size: 17px; color: var(--muted); line-height: 1.65; }

/* ---------- Kundenstimmen als Karten ---------- */
.testimonials { background: var(--soft); padding-block: var(--pad-m); }
.testimonials h2 { color: var(--berry); }
.voices { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; align-items: start; }
.voice { background: var(--paper); border: 1px solid var(--line); padding: 30px 28px; display: flex; flex-direction: column; }
.voice figcaption { order: -1; margin-bottom: 18px; }
.voice figcaption strong { display: block; color: var(--berry); font-family: Heading, Arial, sans-serif; font-weight: 600; font-size: 23px; line-height: 1.15; }
.voice figcaption span { display: block; margin-top: 8px; font-size: 12px; line-height: 1.6; color: var(--muted); }
.voice blockquote { font-family: Heading, Arial, sans-serif; font-size: 18px; line-height: 1.52; font-weight: 400; }
.js .voice.is-clamped blockquote { display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.voice-toggle { align-self: flex-start; margin-top: 18px; background: none; border: 0; padding: 0; color: var(--berry); font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Kontakt und Fuß ---------- */
/* Eigenes Band, damit der graue Grund bis zum Fensterrand läuft und nicht
   als 1180 px breiter Kasten in der Seite steht. */
.contact-band { background: var(--soft); }
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; }
.contact h2 { color: var(--berry); }
.contact-copy > p { margin-top: 30px; }
.direct-contact { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; margin-top: 32px; font-size: 15px; }
.direct-contact a { overflow-wrap: anywhere; }
.location { margin-top: 26px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.form-intro { font-family: Heading, Arial, sans-serif; font-size: 29px; font-weight: 600; line-height: 1.3; margin-bottom: 25px; }
label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 7px; }
input:not([type=hidden]), textarea { width: 100%; border: 1px solid #aaa1a6; border-radius: 0; background: white; padding: 10px 12px; margin-bottom: 20px; color: var(--ink); min-height: 48px; }
textarea { resize: vertical; min-height: 150px; }
.privacy-note { font-size: 12px; line-height: 1.7; color: var(--muted); margin-bottom: 22px; }
#form-status { font-size: 14px; line-height: 1.6; margin-top: 20px; }
#form-status:empty { display: none; }
#form-status[data-state=error] { color: #8a2636; }
#form-status[data-state=success] { color: #306040; }
.site-footer { display: flex; justify-content: space-between; gap: 25px; align-items: center; border-top: 1px solid var(--line); padding-block: 28px; font-size: 12px; }
.site-footer p span { color: var(--muted); }
.site-footer nav { display: flex; gap: 24px; }
.legal { max-width: 800px; padding-block: 65px 100px; overflow-wrap: anywhere; }
.legal h1 { color: var(--berry); margin-bottom: 40px; font-size: 56px; }
.legal h2 { font-size: 32px; margin: 36px 0 18px; max-width: none; }
.legal h3 { font-size: 24px; margin: 28px 0 14px; }
.legal h4 { font-size: 18px; margin: 24px 0 12px; }
.legal p { margin-bottom: 18px; }
.legal li { margin-bottom: 12px; }

/* Kopfoberkante auf die Oberkante der H1 ziehen.
   Bei object-fit: cover wächst das Bild mit der Fensterbreite, der Kopf wandert
   also mit. Ein fester Prozentwert hält die Ausrichtung deshalb nur bei genau
   einer Breite. Mit einer Länge statt eines Prozentwerts misst object-position
   vom oberen Rand aus, unabhängig vom Überstand:
     104px  = gemessene Oberkante der H1 im Hero. Ändert sich, sobald sich
              der Textblock verschiebt oder seine Höhe ändert, etwa durch
              einen anderen Abstand zur Signaturzeile. Dann neu messen.
     18.43vw = Kopfoberkante innerhalb des Bildes
               (30,14 % der Bildhöhe, Bildhöhe = 61,143 % der Fensterbreite)
   Unterhalb von 1360 px reicht die Bildhöhe dafür nicht aus, dort entstünde
   unten eine Lücke. Deshalb greift die Rechnung erst darüber. */
@media (min-width: 1051px) and (max-width: 1359px) {
  /* Hier reicht die Bildhöhe nicht für die volle Ausrichtung. 100 % schiebt das
     Bild so weit nach oben, wie es geht, ohne unten eine Lücke zu lassen. */
  .hero-photo { object-position: 50% 100%; }
}
@media (min-width: 1360px) {
  .hero-photo { object-position: 50% calc(104px - 18.43vw); }
}
@media (max-width: 1050px) {
  :root { --gutter: 64px; --pad-s: 64px; --pad-m: 84px; --pad-l: 96px; --sticky-top: 112px; }
  .site-header nav { gap: 18px; }
  .brand { width: 210px; }
  .hero-inner { min-height: 640px; }
  .hero-copy { width: 51%; }
  .hero h1 { font-size: 46px; }
  .hero-photo { object-position: 55% center; }
  .split { grid-template-columns: 260px 1fr; column-gap: 48px; }
  .about-quote blockquote { font-size: 23px; }
  .step { grid-template-columns: 220px 1fr; gap: 40px; }
  .step-no { font-size: 50px; }
  .fit-grid { gap: 44px; }
  .start-steps { gap: 36px; }
  .aloha { font-size: 62px; }
}
@media (max-width: 800px) {
  :root { --gutter: 40px; --pad-s: 56px; --pad-m: 68px; --pad-l: 72px; }
  .header-bar { position: static; }
  html { scroll-padding-top: 16px; }
  .site-header { padding-block: 20px; min-height: 0; flex-direction: column; align-items: flex-start; gap: 15px; }
  .brand { width: 210px; }
  .site-header nav { width: 100%; justify-content: space-between; gap: 10px; }
  .site-header nav a { font-size: 12px; padding: 8px 0; }
  .hero { display: flex; flex-direction: column; }
  .hero-photo { position: relative; order: 0; height: 280px; object-fit: cover; object-position: 75% 62%; z-index: 0; }
  .hero-inner { min-height: 0; order: 1; }
  .hero-copy { width: 100%; padding-block: 34px 42px; }
  .hero h1 { font-size: clamp(40px, 7vw, 54px); max-width: 570px; }
  .signature { font-size: 21px; max-width: 520px; }
  .hero-intro { max-width: 520px; }
  .audience { max-width: 440px; }
  .hero .button { margin-top: 24px; }
  .proof { padding-block: 40px; }
  .proof-list { grid-template-columns: 1fr; gap: 30px; }
  .proof-list > li + li { border-top: 1px solid var(--line); padding-top: 30px; }
  .proof blockquote { font-size: 21px; }
  .proof-note { margin-top: 28px; }
  .pullquote { padding-left: 22px; margin-block: 34px; }
  .split, .fit-grid, .contact, .section-heading.duo { grid-template-columns: 1fr; gap: 32px; }
  /* Mobil zuerst die Überschrift, dann Porträt und Eckdaten, dann der Text. */
  .split { grid-template-rows: none; }
  .split-aside, .split-head, .split-main, .split-foot { grid-column: auto; grid-row: auto; }
  .split-head { order: -1; }
  .split-foot { margin-top: 8px; }
  .sources { grid-template-columns: 1fr; gap: 26px; }
  .sticky { position: static; }
  .facts { margin-top: 24px; }
  .about h2 { font-size: 40px; margin-bottom: 22px; }
  .aloha { font-size: clamp(56px, 10vw, 68px); margin-bottom: 6px; }
  .about .lead { font-size: 25px; }
  .section-heading { margin-bottom: 36px; }
  .step { grid-template-columns: 1fr; gap: 18px; padding-block: 30px; }
  .step-aside .sticky { display: flex; align-items: baseline; gap: 16px; }
  .step-no { margin-bottom: 0; font-size: 40px; }
  .step-lead { font-size: 23px; max-width: none; }
  /* Die Grafik wird mitskaliert – Beschriftung deshalb in viewBox-Einheiten anheben. */
  .diagram text { font-size: 23px; }
  .delivery { margin-top: 36px; }
  .start-steps { grid-template-columns: 1fr; gap: 28px; }
  .cta-band .wrap { flex-direction: column; align-items: flex-start; gap: 22px; }
  .voices { grid-template-columns: 1fr; gap: 18px; }
  .voice { padding: 26px 24px; }
  .contact { gap: 44px; }
  .site-footer { align-items: flex-start; flex-direction: column; gap: 16px; }
  .legal { padding-top: 40px; }
  body { font-size: 18px; }
}
@media (max-width: 380px) {
  :root { --gutter: 32px; }
  .site-header nav { gap: 6px; }
  .site-header nav a { font-size: 11px; }
  .hero h1 { font-size: 36px; }
  .contact h2 { font-size: 36px; }
  .step-no { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

[hidden] { display: none !important; }