/* ==========================================================================
   S&M Bauwerk – sm-bauwerk.de
   Stylesheet  ·  handgeschrieben, keine Frameworks
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Schriften (selbst gehostet – DSGVO-konform, keine Google-Verbindung)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. Design-Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Markenfarben – abgeleitet aus dem Logo */
  --navy-900: #08182F;
  --navy-800: #0C2244;
  --navy-700: #123055;
  --navy-600: #1A4270;
  --navy-100: #E7EDF5;

  /* Akzentfarbe: tiefes Bernstein-Orange, abgeleitet aus dem Pinselstrich
     im Logo. Kontraststark genug für weiße Schrift auf Fläche (AA). */
  --accent:      #C2410C;
  --accent-dark: #9A3412;

  /* Originalfarben des Logos – ausschließlich für den Farbverlauf */
  --logo-red:    #D32118;
  --logo-orange: #EE7A1E;
  --logo-blue:   #1A6FBF;
  --logo-green:  #4A9E23;

  --orange:   #E8873A;
  --blue:     #1A6FBF;
  --green:    #4A9E23;

  /* Neutrale Töne */
  --ink:      #14202E;
  --ink-soft: #5A6675;
  --line:     #E2E7EE;
  --line-2:   #CFD7E2;
  --surface:  #FFFFFF;
  --surface-2:#F5F7FA;
  --surface-3:#EDF1F6;

  /* Typografie */
  --font-display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Maße */
  --wrap: 1200px;
  --wrap-narrow: 820px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --radius: 4px;
  --radius-lg: 8px;

  /* Schatten */
  --shadow-sm: 0 1px 2px rgba(8, 24, 47, .06), 0 2px 6px rgba(8, 24, 47, .05);
  --shadow-md: 0 4px 12px rgba(8, 24, 47, .07), 0 12px 28px rgba(8, 24, 47, .07);
  --shadow-lg: 0 8px 24px rgba(8, 24, 47, .10), 0 28px 60px rgba(8, 24, 47, .12);

  /* Höhen */
  --header-h: 84px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* Farbverlauf aus dem Logo (Pinselstrich) – als Akzentlinie */
.accent-bar,
.section-head::before,
.footer::before,
.header::after {
  background: linear-gradient(90deg,
    var(--logo-red) 0%, var(--logo-orange) 26%, var(--logo-blue) 55%, var(--logo-green) 82%, #9AA5B1 100%);
}

/* --------------------------------------------------------------------------
   3. Reset & Basis
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* Deutsche Wörter werden an der Silbe getrennt, nie mitten im Wort.
     "break-word" hätte aus "Handwerksbetrieb" ein "Handwerksbetrie-b" gemacht. */
  overflow-wrap: normal;
  word-break: normal;
  hyphens: auto;
  -webkit-hyphens: auto;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

a { color: var(--navy-600); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--navy-900);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.25rem, 1.35rem + 3.6vw, 4rem); font-weight: 800; }
h2 { font-size: clamp(1.75rem, 1.2rem + 2.1vw, 2.75rem); font-weight: 800; }
h3 { font-size: clamp(1.125rem, 1rem + .55vw, 1.375rem); font-weight: 700; letter-spacing: -0.01em; }
h4 { font-size: 1.0625rem; font-weight: 700; letter-spacing: 0; }
p  { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.15em; padding-left: 1.3em; }
li { margin-bottom: .4em; }

strong { font-weight: 650; color: var(--navy-800); }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

::selection { background: var(--navy-800); color: #fff; }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -110%);
  z-index: 999;
  background: var(--navy-900);
  color: #fff;
  padding: .8rem 1.5rem;
  font-weight: 600;
  border-radius: 0 0 var(--radius) var(--radius);
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); color: #fff; }

/* --------------------------------------------------------------------------
   4. Layout-Helfer
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: clamp(3.5rem, 2rem + 6vw, 7rem); }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.section--alt { background: var(--surface-2); }
.section--dark { background: var(--navy-900); color: #C7D3E2; }
.section--dark h2, .section--dark h3 { color: #fff; }

.section-head { max-width: 720px; margin-bottom: clamp(2rem, 1.2rem + 2.5vw, 3.25rem); }
.section-head::before {
  content: '';
  display: block;
  width: 68px; height: 5px;
  border-radius: 3px;
  margin-bottom: 1.4rem;
}
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center::before { margin-inline: auto; }
.section-head p {
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  color: var(--ink-soft);
  margin-bottom: 0;
}
.section--dark .section-head p { color: #A8B8CC; }

.eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .85rem;
}
.section--dark .eyebrow { color: var(--orange); }

.lead {
  font-size: clamp(1.0625rem, 1rem + .45vw, 1.25rem);
  line-height: 1.65;
  color: var(--ink-soft);
}

.grid { display: grid; gap: clamp(1.25rem, .8rem + 1.4vw, 2rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: #fff;
  --btn-bd: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95rem 1.6rem;
  font-family: var(--font-display);
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid var(--btn-bd);
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  transition: transform .18s var(--ease), background-color .18s var(--ease),
              border-color .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
  box-shadow: 0 1px 2px rgba(8,24,47,.14);
}
.btn:hover {
  --btn-bg: var(--accent-dark);
  --btn-bd: var(--accent-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(154, 52, 18, .30);
}
.btn:active { transform: translateY(0); }

.btn--navy { --btn-bg: var(--navy-800); --btn-bd: var(--navy-800); }
.btn--navy:hover { --btn-bg: var(--navy-900); --btn-bd: var(--navy-900); box-shadow: 0 6px 18px rgba(8,24,47,.28); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--navy-800);
  --btn-bd: var(--line-2);
  box-shadow: none;
}
.btn--ghost:hover { --btn-bg: var(--navy-800); --btn-bd: var(--navy-800); --btn-fg: #fff; box-shadow: 0 6px 18px rgba(8,24,47,.2); }

.btn--light {
  --btn-bg: #fff;
  --btn-fg: var(--navy-900);
  --btn-bd: #fff;
}
.btn--light:hover { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: #fff; box-shadow: none; }

.btn--outline-light {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-bd: rgba(255,255,255,.45);
  box-shadow: none;
}
.btn--outline-light:hover { --btn-bg: #fff; --btn-fg: var(--navy-900); --btn-bd: #fff; }

.btn--lg { padding: 1.1rem 2rem; font-size: 1rem; }
.btn--block { width: 100%; }

.btn svg { flex: none; width: 18px; height: 18px; }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; }

/* Textlink mit Pfeil */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .9375rem;
  color: var(--navy-800);
  text-decoration: none;
}
.arrow-link svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.arrow-link:hover { color: var(--accent); }
.arrow-link:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   6. Topbar + Header
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--navy-900);
  color: #9DB0C7;
  font-size: .8125rem;
  line-height: 1;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 40px;
  padding-block: .6rem;
}
.topbar__list { display: flex; align-items: center; gap: 1.5rem; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
.topbar__list li { margin: 0; display: inline-flex; align-items: center; gap: .45rem; }
.topbar a { color: #D6E1EE; text-decoration: none; font-weight: 500; }
.topbar a:hover { color: #fff; text-decoration: underline; }
.topbar svg { width: 15px; height: 15px; flex: none; color: var(--orange); }
@media (max-width: 860px) { .topbar { display: none; } }

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 3px;
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.header.is-stuck { box-shadow: 0 6px 24px rgba(8,24,47,.09); }
.header.is-stuck::after { opacity: 1; }

.header__inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  text-decoration: none;
  margin-right: auto;
  flex: none;
}
.brand img { width: auto; height: 56px; }
.brand__text { display: none; }
@media (min-width: 420px) {
  .brand__text { display: block; line-height: 1.1; }
  .brand__name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.0625rem;
    letter-spacing: -.01em;
    color: var(--navy-900);
    white-space: nowrap;
  }
  .brand__tag {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ink-soft);
    white-space: nowrap;
  }
}

.nav { display: flex; align-items: center; gap: .25rem; }
.nav a:not(.btn) {
  position: relative;
  display: block;
  padding: .6rem .85rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .9375rem;
  color: var(--navy-800);
  text-decoration: none;
  border-radius: var(--radius);
  transition: color .18s var(--ease), background-color .18s var(--ease);
}
.nav a:not(.btn)::after {
  content: '';
  position: absolute;
  left: .85rem; right: .85rem; bottom: .3rem;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s var(--ease);
}
.nav a:not(.btn):hover { color: var(--accent); }
.nav a:not(.btn):hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--accent); }

.header__cta { display: inline-flex; align-items: center; gap: .75rem; flex: none; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--navy-900);
}
.nav-toggle:hover { background: var(--surface-2); }
.nav-toggle__bars { position: relative; width: 20px; height: 14px; }
.nav-toggle__bars span {
  position: absolute; left: 0;
  width: 100%; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .25s var(--ease), opacity .18s var(--ease), top .25s var(--ease);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 6px; }
.nav-toggle__bars span:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

