/* ==========================================================================
   Hebammenpraxis Oranienstraße — "Handgedruckt" design system
   Hand-authored, framework-free. Extends the logo's linocut/stamp identity.
   Sections: 1 Fonts · 2 Tokens · 3 Reset/base · 4 Typography · 5 Layout
             6 Buttons · 7 Farbband + brand rule · 8 Header/Nav · 9 Hero
             10 Journey · 11 Cards (service/course/team) · 12 Profile
             13 Quote · 14 Contact · 15 Footer · 16 Utilities/motion
   ========================================================================== */

/* 1 · FONTS (self-hosted, GDPR-safe) ------------------------------------- */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/bricolage-grotesque-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mulish';
  src: url('../fonts/mulish-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mulish';
  src: url('../fonts/mulish-latin-wght-italic.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'DM Mono';
  src: url('../fonts/dm-mono-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Mono';
  src: url('../fonts/dm-mono-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* 2 · TOKENS ------------------------------------------------------------- */
:root {
  /* paper + ink */
  --paper:      #faf6ef;
  --paper-2:    #f1e9db;
  --card:       #fffdf8;
  --ink:        #232d34;
  --ink-soft:   #5d6a72;
  --hairline:   #e4dbcb;
  --hairline-2: #d8cdb9;

  /* brand inks (from the logo) + warm accent */
  --blue:   #04529e;
  --teal:   #12818d;
  --lilac:  #9b88bc;
  --coral:  #e8654a;
  --coral-deep: #c04529;

  /* soft tints for section/card backgrounds */
  --blue-tint:  #e6eef7;
  --teal-tint:  #def0f0;
  --lilac-tint: #efe9f4;
  --coral-tint: #fbe7df;

  /* typefaces */
  --font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Mulish', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'DM Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* fluid type scale */
  --t-eyebrow: 0.78rem;
  --t-small:   0.92rem;
  --t-body:    clamp(1.0625rem, 1.0rem + 0.28vw, 1.18rem);
  --t-h4:      clamp(1.12rem, 1.05rem + 0.4vw, 1.3rem);
  --t-h3:      clamp(1.35rem, 1.2rem + 0.8vw, 1.75rem);
  --t-h2:      clamp(1.8rem, 1.45rem + 1.7vw, 2.85rem);
  --t-h1:      clamp(2.3rem, 1.8rem + 2.5vw, 3.6rem);
  --t-hero:    clamp(2.1rem, 1.2rem + 4vw, 5.3rem);

  /* spacing + structure */
  --container: 1180px;
  --gutter: clamp(1.1rem, 4vw, 2.2rem);
  --section: clamp(3.5rem, 7vw, 7rem);
  --radius: 12px;
  --radius-sm: 7px;
  --shadow: 0 18px 40px -26px rgba(35, 45, 52, 0.45);
  --shadow-lift: 0 26px 55px -28px rgba(35, 45, 52, 0.55);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* 3 · RESET / BASE ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.72;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* subtle printed-paper grain, behind all content */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

img, svg, picture { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 3px solid var(--coral-deep); outline-offset: 3px; border-radius: 2px; }

.skip-link {
  position: absolute;
  left: 1rem; top: -100px;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* 4 · TYPOGRAPHY --------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); line-height: 1.2; }
p { text-wrap: pretty; }
p + p { margin-top: 0.9em; }
strong, b { font-weight: 700; }
a.inline-link {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: var(--coral);
}
a.inline-link:hover { color: var(--coral-deep); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.eyebrow::before {
  content: "";
  width: 1.7em; height: 2px;
  background: currentColor;
  display: inline-block;
}
.lead { font-size: clamp(1.15rem, 1.05rem + 0.6vw, 1.45rem); line-height: 1.6; color: var(--ink); }
.muted { color: var(--ink-soft); }

/* 5 · LAYOUT ------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section--tint-blue  { background: var(--blue-tint); }
.section--tint-teal  { background: var(--teal-tint); }
.section--tint-lilac { background: var(--lilac-tint); }
.section--tint-coral { background: var(--coral-tint); }
.section--paper2     { background: var(--paper-2); }

.section-head { max-width: 60ch; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { margin-top: 0.5rem; }
/* Fluid wie der Fliesstext, sonst kippt das Verhaeltnis: --t-body waechst bis 1.18rem,
   eine feste 1.08rem war ab rund 500 px Breite kleiner als der normale Text, obwohl der
   Einleitungsabsatz groesser sein soll. Reihenfolge jetzt ueberall:
   body < .section-head p < .page-hero p < .lead */
.section-head p { margin-top: 1rem; color: var(--ink-soft); font-size: clamp(1.09rem, 1.03rem + 0.3vw, 1.24rem); }

.grid { display: grid; gap: clamp(1.1rem, 2.5vw, 1.8rem); }
@media (min-width: 760px) { .cols-3 { grid-template-columns: repeat(3, 1fr); } }

/* 6 · BUTTONS ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.01em;
  padding: 0.82em 1.5em;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  transition: transform 0.25s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.25s var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn .arrow { transition: transform 0.25s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

.btn-primary { background: var(--coral-deep); color: #fff; box-shadow: 0 12px 24px -14px var(--coral-deep); }
.btn-primary:hover { background: #b8401f; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-sm { padding: 0.6em 1.1em; font-size: 0.92rem; }

/* 7 · FARBBAND (signature) + BRAND RULE ---------------------------------- */
/* hand-printed color band echoing the logo */
.band {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  color: #fff;
  background: var(--blue);
  padding: 0.06em 0.34em;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transform: rotate(-1.4deg);
}
.band--teal  { background: var(--teal); }
.band--lilac { background: var(--lilac); color: var(--ink); }
.band--coral { background: var(--coral-deep); }
.band--blue  { background: var(--blue); }

/* eyebrow-sized stamped tag */
.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ink);
  padding: 0.4em 0.8em;
  border-radius: 3px;
}
.tag--blue { background: var(--blue); }
.tag--teal { background: var(--teal); }
.tag--lilac { background: var(--lilac); color: var(--ink); }
.tag--coral { background: var(--coral-deep); }

/* four-ink hairline that nods to the stacked logo bands */
.brandrule { height: 5px; width: 100%; border: 0;
  background: linear-gradient(90deg,
    var(--blue) 0 25%, var(--teal) 25% 50%, var(--lilac) 50% 75%, var(--coral) 75% 100%);
}

/* 8 · HEADER / NAV ------------------------------------------------------- */
.topbar {
  background: var(--blue);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}
.topbar .container { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 38px; padding-block: 0.35rem; }
.topbar a { display: inline-flex; align-items: center; gap: 0.45em; white-space: nowrap; }
/* Gleicher Fall wie im CTA-Block: die Topbar steht auf --blue, Koralle darauf
   erreicht nur 2,36:1. Rueckmeldung daher ueber die Unterstreichung. */
.topbar a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--coral);
  text-decoration-thickness: 2px; text-underline-offset: 3px; }
.topbar .topbar-place { opacity: 0.85; }
.topbar-contact { display: inline-flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; align-items: center; }
@media (max-width: 620px) { .topbar .topbar-place { display: none; } .topbar .container { justify-content: center; } }

.site-header { position: sticky; top: 0; z-index: 100; background: var(--paper); border-bottom: 1px solid var(--hairline); transition: box-shadow 0.3s var(--ease); }
.site-header.is-scrolled { box-shadow: 0 10px 30px -20px rgba(35,45,52,0.5); }
.navbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 76px; }
.brand img { height: 52px; width: auto; }
@media (min-width: 600px) { .brand img { height: 60px; } }

