/* ==========================================================================
   realonaut.com – Bausteine der Unterseiten (Entwurf)
   Setzt tokens.css, komponenten.css und startseite.css voraus.
   ========================================================================== */

/* ---------- Hero Unterseite: Text links, echtes Projekt rechts ---------- */
.sub-hero { padding-block: clamp(32px, 5vw, 72px) var(--sp-7); }
.sub-hero-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.sub-hero .h-hero { font-size: clamp(2.75rem, 1.2rem + 4.2vw, 5.5rem); }
.sub-hero .lead { max-width: 50ch; }
.sub-hero-copy { display: grid; gap: var(--sp-5); }

.devices { position: relative; padding: 0 clamp(24px, 5vw, 64px) clamp(40px, 5vw, 64px) 0; }
.devices .desk { border-radius: var(--r-media); overflow: hidden; background: var(--surface); box-shadow: 0 0 0 var(--stroke) var(--line-soft); }
.devices .desk img { width: 100%; height: auto; }
.devices .phone-shot {
  position: absolute; right: 0; bottom: 0; width: 30%; aspect-ratio: 9 / 19;
  border-radius: 22px; overflow: hidden; background: var(--surface);
  border: 6px solid var(--c-obsidian);
}
.devices .phone-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.devices figcaption { margin-top: var(--sp-3); padding-right: 34%; font-size: var(--fs-caption); color: var(--ink-muted); } /* rechts liegt das Smartphone */
@media (max-width: 900px) { .sub-hero-grid { grid-template-columns: 1fr; } }

/* ---------- Bausteine: Zeilen mit Name links, Text rechts ---------- */
.rows { border-top: var(--dotted); }
.row-item { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-5) clamp(24px, 5vw, 80px); padding-block: var(--sp-6); border-bottom: var(--dotted); align-items: baseline; }
.row-item p { max-width: 58ch; color: var(--ink-muted); font-size: var(--fs-lead); line-height: 1.5; }
.row-item p b { color: var(--ink); font-weight: 600; }
@media (max-width: 760px) { .row-item { grid-template-columns: 1fr; gap: var(--sp-2); } }

/* ---------- Preisstufen ---------- */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.tier { background: var(--surface); border-radius: var(--r-card); padding: clamp(24px, 3vw, 40px); display: grid; gap: var(--sp-4); align-content: start; }
.tier .price { font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 1.4rem + 1.6vw, 3rem); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tier .price small { display: block; font-family: var(--font-text); font-weight: 500; font-size: var(--fs-small); color: var(--ink-muted); margin-top: var(--sp-2); }
.tier .scope { color: var(--ink-muted); }
.tier .time { font-weight: 600; }
.tier .tag { justify-self: start; }
.tiers-note { margin-top: var(--sp-4); font-size: var(--fs-small); color: var(--ink-muted); }
@media (max-width: 900px) { .tiers { grid-template-columns: 1fr; } }

/* ---------- Produkt-Blöcke (SEO-Befund, Startpaket) ---------- */
.product { border-radius: var(--r-card); padding: clamp(28px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-6) clamp(32px, 5vw, 80px); align-items: end; }
.product .h2 { max-width: 18ch; }
.product .lead { margin-top: var(--sp-4); }
.product-side { display: grid; gap: var(--sp-4); justify-items: start; }
.product-side .price { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.5rem, 1.8rem + 2.4vw, 4rem); line-height: 1; }
.product-side small { font-size: var(--fs-small); opacity: 0.8; }
.product.dark { background: var(--inverse); color: var(--on-inverse); }
.product.dark .muted, .product.dark .lead { color: var(--on-inverse); opacity: 0.85; }
.product.dark .btn-primary:hover { --btn-bg: var(--c-limestone); --btn-ink: var(--c-obsidian); --btn-border: var(--c-limestone); }
.product.ember { background: var(--accent); color: var(--on-accent); }
.product.ember .punkt-list li::before { background: var(--c-obsidian); }
.product.ember .btn { --btn-bg: #070607; --btn-ink: #f7f6f2; --btn-border: #070607; }
.product.ember .btn:hover { --btn-bg: #f7f6f2; --btn-ink: #070607; --btn-border: #f7f6f2; }
@media (max-width: 900px) { .product { grid-template-columns: 1fr; align-items: start; } }

/* ---------- Fallstudien ---------- */
.cases { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-10) clamp(32px, 5vw, 80px); }
.case { grid-column: span 6; display: grid; gap: var(--sp-4); align-content: start; }
.case.wide { grid-column: 1 / -1; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-5) clamp(32px, 5vw, 64px); align-items: center; }
.case .shot { border-radius: var(--r-media); overflow: hidden; background: var(--surface); box-shadow: 0 0 0 var(--stroke) var(--line-soft); aspect-ratio: 16 / 10; }
.case .shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* frei stehendes Bild ohne Rahmen (z. B. Geräte-Mockup mit transparentem Grund) */
@media (min-width: 901px) { .case.wide.free { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } }
.case .shot.free { background: none; box-shadow: none; border-radius: 0; aspect-ratio: auto; overflow: visible; }
@media (min-width: 901px) { .case .shot.free { margin-left: calc(var(--gutter) * -0.5); } }
.case .shot.free img { object-fit: contain; height: auto; }
/* Starres Raster (Georg, 30.09.2026). Die versetzte Anordnung ist abgeschaltet:
   @media (min-width: 901px) { .case.shift { margin-top: var(--sp-9); } } */
