/* ============================================================================
   Herzhöhe — Bausteine
   Statische Umsetzung der Komponenten aus
   .claude/skills/herzhoehe-design/Herzhöhe Design System/components/
   Alle Werte kommen aus tokens.css. Kein Hex steht hier hart drin.
   ========================================================================== */

/* ---------- Hilfen ------------------------------------------------------- */

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:10;
  background:var(--ink-900);color:var(--cream-100);
  font:var(--type-button);letter-spacing:.16em;text-transform:uppercase;
  padding:14px 22px;
}
.skip-link:focus{left:0;color:var(--cream-100)}

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

.eyebrow{
  font:var(--type-eyebrow);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--text-muted);
}

.icon{display:block;flex:none}

/* ---------- Section ------------------------------------------------------ */

.section{padding:var(--section-y-tight) var(--gutter)}
.section--sm{padding-top:var(--space-7);padding-bottom:var(--space-7)}
.section--lg{padding-top:var(--section-y);padding-bottom:var(--section-y)}

.section--page   {background:var(--surface-page);color:var(--text-body)}
.section--raised {background:var(--surface-raised);color:var(--text-body)}
.section--lilac  {background:var(--lilac-200);color:var(--text-body)}
.section--lilacSoft{background:var(--lilac-100);color:var(--text-body)}
.section--cream  {background:var(--cream-300);color:var(--text-body)}
.section--ink    {background:var(--ink-900);color:var(--text-invert)}
.section--acid   {background:var(--acid-500);color:var(--ink-900)}

.section__inner{max-width:var(--page-max);margin:0 auto}

/* ---------- AccentBand --------------------------------------------------- */

.band{height:26px;background:var(--acid-500)}
.band--lilac{background:var(--lilac-200)}
.band--ink{background:var(--ink-900)}

/* ---------- Wordmark ----------------------------------------------------- */

.wordmark{display:block;text-align:left;text-decoration:none}
.wordmark__name{
  display:block;font-family:var(--font-display);font-weight:400;
  line-height:1;letter-spacing:-0.005em;color:currentColor;
}
.wordmark__tagline{
  display:block;font-family:var(--font-sans);font-weight:500;
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:currentColor;opacity:.62;
}
.wordmark--nav .wordmark__name{font-size:26px}
.wordmark--footer .wordmark__name{font-size:30px}
.wordmark--footer .wordmark__tagline{margin-top:10px;font-size:10px}
a.wordmark:hover{color:inherit}

/* ---------- Button ------------------------------------------------------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-sans);font-weight:500;text-transform:uppercase;
  text-decoration:none;border-radius:var(--radius-pill);cursor:pointer;
  padding:15px 30px;font-size:13px;letter-spacing:.16em;line-height:1;
  border:1px solid transparent;
  transition:background var(--dur-base) var(--ease-out),
             color var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),
             transform var(--dur-fast) var(--ease-out);
}
.btn:active{transform:scale(.98)}
.btn:disabled,
.btn[aria-disabled="true"]{opacity:.4;cursor:not-allowed;pointer-events:none}
.btn--sm{padding:10px 20px;font-size:12px;letter-spacing:.14em}
.btn--lg{padding:19px 38px;font-size:14px}

.btn--primary{background:var(--ink-900);color:var(--cream-100);border-color:var(--ink-900)}
.btn--primary:hover{background:var(--ink-700);border-color:var(--ink-700);color:var(--cream-100)}

.btn--accent{background:var(--acid-500);color:var(--ink-900);border-color:var(--acid-500)}
.btn--accent:hover{background:var(--acid-600);border-color:var(--acid-600);color:var(--ink-900)}

.btn--secondary{background:transparent;color:var(--ink-900);border-color:var(--border-strong)}
.btn--secondary:hover{background:var(--ink-900);border-color:var(--ink-900);color:var(--cream-100)}

.btn--invert{background:var(--cream-100);color:var(--ink-900);border-color:var(--cream-100)}
.btn--invert:hover{background:var(--white);border-color:var(--white);color:var(--ink-900)}

.btn--ghost{
  background:transparent;color:var(--ink-900);border:0;border-radius:0;
  padding:0 0 6px;border-bottom:1px solid var(--border-strong);
  position:relative;
}
.btn--ghost:hover{color:var(--acid-700)}

/* ---------- Tag ---------------------------------------------------------- */