.nav-links { display: flex; align-items: center; gap: clamp(0.5rem, 1.6vw, 1.4rem); }
.nav-links a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  padding: 0.4em 0.2em;
  position: relative;
  color: var(--ink);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px;
  background: var(--coral-deep); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform 0.28s var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-links a.active { color: var(--blue); }

.nav-toggle { display: none; width: 46px; height: 46px; border-radius: var(--radius-sm); border: 1px solid var(--hairline-2); align-items: center; justify-content: center; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 22px; height: 2.5px; background: var(--ink); border-radius: 2px; transition: transform 0.3s var(--ease), opacity 0.2s; }
.nav-toggle span { position: relative; }
.nav-toggle span::before { position: absolute; top: -7px; }
.nav-toggle span::after { position: absolute; top: 7px; }
.nav-open .nav-toggle span { background: transparent; }
.nav-open .nav-toggle span::before { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span::after { transform: translateY(-7px) rotate(-45deg); }

.nav-overlay { display: none; }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: fixed; top: 0; right: 0; z-index: 130;
    height: 100dvh; width: min(80vw, 330px);
    flex-direction: column; align-items: flex-start; justify-content: flex-start;
    gap: 0.2rem; padding: 6rem 2rem 2rem;
    background: var(--paper); border-left: 5px solid var(--coral);
    transform: translateX(105%); transition: transform 0.38s var(--ease);
    overflow-y: auto;
  }
  .nav-open .nav-links { transform: translateX(0); box-shadow: var(--shadow-lift); }
  .nav-links a { font-size: 1.5rem; padding: 0.5rem 0; }
  .nav-links a::after { bottom: 0.3rem; }
  .nav-toggle { position: relative; z-index: 140; }
  /* below the header's z-index (100) so the sticky header + menu paint above it;
     above page content so it still dims the page and catches outside taps */
  .nav-open .nav-overlay { display: block; position: fixed; inset: 0; z-index: 95; background: rgba(35,45,52,0.45); backdrop-filter: blur(2px); }
}

