/* Ink Flow – Gestaltung nach Golans Briefing (Neustart, 21.09.2026)
   Zwei Welten: helle Wandtextur und sehr dunkles Anthrazit. Typografie trägt, Deko nur mit Zweck. */

:root {
  --ink: #151513;
  --ink-2: #1e1e1c;
  --ink-3: #292926;
  --paper: #f1ede3;
  --paper-2: #d9d4c6;
  --muted: #a8a497;
  --ink-text: #151513;
  --wall-text: #2a2a24;
  --moss: #b9b27a;
  --line-d: rgba(241, 237, 227, .16);
  --line-w: rgba(21, 21, 19, .28);
  --display: "Roboto Condensed", "Arial Narrow", sans-serif;
  --body: Manrope, "Segoe UI", sans-serif;
  --max: 1320px;
  --pad: clamp(1.25rem, 4vw, 3rem);
  --sec: clamp(4.5rem, 9vw, 8.5rem);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --nav-h: 72px;
}

/* ---------- Grundlagen ---------- */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }
body {
  margin: 0;
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--wall-text);
  background: #e0dcae;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Wand als feststehende Fläche hinter allem – scharf, ohne Kachelkanten, auch auf dem Handy */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: #e0dcae url(../img/inkflow-wand.webp) center / cover no-repeat; pointer-events: none; }
@media (max-width: 1024px), (hover: none) {
  body::before { background-image: url(../img/inkflow-wand-mobil.webp); }
}
.wp-site-blocks { padding: 0; }
/* Randflächen dürfen bis an den Bildschirmrand laufen, aber nie seitliches Scrollen auslösen.
   clip statt hidden, damit die klebende Navigation funktioniert. */
html, body { overflow-x: clip; }
.wp-site-blocks > * + * { margin-block-start: 0; }
.if-main > .wp-block-post-content > * + *, .if-main .is-layout-flow > * + * { margin-block-start: 0; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:where(p) { margin: 0 0 1.1em; }
:where(p:last-child) { margin-bottom: 0; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--moss); outline-offset: 3px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

h1, h2, h3, h4, .if-display {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.005em;
  line-height: .92;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1, .if-h1 { font-size: clamp(3rem, 7.2vw, 7.25rem); }
h2, .if-h2 { font-size: clamp(2.25rem, 4.8vw, 4.6rem); }
h3, .if-h3 { font-size: clamp(1.3rem, 2vw, 1.75rem); line-height: 1.02; font-weight: 700; }
h4 { font-size: 1rem; font-weight: 700; letter-spacing: .04em; }

/* ---------- Raster ---------- */
.if-container { width: min(var(--max), 100% - 2 * var(--pad)); margin-inline: auto; }
.if-narrow { max-width: 46rem; }
.if-section { position: relative; padding-block: var(--sec); }
.if-section.if-tight { padding-block: calc(var(--sec) * .55); }
.if-wall { color: var(--wall-text); }
.if-dark, .if-panel { background: var(--ink); color: var(--paper); }
.if-dark h1, .if-dark h2, .if-dark h3, .if-panel h1, .if-panel h2, .if-panel h3 { color: var(--paper); }
.if-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2.4vw, 2.5rem); row-gap: 2.5rem; }
.if-grid > * { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 900px) {
  .if-c1-5 { grid-column: 1 / 6; } .if-c1-6 { grid-column: 1 / 7; } .if-c1-7 { grid-column: 1 / 8; } .if-c1-8 { grid-column: 1 / 9; }
  .if-c6-13 { grid-column: 6 / 13; } .if-c7-13 { grid-column: 7 / 13; } .if-c8-13 { grid-column: 8 / 13; } .if-c9-13 { grid-column: 9 / 13; }
  .if-c2-8 { grid-column: 2 / 8; } .if-c5-13 { grid-column: 5 / 13; } .if-c1-4 { grid-column: 1 / 5; } .if-c4-13 { grid-column: 4 / 13; }
  .if-self-end { align-self: end; } .if-self-center { align-self: center; } .if-down { margin-top: clamp(3rem, 9vw, 9rem); }
}