.case-body { display: grid; gap: var(--sp-3); }
.case-meta { font-size: var(--fs-small); color: var(--ink-muted); }
.case dl { display: grid; grid-template-columns: 5.5em 1fr; gap: var(--sp-2) var(--sp-4); margin: 0; font-size: var(--fs-body); }
.case dt { font-weight: 700; }
.case dd { margin: 0; color: var(--ink-muted); }
.case .credit { font-size: var(--fs-caption); color: var(--ink-muted); }
@media (max-width: 900px) { .case, .case.wide { grid-column: 1 / -1; grid-template-columns: 1fr; } }

.more-refs { margin-top: var(--sp-10); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8) clamp(32px, 4vw, 64px); align-items: start; }
/* versetzt, abgeschaltet: @media (min-width: 901px) { .more-refs figure:nth-child(3n+2) { margin-top: var(--sp-8); } } */
.more-refs figure { display: grid; gap: var(--sp-3); margin: 0; }
.more-refs .shot { border-radius: var(--r-media); overflow: hidden; aspect-ratio: 16 / 10; box-shadow: 0 0 0 var(--stroke) var(--line-soft); }
.more-refs .shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.more-refs figcaption { font-size: var(--fs-small); }
.more-refs figcaption b { display: block; font-size: var(--fs-body); }
@media (max-width: 900px) { .more-refs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .more-refs { grid-template-columns: 1fr; } }

/* einzelnes Projekt unter der Dreierreihe */
.solo-ref { margin: var(--sp-10) 0 0; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--sp-5) clamp(32px, 5vw, 64px); align-items: end; }
.solo-ref .shot { border-radius: var(--r-media); overflow: hidden; aspect-ratio: 16 / 10; box-shadow: 0 0 0 var(--stroke) var(--line-soft); }
.solo-ref .shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.solo-ref figcaption { display: grid; gap: var(--sp-2); }
.solo-ref .credit { font-size: var(--fs-caption); color: var(--ink-muted); }
@media (max-width: 900px) { .solo-ref { grid-template-columns: 1fr; } }

/* ---------- Ablauf in vier Schritten (waagrecht) ---------- */
.steps4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); counter-reset: s; }
.steps4 li { background: var(--surface); border-radius: var(--r-card); padding: clamp(20px, 2.5vw, 32px); display: grid; gap: var(--sp-3); align-content: start; }
.steps4 .n { font-family: var(--font-display); font-weight: 900; font-size: 2.75rem; line-height: 0.9; }
.steps4 h3 { font-size: 1.1875rem; font-weight: 650; line-height: 1.3; }
.steps4 p { font-size: var(--fs-small); color: var(--ink-muted); }
.promises { margin-top: var(--sp-7); display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-7); font-size: var(--fs-lead); line-height: 1.45; max-width: 1000px; }
@media (max-width: 900px) { .steps4 { grid-template-columns: 1fr 1fr; } .promises { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .steps4 { grid-template-columns: 1fr; } }

/* ---------- Betreuung ---------- */
.care { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sp-6) clamp(32px, 5vw, 80px); align-items: start; }
.care-list { border-top: var(--dotted); }
.care-item { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2) var(--sp-6); padding-block: var(--sp-5); border-bottom: var(--dotted); align-items: baseline; }
.care-item .h4 { grid-column: 1; }
.care-item .price { grid-column: 2; grid-row: 1 / span 2; font-weight: 700; font-size: var(--fs-lead); white-space: nowrap; font-variant-numeric: tabular-nums; }
.care-item p { grid-column: 1; color: var(--ink-muted); max-width: 52ch; }
@media (max-width: 900px) { .care { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .care-item { grid-template-columns: 1fr; } .care-item .price { grid-column: 1; grid-row: auto; } }

.sec-head { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-7); max-width: 900px; }
.sec-head .lead { color: var(--ink-muted); }


