/* InnSAN — bespoke site stylesheet. No Tailwind, no shared theme. */

:root {
  --c-orange: #DB7303;
  --c-orange-dark: #B85F02;
  --c-orange-soft: #FCF0E2;
  --c-orange-ink: #8A4901;
  --c-orange-hover: #C46603;
  --c-petrol: #111B33;
  --c-petrol-hover: #1E2D4D;
  --c-ink: #16232B;
  --c-ink-soft: #3C525C;
  --c-ink-softer: #2B4149;
  --c-gray: #90979B;
  --c-gray-light: #6B747A;
  --c-paper: #FFFFFF;
  --c-page: #FFFFFF;
  --c-alt: #FFFFFF;
  --c-border: #E3E7E5;
  --c-border-soft: #DCDFDC;
  --c-input-border: #C5CCCE;
  --font-head: 'Inter', Helvetica, Arial, sans-serif;
  --font-display: 'Cabin', Helvetica, Arial, sans-serif;
  --radius: 12px;
  --radius-lg: 20px;
  --shadow-btn: 0 2px 0 #A85601;
}

.innsan-page {
  background: var(--c-page);
  color: var(--c-ink);
  display: flex;
  flex-direction: column;
  font-family: var(--font-head);
  min-height: 100vh;
  min-height: 100svh;
  -webkit-font-smoothing: antialiased;
}

.innsan-page * { box-sizing: border-box; }

.innsan-page a { color: var(--c-orange-dark); text-decoration: underline; text-underline-offset: 3px; }
.innsan-page a:hover { color: var(--c-orange); }
.innsan-page a.plain, .innsan-page .topbar a, .innsan-page .site-header a, .innsan-page .site-footer a, .innsan-page .service-card a,
.innsan-page .leistung-card a, .innsan-page .location-card a, .innsan-page .related-article-card,
.innsan-page .blog-index-card, .innsan-page .blog-feature-card, .innsan-page .blog-back-link,
.innsan-page .btn, .innsan-page .logo-link { text-decoration: none; }

.innsan-page h1, .innsan-page h2, .innsan-page h3, .innsan-page h4 {
  margin: 0;
  text-wrap: pretty;
}

.innsan-page h1, .innsan-page h2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.01em;
}

.innsan-page h3, .innsan-page h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.02em;
}

.container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 900px; margin: 0 auto; padding: 0 24px; }

