/* NICHT VON HAND BEARBEITEN.
   Die Sektionsstile der IVTM-Bloecke. Geschrieben von tools/css-teilen.py im
   Projektordner aus design/ivtm.css, Regel fuer Regel unveraendert und in der
   Reihenfolge des Entwurfs. Aenderungen im Entwurf machen, Skript neu laufen
   lassen. Die Marken-Tokens (--page, --brand, --w1 ...) kommen aus dem Theme. */

/* ---------- Buehne, Ansatz 2: Karte ueber die volle Breite ----------
   Die Karte wird zum Band unter dem Bild, ueber die ganze Containerbreite, und
   teilt sich innen in zwei Spalten. Bild und Band bilden einen Block mit
   gemeinsamer Rundung. Keine Restflaeche, weil die Karte die Breite fuellt. */
.hero{ padding-top:clamp(20px,3vw,34px); }
.hero__img{ border-radius:var(--r) var(--r) 0 0; aspect-ratio:21/8; }
/* Zwei Fotos nebeneinander, quer und hochkant. 2,25 zu 1 ist das Verhaeltnis, bei dem
   ein 3:2- und ein 2:3-Bild gleich hoch sind. Die Hoehe haengt an der Reihe, nicht
   am Bild, deshalb liegen die Bilder absolut im Feld. */
.hero__bilder{ display:grid; grid-template-columns:2.25fr 1fr; gap:clamp(6px,.9vw,12px);
  aspect-ratio:2.5/1; }
.hero__bilder .hero__img{ aspect-ratio:auto; min-height:0; border-radius:0; }
.hero__bilder .hero__img:first-child{ border-top-left-radius:var(--r); }
.hero__bilder .hero__img:last-child{ border-top-right-radius:var(--r); }
.hero__bilder .hero__img img{ position:absolute; inset:0; }
/* Die Karte greift weniger weit ins Bild als bei der einzelnen Buehne, sonst
   verschwinden die Schuhe der sitzenden Figur hinter ihr. */
.hero__bilder + .hero__card{ margin-top:clamp(-52px,-4vw,-30px); }
.hero__card{
  background:var(--surface); border-radius:0 0 var(--r) var(--r);
  margin:clamp(-80px,-6vw,-48px) 0 0; position:relative; z-index:2;
  padding:clamp(26px,3.4vw,46px);
  box-shadow:0 18px 48px -28px rgba(64,64,62,.4);
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px,4vw,56px); align-items:end;
}
.hero h1{ font-size:clamp(1.9rem,3.6vw,3.1rem); letter-spacing:-0.018em; text-wrap:balance; }
.hero__lead{ color:var(--ink-soft); font-size:.97rem; }
.hero__acts{ display:flex; gap:.9rem; flex-wrap:wrap; margin-top:1.4rem; }
@media (max-width:860px){
  .hero__card{ grid-template-columns:1fr; align-items:start; }
  .hero__bilder{ aspect-ratio:2.1/1; }
}
@media (max-width:560px){
  .hero__bilder{ aspect-ratio:1.75/1; }
  .hero__bilder + .hero__card{ margin-top:-18px; }
}

/* ---------- Anspruch ---------- */
.anspruch{ background:var(--sand); border-radius:var(--r); padding:clamp(32px,5vw,72px);
  margin-block:clamp(48px,7vw,104px); }
.anspruch__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,64px); align-items:center; }
.anspruch h2{ font-size:clamp(1.8rem,3.8vw,2.9rem); max-width:18ch; }
.anspruch p{ color:var(--ink-soft); }
/* Sand ist dunkel genug, dass brand-deep durchfaellt (3,92:1). */
.anspruch .mehr{ color:var(--ink); }

/* ---------- Kathrin ---------- */
.person{ background:var(--surface); border-radius:var(--r); overflow:hidden;
  display:grid; grid-template-columns:.8fr 1.2fr; align-items:stretch; }
.person__img{ aspect-ratio:auto; min-height:100%; }
.person__body{ padding:clamp(28px,4vw,60px); }
.person blockquote{ font-family:var(--serif); font-size:clamp(1.5rem,2.8vw,2.15rem);
  line-height:1.28; margin:0; }
.person cite{ display:block; font-style:normal; margin-top:1.6rem; font-size:.95rem; color:var(--ink-soft); }
.person cite b{ display:block; font-family:var(--sans); font-size:.73rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:var(--brand-deep); margin-bottom:.3em; }
/* Startseite: das Foto traegt den Block. Hochkant, Gesicht im oberen Drittel. */
.person--gross{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:stretch;
  margin-block:clamp(48px,7vw,104px); }
.person--gross .person__img{ min-height:clamp(420px,42vw,600px); }
.person--gross .person__img img{ object-position:50% 24%; }
.person--gross .person__body{ align-self:center; }