/* ==========================================================================
   Projekt-Bühne (Variante B, von Georg gewählt am 30.09.2026):
   Fläche in der Hauptfarbe des Kunden, darauf ein flaches Browserfenster,
   bei den Fallstudien zusätzlich die Handy-Ansicht.
   ========================================================================== */
.stage { border-radius: var(--r-card); background: var(--surface); padding: clamp(20px, 3.5vw, 44px) clamp(20px, 3.5vw, 44px) 0; overflow: hidden; position: relative; }
.stage.tone { background: var(--tone); }
.browser { border-radius: 12px 12px 0 0; overflow: hidden; background: #fff; box-shadow: 0 0 0 1.5px rgba(7, 6, 7, 0.14); }
.browser-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #ecebe7; }
.browser-bar i { width: 8px; height: 8px; border-radius: 50%; background: #c9c8c2; flex: none; }
.browser-bar span { margin-left: 6px; flex: 1; max-width: 300px; background: #f7f6f2; border-radius: 999px; padding: 3px 12px; font-size: 11.5px; line-height: 1.5; color: #56554f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browser-view { aspect-ratio: 16 / 10; overflow: hidden; }
.browser-view img { width: 100%; height: auto; display: block; }
.stage .phone { position: absolute; right: clamp(14px, 2.5vw, 32px); bottom: 0; width: 24%; aspect-ratio: 9 / 17; border: 5px solid #070607; border-bottom: 0; border-radius: 20px 20px 0 0; overflow: hidden; background: #fff; }
.stage .phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.stage.with-phone .browser { margin-right: 14%; }
/* kleinere Bühnen in der Dreierreihe */
.more-refs .stage { padding: clamp(14px, 2vw, 24px) clamp(14px, 2vw, 24px) 0; border-radius: clamp(18px, 2vw, 28px); }
.more-refs .browser-bar { padding: 6px 10px; }
.more-refs .browser-bar span { font-size: 10.5px; }
/* gleiche Bühnenhöhe im starren Raster, egal ob mit oder ohne Handy */
.case:not(.wide) .stage, .more-refs .stage { aspect-ratio: 16 / 10; }
.solo-ref .stage { aspect-ratio: 16 / 9; }

/* ==========================================================================
   KI & Automatisierung
   ========================================================================== */
/* Ablauf-Diagramm im Hero: ein echter Ablauf statt KI-Klischee */
.flow { background: var(--surface); border-radius: var(--r-card); padding: clamp(24px, 3.5vw, 48px); display: grid; gap: 0; }
.flow-title { font-size: var(--fs-small); color: var(--ink-muted); margin-bottom: var(--sp-5); }
.flow ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.flow li { display: grid; grid-template-columns: 20px 1fr auto; gap: var(--sp-4); align-items: center; padding-block: var(--sp-3); position: relative; }
.flow li::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); justify-self: center; z-index: 1; }
.flow li.human::before { background: var(--surface); box-shadow: 0 0 0 var(--stroke) var(--ink); }
.flow li.done::before { background: var(--accent); }
.flow li:not(:last-child)::after { content: ""; position: absolute; left: 9.25px; top: 50%; height: 100%; border-left: var(--stroke) dotted var(--ink); }
.flow b { font-weight: 600; font-size: var(--fs-body); }
.flow small { display: block; font-size: var(--fs-caption); color: var(--ink-muted); font-weight: 500; }

/* Geschichte + Lehre */
.story { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-3); align-items: stretch; }
.story-copy { background: var(--surface); border-radius: var(--r-card); padding: clamp(24px, 4vw, 56px); display: grid; gap: var(--sp-5); align-content: start; }
.story-copy .h2 { max-width: 20ch; }
.story-copy p { font-size: var(--fs-lead); line-height: 1.5; max-width: 58ch; color: var(--ink-muted); }
.lesson { background: var(--inverse); color: var(--on-inverse); border-radius: var(--r-card); padding: clamp(24px, 4vw, 56px); display: grid; align-content: end; gap: var(--sp-4); }
.lesson .h3 { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 3rem); line-height: 1.1; }
.lesson p:not(.h3) { font-size: var(--fs-small); opacity: 0.78; }
@media (max-width: 900px) { .story { grid-template-columns: 1fr; } }