/* Dunkle Flächen, die an den Bildschirmrand laufen (architektonische Übergänge) */
.if-bleed-right { position: relative; }
.if-bleed-right::after, .if-bleed-left::after { content: ""; position: absolute; top: 0; bottom: 0; width: 50vw; background: inherit; z-index: -1; }
.if-bleed-right::after { left: 100%; }
.if-bleed-left::after { right: 100%; }
.if-bleed-left { position: relative; }
.if-panel { position: relative; z-index: 0; padding: clamp(2rem, 4.5vw, 4rem); }

/* ---------- Typo-Ebenen ---------- */
.if-kicker {
  display: flex; align-items: center; gap: .9rem;
  font-family: var(--body); font-weight: 600; font-size: .72rem; line-height: 1.2;
  letter-spacing: .22em; text-transform: uppercase; margin: 0 0 1.4rem;
}
.if-kicker::before { content: ""; width: 2rem; height: 1px; background: currentColor; opacity: .7; flex: none; }
.if-lead { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.55; font-weight: 500; max-width: 38rem; }
.if-text { max-width: 36rem; }
.if-text-muted, .if-dark .if-note, .if-panel .if-note { color: var(--muted); }
.if-note { font-size: .88rem; line-height: 1.55; }
.if-statement { font-family: var(--display); font-weight: 300; font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1.12; text-transform: none; letter-spacing: -.005em; max-width: 30ch; }
.if-rule { height: 1px; border: 0; background: currentColor; opacity: .3; margin: 2.5rem 0; }
.if-num { font-family: var(--display); font-weight: 300; font-size: clamp(2.2rem, 3.4vw, 3.2rem); line-height: 1; letter-spacing: -.02em; }

/* ---------- Knöpfe (rechteckig, ruhig) ---------- */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: .9rem 1.4rem; align-items: center; margin-top: 2rem; }
.wp-block-button .wp-block-button__link, .if-btn-a {
  display: inline-flex; align-items: center; gap: .9rem;
  font-family: var(--body); font-weight: 600; font-size: .76rem; letter-spacing: .2em; text-transform: uppercase;
  padding: 1.05rem 1.5rem; min-height: 48px; border-radius: 0; text-decoration: none;
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.wp-block-button .wp-block-button__link::after, .if-btn-a::after { content: "→"; font-size: 1rem; letter-spacing: 0; transition: transform .25s var(--ease); }
.wp-block-button .wp-block-button__link:hover::after, .if-btn-a:hover::after { transform: translateX(4px); }
.wp-block-button .wp-block-button__link:hover { background: transparent; color: var(--ink); }
.if-dark .wp-block-button .wp-block-button__link, .if-panel .wp-block-button .wp-block-button__link { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.if-dark .wp-block-button .wp-block-button__link:hover, .if-panel .wp-block-button .wp-block-button__link:hover { background: transparent; color: var(--paper); }
.wp-block-button.if-link .wp-block-button__link, .if-textlink {
  background: none; border: 0; border-bottom: 1px solid currentColor; padding: .35rem 0; min-height: 0; color: inherit;
}
.wp-block-button.if-link .wp-block-button__link:hover { background: none; color: inherit; }
.if-dark .wp-block-button.if-link .wp-block-button__link, .if-panel .wp-block-button.if-link .wp-block-button__link { background: none; color: var(--paper); }
.wp-block-button.if-ghost .wp-block-button__link { background: transparent; color: inherit; border-color: currentColor; }
.wp-block-button.if-ghost .wp-block-button__link:hover { background: var(--ink); color: var(--paper); }
.if-dark .wp-block-button.if-ghost .wp-block-button__link:hover { background: var(--paper); color: var(--ink); }

/* ---------- Medien ---------- */
.if-media { margin: 0; position: relative; background: var(--ink-2); overflow: hidden; }
.if-media img, .if-media video { width: 100%; height: 100%; object-fit: cover; }
.if-r-4x5 img, .if-r-4x5 video { aspect-ratio: 4 / 5; }
.if-r-3x4 img, .if-r-3x4 video { aspect-ratio: 3 / 4; }
.if-r-3x2 img, .if-r-3x2 video { aspect-ratio: 3 / 2; }
.if-r-16x9 img, .if-r-16x9 video { aspect-ratio: 16 / 9; }
.if-r-21x9 img, .if-r-21x9 video { aspect-ratio: 21 / 9; }
.if-r-1x1 img, .if-r-1x1 video { aspect-ratio: 1; }
/* Hochformat-Video (4:5) mittig, damit Golans Aufnahmen unbeschnitten laufen */
.if-video-hoch { background: none; }
.if-video-hoch video { aspect-ratio: 4 / 5; width: auto; max-width: min(100%, 460px); max-height: 82vh; margin-inline: auto; display: block; }
.if-media figcaption, .wp-block-image.if-media figcaption { position: absolute; left: 0; bottom: 0; margin: 0; padding: .55rem .8rem; font: 600 .66rem/1.2 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--paper); background: rgba(21,21,19,.72); }
.wp-block-video.if-media { margin: 0; }
.wp-block-video.if-media video { background: var(--ink); }

/* Zwei Arbeiten, asymmetrisch */
.if-duo { align-items: start; }
@media (min-width: 900px) { .if-duo .if-a { grid-column: 1 / 8; } .if-duo .if-b { grid-column: 9 / 13; margin-top: clamp(4rem, 12vw, 11rem); } }

/* ---------- Hero-Video ---------- */
.if-hero { position: relative; background: var(--ink); overflow: hidden; height: clamp(300px, 44vw, 640px); }
.if-hero video, .if-hero .if-hero-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s var(--ease); }
.if-hero .is-on { opacity: 1; }
.if-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(21,21,19,.55), rgba(21,21,19,0) 38%); pointer-events: none; }
.if-hero-meta { position: absolute; left: 0; right: 0; bottom: clamp(1rem, 2.4vw, 1.8rem); z-index: 2; display: flex; justify-content: space-between; align-items: end; gap: 1rem; color: var(--paper); font: 600 .7rem/1.3 var(--body); letter-spacing: .22em; text-transform: uppercase; }
.if-hero-meta span:last-child { text-align: right; opacity: .8; }
@media (max-width: 760px) {
  .if-hero { height: auto; aspect-ratio: 16 / 10; }
  .if-hero video, .if-hero .if-hero-poster { object-position: 50% 30%; }
  .if-hero-meta span:last-child { display: none; }
}