/* 9 · HERO --------------------------------------------------------------- */
.hero { position: relative; padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem); overflow: hidden; }
.hero__inner { max-width: 940px; }
.hero h1 {
  font-size: var(--t-hero);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin-top: 1.1rem;
}
.hero h1 .band { margin: 0.08em 0; }
.hero .lead { margin-top: 1.6rem; max-width: 56ch; color: var(--ink-soft); }
.hero__actions { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 0.9rem 1rem; align-items: center; }

/* decorative stamped marks floating in the hero */
.hero__marks { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.hero__marks span { position: absolute; border-radius: 50%; opacity: 0.16; filter: blur(2px); }
.hero__marks .m1 { width: 320px; height: 320px; background: var(--teal); right: -90px; top: -60px; }
.hero__marks .m2 { width: 220px; height: 220px; background: var(--lilac); right: 180px; bottom: -120px; }
.hero__marks .m3 { width: 160px; height: 160px; background: var(--coral); left: -70px; bottom: 30px; opacity: 0.12; }

/* page hero (interior pages) */
.page-hero { padding-block: clamp(2.6rem, 6vw, 4.6rem) clamp(1.8rem, 4vw, 3rem); }
.page-hero h1 { margin-top: 0.8rem; max-width: 18ch; }
.page-hero p { margin-top: 1.1rem; max-width: 60ch; color: var(--ink-soft); font-size: clamp(1.12rem, 1.05rem + 0.34vw, 1.3rem); }

/* 10 · JOURNEY ----------------------------------------------------------- */
.journey { display: grid; gap: 1.4rem; position: relative; }
@media (min-width: 760px) { .journey { grid-template-columns: repeat(4, 1fr); } }
.journey__card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1.5rem 1.4rem 1.6rem;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow);
  position: relative;
}
.journey__card .tag { margin-bottom: 1rem; align-self: flex-start; transform: rotate(-1.5deg); }
.journey__card h3 { font-size: 1.25rem; margin-bottom: 0.6rem; }
.journey__card p { font-size: 0.98rem; color: var(--ink-soft); line-height: 1.6; }
.journey__card.is-blue  { border-top: 4px solid var(--blue); }
.journey__card.is-teal  { border-top: 4px solid var(--teal); }
.journey__card.is-lilac { border-top: 4px solid var(--lilac); }
.journey__card.is-coral { border-top: 4px solid var(--coral); }