/* zwei gleich breite Spalten (KI-Analyse) und 2×2-Raster (im eigenen Einsatz) */
.tiers.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tier .was { font-size: var(--fs-small); color: var(--ink-muted); }
.tier .was s { text-decoration-thickness: 1.5px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.grid2 > div { background: var(--surface); border-radius: var(--r-card); padding: clamp(24px, 3vw, 40px); display: grid; gap: var(--sp-3); align-content: start; }
.grid2 p { color: var(--ink-muted); max-width: 46ch; }
@media (max-width: 760px) { .tiers.two, .grid2 { grid-template-columns: 1fr; } }
.steps4.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .steps4.three { grid-template-columns: 1fr; } }
.row-item .note { display: block; margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--ink); font-weight: 600; }
.after { margin-top: var(--sp-6); font-size: var(--fs-lead); font-weight: 600; max-width: 56ch; }
.product .fine { font-size: var(--fs-small); opacity: 0.85; max-width: 56ch; margin-top: var(--sp-4); }
.sub-hero .h-hero.long { font-size: clamp(2.5rem, 1.1rem + 3.6vw, 4.75rem); }

/* ==========================================================================
   Consulting
   ========================================================================== */
.portrait-raster { margin: 0; display: grid; justify-items: center; }
.portrait-raster img { width: min(100%, 520px); height: auto; }
.ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.way { border-radius: var(--r-card); padding: clamp(24px, 3.5vw, 48px); display: grid; gap: var(--sp-4); align-content: start; background: var(--surface); }
.way.paid { background: none; box-shadow: inset 0 0 0 var(--stroke) var(--ink); }
.way .price { font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 1.4rem + 1.6vw, 3rem); line-height: 1; }
.way p { color: var(--ink-muted); max-width: 46ch; }
.way .tag { justify-self: start; }
@media (max-width: 760px) { .ways { grid-template-columns: 1fr; } }

.quotes { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-3); }
.q { border-radius: var(--r-card); padding: clamp(24px, 3.5vw, 48px); background: var(--surface); display: flex; flex-direction: column; gap: var(--sp-6); justify-content: space-between; margin: 0; }
.q.main { grid-row: span 2; background: var(--inverse); color: var(--on-inverse); }
.q blockquote { font-size: var(--fs-lead); line-height: 1.45; font-weight: 500; text-wrap: pretty; }
.q.main blockquote { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); line-height: 1.3; max-width: 24ch; }
.q figcaption { font-size: var(--fs-small); line-height: 1.45; }
.q figcaption span { display: block; opacity: 0.72; }
@media (max-width: 900px) { .quotes { grid-template-columns: 1fr; } .q.main { grid-row: auto; } }

.praxis { border-top: var(--dotted); }
.praxis-item { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sp-4) clamp(24px, 5vw, 80px); padding-block: var(--sp-7); border-bottom: var(--dotted); align-items: baseline; }
.praxis-item .years { font-size: var(--fs-small); color: var(--ink-muted); display: block; margin-top: var(--sp-2); font-variant-numeric: tabular-nums; }
.praxis-item p { font-size: var(--fs-lead); line-height: 1.5; max-width: 56ch; color: var(--ink-muted); }
@media (max-width: 760px) { .praxis-item { grid-template-columns: 1fr; } }
.flow-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
@media (max-width: 960px) { .flow-grid { grid-template-columns: 1fr; } }
.foerder-note { margin-top: var(--sp-5); font-size: var(--fs-small); color: var(--ink-muted); }

