/* The structural preview shares PORTAL's existing palette, type and navigation. */
.content-page { background: #fff; }
.content-page .header { color: var(--ink-warm); border-color: var(--rule-warm); align-items: center; }
.content-page .header-brand img { filter: brightness(0); }
.header nav a[aria-current="page"]::after { transform: scaleX(1); }
.content-main { background: linear-gradient(var(--page-tint) 0, #fff 34rem); position: relative; isolation: isolate; overflow: clip; }
.content-main > .section { background: transparent; padding-top: clamp(3rem,6vw,6rem); position: relative; z-index: 1; }
.content-main h1 { font: 400 var(--section-heading-size)/1.14 var(--font); letter-spacing: -.04em; text-wrap: balance; }
.content-main .about-intro { margin-bottom: clamp(3rem,6vw,6rem); max-width: 70rem; }
.content-main .about .bios { display: grid; gap: clamp(3rem,6vw,6rem); max-width: 70rem; padding-top: clamp(2.5rem,4.5vw,4rem); border-top: 1px solid #e4e0d9; }
.content-main .about .bio-profile { display: grid; grid-template-columns: 10rem minmax(0,1fr); gap: clamp(2rem,5vw,4.5rem); width: 100%; padding: 0; border: 0; scroll-margin-top: 7rem; }
/* Round portraits with the fine ring of the original About section, kept small. */
.content-main .about .portrait { width: 8.75rem; height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; object-position: center 32%; grid-area: auto; margin: 7px; outline: 1px solid var(--portrait-ring); outline-offset: 6px; }
.content-main .about .bio-profile + .bio-profile { justify-self: stretch; }
.content-main .bio-copy { display: block; min-width: 0; }
.content-main .bio-copy h2 { font: 400 1.875rem/1.2 var(--font); letter-spacing: -.025em; margin-bottom: 8px; }
.content-main .bio-description { max-width: 52rem; }
.content-main .faq-inner { width: 100%; max-width: none; margin-inline: 0; position: relative; z-index: 1; }
.content-main .faq-heading { margin-bottom: clamp(1rem,1.8vw,1.5rem); }
/* Reuse About's contours; keep their visible strokes inside the free page gutters. */
.faq-page-waves {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right,#000 var(--gutter),transparent var(--gutter),transparent calc(100% - var(--gutter)),#000 calc(100% - var(--gutter)));
  mask-image: linear-gradient(to right,#000 var(--gutter),transparent var(--gutter),transparent calc(100% - var(--gutter)),#000 calc(100% - var(--gutter)));
}

.team-section + .faq.section { border-top: 0; background: var(--warm-white); overflow: clip; padding-top: clamp(3rem,5vw,4.75rem); }
.faq .service-cta { margin-top: 2rem; }
/* The FAQ now precedes the closing invitation. Match its warm background. */
.outlook.section::after {
  background: linear-gradient(to bottom,var(--warm-white) 0,rgba(248,246,242,0) 5.5rem),
    radial-gradient(ellipse 48% 75% at 78% 48%,rgba(254,252,248,.62),rgba(254,252,248,0) 72%);
}
@media (max-width:700px) {
  .content-main > .section { padding-top: 2.5rem; }
  .content-main .about .bio-profile { grid-template-columns: 1fr; gap: 1.5rem; }
  .content-main .about .portrait { width: 7rem; }
  .outlook.section::after { background: linear-gradient(to bottom,var(--warm-white) 0,rgba(248,246,242,0) 4rem),radial-gradient(ellipse 85% 32% at 50% 84%,rgba(254,252,248,.62),rgba(254,252,248,0) 72%); }
}
@media (prefers-contrast:more) { .outlook.section::after { display: none; } }

/* Wave contours on the homepage team teaser (the FAQ preview below stays without them since 2026-10-02). */
.team-section, .team-section + .faq.section { position: relative; isolation: isolate; }
.team-section > :not(.shape), .team-section + .faq.section > :not(.shape) { position: relative; z-index: 1; }
.flow-team-left { left: -3.5rem; top: 4rem; }
.flow-team-right { right: -3.5rem; bottom: 1rem; }
@media (max-width:700px) {
  .flow-team-left { left: -4.75rem; }
  .flow-team-right { right: -4.75rem; }
}

/* About page: label above the heading, full measure, more air between heading and lead. */
.content-main .about.section { display: block; }
.content-main .about > .eyebrow, .content-main .faq-inner > .eyebrow { margin: 0 0 var(--title-label-gap); }
.content-main .about-intro h1 { margin: 0; }
.content-main .about-intro .lead { max-width: 64rem; margin-top: clamp(2rem,3.6vw,3.25rem); font-size: clamp(1.25rem,1.75vw,1.5rem); line-height: 1.6; color: #555; text-wrap: pretty; }

/* Insights and the team teaser are separated by the same hairline as the other sections. */
.gallery.section + .team-section { border-top: 1px solid var(--hairline); }

/* About page ends softly: more room after the last profile and a warm fade into the footer. */
.content-main:has(> .about) { background: linear-gradient(var(--page-tint) 0, #fff 34rem, #fff calc(100% - 18rem), #f2eee8 100%); }
.content-main > .about.section { padding-bottom: clamp(6rem,11vw,10rem); }

/* Team teaser („Zwei Menschen. Eine gemeinsame Vision.“): one centred axis. Both portraits, their fine rings
   and two larger orbits share one SVG coordinate system, so every distance holds at any size; where the
   orbits overlap they form the shared „lens“ with a dot, from which a line runs down between the two
   mirrored text columns (subgrid keeps name, role, text and link on the same lines). */
.team-section { background: radial-gradient(ellipse 46% 34% at 50% 40%, #f6f2ec, rgba(246,242,236,0) 72%), linear-gradient(#fff, var(--warm-white)); overflow: clip; text-align: center; }
/* The section label starts at the left page gutter like every homepage label (owner, 2026-10-06); the heading stays centred. */
.team-intro .eyebrow { text-align: left; }
.team-intro h2 { max-width: 60rem; margin-inline: auto; margin-top: clamp(1rem,1.6vw,1.4rem); text-wrap: balance; }
.team-figure { display: block; width: clamp(19rem,34vw,31rem); height: auto; margin: clamp(2.75rem,5vw,4.5rem) auto 0; overflow: visible; }
.team-lens { opacity: 1; }
.team-orbit { fill: none; stroke: var(--line-accent); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke .45s ease; }
.team-ring { fill: none; stroke: var(--portrait-ring); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke .45s ease; }
.team-orbit--eric, .team-ring--eric { transform: scaleX(-1); transform-box: fill-box; transform-origin: center; }
.team-photo image { transform-box: fill-box; transform-origin: center; transition: transform .7s cubic-bezier(.22,.61,.36,1); }
.team-photo { cursor: pointer; transition: opacity .45s ease; }
.team-stem { stroke: var(--thread); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0; }
.team-dot { fill: var(--dot); stroke: var(--dot-edge); stroke-width: 1; }
.team-grid {
  display: grid; grid-template-columns: minmax(0,1fr) clamp(4rem,7vw,6.5rem) minmax(0,1fr);
  grid-template-rows: repeat(4,auto); max-width: 62rem; margin: 0 auto;
}
.team-spine { grid-column: 2; grid-row: 1 / -1; justify-self: center; width: 1px; background: linear-gradient(var(--thread), rgba(207,200,189,.15)); transform-origin: top; }
.team-card { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; align-content: start; min-width: 0; padding-top: clamp(1.75rem,2.6vw,2.4rem); color: inherit; text-decoration: none; }
.team-card--nico { grid-column: 1; text-align: right; justify-items: end; }
.team-card--eric { grid-column: 3; text-align: left; justify-items: start; }
.team-card h3 { margin: 0; font: 400 clamp(1.75rem,2.6vw,2.25rem)/1.2 var(--font); letter-spacing: -.025em; transition: color .35s ease; }
.team-card .bio-role { margin: .6rem 0 0; }
.team-excerpt { max-width: 25rem; margin: 1rem 0 0; color: var(--muted); font-size: clamp(1.0625rem,1.3vw,1.1875rem); line-height: 1.6; text-wrap: balance; }
.team-link { display: inline-flex; align-items: center; gap: .75rem; margin-top: 1.25rem; min-height: 44px; font-size: 1rem; align-self: start; }
.team-card:hover .team-link::after, .team-card:focus-visible .team-link::after { transform: scaleX(1); }
.team-card:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 8px; }
.team-overview { margin-top: clamp(2.5rem,4vw,3.5rem); }
/* Hovering a person (text or portrait) brings their portrait forward and darkens their rings. */
.team-section:has(.team-card--nico:is(:hover,:focus-visible), .team-photo--nico:hover) .team-photo--nico image,
.team-section:has(.team-card--eric:is(:hover,:focus-visible), .team-photo--eric:hover) .team-photo--eric image { transform: scale(1.06); }
.team-section:has(.team-card--nico:is(:hover,:focus-visible), .team-photo--nico:hover) :is(.team-orbit--nico,.team-ring--nico),
.team-section:has(.team-card--eric:is(:hover,:focus-visible), .team-photo--eric:hover) :is(.team-orbit--eric,.team-ring--eric) { stroke: #9d968b; }
.team-section:has(.team-card--nico:hover, .team-photo--nico:hover) .team-photo--eric,
.team-section:has(.team-card--eric:hover, .team-photo--eric:hover) .team-photo--nico { opacity: .82; }
.team-section:has(.team-photo--nico:hover) .team-card--nico .team-link::after,
.team-section:has(.team-photo--eric:hover) .team-card--eric .team-link::after { transform: scaleX(1); }
.team-card:hover h3 { color: #3d3934; }

/* Entrance, once (team.js adds .is-armed/.is-in), kept short and quiet (~1.1 s, owner + Eric 2026-10-02):
   portraits fade in while rings and orbits draw from the lens, the lens and dot fade in, the line runs down
   and both texts follow almost at once – no glide, no spring. */
.team-section.is-armed:not(.is-in) :is(.team-photo,.team-lens,.team-dot,.team-card,.team-overview,.team-spine) { opacity: 0; }
.team-section.is-armed:not(.is-in) :is(.team-orbit,.team-ring,.team-stem) { stroke-dashoffset: 1; }
.team-section.is-in .team-photo { animation: team-fade .7s ease-out backwards; }
.team-section.is-in .team-ring { animation: team-draw .8s cubic-bezier(.4,0,.2,1) backwards; }
.team-section.is-in .team-orbit { animation: team-draw .9s cubic-bezier(.4,0,.2,1) .05s backwards; }
.team-section.is-in .team-lens { animation: team-fade .5s ease .35s backwards; }
.team-section.is-in .team-dot { animation: team-fade .35s ease .5s backwards; }
.team-section.is-in .team-stem { animation: team-draw .25s ease-out .55s backwards; }
.team-section.is-in .team-spine { animation: team-spine .45s cubic-bezier(.22,.61,.36,1) .65s backwards; }
.team-section.is-in .team-card--nico { animation: team-copy .6s cubic-bezier(.22,.61,.36,1) .25s backwards; }
.team-section.is-in .team-card--eric { animation: team-copy .6s cubic-bezier(.22,.61,.36,1) .3s backwards; }
.team-section.is-in .team-overview { animation: team-fade .5s ease .6s backwards; }
@keyframes team-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes team-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes team-dot { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }
@keyframes team-spine { from { opacity: 1; transform: scaleY(0); } to { opacity: 1; transform: none; } }
@keyframes team-copy { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width:700px) {
  .team-figure { width: min(100%, 21rem); }
  .team-orbit, .team-ring, .team-stem, .team-dot { stroke-width: 1.6; }
  .team-grid { grid-template-columns: minmax(0,1fr); grid-template-rows: none; max-width: 30rem; }
  .team-card, .team-card--nico, .team-card--eric { grid-column: 1; grid-row: auto; grid-template-rows: none; text-align: center; justify-items: center; }
  .team-spine { grid-column: 1; grid-row: auto; height: 3rem; margin-top: 1.5rem; }
  .team-card--eric { padding-top: 1.5rem; }
}
@media (prefers-reduced-motion:reduce) {
  .team-section * { animation: none !important; }
  .team-section.is-armed :is(.team-photo,.team-lens,.team-dot,.team-card,.team-overview,.team-spine) { opacity: 1 !important; }
  .team-photo image { transition: none; }
}

/* Transition into the FAQ preview: below „Mehr über uns“ the team's line runs on, meets a small dot at the
   end of the section and opens there into a fading hairline that separates the two sections. */
.team-section:has(> .team-transition) { padding-bottom: 0; }
.team-transition { position: relative; display: grid; justify-items: center; padding-bottom: .375rem; margin-top: clamp(1.75rem,3vw,2.75rem); pointer-events: none; }
.team-thread { width: 1px; height: clamp(4.5rem,7vw,6.5rem); background: linear-gradient(rgba(207,200,189,0), var(--thread)); transform-origin: top; }
.team-knot { position: absolute; left: 50%; bottom: .375rem; width: 9px; height: 9px; margin: 0 0 -4.5px -4.5px; border: 1px solid var(--dot-edge); border-radius: 50%; background: var(--dot); z-index: 1; }
.team-rule { position: absolute; left: 0; right: 0; bottom: calc(.375rem - .5px); height: 1px; background: linear-gradient(90deg, rgba(214,207,197,0), #d9d3c9 22%, #d9d3c9 78%, rgba(214,207,197,0)); }
.team-transition.is-armed:not(.is-in) .team-thread { transform: scaleY(0); }
.team-transition.is-armed:not(.is-in) :is(.team-knot,.team-rule) { opacity: 0; }
.team-transition.is-in .team-thread { animation: team-spine .7s cubic-bezier(.45,.05,.35,1) var(--team-wait,0ms) backwards; }
.team-transition.is-in .team-knot { animation: team-dot .5s cubic-bezier(.34,1.56,.64,1) calc(var(--team-wait,0ms) + .6s) backwards; }
.team-transition.is-in .team-rule { animation: team-rule 1.1s cubic-bezier(.22,.61,.36,1) calc(var(--team-wait,0ms) + .8s) backwards; }
@keyframes team-rule { from { opacity: 1; transform: scaleX(0); } to { opacity: 1; transform: none; } }
@media (max-width:700px) {
  .team-transition { margin-top: 1.5rem; }
  .team-thread { height: 3.5rem; }
  .team-section + .faq.section { padding-top: 3rem; }
}
@media (prefers-reduced-motion:reduce) {
  .team-transition .team-thread, .team-transition .team-knot, .team-transition .team-rule { animation: none !important; transform: none !important; opacity: 1 !important; }
}
@media (prefers-contrast:more) {
  .team-thread { background: #8a847b; }
  .team-rule { background: #8a847b; }
}

/* Homepage section titles share one fluid scale. Keep each section's alignment,
   margins and measure; content-page headings retain their separate hierarchy. */
.landing + main .section h2 {
  font-size: var(--section-heading-size);
  line-height: 1.14;
  letter-spacing: -.04em;
}
/* Keep the short closing phrases together on phones. The longer German team
   subtitle needs 24rem of viewport width; below that it wraps freely. */
.landing + main .outlook h2 .editorial-break,
html[lang="en"] .landing + main .team-intro h2 .editorial-break { display: initial; }
@media (min-width:24rem) {
  .landing + main .team-intro h2 .editorial-break { display: initial; }
}

/* Desktop has enough room for the closing invitation on one line. Only its
   heading uses the wider copy column; body text and form keep their measures. */
@media (min-width:1101px) {
  .landing + main .outlook-copy { max-width: none; }
  .landing + main .outlook h2 .editorial-break { display: none; }
}

/* ===== „Unser Ansatz“: interactive Ich · Du · Wir model (owner, 2026-10-06: variant C, refined the same day) =====
   Overview (owner, 2026-10-07): three equal circles overlapping like a Venn diagram, large and centred; one shared
   light blue that darkens where they overlap (the Venn discs multiply). Instead of names, faces in profile drawn with a fine line
   (one, two facing each other, three in a row; necks fade out – owner 2026-10-07). The SVG comes from design-archive/approach-model.py
   (both arrangements, colours, figures).
   Choosing a level (click, tap, Enter/Space, arrow keys) folds the circles into the nested picture (light blues, Ich
   lightest, Wir darkest, inner discs low so a crescent stays free at the top) while the model moves to the left (sticky
   on wide screens) and its content opens on the right; approach.js animates the fold, the move (FLIP), the height of
   the block and the cross-fade of the panels. The round ← button (or Escape) unfolds them. Phones: model above the content.
   Without JS (.idw without .is-ready) the model is a static picture (the Venn overview) and all three panels are listed. */

/* The heading reads as one line wherever it fits; narrower screens wrap it evenly (h2 text-wrap: balance).
   It is centred over the model (owner, 2026-10-06); the section label stays at the left gutter like all others. */
.experience-layout { grid-template-columns: minmax(0,1fr); }
.experience .section-heading { max-width: none; }
.experience h2 { text-align: center; }
.experience h2 .editorial-break { display: none; }

/* --idw-figure-dim: heads of the levels that are not open – still buttons, so at least 3:1 on their discs (review B03,
   2026-10-07: measured 3.17–3.57 behind every inactive head; the open level keeps --idw-figure-strong, about 7:1). */
.idw { --idw-rim: #bfccd6; --idw-rim-strong: #74889a; --idw-figure: #6a7d8e; --idw-figure-strong: #3c4c59; --idw-figure-dim: #6d7d8a; --idw-move: .82s;
  position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1fr); align-items: start;
  margin-top: clamp(2rem,4vw,3.5rem); }
.idw-stage { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.idw-model { display: block; width: clamp(20rem,calc(26vw + 9rem),34rem); height: auto; overflow: visible; transform-origin: 0 0; }
.idw-level { outline: none; -webkit-tap-highlight-color: transparent; transform-box: fill-box; transform-origin: 50% 50%; }
.idw.is-ready .idw-level { cursor: pointer; }
.idw-disc, .idw-shade { transition: opacity .6s var(--ease); }
.idw-disc-venn { mix-blend-mode: multiply; }
.idw-shade, .idw-halo { pointer-events: none; }
/* The invitation ring (owner, 2026-10-07): when the pointer enters a circle of the overview, approach.js adds
   .is-rippling to that level for one pass – a soft ring runs outwards from the circle and fades. */
.idw-ripple { fill: none; stroke: #8fa3b4; stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.idw-level.is-rippling .idw-ripple { animation: idw-ripple 1.8s cubic-bezier(.2,.6,.3,1) both; }
@keyframes idw-ripple { 0% { transform: scale(1); opacity: 0; } 12% { opacity: .55; } 100% { transform: scale(1.13); opacity: 0; } }
/* Pointer to the circles (owner's choice „M5“, 2026-10-07): approach.js shows it once when the overview is well in
   view – the Ich circle rings twice and a small dark bubble above its head says „Tippe/Klicke zum Öffnen“. Placed by
   JS (left/top = the bubble's tip); it never takes clicks. */
.idw.is-pointing .idw-level[data-level="ich"] .idw-ripple { animation: idw-ripple 1.8s cubic-bezier(.2,.6,.3,1) .1s 2 both; }
.idw-pointer { position: absolute; z-index: 2; left: 0; top: 0; padding: .55rem .9rem .6rem; border-radius: 999px; background: #3c4c59; color: #fff;
  font: 400 .8125rem/1 var(--font); letter-spacing: .04em; white-space: nowrap; pointer-events: none; box-shadow: 0 6px 18px rgba(40,55,70,.18);
  opacity: 0; visibility: hidden; transform: translate(-50%, calc(-100% - 9px)) translateY(5px);
  transition: opacity .45s var(--ease), transform .45s var(--ease), visibility 0s linear .45s; }
.idw-pointer::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 9px; height: 9px; margin-left: -4.5px; background: inherit; border-radius: 0 0 2px 0; transform: rotate(45deg); }
.idw.is-pointing .idw-pointer { opacity: 1; visibility: visible; transform: translate(-50%, calc(-100% - 9px)); transition-delay: 0s; }
.idw.is-ready:not([data-state="overview"]) .idw-pointer { display: none; }
/* Only .idw-hit takes clicks and hover. Nested, the circle drawn on top wins (Ich over Du over Wir) – every visible
   ring belongs to its level. In the Venn overview each circle is cut to the area nearer its own centre than the others,
   so an overlap splits fairly in the middle (and the hover shows which level a click opens). */
.idw-level > * { pointer-events: none; }
.idw-level > .idw-hit { fill: none; pointer-events: all; }
.idw[data-state="overview"] .idw-level[data-level="wir"] > .idw-hit { clip-path: url(#idw-cell-wir); }
.idw[data-state="overview"] .idw-level[data-level="du"] > .idw-hit { clip-path: url(#idw-cell-du); }
.idw[data-state="overview"] .idw-level[data-level="ich"] > .idw-hit { clip-path: url(#idw-cell-ich); }
.idw-band { fill: #fff; fill-opacity: 0; transition: fill-opacity .5s var(--ease); }
.idw-rim { fill: none; stroke: var(--idw-rim); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke .5s var(--ease), stroke-width .5s var(--ease); }
.idw-glint { fill: none; stroke: #fff; stroke-opacity: .7; stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke-opacity .5s var(--ease); }
/* Names along the rims of the overview (owner's „A“): fine grey tracked capitals, about 9.5–10px on screen at every
   size (the model scales, so the size in model units steps with the breakpoints; the arcs keep the same distance
   from the rim at every size, see label_path() in approach-model.py). Hidden while a level is open:
   gone quickly when the fold starts, back once the circles have unfolded. */
.idw-label { fill: #8593a0; font-family: var(--font); font-size: 8.6px; letter-spacing: .32em; transition: fill .5s var(--ease), opacity .3s var(--ease) 1.05s; }
@media (max-width:1439px) { .idw-label { font-size: 9.2px; } }
@media (max-width:1279px) { .idw-label { font-size: 9.6px; } }
@media (max-width:1100px) { .idw-label { font-size: 11.5px; } }
@media (max-width:900px) { .idw-label { font-size: 12.5px; } }
@media (max-width:760px) { .idw-label { font-size: 13.5px; } }
@media (max-width:400px) { .idw-label { font-size: 14.5px; } }
.idw.is-ready:not([data-state="overview"]) .idw-label { opacity: 0; transition: fill .5s var(--ease), opacity .25s var(--ease); }
.idw-figures { fill: none; stroke: var(--idw-figure); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; transition: stroke .5s var(--ease); }
.idw-figures * { vector-effect: non-scaling-stroke; }
.idw-level.is-active .idw-band { fill-opacity: .2; }
.idw-level.is-active .idw-rim { stroke: var(--idw-rim-strong); }
.idw-level.is-active .idw-glint { stroke-opacity: .95; }
.idw-level.is-active .idw-figures { stroke: var(--idw-figure-strong); }
.idw[data-state]:not([data-state="overview"]) .idw-level:not(.is-active) :is(.idw-disc, .idw-shade) { opacity: .55; }
.idw[data-state]:not([data-state="overview"]) .idw-level:not(.is-active) .idw-figures { stroke: var(--idw-figure-dim); }
@media (hover:hover) and (pointer:fine) {
  .idw.is-ready .idw-level:hover .idw-band { fill-opacity: .16; }
  .idw.is-ready .idw-level.is-active:hover .idw-band { fill-opacity: .26; }
  .idw.is-ready .idw-level:hover .idw-rim { stroke: #97a8b6; }
  .idw.is-ready .idw-level.is-active:hover .idw-rim { stroke: var(--idw-rim-strong); }
  .idw.is-ready[data-state="overview"] .idw-level:hover .idw-label { fill: #5d6c79; }
  .idw.is-ready[data-state] .idw-level:hover .idw-figures, .idw.is-ready[data-state] .idw-level:not(.is-active):hover .idw-figures { stroke: var(--idw-figure-strong); }
  .idw.is-ready[data-state] .idw-level:not(.is-active):hover :is(.idw-disc, .idw-shade) { opacity: 1; }
}
/* Keyboard focus shows on the circle itself (rim), not as the site-wide rectangular outline around its box. */
.idw-level:focus-visible { outline: none; }
.idw.is-ready .idw-level:focus-visible .idw-rim, .idw.is-ready .idw-level.is-active:focus-visible .idw-rim { stroke: var(--focus-ring); stroke-width: 2; }

/* Text under the overview (owner's T4, 2026-10-07), in the size and colour of the Vision body text: one sentence per line
   wherever the longer sentence fits (≥861px, owner: two lines on desktop); narrower, one balanced paragraph. */
.idw-hint { margin: 1.75rem 0 0; max-width: 49rem; font-size: 1.125rem; line-height: 1.7; color: var(--muted); text-align: center; text-wrap: balance; }
@media (min-width:861px) { .idw-hint-line { display: block; } }
/* Back to the whole model: a small round button with a text arrow (Portal Roman has its own ←, so no emoji). */
.idw-back { display: none; place-items: center; width: 2.75rem; height: 2.75rem; margin-top: 1.5rem; padding: 0; border: 1px solid var(--rule-warm); border-radius: 50%;
  background: rgba(255,255,255,.55); color: #5d574f; font: 400 1.3rem/1 var(--font); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color .4s var(--ease), color .4s var(--ease), background-color .4s var(--ease); }
.idw-back span { display: block; transform: translateY(-.06em); transition: transform .45s var(--ease); }
.idw-back:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
@media (hover:hover) and (pointer:fine) {
  .idw-back:hover { border-color: #a99f91; color: var(--ink-warm); background: #fff; }
  .idw-back:hover span { transform: translate(-3px,-.06em); }
}

.idw-panels { min-width: 0; }
.idw-panel h3 { margin: 0; font: 400 clamp(2rem,2.9vw,2.75rem)/1.12 var(--font); letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.idw-lead { margin: 1.15rem 0 0; max-width: 36rem; font-size: 1.1875rem; line-height: 1.65; color: #605c56; text-wrap: pretty; }
.idw-themes { list-style: none; margin: 2.25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,16rem),1fr)); gap: 1.75rem clamp(1.75rem,3vw,2.75rem); }
.idw-themes li { border-top: 1px solid #dcd6cd; padding-top: 1.1rem; }
.idw-themes h4 { margin: 0 0 .45rem; font: 400 1.25rem/1.3 var(--font); color: var(--ink); }
.idw-themes p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--muted); text-wrap: pretty; }

/* Without JS: a static model and the three perspectives one after another. */
.idw:not(.is-ready) .idw-panels { margin-top: clamp(2.5rem,5vw,4rem); display: grid; gap: clamp(2.5rem,5vw,4rem); }

/* JS: one perspective at a time. */
.idw.is-ready .idw-panel[hidden] { display: none; }
.idw.is-ready .idw-panel.is-leaving { position: absolute; pointer-events: none; }
.idw.is-ready.is-moving { overflow: hidden; overflow: clip; }
.idw.is-ready:not([data-state="overview"]) { grid-template-columns: minmax(15rem,.42fr) minmax(0,.58fr); column-gap: clamp(2.5rem,5.5vw,6rem); }
.idw.is-ready:not([data-state="overview"]) .idw-stage { position: sticky; top: 6.5rem; align-self: start; }
.idw.is-ready:not([data-state="overview"]) .idw-model { width: min(100%,25rem); }
.idw.is-ready:not([data-state="overview"]) .idw-hint { display: none; }
.idw.is-ready:not([data-state="overview"]) .idw-back { display: grid; animation: idw-fade .6s var(--ease) both .6s; }
.idw.is-ready[data-state="overview"] .idw-hint { animation: idw-fade .6s var(--ease) both .3s; }
.idw.is-ready:not([data-state="overview"]) .idw-panel { padding-top: clamp(.25rem,1.2vw,1.25rem); }
@keyframes idw-fade { from { opacity: 0; } to { opacity: 1; } }
@media (min-width:1101px) {
  .idw.is-ready:not([data-state="overview"]) .idw-stage { top: calc(var(--desktop-header-height,88px) + 2.5rem); }
}

/* Entrance once in view: the levels open from the centre outwards, like rings on water. */
/* The levels fade by their parts, never as a whole group: a group with opacity below 1 would cut the multiplying
   Venn discs off from what lies below, and the darker overlaps would only appear once the fade is over. */
.idw.is-armed .idw-level { transform: scale(.94); }
.idw.is-armed .idw-level > :not(.idw-disc-venn):not(.idw-ripple) { opacity: 0; }
.idw.is-armed .idw-disc-venn { fill-opacity: 0; }
.idw.is-armed .idw-hint { opacity: 0; }
.idw.is-armed.is-in .idw-level { transform: none; transition: transform 1.2s var(--ease); }
.idw.is-armed.is-in .idw-level > :not(.idw-disc-venn):not(.idw-ripple) { opacity: 1; transition: opacity 1s var(--ease); }
.idw.is-armed.is-in .idw-disc-venn { fill-opacity: 1; transition: fill-opacity 1s var(--ease); }
.idw.is-armed.is-in .idw-level[data-level="du"], .idw.is-armed.is-in .idw-level[data-level="du"] > * { transition-delay: .14s; }
.idw.is-armed.is-in .idw-level[data-level="wir"], .idw.is-armed.is-in .idw-level[data-level="wir"] > * { transition-delay: .28s; }
.idw.is-armed.is-in .idw-hint { opacity: 1; transition: opacity .8s var(--ease) .55s; }

/* Phones and narrow tablets: model above the content; the rings themselves are the tap targets. */
@media (max-width:760px) {
  .idw-model { width: min(94%,25rem); }
  .idw.is-ready:not([data-state="overview"]) { grid-template-columns: minmax(0,1fr); }
  .idw.is-ready:not([data-state="overview"]) .idw-stage { position: static; }
  .idw.is-ready:not([data-state="overview"]) .idw-model { width: min(74%,17.5rem); }
  .idw-hint { margin-top: 1.25rem; }
  .idw.is-ready:not([data-state="overview"]) .idw-back { margin-top: 1.1rem; }
  .idw.is-ready:not([data-state="overview"]) .idw-panels { margin-top: 2rem; }
  .idw.is-ready:not([data-state="overview"]) .idw-panel { padding-top: 0; }
  .idw-panel h3 { font-size: 1.875rem; }
  .idw-lead { font-size: 1.0625rem; }
  .idw-themes { margin-top: 1.75rem; gap: 1.4rem; }
}
@media (prefers-reduced-motion:reduce) {
  .idw.is-armed .idw-level, .idw.is-armed .idw-level > *, .idw.is-armed .idw-hint { opacity: 1; transform: none; transition: none; }
  .idw.is-armed .idw-disc-venn { fill-opacity: 1; }
  .idw-level.is-rippling .idw-ripple { animation: none; }
  .idw.is-pointing .idw-level[data-level="ich"] .idw-ripple { animation: none; }
  .idw-pointer, .idw.is-pointing .idw-pointer { transition: none; transform: translate(-50%, calc(-100% - 9px)); }
  .idw-disc, .idw-shade, .idw-band, .idw-rim, .idw-glint, .idw-figures, .idw-back, .idw-back span { transition-duration: .01s; }
  .idw-label, .idw.is-ready:not([data-state="overview"]) .idw-label { transition-duration: .01s; transition-delay: 0s; }
  .idw.is-ready:not([data-state="overview"]) .idw-back, .idw.is-ready[data-state="overview"] .idw-hint { animation: none; }
}
@media (prefers-contrast:more) {
  .idw { --idw-rim: #8a847b; --idw-figure: #3c4c59; --idw-figure-strong: #1f2a33; --idw-figure-dim: #5e5850; }
  .idw-panel .idw-lead, .idw-hint { color: #3a3631; }
  .idw-label { fill: #4f5a64; }
  .idw-back { border-color: #8a847b; }
}
@media (forced-colors:active) {
  .idw-rim { stroke: CanvasText; }
  .idw-level.is-active .idw-rim { stroke: Highlight; stroke-width: 3; }
  .idw-figures { stroke: CanvasText; }
  .idw-label { fill: CanvasText; }
  .idw-pointer { border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
  .idw-back { border-color: ButtonText; }
}

/* FAQ page in three categories (owner, 2026-10-06): a quiet jump row under the title, then Allgemein · Retreats ·
   Seminare & Workshops, each with its own subheading; unnumbered questions align with the page gutter. */
.faq-jump { --faq-jump-gap: 2.4rem; display: flex; flex-wrap: wrap; align-items: baseline; row-gap: .35rem;
  margin: 0 0 clamp(2.75rem,5vw,4.25rem) calc(var(--faq-jump-gap) * -1); clip-path: inset(-1rem -1rem -1rem var(--faq-jump-gap)); }
/* Every link carries its separator in its own left padding; at the start of a (wrapped) line it is clipped away. */
.faq-jump a { position: relative; padding-left: var(--faq-jump-gap); color: #605c56; font-size: 1.0625rem; transition: color .35s var(--ease); }
.faq-jump a::before { content: "·"; content: "·" / ""; position: absolute; left: 0; width: var(--faq-jump-gap); text-align: center; color: #b3aca2; pointer-events: none; }
.faq-jump a.hover-link::after { left: var(--faq-jump-gap); width: calc(100% - var(--faq-jump-gap)); }
.faq-jump a:hover, .faq-jump a:focus-visible { color: var(--ink-warm); }
.faq-group + .faq-group { margin-top: clamp(3.5rem,6.5vw,5.75rem); }
.content-main .faq-group-title { margin: 0 0 clamp(1rem,1.8vw,1.5rem); font: 400 clamp(1.5rem,calc(1.2rem + .9vw),2rem)/1.2 var(--font); letter-spacing: -.025em; color: var(--ink); }
@media (max-width:700px) {
  .faq-jump { --faq-jump-gap: 2rem; row-gap: .25rem; }
  .faq-jump a { font-size: 1rem; }
}

/* Insight videos by keyboard (review B01): script.js lays a transparent button over each frame. It is invisible to
   mouse and touch (hover and tap work as before); with keyboard focus a soft inner edge and a small round play/pause
   mark appear in the middle of the card. */
.video-play { position: absolute; inset: 0; z-index: 3; margin: 0; padding: 0; border: 0; background: transparent; cursor: inherit; -webkit-tap-highlight-color: transparent; }
.video-play:focus { outline: none; }
.video-play > span { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin: -1.375rem 0 0 -1.375rem;
  border: 1px solid rgba(255,255,255,.8); border-radius: 50%; background: rgba(40,37,33,.38); color: #fff; font: 400 1rem/1 var(--font);
  opacity: 0; transform: scale(.92); transition: opacity .3s var(--ease), transform .3s var(--ease); pointer-events: none; }
.video-play > span::before { content: "▷"; content: "▷" / ""; translate: .08em 0; }
.video-play.is-playing > span::before { content: "Ⅱ"; content: "Ⅱ" / ""; translate: 0 0; }
.video-play:focus-visible { box-shadow: inset 0 0 0 2px rgba(255,255,255,.85), inset 0 0 0 3px var(--focus-ring); }
.video-play:focus-visible > span { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .video-play > span { transition: none; } }
@media (forced-colors: active) { .video-play:focus-visible { outline: 2px solid Highlight; outline-offset: -2px; } .video-play > span { border-color: ButtonText; background: Canvas; color: ButtonText; } }

/* About page (review B04): like the FAQ page's contours, the two waves stay in the free page gutters – they fade
   out right where the text column begins (the SVGs sit 3.5rem, on phones 4.75rem, beyond the page edge). */
.content-main .about > .flow-about-left { --wave-out: 3.5rem;
  -webkit-mask-image: linear-gradient(to right,#000 calc(var(--gutter) + var(--wave-out) - .75rem),transparent calc(var(--gutter) + var(--wave-out)));
  mask-image: linear-gradient(to right,#000 calc(var(--gutter) + var(--wave-out) - .75rem),transparent calc(var(--gutter) + var(--wave-out))); }
.content-main .about > .flow-about-right { --wave-out: 3.5rem;
  -webkit-mask-image: linear-gradient(to left,#000 calc(var(--gutter) + var(--wave-out) - .75rem),transparent calc(var(--gutter) + var(--wave-out)));
  mask-image: linear-gradient(to left,#000 calc(var(--gutter) + var(--wave-out) - .75rem),transparent calc(var(--gutter) + var(--wave-out))); }
@media (max-width:700px) { .content-main .about > :is(.flow-about-left, .flow-about-right) { --wave-out: 4.75rem; } }