/* 11 · CARDS (service / course / team) ----------------------------------- */
/* secondary offers: grouped by hairlines, not boxed. The journey cards above
   already set the page's card rhythm; a second four-up card row would repeat
   the same layout family and flatten the hierarchy between primary and
   secondary services. The mark carries the care-phase colour. */
.offers { display: grid; border-top: 1px solid var(--hairline); }
@media (min-width: 700px) {
  .offers { grid-template-columns: repeat(2, 1fr); column-gap: clamp(2rem, 5vw, 4rem); }
}
.offers__item { padding: 1.4rem 0 1.5rem; border-bottom: 1px solid var(--hairline); }
.offers__item h3 { font-size: 1.2rem; margin-bottom: 0.45rem; display: flex; align-items: baseline; gap: 0.7rem; }
.offers__item h3 .mark { flex: 0 0 auto; width: 11px; height: 11px; border-radius: 3px; transform: rotate(-8deg); }
.offers__item p { font-size: 0.98rem; color: var(--ink-soft); }

/* Pflichtangaben-Hinweis über jedem Kontaktweg. Abgesetzt, weil er gelesen werden
   muss, bevor jemand schreibt, aber ohne Warnfarbe, das ist keine Fehlermeldung. */
.contact-note {
  border-left: 3px solid var(--coral-deep);
  padding: 0.15rem 0 0.15rem 1rem;
  color: var(--ink);
  font-size: 0.98rem;
}

/* Kontaktwege der einzelnen Hebammen (kontakt.html).
   Eine Zeile je Person statt zwei Spalten: bei drei Personen bliebe im Zweispalter
   eine Zelle leer, und die langen Mailadressen brauchen die volle Breite.
   Drei klar getrennte Register, damit Kontaktweg und Profillink nicht verschmelzen:
   Name in der Display-Schrift, Adresse in Mono (das ist eine Angabe, kein Fliesstext),
   Profillink als kleines Mono-Kapitälchen in Koralle wie auf den Teamkarten. */
.contacts { border-top: 1px solid var(--hairline); }
.contacts__item {
  border-bottom: 1px solid var(--hairline);
  padding: 1.5rem 0;
  display: grid; gap: 0.7rem;
}
@media (min-width: 620px) {
  .contacts__item { grid-template-columns: 0.75fr 1.25fr; gap: 0.7rem 2rem; align-items: baseline; }
}
.contacts__name {
  display: flex; align-items: baseline; gap: 0.7rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--ink);
}
.contacts__name .mark { flex: 0 0 auto; width: 11px; height: 11px; border-radius: 3px; transform: rotate(-8deg); }
.contacts__hint { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 0.3rem; }
/* Mailadressen brechen sonst ueber den Rand hinaus statt umzubrechen */
.contacts__way { font-family: var(--font-mono); font-size: 0.95rem; overflow-wrap: anywhere; }
.contacts__way a { color: var(--blue); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--coral); }
.contacts__way a:hover { color: var(--coral-deep); }
.contacts__profile {
  margin-top: 0.8rem; display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--coral-deep);
}
.contacts__profile .arrow { transition: transform 0.25s var(--ease); }
.contacts__profile:hover .arrow { transform: translateX(3px); }