.tag{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 22px;border-radius:var(--radius-pill);
  font-family:var(--font-sans);font-weight:500;font-size:12px;
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;white-space:nowrap;
  border:1px solid transparent;
}
.tag--sm{padding:6px 14px;font-size:11px}
.tag--cream{background:var(--cream-050);color:var(--ink-900)}
.tag--lilac{background:var(--lilac-200);color:var(--ink-900)}
.tag--acid{background:var(--acid-500);color:var(--ink-900)}
.tag--ink{background:var(--ink-900);color:var(--cream-100)}
.tag--outline{background:transparent;color:var(--ink-900);border-color:var(--border-strong)}

/* ---------- ImageFrame --------------------------------------------------- */

.frame{margin:0;position:relative}
.frame__offset{
  position:absolute;inset:0;z-index:0;background:var(--acid-500);
}
.frame--offset-left  > .frame__offset{transform:translate(-22px,22px)}
.frame--offset-right > .frame__offset{transform:translate(22px,22px)}
.frame--offset-acid  > .frame__offset{background:var(--acid-500)}
.frame--offset-lilac > .frame__offset{background:var(--lilac-200)}
.frame--offset-cream > .frame__offset{background:var(--cream-300)}

.frame__box{
  position:relative;z-index:1;overflow:hidden;background:var(--cream-300);
  border-radius:var(--radius-none);
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:3 / 4;
}
.frame--4-5 .frame__box{aspect-ratio:4 / 5}
.frame--4-3 .frame__box{aspect-ratio:4 / 3}
.frame--1-1 .frame__box{aspect-ratio:1 / 1}
.frame--16-9 .frame__box{aspect-ratio:16 / 9}

.frame__box img{
  width:100%;height:100%;object-fit:cover;
  filter:var(--photo-grade-warm);
}
.frame--soft  .frame__box img{filter:var(--photo-grade-soft)}
.frame--quiet .frame__box img{filter:var(--photo-grade-quiet)}
.frame--mono  .frame__box img{filter:var(--photo-grade-mono)}

/* ---------- SectionHeading ----------------------------------------------- */

.heading__eyebrow{margin-bottom:var(--space-4)}
.heading--center{text-align:center;max-width:760px;margin-left:auto;margin-right:auto}
.heading__title{
  margin:0;font-family:var(--font-display);font-weight:400;
  font-size:var(--fs-h1);line-height:var(--lh-display);
  letter-spacing:var(--ls-display);color:currentColor;
}
.heading--sm .heading__title{font-size:var(--fs-h2)}
.heading--lg .heading__title{font-size:var(--fs-display-l)}
.heading__lead{
  margin-top:var(--space-5);max-width:var(--measure);
  font:var(--type-body-l);color:var(--ink-700);
}
.heading--center .heading__lead{margin-left:auto;margin-right:auto}

/* ---------- Quote -------------------------------------------------------- */

.quote{margin:0;max-width:780px}
.quote--center{text-align:center;margin-left:auto;margin-right:auto}
.quote__text{
  margin:0;font-family:var(--font-display);font-weight:400;
  font-size:var(--fs-h2);line-height:1.34;color:currentColor;
}
.quote__attribution{
  margin-top:var(--space-4);font:var(--type-eyebrow);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted);
}
.quote--invert .quote__attribution{color:rgba(242,235,215,.7)}

/* ---------- ChoiceCard --------------------------------------------------- */