.section-title { font-size: 38px; line-height: 1.15; margin-bottom: 14px; }
.section-lead { font-size: 19px; line-height: 1.6; color: var(--c-ink-soft); max-width: 60ch; margin: 0 0 38px; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 18px;
  height: 60px;
  padding: 0 30px;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.innsan-page .btn-primary { background: var(--c-orange); color: #fff; box-shadow: var(--shadow-btn); }
.innsan-page .btn-primary:hover { background: var(--c-orange-hover); color: #fff; transform: translateY(-1px); }
.innsan-page .btn-secondary { background: var(--c-petrol); color: #fff; box-shadow: 0 2px 0 #10232d; }
.innsan-page .btn-secondary:hover { background: var(--c-petrol-hover); color: #fff; transform: translateY(-1px); }
/* 1,5px statt 2px und ein zurückgenommener Rahmen: Als voll deckendes Petrol war
   die Zweitaktion kontraststärker als der orange Primary neben ihr. */
.innsan-page .btn-ghost { background: #fff; color: var(--c-petrol); border: 1.5px solid rgba(17,27,51,.3); height: 60px; }
.innsan-page .btn-ghost:hover { background: var(--c-petrol); border-color: var(--c-petrol); color: #fff; transform: translateY(-1px); }
.innsan-page .btn:focus-visible { outline: 3px solid rgba(219,115,3,.35); outline-offset: 3px; }
.btn-block { width: 100%; }
.innsan-page .btn-sm { height: 52px; font-size: 16px; padding: 0 22px; }
.hero-actions .btn { flex: 0 0 auto; width: auto; padding: 0 24px; }
.hero-whatsapp {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 60px; height: 60px; border-radius: 50%; background: #25D366; color: #fff !important;
  box-shadow: 0 8px 18px rgba(37,211,102,.4); transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.hero-whatsapp:hover { background: #1EBE5A; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(37,211,102,.48); }
.hero-whatsapp svg { width: 26px; height: 26px; display: block; }
.process-intro .btn, .blog-mid-cta .btn { width: 270px; }
.link-arrow { font-weight: 700; color: var(--c-orange-dark); }

/* Header */
.site-header {
  background: var(--c-paper); border-bottom: 1px solid #E2E0DA; position: sticky; top: 0; z-index: 40;
  transition: box-shadow .25s ease, background-color .25s ease;
}
/* Sobald Inhalt darunter durchläuft, hebt sich die Leiste vom Text ab. */
.site-header.is-scrolled { box-shadow: 0 10px 30px -22px rgba(22,35,43,.55); }
@supports (backdrop-filter: blur(12px)) {
  .site-header.is-scrolled { background: rgba(255,255,255,.86); backdrop-filter: blur(12px) saturate(1.4); }
}
.topbar { background: var(--c-petrol); color: #B4BCC0; font-size: 14px; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 9px 24px; max-width: 1240px; margin: 0 auto; flex-wrap: wrap; }
.innsan-page .topbar .topbar-email { color: #fff !important; font-weight: 600; }
.innsan-page .topbar .topbar-email:hover, .innsan-page .topbar .topbar-email:focus-visible { color: #fff !important; text-decoration: underline; }
/* position:relative als Anker für das Übersichtsmenü, das sich über die ganze
   Kopfzeilenbreite legt statt nur unter seinen Menüpunkt. */
.header-inner { position: relative; display: flex; align-items: center; gap: 30px; padding: 12px 24px; max-width: 1240px; margin: 0 auto; }
.logo-img { height: 48px; width: auto; display: block; }
.main-nav { align-self: stretch; display: flex; gap: 22px; align-items: center; }
.nav-link { font-size: 16px; font-weight: 600; color: var(--c-ink-softer); display: inline-flex; align-items: center; gap: 4px; }
.nav-link:hover, .nav-link.is-active { color: var(--c-orange-dark); }
.nav-link.is-active { border-bottom: 2px solid var(--c-orange); padding-bottom: 2px; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 16px; }
/* Der Header-CTA steht neben einem 56px-Logo und einer einzeiligen Navigation —
   auf der Höhe von .btn-sm war er das höchste Element der Zeile. */
.header-actions .btn { height: 46px; font-size: 15.5px; padding: 0 20px; }
.header-call { font-weight: 700; color: var(--c-petrol); white-space: nowrap; }
.nav-toggle { display: none; }
.mobile-bar { display: none; }

/* Nav dropdown (Produkte & Leistungen) */
.nav-item { position: relative; }
.nav-item--dropdown {
  /* Das Dropdown ist an der Unterkante des Headers ausgerichtet. Der
     Menüpunkt muss deshalb die volle Höhe der Navigationszeile einnehmen;
     sonst liegt zwischen Link und Panel ein schmaler Bereich, in dem :hover
     verloren geht und das Menü beim Hinunterfahren wieder schließt. */
  align-self: stretch; display: flex; align-items: center;
  padding-bottom: 14px; margin-bottom: -14px;
}
.nav-caret { font-size: 11px; transition: transform .15s ease; }
.nav-dropdown {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(-6px);
  min-width: 280px; background: #fff; border: 1px solid var(--c-border); border-radius: 14px;
  box-shadow: 0 18px 40px -20px rgba(17,27,51,.35); padding: 10px; display: grid; gap: 2px;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s ease, transform .15s ease, visibility .15s;
  z-index: 45;
}
.nav-item--dropdown:hover .nav-dropdown,
.nav-item--dropdown:focus-within .nav-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.nav-item--dropdown:hover .nav-caret { transform: rotate(180deg); }
.nav-dropdown-link {
  display: block; padding: 10px 14px; border-radius: 9px; font-size: 15px; font-weight: 600;
  color: var(--c-ink-softer); white-space: nowrap;
}
.nav-dropdown-link:hover { background: var(--c-orange-soft); color: var(--c-orange-ink); }
.nav-dropdown-link--all { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--c-border); color: var(--c-orange-dark); }

/* Übersichtsmenü über die volle Breite der Kopfzeile: Nur so ist Platz für
   Vorschaubilder, auf denen man etwas erkennt. Der Menüpunkt gibt dafür seinen
   Positionsanker ab (position: static), damit sich das Panel an .header-inner
   ausrichtet statt an seiner eigenen schmalen Spalte. */
.nav-item--mega { position: static; }
.nav-mega {
  left: 24px; right: 24px; transform: translateY(-6px);
  width: auto; min-width: 0; padding: 22px;
  border-radius: 20px;
}
.nav-item--dropdown:hover .nav-mega,
.nav-item--dropdown:focus-within .nav-mega { transform: translateY(0); }
.nav-mega-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.innsan-page .nav-mega-card {
  display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 16px; align-items: center;
  padding: 12px 14px; border-radius: 16px; color: var(--c-ink); text-decoration: none;
  transition: background-color .15s ease;
}
.innsan-page .nav-mega-card:hover { background: var(--c-orange-soft); color: var(--c-ink); }
.nav-mega-thumb {
  width: 116px; height: 86px; border-radius: 12px; background-color: #E8EAEA;
  background-size: cover; background-position: center; flex: none;
}
.nav-mega-body { min-width: 0; display: grid; gap: 2px; }
.nav-mega-title { font-size: 17px; font-weight: 700; line-height: 1.25; color: var(--c-ink); }
.nav-mega-card:hover .nav-mega-title { color: var(--c-orange-ink); }
/* Eine Zeile Vorschau je Eintrag — mehr würde das Menü zu einer Seite machen. */
.nav-mega-text {
  font-size: 14px; line-height: 1.5; color: var(--c-gray-light);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nav-mega-foot {
  display: flex; gap: 24px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--c-border);
}
.innsan-page .nav-mega-foot a { font-size: 14px; font-weight: 700; color: var(--c-orange-dark); text-decoration: none; padding: 0 10px; }
.innsan-page .nav-mega-foot a:hover { color: var(--c-orange); }

@media (max-width: 1180px) {
  .nav-mega-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mobile-submenu { display: grid; gap: 2px; margin: -6px 0 4px 14px; padding-left: 14px; border-left: 2px solid var(--c-border); }
.mobile-submenu-link { font-size: 16px; font-weight: 500; color: var(--c-ink-soft); padding: 4px 0; }
/* Mobile Vorschau: dieselbe Idee wie am Desktop, nur eine Spalte. Die Bilder
   bleiben klein genug, dass die Liste scrollbar bleibt. */
.mobile-submenu--preview { gap: 6px; }
.innsan-page .mobile-preview-link {
  display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: center;
  padding: 6px 8px 6px 0; border-radius: 12px; font-size: 16px; font-weight: 600; color: var(--c-ink);
}
.innsan-page .mobile-preview-link:active { background: var(--c-orange-soft); }
.mobile-preview-thumb {
  width: 76px; height: 56px; border-radius: 10px; background-color: #E8EAEA;
  background-size: cover; background-position: center;
}

/* Footer */
.site-footer {
  position: relative; overflow: hidden; margin-top: auto;
  background: var(--c-petrol); color: #B4BCC0; padding: 60px 0 26px;
}
/* Eine warme Aufhellung in der oberen linken Ecke — der Footer ist sonst eine
   durchgehend gleich dunkle Fläche über die volle Breite. */
.site-footer::before {
  content: ''; position: absolute; inset: -40% 55% 40% -10%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(219,115,3,.22), transparent 70%);
}
/* Feine Kante oben, die den Markenton aufnimmt. */
.site-footer::after {
  content: ''; position: absolute; inset: 0 0 auto; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, var(--c-orange), rgba(219,115,3,.35) 38%, transparent 72%);
}
.site-footer > .container { position: relative; }
.footer-top { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 34px; padding-bottom: 34px; border-bottom: 1px solid rgba(255,255,255,.14); }
.footer-logo { height: 38px; margin-bottom: 16px; }
.footer-intro { font-size: 16px; line-height: 1.6; margin: 0 0 18px; color: #B4BCC0; max-width: 34ch; }
.footer-phone { display: inline-flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 700; color: #fff; }
.innsan-page .site-footer .footer-phone { color: #fff; }
.footer-phone span { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(219,115,3,.9); font-size: 15px; }
.footer-social { display: flex; gap: 10px; margin-top: 20px; }
.footer-social a {
  display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.18); color: #B4BCC0;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.footer-social a:hover { background: var(--c-orange); border-color: var(--c-orange); color: #fff; transform: translateY(-2px); }
.footer-social svg { width: 18px; height: 18px; display: block; }
.footer-col-title {
  font: 700 11px/1.3 var(--font-head); letter-spacing: .14em; text-transform: uppercase;
  color: #fff; margin: 0 0 18px;
}
.footer-links { display: grid; gap: 11px; }
/* Der Strich wächst aus dem Wort heraus, statt hart an-/auszugehen. */
.footer-links a {
  position: relative; width: fit-content; color: #B4BCC0;
  transition: color .18s ease, transform .18s ease;
}
.footer-links a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -3px; height: 1.5px;
  background: var(--c-orange); transition: right .24s cubic-bezier(.22,.61,.36,1);
}
.footer-links a:hover { color: #fff; }
.footer-links a:hover::after { right: 0; }

/* Newsletter sitzt zwischen den Spalten und der Schlusszeile — abgesetzt, aber
   noch im dunklen Block, damit er nicht als eigener Abschnitt wirkt. */
.footer-newsletter {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 34px;
  align-items: center; padding: 30px 0; border-bottom: 1px solid rgba(255,255,255,.14);
}
.footer-newsletter h3 { margin: 0 0 8px; color: #fff; font-size: 22px; line-height: 1.2; }
.footer-newsletter > div > p:last-child { margin: 0; font-size: 15.5px; line-height: 1.6; color: #B4BCC0; max-width: 46ch; }
.newsletter-row { display: flex; gap: 10px; flex-wrap: wrap; }
.newsletter-row > label { flex: 0 0 auto; }
.innsan-page .newsletter-row input[type=email] {
  flex: 1 1 240px; min-width: 0; height: 52px; border-radius: var(--radius);
  border: 1.5px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06);
  color: #fff; padding: 0 16px; font-size: 16.5px; font-family: inherit;
}
.innsan-page .newsletter-row input[type=email]::placeholder { color: #8B949B; }
.innsan-page .newsletter-row input[type=email]:focus {
  outline: 3px solid rgba(219,115,3,.3); border-color: var(--c-orange); background: rgba(255,255,255,.1);
}
.newsletter-row .btn { flex: 0 0 auto; height: 52px; font-size: 16px; padding: 0 26px; }
.newsletter-privacy {
  display: flex; gap: 9px; align-items: flex-start; margin: 12px 0 0;
  font-size: 13.5px; line-height: 1.5; color: #9AA3A9;
}
.innsan-page .newsletter-privacy input { margin-top: 2px; }
.innsan-page .footer-newsletter .newsletter-privacy a { color: #C9D0D5; text-decoration: underline; }
.innsan-page .footer-newsletter .newsletter-privacy a:hover { color: #fff; }
.newsletter-feedback { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: #fff; }
.newsletter-feedback.is-error { color: #FFB4A9; }
/* Honigtopf: Für Menschen unerreichbar, für Skripte ein ausfüllbares Feld.
   display:none würde von manchen Ausfüllhilfen übersprungen. */
.newsletter-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 900px) {
  .footer-newsletter { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

.footer-bottom { padding-top: 22px; display: flex; gap: 20px 24px; flex-wrap: wrap; font-size: 14px; align-items: center; }
.footer-bottom a { color: var(--c-gray); }
.innsan-page .site-footer .footer-bottom a:hover { color: #fff; }
/* Der Bau-Credit steht am Ende der Zeile und darf leiser sein als die Pflichtlinks. */
.footer-credit {
  display: inline-flex; align-items: center; gap: 10px; margin-left: auto;
  font-family: var(--font-head); font-size: 12.5px; letter-spacing: .01em; color: var(--c-gray);
}
.innsan-page .site-footer .footer-credit a { display: inline-flex; align-items: center; gap: 8px; color: var(--c-gray); }
.innsan-page .site-footer .footer-credit a:hover { color: #fff; }
/* Das Logo liegt als dunkle Marke auf Weiß vor — auf dem Petrol wird es zu Weiß
   invertiert und nimmt beim Darüberfahren die volle Deckkraft an. */
.footer-credit-logo {
  height: 20px; width: auto; display: block; filter: brightness(0) invert(1);
  opacity: .62; transition: opacity .2s ease;
}
.footer-credit a:hover .footer-credit-logo { opacity: 1; }

/* Hero */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--c-petrol); }
.hero-background {
  position: absolute; inset: 0; z-index: -2;
  background-position: center; background-repeat: no-repeat; background-size: cover;
  opacity: 0; animation: hero-slideshow 12s ease-in-out infinite;
  /* Eigene Ebene für die Überblendung — sonst zeichnet der Browser bei jedem
     Bild die formatfüllende Grafik neu. */
  will-change: opacity; backface-visibility: hidden;
}
.hero-background--one { background-image: url('/innsan/images/homepage-hero-1.jpg'); animation-delay: 0s; }
.hero-background--two { background-image: url('/innsan/images/homepage-hero-2.jpg'); animation-delay: 4s; }
.hero-background--three { background-image: url('/innsan/images/homepage-hero-3.jpg'); animation-delay: 8s; }
.hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.92) 37%, rgba(255,255,255,.3) 63%, rgba(255,255,255,.04) 100%); }
.hero-grid { display: flex; align-items: stretch; min-height: 560px; max-width: 1240px; margin: 0 auto; }
.hero-content { padding: 92px 44px 84px 24px; max-width: 620px; }

.hero-content h1 { font-size: 52px; line-height: 1.08; margin-bottom: 20px; }
.innsan-page h1 sup, .innsan-page h2 sup, .innsan-page h3 sup { font-size: .45em; line-height: 0; vertical-align: super; }
.hero-sub { font-size: 21px; line-height: 1.6; color: var(--c-ink-soft); max-width: 44ch; margin: 22px 0 28px; }
.hero-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 26px; }
.hero-rating { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 16px; color: var(--c-gray-light); }
.stars { color: var(--c-orange); letter-spacing: 2px; font-size: 18px; }
.holasek-hero-grid { display: flex; align-items: flex-end; min-height: 560px; padding: 64px 24px; }
.holasek-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr); align-items: center; gap: 48px; padding-top: 72px; padding-bottom: 72px; }
.holasek-overview-copy h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.15; margin: 0 0 18px; }
.holasek-overview-copy h2 span { display: block; margin-top: 4px; color: var(--c-orange-dark); font-size: .6em; }
.holasek-overview-copy .hero-sub { max-width: 48ch; margin: 0 0 20px; }
.holasek-overview-copy .hero-actions { margin: 30px 0 0; }
.holasek-hero-map { overflow: hidden; align-self: center; border: 1px solid rgba(17,27,51,.15); border-radius: 20px; background: #fff; box-shadow: 0 16px 40px rgba(17,27,51,.16); }
.holasek-hero-map iframe { display: block; width: 100%; height: 320px; border: 0; }
.holasek-hero-map p { display: grid; gap: 3px; margin: 0; padding: 15px 18px; color: var(--c-petrol); font-size: 14px; }
.holasek-hero-map p span { color: var(--c-ink-soft); }
.holasek-hero-title { max-width: 900px; font-size: clamp(42px, 5vw, 70px); line-height: 1.02; }
.holasek-hero-title span { display: block; margin-top: 8px; color: var(--c-orange-dark); font-size: .56em; line-height: 1.15; }
.holasek-hero-actions { margin: 28px 0 0; }
@keyframes hero-image-fade { from { opacity: 0; transform: scale(1.025); } to { opacity: 1; transform: scale(1); } }
@keyframes hero-slideshow { 0%, 28% { opacity: 1; } 36%, 94% { opacity: 0; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hero-background { animation: none; } .hero-background--one { opacity: 1; } }

/* Stats bar */
.stats-bar { background: var(--c-petrol); color: #fff; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; padding: 26px 24px; max-width: 1240px; margin: 0 auto; }
.stat-value { font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 4px; }
.stat-label { font-size: 15px; color: #A8B4B9; margin: 0; line-height: 1.4; }

/* Sections */
.section { padding: 70px 0; }
.section-alt { background: var(--c-alt); border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); }
.innsan-intro { border-bottom: 1px solid var(--c-border); }
.home-intro { border-bottom: 0; }
.services-all-link { margin: 28px 0 0; text-align: right; }
.home-contact-cta { background: var(--c-petrol); color: #fff; }
.home-contact-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.home-contact-cta h2 { color: #fff; font-size: 34px; margin-bottom: 10px; }
.home-contact-cta p { color: #B4BCC0; font-size: 18px; line-height: 1.6; margin: 0; }
.innsan-intro-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(360px, 1.05fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.innsan-intro .section-title { max-width: 22ch; }
.innsan-intro .section-lead { margin-bottom: 0; }
.innsan-intro-video { overflow: hidden; border-radius: 16px; background: var(--c-ink); box-shadow: 0 18px 40px -28px rgba(22,35,43,.55); aspect-ratio: 16 / 9; }
.innsan-intro-video iframe { display: block; width: 100%; height: 100%; border: 0; }

.desktop-lead-cta { position: fixed; right: 28px; bottom: 28px; z-index: 35; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 22px; border-radius: 999px; background: var(--c-orange); color: #fff !important; font-size: 16px; font-weight: 700; text-decoration: none !important; box-shadow: 0 12px 28px rgba(22,35,43,.25), var(--shadow-btn); transition: transform .18s ease, background-color .18s ease; }
.desktop-lead-cta:hover { color: #fff !important; background: var(--c-orange-hover); transform: translateY(-2px); }

/* Customer reviews */
.reviews-heading { display: flex; justify-content: space-between; gap: 28px; align-items: end; margin-bottom: 36px; }
.reviews-heading .section-lead { margin-bottom: 0; }
.reviews-heading .link-arrow { flex: 0 0 auto; margin-bottom: 4px; }
.reviews-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.review-card { display: flex; flex-direction: column; min-height: 260px; padding: 28px; border: 1px solid var(--c-border); border-radius: 18px; background: #fff; }
.review-stars { color: var(--c-orange); font-size: 18px; letter-spacing: 2px; line-height: 1; }
.review-card blockquote { margin: 22px 0 24px; color: var(--c-ink-softer); font-size: 17px; line-height: 1.6; }
.review-card footer { display: grid; gap: 4px; margin-top: auto; font-size: 15px; color: var(--c-gray-light); }
.review-card footer strong { color: var(--c-ink); font-size: 16px; }

.reviews-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.reviews-marquee-track { display: flex; gap: 18px; width: max-content; animation: innsan-reviews-scroll 32s linear infinite; }
.reviews-marquee:hover .reviews-marquee-track, .reviews-marquee-track:focus-within { animation-play-state: paused; }
.reviews-marquee .review-card { flex: 0 0 auto; width: 360px; }
@keyframes innsan-reviews-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 640px) {
    .reviews-marquee .review-card { width: 82vw; }
}

.reviews-page-hero { padding: 54px 0 58px; background: var(--c-alt); border-bottom: 1px solid var(--c-border); }
.reviews-page-hero h1 { max-width: 18ch; margin: 0 0 16px; font-size: 48px; line-height: 1.08; }
.reviews-page-hero > .container > p:last-child { max-width: 62ch; margin: 0; color: var(--c-ink-soft); font-size: 19px; line-height: 1.6; }
.reviews-grid--all { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Service cards (homepage teaser) */
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.service-card { background: #fff; border: 1px solid var(--c-border); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.service-card-image { height: 210px; background-size: cover; background-position: center; background-color: #E8EAEA; }
.service-card-body { padding: 18px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.service-tag {
  align-self: flex-start; font-family: var(--font-head); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-orange-ink); background: var(--c-orange-soft); padding: 5px 11px; border-radius: 999px; margin-bottom: 12px;
}
.service-card h3 { font-size: 21px; margin-bottom: 8px; }
.service-card p { font-size: 16px; line-height: 1.55; color: var(--c-ink-soft); margin: 0 0 16px; }
.service-card .link-arrow { margin-top: auto; }

/* Process steps */
.process-grid { display: grid; grid-template-columns: .88fr 1.12fr; gap: 50px; align-items: start; }
.process-grid--steps-only { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; }
.process-steps { display: grid; gap: 14px; }
.step-item { background: var(--c-paper); border: 1px solid var(--c-border); border-radius: 16px; padding: 22px 24px; display: grid; grid-template-columns: 52px 1fr; gap: 20px; align-items: start; }
.step-number { width: 52px; height: 52px; border-radius: 50%; background: var(--c-petrol); color: #fff; display: flex; align-items: center; justify-content: center; }
.step-number svg { display: block; width: 24px; height: 24px; }
.step-item h3 { font-size: 20px; margin-bottom: 6px; }
.step-item p { font-size: 17px; line-height: 1.55; color: var(--c-ink-soft); margin: 0; }

/* Photo strip (homepage) */
.photo-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.home-gallery-title { margin-bottom: 30px; }
.photo-strip figure { margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--c-border); background: #E8EAEA; aspect-ratio: 4/3; background-size: cover; background-position: center; }
.photo-strip figcaption { font-size: 15px; color: var(--c-gray-light); margin-top: 10px; }

/* Dark CTA banner */
.cta-banner { background: var(--c-petrol); color: #fff; padding: 56px 0; }
.cta-banner-inner { display: flex; gap: 32px; align-items: center; flex-wrap: wrap; }
.cta-banner h2 { color: #fff; font-size: 32px; margin-bottom: 10px; max-width: 26ch; }
.cta-banner p { font-size: 18px; line-height: 1.6; color: #B4BCC0; margin: 0; max-width: 52ch; }
.cta-banner-inner > div:first-child { flex: 1; min-width: 280px; }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 50px; align-items: start; }
.faq-intro h2 { font-size: 36px; margin-bottom: 16px; }
.faq-intro p { font-size: 18px; line-height: 1.6; color: var(--c-ink-soft); }
.faq-list { display: grid; gap: 12px; }
.faq-item { background: #fff; border: 1px solid var(--c-border); border-radius: 14px; overflow: hidden; }
.faq-question {
  width: 100%; text-align: left; background: transparent; border: 0; padding: 20px 22px; font-size: 18px; font-weight: 700;
  color: var(--c-ink); cursor: pointer; display: flex; gap: 16px; align-items: center; font-family: inherit;
}
.faq-question:hover { background: #F6F3EE; }
.faq-question span:first-child { flex: 1; }
.faq-sign { font-size: 22px; color: var(--c-orange); line-height: 1; }
.faq-answer { font-size: 17px; line-height: 1.65; color: var(--c-ink-soft); margin: 0; padding: 0 22px 22px; display: none; }
.faq-item.is-open .faq-answer { display: block; }

/* Contact / lead form */
.contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: start; }
.form-card { background: var(--c-paper); border: 1px solid var(--c-border-soft); border-radius: 22px; padding: 32px; }
.form-card h2 { font-size: 30px; margin-bottom: 10px; }
.form-card > p { font-size: 18px; line-height: 1.55; color: var(--c-ink-soft); margin: 0 0 24px; max-width: 46ch; }
/* One grid for the whole form — fields pair up two per row, anything marked as
   full width spans both. The gap handles the vertical rhythm, so the groups
   inside must not add their own margin on top of it. */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; margin-bottom: 22px; }
.form-group { margin-bottom: 16px; }
/* A label that wraps to two lines would otherwise push its field below the one
   beside it — the fields line up at the bottom of the row instead. */
.form-row > .form-group { display: flex; flex-direction: column; justify-content: flex-end; margin-bottom: 0; }
.form-group label { display: block; font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.form-group .hint { font-weight: 400; color: var(--c-gray-light); }
.innsan-page input[type=text], .innsan-page input[type=tel], .innsan-page input[type=email], .innsan-page select, .innsan-page textarea {
  width: 100%; height: 56px; border: 1.5px solid var(--c-input-border); border-radius: var(--radius);
  padding: 0 15px; font-size: 17px; background: #fff; color: var(--c-ink); font-family: inherit;
}
.innsan-page textarea { height: 96px; padding: 14px 15px; resize: vertical; }
.innsan-page .form-select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 52px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2316232B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 6 5 5 5-5'/%3E%3C/svg%3E");
  background-position: right 18px center; background-repeat: no-repeat; background-size: 16px;
}
.innsan-page .form-select:invalid { color: var(--c-gray-light); }
.innsan-page .form-select option { color: var(--c-ink); background: #fff; }
.innsan-page input:focus, .innsan-page select:focus, .innsan-page textarea:focus {
  outline: 3px solid rgba(219,115,3,.22); border-color: var(--c-orange);
}
.form-note { font-size: 14px; line-height: 1.5; color: var(--c-gray-light); margin: 14px 0 0; }
.form-success { padding: 18px 0; }
.form-success-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--c-orange); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; margin-bottom: 20px; }
.form-error { color: #B3261E; font-size: 15px; margin: -6px 0 14px; }
.form-checkboxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.form-checkbox-option { display: flex; align-items: flex-start; gap: 8px; font-size: 15px; line-height: 1.35; color: var(--c-ink-soft); font-weight: 500; }
.form-checkbox-option input { margin: 2px 0 0; }
/* Tailwind Forms removes native checkbox rendering. Explicit dimensions keep
   consent controls visible, including inside the narrow side panel. */
.innsan-page input[type=checkbox] {
  appearance: none; -webkit-appearance: none; box-sizing: border-box;
  width: 20px; height: 20px; flex: 0 0 20px; padding: 0;
  border: 1.5px solid var(--c-input-border); border-radius: 4px;
  background: #fff; color: var(--c-orange); cursor: pointer; box-shadow: none;
}
.innsan-page input[type=checkbox]:checked {
  border-color: var(--c-orange); background-color: var(--c-orange);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m4 10 4 4 8-8' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center; background-size: 100% 100%; background-repeat: no-repeat;
}
.innsan-page input[type=checkbox]:focus-visible {
  outline: 3px solid rgba(219,115,3,.35); outline-offset: 3px; box-shadow: none;
}

/* Side lead form */
.lead-popup-trigger { position: fixed; z-index: 35; bottom: 16px; right: 16px; border: 0; border-radius: 999px; padding: 14px 20px; background: var(--c-orange); color: #fff; font: 700 14px/1 var(--font-head); letter-spacing: .02em; box-shadow: 0 10px 26px rgba(22,35,43,.25); cursor: pointer; transition: background-color .18s ease, transform .18s ease; }
.lead-popup-trigger:hover { background: var(--c-orange-hover); transform: translateY(-2px); }
/* Über einem sichtbaren Formular oder der Fußzeile wirbt der Knopf für etwas,
   das die Besucherin gerade vor sich hat — und verdeckt dabei Inhalt. */
.lead-popup-trigger.is-dismissed { opacity: 0; transform: translateY(12px) scale(.96); pointer-events: none; }
.lead-popup { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.lead-popup.is-open { pointer-events: auto; }
.lead-popup-backdrop { position: absolute; inset: 0; background: rgba(22,35,43,.48); opacity: 0; transition: opacity .22s ease; }
.lead-popup-panel { position: absolute; top: 0; right: 0; width: min(100%, 560px); height: 100%; background: var(--c-page); box-shadow: -16px 0 48px rgba(22,35,43,.24); transform: translateX(100%); transition: transform .25s ease; }
.lead-popup.is-open .lead-popup-backdrop { opacity: 1; }
.lead-popup.is-open .lead-popup-panel { transform: translateX(0); }
.lead-popup-scroll { height: 100%; overflow-y: auto; padding: 56px 28px 28px; }
.lead-popup .form-card { border: 0; box-shadow: none; padding: 0; max-width: none; }
.lead-popup-close { position: absolute; z-index: 1; top: 12px; right: 14px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--c-orange-soft); color: var(--c-petrol); font-size: 30px; line-height: 1; cursor: pointer; }

.sidebar-stack { display: grid; gap: 16px; }
.call-box { background: var(--c-ink); color: #fff; border-radius: 18px; padding: 24px; }
.call-box-label { font-family: var(--font-head); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-gray); margin: 0 0 10px; }
.call-box-number { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; }
.call-box p:last-child { font-size: 15px; line-height: 1.55; color: #B4BCC0; margin: 0; }
.reasons-list { display: grid; gap: 12px; }
.reason-item { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; }
.reason-check { width: 24px; height: 24px; border-radius: 50%; background: var(--c-orange-soft); color: var(--c-orange-ink); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; }
.related-box { background: var(--c-paper); border: 1px solid var(--c-border-soft); border-radius: 18px; padding: 22px; }
.related-box-title { font-family: var(--font-head); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-gray-light); margin: 0 0 14px; }
.related-link { display: block; margin-bottom: 12px; }
.related-link .name { font-size: 16px; font-weight: 700; color: var(--c-ink); }
.related-link .tag { font-family: var(--font-head); font-size: 10px; letter-spacing: .08em; color: var(--c-orange-ink); background: var(--c-orange-soft); padding: 3px 7px; border-radius: 5px; margin-left: 8px; }

/* --- Bewegung ----------------------------------------------------------
   Zurückhaltend gehalten: Blöcke steigen beim ersten Erscheinen einmal um
   wenige Pixel auf. Die Klasse setzt ausschließlich das Skript, und nur für
   Elemente, die beim Laden unterhalb des Sichtbereichs liegen — ohne
   JavaScript und über der Falz ist von alldem nichts zu sehen. */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); }
  /* Der Übergang steht absichtlich nur im Zielzustand: Ein Übergang auf .reveal
     selbst würde auch das anfängliche Ausblenden animieren — die Blöcke wären
     beim Laden sichtbar gewesen und langsam verschwunden. */
  .reveal.is-in {
    opacity: 1; transform: none;
    transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1);
  }
}
/* Gedruckt wird die Seite am Stück — was noch nicht eingeblendet wurde, käme
   sonst als leere Fläche aufs Papier. */
@media print {
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* Das Bild zieht beim Darüberfahren leicht an, der Rahmen bleibt ruhig. */
.service-card { overflow: hidden; }
.service-card-image { transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.service-card:hover .service-card-image { transform: scale(1.045); }
.standort-reason-card { transition: transform .22s ease, box-shadow .22s ease; }
.standort-reason-card:hover { transform: translateY(-4px); box-shadow: 0 26px 48px -24px rgba(17,27,51,.28); }
.standort-compare { transition: box-shadow .25s ease; }
.standort-compare:hover { box-shadow: 0 26px 52px -30px rgba(17,27,51,.5); }
.standort-contact-row { transition: border-color .2s ease, box-shadow .2s ease; }
.standort-contact-row:hover { border-color: rgba(219,115,3,.55); box-shadow: 0 18px 38px -28px rgba(22,35,43,.55); }
/* Der Pfeil läuft dem Zeiger entgegen. */
.link-arrow { display: inline-block; }
.link-arrow:hover { transform: translateX(2px); }
.innsan-page .link-arrow { transition: transform .2s cubic-bezier(.22,.61,.36,1), color .18s ease; }

/* Breadcrumb */
.breadcrumb { font-family: var(--font-head); font-size: 12px; letter-spacing: .06em; color: var(--c-gray-light); margin: 0 0 16px; }
.breadcrumb span { color: var(--c-ink-softer); }

/* Leistungen overview */
.filter-pills { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.filter-pill { border: 1.5px solid var(--c-input-border); background: #fff; color: var(--c-ink-soft); border-radius: 999px; padding: 10px 16px; font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit; }
.filter-pill.is-active { border-color: var(--c-orange); background: var(--c-orange-soft); color: var(--c-orange-ink); }

/* Vorher/Nachher slider (homepage) */
/* Die Textspalte bekommt den größeren Teil: Der Vergleich ist ein Bild, die
   Auswahl daneben trägt die Erklärung. */
.ba-wrap { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
/* Fester Rahmen für alle Beispiele. Die Quellbilder reichen von hochkant bis
   quer; ohne festes Verhältnis sprang die Höhe beim Umschalten um mehrere
   hundert Pixel, und hochkant war der Abschnitt schlicht zu hoch. */
.ba-slider {
  position: relative; width: 100%; max-width: 420px; margin: 0; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 20px; border: 1px solid var(--c-border); background: #E8EAEA; box-shadow: 0 24px 54px -32px rgba(17,27,51,.5);
  touch-action: pan-y;
}
.ba-slider-after, .ba-slider-before { position: absolute; inset: 0; overflow: hidden; }
.ba-slider-after img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ba-slider-before { border-right: 3px solid #fff; }
.ba-slider-before img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-slider-handle {
  position: absolute; top: 50%; z-index: 2; width: 40px; height: 40px; border-radius: 50%; background: #fff;
  color: var(--c-petrol); display: flex; align-items: center; justify-content: center; font-size: 16px;
  box-shadow: 0 6px 16px rgba(17,27,51,.3); transform: translate(-50%, -50%); pointer-events: none;
}
.ba-slider-range {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; appearance: none; background: transparent;
  cursor: ew-resize; z-index: 3;
}
.ba-slider-range::-webkit-slider-thumb { appearance: none; width: 40px; height: 100%; background: transparent; cursor: ew-resize; }
.ba-slider-range::-moz-range-thumb { width: 40px; height: 100%; background: transparent; border: 0; cursor: ew-resize; }
.ba-slider-range::-moz-range-track { background: transparent; }
.ba-tag {
  position: absolute; top: 14px; z-index: 2; font-family: var(--font-head); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; padding: 6px 11px; border-radius: 999px; background: rgba(17,27,51,.72); color: #fff;
}
.ba-tag--before { left: 14px; }
.ba-tag--after { right: 14px; }
.ba-copy .reasons-list { margin-bottom: 4px; }
@media (max-width: 900px) {
  .ba-wrap { grid-template-columns: 1fr; }
}
.leistungen-hero-title { font-size: 44px; line-height: 1.1; margin: 0 0 16px; white-space: nowrap; }
.leistung-card { background: #fff; border: 1px solid var(--c-border); border-radius: 20px; overflow: hidden; display: grid; grid-template-columns: .9fr 1.1fr; margin-bottom: 20px; transition: box-shadow .15s, border-color .15s; }
a.leistung-card, a.leistung-card:hover { color: var(--c-ink); text-decoration: none; }
.leistung-card:hover { border-color: var(--c-orange); box-shadow: 0 6px 20px rgba(219,115,3,.12); }
.leistung-card:hover .link-arrow { color: var(--c-orange); }
.leistung-card-image { background-size: cover; background-repeat: no-repeat; background-position: center; background-color: #E8EAEA; min-height: 300px; }
.leistung-card-body { padding: 30px 32px; display: flex; flex-direction: column; justify-content: space-between; }
.leistung-card h2 { font-size: 27px; margin-bottom: 10px; }
.leistung-card > .leistung-card-body > p { font-size: 17px; line-height: 1.6; color: var(--c-ink-soft); margin: 0 0 18px; }
.leistung-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.leistung-checklist { display: grid; gap: 8px; margin-bottom: 20px; }
.leistung-checklist-item { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: 16px; color: var(--c-ink-softer); }
.check-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--c-orange-soft); color: var(--c-orange-ink); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; }
.leistung-meta-row { display: flex; gap: 24px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid #EBEDEB; align-items: center; }
.leistung-meta-label { font-family: var(--font-head); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-gray-light); margin: 0 0 4px; }
.leistung-meta-value { font-size: 16px; font-weight: 700; margin: 0; }
.additional-solutions { margin-top: 72px; }
.additional-solutions > h2 { font-size: 34px; margin-bottom: 24px; }
.additional-solutions-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.additional-solution-card { display: grid; grid-template-columns: 150px minmax(0, 1fr); overflow: hidden; border: 1px solid var(--c-border); border-radius: 16px; color: var(--c-ink) !important; text-decoration: none !important; background: #fff; }
.additional-solution-card:hover { border-color: var(--c-orange); }
.additional-solution-card img { width: 100%; height: 100%; min-height: 180px; object-fit: cover; }
.additional-solution-card div { padding: 22px; }
.additional-solution-card h3 { font-size: 21px; margin-bottom: 9px; }
.additional-solution-card p { margin: 0 0 15px; color: var(--c-ink-soft); font-size: 16px; line-height: 1.5; }

/* Jobs */
.jobs-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 56px; }
.job-card { background: #fff; border: 1px solid var(--c-border); border-radius: 16px; padding: 26px 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; transition: border-color .15s, box-shadow .15s; }
.job-card:hover { border-color: var(--c-orange); box-shadow: 0 6px 20px rgba(219,115,3,.12); }
.job-card-body h3 { font-size: 21px; margin: 0 0 10px; }
.job-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.job-tag { font-family: var(--font-head); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-soft); background: var(--c-paper); border: 1px solid var(--c-border-soft); padding: 4px 11px; border-radius: 20px; }
.job-tag--category { color: var(--c-orange-ink); background: var(--c-orange-soft); border-color: transparent; }
.jobs-initiative { background: var(--c-paper); border: 1px solid var(--c-border-soft); border-radius: 16px; padding: 26px 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.jobs-initiative h3 { font-size: 19px; margin: 0 0 4px; }
.jobs-initiative p { margin: 0; color: var(--c-ink-soft); font-size: 16px; }

/* Leistung detail */
.detail-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--c-petrol); }
.detail-hero-background { position: absolute; inset: 0; z-index: -2; background: var(--detail-hero-image) center / cover no-repeat; animation: hero-image-fade 1.1s ease-out both; }
.detail-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.92) 37%, rgba(255,255,255,.3) 63%, rgba(255,255,255,.04) 100%); }
.detail-hero-inner { display: flex; align-items: center; min-height: 560px; max-width: 1240px; margin: 0 auto; }
.detail-hero-content { box-sizing: border-box; width: 100%; padding: 64px 24px; max-width: 650px; text-align: left; }
.detail-hero h1 { font-size: 44px; line-height: 1.1; margin: 0 0 18px; }
.detail-hero p.lead { font-size: 20px; line-height: 1.62; color: var(--c-ink-soft); max-width: 48ch; margin: 0 0 26px; }
.pillars { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.detail-facts-bar { background: var(--c-petrol); color: #fff; }
.detail-facts-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; padding: 22px 24px; max-width: 1240px; margin: 0 auto; }
.detail-fact-k { font-family: var(--font-head); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-gray); margin: 0 0 6px; }
.detail-fact-v { font-size: 18px; font-weight: 700; margin: 0; line-height: 1.3; }
.detail-content { padding: clamp(48px, 7vw, 96px) 0 64px; }
.detail-block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 76px); align-items: center; margin-bottom: clamp(56px, 8vw, 112px); }
.detail-block-copy { min-width: 0; padding: 12px 0; }
.detail-block h2 { max-width: 23ch; font-size: clamp(27px, 2.8vw, 38px); line-height: 1.18; letter-spacing: -.025em; margin: 0 0 22px; text-wrap: balance; }
.detail-block-subheading { font-size: 22px; line-height: 1.3; margin: 28px 0 14px; }
.detail-block p { max-width: 52ch; font-size: 18px; line-height: 1.75; color: var(--c-ink-soft); margin: 0 0 24px; }
.detail-block .leistung-checklist { gap: 14px; margin-bottom: 0; }
.detail-block .leistung-checklist-item { line-height: 1.6; }
.detail-block-media { position: relative; min-width: 0; aspect-ratio: 20 / 17; border-radius: 24px; background: #E8EAEA; box-shadow: 0 18px 44px -28px rgba(22,35,43,.35); }
.detail-block-media::before { content: ''; position: absolute; inset: 24px -14px -14px 24px; z-index: -1; border-radius: inherit; background: var(--c-orange-soft); }
.detail-block-media img { display: block; width: 100%; height: 100%; aspect-ratio: 20 / 17; object-fit: cover; border-radius: inherit; }
.detail-block { isolation: isolate; }
.detail-block-media, .detail-block--reversed .detail-block-media { order: -1; }
.detail-block--reversed .detail-block-media::before { inset: 24px 24px -14px -14px; background: #EDF1F3; }
.advantages-box { background: linear-gradient(120deg, var(--c-orange-soft), #FFF9F2); border: 1px solid #F0DFC9; border-radius: 24px; padding: clamp(24px, 4vw, 48px); margin-bottom: 72px; }
.advantages-box h2 { font-size: 27px; margin-bottom: 20px; }
.advantages-box .btn { max-width: 100%; height: auto; min-height: 52px; white-space: normal; text-align: center; }
.advantage-item { display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start; margin-bottom: 12px; }
.advantage-check { width: 26px; height: 26px; border-radius: 50%; background: var(--c-orange); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; }
.service-gallery { margin: 0 0 72px; }
.service-gallery h2 { font-size: 29px; margin-bottom: 18px; }
.service-gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.service-gallery-item { display: block; overflow: hidden; border: 1px solid var(--c-border); border-radius: 12px; background: #E8EAEA; aspect-ratio: 1 / .82; }
.service-gallery-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
[data-service-lightbox] { cursor: zoom-in; }
[data-service-lightbox]:focus-visible { outline: 3px solid var(--c-orange); outline-offset: 5px; }
.service-lightbox:not([open]) { display: none; }
.service-lightbox { box-sizing: border-box; position: fixed; inset: 0; display: flex; flex-direction: column; width: auto; max-width: none; height: auto; max-height: none; margin: 0; padding: 20px; overflow: clip; border: 0; border-radius: 0; background: rgba(0,0,0,.88); color: #fff; }
.service-lightbox::backdrop { background: rgba(0,0,0,.88); }
.service-lightbox-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 0 12px 8px; }
.service-lightbox button { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border: 1px solid #68737C; border-radius: 50%; background: transparent; color: #fff; font: inherit; font-size: 24px; cursor: pointer; }
.service-lightbox button:hover { background: #35434F; }
.service-lightbox button:focus-visible { outline: 3px solid var(--c-orange); outline-offset: 3px; }
.service-lightbox-stage { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; flex: 1; min-height: 0; align-items: center; gap: 16px; overflow: hidden; }
.service-lightbox figure { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; height: 100%; min-height: 0; margin: 0; overflow: hidden; }
.service-lightbox img { display: block; width: auto; max-width: 100%; height: auto; max-height: calc(100% - 44px); object-fit: contain; }
.service-lightbox figcaption { margin-top: 16px; text-align: center; font-size: 15px; line-height: 1.5; color: #D7DFE4; }
@media (max-width: 640px) {
  .service-lightbox { padding: 12px; }
  .service-lightbox-stage { grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 8px; }
  .service-lightbox button { width: 40px; height: 40px; }
  .service-lightbox-stage button { justify-self: center; }
}
.detail-below-grid { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; padding-bottom: 56px; border-top: 1px solid var(--c-border); padding-top: 48px; }
.detail-below-side { display: grid; gap: 16px; }

/* Canonical Duschsanierung page */
.canonical-service-content { padding-top: clamp(52px, 8vw, 100px); padding-bottom: 84px; }
.canonical-service-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 6vw, 80px); margin-bottom: clamp(48px, 6vw, 84px); }
.canonical-service-section > img { order: -1; }
.canonical-service-section--reverse > img { order: 0; }
.canonical-service-section > img { display: block; width: 100%; min-height: 380px; height: 100%; max-height: 620px; border-radius: 24px; box-shadow: 0 16px 35px rgba(17,27,51,.12); object-fit: cover; }
.canonical-service-section > .canonical-ba-slider { order: -1; width: 100%; max-width: none; height: 100%; min-height: 380px; max-height: 620px; }
.canonical-service-section--reverse > .canonical-ba-slider { order: 0; }
.canonical-service-copy h2, .canonical-service-intro h2 { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.15; margin-bottom: 22px; }
.canonical-service-copy h3 { font-size: 24px; line-height: 1.3; margin: 32px 0 14px; }
.canonical-service-copy p, .canonical-service-intro p { color: var(--c-ink-soft); font-size: 18px; line-height: 1.72; margin: 0 0 18px; }
.canonical-service-list { display: grid; gap: 13px; padding-left: 0; list-style: none; color: var(--c-ink-soft); font-size: 18px; line-height: 1.55; }
.canonical-service-list li { display: flex; align-items: flex-start; gap: 13px; }
.canonical-service-list li::before {
  content: '';
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  border-radius: 50%;
  background-color: var(--c-orange-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A4901' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12 10 18 20 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}
.canonical-service-note { margin: 24px 0 0; color: var(--c-gray-light); font-size: 14px; }
.canonical-service-intro { max-width: 770px; margin: 0 auto clamp(52px, 8vw, 100px); text-align: center; }
.canonical-service-intro--left { max-width: none; margin-left: 0; margin-right: 0; text-align: left; }
.canonical-service-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 0; }
.canonical-service-gallery-heading { margin-bottom: 12px; }
.canonical-service-gallery--spaced { margin-bottom: clamp(76px, 9vw, 116px); }
.canonical-service-gallery a { display: block; overflow: hidden; aspect-ratio: 1 / .82; background: #E8EAEA; border: 1px solid var(--c-border); border-radius: 12px; }
.canonical-service-gallery img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.canonical-service-gallery a:hover img { transform: scale(1.04); }
.canonical-service-before-after { margin: 0 0 clamp(76px, 9vw, 116px); }
.canonical-service-before-after > h2 { margin: 0 0 12px; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.15; }
.canonical-ba-slider { max-width: 920px; aspect-ratio: 16 / 9; border-radius: 18px; box-shadow: 0 16px 35px rgba(17,27,51,.12); }
.canonical-service-closeout { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; margin-top: clamp(88px, 10vw, 132px); }
.canonical-service-closeout-cta { min-height: 100%; padding: clamp(30px, 5vw, 56px); border-radius: 18px; background: var(--c-petrol); color: #fff; }
.canonical-service-closeout-cta h2 { font-size: clamp(28px, 3vw, 40px); color: #fff; }
.canonical-service-closeout-cta p { margin: 12px 0 24px; font-size: 18px; line-height: 1.6; }

/* Vienna partner landing page */
.vienna-page { padding-bottom: 80px; }
.vienna-hero { background: var(--c-petrol); color: #fff; }
.vienna-hero-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 70px; align-items: center; padding-top: 40px; padding-bottom: 64px; }
.vienna-hero .breadcrumb, .vienna-hero .breadcrumb a { color: #c5cede; }
.vienna-label { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 22px; }
.vienna-hero-copy > .vienna-label { margin-top: 48px; color: #c5cede; }
.vienna-hero h1 { color: #fff; font-size: clamp(40px, 4.6vw, 66px); line-height: 1.08; letter-spacing: -.04em; }
.vienna-hero h1 em { font-style: normal; color: #e5cdb4; }
.vienna-lead { max-width: 43ch; font-size: 19px; line-height: 1.7; color: #d1d8e3; margin: 28px 0; }
.vienna-page .vienna-email { display: block; width: fit-content; margin-top: 20px; color: #fff; overflow-wrap: anywhere; }
.vienna-portrait { height: 100%; margin: 0; border-radius: 24px; overflow: hidden; background: #e9e1d7; }
.vienna-portrait > img { display: block; width: 100%; height: 100%; min-height: 530px; object-fit: cover; object-position: center top; }
.vienna-portrait figcaption { position: absolute; bottom: 0; left: 0; right: 0; padding: 70px 28px 26px; color: #fff; background: linear-gradient(transparent, rgba(17,27,51,.96)); display: grid; gap: 6px; }
.vienna-portrait figcaption span { font-size: 13px; color: #d1d8e3; }
.vienna-portrait figcaption strong { font-size: 24px; }
.vienna-portrait figcaption a { color: #fff; }
@media (min-width: 701px) {
  .vienna-portrait { width: min(100%, 360px); height: auto; aspect-ratio: 3 / 4; justify-self: center; align-self: center; }
  .vienna-portrait > img { height: 100%; min-height: 0; }
}
.vienna-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: stretch; padding-top: 100px; padding-bottom: 100px; }
.vienna-page h2 { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.16; letter-spacing: -.025em; }
.vienna-intro p:not(.vienna-label) { font-size: 18px; line-height: 1.75; color: var(--c-ink-soft); }
.vienna-intro .ba-slider { justify-self: center; }
.vienna-contact-block { display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.vienna-contact-row { display: flex; gap: 22px; align-items: center; padding: 22px 26px; background: #fff; border-radius: 18px; box-shadow: 0 16px 36px -22px rgba(17,27,51,.22); }
.vienna-contact-row-icon { flex: none; width: 68px; height: 68px; border-radius: 50%; background: var(--c-petrol); color: #fff; display: flex; align-items: center; justify-content: center; }
.vienna-contact-row-icon svg { display: block; width: 32px; height: 32px; }
.vienna-contact-row h3 { font-size: 22px; font-weight: 700; margin: 0 0 8px; }
.vienna-contact-row a { display: block; color: var(--c-ink-soft); font-size: 17px; line-height: 1.6; }
.vienna-contact-row a:hover { color: var(--c-petrol); }
.vienna-contact-row p { margin: 0; color: var(--c-ink-soft); font-size: 17px; line-height: 1.6; }
.vienna-why { background: var(--c-petrol); color: #fff; padding: 80px 0; }
.vienna-why-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 42px; }
.vienna-why .vienna-label { color: #d1d8e3; }
.vienna-why h2 { color: #fff; }
.vienna-why-heading > p { max-width: 46ch; margin: 0; color: #d1d8e3; font-size: 18px; line-height: 1.7; }
.vienna-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: rgba(255,255,255,.16); }
.vienna-why-grid--four { grid-template-columns: repeat(4, 1fr); }
.vienna-why-heading--center { flex-direction: column; align-items: center; text-align: center; }
.vienna-why-card { padding: 30px; background: var(--c-petrol); }
.vienna-why-card > span { display: block; margin-bottom: 34px; color: #e5cdb4; font-family: var(--font-head); font-size: 13px; letter-spacing: .12em; }
.vienna-why-card h3 { font-size: 25px; color: #fff; }
.vienna-why-card p { margin: 12px 0 0; color: #d1d8e3; line-height: 1.7; }
.vienna-why--light { background: #f5f3ef; color: var(--c-ink); }
.vienna-why--light h2 { color: var(--c-ink); }
.vienna-why-grid--cards { gap: 22px; background: transparent; }
.vienna-why-grid--cards .vienna-why-card { background: #fff; border-radius: 20px; box-shadow: 0 16px 36px -20px rgba(17,27,51,.18); }
.vienna-why-grid--cards .vienna-why-card > span { color: var(--c-orange-dark); }
.vienna-why-grid--cards .vienna-why-card h3 { color: var(--c-ink); }
.vienna-why-grid--cards .vienna-why-card p { color: var(--c-ink-soft); }

.wien-steps { display: block; }
.wien-steps-heading { max-width: 640px; margin: 0 auto 52px; text-align: center; }
.wien-steps-heading h2 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.16; letter-spacing: -.02em; margin: 0; }
.wien-steps-heading p { max-width: 52ch; margin: 18px auto 0; color: var(--c-ink-soft); font-size: 18px; line-height: 1.7; }

/* Vier Kreise auf einer Linie statt der Pfeilkette: Die Schritte sind
   gleichwertige Stationen, keine ineinander greifenden Blöcke — und in der
   Markenfarbe statt in Petrol, damit der Abschnitt nicht wie ein Fremdkörper
   zwischen den hellen Sektionen liegt. */
.wien-steps-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: step; }
.wien-step {
  position: relative; min-width: 0; counter-increment: step;
  display: grid; grid-template-rows: auto auto auto; justify-items: center;
  gap: 16px; padding: 0 12px; text-align: center;
}
/* Die Verbindung liegt hinter den Kreisen und reicht von Mittelpunkt zu
   Mittelpunkt. Sie hängt an den Schritten selbst, nicht an der Liste — so
   wächst sie beim Einblenden im selben Takt wie die Kreise. */
.wien-step:not(:first-child)::before {
  content: ''; position: absolute; top: 37px; left: -50%; right: 50%; height: 2px;
  background: linear-gradient(90deg, rgba(219,115,3,.22), rgba(219,115,3,.6));
}
.wien-step-icon {
  position: relative; z-index: 1;
  width: 74px; height: 74px; border-radius: 50%;
  background: var(--c-orange); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 30px -12px rgba(219,115,3,.6);
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
}
.wien-step-icon svg { display: block; width: 33px; height: 33px; }
/* Die Nummer sitzt als kleine Marke am Kreis — sie sagt, in welcher Reihenfolge
   die Stationen kommen, ohne eine eigene Zeile zu brauchen. */
.wien-step-icon::after {
  content: counter(step, decimal-leading-zero);
  position: absolute; top: -2px; right: -6px;
  min-width: 26px; height: 26px; padding: 0 5px; border-radius: 999px;
  background: var(--c-petrol); border: 2px solid #fff; color: #fff;
  font: 700 11px/22px var(--font-head); letter-spacing: .04em; text-align: center;
}
.wien-step:hover .wien-step-icon { transform: translateY(-5px) scale(1.05); box-shadow: 0 22px 40px -14px rgba(219,115,3,.75); }
.wien-step-arrow {
  font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.25;
  color: var(--c-ink); letter-spacing: -.01em;
}
.wien-step-description { margin: 0; color: var(--c-ink-soft); font-size: 14.5px; line-height: 1.55; max-width: 26ch; }

/* Beim Einblenden wächst die Verbindung von links nach rechts mit, weil jeder
   Schritt seinen Abschnitt selbst zeichnet. Ohne Skript steht die Linie
   einfach da. */
@media (prefers-reduced-motion: no-preference) {
  .wien-step.reveal::before { transform: scaleX(0); transform-origin: left center; }
  .wien-step.reveal.is-in::before { transform: scaleX(1); transition: transform .55s cubic-bezier(.22,.61,.36,1) .12s; }
  .wien-step.reveal .wien-step-icon { transform: scale(.82); }
  .wien-step.reveal.is-in .wien-step-icon { transform: none; transition: transform .5s cubic-bezier(.34,1.3,.64,1); }
}

@media (max-width: 900px) {
  .wien-steps-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 8px; }
  /* In zwei Reihen führt eine durchgehende Linie in die Irre. */
  .wien-step:not(:first-child)::before { display: none; }
}

@media (max-width: 560px) {
  .wien-steps-list { grid-template-columns: 1fr; gap: 26px; }
  .wien-step { grid-template-columns: 62px minmax(0, 1fr); grid-template-rows: auto auto; justify-items: start; text-align: left; gap: 4px 16px; padding: 0; }
  .wien-step .wien-step-icon { width: 62px; height: 62px; grid-row: 1 / 3; align-self: start; }
  .wien-step .wien-step-icon svg { width: 28px; height: 28px; }
  .wien-step-description { max-width: none; }
}

.vienna-video { padding-top: 90px; padding-bottom: 90px; }
.vienna-video .vienna-section-heading { justify-content: center; text-align: center; margin-bottom: 34px; }
.vienna-video-player { display: block; width: 100%; max-width: 900px; margin: 0 auto; border-radius: 20px; box-shadow: 0 24px 54px -32px rgba(17,27,51,.5); background: #000; }
.vienna-interior { position: relative; border-radius: 24px; overflow: hidden; }
.vienna-interior img { display: block; width: 100%; height: 480px; object-fit: cover; }
.vienna-interior span { position: absolute; bottom: 0; left: 0; right: 0; padding: 60px 25px 25px; color: #fff; background: linear-gradient(transparent, rgba(17,27,51,.8)); }
.vienna-solutions { background: #f5f3ef; padding: 80px 0; }
.vienna-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
.vienna-section-heading h2 { max-width: 22ch; }
.vienna-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.vienna-page .vienna-card { display: block; color: var(--c-ink); background: #fff; border-radius: 20px; overflow: hidden; transition: box-shadow .2s; }
.vienna-card:hover { box-shadow: 0 12px 30px rgba(17,27,51,.12); }
.vienna-card > img { width: 100%; height: 260px; object-fit: cover; display: block; }
.vienna-card > div { padding: 28px; }
.vienna-card h3 { font-size: 23px; line-height: 1.25; }
.vienna-card p { font-size: 16px; line-height: 1.6; color: var(--c-ink-soft); }
.vienna-before-after { padding-top: 90px; padding-bottom: 90px; }
.vienna-before-after .vienna-section-heading { margin-bottom: 34px; }
.vienna-before-after .vienna-label { margin-bottom: 14px; }
.vienna-before-after-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.vienna-comparison { display: grid; grid-template-columns: 1fr 1fr; margin: 0; overflow: hidden; border-radius: 20px; background: var(--c-border); gap: 2px; }
.vienna-comparison > div { position: relative; min-width: 0; background: #f5f3ef; }
.vienna-comparison img { display: block; width: 100%; height: 300px; object-fit: cover; }
.vienna-comparison span { position: absolute; top: 14px; left: 14px; padding: 6px 10px; border-radius: 999px; background: rgba(17,27,51,.88); color: #fff; font-size: 13px; font-weight: 700; }
.vienna-comparison > div:last-child span { background: var(--c-orange); }
.vienna-facebook-mobile { display: none; }
.vienna-text-split { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: start; padding-top: 90px; padding-bottom: 90px; }
.vienna-text-split h2 { margin: 0; }
.vienna-text-split-body p { font-size: 18px; line-height: 1.75; color: var(--c-ink-soft); margin: 0 0 18px; }
.vienna-text-split-body p:last-child { margin-bottom: 0; }
.vienna-faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; padding-top: 90px; padding-bottom: 90px; }
.vienna-faq details { border-bottom: 1px solid var(--c-border); padding: 23px 0; }
.vienna-faq summary { font-weight: 700; font-size: 19px; cursor: pointer; }
.vienna-faq details p { line-height: 1.75; color: var(--c-ink-soft); }
.vienna-contact { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 50px; padding: 56px; background: var(--c-petrol); color: #fff; border-radius: 24px; }
.vienna-contact h2 { color: #fff; }
.vienna-contact .vienna-label { color: #d1d8e3; letter-spacing: .03em; text-transform: none; }
.vienna-contact-links { display: grid; gap: 18px; min-width: 0; }
.vienna-contact-links a { color: #fff; overflow-wrap: anywhere; }
.vienna-contact-links a:first-child { font-size: clamp(22px, 2.4vw, 32px); font-weight: 700; }
.vienna-contact-links p { color: #d1d8e3; line-height: 1.6; margin: 0; }
@media (max-width: 900px) {
  .vienna-hero-grid, .vienna-intro, .vienna-faq, .vienna-contact { gap: 32px; }
  .vienna-why-heading { gap: 24px; }
  .vienna-why-grid--four { grid-template-columns: repeat(2, 1fr); }
  .vienna-cards { gap: 16px; }
  .vienna-card > div { padding: 20px; }
}
@media (max-width: 700px) {
  .vienna-hero-grid, .vienna-intro, .vienna-faq, .vienna-contact, .vienna-cards, .vienna-before-after-grid, .holasek-overview, .vienna-text-split { grid-template-columns: 1fr; }
  .vienna-hero-copy > .vienna-label { margin-top: 30px; }
  .vienna-why { padding: 56px 0; }
  .vienna-why-heading { display: block; margin-bottom: 28px; }
  .vienna-why-heading > p { margin-top: 20px; }
  .vienna-why-grid { grid-template-columns: 1fr; }
  .vienna-why-card { padding: 25px 24px; }
  .vienna-why-card > span { margin-bottom: 18px; }
  .holasek-overview { gap: 30px; padding-top: 48px; padding-bottom: 48px; }
  .vienna-portrait { max-width: 220px; width: 100%; height: auto; margin: 12px auto 0; aspect-ratio: 3 / 4; }
  .vienna-portrait > img { width: 100%; height: 100%; min-height: 0; aspect-ratio: 3 / 4; object-fit: cover; }
  .vienna-intro, .vienna-faq, .vienna-text-split { padding-top: 56px; padding-bottom: 56px; }
  .vienna-text-split { gap: 20px; }
  .vienna-interior img { height: 320px; }
  .vienna-section-heading { align-items: start; flex-direction: column; }
  .vienna-before-after { padding-top: 56px; padding-bottom: 56px; }
  .vienna-before-after .vienna-section-heading > .link-arrow { display: none; }
  .vienna-facebook-mobile { display: block; margin: 28px 0 0; }
  .vienna-comparison img { height: 240px; }
  .vienna-contact { padding: 30px 24px; }
  .vienna-video { padding-top: 56px; padding-bottom: 56px; }
}

/* Standorte */
.locations-hero { padding: 38px 0 44px; background: #fff; border-bottom: 1px solid var(--c-border); }
.locations-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; }
.locations-hero h1 { font-size: 44px; line-height: 1.1; margin: 0 0 16px; max-width: 24ch; }
.locations-hero .section-lead { margin-bottom: 0; }
.locations-directory { padding: 40px 0 72px; }
.locations-count { margin: 0 0 14px; font: 500 12px/1 var(--font-head); letter-spacing: .12em; color: var(--c-gray-light); text-transform: uppercase; }

/* Read-only map: real tiles, flags, no panning or zooming. */
.locations-map { position: relative; isolation: isolate; height: 560px; overflow: hidden; background: #e6edf0; border: 1px solid var(--c-border); border-radius: 24px; box-shadow: 0 22px 46px -34px rgba(17,27,51,.6); }
.locations-directory .locations-map { margin-bottom: 32px; }
.locations-map.leaflet-container { cursor: default; font-family: var(--font-head); }
.locations-map .leaflet-tile-pane { filter: saturate(.5) brightness(1.03); }
.locations-map .leaflet-control-attribution { font-size: 11px; }
.locations-map--single { height: 380px; }
.location-map-card--fill { height: 100%; }
.location-map-card--fill .locations-map { height: 100%; min-height: 440px; }
.innsan-flag-icon { background: none; border: 0; overflow: visible; }
.innsan-flag { position: relative; display: block; width: 28px; height: 40px; cursor: pointer; }
.innsan-flag svg { display: block; overflow: visible; filter: drop-shadow(0 3px 3px rgba(17,27,51,.3)); transform-origin: 5px 38px; transition: transform .18s ease; }
.innsan-flag-pole { fill: none; stroke: var(--c-petrol); stroke-width: 2.4; stroke-linecap: round; }
.innsan-flag-cloth { fill: var(--c-orange); stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; }
.innsan-flag-base { fill: rgba(17,27,51,.35); }
.innsan-flag-label { position: absolute; top: 0; left: 36px; padding: 5px 11px; white-space: nowrap; background: #fff; border-radius: 999px; box-shadow: 0 2px 8px rgba(17,27,51,.22); color: var(--c-petrol); font: 700 13px/1.2 var(--font-head); transition: background-color .18s ease, color .18s ease; }
.innsan-flag--left .innsan-flag-label { left: auto; right: 34px; }
.innsan-flag-icon:hover .innsan-flag svg, .innsan-flag-icon.is-active .innsan-flag svg { transform: scale(1.18); }
.innsan-flag-icon:hover .innsan-flag-label, .innsan-flag-icon.is-active .innsan-flag-label { background: var(--c-orange); color: #fff; }
.innsan-flag-icon.is-static { pointer-events: none; }

/* Location cards */
.locations-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.location-card { position: relative; display: flex; flex-direction: column; padding: 26px; background: #fff; border: 1px solid var(--c-border); border-radius: 20px; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.location-card:hover, .location-card:focus-within { border-color: var(--c-orange); box-shadow: 0 18px 34px -26px rgba(17,27,51,.62); transform: translateY(-3px); }
.location-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.location-card-top .showroom-badge { margin: 0; }
.location-card h3 { margin: 0 0 20px; font-size: 21px; line-height: 1.25; }
.innsan-page .location-card .location-card-link { color: var(--c-petrol); }
.location-card-link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.location-card .location-facts { flex: 1; align-content: start; }
.location-facts { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }
.location-facts li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 15.5px; line-height: 1.5; color: var(--c-ink-softer); }
.location-facts svg { width: 20px; height: 20px; margin-top: 1px; color: var(--c-orange); }
.location-facts small { display: block; font: 500 11px/1.4 var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--c-gray-light); }
.location-contact-link { position: relative; z-index: 1; font-weight: 600; overflow-wrap: anywhere; }
.location-card-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--c-border); font-size: 15px; }
.location-card:hover .location-card-footer .link-arrow { color: var(--c-orange); }

/* Location detail */
.location-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 28px; }
.location-hero-actions .btn { height: 54px; font-size: 17px; }
.location-hero-actions .showroom-badge { margin: 0; }
.location-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .8fr); gap: 34px; padding-top: 48px; padding-bottom: 48px; align-items: stretch; }
.location-detail-main { min-width: 0; }
.location-detail-photo { min-height: 430px; overflow: hidden; border-radius: 24px; background: var(--c-alt); }
.location-detail-photo img { width: 100%; height: 100%; min-height: 430px; object-fit: cover; }
.location-detail-photo:not(.location-detail-photo--gallery) img { height: 560px; object-position: 50% 35%; }
.location-detail-photo--gallery { min-height: 0; padding: 26px; background: #fff; border: 1px solid var(--c-border); box-shadow: 0 22px 46px -34px rgba(17,27,51,.6); }
.location-showroom-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.location-showroom-heading .locations-count { margin: 0; }
.location-showroom-heading h2 { margin: 0; font-size: 27px; }
.location-showroom-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.location-showroom-gallery a:first-child { grid-column: 1 / -1; }
.location-showroom-gallery a { overflow: hidden; border-radius: 14px; }
.location-showroom-gallery img { display: block; width: 100%; min-height: 0; height: 210px; object-fit: cover; transition: transform .25s ease; }
.location-showroom-gallery a:first-child img { height: 290px; }
.location-showroom-gallery a:hover img { transform: scale(1.03); }
.location-detail-card { display: flex; flex-direction: column; padding: 34px; background: #fff; border: 1px solid var(--c-border); border-radius: 24px; box-shadow: 0 22px 46px -34px rgba(17,27,51,.6); }
.location-detail-card h2 { margin: 0 0 24px; font-size: 28px; }
.location-detail-card .location-facts { gap: 18px; }
.location-detail-card .location-facts li { font-size: 17px; }
.location-detail-card a:not(.btn) { font-weight: 700; }
.location-detail-actions { display: grid; gap: 12px; margin-top: auto; padding-top: 30px; }
.location-detail-actions .btn { width: 100%; height: 56px; }
.location-detail-note { margin: 22px 0 0; text-align: center; }
.location-map-section { padding-bottom: 48px; }
.location-others { padding: 48px 0 72px; background: #F7F8F7; border-top: 1px solid var(--c-border); }
.location-others h2 { margin: 0 0 22px; font-size: 28px; }
.location-others-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.innsan-page .location-other { display: grid; gap: 6px; padding: 18px 20px; background: #fff; border: 1px solid var(--c-border); border-radius: 16px; color: var(--c-ink-softer); text-decoration: none; transition: border-color .18s ease, transform .18s ease; }
.innsan-page .location-other:hover { border-color: var(--c-orange); transform: translateY(-2px); }
.location-other strong { font: 800 19px/1.25 var(--font-display); color: var(--c-petrol); }
.location-other .link-arrow { margin-top: 6px; font-size: 15px; }
.legal-page { padding: 30px 24px 60px; }
.legal-page > h1 { font-size: 36px; margin: 0 0 24px; }
.legal-copy { color: var(--c-ink-softer); }
.legal-copy h2 { font-size: 25px; line-height: 1.25; margin: 34px 0 12px; }
.legal-copy h3 { font-size: 20px; line-height: 1.35; margin: 28px 0 10px; }
.legal-copy p { font-size: 17px; line-height: 1.72; margin: 0 0 18px; }
.showroom-badge { display: inline-block; font-family: var(--font-head); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; background: var(--c-orange-soft); color: var(--c-orange-ink); padding: 5px 9px; border-radius: 6px; margin-top: 14px; }

/* Blog */
/* --- Wissenswertes: Übersicht ------------------------------------------ */
.blog-index-header { padding: 30px 0 4px; }
.blog-index-header h1 { font-size: clamp(32px, 4vw, 46px); line-height: 1.08; letter-spacing: -.015em; margin: 0 0 16px; max-width: 20ch; text-wrap: balance; }
.blog-index-intro { font-size: 19px; line-height: 1.6; color: var(--c-ink-soft); margin: 0; max-width: 62ch; }

/* The newest article gets the width its recency deserves. */
.blog-feature-card {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch;
  margin-top: 36px; overflow: hidden; background: #fff; color: var(--c-ink);
  border: 1px solid var(--c-border); border-radius: var(--radius-lg);
  box-shadow: 0 18px 44px -32px rgba(22,35,43,.55);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.innsan-page a.blog-feature-card { color: var(--c-ink); }
.blog-feature-card:hover { border-color: rgba(219,115,3,.7); box-shadow: 0 26px 56px -30px rgba(22,35,43,.6); color: var(--c-ink); transform: translateY(-3px); }
.blog-feature-card:focus-visible { outline: 3px solid rgba(219,115,3,.35); outline-offset: 4px; }
.blog-feature-image { min-height: 330px; background-color: #DDE1DF; background-position: center; background-size: cover; }
.blog-feature-body { display: flex; flex-direction: column; justify-content: center; padding: 38px 40px; }
.blog-feature-body h2 { margin: 0 0 14px; font-size: clamp(25px, 2.5vw, 32px); line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; }
.blog-feature-excerpt {
  font-size: 18px; line-height: 1.62; color: var(--c-ink-soft); margin: 0 0 26px;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 860px) {
  .blog-feature-card { grid-template-columns: minmax(0, 1fr); }
  .blog-feature-image { min-height: 220px; }
  .blog-feature-body { padding: 28px 24px; }
}

.blog-index-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
.blog-index-card { display: flex; flex-direction: column; min-height: 100%; overflow: hidden; background: #fff; border: 1px solid var(--c-border); border-radius: 20px; box-shadow: 0 14px 34px -28px rgba(22,35,43,.55); color: var(--c-ink); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.blog-index-card:hover { border-color: rgba(219,115,3,.7); box-shadow: 0 22px 48px -28px rgba(22,35,43,.65); color: var(--c-ink); transform: translateY(-4px); }
.blog-index-card:focus-visible { outline: 3px solid rgba(219,115,3,.35); outline-offset: 4px; }
.blog-index-card-image { position: relative; min-height: 240px; background-color: #DDE1DF; background-position: center; background-size: cover; }
.blog-index-card-body { display: flex; flex: 1; flex-direction: column; padding: 26px; }
.blog-index-card-date { margin: 0 0 12px; color: var(--c-gray-light); font-family: var(--font-head); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.blog-index-card h2 { margin: 0 0 12px; color: var(--c-ink); font-size: 24px; line-height: 1.2; }
.blog-index-card-excerpt { margin: 0 0 24px; color: var(--c-ink-soft); font-size: 16px; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.blog-index-card-link { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--c-border); color: var(--c-orange-dark); font-size: 16px; font-weight: 700; }
.blog-index-card-link span { font-size: 21px; transition: transform .2s ease; }
.blog-index-card:hover .blog-index-card-link span { transform: translateX(4px); }
.blog-back-link { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--c-ink-soft); margin-bottom: 22px; }
.blog-back-link:hover { color: var(--c-orange-dark); }
/* --- Artikel: editorial reading layout --------------------------------- */

/* Reading progress. Long-form here runs to 6.500+ words, so the reader needs a
   sense of how much is left before deciding to start. */
.blog-progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 60; background: transparent; pointer-events: none; }
.blog-progress span { display: block; height: 100%; width: 0; background: var(--c-orange); transition: width .1s linear; }

.blog-header { padding: 36px 0 0; }
.blog-eyebrow {
  margin: 0 0 14px; color: var(--c-orange-dark); font-family: var(--font-head);
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.blog-title { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.08; letter-spacing: -.015em; margin: 0 0 20px; max-width: 20ch; text-wrap: balance; }
.blog-lead { font-size: 20px; line-height: 1.6; color: var(--c-ink-soft); margin: 0 0 26px; max-width: 58ch; }
.blog-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--font-head); font-size: 14px; letter-spacing: .04em; color: var(--c-gray-light);
  padding-top: 20px; margin: 0; border-top: 1px solid var(--c-border);
}
.blog-meta-dot { color: var(--c-border-soft); }

.blog-hero-image { margin: 26px 0 0; }
.blog-hero-image img {
  display: block; width: 100%; height: clamp(260px, 42vw, 460px); object-fit: cover;
  border-radius: var(--radius-lg); border: 1px solid var(--c-border);
  box-shadow: 0 30px 60px -34px rgba(22,35,43,.5); background: #E8EAEA;
}

/* The outline sits in the right rail. On the left it indented body, figures and
   captions by its own width while the headline above them stayed at the
   container edge — the page then read as two different left margins. */
.blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 48px; align-items: start; padding: 48px 0 60px; }
.blog-layout > .blog-toc { grid-area: 1 / 2; }
.blog-layout > div { grid-area: 1 / 1; }
/* Short pages have no outline worth showing. */
.blog-layout--no-toc { grid-template-columns: minmax(0, 1fr); padding-top: 28px; }
.blog-article--narrow .container { max-width: 800px; }
.blog-article--narrow .blog-title { max-width: 100%; }

/* Numbered outline that tracks the section you are reading. */
.blog-toc {
  position: sticky; top: 96px; max-height: calc(100vh - 130px);
  overflow-y: auto; overscroll-behavior: contain;
  /* The outline scrolls itself to the section you are reading (see site.js), so
     the reader never drives it by hand — a visible track would only be noise. */
  scrollbar-width: none; -ms-overflow-style: none;
}
.blog-toc::-webkit-scrollbar { width: 0; height: 0; }
.blog-toc-title {
  margin: 0 0 14px; color: var(--c-ink); font-family: var(--font-head);
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  list-style: none; cursor: default;
}
.blog-toc-title::-webkit-details-marker { display: none; }
.blog-toc-count { display: none; }
.blog-toc ol { list-style: none; counter-reset: toc; margin: 0; padding: 0; display: grid; gap: 2px; }
.blog-toc li { counter-increment: toc; }
.blog-toc a {
  position: relative; display: block; padding: 7px 0 7px 30px; border-left: 2px solid var(--c-border);
  color: var(--c-ink-soft); font-size: 14.5px; line-height: 1.4; text-decoration: none;
  transition: color .16s ease, border-color .16s ease;
}
.blog-toc a::before {
  content: counter(toc, decimal-leading-zero); position: absolute; left: 12px; top: 8px;
  font-family: var(--font-head); font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--c-gray);
  transition: color .16s ease;
}
.blog-toc a:hover { color: var(--c-ink); border-left-color: var(--c-gray); }
.blog-toc a.is-current { color: var(--c-ink); font-weight: 600; border-left-color: var(--c-orange); }
.blog-toc a.is-current::before { color: var(--c-orange-dark); }

/* Long-form body: serif at a comfortable measure. The sans face the rest of the
   site uses reads flat past a few hundred words. */
/* Text keeps a readable measure but starts at the column's left edge, so the
   headline above it, the figures next to it and their captions all sit on one
   line. Centring the measure instead parked the text between two wide margins
   while everything around it stayed flush left. Figures, tables and videos
   still break out to the full width. */
.blog-body {
  font-family: var(--font-head);
  display: grid;
  /* `ch` wird an diesem Element gemessen (16px), gesetzt wird der Text in
     17,5px — 74ch landen damit bei rund siebzig Zeichen je Zeile. */
  --measure: 74ch;
  grid-template-columns:
    [wide-start text-start] min(var(--measure), 100%) [text-end]
    minmax(0, 1fr) [wide-end];
}
.blog-body > * { grid-column: text; min-width: 0; }
.blog-body > figure,
.blog-body > img,
.blog-body > iframe,
.blog-body > table,
.blog-body > blockquote { grid-column: wide; }
.blog-body h2 {
  font-family: var(--font-display); font-size: clamp(25px, 2.4vw, 30px); line-height: 1.22;
  letter-spacing: -.01em; margin: 52px 0 14px; scroll-margin-top: 110px; text-wrap: balance;
}
.blog-body h2:first-child { margin-top: 0; }
.blog-body h3 { font-family: var(--font-display); font-size: 20px; margin: 34px 0 10px; scroll-margin-top: 110px; }
.blog-body h4 { font-family: var(--font-display); font-size: 17.5px; margin: 26px 0 8px; }
.blog-body p { font-size: 17.5px; line-height: 1.68; color: var(--c-ink-softer); margin: 0 0 20px; }
.blog-body > p:first-of-type { font-size: 18.5px; line-height: 1.62; color: var(--c-ink); }
.blog-body strong { color: var(--c-ink); font-weight: 600; }
.blog-body a { color: var(--c-ink); text-decoration: underline; text-decoration-color: var(--c-orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.blog-body a:hover { color: var(--c-orange-dark); text-decoration-color: var(--c-orange-dark); }
.blog-body ul, .blog-body ol { margin: 0 0 22px; padding-left: 22px; }
.blog-body li { font-size: 17.5px; line-height: 1.68; color: var(--c-ink-softer); margin-bottom: 8px; }
.blog-body li::marker { color: var(--c-orange); }
.blog-body p.lead { font-size: 19px; color: var(--c-ink-softer); }
.blog-body blockquote {
  font-size: 24px; line-height: 1.45; color: var(--c-ink); margin: 36px 0;
  padding: 4px 0 4px 22px; border-left: 3px solid var(--c-orange);
}
.blog-body table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 17px; }
.blog-body th, .blog-body td { padding: 11px 14px; border-bottom: 1px solid var(--c-border); text-align: left; }
.blog-body th { font-family: var(--font-head); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink); }
.blog-body ul.checklist { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 10px; }
.blog-body ul.checklist li { position: relative; padding-left: 34px; font-size: 17px; line-height: 1.5; color: var(--c-ink-softer); }
.blog-body ul.checklist li::before { content: ''; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--c-input-border); background: #fff; }
.blog-body iframe {
  display: block; width: 100%; aspect-ratio: 16 / 9; height: auto;
  margin: 36px 0; border: 0; border-radius: var(--radius); background: #16232B;
}
.blog-body figure { margin: 36px 0; }
/* Media spans the wider track, but a portrait shot at that width would run well
   over a screen tall — cap the height. Flush left like the text: centred, the
   image sat on a third left edge, next to its own left-aligned caption. Width is
   never forced to 100%, because some imported photos are only 330px wide. */
.blog-body figure img,
.blog-body > img {
  display: block; width: auto; max-width: 100%; max-height: 560px;
  margin-inline: 0; border-radius: var(--radius); border: 1px solid var(--c-border);
}
/* Narrow pages: one column, so heading and text share a left edge. Both line
   names go in a single bracket — two adjacent groups are invalid syntax and get
   the whole declaration thrown away. */
.blog-article--narrow .blog-layout--no-toc .blog-body {
  grid-template-columns: [wide-start text-start] minmax(0, 1fr) [text-end wide-end];
}

/* Der Zusatz --sans stammt aus der Zeit, als der Artikelkörper als einziger
   Bereich in einer Serifenschrift stand. Schrift und Zeilenmaß sind jetzt
   überall gleich; geblieben sind nur die etwas kompakteren Überschriften der
   kurzen Produktseiten. */
.blog-body--sans h2 { font-size: clamp(23px, 2.1vw, 27px); margin: 44px 0 12px; }
.blog-body--sans h3 { font-size: 19px; margin: 32px 0 8px; letter-spacing: -.005em; }
.blog-body--sans h2:first-child,
.blog-body--sans h3:first-child { margin-top: 0; }

.blog-body figcaption {
  margin-top: 10px; font-family: var(--font-head); font-size: 13.5px; line-height: 1.5;
  color: var(--c-gray-light); padding-left: 14px; border-left: 2px solid var(--c-border);
}

/* Wide screens: lift the outline out into the right page margin so the article
   itself gets the full container width — the header is locked to 1240px, so
   widening the container instead would push the text out of line with the nav.
   Below this width the outline stays in the grid, as before. */
@media (min-width: 1700px) {
  .blog-layout:not(.blog-layout--no-toc) { margin-right: -268px; }
  .blog-toc { width: 220px; }
}

@media (max-width: 980px) {
  .blog-layout { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 32px; }
  .blog-layout > .blog-toc, .blog-layout > div { grid-area: auto; }
  .blog-toc {
    position: static; max-height: none; margin-bottom: 36px; padding: 20px 22px;
    background: var(--c-orange-soft); border-radius: var(--radius); overflow: visible;
  }
  .blog-toc a { border-left: 0; padding-left: 26px; }
  .blog-toc a::before { left: 0; }
  .blog-toc a.is-current { border-left: 0; }
  /* Tappable header with a chevron once the outline can be folded away. */
  .blog-toc-title {
    display: flex; align-items: center; gap: 8px; margin: 0; cursor: pointer;
  }
  .blog-toc[open] .blog-toc-title { margin-bottom: 14px; }
  .blog-toc-count {
    display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px;
    padding: 0 6px; border-radius: 999px; background: #fff; color: var(--c-orange-ink);
    font-size: 11px; letter-spacing: 0;
  }
  .blog-toc-title::after {
    content: ''; margin-left: auto; width: 8px; height: 8px;
    border-right: 2px solid var(--c-orange-ink); border-bottom: 2px solid var(--c-orange-ink);
    transform: rotate(45deg) translateY(-2px); transition: transform .2s ease;
  }
  .blog-toc[open] .blog-toc-title::after { transform: rotate(-135deg) translateY(-2px); }
}
.blog-checklist-box { background: var(--c-alt); border: 1px solid var(--c-border); border-radius: 18px; padding: 26px 28px; margin-bottom: 32px; }
.blog-checklist-box h3 { font-size: 21px; margin-bottom: 14px; }
.blog-mid-cta { background: var(--c-ink); color: #fff; border-radius: 18px; padding: 28px; display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin-bottom: 36px; }
.blog-mid-cta > div:first-child { flex: 1; min-width: 240px; }
.blog-mid-cta h3 { color: #fff; font-size: 22px; margin-bottom: 8px; }
.blog-mid-cta p { font-size: 16px; line-height: 1.6; color: #B4BCC0; margin: 0; }
.blog-mid-cta .btn-primary { flex: 0 0 270px; }
.blog-author-box { display: flex; gap: 18px; align-items: center; padding: 22px; background: #fff; border: 1px solid var(--c-border); border-radius: 18px; }
.blog-author-avatar { width: 60px; height: 60px; border-radius: 50%; background: #E8EAEA; flex: none; }
.related-articles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.related-article-card { background: var(--c-paper); border: 1px solid var(--c-border-soft); border-radius: 18px; overflow: hidden; }
.related-article-card:hover { border-color: var(--c-orange); }
.related-article-image { height: 130px; background-size: cover; background-position: center; background-color: #E8EAEA; }
.related-article-body { padding: 18px; }
.related-article-body .name { display: block; font-size: 18px; font-weight: 700; color: var(--c-ink); margin-bottom: 6px; }
.related-article-body .desc { display: block; font-size: 15px; line-height: 1.5; color: var(--c-ink-soft); }

/* Cookie banner */
.cookie-banner-innsan[hidden], .cookie-modal-overlay[hidden] { display: none !important; }
.cookie-banner-innsan { position: fixed; inset: 0; z-index: 80; background: rgba(22,35,43,.62); display: flex; align-items: center; justify-content: center; padding: 24px; }
.cookie-banner-inner { width: min(100%, 720px); background: var(--c-paper); border: 2px solid var(--c-orange); border-radius: 22px; box-shadow: 0 24px 70px rgba(22,35,43,.32); padding: 28px; }
.cookie-banner-inner p { font-size: 16px; line-height: 1.55; color: var(--c-ink-soft); margin: 6px 0 0; max-width: 68ch; }
.cookie-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: flex-end; margin-top: 24px; }
.cookie-link-btn { background: transparent; border: 0; color: var(--c-petrol); font-size: 16px; font-weight: 700; cursor: pointer; text-decoration: underline; font-family: inherit; }
.cookie-modal-overlay { position: fixed; inset: 0; z-index: 85; background: rgba(22,35,43,.62); display: flex; align-items: center; justify-content: center; padding: 24px; overflow-y: auto; }
.cookie-modal { background: var(--c-paper); border-radius: 22px; border: 1px solid var(--c-border-soft); width: 100%; max-width: 680px; max-height: calc(100vh - 48px); overflow-y: auto; padding: 30px; }
.consent-row { background: #fff; border: 1px solid var(--c-border); border-radius: 14px; padding: 16px 18px; display: grid; grid-template-columns: 1fr 56px; gap: 16px; align-items: center; margin-bottom: 10px; }
.consent-row .note { font-family: var(--font-head); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-gray-light); font-weight: 400; }
.consent-toggle { justify-self: end; width: 52px; height: 30px; border-radius: 999px; border: 0; background: var(--c-input-border); position: relative; cursor: pointer; padding: 0; }
.consent-toggle .knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: left .15s ease; }
.consent-toggle.is-on { background: var(--c-orange); }
.consent-toggle.is-locked { background: #C9CFCF; cursor: default; }
.consent-toggle.is-on .knob { left: 25px; }

/* Mobile */
@media (max-width: 900px) {
  .topbar { display: none; }
  .header-inner { gap: 16px; padding: 8px 16px; }
  .logo-img { height: 42px; }
  .hero-grid { min-height: 440px; }
  .detail-hero-inner { min-height: 440px; }
  .innsan-intro-grid { grid-template-columns: 1fr; }
  .hero::after { background: linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.82) 58%, rgba(255,255,255,.18) 100%); }
  .detail-hero::after { background: rgba(255,255,255,.88); }
  .desktop-lead-cta { display: none; }
  .reviews-grid { grid-template-columns: 1fr; }
  .reviews-grid--all { grid-template-columns: 1fr; }
  .hero-grid, .detail-hero-inner, .leistung-card, .detail-block { grid-template-columns: 1fr; }
  .additional-solutions-grid { grid-template-columns: 1fr; }
  .canonical-service-section { grid-template-columns: 1fr; }
  /* On phones every service block follows the same readable image-then-copy order. */
  .canonical-service-section--reverse > img { order: -1; }
  .canonical-service-section > img { min-height: 280px; max-height: 460px; }
  .canonical-service-section--reverse > .canonical-ba-slider { order: -1; }
  .canonical-service-section > .canonical-ba-slider { min-height: 280px; max-height: 460px; }
  .service-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .additional-solution-card { grid-template-columns: 120px minmax(0, 1fr); }
  .canonical-service-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leistung-card-image { order: -1; min-height: 220px; }
  .detail-block { gap: 28px; }
  .detail-block-media, .detail-block--reversed .detail-block-media { order: 0; aspect-ratio: 4 / 3; }
  .detail-block-media img { aspect-ratio: 4 / 3; }
  .detail-block-media::before, .detail-block--reversed .detail-block-media::before { inset: 16px 10px -10px; }
  .detail-block-copy { padding: 0; }
  .detail-block h2, .detail-block p { max-width: none; }
  .hero-content { padding: 32px 20px; max-width: none; }
  .hero-content h1 { font-size: 42px; line-height: 1.03; letter-spacing: -.025em; }
  .hero-sub { max-width: 34ch; margin: 14px 0 22px; font-size: 17px; line-height: 1.45; }
  .holasek-hero-grid { min-height: 420px; padding: 38px 20px; }
  .holasek-hero-map { width: 100%; }
  .holasek-hero-map iframe { height: 260px; }
  .holasek-hero-title { font-size: 38px; }
  .process-grid, .faq-grid, .contact-grid, .detail-below-grid, .canonical-service-closeout { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .stats-grid, .detail-facts-grid { grid-template-columns: 1fr 1fr; }
  .blog-layout { grid-template-columns: 1fr; }
  .blog-index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-toc { position: static; border-left: 0; padding-left: 0; }
  .main-nav { display: none; }
  .nav-toggle { display: flex; flex-direction: column; gap: 4px; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1.5px solid var(--c-input-border); border-radius: 10px; background: #fff; margin-left: auto; }
  .nav-toggle span { width: 20px; height: 2px; background: var(--c-ink); display: block; }
  .header-actions .btn, .header-actions .header-call { display: none; }
  .form-row { grid-template-columns: 1fr; }
  /* Die feste Leiste am unteren Rand wirkte wie ein aufgeklebter Balken; auf
     Mobil bleibt es beim schwebenden Knopf, der sich über Formularen und der
     Fußzeile ohnehin zurückzieht. */
  /* Der Bau-Credit ist jetzt das letzte Element der Zeile — er bleibt stehen und
     rutscht auf eine eigene Zeile, statt ausgeblendet zu werden. */
  .footer-credit { margin-left: 0; }
}

@media (max-width: 640px) {
  .service-gallery-grid { gap: 12px; }
  .advantages-box, .service-gallery { margin-bottom: 48px; }
  .footer-top, .stats-grid, .detail-facts-grid, .photo-strip { grid-template-columns: 1fr; }
  .section { padding: 48px 0; }
  .home-contact-cta-inner { display: grid; align-items: start; }
  .home-contact-cta .btn { width: 100%; }
  .services-all-link { text-align: left; }
  .section-title, .blog-title { font-size: 28px; }
  .locations-hero { padding: 26px 0 22px; }
  .locations-hero h1 { font-size: 36px; }
  .locations-directory { padding: 30px 0 48px; }
  .leistungen-hero-title { font-size: 34px; white-space: normal; }
  .reviews-heading { display: grid; align-items: start; margin-bottom: 28px; }
  .reviews-page-hero { padding: 38px 0 44px; }
  .reviews-page-hero h1 { font-size: 34px; }
  .review-card { min-height: 0; padding: 24px; }
  .blog-index-grid { grid-template-columns: 1fr; }
  .blog-hero-image { height: 220px; border-radius: 16px; }
  .cookie-banner-innsan, .cookie-modal-overlay { padding: 14px; }
  .lead-popup-scroll { padding: 54px 18px 24px; }
  .form-checkboxes { grid-template-columns: 1fr; }
  .cookie-banner-inner, .cookie-modal { padding: 22px 18px; border-radius: 18px; }
  .cookie-actions { display: grid; grid-template-columns: 1fr; }
  .cookie-actions .btn, .cookie-actions .cookie-link-btn { width: 100%; min-height: 48px; }
  .hero-actions .btn, .process-intro .btn, .blog-mid-cta .btn, .blog-mid-cta .btn-primary { flex: 1 1 100%; width: 100%; max-width: none; }
  .hero-whatsapp { flex: 0 0 auto; width: 100%; border-radius: var(--radius); gap: 10px; }
  .hero-whatsapp::after { content: 'Per WhatsApp anfragen'; font-size: 16px; font-weight: 700; }
}

.mobile-menu { display: none; }
.mobile-menu.is-open {
  display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 55; background: var(--c-paper); padding: 16px 20px 24px; overflow-y: auto;
}
.mobile-menu-head { display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding-bottom: 14px; border-bottom: 1px solid var(--c-border); }
.mobile-menu-head .logo-img { height: 42px; }
.mobile-menu-close { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--c-input-border); border-radius: 50%; background: #fff; color: var(--c-ink); font-size: 31px; line-height: 1; cursor: pointer; }
.mobile-menu .main-nav { display: grid; gap: 0; margin: 20px 0; }
.mobile-menu .nav-link, .mobile-nav-group summary { min-height: 58px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--c-border); color: var(--c-ink); font-size: 19px; font-weight: 700; }
.innsan-page .mobile-menu a, .innsan-page .mobile-menu a:hover { text-decoration: none; }
.mobile-nav-group summary { list-style: none; cursor: pointer; }
.mobile-nav-group summary::-webkit-details-marker { display: none; }
.mobile-nav-group summary span { color: var(--c-orange-dark); font-size: 27px; font-weight: 400; transition: transform .18s ease; }
.mobile-nav-group[open] summary span { transform: rotate(45deg); }
.mobile-menu .mobile-submenu { gap: 0; margin: 0 0 8px; padding: 5px 0 12px 18px; border-left: 2px solid var(--c-orange); }
.mobile-menu .mobile-submenu-link { padding: 8px 0; color: var(--c-ink-soft); font-size: 16px; }
.mobile-menu .mobile-submenu-link--all { color: var(--c-orange-dark); font-weight: 700; }
.mobile-menu-actions { margin-top: auto; display: grid; gap: 10px; padding-top: 18px; }
.mobile-menu-actions .btn { width: 100%; }
.mobile-menu-phone { min-height: 48px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 0; color: var(--c-petrol); font-weight: 700; }
@media (max-width: 1040px) {
  .locations-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .locations-hero-inner { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 760px) {
  .locations-map { height: 400px; border-radius: 18px; }
  .locations-map--single { height: 300px; }
  .location-hero-actions .btn { flex: 1 1 100%; width: 100%; }
  .location-detail-layout { grid-template-columns: 1fr; gap: 24px; padding-top: 34px; padding-bottom: 34px; }
  .location-detail-photo, .location-detail-photo img { min-height: 300px; }
  .location-detail-photo:not(.location-detail-photo--gallery) img { height: 380px; }
  .location-detail-photo--gallery { min-height: 0; padding: 20px; }
  .location-map-card--fill .locations-map { min-height: 320px; }
  .location-detail-card { padding: 26px 22px; }
  .location-showroom-heading { display: block; }
  .location-showroom-heading h2 { margin-top: 6px; }
  .location-showroom-gallery { grid-template-columns: 1fr; }
  .location-showroom-gallery a:first-child { grid-column: auto; }
  .location-showroom-gallery img, .location-showroom-gallery a:first-child img { height: 220px; }
  .location-map-section { padding-bottom: 34px; }
  .location-others { padding: 40px 0 52px; }
}
@media (max-width: 640px) {
  .locations-grid { grid-template-columns: 1fr; }
  .locations-map:not(.locations-map--single) .innsan-flag-label { display: none; }
}

/* --- Startseite: Leistungs-Checkliste, "Darum InnSAN", Blog-Teaser -------- */
.home-checklist-grid, .home-why-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center;
}
.home-checklist-media img, .home-why-media img {
  display: block; width: 100%; height: 100%; max-height: 520px; object-fit: cover;
  border-radius: var(--radius-lg); border: 1px solid var(--c-border);
  box-shadow: 0 26px 54px -34px rgba(22,35,43,.5);
}
.home-checklist-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.home-checklist-list li { position: relative; padding: 9px 0 9px 34px; border-bottom: 1px solid var(--c-border); }
.home-checklist-list li:last-child { border-bottom: 0; }
.home-checklist-list li::before {
  content: ''; position: absolute; left: 4px; top: 15px; width: 11px; height: 6px;
  border-left: 2.5px solid var(--c-orange); border-bottom: 2.5px solid var(--c-orange);
  transform: rotate(-45deg);
}
.home-checklist-list a { color: var(--c-ink); font-size: 17px; line-height: 1.45; text-decoration: none; }
.home-checklist-list a:hover { color: var(--c-orange-dark); text-decoration: underline; text-underline-offset: 3px; }

.home-why-grid p { font-size: 17.5px; line-height: 1.7; color: var(--c-ink-softer); margin: 0 0 16px; }
.home-why-highlight {
  padding: 16px 20px; background: var(--c-orange-soft); border-radius: var(--radius);
  color: var(--c-orange-ink) !important; font-weight: 600;
}

.home-blog-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.home-blog-head .section-title, .home-blog-head .section-lead { margin-bottom: 8px; }
.home-blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.home-blog-grid .blog-index-card h3 { margin: 0 0 12px; color: var(--c-ink); font-size: 21px; line-height: 1.22; }

@media (max-width: 900px) {
  .home-checklist-grid, .home-why-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  /* Photo first on phones — the image sets the scene before the argument. */
  .home-why-media { order: -1; }
  .home-blog-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Vorher/Nachher: Beispiel-Umschalter mit Beschriftung */
/* One per row: the labels are the point of the switcher, and two columns
   squeezed them to two words per line. */
.ba-example-switch { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 22px; }
.ba-example-thumb {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 7px 14px 7px 7px; text-align: left;
  background: #fff; border: 1px solid var(--c-border); border-radius: 12px; cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.ba-example-thumb img { width: 48px; height: 48px; flex: none; object-fit: cover; border-radius: 8px; display: block; }
.ba-example-thumb span {
  font-family: var(--font-head); font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--c-ink-soft);
}
.ba-example-thumb:hover { border-color: var(--c-gray); }
.ba-example-thumb.is-active { border-color: var(--c-orange); background: var(--c-orange-soft); box-shadow: 0 0 0 3px rgba(219,115,3,.12); }
.ba-example-thumb.is-active span { color: var(--c-ink); }
.ba-example-label {
  margin: 0 0 14px; font-family: var(--font-head); font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-orange-dark);
}
.ba-copy .reasons-list p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--c-ink-softer); }

/* --- Umbau nach Ihrem Bedürfnis ---------------------------------------- */
.umbau-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-auto-rows: 1fr; gap: 18px;
}
.umbau-card {
  display: flex; flex-direction: column; gap: 10px; padding: 24px 26px;
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-lg); color: var(--c-ink);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.innsan-page a.umbau-card { text-decoration: none; color: var(--c-ink); }
.umbau-card:hover { border-color: rgba(219,115,3,.7); box-shadow: 0 20px 44px -30px rgba(22,35,43,.6); transform: translateY(-3px); }
.umbau-card-title { font-family: var(--font-display); font-size: 20px; font-weight: 700; line-height: 1.25; }
.umbau-card-text { font-size: 15.5px; line-height: 1.55; color: var(--c-ink-soft); }
.umbau-card-link { margin-top: auto; padding-top: 6px; color: var(--c-orange-dark); font-size: 15px; font-weight: 700; }
@media (max-width: 900px) {
  /* In einer Spalte darf jede Karte wieder genau so hoch wie ihr Inhalt sein. */
  .umbau-grid { grid-auto-rows: auto; }
}

/* --- Standort-Landingpages --------------------------------------------- */
.standort-hero { padding: 30px 0 8px; }
.standort-hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: 48px; align-items: start; }
.standort-hero h1 { font-size: clamp(32px, 4vw, 48px); line-height: 1.08; letter-spacing: -.015em; margin: 0 0 16px; text-wrap: balance; }
/* No serif here: the rest of this page — facts, cards, form — is set in the
   base face, and the Vienna hero it is measured against uses it too. The serif
   belongs to the editorial pages. */
.standort-hero-lead { font-size: 19px; line-height: 1.6; color: var(--c-ink-soft); margin: 0 0 24px; max-width: 54ch; }
.standort-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.standort-hero-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.standort-hero-facts li { position: relative; padding-left: 28px; font-size: 16.5px; line-height: 1.5; color: var(--c-ink-softer); }
.standort-hero-facts li::before {
  content: ''; position: absolute; left: 2px; top: 8px; width: 10px; height: 6px;
  border-left: 2.5px solid var(--c-orange); border-bottom: 2.5px solid var(--c-orange); transform: rotate(-45deg);
}
.standort-hero-facts strong { color: var(--c-ink); font-weight: 700; }

.standort-card { padding: 26px 28px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-lg); box-shadow: 0 22px 48px -34px rgba(22,35,43,.55); }
.standort-card-title { margin: 0 0 16px; font-family: var(--font-head); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-orange-dark); }
.standort-card address { font-style: normal; font-size: 16.5px; line-height: 1.6; color: var(--c-ink-softer); margin-bottom: 18px; }
.standort-card-row { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--c-border); font-size: 15.5px; }
.standort-card-row span:first-child { color: var(--c-gray-light); }
.standort-card-hours { display: grid; gap: 3px; margin: 14px 0 18px; font-size: 15.5px; color: var(--c-ink-softer); }
.standort-card-hours > span:first-child { color: var(--c-gray-light); margin-bottom: 4px; }
.standort-card-hour { color: var(--c-ink-softer); }

/* Reasons to choose the branch — the same four promises the Vienna page makes,
   which are true for every branch. */
.standort-reasons { background: #F6F4F0; padding: 72px 0; }
.standort-reasons-heading { max-width: 660px; margin: 0 auto 40px; text-align: center; }
.standort-reasons-heading h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.16; margin: 0; }
.standort-reasons-heading p { margin: 16px 0 0; font-size: 18px; line-height: 1.65; color: var(--c-ink-soft); }
.standort-reasons-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.standort-reason-card { padding: 28px 26px; background: #fff; border-radius: 20px; box-shadow: 0 16px 36px -20px rgba(17,27,51,.18); }
.standort-reason-card > span { display: block; margin-bottom: 26px; font-family: var(--font-head); font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--c-orange-dark); }
.standort-reason-card h3 { font-size: 20px; margin: 0 0 10px; }
.standort-reason-card p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--c-ink-soft); }

/* Local copy: full width with the outline and the call box in the right rail.
   Centred on its own it sat in the middle of the page while every heading
   around it started at the container edge. */
.standort-copy-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 48px; align-items: start; }
.standort-copy { max-width: none; margin: 0; }
.standort-aside { position: sticky; top: 96px; display: grid; gap: 18px; }
.standort-aside .blog-toc { position: static; max-height: none; }
/* The rail is narrower than the sidebar this box was sized for — at 24px the
   number broke across two lines mid-block. */
.standort-aside .call-box { padding: 22px; }
.standort-aside .call-box-number { font-size: 20px; }

.standort-compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.standort-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin: 0; overflow: hidden; border-radius: 20px; background: var(--c-border); }
.standort-compare > div { position: relative; min-width: 0; }
.standort-compare img { display: block; width: 100%; height: 300px; object-fit: cover; }
.standort-compare span { position: absolute; top: 14px; left: 14px; padding: 6px 10px; border-radius: 999px; background: rgba(17,27,51,.88); color: #fff; font-size: 13px; font-weight: 700; }
.standort-compare > div:last-child span { background: var(--c-orange); }

/* The form is the wider half: the column beside it carries the reasons and the
   branch's contact details, so neither side runs out of content halfway down. */
.standort-form-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(420px, 1.18fr); gap: 44px; align-items: start; }
.standort-form-aside { position: sticky; top: 100px; }
.standort-form-card { padding: 30px 32px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-lg); box-shadow: 0 22px 48px -34px rgba(22,35,43,.5); }
/* The partial ships its own card. Nested in this one it drew a second border
   and a second 32px of padding around the fields. */
.standort-form-card .form-card { padding: 0; border: 0; background: transparent; border-radius: 0; }
.standort-form-card .form-card h2 { font-size: 25px; }
.standort-form-card .form-card > p { font-size: 17px; margin-bottom: 22px; }

.standort-contact-rows { display: grid; gap: 14px; margin-top: 28px; }
.standort-contact-row { display: flex; gap: 18px; align-items: center; padding: 18px 20px; background: #fff; border: 1px solid var(--c-border); border-radius: 18px; }
.standort-contact-row-icon { flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--c-petrol); color: #fff; display: flex; align-items: center; justify-content: center; }
.standort-contact-row-icon svg { display: block; width: 24px; height: 24px; }
.standort-contact-row h3 { font-size: 17px; margin: 0 0 4px; }
.standort-contact-row a, .standort-contact-row p { display: block; margin: 0; font-size: 16px; line-height: 1.5; color: var(--c-ink-soft); overflow-wrap: anywhere; }

.standort-map { width: 100%; height: 420px; border: 1px solid var(--c-border); border-radius: var(--radius-lg); }

.standort-cta { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 44px; padding: 48px 52px; background: var(--c-petrol); color: #fff; border-radius: 24px; }
.standort-cta h2 { margin: 0 0 10px; color: #fff; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.16; }
.standort-cta > div > p { margin: 0; color: #D1D8E3; font-size: 17px; line-height: 1.6; }
.standort-cta-links { display: grid; gap: 14px; min-width: 0; }
.standort-cta-links a { color: #fff; overflow-wrap: anywhere; }
.standort-cta-links a:first-child { font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; }
.standort-cta-links p { margin: 0; color: #D1D8E3; font-size: 15.5px; line-height: 1.55; }

@media (max-width: 1080px) {
  .standort-reasons-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .standort-copy-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .standort-aside { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .standort-hero-grid, .standort-form-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .standort-form-aside { position: static; }
  .standort-map { height: 300px; }
  .standort-compare-grid { grid-template-columns: minmax(0, 1fr); }
  .standort-cta { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 32px 26px; }
}

@media (max-width: 640px) {
  .standort-reasons { padding: 52px 0; }
  .standort-reasons-grid, .standort-aside { grid-template-columns: minmax(0, 1fr); }
  .standort-form-card { padding: 22px 20px; }
  .standort-compare img { height: 210px; }
}