/* accordion-style service/course list */
.accordion { border-top: 1px solid var(--hairline); }
.accordion__item { border-bottom: 1px solid var(--hairline); }
.accordion__trigger {
  width: 100%; text-align: left; display: flex; align-items: center; gap: 1rem;
  padding: 1.25rem 0.4rem; font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-h4); color: var(--ink); line-height: 1.2;
}
.accordion__trigger:hover { color: var(--blue); }
.accordion__trigger .plus { margin-left: auto; flex: 0 0 auto; width: 30px; height: 30px; position: relative; color: var(--coral-deep); }
.accordion__trigger .plus::before, .accordion__trigger .plus::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; border-radius: 2px;
  transform: translate(-50%, -50%); transition: transform 0.3s var(--ease); }
.accordion__trigger .plus::before { width: 15px; height: 2.5px; }
.accordion__trigger .plus::after { width: 2.5px; height: 15px; }
.accordion__trigger[aria-expanded="true"] .plus::after { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }
.accordion__trigger .mark { flex: 0 0 auto; width: 11px; height: 11px; border-radius: 3px; transform: rotate(-8deg); }
.accordion__panel { overflow: hidden; height: 0; transition: height 0.34s var(--ease); }
.accordion__panel-inner { padding: 0 0.4rem 1.6rem; max-width: 72ch; }
.accordion__panel-inner p { color: var(--ink); }
.accordion__panel-inner ul { margin: 0.6rem 0 0; display: grid; gap: 0.35rem; }
.accordion__panel-inner ul li { position: relative; padding-left: 1.3em; color: var(--ink-soft); }
.accordion__panel-inner ul li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; background: var(--teal); border-radius: 2px; transform: rotate(45deg); }

/* open card stack (courses) */
.cardstack { display: grid; gap: clamp(1.1rem, 2.5vw, 1.7rem); }
.card { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2.1rem); box-shadow: var(--shadow); }
.card > .tag { margin-bottom: 0.9rem; transform: rotate(-1.4deg); }
.card > h3 { font-size: var(--t-h3); margin-bottom: 0.7rem; }
.card .anmeldung { margin-top: 1.1rem; font-family: var(--font-mono); font-size: 0.9rem; color: var(--ink-soft); display: grid; gap: 0.25rem; }
.card .anmeldung a { color: var(--blue); }
.card .anmeldung a:hover { color: var(--coral-deep); }
.card .btn { margin-top: 1.1rem; }

/* meta chips (Leitung / Termine / Ort / Kosten) */
.meta { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; margin: 0.2rem 0 1.1rem; }
.meta div { min-width: 0; }
.meta dt { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.15rem; }
.meta dd { font-size: 0.98rem; font-weight: 600; }
.meta dd span { display: block; font-weight: 400; color: var(--ink-soft); font-size: 0.94rem; }

/* team grid */
/* Spaltenzahl richtet sich nach der Zahl der Karten, nicht nach festen Breakpoints:
   bei auto-fit kollabieren leere Spuren, drei Personen ergeben also drei Spalten und
   vier ergeben vier. Vorher musste die Zahl bei jeder Personaländerung von Hand
   nachgezogen werden, sonst blieb eine Zelle leer. 230px deckelt bei 1180px
   Containerbreite auf höchstens vier Spalten. */