.choice{
  display:block;text-decoration:none;color:var(--text-body);
  background:var(--cream-050);padding:var(--space-5);
  transition:transform var(--dur-base) var(--ease-out),
             background var(--dur-base) var(--ease-out);
}
.choice--white{background:var(--white)}
.choice--lilac{background:var(--lilac-100)}
.choice:hover{transform:translateY(var(--hover-lift));color:var(--text-body)}
.choice__clip{overflow:hidden}
.choice__clip .frame{
  transition:transform var(--dur-slow) var(--ease-out);
}
.choice:hover .choice__clip .frame{transform:scale(1.03)}
.choice__title{
  margin:var(--space-5) 0 0;font-family:var(--font-display);font-weight:400;
  font-size:var(--fs-h2);line-height:var(--lh-heading);
}
.choice__text{margin-top:var(--space-3);font:var(--type-body);color:var(--ink-700)}
.choice__cta{
  display:inline-flex;align-items:center;gap:10px;margin-top:var(--space-5);
  font:var(--type-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  border-bottom:1px solid var(--border-strong);padding-bottom:6px;
  color:var(--ink-900);transition:color var(--dur-base) var(--ease-out);
}
.choice:hover .choice__cta{color:var(--acid-700)}

/* ---------- NavBar ------------------------------------------------------- */

.site-header{
  background:var(--surface-page);
  border-bottom:1px solid var(--border-hairline);
}
.site-header__inner{
  max-width:var(--page-max);margin:0 auto;
  padding:var(--space-5) var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);
}
.site-nav{display:flex;align-items:center;gap:var(--space-6)}
.site-nav__links{display:flex;align-items:center;gap:var(--space-6)}
.site-nav__link{
  font:var(--type-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--ink-900);opacity:.62;text-decoration:none;padding-bottom:5px;
  border-bottom:1px solid transparent;white-space:nowrap;
  transition:var(--transition-base);
}
.site-nav__link:hover{opacity:1;color:var(--ink-900)}
.site-nav__link[aria-current="page"]{opacity:1;border-bottom-color:var(--ink-900)}

.site-nav__toggle{
  display:none;background:transparent;border:none;cursor:pointer;
  color:var(--ink-900);padding:10px;margin:-10px;
}
.site-nav__toggle .icon--close{display:none}
.site-nav__toggle[aria-expanded="true"] .icon--menu{display:none}
.site-nav__toggle[aria-expanded="true"] .icon--close{display:block}

.site-nav__panel{
  display:none;
  background:var(--surface-page);
  border-top:1px solid var(--border-hairline);
}
.site-nav__panel-inner{
  max-width:var(--page-max);margin:0 auto;
  padding:0 var(--gutter);
  display:grid;
}

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

.hero{padding-top:var(--space-8)}
.hero__grid{
  display:grid;grid-template-columns:1.15fr .85fr;
  gap:var(--gutter-lg);align-items:center;
}
.hero__title-wrap{position:relative;margin-top:var(--space-5)}
/* Hinter der Hauptzeile steht die Herzmarke — das Herz aus dem Logo mit den
   beiden Umlautpunkten, freigestellt. Vorher war hier der Acid-Kreis. */
.hero__disc{
  position:absolute;left:-14px;top:-6px;width:86px;height:118px;
  background:url("/assets/img/herzmarke-lilac.svg") no-repeat center/contain;
}
.hero__disc--acid{background-image:url("/assets/img/herzmarke-acid.svg")}
.hero__title{
  position:relative;margin:0;font-family:var(--font-display);font-weight:400;
  font-size:clamp(38px,5.2vw,62px);line-height:1.06;letter-spacing:-0.01em;
  max-width:18ch;
}
.hero__lead{
  margin-top:var(--space-6);max-width:46ch;
  font:var(--type-body-l);color:var(--ink-700);
}
.hero__actions{display:flex;gap:var(--space-4);margin-top:var(--space-6);flex-wrap:wrap}
.hero__photos{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);align-items:start}
.hero__photos .frame:first-child{margin-top:44px}