/* ---------- Ansatz ---------- */
.flow{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,2vw,24px); margin-top:2.6rem; }
.flow__it{ background:var(--surface); border-radius:var(--r-sm); padding:clamp(22px,2.6vw,32px); }
.flow__no{ display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%;
  background:var(--brand); color:var(--white); font-family:var(--sans); font-size:.72rem; font-weight:600; }
.flow h3{ font-size:1.4rem; margin:.75em 0 .35em; }
.flow p{ font-size:.93rem; color:var(--ink-soft); }

/* ---------- Werte ---------- */
.werte{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,24px); margin-top:2.4rem; }
.wert{ background:var(--surface); border-radius:var(--r-sm); padding:clamp(22px,2.4vw,30px); }
.wert svg{ width:28px; height:28px; color:var(--brand); margin-bottom:.9rem; }
.wert h3{ font-size:1.2rem; margin-bottom:.35em; }
.wert p{ font-size:.92rem; color:var(--ink-soft); }

/* ---------- Kontakt ---------- */
.kontakt{ background:var(--brand); color:var(--white); border-radius:var(--r);
  padding:clamp(40px,5.6vw,92px); margin-bottom:clamp(48px,7vw,104px); }
.kontakt__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,4vw,64px); align-items:center; }
.kontakt h1,.kontakt h2{ font-size:clamp(1.9rem,4vw,3rem); max-width:17ch; }
.kontakt .eyebrow{ color:rgba(255,255,255,.82); }
/* Groesser und luftiger, der einzige Wunsch des Kunden an diesem Block.
   Kein zusaetzlicher Inhalt, nur mehr Luft und groessere Schrift. */
.kontakt p{ color:rgba(255,255,255,.92); font-size:1.18rem; line-height:1.75;
  margin-top:1.6rem; max-width:44ch; }
.kontakt .btn{ font-size:.92rem; padding:1.05em 2.2em; margin-top:2.2rem; }
.kontakt .btn--ghost{ color:var(--white); border-color:rgba(255,255,255,.65); }
.kontakt .btn--ghost:hover{ background:var(--white); color:var(--brand-deep); border-color:var(--white); }
.kontakt__meta{ font-size:1.12rem; line-height:1.85; color:rgba(255,255,255,.9); }
.kontakt__meta b{ display:block; font-family:var(--sans); font-size:.78rem; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.72); margin:1.8rem 0 .4em; }
.kontakt__meta div:first-child b{ margin-top:0; }
.kontakt__meta a{ display:inline-block; padding-block:3px; color:var(--white);
  text-decoration:underline; text-underline-offset:.22em; }
.kontakt__meta a:hover{ text-decoration:none; }
.kontakt__meta address{ font-style:normal; }