.team {
  display: grid;
  gap: clamp(1.2rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.person { display: flex; flex-direction: column; }
.person__photo {
  position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden;
  background: var(--paper-2); box-shadow: var(--shadow);
}
.person__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transform-origin: center top; transition: transform 0.5s var(--ease); }
.person:hover .person__photo img { transform: scale(1.05); }
/* monogram placeholder for people without a real photo */
.person__photo.mono { display: grid; place-items: center; }
.person__photo.mono span { font-family: var(--font-display); font-weight: 800; font-size: 3.6rem; color: #fff; }
.person__photo.mono.is-blue  { background: var(--blue); }
.person__photo.mono.is-teal  { background: var(--teal); }
.person__photo.mono.is-lilac { background: var(--lilac); }
.person__photo.mono.is-coral { background: var(--coral-deep); }
.person__name { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; margin-top: 0.9rem; }
.person__role { font-size: 0.92rem; color: var(--ink-soft); margin-top: 0.15rem; }
.person__link { margin-top: 0.7rem; font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--coral-deep); display: inline-flex; align-items: center; gap: 0.4em; }
.person__link .arrow { transition: transform 0.25s var(--ease); }
.person:hover .person__link .arrow { transform: translateX(3px); }
.person__card-link { display: flex; flex-direction: column; height: 100%; }

/* 12 · PROFILE (single pages) -------------------------------------------- */
.backlink { font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); display: inline-flex; gap: 0.5em; align-items: center; margin-bottom: 1.8rem; }
.backlink:hover { color: var(--coral-deep); }
.backlink .arrow { transition: transform 0.25s var(--ease); }
.backlink:hover .arrow { transform: translateX(-3px); }
.profile { display: grid; gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
/* Zwei Spalten und Sticky-Foto gehören zusammen: einspaltig würde das
   klebende Foto den darunter liegenden Text überdecken, statt neben ihm
   stehen zu bleiben. Darum beides in derselben Media Query. */
@media (min-width: 820px) {
  .profile { grid-template-columns: 0.85fr 1.15fr; }
  .profile__media { position: sticky; top: 100px; }
}
.profile__photo { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lift); aspect-ratio: 1/1; background: var(--paper-2); }
.profile__photo img { width: 100%; height: 100%; object-fit: cover; }
.profile__photo.mono { display: grid; place-items: center; }
.profile__photo.mono span { font-family: var(--font-display); font-weight: 800; font-size: 6rem; color: #fff; }
.profile__contact { margin-top: 1.4rem; display: grid; gap: 0.55rem; font-family: var(--font-mono); font-size: 0.9rem; }
.profile__contact a { display: inline-flex; gap: 0.5em; align-items: center; }
.profile__contact a:hover { color: var(--coral-deep); }
.profile h1 { margin-top: 0.6rem; }
.profile__role { font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--coral-deep); }
.profile__bio { margin-top: 1.4rem; }
.profile__bio p { color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.2rem 0; }
.chip { font-family: var(--font-mono); font-size: 0.8rem; padding: 0.35em 0.75em; border-radius: 3px; background: var(--paper-2); border: 1px solid var(--hairline); }
.subblock { margin-top: 1.8rem; }
.subblock h2 { font-size: 1.3rem; margin-bottom: 0.8rem; }
.tick-list { display: grid; gap: 0.5rem; }
.tick-list li { position: relative; padding-left: 1.7em; color: var(--ink); }
.tick-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 10px; height: 10px; border-radius: 3px; background: var(--coral); transform: rotate(45deg); }

/* prose (legal / long text) */
.prose { max-width: 72ch; }
.prose h2 { margin-top: 2.6rem; margin-bottom: 0.8rem; font-size: var(--t-h3); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.7rem; margin-bottom: 0.35rem; font-size: 1.12rem; }
.prose p { color: var(--ink-soft); }
.prose address { font-style: normal; color: var(--ink-soft); line-height: 1.9; }
.prose ul { display: grid; gap: 0.55rem; margin-top: 0.7rem; }
.prose li { position: relative; padding-left: 1.4em; color: var(--ink-soft); }
.prose li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; background: var(--teal); border-radius: 2px; transform: rotate(45deg); }
.prose a { color: var(--blue); text-decoration: underline; text-decoration-color: var(--coral); text-underline-offset: 2px; }
.prose a:hover { color: var(--coral-deep); }