/* ---------- Angebote ----------------------------------------------------- */

.offers{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);
  margin-top:var(--space-7);
}

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

.teaser__grid{
  display:grid;grid-template-columns:.9fr 1.1fr;
  gap:var(--gutter-lg);align-items:center;
}
.teaser__text{margin-top:var(--space-5);max-width:var(--measure);font:var(--type-body);color:var(--ink-800)}
.teaser__tags{display:flex;gap:var(--space-3);margin-top:var(--space-5);flex-wrap:wrap}
.teaser__action{margin-top:var(--space-6)}

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

.site-footer{background:var(--ink-900);color:var(--text-invert)}
.site-footer__inner{
  max-width:var(--page-max);margin:0 auto;
  padding:var(--space-8) var(--gutter) var(--space-6);
}
.site-footer__grid{
  display:grid;grid-template-columns:1.2fr 1fr 1fr;
  gap:var(--space-7);align-items:start;
}
.site-footer__note{
  margin-top:var(--space-5);font:var(--type-body);font-size:var(--fs-body-s);
  color:rgba(242,235,215,.72);max-width:34ch;
}
.site-footer__nav{display:grid;gap:var(--space-3);justify-items:start}
.site-footer__contact{display:grid;gap:var(--space-3);justify-items:start}
.footer-link{
  font:var(--type-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--cream-100);opacity:.72;text-decoration:none;
  transition:opacity var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.footer-link:hover{opacity:1;color:var(--cream-100)}
.footer-link--contact{display:inline-flex;gap:10px;align-items:center;opacity:1}
.site-footer__social{display:flex;gap:var(--space-3);margin-top:var(--space-2)}
.site-footer__social a{color:var(--cream-100);opacity:.72;transition:opacity var(--dur-fast) var(--ease-out)}
.site-footer__social a:hover{opacity:1;color:var(--cream-100)}
.site-footer__bottom{
  margin-top:var(--space-7);padding-top:var(--space-4);
  border-top:1px solid var(--border-invert);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-4);
}
.site-footer__legal{display:flex;gap:var(--space-5);flex-wrap:wrap}
.site-footer__legal .footer-link{font-size:11px}
.site-footer__copy{font:var(--type-body);font-size:var(--fs-caption);color:rgba(242,235,215,.5)}

/* ============================================================================
   Responsive — unter 900px wird jedes Zweispalten-Raster einspaltig,
   die Navigation wandert hinter das Menü-Icon, Trefferflächen ≥ 44px.
   ========================================================================== */