/* ---------- Mobil ---------- */
@media (max-width:980px){
  .flow{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .werte{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:860px){
  .anspruch__grid,.person,.kontakt__grid{ grid-template-columns:1fr; }
  /* Gestapelt bestimmt allein das Seitenverhaeltnis die Hoehe. Das Bild liegt deshalb
     absolut im Rahmen: steht es im Fluss, nimmt WebKit seine Eigenhoehe als Zeilenhoehe,
     streckt den Rahmen darauf und rechnet die Breite ueber aspect-ratio zurueck
     (Rahmen 1367 px in einer 729-px-Spalte, Foto um die Haelfte beschnitten). */
  .person__img{ aspect-ratio:16/9; min-height:0; align-self:start; justify-self:stretch; }
  .person__img img{ position:absolute; inset:0; }
  .person--gross .person__img{ min-height:0; aspect-ratio:1/1; }
}
/* Zwischen Handy und Zweispalter waere ein Quadrat ueber die volle Breite zu wuchtig. */
@media (min-width:560px) and (max-width:860px){
  .person--gross .person__img{ aspect-ratio:3/2; }
  .person--gross .person__img img{ object-position:50% 15%; }
}
@media (max-width:560px){
  .flow,.werte{ grid-template-columns:1fr; }
  .hero__card{ margin-top:-28px; }
}



/* ---------- Startseite: die fuenf Leistungswelten ----------
   Mail 1 woertlich: "direkt unterhalb des Hero-Bereichs horizontal nebeneinander
   und gut sichtbar". Also fuenf Spalten, nicht fuenf Zeilen.
   Angelehnt an Richtung G, aber ohne vollflaechige Farbkacheln: der Grund bleibt
   die Seitenfarbe, die Welten unterscheiden sich ueber Typografie, Icon und eine
   feine Kante in der Weltfarbe. Auf Sand duerfte das nicht stehen, dort fallen
   drei der fuenf Weltfarben unter AA. */
.welten5{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(18px,2.4vw,36px); margin-top:clamp(32px,4.5vw,58px); }
.welt5{ display:flex; flex-direction:column; align-items:flex-start; gap:.5rem;
  text-decoration:none; color:inherit;
  border-top:2px solid var(--wc); padding-top:1.3rem; }
.welt5__ic{ width:44px; height:44px; border-radius:50%; flex:none;
  border:1.5px solid var(--wc); color:var(--wc); display:grid; place-items:center;
  transition:background-color .18s ease, color .18s ease; }
.welt5__ic svg{ width:22px; height:22px; }
.welt5__ebene{ font-family:var(--sans); font-size:.68rem; font-weight:600; letter-spacing:.17em;
  text-transform:uppercase; color:var(--wc); margin-top:.35rem; }
.welt5__name{ font-size:clamp(1.08rem,1.5vw,1.3rem); line-height:1.18; color:var(--wc); }
.welt5__claim{ font-size:.88rem; line-height:1.5; color:var(--ink-soft); }
.welt5__mehr{ margin-top:auto; padding-top:1rem; font-family:var(--sans); font-size:.7rem;
  font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--wc); }
.welt5__mehr::after{ content:' \2192'; }
.welt5:hover .welt5__name{ text-decoration:underline; text-underline-offset:.18em; }
.welt5:hover .welt5__ic{ background:var(--wc); color:var(--white); }
.welten5__fuss{ margin-top:clamp(28px,3.6vw,44px); }

/* Fuenf Spalten tragen bis etwa 1040 px, danach werden die Weltnamen zu schmal. */
@media (max-width:1040px){ .welten5{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:700px){ .welten5{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:460px){ .welten5{ grid-template-columns:1fr; } }

/* Teamanriss auf der Startseite: kleine runde Portraets, wie in Runde 1.
   Sie waren beim Umbau verlorengegangen, ohne dass eine Mail das verlangt haette. */
.anriss__koepfe{ display:flex; flex-wrap:wrap; gap:clamp(10px,1.4vw,18px);
  margin-top:1.6rem; }
.anriss__kopf{ width:clamp(56px,6vw,74px); aspect-ratio:1/1; border-radius:50%;
  overflow:hidden; background:var(--sand); flex:none;
  box-shadow:inset 0 0 0 1px rgba(64,64,62,.14); }
.anriss__kopf img{ width:100%; height:100%; object-fit:cover;
  filter:saturate(.88) contrast(1.02) sepia(var(--waerme,0)); }

/* ---------- Anrisse: nur Ueberschriften, Fliesstext steht auf Ueber IVTM ----------
   Der Kunde hat je Block nur eine Fassung geliefert, die lange. Statt eine
   Kurzfassung zu erfinden, zeigt die Startseite die Ueberschriften und verweist. */
.anriss{ border-top:1px solid var(--line); padding-top:clamp(26px,3.4vw,40px);
  margin-top:clamp(40px,5vw,64px); }
.anriss__zwei{ margin-top:clamp(30px,4vw,48px); }
.anspruch__satz{ font-family:var(--serif); font-size:clamp(1.25rem,2.4vw,1.6rem);
  line-height:1.3; color:var(--ink); }
.anriss__kette{ list-style:none; margin:1.6rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.6rem 1.9rem; }
.anriss__kette li{ font-family:var(--serif); font-size:clamp(1.05rem,1.8vw,1.3rem);
  display:flex; gap:.6rem; align-items:baseline; }
.anriss__kette b{ font-family:var(--sans); font-size:.72rem; font-weight:600;
  letter-spacing:.14em; color:var(--brand-deep); }
.anriss__raster{ list-style:none; margin:1.6rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.7rem clamp(20px,3vw,40px); }
.anriss__raster--vier{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.anriss__raster li{ font-family:var(--serif); font-size:clamp(1.02rem,1.7vw,1.22rem);
  line-height:1.3; border-top:1px solid var(--line); padding-top:.75rem; }
.mehr{
  display:inline-block; margin-top:1.8rem; font-family:var(--sans); font-size:.78rem;
  font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--brand-deep);
  text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:.3em;
}
.mehr:hover{ color:var(--ink); }
.mehr::after{ content:' →'; }
@media (max-width:760px){ .anriss__raster{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
@media (max-width:520px){ .anriss__raster,.anriss__raster--vier{ grid-template-columns:1fr; } }

/* ---------- Leistungsuebersicht: die gestapelten Baender aus Richtung G ---------- */
.welt{ background:var(--wt); }
.welt__in{ display:grid; grid-template-columns:auto 1fr minmax(200px,290px); gap:clamp(22px,4vw,56px);
  padding-block:clamp(44px,6vw,88px); align-items:start; }
/* Ohne align-self blieb unter jedem Foto bis zu 327 px leere Tintflaeche. */
.welt__bild{ align-self:stretch; min-height:220px; border-radius:var(--r-sm); }
.welt__mark{ display:flex; flex-direction:column; align-items:center; gap:.9rem; }
.welt__badge{
  width:72px; height:72px; border-radius:50%; background:var(--wc); color:var(--white);
  display:grid; place-items:center; flex:none;
}
.welt__badge svg{ width:34px; height:34px; }
.welt__no{ font-family:var(--sans); font-size:.75rem; font-weight:600; letter-spacing:.16em; color:var(--wc); }
.welt__etage{
  writing-mode:vertical-rl; font-family:var(--sans); font-size:.7rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--wc); margin-top:.4rem;
}
.welt h2{ font-size:clamp(1.65rem,3.4vw,2.5rem); color:var(--wc); }
.welt__claim{ font-family:var(--serif); font-size:clamp(1.1rem,2vw,1.32rem); color:var(--ink); margin:.4em 0 .9em; }
.welt__txt{ max-width:62ch; color:var(--ink-soft); }
.welt__list{ list-style:none; margin:1.5rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem 1.6rem; }
.welt__list li{ font-size:.94rem; color:var(--ink); display:flex; gap:.6rem; align-items:baseline;
  border-top:1px solid color-mix(in srgb, var(--wc) 22%, transparent); padding-top:.55rem; }
.welt__list li::before{ content:''; width:.36rem; height:.36rem; background:var(--wc); flex:none; border-radius:50%; }
.welt__more{
  display:inline-block; margin-top:1.7rem; font-family:var(--sans); font-size:.78rem; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--wc); text-decoration:none;
  border-bottom:1px solid currentColor; padding-bottom:.25em;
}
.welt__more::after{ content:' →'; }
.welt__more:hover{ color:var(--ink); }
@media (max-width:980px){
  .welt__in{ grid-template-columns:auto 1fr; }
  .welt__bild{ grid-column:1 / -1; aspect-ratio:auto; min-height:0;
    height:clamp(170px,30vw,260px); }
}
@media (max-width:620px){
  .welt__in{ grid-template-columns:1fr; }
  .welt__mark{ flex-direction:row; align-items:center; gap:1rem; }
  .welt__etage{ writing-mode:horizontal-tb; margin-top:0; }
  .welt__list{ grid-template-columns:1fr; }
}

/* Bildband der Weltseite. Dasselbe Foto wie auf der Uebersicht, damit die
   Hauptseiten des Angebots nicht die einzigen ohne visuellen Anker sind. */
.weltband{ border-radius:var(--r); height:clamp(160px,22vw,280px); margin-bottom:clamp(28px,4vw,52px); }

/* ---------- Weltseite: die sechs Leistungsfelder ----------
   Bewusst kompakt, so hat der Kunde es verlangt: kurze Erlaeuterung und die
   Formate, keine langen Textseiten. */
.felder{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,2.6vw,36px);
  margin-top:clamp(28px,4vw,44px); }
.feldkopf{ font-size:clamp(1.4rem,2.6vw,1.9rem); }
.feld{ border-top:2px solid var(--wc); padding-top:1.2rem; }
.feld h3{ font-size:clamp(1.18rem,2vw,1.4rem); color:var(--ink); }
.feld p{ font-size:.95rem; color:var(--ink-soft); margin-top:.6em; }
.feld__formate{ margin-top:.9rem; font-size:.88rem; color:var(--ink-soft); }
.feld__formate b{ display:block; font-family:var(--sans); font-size:.68rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:var(--wc); margin-bottom:.4em; }
.feld__mehr{ display:inline-block; margin-top:.9rem; padding-top:2px; font-family:var(--sans); font-size:.72rem;
  font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--wc);
  text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:.25em; }
.feld__mehr::after{ content:' →'; }
@media (max-width:760px){ .felder{ grid-template-columns:1fr; } }

/* Weiter zur naechsten Welt */
.weiter{ border-top:1px solid var(--line); margin-top:clamp(40px,6vw,72px); padding-block:2rem;
  display:flex; flex-wrap:wrap; gap:1.2rem 2.4rem; justify-content:space-between; align-items:center; }
.weiter a{ display:inline-block; padding-block:5px; font-family:var(--sans); font-size:.8rem; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; text-decoration:none; color:var(--brand-deep); }

/* ---------- Ueber IVTM: Zielgruppen als Bloecke, nicht mehr als Pillen ---------- */
.zgb{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(22px,3vw,44px); margin-top:2.4rem; }
.zgb__it{ border-top:2px solid var(--brand); padding-top:1.2rem; }
.zgb__it h3{ font-size:clamp(1.15rem,2vw,1.38rem); }
.zgb__it p{ font-size:.95rem; color:var(--ink-soft); margin-top:.55em; }
@media (max-width:760px){ .zgb{ grid-template-columns:1fr; } }

/* ---------- Ueber IVTM: Kooperationen ---------- */
.koop{ background:var(--surface); border-radius:var(--r); padding:clamp(28px,4vw,64px);
  margin-block:clamp(40px,6vw,88px); }
.koop__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(26px,4vw,56px); margin-top:2.2rem; }
.koop__it h3{ font-size:clamp(1.15rem,2vw,1.4rem); }
.koop__it p{ font-size:.95rem; color:var(--ink-soft); margin-top:.7em; }
.koop__fuss{ font-size:.82rem; color:var(--ink-soft); margin-top:1rem; }
.koop__logos{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; margin-top:1.4rem; }
.koop__logo{ border:1px dashed var(--taupe); border-radius:var(--r-sm); padding:.9em 1.4em;
  font-family:var(--sans); font-size:.7rem; font-weight:500; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-soft); }