/* 13 · FIGURE (photos) --------------------------------------------------- */
.figure { margin: 0; }
.figure img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius); box-shadow: var(--shadow); background: var(--paper-2);
}
/* caption = stamped mono label with a tick in the care-phase colour */
.figure figcaption {
  position: relative; margin-top: 0.85rem; padding-left: 0.95rem;
  font-family: var(--font-mono); font-size: var(--t-eyebrow); letter-spacing: 0.1em;
  color: var(--ink-soft);
}
.figure figcaption::before {
  content: ""; position: absolute; left: 0; top: 0.5em;
  width: 4px; height: 1.1em; border-radius: 1px; background: var(--blue);
}
.figure--teal  figcaption::before { background: var(--teal); }
.figure--lilac figcaption::before { background: var(--lilac); }
.figure--coral figcaption::before { background: var(--coral-deep); }
/* neutral tick: subject belongs to no care phase (e.g. the rooms) */
.figure--plain figcaption::before { background: var(--ink-soft); }

/* photo beside prose; photo first on mobile, side by side from 820px */
.split { display: grid; gap: clamp(1.5rem, 4vw, 2.8rem); align-items: start; }
@media (min-width: 820px) {
  .split { grid-template-columns: 0.85fr 1.15fr; align-items: center; }
  .split--rev > .figure { order: 2; }
}
.split .section-head { margin-bottom: 0; }
.split + .journey, .split + .accordion, .split + .cardstack, .split + .grid { margin-top: clamp(2rem, 4vw, 3.2rem); }
/* No fixed ratio here: a square crop would cut people out of the group shots.
   Landscape sources stay uncropped; only tall portraits get capped in height. */
.split .figure img { max-height: 560px; object-fit: cover; }

/* gallery of rooms — same 3/4 frame as the team cards */
.gallery .figure img { aspect-ratio: 3 / 4; object-fit: cover; }
/* two wide tiles open and close the grid so seven photos fill three full rows.
   The 3/4 tiles set the row height; 3/2 keeps the wide tile from driving it,
   and height:100% stretches it to the row so every caption in a row lines up. */
.gallery .figure { height: 100%; display: grid; grid-template-rows: 1fr auto; }
.gallery .figure img { height: 100%; }
@media (min-width: 760px) {
  .gallery .figure--wide { grid-column: span 2; }
  .gallery .figure--wide img { aspect-ratio: 3 / 2; }
}

/* modest photo inside an opened accordion panel, natural proportions */
.accordion__panel-inner .figure { margin-top: 1.4rem; max-width: 420px; }
/* single photo, centred and held narrow — used where a section has no head to sit beside */
.figure--center { margin-inline: auto; max-width: 480px; }

/* two or three related shots side by side; no forced ratio, so nothing gets cropped */
.figstrip { margin-top: 1.4rem; display: grid; gap: 1rem; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); max-width: 620px; }
.accordion__panel-inner .figstrip .figure { margin-top: 0; max-width: none; }
/* only where a strip mixes portrait and landscape sources: one shared square,
   so the tiles end at the same height and the captions share a baseline */
.figstrip--even .figure img { aspect-ratio: 1 / 1; object-fit: cover; }

/* 14 · QUOTE ------------------------------------------------------------- */
.quote { max-width: 24ch; }
.quote blockquote { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.6rem, 1.2rem + 2vw, 2.8rem); line-height: 1.18; letter-spacing: -0.015em; }
.quote .mk { color: var(--coral-deep); }
.bigquote { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 820px) { .bigquote { grid-template-columns: 1.1fr 0.9fr; } }
.bigquote blockquote { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.7rem, 1.2rem + 2.4vw, 3rem); line-height: 1.16; letter-spacing: -0.02em; }
.bigquote cite { font-style: normal; font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); display: block; margin-top: 1.4rem; }