@media (max-width:900px){
  :root{
    --section-y:var(--space-8);
    --section-y-tight:var(--space-7);
    --gutter-lg:var(--space-6);
  }

  .site-nav__links{display:none}
  .site-nav__toggle{display:block}
  .site-nav__panel{display:block}
  .site-nav__panel-inner{
    grid-template-rows:0fr;
    transition:grid-template-rows var(--dur-base) var(--ease-out);
  }
  .site-nav__panel[data-open="true"] .site-nav__panel-inner{grid-template-rows:1fr}
  .site-nav__panel-list{overflow:hidden;display:grid}
  .site-nav__panel-list a{
    font:var(--type-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
    color:var(--ink-900);opacity:.62;text-decoration:none;
    display:flex;align-items:center;min-height:52px;
    border-bottom:1px solid var(--border-hairline);
  }
  .site-nav__panel-list a:last-child{border-bottom:0}
  .site-nav__panel-list a[aria-current="page"]{opacity:1}

  .hero{padding-top:var(--space-7)}
  .hero__grid{grid-template-columns:1fr;gap:var(--space-7)}
  .hero__disc{width:62px;height:85px;left:-10px;top:-4px}
  .hero__actions .btn{min-height:48px}
  /* Der Ghost-Button ist optisch ein Textlink (20px hoch). Die Trefferfläche
     wird unsichtbar auf 44px vergrössert, das Aussehen bleibt unverändert. */
  .btn--ghost::before{
    content:"";position:absolute;left:0;right:0;top:50%;
    transform:translateY(-50%);height:44px;
  }

  /* Über mich: Bild vor dem Text — so steht es im Handoff. */
  .teaser__grid{grid-template-columns:1fr;gap:var(--space-7)}
  /* Einspaltig würde das 4:5-Portrait sonst die volle Spaltenbreite hoch
     werden (bei 768px = 900px hoch). Gedeckelt bleibt die Komposition lesbar. */
  .teaser__grid > .frame{max-width:420px}

  /* Versetzte Farbblöcke brauchen Luft, sonst laufen sie aus dem Gutter. */
  .frame--offset-left,.frame--offset-right{margin-bottom:22px}
  .frame--offset-left{margin-left:22px}
  .frame--offset-right{margin-right:22px}

  .quote__text{font-size:var(--fs-h3)}
  .heading--lg .heading__title{font-size:var(--fs-display-m)}

  .site-footer__grid{grid-template-columns:1fr;gap:var(--space-6)}
  .footer-link{min-height:32px;display:inline-flex;align-items:center}
  .site-footer__social a{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;margin:-10px}
}

@media (max-width:700px){
  /* Erst hier stapeln: darüber lesen die beiden Angebote als gleichwertiges Paar. */
  .offers{grid-template-columns:1fr}
}

@media (max-width:560px){
  .hero__photos{gap:var(--space-3)}
  .hero__photos .frame:first-child{margin-top:24px}
  .btn{width:100%}
  .btn--ghost{width:auto}
  .hero__actions{flex-direction:column;align-items:stretch}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}

/* ============================================================================
   Bausteine der Unterseiten
   ========================================================================== */

/* ---------- Logo --------------------------------------------------------- */

.logo{display:block}
.logo img{display:block;width:auto}
.logo--nav img{height:26px}
.logo--footer img{height:30px}

/* ---------- BackLink ----------------------------------------------------- */

.backlink{
  display:inline-flex;align-items:center;gap:10px;
  font:var(--type-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--ink-900);text-decoration:none;
  transition:color var(--dur-fast) var(--ease-out);
}
.backlink:hover{color:var(--acid-700)}
.backlink .icon{transition:transform var(--dur-base) var(--ease-out)}
.backlink:hover .icon{transform:translateX(-3px)}

/* ---------- Unterseiten-Kopf --------------------------------------------- */

.subhero{padding-top:var(--space-6)}
.subhero__grid{
  display:grid;gap:var(--gutter-lg);align-items:end;margin-top:var(--space-6);
}
.subhero__grid--text-left{grid-template-columns:1.1fr .9fr}
.subhero__grid--text-right{grid-template-columns:.9fr 1.1fr}
.subhero__grid--even{grid-template-columns:.9fr 1.1fr;align-items:center}
.subhero__tags{display:flex;gap:var(--space-3);margin-top:var(--space-6);flex-wrap:wrap}

/* ---------- InfoCard ----------------------------------------------------- */

.infocard{background:var(--white);padding:var(--space-5);border:1px solid transparent}
.infocard--cream{background:var(--cream-050)}
.infocard--lilac{background:var(--lilac-100)}
.infocard--outline{background:transparent;border-color:var(--border-hairline)}
.infocard .icon{margin-bottom:var(--space-4)}
.infocard__title{margin:0;font:var(--type-h3);letter-spacing:var(--ls-body)}
.infocard__body{margin-top:var(--space-3);font:var(--type-body);color:var(--ink-700)}

.cards{display:grid;gap:var(--space-5);margin-top:var(--space-7)}
.cards--2{grid-template-columns:repeat(2,1fr)}
.cards--3{grid-template-columns:repeat(3,1fr)}
.cards--tight{margin-top:var(--space-5)}

/* ---------- Zweispalter „Überschrift links, Inhalt rechts" ---------------- */

.split{display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--gutter-lg);align-items:start}