@media (max-width: 1020px) {
  :root { --header-h: 72px; }
  .brand img { height: 46px; }
  .nav-toggle { display: inline-flex; }
  .header__cta .btn { display: none; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 0 auto;
    width: min(360px, 88vw);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1.25rem var(--gutter) 2rem;
    background: #fff;
    border-left: 1px solid var(--line);
    box-shadow: -18px 0 44px rgba(8,24,47,.14);
    transform: translateX(105%);
    transition: transform .32s var(--ease);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav.is-open { transform: translateX(0); }
  .nav a:not(.btn) {
    padding: .95rem .25rem;
    font-size: 1.0625rem;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
  }
  .nav a:not(.btn)::after { display: none; }
  .nav a[aria-current="page"] { color: var(--accent); }
  .nav__mobile-cta { display: grid; gap: .7rem; margin-top: 1.6rem; }
}
@media (min-width: 1021px) { .nav__mobile-cta { display: none; } }

.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8,24,47,.42);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s var(--ease);
  z-index: 99;
}
.nav-backdrop.is-visible { opacity: 1; visibility: visible; }
body.nav-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(520px, 72vh, 760px);
  padding-block: clamp(3.5rem, 2rem + 8vw, 7rem);
  background: var(--navy-900);
  overflow: hidden;
  isolation: isolate;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(6,18,35,.94) 0%, rgba(8,24,47,.86) 38%, rgba(8,24,47,.55) 68%, rgba(8,24,47,.35) 100%),
    linear-gradient(0deg, rgba(6,18,35,.55) 0%, rgba(6,18,35,0) 45%);
}
.hero__inner { position: relative; max-width: 720px; }
.hero h1 { color: #fff; margin-bottom: .5em; }
.hero h1 em {
  font-style: normal;
  position: relative;
  white-space: nowrap;
}
.hero h1 em::after {
  content: '';
  position: absolute;
  left: -.04em; right: -.04em; bottom: .04em;
  height: .16em;
  background: var(--accent);
  z-index: -1;
  border-radius: 2px;
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem .95rem .45rem .5rem;
  margin-bottom: 1.5rem;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 100px;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: #E4ECF6;
  backdrop-filter: blur(6px);
}
.hero__eyebrow b {
  display: inline-flex;
  align-items: center;
  padding: .2rem .55rem;
  background: var(--accent);
  border-radius: 100px;
  font-family: var(--font-display);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
}
.hero__text {
  font-size: clamp(1.0625rem, 1rem + .45vw, 1.25rem);
  line-height: 1.65;
  color: #C3D2E4;
  max-width: 56ch;
  margin-bottom: 2rem;
}
.hero .btn-row { margin-bottom: 2.75rem; }

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255,255,255,.15);
  list-style: none;
  margin: 0;
  padding-left: 0;
}
.hero__facts li {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0;
  font-size: .9375rem;
  font-weight: 500;
  color: #D3DEEC;
}
.hero__facts svg { width: 18px; height: 18px; flex: none; color: var(--green); }

/* Kompakter Seitenkopf für Unterseiten */
.pagehead {
  position: relative;
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
  background: var(--navy-900);
  color: #B9C8DA;
  overflow: hidden;
  isolation: isolate;
}
.pagehead::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(26,111,191,.30), transparent 62%),
    radial-gradient(700px 380px at 88% 110%, rgba(211,33,24,.22), transparent 62%);
}
.pagehead h1 { color: #fff; margin-bottom: .35em; }
.pagehead p { max-width: 62ch; font-size: clamp(1rem, .95rem + .35vw, 1.1875rem); color: #B9C8DA; margin-bottom: 0; }
.pagehead .eyebrow { color: var(--orange); }

.breadcrumb {
  margin-top: 1.75rem;
  font-size: .8125rem;
  color: #8FA3BC;
}
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.breadcrumb li { margin: 0; display: inline-flex; align-items: center; gap: .5rem; }
.breadcrumb li + li::before { content: '›'; color: #62789A; }
.breadcrumb a { color: #B9C8DA; text-decoration: none; }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }
.breadcrumb [aria-current] { color: #fff; font-weight: 600; }

/* --------------------------------------------------------------------------
   8. USP-Leiste
   -------------------------------------------------------------------------- */
.usps {
  position: relative;
  margin-top: -1px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.usps__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.usp {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem) clamp(1.25rem, .8rem + 1.5vw, 2rem);
  border-right: 1px solid var(--line);
}
.usp:last-child { border-right: 0; }
@media (max-width: 760px) {
  .usp { border-right: 0; border-bottom: 1px solid var(--line); }
  .usp:last-child { border-bottom: 0; }
}
.usp__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: var(--radius);
  background: var(--navy-100);
  color: var(--navy-700);
}
.usp__icon svg { width: 23px; height: 23px; }
.usp h3 { font-size: 1.0625rem; margin-bottom: .25em; }
.usp p { font-size: .9375rem; line-height: 1.6; color: var(--ink-soft); margin: 0; }

/* --------------------------------------------------------------------------
   9. Leistungs-Karten
   -------------------------------------------------------------------------- */
.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.svc-card:hover {
  transform: translateY(-5px);
  border-color: transparent;
  box-shadow: var(--shadow-lg);
  color: inherit;
}
.svc-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface-3);
}
.svc-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.svc-card:hover .svc-card__media img { transform: scale(1.06); }
.svc-card__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,24,47,0) 45%, rgba(8,24,47,.55) 100%);
}
.svc-card__badge {
  position: absolute;
  left: 1rem; top: 1rem;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: var(--radius);
  background: #fff;
  color: var(--navy-800);
  box-shadow: var(--shadow-sm);
}
.svc-card__badge svg { width: 21px; height: 21px; }
.svc-card__body { padding: 1.5rem 1.5rem 1.65rem; display: flex; flex-direction: column; flex: 1; }
.svc-card__body h3 { margin-bottom: .5em; }
.svc-card__body p { font-size: .9375rem; line-height: 1.65; color: var(--ink-soft); margin-bottom: 1.25rem; }
.svc-card__body .arrow-link { margin-top: auto; }

/* Kompakte Karte ohne Bild */
.mini-card {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.mini-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: transparent; }
.mini-card__icon {
  flex: none;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--radius);
  background: var(--navy-900);
  color: #fff;
}
.mini-card__icon svg { width: 21px; height: 21px; }
.mini-card h3 { font-size: 1.0625rem; margin-bottom: .3em; }
.mini-card p { font-size: .9375rem; line-height: 1.6; color: var(--ink-soft); margin: 0; }

/* --------------------------------------------------------------------------
   10. Split-Bereich (Bild + Text)
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
}
.split--reverse > *:first-child { order: 2; }
@media (max-width: 820px) { .split--reverse > *:first-child { order: 0; } }

.split__media { position: relative; }
.split__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.split__media--tall img { aspect-ratio: 3 / 4; }

/* Freigestellter Akzentblock am Bild */
.media-stat {
  position: absolute;
  right: -12px; bottom: -22px;
  padding: 1.1rem 1.4rem;
  background: var(--navy-900);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  text-align: center;
  border-top: 4px solid var(--accent);
}
.media-stat b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1;
  color: #fff;
}
.media-stat span {
  display: block;
  margin-top: .3rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #9DB0C7;
}
@media (max-width: 520px) { .media-stat { right: 8px; bottom: -18px; padding: .85rem 1.1rem; } }