/* ---------- Navigation (sticky unter dem Hero) ---------- */
.if-header-wrap { position: sticky; top: 0; z-index: 90; }
.admin-bar .if-header-wrap { top: 32px; }
@media (max-width: 782px) { .admin-bar .if-header-wrap { top: 0; } }
.if-nav { background: var(--ink); color: var(--paper); border-bottom: 1px solid var(--line-d); transition: box-shadow .3s; }
.if-nav.is-stuck { box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.if-nav-in { display: flex; align-items: center; gap: 2rem; min-height: var(--nav-h); }
.if-logo { display: block; flex: none; }
.if-logo img { height: 46px; width: auto; }
.if-menu { display: flex; gap: clamp(1rem, 2vw, 2rem); list-style: none; margin: 0 auto; padding: 0; }
.if-menu a { position: relative; display: block; padding: .6rem 0; text-decoration: none; font: 600 .74rem/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--paper-2); transition: color .2s; }
.if-menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--paper); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.if-menu a:hover, .if-menu a[aria-current="page"] { color: var(--paper); }
.if-menu a:hover::after, .if-menu a[aria-current="page"]::after { transform: scaleX(1); }
.if-lang { display: flex; gap: .2rem; list-style: none; margin: 0; padding: 0; }
.if-lang a { display: grid; place-items: center; min-width: 34px; min-height: 34px; text-decoration: none; font: 600 .68rem/1 var(--body); letter-spacing: .14em; color: var(--muted); }
.if-lang a[aria-current="true"], .if-lang a:hover { color: var(--paper); }
.if-nav-cta { flex: none; display: inline-flex; align-items: center; min-height: 42px; padding: 0 1.1rem; border: 1px solid var(--paper-2); color: var(--paper); text-decoration: none; font: 600 .7rem/1 var(--body); letter-spacing: .2em; text-transform: uppercase; transition: background .2s, color .2s; }
.if-nav-cta:hover { background: var(--paper); color: var(--ink); }
.if-burger { display: none; margin-left: auto; width: 48px; height: 48px; background: none; border: 0; color: var(--paper); cursor: pointer; padding: 0; }
.if-burger span, .if-burger span::before, .if-burger span::after { display: block; width: 26px; height: 1.5px; background: currentColor; margin: 0 auto; position: relative; transition: transform .3s var(--ease), opacity .2s; }
.if-burger span::before, .if-burger span::after { content: ""; position: absolute; left: 0; }
.if-burger span::before { top: -8px; } .if-burger span::after { top: 8px; }
.if-nav.is-open .if-burger span { background: transparent; }
.if-nav.is-open .if-burger span::before { transform: translateY(8px) rotate(45deg); }
.if-nav.is-open .if-burger span::after { transform: translateY(-8px) rotate(-45deg); }
@media (max-width: 1080px) {
  :root { --nav-h: 64px; }
  .if-logo img { height: 40px; }
  .if-burger { display: block; }
  .if-nav-cta { display: none; }
  .if-nav-panel { position: fixed; left: 0; right: 0; top: var(--nav-top, var(--nav-h)); bottom: 0; background: var(--ink); padding: 1.5rem var(--pad) 2rem; display: flex; flex-direction: column; gap: 1.5rem; overflow-y: auto; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .25s, transform .3s var(--ease), visibility .25s; border-top: 1px solid var(--line-d); }
  .if-nav.is-open .if-nav-panel { opacity: 1; visibility: visible; transform: none; }
  .if-menu { flex-direction: column; gap: 0; margin: 0; }
  .if-menu a { font: 700 clamp(1.8rem, 8vw, 2.6rem)/1 var(--display); letter-spacing: 0; padding: .7rem 0; border-bottom: 1px solid var(--line-d); color: var(--paper); }
  .if-menu a::after { display: none; }
  .if-lang a { min-width: 48px; min-height: 48px; font-size: .8rem; }
  .if-nav-panel .if-nav-cta-m { display: flex; justify-content: center; align-items: center; min-height: 54px; background: var(--paper); color: var(--ink); text-decoration: none; font: 700 .8rem/1 var(--body); letter-spacing: .2em; text-transform: uppercase; }
}
@media (min-width: 1081px) { .if-nav-panel { display: contents; } .if-nav-cta-m { display: none; } }
body.if-menu-open { overflow: hidden; }