/* ---------- PriceList ---------------------------------------------------- */

.pricelist{margin:0;display:grid;gap:0}
.pricelist--card{background:var(--white);padding:var(--space-5)}
.pricelist__row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-5);
  align-items:baseline;padding:var(--space-4) 0;
  border-bottom:1px solid var(--border-hairline);
}
.pricelist__row:first-child{border-top:1px solid var(--border-hairline)}
.pricelist__label{font:var(--type-body-l);font-weight:500}
.pricelist__note{margin:6px 0 0;font:var(--type-body);font-size:var(--fs-body-s);color:var(--text-muted)}
.pricelist__value{margin:0;font-family:var(--font-display);font-size:var(--fs-h3);white-space:nowrap}

/* ---------- Accordion ---------------------------------------------------- */

.accordion{border-top:1px solid var(--border-hairline)}
.accordion__item{border-bottom:1px solid var(--border-hairline)}
.accordion__button{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-5);padding:var(--space-5) var(--space-4) var(--space-5) 0;
  background:transparent;border:none;cursor:pointer;text-align:left;
  font:var(--type-body-l);font-weight:500;color:var(--text-body);
}
.accordion__button .icon{transition:transform var(--dur-base) var(--ease-out)}
.accordion__button[aria-expanded="true"] .icon{transform:rotate(180deg)}
.accordion__panel{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--dur-base) var(--ease-out);
}
.accordion__button[aria-expanded="true"] + .accordion__panel{grid-template-rows:1fr}
.accordion__inner{overflow:hidden}
.accordion__text{
  padding:0 var(--space-8) var(--space-5) 0;
  font:var(--type-body);color:var(--ink-700);max-width:var(--measure);
}

/* ---------- Formularfelder ----------------------------------------------- */

.form{margin-top:var(--space-7);display:grid;gap:var(--space-5);max-width:760px}
.form__pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);align-items:start}

.field{display:grid;gap:var(--space-2)}
.field__label{
  font:var(--type-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--text-muted);
}
.field__required{color:var(--danger-500)}
.field__input,
.field__select{
  width:100%;box-sizing:border-box;padding:14px 16px;
  background:var(--surface-field);
  border:1px solid var(--border-field);border-radius:var(--radius-none);
  font:var(--type-body);color:var(--text-body);outline:none;
  transition:border-color var(--dur-fast) var(--ease-out);
}
textarea.field__input{resize:vertical}
.field__input:focus,
.field__select:focus{border-color:var(--ink-900)}
.field__input:disabled,
.field__select:disabled{background:var(--cream-100);cursor:not-allowed}
.field__input:user-invalid,
.field__select:user-invalid{border-color:var(--danger-500)}
.field__hint{font:var(--type-body);font-size:var(--fs-caption);color:var(--text-muted)}
.field__select-wrap{position:relative}
.field__select-wrap .icon{
  position:absolute;right:15px;top:50%;transform:translateY(-50%);pointer-events:none;
}
.field__select{appearance:none;padding-right:44px;cursor:pointer}

.fieldset{border:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.fieldset__legend{
  padding:0;font:var(--type-eyebrow);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--text-muted);
}
.radios{display:flex;gap:var(--space-3);flex-wrap:wrap}
.radio{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  padding:11px 22px;border-radius:var(--radius-pill);
  background:var(--surface-field);color:var(--text-body);
  border:1px solid var(--border-field);
  font:var(--type-body);font-size:var(--fs-body-s);
  transition:var(--transition-base);
}
.radio input{position:absolute;opacity:0;width:1px;height:1px}
.radio:has(input:checked){background:var(--ink-900);color:var(--cream-100);border-color:var(--ink-900)}
.radio:has(input:focus-visible){outline:2px solid var(--focus-ring);outline-offset:3px}