/* Häkchen-Liste */
.check-list { list-style: none; padding: 0; margin: 0 0 1.75rem; display: grid; gap: .7rem; }
.check-list li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin: 0;
  font-size: .9875rem;
  line-height: 1.55;
}
.check-list svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--green); }
.section--dark .check-list li { color: #C7D3E2; }

/* --------------------------------------------------------------------------
   11. Kennzahlen
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 1px;
  background: rgba(255,255,255,.14);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.stat {
  padding: clamp(1.6rem, 1rem + 2vw, 2.5rem) 1.25rem;
  background: var(--navy-900);
  text-align: center;
}
.stat b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.1rem);
  font-weight: 800;
  line-height: 1;
  color: #fff;
  letter-spacing: -.03em;
}
.stat span {
  display: block;
  margin-top: .65rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #93A8C2;
}

/* --------------------------------------------------------------------------
   12. Ablauf / Prozess
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  counter-reset: step;
}
.step { position: relative; padding-top: 2.5rem; }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 0; left: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--accent);
}
.step::after {
  content: '';
  position: absolute;
  top: .55rem; left: 2.6rem; right: 0;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--line-2) 0 6px, transparent 6px 12px);
}
.step:last-child::after { display: none; }
@media (max-width: 640px) { .step::after { display: none; } }
.step h3 { margin-bottom: .4em; }
.step p { font-size: .9375rem; line-height: 1.65; color: var(--ink-soft); margin: 0; }

/* --------------------------------------------------------------------------
   13. Galerie / Projekte
   -------------------------------------------------------------------------- */
.gallery {
  display: grid;
  gap: clamp(.85rem, .5rem + 1vw, 1.25rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
@media (min-width: 900px) {
  .gallery { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 220px; }
  .gallery__item:nth-child(1) { grid-column: span 4; grid-row: span 2; }
  .gallery__item:nth-child(2) { grid-column: span 2; grid-row: span 1; }
  .gallery__item:nth-child(3) { grid-column: span 2; grid-row: span 1; }
  .gallery__item:nth-child(4) { grid-column: span 2; grid-row: span 2; }
  .gallery__item:nth-child(5) { grid-column: span 2; grid-row: span 2; }
  .gallery__item:nth-child(6) { grid-column: span 2; grid-row: span 2; }
}

.gallery__item {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-3);
  cursor: zoom-in;
  isolation: isolate;
  aspect-ratio: 4 / 3;
}
@media (min-width: 900px) { .gallery__item { aspect-ratio: auto; height: 100%; } }
.gallery__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .65s var(--ease);
}
.gallery__item:hover img { transform: scale(1.07); }
.gallery__item::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,24,47,0) 40%, rgba(8,24,47,.78) 100%);
  transition: opacity .3s var(--ease);
}
.gallery__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: 1.25rem;
  text-align: left;
  color: #fff;
}
.gallery__cap b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.gallery__cap span {
  display: block;
  margin-top: .15rem;
  font-size: .8125rem;
  color: #C3D2E4;
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 3rem);
  background: rgba(5,14,27,.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s var(--ease), visibility .28s var(--ease);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__figure { margin: 0; max-width: min(1100px, 100%); text-align: center; }
.lightbox img {
  max-width: 100%;
  max-height: 76vh;
  width: auto;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.lightbox figcaption {
  margin-top: 1.1rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: #E4ECF6;
}
.lightbox figcaption small { display: block; margin-top: .25rem; font-family: var(--font-body); font-weight: 400; color: #94A8C0; }
.lightbox__btn {
  position: absolute;
  display: grid; place-items: center;
  width: 50px; height: 50px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: background-color .2s var(--ease);
}
.lightbox__btn:hover { background: rgba(255,255,255,.22); }
.lightbox__btn svg { width: 22px; height: 22px; }
.lightbox__close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lightbox__prev { left: clamp(.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: clamp(.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) {
  .lightbox__prev { left: 1rem; top: auto; bottom: 1.25rem; transform: none; }
  .lightbox__next { right: 1rem; top: auto; bottom: 1.25rem; transform: none; }
}

/* --------------------------------------------------------------------------
   14. Leistungs-Detail (Unterseite)
   -------------------------------------------------------------------------- */
.svc-detail {
  display: grid;
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  padding-block: clamp(2.25rem, 1.5rem + 3vw, 4rem);
  border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.svc-detail:last-of-type { border-bottom: 0; }
.svc-detail:nth-child(even) .svc-detail__media { order: 2; }
@media (max-width: 860px) { .svc-detail:nth-child(even) .svc-detail__media { order: 0; } }
.svc-detail__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.svc-detail__num {
  display: inline-block;
  font-family: var(--font-display);
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .16em;
  color: var(--accent);
  margin-bottom: .75rem;
}
.svc-detail h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
.tag-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.tag {
  display: inline-block;
  padding: .4rem .8rem;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--navy-700);
  background: var(--surface-3);
  border-radius: 100px;
}

/* --------------------------------------------------------------------------
   15. FAQ
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: .75rem; }
.faq details {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.faq details[open] { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.4rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--navy-900);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary::after {
  content: '';
  flex: none;
  width: 12px; height: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq__body { padding: 0 1.4rem 1.4rem; }
.faq__body p { font-size: .9375rem; line-height: 1.7; color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   16. Zitat / Testimonial
   -------------------------------------------------------------------------- */
.quote {
  position: relative;
  padding: clamp(2rem, 1.2rem + 3vw, 3.25rem);
  background: #fff;
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.quote blockquote {
  margin: 0 0 1.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + .7vw, 1.5rem);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -.01em;
  color: var(--navy-900);
}
.quote figcaption { font-size: .9375rem; color: var(--ink-soft); }
.quote figcaption b { display: block; color: var(--navy-800); font-weight: 650; }

/* --------------------------------------------------------------------------
   17. CTA-Band
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  padding-block: clamp(3rem, 2rem + 4vw, 5rem);
  background: var(--navy-900);
  color: #C3D2E4;
  overflow: hidden;
  isolation: isolate;
}
.cta-band::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(760px 420px at 88% 0%, rgba(211,33,24,.28), transparent 60%),
    radial-gradient(700px 400px at 5% 100%, rgba(26,111,191,.28), transparent 62%);
}
.cta-band__inner {
  display: grid;
  gap: clamp(1.75rem, 1rem + 3vw, 3rem);
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
}
.cta-band h2 { color: #fff; margin-bottom: .4em; }
.cta-band p { max-width: 52ch; margin-bottom: 0; }
.cta-band .btn-row { justify-content: flex-start; }
@media (min-width: 900px) { .cta-band .btn-row { justify-content: flex-end; } }

/* --------------------------------------------------------------------------
   18. Kontakt
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  gap: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 940px) { .contact-grid { grid-template-columns: 1.15fr .85fr; } }

.info-card {
  padding: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  background: var(--navy-900);
  border-radius: var(--radius-lg);
  color: #C3D2E4;
}
.info-card h2, .info-card h3 { color: #fff; }
.info-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.35rem; }
.info-list li { display: flex; gap: 1rem; margin: 0; }
.info-list__icon {
  flex: none;
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.09);
  color: var(--orange);
}
.info-list__icon svg { width: 20px; height: 20px; }
.info-list b {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8FA3BC;
  margin-bottom: .2rem;
}
.info-list a, .info-list span { color: #fff; font-size: 1.0625rem; font-weight: 500; text-decoration: none; font-style: normal; }
.info-list a:hover { color: var(--orange); text-decoration: underline; }
.info-list small { display: block; font-size: .875rem; color: #93A8C2; font-weight: 400; }

/* Formular */
.form { display: grid; gap: 1.15rem; }
.form__row { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.field { display: grid; gap: .45rem; }
.field label {
  font-family: var(--font-display);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--navy-800);
}
.field label .req { color: var(--accent); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .85rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--line-2);
  border-radius: var(--radius);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field textarea { min-height: 148px; resize: vertical; line-height: 1.6; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235A6675' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.75rem; }
.field input::placeholder, .field textarea::placeholder { color: #9AA6B5; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--navy-600);
  box-shadow: 0 0 0 3px rgba(26,66,112,.14);
}
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--accent); }
.field-hint { font-size: .8125rem; color: var(--ink-soft); }

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.checkbox input {
  flex: none;
  width: 20px; height: 20px;
  margin-top: 2px;
  accent-color: var(--navy-700);
  cursor: pointer;
}
.checkbox a { color: var(--navy-700); }

.honeypot { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

.form-note {
  display: none;
  padding: 1rem 1.15rem;
  border-radius: var(--radius);
  font-size: .9375rem;
  line-height: 1.6;
}
.form-note.is-visible { display: block; }
.form-note--ok { background: #EAF6EB; border: 1px solid #B9E0BE; color: #1F5F2A; }
.form-note--err { background: #FDECEB; border: 1px solid #F6C3C0; color: #8E1912; }

/* --------------------------------------------------------------------------
   19. Rechtstexte
   -------------------------------------------------------------------------- */
.legal { max-width: 760px; }
.legal h2 {
  font-size: clamp(1.25rem, 1.1rem + .7vw, 1.5rem);
  margin-top: 2.75rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.legal h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.legal h3 { font-size: 1.0625rem; margin-top: 1.75rem; }
.legal p, .legal li { color: #2E3B4C; }
.legal ul { padding-left: 1.2em; }
.legal address { font-style: normal; line-height: 1.8; }
.legal__meta {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: .875rem;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   20. Footer
   -------------------------------------------------------------------------- */
.footer {
  position: relative;
  background: var(--navy-900);
  color: #93A8C2;
  font-size: .9375rem;
}
.footer::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 4px;
}
.footer__top {
  display: grid;
  gap: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  padding-block: clamp(3rem, 2rem + 3vw, 4.5rem);
}
.footer__brand { max-width: 340px; }
.footer__logo {
  display: inline-block;
  padding: .85rem 1rem;
  background: #fff;
  border-radius: var(--radius-lg);
  margin-bottom: 1.35rem;
}
.footer__logo img { height: 56px; width: auto; }
.footer__brand p { line-height: 1.7; margin-bottom: 1.35rem; }
.footer h4 {
  color: #fff;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.footer li { margin: 0; }
.footer a { color: #B4C4D8; text-decoration: none; transition: color .18s var(--ease); }
.footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.footer__contact li { display: flex; gap: .75rem; align-items: flex-start; }
.footer__contact svg { flex: none; width: 17px; height: 17px; margin-top: 4px; color: var(--orange); }
.footer address { font-style: normal; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.75rem;
  padding-block: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .8125rem;
}
.footer__bottom ul { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer__bottom p { margin: 0; color: #7D93AF; }

/* --------------------------------------------------------------------------
   21. Schwebende Kontakt-Buttons
   -------------------------------------------------------------------------- */
.fab {
  position: fixed;
  right: clamp(1rem, 2vw, 1.75rem);
  bottom: clamp(1rem, 2vw, 1.75rem);
  z-index: 90;
  display: grid;
  gap: .7rem;
  justify-items: end;
}
.fab__btn {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(8,24,47,.28);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.fab__btn:hover { transform: translateY(-3px) scale(1.04); color: #fff; box-shadow: 0 10px 28px rgba(8,24,47,.34); }
.fab__btn svg { width: 26px; height: 26px; }
.fab__btn--wa { background: #25D366; }
.fab__btn--tel { background: var(--navy-800); }
.fab__btn--tel svg { width: 23px; height: 23px; }
@media (min-width: 1021px) { .fab__btn--tel { display: none; } }

/* Nach oben */
.to-top {
  position: fixed;
  left: clamp(1rem, 2vw, 1.75rem);
  bottom: clamp(1rem, 2vw, 1.75rem);
  z-index: 90;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  color: var(--navy-800);
  cursor: pointer;
  opacity: 0; visibility: hidden;
  transform: translateY(8px);
  transition: opacity .25s var(--ease), visibility .25s var(--ease), transform .25s var(--ease), background-color .2s var(--ease);
  box-shadow: var(--shadow-md);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }
.to-top svg { width: 20px; height: 20px; }
@media (max-width: 520px) { .to-top { display: none; } }

/* --------------------------------------------------------------------------
   22. Scroll-Animationen
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   23. Druck
   -------------------------------------------------------------------------- */
@media print {
  .topbar, .header, .fab, .to-top, .cta-band, .footer__top, .nav-backdrop { display: none !important; }
  body { font-size: 11pt; color: #000; }
  a { color: #000; text-decoration: underline; }
  .section { padding-block: 1rem; }
}

/* --------------------------------------------------------------------------
   24. Marken-Intro (Logo-Animation beim ersten Seitenaufruf)
   Läuft einmal pro Browser-Sitzung, überspringbar, bei
   „prefers-reduced-motion" komplett deaktiviert.
   -------------------------------------------------------------------------- */
.intro { display: none; }

/* Scroll-Sperre setzt ausschließlich JavaScript – so bleibt die Seite
   bedienbar, falls das Skript einmal nicht lädt. */
body.intro-lock { overflow: hidden; }

html.intro-active .intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  cursor: pointer;
  /* Notausstieg ohne JavaScript: Ebene verschwindet nach 3 Sekunden. */
  animation: intro-failsafe .01s linear 3s forwards;
}
/* Beim Abgang wird die Klasse intro-active entfernt. Ohne diese Regel
   würde die Ebene sofort auf display:none springen und der Vorhang wäre
   nie zu sehen – sie muss bis zum Ende der Bewegung stehen bleiben. */
.intro.is-leaving {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  pointer-events: none;
}

@keyframes intro-failsafe {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* Zwei Hälften, die sich am Ende wie ein Vorhang öffnen */
.intro__half {
  position: absolute;
  left: 0; right: 0;
  background: var(--navy-900);
  transition: transform .62s cubic-bezier(.76, 0, .24, 1);
  will-change: transform;
}
.intro__half--top    { top: 0;    height: 50.2%; }
.intro__half--bottom { bottom: 0; height: 50.2%; }

.intro.is-leaving .intro__half--top    { transform: translateY(-101%); }
.intro.is-leaving .intro__half--bottom { transform: translateY(101%); }

/* Bühne mit Logo */
.intro__stage {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 1.4rem;
  padding-inline: 1.5rem;
  transition: opacity .34s var(--ease), transform .34s var(--ease);
}
.intro.is-leaving .intro__stage { opacity: 0; transform: scale(.965); }

/* Die weiße Logotafel wird von der Mitte nach außen „aufgezogen" */
.intro__card {
  padding: clamp(1.1rem, 3vw, 1.75rem) clamp(1.5rem, 4vw, 2.5rem);
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
  clip-path: inset(0 50% 0 50% round 8px);
  animation: intro-card-open .62s cubic-bezier(.66, 0, .2, 1) .08s forwards;
}
.intro__card img {
  width: clamp(150px, 34vw, 230px);
  height: auto;
  opacity: 0;
  transform: scale(.94);
  animation: intro-logo-in .55s var(--ease) .34s forwards;
}

/* Farbverlauf aus dem Logo zieht wie eine Walze darunter durch */
.intro__bar {
  width: clamp(150px, 34vw, 230px);
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg,
    var(--logo-red) 0%, var(--logo-orange) 26%, var(--logo-blue) 55%, var(--logo-green) 82%, #9AA5B1 100%);
  transform: scaleX(0);
  transform-origin: left center;
  animation: intro-bar-sweep .55s cubic-bezier(.5, 0, .2, 1) .6s forwards;
}

.intro__claim {
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #7C93B2;
  opacity: 0;
  animation: intro-claim-in .5s var(--ease) .82s forwards;
}

.intro__skip {
  position: absolute;
  bottom: clamp(1.25rem, 4vh, 2.5rem);
  left: 50%;
  transform: translateX(-50%);
  padding: .5rem 1rem;
  background: transparent;
  border: 0;
  font-family: var(--font-body);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #56708F;
  cursor: pointer;
  opacity: 0;
  animation: intro-claim-in .4s var(--ease) 1s forwards;
}
.intro__skip:hover { color: #A8BDD6; }

@keyframes intro-card-open {
  to { clip-path: inset(0 0 0 0 round 8px); }
}
@keyframes intro-logo-in {
  to { opacity: 1; transform: scale(1); }
}
@keyframes intro-bar-sweep {
  40%  { transform: scaleX(1); transform-origin: left center; }
  41%  { transform: scaleX(1); transform-origin: right center; }
  100% { transform: scaleX(1); transform-origin: right center; }
}
@keyframes intro-claim-in {
  to { opacity: 1; }
}

/* --------------------------------------------------------------------------
   25. Logo-Feinheiten im Kopfbereich + Auftakt-Animationen
   -------------------------------------------------------------------------- */
.brand {
  position: relative;
  padding-bottom: 4px;
}
.brand img {
  transition: transform .45s var(--ease);
}
.brand::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    var(--logo-red) 0%, var(--logo-orange) 26%, var(--logo-blue) 55%, var(--logo-green) 82%, #9AA5B1 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s var(--ease);
}
.brand:hover img { transform: translateY(-2px) scale(1.03); }
.brand:hover::after,
.brand:focus-visible::after { transform: scaleX(1); }

/* Rote Unterstreichung in der Überschrift zeichnet sich beim Start */
.hero h1 em::after { transform: scaleX(0); transform-origin: left center; }
body.page-ready .hero h1 em::after {
  animation: swipe-in .72s cubic-bezier(.5, 0, .2, 1) .35s forwards;
}
@keyframes swipe-in { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  body.intro-lock { overflow: auto; }
  html.intro-active .intro { display: none; }
  .hero h1 em::after,
  body.page-ready .hero h1 em::after { transform: scaleX(1); animation: none; }
  .intro__card { clip-path: none; animation: none; }
  .intro__card img, .intro__bar, .intro__claim, .intro__skip { opacity: 1; transform: none; animation: none; }
}

/* ==========================================================================
   26. GESTALTERISCHE HANDSCHRIFT
   Vier Motive, alle aus dem Logo abgeleitet:
   a) Dachkante  – die Giebelform des Logos als Übergang zwischen Abschnitten
   b) Bauplan    – feines technisches Raster als Textur in dunklen Flächen
   c) Farbwalze  – Bilder werden von einem Farbbalken freigelegt
   d) Index      – Leistungen als redaktionelle Liste statt Standard-Kacheln
   ========================================================================== */

/* -------------------------------------------------- a) Dachkante als Übergang */
.roofline {
  display: block;
  width: 100%;
  height: clamp(38px, 5.5vw, 86px);
  margin-bottom: -1px;
  color: var(--navy-900);
  line-height: 0;
}
.roofline svg { display: block; width: 100%; height: 100%; }
.roofline--up { transform: scaleY(-1); margin: -1px 0 0; }

/* --------------------------------------------------------- b) Bauplan-Raster */
.blueprint { position: relative; isolation: isolate; }
/* Nur der Inhaltsrahmen wird über die Rastertextur gehoben.
   Früher stand hier ".blueprint > *" – das hat das absolut positionierte
   Hintergrundbild im Kopfbereich aus seiner Lage gerissen. */
.blueprint > .wrap { position: relative; z-index: 1; }
.blueprint::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
  background-position: center;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 15%, transparent 78%);
          mask-image: radial-gradient(120% 90% at 50% 0%, #000 15%, transparent 78%);
}

/* ---------------------------------------------------- c) Farbwalzen-Aufbau */
.roll { position: relative; overflow: hidden; }
.roll::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg,
    var(--logo-red) 0%, var(--logo-orange) 26%, var(--logo-blue) 55%, var(--logo-green) 82%, #9AA5B1 100%);
  transform-origin: left center;
  transform: scaleX(1);
  transition: transform .82s cubic-bezier(.72, 0, .18, 1);
  pointer-events: none;
}
.roll.is-in::after {
  transform-origin: right center;
  transform: scaleX(0);
  /* scaleX(0) laesst je nach Rundung einen schmalen Streifen stehen –
     deshalb wird die Flaeche am Ende der Bewegung zusaetzlich ausgeblendet. */
  opacity: 0;
  transition: transform .82s cubic-bezier(.72, 0, .18, 1), opacity 0s .8s;
}
.roll img { transform: scale(1.07); transition: transform 1.2s cubic-bezier(.22, .61, .36, 1); }
.roll.is-in img { transform: scale(1); }

/* --------------------------------------------------- d) Leistungs-Index */
.index {
  display: grid;
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  align-items: start;
}
@media (min-width: 1000px) {
  .index { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
}

.index__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-2);
}
.index__list li { margin: 0; }

.index__row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(.9rem, .5rem + 1.4vw, 1.75rem);
  padding: clamp(1.05rem, .8rem + .8vw, 1.5rem) .25rem;
  border-bottom: 1px solid var(--line-2);
  text-decoration: none;
  color: inherit;
  isolation: isolate;
  transition: padding .35s var(--ease), color .25s var(--ease);
}
/* Dunkle Fläche läuft beim Überfahren von links ein */
.index__row::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--navy-900);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .42s cubic-bezier(.62, 0, .2, 1);
}
.index__row:hover,
.index__row:focus-visible {
  color: #fff;
  padding-left: clamp(1rem, 2vw, 1.75rem);
  padding-right: clamp(1rem, 2vw, 1.75rem);
}
.index__row:hover::before,
.index__row:focus-visible::before { transform: scaleX(1); }

.index__num {
  font-family: var(--font-display);
  font-size: clamp(.75rem, .7rem + .2vw, .875rem);
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  transition: color .25s var(--ease);
}
.index__row:hover .index__num,
.index__row:focus-visible .index__num { color: var(--orange); }

.index__title {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, .95rem + .8vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
  display: block;
}
.index__meta {
  display: none;
  margin-top: .2rem;
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-soft);
  transition: color .25s var(--ease);
}
@media (min-width: 700px) { .index__meta { display: block; } }
.index__row:hover .index__meta,
.index__row:focus-visible .index__meta { color: #A8BDD6; }

.index__go {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--line-2);
  flex: none;
  transition: transform .3s var(--ease), border-color .25s var(--ease),
              background-color .25s var(--ease), color .25s var(--ease);
}
.index__go svg { width: 15px; height: 15px; }
.index__row:hover .index__go,
.index__row:focus-visible .index__go {
  transform: translateX(4px);
  border-color: var(--orange);
  background: var(--orange);
  color: var(--navy-900);
}

/* Vorschaubild rechts – wechselt beim Überfahren der Zeilen */
.index__preview {
  display: none;
  position: sticky;
  top: calc(var(--header-h) + 2rem);
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--navy-900);
  box-shadow: var(--shadow-lg);
}
@media (min-width: 1000px) { .index__preview { display: block; } }
.index__preview img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity .55s var(--ease), transform 1.1s var(--ease);
}
.index__preview img.is-active { opacity: 1; transform: scale(1); }
.index__preview::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,24,47,.08) 0%, rgba(8,24,47,.62) 100%);
  pointer-events: none;
  z-index: 1;
}
.index__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 1.6rem;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1875rem;
  letter-spacing: -.01em;
}
.index__caption small {
  display: block;
  margin-top: .35rem;
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 400;
  color: #BACAE0;
}

/* --------------------------------------------------------------- Laufband */
.ticker {
  position: relative;
  padding-block: clamp(1.1rem, .8rem + 1vw, 1.65rem);
  background: var(--navy-900);
  border-block: 1px solid rgba(255, 255, 255, .10);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker-run 48s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__group { display: flex; align-items: center; }
.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: clamp(1.4rem, 3vw, 2.75rem);
  padding-right: clamp(1.4rem, 3vw, 2.75rem);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, .9rem + .9vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -.01em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .38);
}
.ticker__item:nth-child(even) {
  color: #fff;
  -webkit-text-stroke: 0;
}
.ticker__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--orange);
  flex: none;
}
@keyframes ticker-run {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ---------------------------------------------------------- Hero-Zusätze */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: .55rem;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  z-index: 2;
}
.hero__scroll i {
  display: block;
  width: 1px; height: 42px;
  background: linear-gradient(180deg, rgba(255,255,255,.75), transparent);
  transform-origin: top center;
  animation: scroll-pulse 2.2s ease-in-out infinite;
}
@keyframes scroll-pulse {
  0%, 100% { transform: scaleY(.35); opacity: .35; }
  50%      { transform: scaleY(1);   opacity: 1; }
}
@media (max-width: 860px) { .hero__scroll { display: none; } }

/* Senkrechte Ortsmarke am linken Rand */
.hero__rail {
  position: absolute;
  left: clamp(.75rem, 1.6vw, 1.5rem);
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--font-display);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
  z-index: 2;
  display: none;
}
@media (min-width: 1400px) { .hero__rail { display: block; } }

@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
  .hero__scroll i { animation: none; }
  .roll::after { display: none; }
  .roll img { transform: none; }
}