/* ==========================================================================
   About
   ========================================================================== */
.about-hero-img { margin: 0; }
.about-hero-img img { width: 100%; height: auto; }
.statement { background: var(--inverse); color: var(--on-inverse); border-radius: var(--r-card); padding: clamp(28px, 5vw, 72px); display: grid; gap: var(--sp-5); margin: 0; }
.statement blockquote { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.75rem); line-height: 1.25; font-weight: 500; max-width: 30ch; text-wrap: pretty; }
.statement figcaption { font-size: var(--fs-small); }
.statement figcaption span { display: block; opacity: 0.72; }
.prose-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sp-6) clamp(32px, 5vw, 80px); align-items: start; }
.prose { display: grid; gap: var(--sp-5); font-size: var(--fs-lead); line-height: 1.55; max-width: 60ch; }
@media (max-width: 900px) { .prose-grid { grid-template-columns: 1fr; } }
.namecard { background: var(--surface); border-radius: var(--r-card); padding: clamp(28px, 5vw, 64px); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-6) clamp(32px, 5vw, 72px); align-items: center; }
.namecard img { width: clamp(96px, 14vw, 200px); height: auto; }
.namecard p { font-size: var(--fs-lead); line-height: 1.55; max-width: 56ch; color: var(--ink-muted); margin-top: var(--sp-4); }
.namecard p b { color: var(--ink); font-weight: 650; }
@media (max-width: 700px) { .namecard { grid-template-columns: 1fr; } }
.timeline { border-top: var(--dotted); list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--sp-2) clamp(24px, 5vw, 80px); padding-block: var(--sp-5); border-bottom: var(--dotted); align-items: baseline; }
.timeline .when { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); line-height: 1.1; font-variant-numeric: tabular-nums; }
.timeline h3 { font-size: var(--fs-h4); font-weight: 650; line-height: 1.3; }
.timeline p { color: var(--ink-muted); margin-top: 4px; max-width: 60ch; }
@media (max-width: 700px) { .timeline li { grid-template-columns: 1fr; } }
.people { border-top: var(--dotted); list-style: none; margin: 0; padding: 0; }
.people li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr); gap: var(--sp-2) clamp(24px, 4vw, 64px); padding-block: var(--sp-5); border-bottom: var(--dotted); align-items: baseline; }
.people b { font-size: var(--fs-h4); font-weight: 650; }
.people .role { font-weight: 600; }
.people p { color: var(--ink-muted); }
@media (max-width: 800px) { .people li { grid-template-columns: 1fr; } }
.facts-band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.facts-band div { background: var(--surface); border-radius: var(--r-card); padding: clamp(24px, 3vw, 40px); display: grid; gap: var(--sp-2); }
.facts-band .big { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.5rem, 1.8rem + 2.6vw, 4.25rem); line-height: 1; }
.facts-band span { color: var(--ink-muted); }
@media (max-width: 760px) { .facts-band { grid-template-columns: 1fr; } }
.facts-names { margin-top: var(--sp-5); font-size: var(--fs-lead); color: var(--ink-muted); max-width: 60ch; }

/* ==========================================================================
   Referenzen (vollständige Liste, starres Dreier-Raster)
   ========================================================================== */