.checkbox{display:flex;align-items:flex-start;gap:var(--space-3);cursor:pointer}
.checkbox input{position:absolute;opacity:0;width:1px;height:1px}
.checkbox__box{
  flex:none;width:22px;height:22px;margin-top:2px;
  background:var(--surface-field);border:1px solid var(--border-field);
  display:grid;place-items:center;transition:var(--transition-base);
}
.checkbox__box .icon{opacity:0;transition:opacity var(--dur-fast) var(--ease-out)}
.checkbox input:checked + .checkbox__box{background:var(--ink-900);border-color:var(--ink-900)}
.checkbox input:checked + .checkbox__box .icon{opacity:1}
.checkbox input:focus-visible + .checkbox__box{outline:2px solid var(--focus-ring);outline-offset:3px}
.checkbox__label{font:var(--type-body);font-size:var(--fs-body-s);color:var(--ink-700)}
.checkbox__label a{text-decoration:underline}

/* Honigtopf: für Menschen unsichtbar und nicht fokussierbar, für Bots ein
   ganz normales Feld. Bewusst nicht display:none — manche Bots überspringen das. */
.honeypot{
  position:absolute;left:-9999px;top:0;width:1px;height:1px;
  overflow:hidden;opacity:0;pointer-events:none;
}

.form__actions{display:flex;gap:var(--space-5);align-items:center;flex-wrap:wrap}

/* ---------- FormNotice --------------------------------------------------- */

.notice{
  display:flex;gap:var(--space-4);padding:var(--space-4) var(--space-5);
  background:var(--info-100);color:var(--ink-900);
}
.notice--success{background:var(--success-100)}
.notice--error{background:var(--danger-100)}
.notice .icon{margin-top:3px;flex:none}
.notice__title{font:var(--type-h3);font-size:var(--fs-body-l);margin-bottom:4px}
.notice__body{font:var(--type-body);font-size:var(--fs-body-s)}
.notice__body a{text-decoration:underline}

/* ---------- Kontaktkarten und Formularwahl ------------------------------- */

.contact-cards{display:grid;gap:var(--space-4)}
.contact-card{
  display:flex;gap:var(--space-4);align-items:center;
  background:var(--white);padding:var(--space-5);
  transition:background var(--dur-base) var(--ease-out);
}
.contact-card:hover{background:var(--cream-050);color:var(--text-body)}
.contact-card__label{
  display:block;font:var(--type-eyebrow);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--text-muted);
}
.contact-card__value{font-family:var(--font-display);font-size:22px}

.form-switch{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);margin-top:var(--space-6)}
.form-switch__option{
  text-align:left;cursor:pointer;padding:var(--space-5);font:inherit;
  background:var(--white);border:1px solid transparent;
  transition:var(--transition-base);
}
.form-switch__option[aria-pressed="true"]{background:var(--lilac-200);border-color:var(--ink-900)}
.form-switch__title{font:var(--type-h3)}
.form-switch__text{
  display:block;margin-top:8px;font:var(--type-body);
  font-size:var(--fs-body-s);color:var(--ink-700);
}

/* ---------- Abschlussband ------------------------------------------------ */

.closing{
  display:flex;justify-content:space-between;align-items:center;
  gap:var(--space-6);flex-wrap:wrap;
}

/* ---------- Rechtstexte -------------------------------------------------- */

.prose{max-width:var(--measure)}
.prose h2{margin-top:var(--space-7);font:var(--type-h2)}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:var(--space-5);font:var(--type-h3)}
.prose p,.prose ul,.prose ol{margin-top:var(--space-4);font:var(--type-body);color:var(--ink-800)}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin-top:var(--space-2)}
.prose a{text-decoration:underline}
.prose dl{margin-top:var(--space-4)}
.prose dt{font-weight:500;margin-top:var(--space-4)}
.prose dd{margin:var(--space-1) 0 0;color:var(--ink-700)}