/* ==========================================================================
   27. LOGO – Größe und Bewegung
   Das Logo ist das stärkste Erkennungsmerkmal der Marke und bekommt
   entsprechend Raum. Der Lichtreflex ("Glanz") ist dasselbe Motiv wie
   die Farbwalze: etwas zieht über die Fläche und legt sie frei.
   ========================================================================== */

:root { --header-h: 98px; }

/* ------------------------------------------------------ Logo im Kopfbereich */
.brand__mark {
  position: relative;
  display: block;
  flex: none;
  overflow: hidden;
  border-radius: 3px;
}
.brand img { height: 76px; width: auto; }

/* Lichtreflex, der einmal beim Laden und danach bei jedem Überfahren durchzieht */
.brand__mark::after {
  content: '';
  position: absolute;
  top: -20%;
  left: -60%;
  width: 45%;
  height: 140%;
  background: linear-gradient(100deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-18deg);
  pointer-events: none;
  opacity: 0;
}
body.page-ready .brand__mark::after {
  animation: mark-gloss 1.15s cubic-bezier(.4, 0, .2, 1) .55s 1;
}
.brand:hover .brand__mark::after {
  animation: mark-gloss .85s cubic-bezier(.4, 0, .2, 1) 1;
}
@keyframes mark-gloss {
  0%   { left: -60%; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { left: 125%; opacity: 0; }
}

/* Die Farbleiste unter dem Logo zeichnet sich einmal beim Laden */
body.page-ready .brand::after {
  animation: brand-underline .75s cubic-bezier(.5, 0, .2, 1) .35s forwards;
}
@keyframes brand-underline {
  0%   { transform: scaleX(0); }
  55%  { transform: scaleX(1); transform-origin: left center; }
  100% { transform: scaleX(1); transform-origin: left center; }
}
/* Nach dem Aufzeichnen bleibt sie stehen – beim Verlassen zieht sie sich zurück */
.brand:not(:hover):not(:focus-visible)::after { transition: transform .45s var(--ease) .9s; }

@media (max-width: 1020px) {
  :root { --header-h: 80px; }
  .brand img { height: 58px; }
}
@media (max-width: 420px) {
  .brand img { height: 50px; }
}

/* ---------------------------------------------------------- Logo im Fuß */
.footer__logo { padding: 1rem 1.15rem; }
.footer__logo img { height: 74px; }

/* -------------------------------------------------------- Logo im Vorspann */
.intro__card {
  padding: clamp(1.35rem, 3.4vw, 2.1rem) clamp(1.85rem, 4.6vw, 3rem);
  position: relative;
  overflow: hidden;
}
.intro__card img { width: clamp(200px, 44vw, 320px); }
.intro__bar { width: clamp(200px, 44vw, 320px); height: 6px; }

/* Lichtreflex über der Logotafel */
.intro__card::after {
  content: '';
  position: absolute;
  top: -20%;
  left: -55%;
  width: 40%;
  height: 140%;
  background: linear-gradient(100deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,.9) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
  animation: mark-gloss .85s cubic-bezier(.4, 0, .2, 1) .78s 1;
}

/* Feiner Ring, der sich um die Tafel legt */
.intro__stage::before {
  content: '';
  position: absolute;
  inset: clamp(-2.25rem, -4vw, -1.25rem);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 14px;
  opacity: 0;
  transform: scale(1.04);
  animation: intro-ring .85s var(--ease) .55s forwards;
  pointer-events: none;
}
@keyframes intro-ring {
  to { opacity: 1; transform: scale(1); }
}

.intro__claim { letter-spacing: .34em; font-size: .8125rem; }

@media (prefers-reduced-motion: reduce) {
  .brand__mark::after,
  .intro__card::after,
  body.page-ready .brand::after { animation: none; opacity: 0; }
  .intro__stage::before { animation: none; opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   28. Detailaufnahmen (Arbeitsschritte)
   -------------------------------------------------------------------------- */
.detail-card { display: grid; gap: 1.1rem; margin: 0; }
.detail-card__media {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-3);
}
.detail-card__media img { width: 100%; height: 100%; object-fit: cover; }
.detail-card figcaption b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--navy-900);
  margin-bottom: .3rem;
}
.detail-card figcaption b::before {
  content: '';
  display: inline-block;
  width: 18px; height: 2px;
  margin-right: .6rem;
  vertical-align: middle;
  background: var(--accent);
}
.detail-card figcaption span {
  display: block;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Farbwalze in den Split-Bildern: Rahmen und Schatten wandern auf die Hülle */
.split__media .roll {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.split__media .roll img { box-shadow: none; border-radius: 0; }
.svc-detail__media .roll { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.svc-detail__media .roll img { box-shadow: none; border-radius: 0; }

/* ==========================================================================
   29. HANDY-FEINSCHLIFF
   Behebt vier gemessene Probleme bei 360 px Breite:
   1. seitliches Verschieben durch das geschlossene Menü
   2. zu kleine Tippflächen (unter 38 px)
   3. Schriftgrößen unter 12 px
   4. Bedienbarkeit mit dem Daumen
   ========================================================================== */

/* -------- 1. Kein seitliches Verschieben ---------------------------------
   Das geschlossene Menü liegt rechts außerhalb des Bildschirms und hat
   dort die Seite breiter gemacht. "clip" schneidet das ab, ohne – anders
   als "hidden" – den mitlaufenden Kopfbereich zu zerstören. */
html { overflow-x: clip; }
body { overflow-x: clip; }

@media (max-width: 1020px) {
  /* Zusätzlich aus dem Layout und für Screenreader herausnehmen, solange zu */
  .nav {
    visibility: hidden;
    transition: transform .32s var(--ease), visibility .32s var(--ease);
  }
  .nav.is-open { visibility: visible; }
}

/* -------- 2. Tippflächen ------------------------------------------------- */

/* Fußbereich: Links bekommen Fläche statt nur Textzeile */
.footer ul { gap: .15rem; }
.footer__contact { gap: 1.1rem; }
.footer li > a,
.footer__brand .arrow-link {
  display: inline-block;
  padding-block: .5rem;
}
.footer__contact li > a { padding-block: .45rem; }
.footer__bottom ul a { display: inline-block; padding-block: .4rem; }

/* Kontaktkarte: Telefon, WhatsApp und E-Mail sind die wichtigsten Ziele */
.info-list a {
  display: inline-block;
  padding-block: .5rem;
  margin-block: -.25rem;
}

/* Sprungmarken auf der Leistungsseite */
.tag { padding: .55rem .95rem; }
a.tag { text-decoration: none; transition: background-color .2s var(--ease), color .2s var(--ease); }
a.tag:hover, a.tag:focus-visible { background: var(--navy-900); color: #fff; }

/* Links in Fließtext und Rechtstexten */
.legal p a, .legal li a, .field-hint a, .checkbox a {
  padding-block: .2rem;
  display: inline-block;
}

/* -------- 3. Mindestschriftgröße ---------------------------------------- */
.hero__eyebrow b { font-size: .75rem; }
.brand__tag { font-size: .75rem; }
.intro__claim { font-size: .75rem; }

/* -------- 4. Bedienbarkeit auf kleinen Bildschirmen --------------------- */
@media (max-width: 640px) {
  /* Schaltflächen über die volle Breite – mit dem Daumen sicher zu treffen */
  .hero .btn-row .btn,
  .cta-band .btn-row .btn { width: 100%; }
  .hero .btn-row, .cta-band .btn-row { gap: .7rem; }

  /* Der Bildabstand darf auf dem Handy kleiner sein */
  .section { padding-block: clamp(3rem, 2rem + 5vw, 4.5rem); }

  /* Kennzahlen zweispaltig statt vier nebeneinander */
  .stats { grid-template-columns: repeat(2, 1fr); }

  /* Detailaufnahmen zweispaltig */
  .grid--4 { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .detail-card figcaption span { font-size: .8125rem; }

  /* Leistungs-Index: Nummer über den Titel, mehr Luft zum Antippen */
  .index__row { padding-block: 1.1rem; gap: .85rem; }
  .index__title { font-size: 1.0625rem; }

  /* Der schwebende Kontaktknopf darf den Fußbereich nicht verdecken */
  .footer__bottom { padding-bottom: 5.5rem; }

  /* Formularfelder: 16 px verhindert das automatische Zoomen unter iOS */
  .field input, .field select, .field textarea { font-size: 1rem; }

  /* Zitate und Infokarten etwas kompakter */
  .info-card { padding: 1.5rem 1.35rem; }
  .quote { padding: 1.75rem 1.4rem; }
}

@media (max-width: 420px) {
  /* Der Bildausschnitt im Kopfbereich rückt näher an das Haus heran */
  .hero__media img { object-position: 62% 42%; }
  .hero { min-height: 82svh; }
  /* Kennzahlen untereinander, damit die Zeilen nicht umbrechen */
  .stat { padding-inline: .75rem; }
  .stat b { font-size: 2rem; }
  .stat span { font-size: .75rem; letter-spacing: .06em; }
}

/* Bei sehr schmalen Geräten die Detailbilder untereinander */
@media (max-width: 380px) {
  .grid--4 { grid-template-columns: 1fr; }
}

/* -------- Schwebende Knöpfe: sichere Abstände zu den Systemleisten ------ */
.fab {
  right: max(clamp(1rem, 2vw, 1.75rem), env(safe-area-inset-right));
  bottom: max(clamp(1rem, 2vw, 1.75rem), env(safe-area-inset-bottom));
}
.fab__btn { width: 58px; height: 58px; }
.to-top { left: max(clamp(1rem, 2vw, 1.75rem), env(safe-area-inset-left)); }

/* ==========================================================================
   30. POLITUR
   Feinschliff auf Typografie, Tiefe und Rhythmus. Diese Regeln stehen
   bewusst am Ende und überschreiben die Grundwerte von oben.
   ========================================================================== */

/* -------- Feines Korn über der gesamten Seite ---------------------------
   Nimmt Flächen die digitale Flachheit und lässt Fotos hochwertiger wirken.
   Eine einzige Regel, kein zusätzliches Markup, keine Bilddatei. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* -------- Typografie ---------------------------------------------------- */
:root {
  --wrap: 1240px;
}

h1, h2 {
  /* Überschriften sind kurz genug – hier stört jede Trennung */
  hyphens: manual;
  -webkit-hyphens: manual;
  letter-spacing: -.032em;
}
h3, h4 { hyphens: manual; -webkit-hyphens: manual; }

h1 { font-size: clamp(2.05rem, 1.15rem + 3.9vw, 4.4rem); line-height: 1.04; }
h2 { font-size: clamp(1.7rem, 1.1rem + 2.4vw, 3rem); line-height: 1.08; }
h3 { font-size: clamp(1.125rem, 1rem + .6vw, 1.4rem); }

p, li { hyphens: auto; -webkit-hyphens: auto; }

.lead { color: #46525F; }

/* Optischer Randausgleich für die großen Überschriften */
.hero h1, .pagehead h1 { margin-left: -.02em; }

/* -------- Abschnittsköpfe: die Akzentlinie steht jetzt neben dem Text --- */
.section-head::before {
  width: 46px;
  height: 3px;
  margin-bottom: 1.15rem;
  border-radius: 2px;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .75rem;
  letter-spacing: .2em;
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: '';
  width: 22px;
  height: 2px;
  background: currentColor;
  opacity: .55;
  flex: none;
}
.section-head--center .eyebrow { justify-content: center; }

/* -------- Mehr Tiefe: weichere, gestaffelte Schatten -------------------- */
:root {
  --shadow-sm: 0 1px 2px rgba(8,24,47,.05), 0 2px 8px rgba(8,24,47,.05);
  --shadow-md: 0 2px 6px rgba(8,24,47,.05), 0 10px 26px rgba(8,24,47,.07), 0 24px 48px rgba(8,24,47,.05);
  --shadow-lg: 0 3px 10px rgba(8,24,47,.06), 0 18px 40px rgba(8,24,47,.10), 0 44px 90px rgba(8,24,47,.12);
  --radius: 6px;
  --radius-lg: 12px;
}

/* -------- Kopfbereich: mehr Präsenz ------------------------------------- */
.hero { min-height: clamp(560px, 78vh, 820px); }
.hero__inner { max-width: 800px; }
.hero::before {
  background:
    linear-gradient(100deg,
      rgba(5,15,30,.95) 0%, rgba(6,20,40,.88) 34%,
      rgba(8,24,47,.58) 66%, rgba(8,24,47,.30) 100%),
    linear-gradient(0deg, rgba(4,12,26,.72) 0%, rgba(4,12,26,0) 42%),
    /* warmer Schimmer, damit das Blau nicht kalt wirkt */
    radial-gradient(90% 70% at 88% 18%, rgba(194,65,12,.20), transparent 62%);
}
.hero__text { color: #C9D7E8; max-width: 54ch; }
.hero h1 em::after { height: .14em; bottom: .06em; border-radius: 3px; }

.hero__eyebrow {
  padding: .5rem 1.05rem .5rem .5rem;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 2px 14px rgba(0,0,0,.18);
}
.hero__eyebrow b { background: var(--accent); letter-spacing: .12em; }

.hero__facts { gap: .75rem 2.25rem; padding-top: 1.9rem; }
.hero__facts svg { color: var(--orange); }

/* -------- Schaltflächen ------------------------------------------------- */
.btn {
  border-radius: 6px;
  letter-spacing: .01em;
  padding: 1rem 1.7rem;
}
.btn--lg { padding: 1.15rem 2.1rem; }
.btn:not(.btn--ghost):not(.btn--outline-light) {
  box-shadow: 0 1px 2px rgba(8,24,47,.12), 0 6px 16px rgba(8,24,47,.10);
}
.btn:hover { transform: translateY(-2px); }
.btn--light { color: var(--navy-900); }

/* -------- Karten und Flächen ------------------------------------------- */
.mini-card { padding: 1.65rem 1.6rem; border-radius: var(--radius-lg); }
.mini-card__icon { border-radius: 8px; }
.svc-card { border-radius: var(--radius-lg); }
.quote { border-radius: var(--radius-lg); border-left-width: 4px; }

.usp { padding-block: clamp(1.6rem, 1rem + 1.6vw, 2.4rem); }
.usp__icon {
  background: linear-gradient(160deg, var(--navy-100), #F3F6FA);
  border: 1px solid #DCE4EF;
  border-radius: 8px;
  color: var(--navy-700);
}

/* -------- Kennzahlen: ruhiger und wertiger ----------------------------- */
.stats { gap: 1px; background: rgba(255,255,255,.10); border-radius: var(--radius-lg); }
.stat b { letter-spacing: -.04em; }
.stat span { color: #8FA5C0; letter-spacing: .12em; font-size: .75rem; }

/* -------- Ablauf: die Schrittnummern werden zum Gestaltungselement ----- */
.step { padding-top: 3.1rem; }
.step::before {
  font-size: clamp(2.4rem, 2rem + 1.6vw, 3.4rem);
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--line-2);
  letter-spacing: -.04em;
  transition: -webkit-text-stroke-color .3s var(--ease), color .3s var(--ease);
}
.step:hover::before { -webkit-text-stroke-color: var(--accent); }
.step::after { top: 1.35rem; left: 4.2rem; }

/* -------- Galerie ------------------------------------------------------- */
.gallery__item { border-radius: var(--radius-lg); }
.gallery__cap { padding: 1.4rem 1.5rem; }
.gallery__cap b { font-size: 1.1rem; }

/* -------- Leistungs-Index ---------------------------------------------- */
.index__list { border-top-width: 2px; border-top-color: var(--navy-900); }
.index__row { padding-block: clamp(1.15rem, .9rem + .9vw, 1.65rem); }
.index__preview { border-radius: var(--radius-lg); }
.index__num { letter-spacing: .12em; }

/* -------- Kontaktbereich ------------------------------------------------ */
.info-card { border-radius: var(--radius-lg); }
.info-list__icon { border-radius: 8px; background: rgba(255,255,255,.08); }
.field input, .field select, .field textarea {
  border-radius: 6px;
  border-color: #D6DEE9;
  padding: .95rem 1.05rem;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--navy-700);
  box-shadow: 0 0 0 3px rgba(18,48,85,.12);
}

/* -------- Fußbereich ---------------------------------------------------- */
.footer { font-size: .9375rem; }
.footer__logo { border-radius: 10px; box-shadow: 0 8px 26px rgba(0,0,0,.30); }
.footer h4 { letter-spacing: .16em; color: #E6EDF6; }
.footer a { color: #A9BCD2; }

/* -------- Schwebende Knöpfe -------------------------------------------- */
.fab__btn { box-shadow: 0 4px 14px rgba(8,24,47,.22), 0 12px 30px rgba(8,24,47,.22); }

/* -------- Laufband etwas zurückhaltender ------------------------------- */
.ticker__item { font-size: clamp(1rem, .88rem + .8vw, 1.6rem); }
.ticker__item:nth-child(even) { color: #E7EEF7; }
.ticker__dot { background: var(--accent); }

/* -------- Trennlinie zwischen hellen Abschnitten ----------------------- */
.section--alt { border-block: 1px solid #E8ECF2; }

@media (prefers-reduced-motion: reduce) {
  .btn:hover { transform: none; }
}

/* ==========================================================================
   31. WERKZEUG-ANIMATION IM VORSPANN
   Fünf Werkzeuge fliegen von außen ein, sammeln sich über der Mitte und
   werden von der aufziehenden Logotafel „aufgenommen“ – dasselbe Bild wie
   der Werkzeugfächer über dem Dach in der Bildmarke.
   ========================================================================== */
.intro__tools {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 0;
}
.intro__tool {
  position: absolute;
  display: grid;
  place-items: center;
  width: clamp(38px, 8vw, 54px);
  height: clamp(38px, 8vw, 54px);
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  color: var(--orange);
  opacity: 0;
  /* Startlage: weit außen, verdreht und verkleinert */
  transform: translate(var(--tx), var(--ty)) rotate(var(--tr)) scale(.55);
  animation:
    tool-fliegt .78s cubic-bezier(.18, .8, .24, 1) var(--td) forwards,
    tool-geht   .42s cubic-bezier(.6, 0, .3, 1) calc(var(--td) + .62s) forwards;
}
.intro__tool svg { width: 55%; height: 55%; }

/* Einflug: von außen zur Mitte, gerade werden, volle Größe */
@keyframes tool-fliegt {
  0%   { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(var(--tr)) scale(.55); }
  35%  { opacity: 1; }
  100% { opacity: 1; transform: translate(calc(var(--tx) * .30), calc(var(--ty) * .30)) rotate(0deg) scale(1); }
}
/* Abgang: werden von der Logotafel eingesogen */
@keyframes tool-geht {
  0%   { opacity: 1; transform: translate(calc(var(--tx) * .30), calc(var(--ty) * .30)) rotate(0deg) scale(1); }
  100% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(.35); }
}

/* Die Logotafel liegt über den Werkzeugen und öffnet sich etwas später */
.intro__card { z-index: 2; }
.intro__bar, .intro__claim { z-index: 2; }

.intro__card  { animation-delay: .62s; }
.intro__card img { animation-delay: .88s; }
.intro__card::after { animation-delay: 1.15s; }
.intro__bar   { animation-delay: 1.12s; }
.intro__claim { animation-delay: 1.34s; }
.intro__stage::before { animation-delay: 1.05s; }
.intro__skip  { animation-delay: 1.5s; }

@media (prefers-reduced-motion: reduce) {
  .intro__tool { animation: none; opacity: 0; }
}

/* ==========================================================================
   32. WECHSELNDER TEXT IN DER HAUPTÜBERSCHRIFT
   Der hervorgehobene Begriff wechselt alle zwei Sekunden. Alle Begriffe
   stehen im Quelltext – Suchmaschinen sehen also den vollen Leistungsumfang.
   ========================================================================== */
.rotator {
  /* Alle Begriffe liegen in derselben Rasterzelle übereinander. Der Rahmen
     ist dadurch immer so breit wie das längste Wort – eine mitwandernde
     Breite, die den Text abschneiden könnte, gibt es nicht mehr.
     Weil der Begriff am Satzende steht, fällt die Reservebreite nicht auf. */
  display: inline-grid;
  vertical-align: bottom;
  font-style: normal;
  overflow: visible;
  max-width: 100%;
}

.rotator__wort {
  grid-area: 1 / 1;
  justify-self: start;
  position: relative;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(.5em);
  transition: opacity .4s var(--ease), transform .5s cubic-bezier(.2, .8, .3, 1);
  pointer-events: none;
}
.rotator__wort.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.rotator__wort.is-leaving {
  opacity: 0;
  transform: translateY(-.5em);
}

/* Die farbige Auszeichnung liegt am einzelnen Wort, nicht am Rahmen –
   so ist sie immer exakt so breit wie der Begriff, der gerade dasteht. */
.rotator__wort::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: .04em;
  height: .14em;
  background: var(--accent);
  border-radius: 3px;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s cubic-bezier(.5, 0, .2, 1);
}
.rotator__wort.is-active::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .rotator__wort { transition: none; }
  .rotator__wort:not(.is-active) { visibility: hidden; }
  .rotator__wort.is-active::after { transition: none; }
}

/* Die frühere Auszeichnung über <em> wird von .rotator übernommen */
.hero h1 em:not(.rotator)::after { display: none; }


/* ==========================================================================
   33. BEWEGTES LOGO – „das Haus wird angemalt"

   Das Logo besteht aus drei deckungsgleichen Bildebenen, getrennt exakt
   entlang der Dachkante und oberhalb des Schriftzugs:

     logo__dach        Dachkonstruktion und Schriftzug – die feste Struktur
     logo__farbe       nur die farbigen Pinselstriche unter dem Dach
     logo__werkzeuge   der Werkzeugfächer über dem Dach

   Beim Laden steht zuerst das nackte Haus da. Dann wird der Farbstrich von
   links nach rechts aufgetragen, so als führe jemand die Rolle über die
   Fläche. Zum Schluss setzen sich die Werkzeuge auf das Dach und beginnen
   ihr ruhiges Schweben.

   Die Fugen zwischen den Ebenen sind unsichtbar, weil entlang vorhandener
   Kanten geschnitten wurde.
   ========================================================================== */
.logo {
  position: relative;
  display: block;
  width: 100%;
  line-height: 0;
}
.logo img {
  display: block;
  width: 100%;
  height: auto;
}
/* Die Dachebene gibt die Größe vor, die anderen liegen deckungsgleich darauf */
.logo__dach { position: relative; z-index: 1; }
.logo__farbe,
.logo__werkzeuge {
  position: absolute;
  inset: 0;
}
.logo__farbe { z-index: 2; }
.logo__werkzeuge { z-index: 3; transform-origin: 50% 82%; will-change: transform; }

/* --------------------------------------------------------- Farbauftrag */
/* Der Farbstrich wird von links nach rechts freigelegt. */
@keyframes farbe-auftragen {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* ----------------------------------------------- Werkzeuge setzen sich */
@keyframes werkzeuge-setzen {
  from { transform: translateY(-14%); opacity: 0; }
  60%  { opacity: 1; }
  to   { transform: translateY(0); opacity: 1; }
}

/* --------------------------------------------------- Dauerhaftes Schweben */
/* 3,4 % der Logohöhe – bei 76 px Logo rund 2,4 px. Wahrnehmbar, ohne beim
   Lesen zu stören. */
@keyframes werkzeuge-schweben {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3.4%); }
}

/* ============================================================ Kopfbereich */
.brand__mark { width: auto; }
.brand__mark .logo { width: 82px; }
.brand img { height: auto; }

.brand .logo__farbe {
  animation: farbe-auftragen 1s cubic-bezier(.35, .75, .3, 1) .25s backwards;
}
.brand .logo__werkzeuge {
  animation:
    werkzeuge-setzen .62s cubic-bezier(.25, .85, .35, 1) .95s backwards,
    werkzeuge-schweben 5.5s ease-in-out 1.6s infinite;
}

/* Beim Überfahren wird noch einmal angemalt und die Werkzeuge heben ab */
.brand:hover .logo__farbe,
.brand:focus-visible .logo__farbe {
  animation: farbe-auftragen .75s cubic-bezier(.35, .75, .3, 1);
}
.brand .logo__werkzeuge { transition: transform .45s cubic-bezier(.22, .61, .36, 1); }
.brand:hover .logo__werkzeuge,
.brand:focus-visible .logo__werkzeuge {
  animation-play-state: paused;
  transform: translateY(-8%);
}

@media (max-width: 1020px) { .brand__mark .logo { width: 63px; } }
@media (max-width: 420px)  { .brand__mark .logo { width: 54px; } }

/* ============================================================= Fußbereich */
.footer__logo .logo { width: 80px; }
.footer__logo img { height: auto; }
.footer__logo .logo__werkzeuge {
  animation: werkzeuge-schweben 7s ease-in-out infinite;
  animation-delay: -2.4s;
}

/* =============================================================== Vorspann */
/* Hier bekommt die Abfolge mehr Zeit, weil sie die Hauptrolle spielt. */
.intro__card .logo { width: clamp(200px, 44vw, 320px); }
/* Wichtig: Abschnitt 24 setzt für alle Bilder im Vorspann opacity 0.
   Die Ebenen brauchen hier ausdrücklich den sichtbaren Grundzustand,
   sonst verschwinden sie wieder, sobald ihre Animation durch ist. */
.intro__card img {
  width: 100%;
  height: auto;
  opacity: 1;
  transform: none;
  animation: none;
}

@keyframes dach-auf {
  from { opacity: 0; transform: translateY(7%); }
  to   { opacity: 1; transform: none; }
}
.intro__card .logo__dach {
  animation: dach-auf .55s cubic-bezier(.22, .8, .3, 1) .42s backwards;
}
.intro__card .logo__farbe {
  animation: farbe-auftragen 1s cubic-bezier(.35, .75, .3, 1) .78s backwards;
}
.intro__card .logo__werkzeuge {
  animation: werkzeuge-setzen .6s cubic-bezier(.25, .85, .35, 1) 1.5s backwards;
}

@media (prefers-reduced-motion: reduce) {
  .brand .logo__farbe,
  .brand .logo__werkzeuge,
  .brand:hover .logo__farbe,
  .brand:hover .logo__werkzeuge,
  .footer__logo .logo__werkzeuge,
  .intro__card .logo__dach,
  .intro__card .logo__farbe,
  .intro__card .logo__werkzeuge {
    animation: none;
    opacity: 1;
    transform: none;
    clip-path: none;
  }
}

/* ==========================================================================
   34. HANDY – KORREKTUREN AUS DER SICHTPRÜFUNG
   Behoben werden vier Punkte, die erst am Gerät auffielen:
     1. Detailbilder standen einzeln untereinander statt zweispaltig
     2. die schwebenden Kontaktknöpfe verdeckten laufend Text
     3. das Kennzahlen-Schild hing über den Bildrand hinaus
     4. beim Wechselbegriff waren kurz zwei Wörter gleichzeitig zu sehen
   ========================================================================== */

/* -------- 1. Detailbilder bleiben zweispaltig --------------------------- */
/* Die vorherige Grenze von 380 px hat auf fast jedem Handy gegriffen und
   jedes Bild über die volle Breite gezogen. Zwei Spalten trägt bis 340 px. */
@media (max-width: 640px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); gap: .85rem; }
}
@media (max-width: 340px) {
  .grid--4 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .detail-card { gap: .7rem; }
  .detail-card figcaption b { font-size: .9375rem; margin-bottom: .15rem; }
  .detail-card figcaption b::before { width: 12px; margin-right: .4rem; }
  .detail-card figcaption span { font-size: .8125rem; line-height: 1.45; }
}

/* -------- 2. Kontaktknöpfe: auf dem Handy eine feste Leiste ------------- */
.fab__text { display: none; }

@media (max-width: 640px) {
  /* Aus den beiden schwebenden Kreisen wird eine Leiste am unteren Rand.
     Sie liegt außerhalb des Textflusses und kann deshalb nichts mehr
     verdecken – der Seiteninhalt bekommt unten entsprechend Platz. */
  .fab {
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    justify-items: stretch;
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 20px rgba(8, 24, 47, .10);
    padding: .55rem .7rem calc(.55rem + env(safe-area-inset-bottom));
    z-index: 95;
  }
  .fab__btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 52px;
    border-radius: 6px;
    gap: .55rem;
    font-family: var(--font-display);
    font-size: .9375rem;
    font-weight: 700;
    letter-spacing: .01em;
    box-shadow: none;
  }
  .fab__btn:hover { transform: none; box-shadow: none; }
  .fab__btn svg { width: 21px; height: 21px; }
  .fab__text { display: inline; }
  .fab__btn--wa { margin-right: .35rem; }
  /* Auf grossen Bildschirmen ist dieser Knopf ausgeblendet – hier wieder
     einblenden, aber mit derselben Zeilenanordnung wie der WhatsApp-Knopf. */
  .fab__btn--tel { display: flex; }

  /* Platz schaffen, damit die Leiste nichts überdeckt */
  body { padding-bottom: 74px; }
  .footer__bottom { padding-bottom: 1.5rem; }

  /* Der Zurück-nach-oben-Knopf entfällt, die Leiste übernimmt den Platz */
  .to-top { display: none; }
}

/* -------- 3. Kennzahlen-Schild bleibt im Bild --------------------------- */
@media (max-width: 720px) {
  .media-stat {
    right: 12px;
    bottom: 12px;
    padding: .7rem 1rem;
    border-top-width: 3px;
  }
  .media-stat b { font-size: 1.45rem; }
  .media-stat span { font-size: .625rem; letter-spacing: .08em; margin-top: .15rem; }
}

/* -------- 4. Wechselbegriff: sauberer Übergang -------------------------- */
/* Vorher blendete das neue Wort auf, während das alte noch stand – für einen
   Moment lagen zwei Begriffe übereinander. Jetzt geht das alte zuerst weg. */
.rotator__wort {
  transition: opacity .34s var(--ease) .14s,
              transform .46s cubic-bezier(.2, .8, .3, 1) .14s;
}
.rotator__wort.is-leaving {
  transition: opacity .16s var(--ease) 0s,
              transform .3s var(--ease) 0s;
}

/* -------- Kleinigkeiten aus derselben Prüfung -------------------------- */
/* Die Rechtslinks im Fuß klebten aneinander */
@media (max-width: 640px) {
  .footer__bottom { gap: .75rem 1rem; }
  .footer__bottom ul { gap: .35rem 1.5rem; }
  .footer__bottom ul li + li { position: relative; }
  .footer__bottom ul li + li::before {
    content: '';
    position: absolute;
    left: -.75rem; top: 50%;
    width: 3px; height: 3px;
    margin-top: -1.5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .3);
  }

  /* Überschriften im Kopfbereich der Unterseiten etwas kompakter */
  .pagehead { padding-block: clamp(2.5rem, 2rem + 3vw, 4rem); }

  /* Das Laufband darf auf dem Handy schmaler sein */
  .ticker { padding-block: .9rem; }
  .ticker__item { font-size: 1rem; }
}

/* ==========================================================================
   35. KOPFBEREICH AUF DEM HANDY – MILCHGLAS ENTFERNT

   Der Milchglas-Effekt (backdrop-filter) erzeugt einen eigenen Bezugsrahmen
   für alle Kindelemente mit position: fixed. Das Menü hat sich dadurch am
   nur 81 px hohen Kopfbereich ausgerichtet statt am Bildschirm und klappte
   deshalb bloß als schmaler Streifen auf.

   Auf dem Handy ist der Effekt ohnehin verzichtbar: Der Balken wird
   stattdessen vollständig deckend, dadurch schimmert beim Scrollen auch
   nichts mehr hindurch.
   ========================================================================== */
@media (max-width: 1020px) {
  .header {
    background: #fff;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
}

/* ==========================================================================
   36. LOGO AUF DEM HANDY

   Das Logo war mit 54 px Breite so klein, dass die Schwebebewegung nur
   knapp zwei Bildpunkte betrug – praktisch unsichtbar. Zwei Änderungen:
   das Logo wird deutlich größer, und der Hub wird auf kleinen Bildschirmen
   prozentual erhöht, damit die Bewegung dort genauso deutlich ist wie am
   Rechner.
   ========================================================================== */
@media (max-width: 1020px) {
  :root { --header-h: 88px; }
  .brand__mark .logo { width: 78px; }

  /* 6 % von rund 72 px Höhe sind gut 4 px – klar wahrnehmbar */
  @keyframes werkzeuge-schweben {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6%); }
  }
  .brand .logo__werkzeuge { animation-duration: .62s, 4.6s; }
  .brand:hover .logo__werkzeuge { transform: translateY(-11%); }
}

@media (max-width: 420px) {
  :root { --header-h: 82px; }
  .brand__mark .logo { width: 70px; }
}

/* Der Farbauftrag läuft auf dem kleinen Logo etwas länger, damit man ihn
   überhaupt wahrnimmt. */
@media (max-width: 1020px) {
  .brand .logo__farbe { animation-duration: 1.25s; }
}