/* Static detail pages: existing CI, native links and disclosure controls. */
body.detail-page { background: var(--ci-black); color: var(--ci-room-text); }
.detail-shell { width: min(1160px, calc(100% - 96px)); margin-inline: auto; }
.detail-logo { display: block; width: 158px; flex-shrink: 0; }
.breadcrumbs { margin-top: 34px; font-size: 13px; color: #c7c7c7; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 8px 12px; list-style: none; }
.breadcrumbs li + li::before { content: '/'; margin-right: 12px; color: #999; }
.breadcrumbs a { text-underline-offset: 4px; }
.breadcrumbs :is(a, [aria-current]) { display: inline-flex; align-items: center; min-height: 44px; margin-block: -10px; }   /* Tippfläche 44 px, die Zeile bleibt 24 px hoch; V19.13 (P44): die aktuelle Seite gleich, damit die Grundlinien fluchten */
.detail-hero { padding-block: clamp(56px, 8vw, 112px) clamp(56px, 7vw, 96px); max-width: 960px; }
.detail-kicker { font-size: 13px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: #c7c7c7; }
.detail-hero h1 { font-size: clamp(38px, 5.9vw, 76px); font-weight: 300; letter-spacing: -.035em; line-height: 1.1; overflow-wrap: anywhere; max-width: 19ch; text-wrap: balance; }   /* V19.13 (Rundgang 24.10., P44): kein Einzelwort in der letzten Zeile */
.detail-hero .detail-lead { font-size: clamp(20px, 2.1vw, 25px); line-height: 1.55; max-width: 57ch; margin-top: 32px; }
.detail-hero .detail-context { max-width: 64ch; color: #c7c7c7; margin-top: 24px; }
.detail-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.detail-actions > a:not(.aktion) { display: inline-flex; align-items: center; min-height: 44px; }
.detail-section { border-top: 1px solid #454545; display: grid; grid-template-columns: minmax(160px, .7fr) minmax(0, 2fr); gap: 40px; padding-block: 56px; }
.detail-section > h2 { font-size: 15px; line-height: 1.5; font-weight: 600; max-width: 20ch; }
.detail-section .section-body { max-width: 72ch; min-width: 0; overflow-wrap: break-word; hyphens: auto; }   /* V19.13 (Rundgang 24.10., P30): lange Wörter (Datenschutz) sprengen bei 320 px nicht die Breite */
.section-body > :last-child { margin-bottom: 0; }
.section-body h3 { font-size: 25px; line-height: 1.3; margin: 0 0 16px; font-weight: 450; }
.detail-list { padding-left: 1.2em; }
.detail-list li { padding-left: .25em; margin-bottom: 14px; }
.detail-list li::marker { color: #c7c7c7; }
.detail-steps { list-style: none; counter-reset: steps; }
.detail-steps li { counter-increment: steps; padding-left: 45px; position: relative; margin-bottom: 26px; }
.detail-steps li::before { content: '0' counter(steps); position: absolute; left: 0; top: 1px; font-size: 13px; color: #c7c7c7; }
.detail-steps strong { display: block; font-weight: 600; margin-bottom: 4px; }
.detail-note { color: #c7c7c7; font-size: 15px; }
.detail-section a:not(.aktion), .detail-context a { text-decoration-thickness: 1px; text-underline-offset: 5px; }
.detail-section a:not(.aktion):hover, .breadcrumbs a:hover { text-decoration-color: var(--ci-interaction-red); }
.detail-faq details { border-bottom: 1px solid #454545; padding-block: 16px; }
.detail-faq details:first-child { padding-top: 0; }
.detail-faq summary { font-weight: 550; cursor: pointer; min-height: 44px; padding: 7px 0; }
.detail-faq details p { color: #c7c7c7; padding-top: 12px; }
.detail-contact { border-top: 1px solid #454545; padding-block: 64px 80px; }
.detail-contact h2 { font-size: clamp(30px, 4vw, 48px); margin-bottom: 24px; max-width: 22ch; }
.detail-contact p { max-width: 65ch; }
.detail-contact .contact-address { display: inline-block; font-size: clamp(19px, 3vw, 32px); overflow-wrap: anywhere; }
.detail-footer { padding-block: 24px 32px; border-top: 1px solid #454545; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px 32px; color: #c7c7c7; font-size: 13px; }
.detail-footer p { margin: 0; }
.detail-footer nav { display: flex; flex-wrap: wrap; gap: 20px; }
.detail-footer nav a { display: inline-flex; align-items: center; min-height: 44px; }
.work-list { list-style: none; }
.work-item { border-top: 1px solid #454545; padding-block: 56px; }
.work-item article { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; gap: 48px; }
.work-item h2 { font-size: clamp(30px, 4vw, 48px); margin-bottom: 20px; }
.work-item .work-status { color: #c7c7c7; font-size: 13px; margin-bottom: 20px; }
.work-item .work-text { max-width: 54ch; }
.work-item .work-image { display: block; border: 1px solid #454545; }
.work-item img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.work-item .work-without-image { grid-template-columns: minmax(160px, .7fr) minmax(0, 2fr); }
.case-image { margin: 0 0 64px; }
.case-image img { width: 100%; height: auto; border: 1px solid #454545; }
.case-image figcaption { color: #c7c7c7; font-size: 13px; margin-top: 12px; max-width: 72ch; }
.detail-service-nav { margin-block: 24px 0; padding-left: 1.1em; columns: 2; column-gap: 32px; }
.detail-service-nav li { break-inside: avoid; margin: 0 0 14px; }
@media (max-width: 760px) {
  .detail-shell { width: calc(100% - 40px); }
  .detail-section { grid-template-columns: 1fr; gap: 24px; padding-block: 38px; }
  .detail-section > h2 { max-width: none; }
  .work-item article, .work-item .work-without-image { grid-template-columns: 1fr; gap: 24px; }
  .work-item { padding-block: 38px; }
  .detail-service-nav { columns: 1; }
}
@media (max-width: 420px) {
  body.detail-page { font-size: 17px; }
  .breadcrumbs { font-size: 12px; }
  .detail-actions { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { .detail-page *, .detail-page *::before, .detail-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Selected A buttons share surface/contour/motion with base.css. */
:is(.detail-page, .detail-panel) .aktion {
  min-height: 52px; font-family: inherit; font-size: 15px;
}
:is(.detail-page, .detail-panel) .aktion .pfeil { display: none; }
.detail-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; align-items: stretch; gap: 16px 24px; }
.detail-actions > .aktion { min-width: 0; width: 100%; height: 100%; overflow-wrap: anywhere; }
.detail-actions > .aktion:only-child { grid-column: 1 / -1; }
.detail-page :focus-visible { outline: 2px solid var(--ci-white); outline-offset: 4px; box-shadow: none; }
.detail-page :is(a, summary, section, main)[id], .detail-page a, .detail-page summary { scroll-margin-top: 28px; }
.service-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: center; max-width: none; padding-bottom: 64px; }
.service-hero-copy { min-width: 0; }
.service-hero h1 { font-size: clamp(35px, 4.2vw, 56px); line-height: 1.12; max-width: 20ch; overflow-wrap: normal; hyphens: none; }
.service-hero .detail-lead { font-size: clamp(18px, 1.7vw, 21px); margin-top: 24px; }
.service-hero .detail-actions { margin-top: 30px; align-items: stretch; }
.service-visual { margin: 0; min-width: 0; }
.service-visual img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; background: var(--ci-black); }
.detail-toc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding-bottom: 26px; font-size: 14px; }
.detail-toc > span { color: #c7c7c7; margin-right: 8px; }
.detail-toc a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 5px; }
.detail-toc a:hover { text-decoration-color: var(--ci-interaction-red); }
.detail-example { border-left: 2px solid var(--ci-interaction-red); padding-left: clamp(20px, 3vw, 32px); }
.detail-example .detail-kicker { font-size: 11px; letter-spacing: .08em; margin-bottom: 16px; }
.detail-example h3 { max-width: 27ch; font-size: clamp(25px, 3vw, 34px); font-weight: 350; line-height: 1.25; margin-bottom: 28px; }
.example-flow { margin: 0; }
.example-flow > div + div { margin-top: 24px; }
.example-flow dt { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.example-flow dd { margin: 0; color: #d9dadd; }
.section-body > .detail-list + h3 { margin-top: 32px; }
.related-projects { display: grid; gap: 32px; }
.related-projects article + article { border-top: 1px solid #454545; padding-top: 32px; }
.related-projects .detail-note { margin-bottom: 8px; font-size: 12px; }
.related-projects h3 { margin-bottom: 12px; }
.related-projects h3 a { text-decoration: underline; }
.detail-service-nav { list-style: none; padding-left: 0; }
.detail-service-nav a { display: inline-flex; align-items: center; min-height: 36px; }
.work-item h2 a { text-decoration-thickness: 1px; text-underline-offset: 7px; }
.work-item .aktion { margin-top: 8px; }
.case-image { max-width: 1160px; }
@media (max-width: 1000px) {
  .detail-shell { width: calc(100% - 56px); }
  .service-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; }
  .service-hero h1 { font-size: clamp(33px, 4.7vw, 47px); }
  .service-hero .detail-lead { font-size: 18px; }
}
@media (max-width: 760px) {
  .detail-shell { width: calc(100% - 40px); }
  .service-hero { grid-template-columns: 1fr; padding-block: 48px 36px; gap: 36px; }
  .service-hero h1 { font-size: clamp(35px, 7.5vw, 56px); max-width: 20ch; }
  .service-hero .detail-lead { max-width: 56ch; }
  .service-visual { width: min(100%, 540px); margin-inline: auto; }
  .detail-toc { column-gap: 20px; font-size: 13px; }
  .detail-toc > span { width: 100%; }
}
@media (max-width: 420px) {
  .service-hero h1 { font-size: 35px; }
  .service-hero .detail-actions > a { width: 100%; }
  .detail-toc { gap: 2px 18px; }
  .detail-example { padding-left: 18px; }
}
@media (forced-colors: active) {
  .detail-page .aktion, .detail-page .aktion.detail-primary { border: 1px solid ButtonText; background: ButtonFace; color: ButtonText; }
  .detail-example { border-color: CanvasText; }
}

.detail-motion { margin: 0; }
.detail-motion + .detail-motion { margin-top: clamp(48px, 7vw, 80px); }
.detail-motion > p { margin-bottom: 24px; }
.detail-motion video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--ci-black); border: 1px solid #454545; }
.detail-motion figcaption { color: #c7c7c7; font-size: 13px; line-height: 1.6; margin-top: 14px; }

@media (max-width: 600px) { .detail-actions { gap: 10px; } }
:is(.detail-page, .detail-panel) [tabindex="-1"]:not(a, button, summary, input, select, textarea, [role="button"], [role="link"]):focus { outline: none; box-shadow: none; }


/* V19: the static pages keep the app's atmosphere: a dark still of the city behind one glass surface.
   The layer is fixed and only dims the picture; every text colour stays at or above 4.5:1 against its darkest-to-brightest
   possible background (measured in tools/structure-browser-test.mjs). */
body.detail-page { background: var(--ci-black); }
body.detail-page::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(rgb(5 7 10 / 58%), rgb(5 7 10 / 82%)), url('../shared/media/intro-aerial.webp') center / cover no-repeat;
}
@media (max-width: 760px) {
  body.detail-page::before { background-image: linear-gradient(rgb(5 7 10 / 58%), rgb(5 7 10 / 82%)), url('../shared/media/intro-aerial-phone.webp'); }
}
html[data-theme="light"] body.detail-page::before { display: none; }
.detail-page .detail-surface {
  width: min(1240px, calc(100% - 2 * var(--layout-inset) - 12px)); margin: calc(var(--layout-inset) + 8px) auto;
  padding-inline: clamp(18px, 4.5vw, 64px); border-radius: var(--glass-radius);
  --t-dim: .9; --t-blur: 3px; /* let the city shine through a little more than on the stage cards */
}
@media (max-width: 760px) { .detail-page .detail-surface { margin-block: var(--layout-inset); } }
:is(.detail-page, .detail-panel) address { font-style: normal; }

/* V19.14 (Owner 24.10.: „Leistungsseiten wie Lesemodus“, P23): die eigenständigen Seiten (Leistungen, Arbeiten, Rechtstexte, 404)
   lesen sich wie das Detailblatt im Lesemodus der 3D-Seite (css/detail-panel.css): ein ruhiges dunkles Blatt über der Stadt, eine
   Lesespalte (~720 px), drei Schriftgrößen (46 Überschriften Light, 17 Text, 13 Kleines), keine Linien zwischen den Abschnitten.
   EIN roter Hauptknopf, alles andere Textlinks; der Kopf ist eine Zeile ruhiger Textlinks, die Sprache ein kleiner Link daneben.
   Alles hier hängt an body.detail-page, das Detailblatt der 3D-Seite bleibt unberührt. Die Farben sind deckend gerechnet (Weiß-Anteile
   des Lesemodus über dem Blattgrund), damit der Kontrast gegen die Stadt messbar bleibt (tools/structure-browser-test.mjs). */
body.detail-page {
  --leser-grund: 10 11 13; --leser-text: #fff; --leser-text-2: #dddddf; --leser-text-3: #c9c9cb;
  --leser-grau: #a2a2a4; --leser-leise: rgb(255 255 255 / 38%); --leser-linie: rgb(255 255 255 / 10%);
}
html[data-theme="light"] body.detail-page {
  --leser-grund: 243 244 246; --leser-text: #17191d; --leser-text-2: #2b2f35; --leser-text-3: #3b4048;
  --leser-grau: #5c626a; --leser-leise: rgb(24 29 36 / 46%); --leser-linie: rgb(24 29 36 / 14%);
}
/* Das Blatt: wie der Lesemodus beruhigt, die Stadt bleibt nur am Rand spürbar */
.detail-page .detail-surface.glas {
  border: 0; border-radius: 22px; color: var(--leser-text-2); text-shadow: none;
  background: rgb(var(--leser-grund) / 82%); box-shadow: 0 40px 90px rgb(0 0 0 / 55%);
  -webkit-backdrop-filter: blur(20px) saturate(.6); backdrop-filter: blur(20px) saturate(.6);
}
.detail-page .detail-surface.glas::before { display: none; }
body.detail-page { font-size: 17px; line-height: 1.65; }

/* Kopf: Logo, Textlinks, Sprache. Die rote Linie zeichnet sich bei Hover/Fokus und unter der aktuellen Seite ein (CI-Textaktion). */
.detail-page .detail-header {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: clamp(24px, 3vw, 44px);
  padding-block: 22px; border-bottom: 1px solid var(--leser-linie);
}
.detail-page .detail-header nav { display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap; gap: 0 clamp(20px, 2.4vw, 32px); min-width: 0; }
.detail-page .detail-utility { display: flex; align-items: center; gap: 12px; }
.detail-page .detail-header .aktion {
  min-height: 44px; min-width: 0; padding: 0; border: 0; border-radius: 0; color: var(--leser-text-3); font-size: 14px; font-weight: 500;
  line-height: 1.3; letter-spacing: .01em; white-space: nowrap; text-decoration: none;
  background: linear-gradient(var(--ci-interaction-red), var(--ci-interaction-red)) no-repeat 0 calc(100% - 8px) / 0% 1px transparent;
  transition: background-size var(--ci-hover-duration) var(--ease), color var(--ci-hover-duration) var(--ease);
}
.detail-page .detail-header .aktion::before, .detail-page .detail-header .aktion::after { display: none; }
.detail-page .detail-header .aktion:is(:hover, :focus-visible, :active, [aria-current="page"]) { color: var(--leser-text); background-color: transparent; background-size: 100% 1px; transform: none; }
.detail-page .detail-header .detail-3d { color: var(--leser-text); font-weight: 600; }
.detail-page .detail-header .detail-lang { justify-content: center; min-width: 44px; color: var(--leser-grau); font-size: 12px; font-weight: 600; letter-spacing: .08em; background-position: 50% calc(100% - 8px); }
html:not([data-theme-mode="switchable"]) .detail-page .detail-utility .theme-toggle { display: none; }

/* Lesespalte */
.detail-page :is(main, .breadcrumbs) { width: min(720px, 100%); margin-inline: auto; }
.detail-page .breadcrumbs { margin-top: 28px; color: var(--leser-grau); font-size: 13px; }
.detail-page .breadcrumbs li + li::before { color: var(--leser-leise); }
.detail-page .breadcrumbs a { color: var(--leser-grau); text-decoration-color: var(--leser-leise); }
.detail-page .breadcrumbs a:hover { color: var(--leser-text); text-decoration-color: var(--ci-interaction-red); }

/* Einstieg: Kicker, Überschrift, Text, Knöpfe; das Bild darunter in voller Spaltenbreite */
.detail-page .detail-hero, .detail-page .detail-hero.service-hero { display: block; max-width: none; padding: 64px 0 0; }
.detail-page :is(.detail-kicker, .detail-example .detail-kicker) { margin-bottom: 18px; color: var(--leser-grau); font-size: 13px; font-weight: 500; letter-spacing: .01em; text-transform: none; }
.detail-page :is(.detail-hero, .service-hero) h1, .detail-page .detail-contact h2 {
  max-width: 17ch; color: var(--leser-text); font-size: clamp(34px, 3.4vw, 46px); font-weight: 300; line-height: 1.12; letter-spacing: -.025em;
  overflow-wrap: break-word; hyphens: manual; text-wrap: balance;   /* V19.14 (Abnahme 24.10.): break-word als Notbremse statt normal – ein Einzelwort mit 34 px (Datenschutzhinweise) sprengte bei 320/360 px die Spalte; getrennt wird weiter nur an ­ (de/datenschutz, tools/content-pages.mjs) */
}
.detail-page :is(.detail-hero, .service-hero) .detail-lead { max-width: none; margin-top: 28px; color: var(--leser-text-3); font-size: 17px; line-height: 1.65; }
.detail-page .detail-hero .detail-context { max-width: none; margin-top: 20px; color: var(--leser-grau); font-size: 15px; }
.detail-page .service-visual { width: auto; margin: 56px 0 0; }
.detail-page .service-visual img { border: 0; border-radius: 14px; }

/* Knöpfe: ein gefüllter roter Hauptknopf, der Rest als Textlink; kein Glühen, keine Kontur */
.detail-page .detail-actions, .detail-page .service-hero .detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; margin-top: 36px; }
.detail-page main .aktion::before, .detail-page main .aktion::after { display: none; }
.detail-page main .aktion:not(.detail-primary), .detail-page .detail-actions > .aktion:not(.detail-primary) {
  width: auto; height: auto; min-height: 44px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--leser-text);
  font-size: 17px; font-weight: 500; line-height: 1.4; text-align: left; justify-content: flex-start; transform: none;
  text-decoration: underline; text-decoration-color: var(--leser-leise); text-decoration-thickness: 1px; text-underline-offset: 6px;
}
.detail-page main .aktion:not(.detail-primary):hover { background: none; text-decoration-color: currentColor; }
.detail-page main .aktion.detail-primary {
  width: auto; height: auto; min-height: 50px; padding: 0 30px; border: 0; border-radius: var(--button-radius, 7px);
  background: var(--ci-interaction-red); color: #fff; font-size: 17px; font-weight: 600; transition: background-color 200ms ease;
}
.detail-page main .aktion.detail-primary:hover { background: #c80210; }

/* Inhaltsverzeichnis: eine leise Zeile */
.detail-page .detail-toc { margin-top: 64px; padding: 0; gap: 4px 22px; color: var(--leser-grau); font-size: 13px; }
.detail-page .detail-toc > span { color: var(--leser-grau); margin-right: 0; }
.detail-page .detail-toc a { color: var(--leser-grau); text-decoration: none; }
.detail-page .detail-toc a:hover { color: var(--leser-text); }

/* Abschnitte: eine Spalte, keine Linien, viel Luft */
.detail-page .detail-section { display: block; padding: 96px 0 0; border: 0; }
.detail-page .detail-section > h2 { max-width: none; margin: 0 0 20px; color: var(--leser-grau); font-size: 13px; font-weight: 600; line-height: 1.5; letter-spacing: .02em; }
.detail-page .detail-section .section-body { max-width: none; }
.detail-page :is(.section-body, .detail-example) h3 { max-width: none; margin: 0 0 22px; color: var(--leser-text); font-size: 17px; font-weight: 600; line-height: 1.5; letter-spacing: 0; }
.detail-page .section-body > .detail-list + h3 { margin-top: 32px; }
.detail-page .detail-section a:not(.aktion) { color: var(--leser-text); text-decoration-color: var(--leser-leise); }
.detail-page .detail-section a:not(.aktion):hover { text-decoration-color: currentColor; }
.detail-page .detail-example { padding: 0; border: 0; }
.detail-page .example-flow > div { margin-bottom: 26px; }
.detail-page .example-flow > div + div { margin-top: 0; }
.detail-page .example-flow dt { margin-bottom: 0; color: var(--leser-grau); font-size: 13px; font-weight: 500; }
.detail-page .example-flow dd { margin: 4px 0 0; color: var(--leser-text-2); }
.detail-page :is(.detail-list li::marker, .detail-steps li::before) { color: var(--leser-leise); }
.detail-page .detail-steps strong { color: var(--leser-text); }
.detail-page .detail-note { color: var(--leser-grau); font-size: 13px; }
.detail-page .detail-faq details { border-color: var(--leser-linie); }
.detail-page .detail-faq summary { color: var(--leser-text); }
.detail-page .detail-faq details p { color: var(--leser-grau); font-size: 17px; }
.detail-page .related-projects { gap: 56px; }
.detail-page .related-projects article, .detail-page .related-projects article + article { padding: 0; border: 0; }
.detail-page .related-projects .detail-note { font-size: 13px; }
.detail-page .related-projects h3 a { text-decoration-thickness: 1px; }
.detail-page .related-projects .work-image { display: block; margin-bottom: 20px; border: 0; }
.detail-page :is(.related-projects, .work-item) img { border: 0; border-radius: 14px; }
.detail-page .detail-service-nav { margin-top: 0; columns: 1; }
.detail-page .detail-service-nav li { margin-bottom: 6px; }
.detail-page .detail-service-nav a { min-height: 44px; }
.detail-page .detail-motion video { border: 0; border-radius: 14px; }
.detail-page :is(figcaption, .detail-motion figcaption) { color: var(--leser-grau); }

/* Arbeiten: Bild über dem Text, viel Luft statt Linien */
.detail-page .work-list { margin-top: 32px; }
.detail-page .work-item { padding: 64px 0 0; border: 0; }
.detail-page .work-item article, .detail-page .work-item .work-without-image { display: block; }
.detail-page .work-item .work-image { margin-bottom: 28px; border: 0; }
.detail-page .work-item .work-text { max-width: none; }
.detail-page .work-item .work-status { margin-bottom: 12px; color: var(--leser-grau); font-size: 13px; }
.detail-page .work-item h2 { margin-bottom: 16px; color: var(--leser-text); font-size: clamp(28px, 2.6vw, 34px); font-weight: 300; line-height: 1.2; letter-spacing: -.015em; }
.detail-page .work-item .aktion { margin-top: 4px; }
.detail-page .case-image { margin: 64px 0 0; max-width: none; }
.detail-page .case-image img { border: 0; border-radius: 14px; }
.detail-page .case-image + .detail-section { padding-top: 80px; }

/* Ende: Kontakt und Fußzeile */
.detail-page .detail-contact { margin-top: 112px; padding: 0 0 96px; border: 0; }
.detail-page .detail-contact h2 { margin-bottom: 22px; }
.detail-page .detail-contact p { max-width: none; }
.detail-page .detail-contact .contact-address { display: inline; color: var(--leser-text); font-size: 17px; text-decoration-color: var(--leser-leise); text-underline-offset: 6px; }
.detail-page .detail-footer { margin-top: 0; border-top: 1px solid var(--leser-linie); color: var(--leser-grau); }
.detail-page .detail-footer nav { gap: 0 24px; }
.detail-page .detail-footer a { color: var(--leser-grau); text-decoration-color: var(--leser-leise); text-underline-offset: 5px; }
.detail-page .detail-footer a:hover { color: var(--leser-text); text-decoration-color: var(--ci-interaction-red); }
.detail-page main:not(:has(.detail-contact)) { padding-bottom: 96px; }

/* 820 px (Tablet hochkant): Logo etwas kleiner, damit Kopf und „EN“ in einer Zeile bleiben */
@media (max-width: 1000px) {
  .detail-page .detail-logo { width: 136px; }
  .detail-page .detail-header nav { gap: 0 22px; }
}
/* Telefon: Logo und Sprache oben, die Textlinks darunter in EINER Zeile („In der 3D-Welt ansehen“ → „3D-Welt“) */
@media (max-width: 760px) {
  .detail-page .detail-header { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "logo util" "nav nav"; row-gap: 6px; padding-block: 18px 4px; }
  .detail-page .detail-logo { grid-area: logo; width: 118px; }
  .detail-page .detail-utility { grid-area: util; margin-right: -12px; }
  .detail-page .detail-header nav { grid-area: nav; justify-content: space-between; gap: 0 12px; }
  .detail-page .detail-3d-zusatz { display: none; }
  .detail-page .detail-hero, .detail-page .detail-hero.service-hero { padding-top: 40px; }
  .detail-page .detail-section { padding-top: 72px; }
  .detail-page .detail-actions, .detail-page .service-hero .detail-actions { gap: 8px 24px; }
  .detail-page main .aktion.detail-primary { width: 100%; }
  .detail-page .detail-contact { margin-top: 88px; padding-bottom: 72px; }
  .detail-page .service-visual { margin-top: 44px; }
}
@media (max-width: 420px) { .detail-page .detail-footer nav { gap: 0 16px; } }
@media (max-width: 360px) {
  .detail-page .detail-header nav { gap: 0 8px; }
  .detail-page .detail-header nav .aktion { font-size: 13px; }
}
@media (forced-colors: active) {
  .detail-page .detail-surface.glas { background: Canvas; border: 1px solid CanvasText; }
  .detail-page main .aktion.detail-primary { background: ButtonFace; border: 1px solid ButtonText; color: ButtonText; }
  .detail-page .detail-header .aktion:is(:hover, :focus-visible, [aria-current="page"]) { text-decoration: underline; }
}