.ref-hero { padding-block: clamp(40px, 6vw, 88px) var(--sp-7); display: grid; gap: var(--sp-5); max-width: 900px; }
.ref-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8) clamp(24px, 3vw, 48px); align-items: start; }
.ref-grid figure { margin: 0; display: grid; gap: var(--sp-3); }
.ref-grid .stage { aspect-ratio: 16 / 10; padding: clamp(14px, 2vw, 24px) clamp(14px, 2vw, 24px) 0; border-radius: clamp(18px, 2vw, 28px); }
.ref-grid .browser-bar { padding: 6px 10px; }
.ref-grid .browser-bar span { font-size: 10.5px; }
.ref-grid .stage.plain { padding: clamp(14px, 2vw, 24px); display: grid; place-items: center; }
.ref-grid .stage.plain img { width: 100%; height: auto; }
.ref-grid figcaption { display: grid; gap: 2px; font-size: var(--fs-small); }
.ref-grid figcaption b { font-size: var(--fs-h4); font-weight: 650; line-height: 1.3; }
.ref-grid figcaption .credit { font-size: var(--fs-caption); color: var(--ink-muted); margin-top: 2px; }
.ref-more { margin-top: var(--sp-9); padding-top: var(--sp-5); border-top: var(--dotted); font-size: var(--fs-lead); color: var(--ink-muted); max-width: 70ch; }
.ref-more b { color: var(--ink); font-weight: 650; }
@media (max-width: 960px) { .ref-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ref-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Kontakt, Impressum, Datenschutz
   ========================================================================== */
.contact-rows { border-top: var(--dotted); }
.contact-rows > div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sp-2) clamp(24px, 5vw, 80px); padding-block: var(--sp-5); border-bottom: var(--dotted); align-items: baseline; }
.contact-rows dt { font-weight: 650; }
.contact-rows dd { margin: 0; font-size: var(--fs-lead); }
.contact-rows a { color: var(--ink); }
@media (max-width: 700px) { .contact-rows > div { grid-template-columns: 1fr; } }
.legal { padding-block: clamp(40px, 6vw, 88px) var(--section-gap); }
.legal-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sp-7) clamp(32px, 5vw, 80px); align-items: start; }
.legal-body { display: grid; gap: var(--sp-7); max-width: 68ch; }
.legal-body section { display: grid; gap: var(--sp-3); }
.legal-body h2 { font-size: var(--fs-h4); font-weight: 650; line-height: 1.3; }
.legal-body p, .legal-body li { color: var(--ink-muted); }
.legal-body dl { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-2) var(--sp-5); margin: 0; }
.legal-body dt { color: var(--ink-muted); }
.legal-body dd { margin: 0; font-weight: 600; }
.legal-body a { color: var(--ink); }
.todo { border: var(--stroke) dotted var(--ink-muted); border-radius: 16px; padding: var(--sp-3) var(--sp-4); font-size: var(--fs-small); color: var(--ink-muted); }
.todo b { color: var(--ink); }
@media (max-width: 900px) { .legal-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .legal-body dl { grid-template-columns: 1fr; gap: 0 0; } .legal-body dd { margin-bottom: var(--sp-3); } }

/* ---------- Referenz-Unterseite ---------- */
.back { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--ink-muted); text-decoration: none; width: fit-content; min-height: 32px; }
.back::before { content: "←"; }
.back:hover { color: var(--ink); }
.proj-hero { padding-block: clamp(32px, 5vw, 72px) var(--sp-7); display: grid; gap: var(--sp-4); max-width: 900px; }
.proj-hero .lead { max-width: 46ch; }
a.stage { display: block; text-decoration: none; }
.ref-grid figcaption a { color: inherit; text-decoration: none; }
.ref-grid figcaption a:hover { text-decoration: underline; text-underline-offset: 3px; }
.proj-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5) clamp(24px, 3vw, 48px); margin: 0; padding-block: var(--sp-5); border-block: var(--dotted); }
.proj-facts dt { font-size: var(--fs-small); color: var(--ink-muted); }
.proj-facts dd { margin: 4px 0 0; font-weight: 600; }
.proj-text { display: grid; gap: var(--sp-5); max-width: 62ch; }
.proj-steps { display: grid; gap: 0; padding: 0; margin: 0; counter-reset: s; }
.proj-steps li { counter-increment: s; position: relative; padding: var(--sp-4) 0 var(--sp-4) 3rem; border-top: var(--dotted); color: var(--ink-muted); }
.proj-steps li::before { position: absolute; left: 0; content: counter(s, decimal-leading-zero); font: 900 1.25rem/1.3 var(--font-display); color: var(--ink); }
.proj-steps li > b { color: var(--ink); }