/* Abstände im Fluss (WordPress setzt Blockabstände auf 0, wir setzen sie bewusst) */
.if-main p, .if-footer p { margin: 0 0 1.1em; }
.if-main p:last-child, .if-footer p:last-child { margin-bottom: 0; }
.if-main .if-kicker { margin-bottom: 1.4rem; }
.if-container > * + .if-grid, .if-container > * + .if-reviews, .if-container > * + .if-care, .if-container > * + .if-timeline { margin-top: clamp(2rem, 4vw, 3rem); }
.if-main :is(h1, h2, h3) { margin-top: 0; margin-bottom: .55em; }
.if-main .if-story h2:not(:first-child) { margin-top: 3.2rem; }
.if-main .if-step h3 { margin: .3rem 0 .8rem; }
.if-main .if-accordion summary { margin: 0; }
.if-main .if-panel > h3 { margin-top: 2.2rem; }
.if-main .wp-block-image { margin: 0; }

/* Studio: Foto und Fläche teilen sich eine Zeile, die Fläche überlappt leicht */
@media (min-width: 900px) {
  .if-studio .if-grid > * { grid-row: 1; }
  .if-studio .if-grid > .wp-block-image { grid-column: 1 / 9; }
  .if-studio .if-grid > .if-panel { grid-column: 8 / 13; align-self: center; z-index: 1; }
}

/* ---------- Positionierung (Home) ---------- */
.if-intro .if-h1 { margin: 0; }
.if-intro .if-panel { margin-top: clamp(2rem, 5vw, 4rem); }

/* ---------- Studio ---------- */
.if-studio .if-panel p { color: var(--paper-2); }
.if-studio .if-quote { font-family: var(--display); font-weight: 300; font-size: clamp(1.35rem, 2.2vw, 1.9rem); line-height: 1.2; color: var(--paper); margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line-d); }

/* ---------- Stilrichtungen ---------- */
.if-styles .if-h1 { font-size: clamp(3.4rem, 11vw, 10.5rem); line-height: .84; margin: 0; }
.if-style-list { font-family: var(--display); font-weight: 400; font-size: clamp(1.1rem, 2.1vw, 1.7rem); line-height: 1.5; letter-spacing: .02em; text-transform: uppercase; margin: 1.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--line-w); }

/* ---------- Ablauf-Teaser ---------- */
.if-flow { display: grid; grid-template-columns: repeat(5, 1fr); list-style: none; margin: 2.5rem 0 0; padding: 0; counter-reset: flow; }
.if-flow li { position: relative; padding: 1.4rem 1rem 0 0; border-top: 1px solid var(--line-d); font: 800 clamp(1.1rem, 2vw, 1.8rem)/1 var(--display); text-transform: uppercase; letter-spacing: .01em; counter-increment: flow; }
.if-flow li::before { content: "0" counter(flow); display: block; font: 300 .95rem/1 var(--display); color: var(--muted); margin-bottom: .8rem; letter-spacing: .08em; }
.if-flow li::after { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--paper); }
@media (max-width: 760px) {
  .if-flow { grid-template-columns: 1fr; }
  .if-flow li { display: flex; align-items: baseline; gap: 1rem; padding: 1rem 0; border-top: 0; border-left: 1px solid var(--line-d); padding-left: 1.4rem; }
  .if-flow li::before { margin: 0; }
  .if-flow li::after { top: 1.35rem; left: -4px; }
}

/* ---------- Rezensionen ---------- */
.if-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); margin-top: 2.5rem; }
.if-review { padding-top: 1.3rem; border-top: 1px solid var(--line-w); }
.if-review p:first-child { font-family: var(--display); font-weight: 300; font-size: 1.35rem; line-height: 1.3; }
.if-review .if-note { margin-top: 1rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .7rem; }
@media (max-width: 900px) { .if-reviews { grid-template-columns: 1fr; } }

/* ---------- Abschluss ---------- */
.if-cta { text-align: left; }
.if-cta .if-h1 { max-width: 14ch; }

/* ---------- Seitenkopf der Unterseiten ---------- */
.if-pagehead { padding-block: clamp(3.5rem, 8vw, 7rem) clamp(2rem, 5vw, 4rem); }
.if-pagehead .if-h1 { margin: 0; }
.if-pagehead .if-lead { margin-top: 1.8rem; }

/* ---------- Portfolio ---------- */
/* Portfolio: alle Arbeiten im 4:5-Hochformat, Gewichtung über die Breite (Vorgabe Golan) */
.if-works { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); grid-auto-flow: dense; align-items: start; }
.if-work { grid-column: span 4; position: relative; margin: 0; }
.if-work.is-gross { grid-column: span 7; }
.if-work.is-mittel { grid-column: span 5; }
.if-work.is-klein { grid-column: span 3; }
.if-work.is-schmal { grid-column: span 4; }
.if-work.is-hoch { grid-column: span 4; }
.if-work.is-breit { grid-column: 1 / -1; }
.if-work a, .if-work > div { display: block; color: inherit; text-decoration: none; }
.if-work .if-work-media { background: var(--ink-2); overflow: hidden; }
.if-work img, .if-work video { display: block; width: 100%; height: auto; object-fit: cover; aspect-ratio: 4 / 5; transition: transform .8s var(--ease); }
.if-work.is-schmal .if-work-media { display: flex; justify-content: center; background: none; }
.if-work.is-schmal img, .if-work.is-schmal video { width: 100%; aspect-ratio: 54 / 35; }
.if-work.is-breit img, .if-work.is-breit video { aspect-ratio: 21 / 9; }
.if-work a:hover img, .if-work a:hover video { transform: scale(1.03); }
.if-work-cap { position: absolute; left: 0; bottom: 0; right: 0; display: flex; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; color: var(--paper); background: linear-gradient(to top, rgba(21,21,19,.8), rgba(21,21,19,0)); font: 600 .7rem/1.2 var(--body); letter-spacing: .18em; text-transform: uppercase; opacity: 0; transition: opacity .3s; }
.if-work:hover .if-work-cap, .if-work:focus-within .if-work-cap { opacity: 1; }
.if-wip { position: absolute; top: .8rem; left: .8rem; z-index: 2; padding: .4rem .6rem; background: var(--paper); color: var(--ink); font: 700 .62rem/1 var(--body); letter-spacing: .18em; text-transform: uppercase; }
@media (hover: none) { .if-work-cap { opacity: 1; } }
@media (max-width: 900px) {
  .if-works { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .if-work, .if-work.is-hoch, .if-work.is-mittel, .if-work.is-klein, .if-work.is-schmal { grid-column: span 1; }
  .if-work.is-gross, .if-work.is-breit { grid-column: 1 / -1; }
  .if-work.is-gross img, .if-work.is-gross video { aspect-ratio: 4 / 5; }
  .if-work.is-schmal img, .if-work.is-schmal video { width: 100%; }
}
@media (max-width: 520px) { .if-works { grid-template-columns: 1fr; } .if-work, .if-work.is-hoch { grid-column: 1 / -1; } }

/* Projekt-Detail */
.if-project-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 2rem; }
.if-project-body { display: grid; gap: clamp(1rem, 2vw, 2rem); }
.if-project-body .wp-block-gallery, .if-project-body .wp-block-image, .if-project-body .wp-block-video { margin: 0; }
.if-project-body .wp-block-gallery { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: clamp(.75rem, 2vw, 1.5rem); }
.if-project-body .wp-block-gallery figure { width: 100% !important; margin: 0 !important; }
.if-project-body > p, .if-project-body > h2, .if-project-body > h3 { max-width: 40rem; }
.if-back { display: inline-block; margin-bottom: 1.5rem; text-decoration: none; font: 600 .72rem/1 var(--body); letter-spacing: .2em; text-transform: uppercase; }