@media (max-width:760px){ .koop__grid{ grid-template-columns:1fr; } }

/* ---------- Detailseite fuer Unterleistungen ---------- */
.detail__grid{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr);
  gap:clamp(28px,4vw,64px); align-items:start; }
.detail__txt p{ color:var(--ink-soft); }
.detail__box{ background:var(--surface); border-radius:var(--r); padding:clamp(22px,3vw,34px); }
.detail__box h2{ font-size:1.2rem; }
.detail__box ul{ list-style:none; margin:1.1rem 0 0; padding:0; }
.detail__box li{ font-size:.94rem; color:var(--ink-soft); border-top:1px solid var(--line);
  padding:.6rem 0; }
.detail__box li:first-child{ border-top:0; padding-top:0; }
@media (max-width:860px){ .detail__grid{ grid-template-columns:1fr; } }

/* Abbindender Aufruf auf allen Seiten ausser der Kontaktseite. Gleiche gruene
   Flaeche, aber einspaltig und ohne die Kontaktdaten, die ohnehin im Fuss stehen. */
.kontakt--cta{ text-align:center; }
.wrap--kontakt{ padding-top:clamp(28px,4vw,56px); }
.kontakt--cta h1,.kontakt--cta h2{ margin-inline:auto; }
.kontakt--cta p{ margin-inline:auto; }