/* 15 · CONTACT / CTA ----------------------------------------------------- */
.cta {
  background: var(--blue); color: #fff; border-radius: var(--radius);
  padding: clamp(2rem, 5vw, 3.6rem);
  display: grid; gap: 1.5rem; align-items: center;
  position: relative; overflow: hidden;
}
@media (min-width: 760px) { .cta { grid-template-columns: 1.3fr 1fr; } }
.cta h2 { color: #fff; }
.cta p { color: rgba(255,255,255,0.85); margin-top: 0.8rem; }
.cta .eyebrow { color: rgba(255,255,255,0.75); }
/* Links im CTA-Block: .inline-link ist --blue, der Block ebenfalls. Ohne diese Regel
   steht blauer Text auf blauem Grund und nur die Unterstreichung bleibt sichtbar. */
.cta a.inline-link { color: #fff; text-decoration-color: var(--coral); }
.cta a.inline-link:hover { color: #fff; text-decoration-color: #fff; text-decoration-thickness: 3px; }

.cta__contact { display: grid; gap: 0.7rem; font-family: var(--font-mono); font-size: 0.95rem; }
.cta__contact a { display: inline-flex; gap: 0.6em; align-items: center; }
/* Rueckmeldung ueber die Unterstreichung statt ueber die Farbe: Koralle auf Blau
   erreicht nur 2,36:1 und faellt damit auch fuer grossen Text durch die AA-Schwelle. */
.cta__contact a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--coral);
  text-decoration-thickness: 2px; text-underline-offset: 3px; }

.contact-layout { display: grid; gap: clamp(1.8rem, 4vw, 3.2rem); align-items: start; }
@media (min-width: 860px) { .contact-layout { grid-template-columns: 1.25fr 0.9fr; } }

.infocard { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 1.6rem; box-shadow: var(--shadow); }
.infocard h3 { font-size: 1.15rem; margin-bottom: 0.8rem; }
.infocard .line { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.5rem 0; border-bottom: 1px dashed var(--hairline); }
.infocard .line:last-child { border-bottom: 0; }
.infocard .line .k { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); flex: 0 0 5.5rem; padding-top: 0.15rem; }

/* 16 · FOOTER ------------------------------------------------------------ */
.site-footer { background: var(--paper-2); margin-top: var(--section); }
.footer-grid { display: grid; gap: 2rem; padding-block: clamp(2.6rem, 5vw, 4rem); }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.site-footer .brand img { height: 78px; margin-bottom: 1rem; }
.site-footer p, .site-footer li { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.7; }
.footer-col h4 { font-size: 0.82rem; font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); margin-bottom: 1rem; }
.footer-col a:hover { color: var(--coral-deep); }
.footer-nav { display: grid; gap: 0.5rem; }
.footer-contact { display: grid; gap: 0.5rem; }
.footer-contact a { display: inline-flex; gap: 0.55em; align-items: center; }
.footer-bottom { border-top: 1px solid var(--hairline); }
.footer-bottom .container { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; justify-content: space-between; align-items: center; padding-block: 1.2rem; }
.footer-bottom, .footer-bottom a { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-soft); letter-spacing: 0.03em; }
/* Links in der Fusszeile sollen im Ruhezustand wie Text aussehen, also ohne
   Unterstreichung und in derselben Farbe. Ohne jede Rueckmeldung waeren sie aber
   nicht auffindbar, deshalb dunkelt der Hover sie ab. Betrifft auch Impressum und
   Datenschutz, die bisher gar keinen Hover hatten. Tastaturfokus liegt global
   auf :focus-visible. */
.footer-bottom a:hover { color: var(--ink); }
.footer-bottom nav { display: flex; gap: 1.2rem; }

/* 17 · UTILITIES / MOTION / BACK-TO-TOP --------------------------------- */
.back-to-top {
  position: fixed; right: 1.3rem; bottom: 1.3rem; z-index: 90;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--ink); color: var(--paper);
  display: grid; place-items: center; font-size: 1.2rem;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), background-color 0.2s;
  box-shadow: var(--shadow-lift);
}
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--coral-deep); }

[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: 0.08s; }
[data-reveal][data-delay="2"] { transition-delay: 0.16s; }
[data-reveal][data-delay="3"] { transition-delay: 0.24s; }

.center { text-align: center; }
.flex-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}