/* ---------- Über mich ---------- */
.if-about-portrait img { aspect-ratio: auto; }
.if-story h2 { font-size: clamp(1.9rem, 3.6vw, 3.2rem); margin-top: 3.5rem; }
.if-story h2:first-child { margin-top: 0; }
.if-story p { max-width: 36rem; }
.if-story .if-statement { margin: 2.5rem 0; max-width: 24ch; }
.if-video-portrait video { aspect-ratio: 9 / 16; max-height: 86vh; width: auto; margin-inline: auto; }

/* ---------- Ablauf-Timeline mit kleiner Maschine ---------- */
.if-timeline { position: relative; padding-left: clamp(3rem, 7vw, 6rem); }
.if-timeline::before { content: ""; position: absolute; left: clamp(1rem, 2.6vw, 2.2rem); top: .6rem; bottom: .6rem; width: 1px; background: var(--line-d); }
.if-timeline-ink { position: absolute; left: clamp(1rem, 2.6vw, 2.2rem); top: .6rem; width: 1px; height: 0; background: var(--paper); }
.if-machine { position: absolute; left: clamp(1rem, 2.6vw, 2.2rem); top: .6rem; width: 36px; height: 72px; margin-left: -2px; color: var(--paper); pointer-events: none; transform-origin: 2px 70px; transition: opacity .3s; will-change: transform; }
.if-machine svg { width: 100%; height: 100%; overflow: visible; }
.if-step { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; padding-bottom: clamp(3rem, 6vw, 5rem); }
.if-step:last-child { padding-bottom: 0; }
.if-step::before { content: ""; position: absolute; left: calc(-1 * clamp(3rem, 7vw, 6rem) + clamp(1rem, 2.6vw, 2.2rem) - 4px); top: .55rem; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); border: 1px solid var(--paper-2); transition: background .3s; }
.if-step.is-done::before { background: var(--paper); }
.if-step .if-num { color: var(--muted); margin: 0; }
.if-step h3 { margin: .2rem 0 .8rem; }
.if-step p { max-width: 34rem; color: var(--paper-2); }
.if-step .if-media { max-width: 520px; }
@media (min-width: 900px) {
  .if-step.has-media { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); column-gap: clamp(2rem, 4vw, 4rem); align-items: start; }
  /* Bilder der Schritte bewusst unterschiedlich gross */
  .if-step.medien-gross { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .if-step.medien-klein { grid-template-columns: minmax(0, 1fr) minmax(0, .5fr); }
}
.if-step.medien-gross .if-media { max-width: 560px; }
.if-step.medien-klein .if-media { max-width: 300px; }

/* ---------- Preise ---------- */
.if-prices { border-top: 1px solid var(--line-w); }
.if-price { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1.15rem 0; border-bottom: 1px solid var(--line-w); }
.if-price p { margin: 0; }
.if-price p:first-child { font-weight: 600; }
.if-price p:last-child { font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1; white-space: nowrap; }
.if-dark .if-prices, .if-dark .if-price, .if-panel .if-prices, .if-panel .if-price { border-color: var(--line-d); }

/* Aktion (im Backend ein- und ausschaltbar) */
.if-aktion { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1.4rem; align-items: center; margin-top: 2rem; padding: 1.2rem 1.4rem; border: 1px solid currentColor; }
.if-aktion b { grid-row: span 2; font: 800 clamp(1.6rem, 3vw, 2.4rem)/1 var(--display); text-transform: uppercase; }
.if-aktion span { font: 600 .7rem/1.3 var(--body); letter-spacing: .2em; text-transform: uppercase; opacity: .75; }
.if-aktion p { margin: 0; font-weight: 600; }