/* ---------- Teamseite ----------
   Acht Portraets, auf dem Desktop zwei Reihen zu vier. Der Zeilenabstand ist
   deutlich groesser als der Spaltenabstand, damit das Raster atmet.
   Klassennamen bewusst .mitglied und .profil: .person gehoert schon zum
   Zitatblock, .detail zur Detailseite. */
.team__raster{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:clamp(18px,2.6vw,36px); row-gap:clamp(48px,6vw,86px);
  padding-top:clamp(28px,4vw,56px); padding-bottom:clamp(64px,9vw,120px); }
.mitglied{ background:none; border:0; padding:0; cursor:pointer; text-align:center; font:inherit;
  display:flex; flex-direction:column; align-items:center; gap:.7rem; }
.mitglied__foto{ display:block; width:100%; aspect-ratio:1/1; border-radius:50%; overflow:hidden;
  background:var(--sand); box-shadow:inset 0 0 0 1px rgba(64,64,62,.14);
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease; }
.mitglied__foto img{ width:100%; height:100%; object-fit:cover;
  filter:saturate(.88) contrast(1.02) sepia(var(--waerme,0)); }
.mitglied:hover .mitglied__foto,.mitglied:focus-visible .mitglied__foto{
  transform:translateY(-5px) scale(1.03); box-shadow:0 16px 32px -20px rgba(64,64,62,.6); }
.mitglied__foto.ph{ aspect-ratio:1/1; }
.mitglied__name{ font-family:var(--serif); font-size:1.15rem; line-height:1.2; }
.mitglied__rolle{ font-family:var(--sans); font-size:.72rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-soft); max-width:22ch; }

/* ---------- Profil-Overlay ----------
   Natives <dialog> mit showModal(). Das bringt Fokusfalle, Escape, Stilllegung
   des Hintergrunds und die oberste Ebene ohne eigenen Code mit. */
.profil{ border:0; padding:0; background:var(--page); color:var(--ink);
  width:min(100% - 2rem, var(--wrap)); height:min(90vh, 860px); border-radius:18px;
  overflow:hidden; box-shadow:0 40px 90px -50px rgba(64,64,62,.8);
  display:flex; flex-direction:column; }
/* KEIN position:relative hier. Das wuerde dialog:modal{position:fixed} aus dem
   Benutzeragenten-Stilblatt aushebeln, das Blatt haengt dann am Dokument statt
   am Sichtfeld und sein oberer Teil rutscht auf schmalen Ansichten aus dem Bild.
   Der Schliessen-Knopf bezieht sich stattdessen auf .profil__in. */
.profil:not([open]){ display:none; }
.profil::backdrop{ background:rgba(64,64,62,.55); backdrop-filter:blur(3px); }
.profil__in{ position:relative; display:grid; grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);
  gap:clamp(24px,3.4vw,52px); padding:clamp(28px,3.6vw,52px) 0 0; flex:1; min-height:0;
  overflow:hidden; }