.proj-long .browser-view { aspect-ratio: 16 / 9; position: relative; container-type: size; }
.proj-long .browser-view img { position: absolute; top: 0; left: 0; transition: transform 1.2s var(--ease); }
.proj-long:hover .browser-view img, .proj-long:focus-visible .browser-view img { transform: translateY(calc(-100% + 100cqh)); transition: transform 16s linear; }
@media (prefers-reduced-motion: reduce) { .proj-long:hover .browser-view img, .proj-long:focus-visible .browser-view img { transform: none; } }
.hint { margin-top: var(--sp-3); font-size: var(--fs-caption); color: var(--ink-muted); }
.proj-voice { margin: 0; max-width: none; }
.proj-next { margin-top: var(--sp-6); }
@media (max-width: 760px) { .proj-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (hover: none) { .hint { display: none; } }

/* ---------- Insights ---------- */
.post-list { display: grid; padding: 0; margin: 0; }
.post-list li { border-top: var(--dotted); }
.post-list li:last-child { border-bottom: var(--dotted); }
.post { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--sp-3) clamp(24px, 4vw, 64px); padding-block: var(--sp-6); text-decoration: none; color: inherit; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: var(--fs-small); color: var(--ink-muted); grid-row: span 2; align-self: start; margin: 0; }
.post-title { display: block; max-width: 22ch; }
.post-teaser { display: block; grid-column: 2; max-width: 60ch; color: var(--ink-muted); }
a.post:hover .post-title { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.post.is-idea .post-title { color: var(--ink-muted); }
@media (max-width: 760px) { .post { grid-template-columns: 1fr; } .post-meta { grid-row: auto; } .post-teaser { grid-column: 1; } }

.article-head { padding-block: clamp(32px, 5vw, 72px) var(--sp-7); display: grid; gap: var(--sp-4); max-width: 960px; }
.article-head .post-meta { grid-row: auto; }
.byline { display: grid; gap: 2px; font-size: var(--fs-small); margin-top: var(--sp-3); }
.byline span { color: var(--ink-muted); }
.article-body { max-width: 68ch; margin-left: auto; margin-right: clamp(0px, 12vw, 200px); display: grid; gap: var(--sp-5); padding-bottom: var(--section-gap); font-size: 1.0625rem; line-height: 1.65; }
.article-body h2 { font: 900 clamp(1.6rem, 1.3rem + 1vw, 2.25rem)/1.12 var(--font-display); margin-top: var(--sp-5); text-wrap: balance; }
.article-body .lead { color: var(--ink); }
.article-body ul { display: grid; gap: var(--sp-3); }
.article-cta { margin-top: var(--sp-6); background: var(--surface); border-radius: var(--r-card); padding: clamp(24px, 4vw, 48px); display: grid; gap: var(--sp-3); justify-items: start; }

/* Projektnamen als Link auf die Projektseite */
.case h3 a, .more-refs figcaption a, .solo-ref figcaption a { color: inherit; text-decoration: none; }
.case h3 a::after { content: " →"; font-family: var(--font-text); font-weight: 500; font-size: 0.6em; vertical-align: 0.15em; }
.case h3 a:hover, .more-refs figcaption a:hover, .solo-ref figcaption a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Beitragstext aus dem WordPress-Editor: erste Zeile als Vorspann, Listen mit Punkt */
.article-body > p:first-child { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink); }
.article-body > ul:not(.punkt-list) { list-style: none; padding: 0; }
.article-body > ul:not(.punkt-list) li { position: relative; padding-left: 1.4rem; }
.article-body > ul:not(.punkt-list) li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.45em; height: 0.45em; border-radius: 50%; background: var(--accent); }
.article-body a:not(.btn) { color: var(--ink); text-underline-offset: 3px; }
.article-body img { max-width: 100%; height: auto; border-radius: var(--r-img, 20px); }
.pagination { margin-top: var(--sp-6); }
.pagination .nav-links { display: flex; gap: var(--sp-3); }
.pagination .screen-reader-text { position: absolute; left: -9999px; }
.more-refs figcaption .credit { display: block; font-size: var(--fs-caption); color: var(--ink-muted); margin-top: 2px; }

/* Freigestellte Gerätebilder (Referenz „Ohne Browserrahmen“, z. B. REALONAUT 360): ohne Farbfläche, direkt auf dem Hintergrund */
.stage.tone.plain { background: transparent; padding: 0; overflow: visible; }
.ref-grid .stage.tone.plain { padding: 0; }
.stage.plain img { width: 100%; height: auto; display: block; }
.praxis-item h3 a { color: inherit; text-decoration: none; }
.praxis-item h3 a::after { content: " →"; font-family: var(--font-text); font-weight: 500; font-size: 0.6em; vertical-align: 0.15em; }
.praxis-item h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }