/* A2 «Goldene Ruhe», modern: Porzellan, ein flaches Ocker, Italiana groß über Fotos (SoVous), Jost.
   Espresso-Flächen im Wechsel (Visage). Kontraste geprüft: Tinte 16,4:1, Tinte-2 7,2:1, Ocker-Text 6,0:1,
   Ocker groß 4,4:1 auf Porzellan; auf Espresso Creme 14:1, Ocker 7,1:1. */

.va2 {
  --f-disp: "Italiana", "Didot", "Bodoni 72", serif;
  --f-ui: "Jost", "Futura", system-ui, sans-serif;
  --disp-w: 400;
  --radius: 0;
  --gutter: clamp(1rem, 4vw, 3.5rem);
  --s-bg: #faf7f3; --s-ink: #1f1813; --s-ink-2: #5e5048; --s-acc: #9a6a1f; --s-acc-t: #7f5714;
  --s-rule: #e4dbd1; --s-rule-strong: #c9b9a9; --s-btn: #1f1813; --s-btn-ink: #faf7f3; --s-ihb: #d9a24c; --s-ihb-ink: #1f1813; --s-focus: #7f5714;
  --dark-bg: #1c1511; --dark-ink: #f3ebe1; --dark-ink-2: #c2b4a5; --dark-acc: #d4973b; --dark-rule: #3b2f26; --dark-rule-strong: #6d5949;
  --map-bg: #f0e9e1; --map-road: #fffdf9; --map-road-main: #fffdf9; --map-green: #e0e2d0; --map-lab: #7a6a5c; --map-ink: #4b3f36; --map-pin: #9a6a1f;
  --price-size: 1.5rem;
  --f-num: "Jost", "Futura", system-ui, sans-serif; --num-w: 300;
  --h2-size: clamp(2.8rem, 6vw, 6rem);
}
.va2 .sec-soft { --s-bg: #f3e8e1; }

/* Kopfzeile */
.va2 .hd { background: color-mix(in srgb, #faf7f3 92%, transparent); backdrop-filter: blur(8px); }
.va2 .hd-nav a { transition: color 0.35s; }
.va2 .hd-nav a:is(:hover, :focus-visible) { color: var(--s-acc-t); }

/* Hauptmenü A2 (Runde 5) «Gleitende Linie»: eine Ockerlinie wächst unter dem Punkt und gleitet von Punkt zu Punkt mit,
   beim Verlassen zieht sie sich zusammen. Mobil «Vorhang»: Fläche fällt von oben, die Worte steigen aus einer Maske. */
.va2 .nav-ind { top: auto; bottom: 0.2rem; height: 1.5px; width: var(--iw, 0px); opacity: 1; background: var(--s-acc);
  transform: translateX(var(--ix, 0px)) scaleX(0); transform-origin: 0 50%; transition: transform 0.55s var(--ease), width 0.55s var(--ease); }
.va2 .hd-nav.is-ind .nav-ind { transform: translateX(var(--ix, 0px)) scaleX(1); }
.va2 .mnav li { overflow: clip; border-bottom: 1px solid var(--s-rule); }
@media (prefers-reduced-motion: no-preference) {
  html:not(.fx-off) .va2 .mnav:not([hidden]) { animation: a2-curtain 0.75s var(--ease) backwards; }
  html:not(.fx-off) .va2 .mnav:not([hidden]) li a { animation: a2-rise 0.85s var(--ease) backwards; animation-delay: calc(0.22s + var(--i) * 70ms); }
  html:not(.fx-off) .va2 .mnav:not([hidden]) li { animation: a2-rule 0.9s var(--ease) backwards; animation-delay: calc(0.3s + var(--i) * 70ms); }
  html:not(.fx-off) .va2 .mnav:not([hidden]) :is(address, .btn) { animation: a2-fade 0.6s var(--ease) 0.65s backwards; }
}
@keyframes a2-curtain { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes a2-rise { from { transform: translateY(110%); } to { transform: none; } }
@keyframes a2-rule { from { border-bottom-color: transparent; } to { border-bottom-color: var(--s-rule); } }
@keyframes a2-fade { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: none; } }

/* ---------- Erster Bildschirm: 12 Sticky Grid, Collage um die Phrase ---------- */
.a2-hero { position: relative; --p: 0; }
.a2-stick { position: relative; height: calc(100svh - var(--hd-h) - var(--mk-h, 3.3rem)); min-height: 40rem; max-height: 62rem; overflow: clip; }
.a2-grid { position: absolute; inset: 0; }
.gf { position: absolute; margin: 0; overflow: clip; }
.gf img { width: 100%; height: 100%; object-fit: cover; }
/* Runde 4c: Gvantsa in der Mitte (Olexii 01.10); die Schrift liegt wie auf einem Magazintitel über dem Porträt */
.gf-c { left: 50%; top: 4%; height: 92%; aspect-ratio: 4 / 5; translate: -50% 0; transform: scale(calc(1 + var(--p) * 0.1)); transform-origin: 50% 30%;
  box-shadow: 0 2.5rem 5rem -3rem rgb(60 40 15 / 0.5); }
.gf-c img { object-position: 50% 26%; }
.gf-p { left: 6%; top: 9%; width: 15%; aspect-ratio: 4 / 5; --dx: -18vw; --dy: -6vh; }
.gf-p img { object-position: 58% 50%; }
.gf-1 { right: 5%; top: 7%; width: 12.5%; aspect-ratio: 3 / 4; --dx: 16vw; --dy: -10vh; }
.gf-2 { right: 3.5%; top: 41%; width: 10.5%; aspect-ratio: 10 / 11; --dx: 14vw; --dy: 12vh; }
.gf-3 { left: 26.5%; bottom: 5%; width: 9.5%; aspect-ratio: 3 / 4; --dx: -6vw; --dy: 18vh; }
.gf-4 { right: 21%; top: 6%; width: 12%; aspect-ratio: 16 / 10; --dx: 6vw; --dy: -18vh; }
.gf-4 img { object-position: 22% 18%; }
.gf:not(.gf-c) { z-index: 1; transform: translate(calc(var(--dx, 0px) * var(--p)), calc(var(--dy, 0px) * var(--p))) scale(calc(1 + var(--p) * 0.12)); opacity: calc(1 - var(--p) * 1.35); }
.a2-h1 { position: absolute; z-index: 2; left: 0; right: 0; top: 61%; transform: translateY(calc(-50% - var(--p) * 14vh)); opacity: calc(1 - var(--p) * 1.9); text-align: center; pointer-events: none; }
.a2-disp { display: block; font-family: var(--f-disp); font-weight: 400; font-size: clamp(4.2rem, 10.6vw, 12rem); line-height: 0.86; letter-spacing: -0.005em; color: var(--s-ink); }
.a2-l1, .a2-l2 { display: block; }
.a2-l1 { transform: translateX(-9vw); }
.a2-l2 { transform: translateX(3vw); }
.a2-sub { display: block; margin-top: 1.6rem; font: 500 0.8rem/1.4 var(--f-ui); letter-spacing: 0.26em; text-transform: uppercase; color: var(--s-ink); }
.a2-sub { width: fit-content; margin-inline: auto; padding: 0.55rem 1rem; background: var(--s-bg); }
.a2-place { position: absolute; z-index: 2; left: var(--gutter); top: 1.25rem; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: calc(1 - var(--p) * 2.5); }
.a2-place .ico { width: 1.2rem; height: 1.2rem; color: var(--s-acc); }
.a2-foot { position: absolute; z-index: 3; left: var(--gutter); bottom: 1.5rem; display: grid; gap: 1rem; max-width: 20rem; opacity: calc(1 - var(--p) * 2.5); }
.a2-short { font-size: 1rem; line-height: 1.5; }
.a2-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.a2-link { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 0.2rem; }
.a2-hero-note { position: absolute; z-index: 3; right: var(--gutter); top: 0.75rem; }
.gf-c .note.on-photo { top: 0.6rem; bottom: auto; }
.a2-proof { position: absolute; z-index: 3; right: var(--gutter); bottom: 1.5rem; padding: 1rem 1.15rem; background: color-mix(in srgb, var(--s-bg) 90%, transparent); border: 1px solid var(--s-rule); opacity: calc(1 - var(--p) * 2.5); }
.a2-proof { width: 19.5rem; }
.a2-proof .hp-badges { gap: 0.4rem; }
@media (min-width: 62rem) { .gf-2 { display: none; } }
@media (min-width: 62rem) and (prefers-reduced-motion: no-preference) {
  html:not(.fx-off) .a2-hero { height: calc(100svh - var(--hd-h) + 90vh); max-height: calc(62rem + 90vh); }
  html:not(.fx-off) .a2-stick { position: sticky; top: calc(var(--hd-h) + env(safe-area-inset-top, 0px)); }
}
@media (max-width: 61.99rem) {
  .a2-stick { height: auto; min-height: 0; max-height: none; display: flex; flex-direction: column; padding: 1rem var(--gutter) 2.5rem; }
  .a2-place { position: static; order: -1; margin-bottom: 1rem; }
  .a2-grid { position: relative; inset: auto; height: 112vw; max-height: 46rem; margin-inline: calc(var(--gutter) * -1); }
  .gf-p, .gf-3, .gf-4 { display: none; }
  .gf-c { left: 18%; top: 0; height: auto; width: 64%; translate: none; transform: none; }
  .gf-1 { right: 0; left: auto; top: 44%; width: 26%; }
  .gf-2 { left: 0; right: auto; top: auto; bottom: 18%; width: 30%; }
  .a2-proof { position: static; width: auto; margin-top: 1.5rem; padding: 0; background: none; border: 0; }
  .a2-proof .hp-badges { flex-wrap: wrap; }
  .a2-h1 { position: relative; top: auto; transform: none; margin-top: -30vw; text-align: left; }
  .a2-disp { font-size: 19vw; line-height: 0.9; }
  .a2-l1 { transform: none; }
  .a2-l2 { transform: translateX(14vw); }
  .a2-sub { margin-top: 1rem; font-size: 0.75rem; letter-spacing: 0.2em; }
  .a2-foot { position: static; max-width: none; margin-top: 1.75rem; }
  .a2-hero-note { position: static; order: 5; }
  .gf-c .note.on-photo { top: 0.6rem; bottom: auto; }
}

/* ---------- Behandlungen: Fotofenster links, Kategorien rechts ---------- */
.a2-svc { --sec-pad: clamp(5rem, 9vw, 8rem); }
.va2 .sv { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 1.5rem clamp(2rem, 5vw, 5.5rem); align-items: start; }
.va2 .sv-media { position: sticky; top: calc(var(--hd-h) + 1.5rem); height: min(74vh, 46rem); }
.va2 .sv-foot { grid-column: 2; }
.va2 .sv-name { --sv-size: clamp(2.6rem, 4.8vw, 4.6rem); }
@media (max-width: 61.99rem) {
  .va2 .sv { grid-template-columns: minmax(0, 1fr); }
  .va2 .sv-media { position: relative; top: auto; height: auto; aspect-ratio: 16 / 10; }
  .va2 .sv-foot { grid-column: 1; }
}

/* ---------- Räume: randlos ---------- */
.a2-rg { --sec-pad: clamp(4rem, 7vw, 6.5rem); }
.a2-rg .ra { margin-inline: calc(var(--gutter) * -1 + 0.4rem); }

/* ---------- Team ---------- */
.a2-team { --sec-pad: clamp(5rem, 10vw, 9.5rem); }

/* ---------- Bewertungen: Espresso ---------- */
.a2-rv { --sec-pad: clamp(5rem, 9vw, 8.5rem); }

/* ---------- Anliegen ---------- */
.a2-an { --sec-pad: clamp(5rem, 9vw, 8rem); }

/* ---------- Akademie: Blush, zwei Spalten ---------- */
.a2-ak { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 2.5rem clamp(2rem, 7vw, 7rem); align-items: start; }
.a2-ak-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.a2-ak .h2 { --h2-size: clamp(2.6rem, 4.4vw, 4.4rem); }
.a2-ak-photo { position: relative; width: 72%; margin-top: 1.5rem; overflow: clip; }
.a2-ak-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.a2-ak-body { padding-top: 0.5rem; }
@media (max-width: 61.99rem) { .a2-ak { grid-template-columns: minmax(0, 1fr); } .a2-ak-photo { width: 100%; } }

/* ---------- Standort ---------- */
.a2-st-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: 2rem clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 61.99rem) { .a2-st-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- FAQ und Fuß: Espresso, Wort in Ocker ---------- */
.a2-faq { --sec-pad: clamp(4.5rem, 8vw, 7rem); }
.va2 .fd { --fd-size: 17.5vw; }

/* Rhythmus: Abstände je Sektion bewusst verschieden */
.a2-svc { --sec-pad: clamp(4.5rem, 7vw, 6.5rem); }
.a2-rg { --sec-pad: clamp(3.5rem, 5vw, 4.5rem); }
.a2-team { --sec-pad: clamp(6rem, 12vw, 11rem); }
.a2-an { --sec-pad: clamp(4rem, 6vw, 5.5rem); }
.a2-ak { --sec-pad: clamp(6.5rem, 11vw, 10rem); }
.a2-st { --sec-pad: clamp(3.5rem, 5.5vw, 5rem); }

/* ---------- Runde 4: echte Stimmen je Kategorie, 28 Auszeichnungen, 36 Woche (hell, Ocker) ---------- */
.va2 .sv-q { margin: 0.25rem 0 1rem; padding: 1rem 1.25rem; border-left: 2px solid var(--s-acc); background: color-mix(in srgb, var(--s-acc) 7%, transparent); }
.va2 .sv-q p { font-size: 0.98rem; line-height: 1.6; color: var(--s-ink); max-width: 44rem; }
.va2 .sv-q footer { margin-top: 0.5rem; font-size: 0.8rem; color: var(--s-ink-2); }
.va2 .sv-q .b3-stars { color: var(--s-acc); letter-spacing: 0.1em; margin-right: 0.35rem; }
.va2 .aw { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 1.5rem clamp(2rem, 5vw, 5rem); align-items: start; margin: 0 0 clamp(3rem, 6vw, 5rem); }
.va2 .aw-h { font-family: var(--f-disp); font-weight: var(--disp-w, 400); font-size: clamp(2rem, 3.4vw, 3.2rem); line-height: 1.05; }
.va2 .aw-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--s-rule); }
.va2 .aw-list a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.5rem; padding: 1rem 0.75rem; border-bottom: 1px solid var(--s-rule); text-decoration: none; transition: background 0.4s, padding 0.5s var(--ease); }
.va2 .aw-y { font-family: var(--f-num, var(--f-disp)); font-weight: var(--num-w, 300); font-size: clamp(1.8rem, 2.8vw, 2.4rem); line-height: 1; font-variant-numeric: tabular-nums lining-nums; transition: color 0.3s; }
.va2 .aw-t { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--s-ink-2); }
.va2 .aw-list .ico { width: 1.2rem; height: 1.2rem; color: var(--s-acc); transition: transform 0.4s var(--ease); }
.va2 .aw-list a:hover { background: color-mix(in srgb, var(--s-acc) 8%, transparent); padding-left: 1.25rem; }
.va2 .aw-list a:hover .aw-y { color: var(--s-acc-t); }
.va2 .aw-list a:hover .ico { transform: translateX(0.3rem); }
.va2 .wk-status { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--s-ink-2); }
.va2 .wk-status:empty { display: none; }
.va2 .wk-status::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--s-rule-strong, #b9a794); }
.va2 .wk-status.is-open { color: var(--s-acc-t); }
.va2 .wk-status.is-open::before { background: var(--s-acc); }
.va2 .wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.35rem; margin: 0 0 0.5rem; padding: 0; list-style: none; }
.va2 .wk li { display: grid; gap: 0.3rem; padding: 0.7rem 0.3rem; border: 1px solid var(--s-rule); text-align: center; font-variant-numeric: tabular-nums; }
.va2 .wk-d { font-family: var(--f-disp); font-size: 1.15rem; line-height: 1; }
.va2 .wk-h { font-size: 0.7rem; line-height: 1.3; color: var(--s-ink-2); hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
.va2 .wk li.is-today { border-color: var(--s-acc); background: color-mix(in srgb, var(--s-acc) 9%, transparent); }
.va2 .wk li.is-today .wk-d { color: var(--s-acc-t); }
@media (max-width: 61.99rem) { .va2 .aw { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 47.99rem) {
  .va2 .wk { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
  .va2 .wk li { display: flex; justify-content: space-between; align-items: center; padding: 0.55rem 0.8rem; text-align: left; }
}
.va2 .ig { --sec-pad: clamp(4rem, 7vw, 6rem); }

/* ---------- Textlinks: die Linie läuft rechts hinaus und kommt von links zurück (Board R3 «micro»: Codrops Line Hover Styles) ---------- */
.va2 :is(.a2-link, .sv-all, .ts-more, .st-route, .work-more, :is(p, .svc-more, .an-links, .tq-foot, .ak-tel, .mc-alt, .ft-legal) > a:not([class])) {
  width: fit-content; text-decoration: none; border-bottom: 0; padding-bottom: 0.2em;
  background: linear-gradient(currentColor, currentColor) 100% 100% / 100% 1px no-repeat; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.fx-off) .va2 :is(.a2-link, .sv-all, .ts-more, .st-route, .work-more, :is(p, .svc-more, .an-links, .tq-foot, .ak-tel, .mc-alt, .ft-legal) > a:not([class])):is(:hover, :focus-visible) { animation: a2-line 0.8s var(--ease) both; }
}
@keyframes a2-line {
  0% { background-position: 100% 100%; background-size: 100% 1px; }
  45% { background-position: 100% 100%; background-size: 0% 1px; }
  46% { background-position: 0% 100%; background-size: 0% 1px; }
  100% { background-position: 0% 100%; background-size: 100% 1px; }
}

/* ---------- Unsere Arbeit in A2: Redaktionsraster, jede zweite Spalte tiefer gesetzt ---------- */
.va2 .work-tag { background: var(--s-bg); }
@media (min-width: 62rem) {
  .va2 .work-list { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-columns: auto; gap: 2.25rem 1.5rem; overflow: visible; padding-bottom: 3rem; }
  .va2 .work-it:nth-child(even) { transform: translateY(3rem); }
  .va2 .work-nav { display: none; }
}
.va2 .work-it img { transition: filter 0.6s var(--ease); }
.va2 .work-it figure:hover img { filter: saturate(1.1) contrast(1.03); }

/* Schaufenster-Schrift A2 (Runde 5): Versalien in Tinte, Schreibschrift in Ocker; auf Espresso Creme und helles Ocker.
   Der Fuß beginnt mit dem Satz aus dem Studiofenster, ganz in Ocker wie die Folie auf dem Glas. */
.va2 { --pun-size: clamp(2.4rem, 5.6vw, 5.25rem); }
.va2 .fd-slogan { --pun-size: clamp(3.2rem, 10vw, 9rem); --pun-ink: var(--s-acc); --pun-script: var(--s-acc); margin: 0 auto clamp(3rem, 6vw, 5rem); }