/* Nur die Textspalte laeuft. Portraet und Claim bleiben stehen. */
/* Auch die linke Spalte ist hoehenbegrenzt und laeuft bei Bedarf. Vorher
   schob ein hohes Foto samt Claim unter die Leiste, und weil .profil__in
   positioniert ist, wurde es sogar darueber gemalt. */
.profil__links{ padding-left:clamp(28px,3.6vw,52px); padding-right:4px; padding-bottom:clamp(24px,3vw,40px);
  min-height:0; overflow:auto; scrollbar-width:thin; scrollbar-color:var(--taupe) transparent; }
.profil__rechts{ overflow:auto; padding:0 clamp(28px,3.6vw,52px) clamp(24px,3vw,40px) 0;
  scrollbar-width:thin; scrollbar-color:var(--taupe) transparent; overscroll-behavior:contain;
  mask-image:linear-gradient(to bottom, #000 calc(100% - 28px), transparent); }
.profil__rechts::-webkit-scrollbar{ width:8px; }
.profil__rechts::-webkit-scrollbar-track{ background:transparent; }
.profil__rechts::-webkit-scrollbar-thumb{ background:var(--taupe); border-radius:99px; }
.profil__rechts::-webkit-scrollbar-thumb:hover{ background:var(--brand); }
/* Zwei Fassungen des Portraets, umgeschaltet ueber body[data-portraet].
   "rund": gleicher Kreis wie im Raster, ruhig und einheitlich.
   "voll": das ganze Bild im Originalformat, so wie Kathrin es erwartet hat. */
.profil__foto{ display:block; overflow:hidden;
  background:var(--sand); box-shadow:inset 0 0 0 1px rgba(64,64,62,.14); }
[data-portraet="rund"] .profil__foto{ aspect-ratio:1/1; border-radius:50%; }
[data-portraet="rund"] .profil__bild--voll{ display:none; }
/* Das Bild bekommt keine feste Breite. Mit width:100% plus object-fit:contain
   hatte es bei hohen Fotos unsichtbaren Rand links und rechts, und die Rundung
   sass an diesem Rand statt am Bild. Jetzt ist der Bildkasten genau so gross wie
   das sichtbare Bild, und jede Rundung liegt an einer sichtbaren Kante. */
[data-portraet="voll"] .profil__foto{ display:flex; justify-content:center; align-items:flex-start;
  border-radius:0; overflow:visible; box-shadow:none; background:none; }
[data-portraet="voll"] .profil__bild--rund{ display:none; }
[data-portraet="voll"] .profil__foto img{ width:auto; height:auto; max-width:100%;
  max-height:min(52vh, 560px); object-fit:unset; border-radius:var(--r-sm); }
.profil__foto img{ width:100%; height:100%; object-fit:cover;
  filter:saturate(.88) contrast(1.02) sepia(var(--waerme,0)); }
.profil__foto.ph{ aspect-ratio:1/1; }
.profil h2{ font-size:clamp(1.7rem,3vw,2.4rem); margin-bottom:.7rem; }
.profil p{ font-size:.98rem; color:var(--ink-soft); }
.profil__claim{ font-family:var(--serif); font-size:1.1rem; color:var(--ink); margin-top:1.4rem;
  text-align:center; }
.profil__schwerkopf{ margin:1.8rem 0 0; }
.profil__zusatz{ margin-top:.6rem; font-size:.94rem; }
.profil__schwer{ list-style:none; margin:1.6rem 0 0; padding:0; display:grid; gap:.9rem; }
.profil__schwer li{ border-left:3px solid var(--wc,var(--brand-deep)); padding-left:1rem;
  font-size:.94rem; color:var(--ink-soft); }
.profil__schwer b{ display:block; font-family:var(--sans); font-size:.7rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--wc,var(--brand-deep));
  margin-bottom:.2em; }
.profil__pers{ margin-top:1.4rem; padding-top:1.2rem; border-top:1px solid var(--line);
  font-style:italic; }
.profil__zu{ position:absolute; top:12px; right:12px; z-index:5;
  width:44px; height:44px; border-radius:50%; border:0; cursor:pointer; font-size:1.5rem;
  line-height:1; background:var(--surface); color:var(--ink);
  box-shadow:0 2px 10px -4px rgba(64,64,62,.5); }
.profil__zu:hover{ background:var(--sand); }
.profil__nav{ position:relative; z-index:1; display:flex; justify-content:space-between; gap:1rem;
  flex:none; padding:clamp(14px,1.6vw,20px) clamp(28px,3.6vw,52px);
  border-top:1px solid var(--line); background:var(--page); }
.profil__nav button{ background:none; border:1px solid var(--line); border-radius:999px;
  padding:.7em 1.4em; cursor:pointer; font-family:var(--sans); font-size:.78rem;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink); }