/* Offene Stelle: Inhalt fehlt noch und muss von Kira kommen.
   Bewusst auffällig — ein Platzhalter, der wie fertiger Text aussieht,
   ist schlimmer als eine sichtbare Lücke. */
.luecke{
  display:block;margin-top:var(--space-4);padding:var(--space-4) var(--space-5);
  background:var(--danger-100);border-left:3px solid var(--danger-500);
  font:var(--type-body);font-size:var(--fs-body-s);color:var(--ink-900);
}
.luecke strong{font-weight:500}

@media (max-width:900px){
  .subhero__grid--text-left,
  .subhero__grid--text-right,
  .subhero__grid--even{grid-template-columns:1fr;align-items:start}
  /* Auf den Angebotsseiten steht das Bild nach dem Text, auf „Über mich" davor. */
  .subhero__grid--text-left  > .frame,
  .subhero__grid--text-right > .frame{order:2}
  .subhero__grid--even > .frame{order:0}
  .subhero__grid > .frame{max-width:420px}

  .cards--2,.cards--3{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;gap:var(--space-6)}
  .form__pair{grid-template-columns:1fr}
  .form-switch{grid-template-columns:1fr}
  .accordion__text{padding-right:0}
  .accordion__button{min-height:56px}
  .closing{flex-direction:column;align-items:flex-start}
}

/* ---------- Nachträge --------------------------------------------------- */

.frame__caption{
  margin-top:var(--space-3);font:var(--type-body);
  font-size:var(--fs-caption);color:var(--text-muted);
}
.split__photo{margin-top:var(--space-7);max-width:340px}
.ueber-mich__actions{
  display:flex;justify-content:center;gap:var(--space-4);
  margin-top:var(--space-7);flex-wrap:wrap;
}
.closing__text{font:var(--type-body-l);color:var(--text-invert);max-width:40ch}
.quote--sm .quote__text{font-size:var(--fs-h3)}
.legal-heading{margin-top:var(--space-6)}

/* Akkordeon: ohne JavaScript sind alle Antworten offen und lesbar. Erst das
   Skript klappt zu und setzt data-ready — deshalb hängt die Animation daran,
   sonst würde man beim Laden das Zusammenklappen sehen. */
.accordion__panel{grid-template-rows:1fr}
.accordion__item[data-open="false"] .accordion__panel{grid-template-rows:0fr}
.accordion[data-ready] .accordion__panel{
  transition:grid-template-rows var(--dur-base) var(--ease-out);
}
.accordion__item h3{margin:0;font:inherit}

@media (max-width:900px){
  .split__photo{margin-top:var(--space-6);max-width:420px}
}

/* ---------- Lange deutsche Komposita auf schmalen Schirmen ---------------
   „Geschäftsbedingungen" ist bei 40px Prata breiter als ein 390px-Viewport.
   Ein einzelnes Wort, das über seinen Kasten hinausragt, vergrössert die
   Scrollfläche, ohne dass irgendein Element als zu breit gemessen wird —
   deshalb fällt so etwas beim Prüfen von Element-Rechtecken durch. */

@media (max-width:700px){
  /* Nur die Notbremse, keine automatische Silbentrennung: die würde auch
     Wörter trennen, die problemlos passen — „Herzlich willkom-men" in der
     Hauptzeile der Startseite war genau das. */
  .heading__title,
  .hero__title,
  .choice__title,
  .infocard__title,
  .prose h2,
  .prose h3{overflow-wrap:break-word}
  .heading--lg .heading__title{font-size:clamp(30px, 8.5vw, 40px)}
  .heading--sm .heading__title{font-size:clamp(26px, 7.5vw, 30px)}

  /* Der Zurück-Link ist optisch eine Zeile Versalien (18px hoch). Die
     Trefferfläche wird unsichtbar auf 44px gebracht, das Aussehen bleibt. */
  .backlink{position:relative}
  .backlink::before{
    content:"";position:absolute;left:0;right:-8px;top:50%;
    transform:translateY(-50%);height:44px;
  }
}