/* ---------- Accordions (Konditionen, FAQ) ---------- */
.if-accordion { border-top: 1px solid var(--line-w); }
.if-dark .if-accordion, .if-panel .if-accordion { border-color: var(--line-d); }
.if-accordion .wp-block-details { border-bottom: 1px solid var(--line-w); margin: 0; }
.if-dark .if-accordion .wp-block-details, .if-panel .if-accordion .wp-block-details { border-color: var(--line-d); }
.if-accordion summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.25rem 0; min-height: 56px; font: 700 clamp(1.05rem, 1.6vw, 1.3rem)/1.15 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.if-accordion summary::-webkit-details-marker { display: none; }
.if-accordion summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid currentColor; font: 300 1.3rem/1 var(--body); transition: transform .3s var(--ease); }
.if-accordion details[open] summary::after { transform: rotate(45deg); }
.if-accordion details > :not(summary) { max-width: 44rem; }
.if-accordion details > :last-child { padding-bottom: 1.6rem; }
.if-accordion ul { margin: 0 0 1.1em; padding-left: 1.1rem; }
.if-accordion li { margin-bottom: .35em; }
.if-accordion .if-subhead { font-weight: 700; margin-bottom: .4em; }

/* ---------- Pflege ---------- */
.if-care { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 4vw, 4rem); counter-reset: care; }
.if-care-item { padding: 1.8rem 0; border-top: 1px solid var(--line-d); }
.if-care-item h3 { display: flex; gap: 1rem; align-items: baseline; }
.if-care-item p, .if-care-item li { color: var(--paper-2); }
.if-care-item ul { padding-left: 1.1rem; margin: 0 0 1em; }
.if-care-item .if-subhead { color: var(--paper); font-weight: 700; margin-bottom: .3em; }
@media (max-width: 900px) { .if-care { grid-template-columns: 1fr; } }

/* ---------- Kontakt ---------- */
.if-contact-ways .wp-block-buttons { margin-top: 1.6rem; }
.if-studio-card p { margin: 0 0 1rem; }
.if-studio-card a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.if-map { position: relative; background: var(--ink-2); color: var(--paper); aspect-ratio: 16 / 9; display: grid; place-items: center; text-align: center; padding: 2rem; }
.if-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.4); }
.if-map button { font: 600 .74rem/1 var(--body); letter-spacing: .18em; text-transform: uppercase; padding: 1rem 1.3rem; min-height: 48px; background: var(--paper); color: var(--ink); border: 0; cursor: pointer; }
.if-map p { margin: 1rem 0 0; font-size: .82rem; color: var(--muted); max-width: 26rem; }

/* ---------- Platzhalter ---------- */
.if-ph img { background: var(--ink-2); }

/* ---------- Rechtstexte ---------- */
.if-legal h2 { font-size: clamp(1.3rem, 2vw, 1.7rem); margin: 2.6rem 0 .8rem; }
.if-legal h2:first-child { margin-top: 0; }
.if-legal p { max-width: 42rem; }

/* ---------- Footer ---------- */
.if-footer { background: var(--ink); color: var(--paper-2); padding: clamp(3.5rem, 7vw, 5.5rem) 0 1.6rem; font-size: .95rem; }
.if-footer a { text-decoration: none; }
.if-footer a:hover { color: var(--paper); }
.if-footer-top { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 2rem clamp(1.5rem, 4vw, 3rem); padding-bottom: 3rem; border-bottom: 1px solid var(--line-d); }
.if-footer .if-logo img { height: 74px; }
.if-footer h4 { color: var(--paper); font-family: var(--body); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; margin: 0 0 1rem; }
.if-footer ul { list-style: none; margin: 0; padding: 0; }
.if-footer li { margin-bottom: .45rem; }
.if-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.4rem; font-size: .78rem; color: var(--muted); }
.if-footer-bottom ul { display: flex; gap: 1.4rem; }
@media (max-width: 900px) { .if-footer-top { grid-template-columns: 1fr 1fr; } .if-footer-top > :first-child { grid-column: 1 / -1; } }