.profil__nav button:hover{ background:var(--surface); }

/* Weiches Auf und Zu ueber Keyframes statt @starting-style: das dialog-Element
   liegt bei rund 97 Prozent Abdeckung, @starting-style bei rund 92. So bekommt
   fast jeder die Bewegung, nicht nur die neueren Browser. */
@keyframes d-auf  { from{ opacity:0; transform:translateY(12px) scale(.96) } to{ opacity:1; transform:none } }
@keyframes d-zu   { from{ opacity:1; transform:none } to{ opacity:0; transform:translateY(8px) scale(.98) } }
@keyframes bg-auf { from{ opacity:0 } to{ opacity:1 } }
@keyframes bg-zu  { from{ opacity:1 } to{ opacity:0 } }
.profil[open]{ animation:d-auf .28s cubic-bezier(.2,.7,.3,1) both; }
.profil[open]::backdrop{ animation:bg-auf .28s ease both; }
.profil.zu{ animation:d-zu .2s ease both; }
.profil.zu::backdrop{ animation:bg-zu .2s ease both; }

/* Das Portraet wandert vom Raster in die Detailansicht. Zugabe: fehlt die
   View Transitions API, oeffnet und schliesst der Dialog trotzdem einwandfrei. */
::view-transition-group(portraet){ animation-duration:.42s;
  animation-timing-function:cubic-bezier(.2,.7,.3,1); }
::view-transition-old(portraet),::view-transition-new(portraet){ animation:none; mix-blend-mode:normal; }

@media (max-width:860px){
  .team__raster{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:clamp(36px,9vw,56px); }
  /* Auf dem Handy ein Blatt, das von unten hereinfaehrt und die Breite fuellt. */
  .profil{ width:100%; max-width:none; height:auto; max-height:92dvh;
    margin:auto auto 0; border-radius:20px 20px 0 0; }
  .profil__in{ grid-template-columns:1fr; gap:1.4rem;
    padding:clamp(22px,5vw,32px) clamp(20px,5vw,28px) 0; overflow:auto;
    scrollbar-width:thin; scrollbar-color:var(--taupe) transparent; }
  /* Auf dem Handy laeuft das ganze Blatt (.profil__in), nicht die Fotospalte.
     Als eigener Rollbereich hat sie im Raster die Mindesthoehe null, und
     sobald der Text das Blatt fuellt, bekommt die Fotozeile genau diese null:
     das Foto ist da, aber in einer Zeile ohne Hoehe weggeschnitten. Beides
     muss zurueck: overflow UND min-height. Mit min-height:0 allein bleibt die
     Zeile bei null, auch ohne Rollbereich. */
  .profil__links{ padding:0 52px 0 0; overflow:visible; min-height:auto; }
  /* Vorher 96 px breit, also kleiner als der angeklickte Kreis im Raster.
     Jetzt fuellt das Bild die Blattbreite. */
  [data-portraet="voll"] .profil__foto{ width:100%; }
  [data-portraet="voll"] .profil__foto img{ max-height:38vh; max-width:100%; }
  [data-portraet="rund"] .profil__foto{ width:120px; }
  [data-portraet="rund"] .profil__links{ display:flex; align-items:center; gap:1.1rem; }
  .profil__claim{ margin:0; text-align:left; font-size:1rem; }
  /* Im Vollbild steht der Leitsatz unter dem Foto, nicht daneben. Er braucht Luft. */
  [data-portraet="voll"] .profil__claim{ margin-top:.9rem; }
  .profil__rechts{ overflow:visible; padding:0; mask-image:none; }
  .profil__nav{ padding:1rem clamp(20px,5vw,28px) calc(1rem + env(safe-area-inset-bottom)); }
  @keyframes d-auf{ from{ opacity:0; transform:translateY(100%) } to{ opacity:1; transform:none } }
  @keyframes d-zu { from{ opacity:1; transform:none } to{ opacity:0; transform:translateY(100%) } }
}
@media (prefers-reduced-motion:reduce){
  .profil,.profil::backdrop{ transition:none; }
  .mitglied__foto{ transition:none; }
}

/* ---------- Kundenstimmen ----------
   Der Block aus Runde 3, jetzt zweimal untereinander: Portraet links, Zitat
   rechts, Name unter dem Zitat. Das Portraet ist kleiner als in Runde 3
   (max. 104 statt 124 px), weil Kathrin es zu praesent fand. */
.stimmen__block{ padding-block:clamp(40px,6vw,88px) 0; }
.stimmen{ display:grid; gap:clamp(18px,2.4vw,32px); margin-top:clamp(24px,3vw,38px); }
.stimme{ background:var(--surface); border-radius:var(--r); margin:0;
  padding:clamp(26px,3.4vw,48px); display:grid;
  grid-template-columns:auto minmax(0,1fr); gap:clamp(20px,3vw,44px); align-items:start; }