/* WhatsApp-Knopf */
.if-wa { position: fixed; right: clamp(.9rem, 2vw, 1.6rem); bottom: clamp(.9rem, 2vw, 1.6rem); z-index: 80; display: grid; place-items: center; width: 56px; height: 56px; background: var(--ink); color: var(--paper); border: 1px solid var(--line-d); text-decoration: none; transition: background .2s, color .2s; }
.if-wa:hover { background: var(--paper); color: var(--ink); }
.if-wa svg { width: 26px; height: 26px; }

/* ---------- Bewegung (ruhig) ---------- */
.if-reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.if-reveal.is-in { opacity: 1; transform: none; }
.no-js .if-reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .if-reveal { transform: none; transition: opacity .4s linear; }
  /* Maschine bleibt: sie bewegt sich nur, wenn man selbst scrollt. Hero-Videos laufen ruhig weiter (Golans Vorgabe). */
}

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  body { font-size: 1rem; }
  .if-section { padding-block: clamp(3.5rem, 14vw, 5rem); }
  .if-panel { padding: 1.75rem 1.25rem; }
  .if-panel.if-bleed-right, .if-panel.if-bleed-left { margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); }
  .if-bleed-right::after, .if-bleed-left::after { display: none; }
  .if-kicker { margin-bottom: 1rem; }
  .wp-block-buttons { flex-direction: column; align-items: stretch; }
  .wp-block-button .wp-block-button__link { justify-content: space-between; width: 100%; box-sizing: border-box; min-height: 54px; }
  .wp-block-button.if-link .wp-block-button__link { justify-content: flex-start; width: auto; min-height: 44px; }
  .if-price { padding: 1rem 0; }
  .if-timeline { padding-left: 2.6rem; }
  .if-timeline::before, .if-timeline-ink, .if-machine { left: .9rem; }
  .if-step::before { left: calc(-2.6rem + .9rem - 4px); }
  .if-machine { width: 22px; height: 44px; transform-origin: 2px 42px; }
}

/* ---------- Korrekturen nach dem Abgleich mit Golans Briefing ---------- */
.if-hero .if-hero-poster { opacity: 1; }
@media (min-width: 900px) { .if-c1-9 { grid-column: 1 / 10; } }
@media (min-width: 900px) { .if-main .if-duo .if-b { margin-top: clamp(4rem, 12vw, 11rem); } }

/* Ablauf-Teaser: IDEE → ANFRAGE → PLANUNG → DESIGN → TATTOO */
.if-flow { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 0; counter-reset: none; margin: 0 0 1.2rem; padding: 0 0 2rem; border-bottom: 1px solid var(--line-d); }
.if-flow li { padding: 0; border: 0; font: 800 clamp(1.5rem, 3.4vw, 3.3rem)/1 var(--display); letter-spacing: -.005em; }
.if-flow li::before { content: none; }
.if-flow li::after { content: "→"; position: static; display: inline-block; width: auto; height: auto; background: none; border-radius: 0; margin: 0 .35em; font-weight: 300; color: var(--muted); }
.if-flow li:last-child::after { content: none; }
@media (max-width: 760px) {
  .if-flow { display: block; }
  .if-flow li { display: block; border: 0; padding: .1rem 0; font-size: clamp(2rem, 11vw, 2.8rem); }
  .if-flow li::after { content: "↓"; display: block; margin: .1rem 0 .15rem; font-size: 1.2rem; }
}

/* Kurze Linie unter grossen Titeln (Referenz: feine, gezielte Linien) */
.if-pagehead .if-h1::after, .if-intro .if-h1::after, .if-cta .if-h1::after, .if-styles .if-h1::after { content: ""; display: block; width: 3rem; height: 3px; margin-top: .45em; background: currentColor; }
.if-styles .if-h1::after { display: none; }

/* Abstände Kontakt */
.if-main .wp-block-buttons + p { margin-top: 1.6rem; }
.if-main .if-studio-card + h3 { margin-top: 2.4rem; }

/* Footer klar vom dunklen Abschluss getrennt, WhatsApp-Knopf verdeckt nichts */
.if-footer { border-top: 1px solid var(--line-d); }
.if-footer .if-logo img { height: 84px; width: auto; }
@media (max-width: 760px) { .if-footer-bottom { padding-bottom: 5rem; } }

/* Abschluss Über mich: nur der Link zu den Arbeiten */
.if-cta.if-tight .wp-block-buttons { margin-top: 0; }