.stimme__foto{ display:block; width:clamp(80px,8vw,104px); aspect-ratio:1/1; border-radius:50%;
  overflow:hidden; flex:none; background:var(--sand);
  box-shadow:inset 0 0 0 1px rgba(64,64,62,.14); }
.stimme__foto img{ width:100%; height:100%; object-fit:cover;
  filter:saturate(.88) contrast(1.02) sepia(var(--waerme,0)); }
.stimme blockquote{ margin:0; font-family:var(--serif);
  font-size:clamp(1.1rem,1.8vw,1.38rem); line-height:1.45; color:var(--ink); }
.stimme cite{ display:block; font-style:normal; margin-top:1.2rem; font-size:.95rem;
  color:var(--ink-soft); }
.stimme cite b{ display:block; font-family:var(--sans); font-size:.73rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:var(--brand-deep); margin-bottom:.3em; }
@media (max-width:640px){ .stimme{ grid-template-columns:1fr; gap:1rem; } }

/* ---------- Kooperationslogos ----------
   Auflage der Hochschule Hamm-Lippstadt: das Logo steht immer auf weissem Grund,
   der Schutzraum bleibt unbeschnitten, die Proportionen werden nicht verzerrt.
   Deshalb weisse Kachel mit Innenabstand und object-fit:contain, nicht cover. */
/* Zwei Partnerlogos, gleich gross. Das eigene Logo steht nicht dazwischen:
   auf der eigenen Seite gehoert es nicht in eine Partnerreihe (Kathrin, 29.09.). */
.koop__logos{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.8vw,24px); align-items:stretch; margin-top:1.8rem;
  max-width:560px; }
.koop__logo{ background:var(--white); border-radius:var(--r-sm);
  padding:clamp(16px,2vw,24px); display:grid; place-items:center;
  min-height:96px; border:0; }
.koop__logo img{ max-width:100%; max-height:52px; width:auto; height:auto;
  object-fit:contain; }
.koop__logo--offen{ background:var(--white); border:1px dashed var(--taupe);
  font-family:var(--sans); font-size:.68rem; font-weight:500; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-soft); text-align:center; }
@media (max-width:620px){ .koop__logos{ grid-template-columns:1fr; } }

/* ============================================================
   Block-Zusaetze, die der Entwurf nicht kennt
   ------------------------------------------------------------
   Aus tools/block-zusatz.css. Nur, was erst der Block-Aufbau
   noetig macht.
   ============================================================ */

/* ivtm/abschnitt, der freie Abschnitt mit Core-Bloecken darin */
.ivtm-abschnitt{ padding-block:var(--sect); }
.ivtm-abschnitt--flaeche-surface{ background:var(--surface); }
.ivtm-abschnitt--flaeche-sand{ background:var(--sand); }
.ivtm-abschnitt__inhalt{ margin-top:1.6rem; max-width:66ch; }
.ivtm-abschnitt__inhalt > *:last-child{ margin-bottom:0; }
.ivtm-abschnitt__inhalt ul,
.ivtm-abschnitt__inhalt ol{ margin:0 0 1em; padding-left:1.3em; }
.ivtm-abschnitt__inhalt li{ margin-bottom:.35em; }

/* Im Entwurf trug body[data-portraet] den Schalter rund/voll. Im Block traegt
   ihn das Raster, die Regeln in sektionen.css greifen unveraendert, weil sie
   nur einen Vorfahren mit dem Attribut verlangen. Ein geschlossenes <dialog>
   ist display:none und damit kein Rasterelement, ein offenes liegt in der
   obersten Ebene. Deshalb duerfen die Dialoge im Raster stehen. */

/* Detailseite: die linke Spalte traegt Core-Ueberschriften und Absaetze */
.detail__txt h2{ font-size:clamp(1.3rem,2.4vw,1.7rem); margin-top:clamp(28px,3.4vw,44px); }
.detail__txt h2:first-child{ margin-top:0; }
.detail__txt p{ margin-top:.8em; }

/* Anriss: im Entwurf traegt die erste Ueberschrift keinen Abstand nach oben,
   die folgenden schon (.anriss__zwei). Im Block bekommen alle die Klasse, und
   die erste verliert den Abstand hier. */
.anriss > .eyebrow + .anriss__zwei{ margin-top:0; }

/* Kundenstimme: im Block bilden Zitat und Quelle das <figure>, die Karte ist
   ein div (gueltiges HTML, siehe kundenstimme/render.php). Das <figure> bringt
   vom Browser einen Aussenabstand mit, der hier wegfaellt. Ohne Foto laeuft
   der Text ueber die ganze Breite. */
.stimme > figure{ margin:0; }
.stimme--ohne-foto{ grid-template-columns:minmax(0,1fr); }