/* =====================================================================
   CLARUS SERVICE – Gestaltung
   ---------------------------------------------------------------------
   Gestaltungsidee: Das Logo besteht aus einem schwarzen und einem weißen
   Block. Die Seite übernimmt genau das – sie ist aus weißen und schwarzen
   Bändern gebaut, die per Verlauf ineinander übergehen. Der Hero macht den
   Weg von Weiß nach Schwarz einmal in voller Höhe vor.
   ===================================================================== */

/* ------------------------------- Marke ------------------------------ */
:root {
  /* Grundtöne – die Rampe von Papier nach Tinte */
  --paper:      #ffffff;
  --paper-2:    #f4f5f6;
  --paper-3:    #e7e9ea;
  --mid:        #9aa0a5;
  --ink-3:      #2a2d30;
  --ink-2:      #141618;
  --ink:        #0a0b0c;

  /* Textfarben auf hellem Grund */
  --on-paper:      #0a0b0c;
  --on-paper-soft: #5b6165;
  --on-paper-line: rgba(10, 11, 12, .12);

  /* Textfarben auf dunklem Grund */
  --on-ink:      #ffffff;
  --on-ink-soft: #a3a9ae;
  --on-ink-line: rgba(255, 255, 255, .14);

  /* Funktionsfarben – bewusst sparsam, die Marke bleibt schwarzweiß */
  --ok:    #17a673;
  --warn:  #c98a12;
  --err:   #d64545;
  --focus: #2d7ff9;

  /* Typografie */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-text:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Maße */
  --wrap: 1240px;
  --gut: clamp(20px, 5vw, 64px);
  --r: 4px;          /* Radius – kantig, technisch, wie das Logo */
  --r-lg: 8px;

  /* Vertikaler Rhythmus */
  --sec: clamp(72px, 10vw, 140px);

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

/* ----------------------------- Grundlagen --------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--on-paper);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.65;
  font-feature-settings: 'kern' 1, 'liga' 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; }

button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--ink); color: var(--paper); }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: var(--paper);
  padding: 12px 20px; font-weight: 600;
}
.skip:focus { left: 0; }

/* ------------------------------ Layout ------------------------------ */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.wrap--wide { max-width: 1480px; }
.wrap--narrow { max-width: 860px; }

section { position: relative; }

/* Bänder: hell und dunkel, mit weichem Übergang dazwischen ----------- */
.band { padding-block: var(--sec); position: relative; }

.band--paper { background: var(--paper); color: var(--on-paper); }
.band--paper2 { background: var(--paper-2); color: var(--on-paper); }
.band--ink   { background: var(--ink);   color: var(--on-ink); }
.band--ink2  { background: var(--ink-2); color: var(--on-ink); }

/* Verlaufsübergänge zwischen zwei Bändern.
   Wichtig: Hier steht nie Inhalt. Ein Verlauf, der von Schwarz nach Weiß
   läuft, hat in der Mitte keine Farbe mehr, gegen die sich Schrift
   behaupten könnte – Text würde darin verschwinden. Deshalb sind das
   reine Trennstreifen. */
.fade {
  height: clamp(130px, 18vh, 230px);
  position: relative;
  display: grid;
  place-items: center;
  pointer-events: none;
}
/* Die Bänder rücken näher an den Verlauf, sonst wirkt die Lücke wie ein
   Seitenende. */
.fade + .band { padding-top: calc(var(--sec) * .5); }
.band:has(+ .fade) { padding-bottom: calc(var(--sec) * .5); }
.band { scroll-margin-top: 88px; }

/* Scroll-Hinweis: sitzt mittig im Verlauf, wo der Grund immer mittelgrau
   ist – dort trägt Dunkel am besten (rund 8:1). */
.scroller {
  pointer-events: auto;
  appearance: none;
  border: 0;
  background: none;
  padding: 12px 18px;
  cursor: pointer;
  display: grid;
  justify-items: center;
  gap: 10px;
  color: var(--ink);
  opacity: .8;
  transition: opacity .3s var(--ease), transform .35s var(--ease);
}
.scroller:hover { opacity: 1; transform: translateY(4px); }
.scroller:active { transform: translateY(6px); }

.scroller__mouse {
  width: 26px; height: 42px;
  border: 2px solid currentColor;
  border-radius: 14px;
  position: relative;
}
.scroller__dot {
  position: absolute;
  left: 50%; top: 8px;
  width: 3px; height: 8px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: currentColor;
  animation: wheel 2.1s var(--ease) infinite;
}
@keyframes wheel {
  0%        { transform: translateY(0);    opacity: 0; }
  18%       { opacity: 1; }
  62%       { transform: translateY(15px); opacity: 1; }
  85%, 100% { transform: translateY(17px); opacity: 0; }
}
.scroller:hover .scroller__dot { animation-duration: 1.2s; }

.scroller__chev {
  width: 11px; height: 11px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  animation: chev 2.1s var(--ease) infinite;
}
@keyframes chev {
  0%, 55%, 100% { transform: rotate(45deg) translate(0, 0); opacity: .3; }
  78%           { transform: rotate(45deg) translate(3px, 3px); opacity: .95; }
}
@media (prefers-reduced-motion: reduce) {
  .scroller__dot, .scroller__chev { animation: none; }
  .scroller__dot { opacity: 1; }
  .scroller__chev { opacity: .7; }
}
.fade--to-ink {
  background: linear-gradient(180deg,
    var(--f-from, var(--paper)) 0%, var(--mid) 52%, var(--ink-2) 86%, var(--ink) 100%);
}
.fade--to-paper {
  background: linear-gradient(180deg,
    var(--ink) 0%, var(--ink-2) 12%, var(--mid) 46%, var(--f-to, var(--paper)) 100%);
}

.band--ink  a:not(.btn), .band--ink2 a:not(.btn) { color: var(--on-ink); }

/* Fein gesetzte Trennlinie */
.hr { height: 1px; border: 0; background: var(--on-paper-line); margin: 0; }
.band--ink .hr, .band--ink2 .hr { background: var(--on-ink-line); }

/* ---------------------------- Typografie ---------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
  text-wrap: balance;
}

.display {
  font-size: clamp(2.6rem, 8.2vw, 6.4rem);
  font-variation-settings: 'wdth' 108;
  text-transform: uppercase;
  letter-spacing: -.02em;
  line-height: .92;
}
.h1 { font-size: clamp(2.2rem, 5.6vw, 4.2rem); line-height: .98; }
.h2 { font-size: clamp(1.9rem, 4.2vw, 3.2rem); line-height: 1.02; }
.h3 { font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height: 1.15; letter-spacing: -.01em; }
.h4 { font-size: 1.05rem; line-height: 1.3; letter-spacing: 0; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(1.08rem, 1.8vw, 1.32rem);
  line-height: 1.6;
  color: var(--on-paper-soft);
  max-width: 62ch;
}
.band--ink .lead, .band--ink2 .lead { color: var(--on-ink-soft); }

.muted { color: var(--on-paper-soft); }
.band--ink .muted, .band--ink2 .muted { color: var(--on-ink-soft); }

.small { font-size: .875rem; line-height: 1.55; }
.tiny  { font-size: .78rem; line-height: 1.5; }

/* Rubrik über einer Überschrift */
.kicker {
  font-family: var(--font-display);
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .26em;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 22px;
  color: var(--on-paper-soft);
}
.kicker::before {
  content: '';
  width: 34px; height: 2px;
  background: currentColor;
  flex: none;
}
.band--ink .kicker, .band--ink2 .kicker { color: var(--on-ink-soft); }

/* Zahlen immer kräftig und tabellarisch – gut lesbar */
.num {
  font-family: var(--font-display);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

/* ------------------------------ Marke ------------------------------- */
/* Das Logo liegt als schwarze Grafik auf Transparenz vor. Auf dunklem
   Grund wird es invertiert – dadurch entsteht exakt das Original-Lockup
   in Weiß. */
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { width: var(--brand-w, 172px); height: auto; transition: filter .35s var(--ease); }
.brand--light img { filter: none; }
.brand--dark img  { filter: invert(1); }

/* ----------------------------- Kopfzeile ---------------------------- */
.hdr {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 18px var(--gut);
  transition: background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.hdr__spacer { flex: 1; }

/* Über dem Hero: transparent, dunkle Schrift (Hero ist oben weiß) */
.hdr { color: var(--on-paper); }

/* Gescrollt: weiße Leiste */
.hdr.is-stuck {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom-color: var(--on-paper-line);
  padding-block: 12px;
}
/* Auf dunklen Abschnitten dreht die Leiste ins Schwarze */
.hdr.is-dark {
  background: rgba(10, 11, 12, .82);
  color: var(--on-ink);
  border-bottom-color: var(--on-ink-line);
}
.hdr.is-dark .brand img { filter: invert(1); }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  position: relative;
  text-decoration: none;
  font-size: .93rem;
  font-weight: 500;
  padding: 10px 14px;
  border-radius: var(--r);
  white-space: nowrap;
  transition: opacity .2s;
}
.nav a::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 4px;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .32s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

.hdr__tel {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  padding: 10px 4px;
  font-variant-numeric: tabular-nums;
}

/* Menü-Schalter (mobil) */
.burger {
  display: none;
  width: 46px; height: 46px;
  border: 1px solid currentColor;
  background: transparent;
  border-radius: var(--r);
  cursor: pointer;
  position: relative;
  flex: none;
}
.burger span {
  position: absolute; left: 13px; right: 13px; height: 1.5px;
  background: currentColor;
  transition: transform .32s var(--ease), opacity .2s;
}
.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 22.5px; }
.burger span:nth-child(3) { top: 28px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 1080px) {
  .burger { display: block; }
  .hdr__tel { display: none; }
  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(420px, 100%);
    background: var(--ink);
    color: var(--on-ink);
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 2px;
    padding: 96px 40px 40px;
    transform: translateX(100%);
    transition: transform .48s var(--ease);
    overflow-y: auto;
  }
  .nav.is-open { transform: none; }
  .nav a {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -.01em;
    padding: 14px 0;
    border-bottom: 1px solid var(--on-ink-line);
  }
  .nav a::after { display: none; }
  .nav .btn { margin-top: 26px; justify-content: center; }
}

/* ---------------------------- Schaltflächen ------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 26px;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .28s var(--ease), background .28s, color .28s, border-color .28s;
  isolation: isolate;
}
.btn::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--paper);
  transform: translateY(101%);
  transition: transform .42s var(--ease);
  z-index: -1;
}
.btn:hover::before { transform: translateY(0); }
.btn:hover { color: var(--ink); border-color: var(--ink); }
.btn:active { transform: translateY(1px); }

.btn--ghost { background: transparent; color: currentColor; border-color: currentColor; }
.btn--ghost::before { background: currentColor; }
.btn--ghost:hover { color: var(--paper); }
.band--ink .btn--ghost:hover, .band--ink2 .btn--ghost:hover { color: var(--ink); }

.btn--light { background: var(--paper); color: var(--ink); }
.btn--light::before { background: var(--ink); }
.btn--light:hover { color: var(--paper); border-color: var(--paper); }

.btn--sm { padding: 11px 18px; font-size: .82rem; }
.btn--lg { padding: 19px 34px; font-size: 1rem; }
.btn--block { display: flex; width: 100%; justify-content: center; }

.btn__arrow { transition: transform .34s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(5px); }

/* Textlink mit Pfeil */
.link {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1.5px solid currentColor;
  transition: gap .3s var(--ease);
}
.link:hover { gap: 15px; }

/* ------------------------------- Hero ------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
}
.hero__media {
  position: absolute; inset: 0;
  z-index: -2;
}
.hero__media video,
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Der Verlauf, der dem Hero die Handschrift gibt: oben weiß, unten schwarz */
.hero__scrim {
  position: absolute; inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.96) 0%,
      rgba(255,255,255,.84) 8%,
      rgba(255,255,255,.38) 20%,
      rgba(255,255,255,0)   33%,
      rgba(10,11,12,.24)    44%,
      rgba(10,11,12,.56)    58%,
      rgba(10,11,12,.78)    72%,
      rgba(10,11,12,.92)    86%,
      var(--ink)           100%);
}
/* zarte Vignette für Tiefe */
.hero__scrim::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 40%, transparent 45%, rgba(10,11,12,.28) 100%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  padding-bottom: clamp(48px, 9vh, 104px);
  padding-top: clamp(150px, 34vh, 46vh);
  color: var(--on-ink);
}
/* Der Abdunkler hängt am Textblock, nicht am Bild. Damit liegt er immer
   dort, wo auch die Schrift steht – unabhängig davon, wie hoch das
   Fenster gerade ist. Oben bleibt er durchsichtig, das Weiß des Heros
   und die dunkle Kopfzeilenschrift bleiben erhalten. */
.hero__inner::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0 calc(var(--gut) * -1) -1px;
  background: linear-gradient(180deg,
    rgba(8, 9, 10, 0)   0%,
    rgba(8, 9, 10, .50) 20%,
    rgba(8, 9, 10, .80) 42%,
    rgba(8, 9, 10, .91) 66%,
    rgba(8, 9, 10, .96) 100%);
  pointer-events: none;
}
.hero__title {
  margin: 0 0 24px;
  max-width: 17ch;
  /* Sicherheitsnetz: Bewegtbild ist nie ganz vorhersehbar */
  text-shadow: 0 2px 34px rgba(0, 0, 0, .45);
}
/* Zeilenweiser Auftritt der Schlagzeile */
.reveal-line { display: block; overflow: hidden; }
.reveal-line > span {
  display: block;
  transform: translateY(112%);
  animation: lineUp 1.05s var(--ease) forwards;
}
.reveal-line:nth-child(1) > span { animation-delay: .12s; }
.reveal-line:nth-child(2) > span { animation-delay: .24s; }
.reveal-line:nth-child(3) > span { animation-delay: .36s; }
@keyframes lineUp { to { transform: translateY(0); } }

/* Marken-Moment: Am Ende der Schleife blendet das Logo im Video ein.
   Schlagzeile und Fließtext treten dafür kurz zurück, damit nicht zwei
   Absender gleichzeitig sprechen. Die Schaltflächen und die Kennzahlen
   bleiben sichtbar und bedienbar. */
.hero__title, .hero__sub { transition: opacity .55s var(--ease); }
.hero.is-sting .hero__title,
.hero.is-sting .hero__sub { opacity: .08; }
@media (prefers-reduced-motion: reduce) {
  .hero.is-sting .hero__title, .hero.is-sting .hero__sub { opacity: 1; }
}

.hero__sub {
  max-width: 54ch;
  color: rgba(255,255,255,.86);
  font-size: clamp(1.02rem, 1.5vw, 1.22rem);
  opacity: 0;
  animation: fadeUp .9s var(--ease) .58s forwards;
}
.hero__cta {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: 34px;
  opacity: 0;
  animation: fadeUp .9s var(--ease) .72s forwards;
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* Kennzahlenband am Fuß des Heros */
.hero__facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: clamp(40px, 7vh, 76px);
  border-top: 1px solid var(--on-ink-line);
  opacity: 0;
  animation: fadeUp .9s var(--ease) .88s forwards;
}
.hero__facts div { padding: 22px 20px 4px 0; }
.hero__facts .num { display: block; font-size: clamp(1.6rem, 3vw, 2.5rem); color: #fff; }
.hero__facts span.lbl { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; color: var(--on-ink-soft); margin-top: 6px; }
@media (max-width: 760px) {
  .hero__facts { grid-template-columns: repeat(2, 1fr); }
}

/* Scroll-Hinweis */
.hero__scroll {
  position: absolute;
  right: var(--gut); bottom: clamp(48px, 9vh, 104px);
  writing-mode: vertical-rl;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .3em;
  color: var(--on-ink-soft);
  display: flex; align-items: center; gap: 14px;
}
.hero__scroll::after {
  content: '';
  width: 1px; height: 56px;
  background: linear-gradient(var(--on-ink-soft), transparent);
  animation: scrollPulse 2.4s var(--ease) infinite;
}
@keyframes scrollPulse { 0%,100% { transform: scaleY(.35); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }
@media (max-width: 900px) { .hero__scroll { display: none; } }

/* Kompakter Kopfbereich für Unterseiten */
.phero {
  padding-top: clamp(150px, 21vh, 230px);
  padding-bottom: clamp(56px, 8vh, 96px);
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper) 40%, var(--paper-2) 100%);
}
.phero .display { font-size: clamp(2.2rem, 6.4vw, 4.8rem); }

/* ---------------------------- Vertrauensband ------------------------ */
.ticker {
  overflow: hidden;
  border-block: 1px solid var(--on-ink-line);
  padding-block: 18px;
  -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; gap: 0; width: max-content;
  animation: marquee 42s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.ticker__item {
  display: inline-flex; align-items: center; gap: 16px;
  padding-inline: 30px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .92rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  white-space: nowrap;
  color: var(--on-ink-soft);
}
.ticker__item::after { content: '·'; opacity: .5; }

/* ---------------------------- Leistungsraster ----------------------- */
.svc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1px;
  background: var(--on-ink-line);
  border: 1px solid var(--on-ink-line);
}
.band--paper .svc, .band--paper2 .svc { background: var(--on-paper-line); border-color: var(--on-paper-line); }

.svc__card {
  background: var(--ink);
  color: var(--on-ink);
  padding: 34px 30px 30px;
  position: relative;
  display: flex; flex-direction: column;
  min-height: 300px;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: color .45s var(--ease);
}
.band--paper .svc__card, .band--paper2 .svc__card, .phero .svc__card {
  background: var(--paper);
  color: var(--on-paper);
}

/* Das Bild liegt hinter dem Text und kommt beim Überfahren nach vorn. */
.svc__media {
  position: absolute; inset: 0;
  z-index: -1;
  opacity: 0;
  transform: scale(1.07);
  transition: opacity .55s var(--ease), transform 1.4s var(--ease);
}
.svc__media picture { display: block; width: 100%; height: 100%; }
.svc__media img { width: 100%; height: 100%; object-fit: cover; }
.svc__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,9,10,.42) 0%, rgba(8,9,10,.58) 45%, rgba(8,9,10,.9) 100%);
}
.svc__card--photo:hover .svc__media,
.svc__card--photo:focus-visible .svc__media { opacity: 1; transform: scale(1); }
.svc__card--photo:hover, .svc__card--photo:focus-visible { color: #fff; }
.svc__card--photo:hover p, .svc__card--photo:focus-visible p { opacity: .88; }

/* Pfeil oben rechts: zeigt an, dass sich hinter der Kachel etwas verbirgt */
.svc__go {
  position: absolute; top: 20px; right: 20px;
  width: 40px; height: 40px;
  border: 1px solid currentColor;
  border-radius: 50%;
  display: grid; place-items: center;
  opacity: .42;
  transition: opacity .35s var(--ease), background .35s var(--ease),
              color .35s var(--ease), border-color .35s var(--ease);
}
.svc__go svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.8; fill: none; }
.svc__go svg { animation: nudge 2.6s var(--ease) infinite; }
@keyframes nudge {
  0%, 62%, 100% { transform: none; }
  76%           { transform: translate(3px, -3px); }
}
.svc__card--photo:hover .svc__go, .svc__card--photo:focus-visible .svc__go {
  opacity: 1;
  background: #fff; color: var(--ink); border-color: #fff;
}
.svc__card--photo:hover .svc__go svg, .svc__card--photo:focus-visible .svc__go svg { animation: none; }
@media (prefers-reduced-motion: reduce) { .svc__go svg { animation: none; } }

/* Ohne Zeigegerät gibt es kein Überfahren – dort ist das Bild dauerhaft da. */
@media (hover: none) {
  .svc__card--photo .svc__media { opacity: 1; transform: none; }
  .svc__card--photo { color: #fff; }
  .svc__card--photo .svc__go { opacity: 1; }
}

.svc__no {
  font-family: var(--font-display);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .22em;
  opacity: .5;
  margin-bottom: auto;
}
.svc__icon { width: 34px; height: 34px; stroke: currentColor; stroke-width: 1.4; fill: none; margin-bottom: 20px; }
.svc__card h3 { margin: 0 0 10px; font-size: 1.35rem; }
.svc__card p { font-size: .93rem; line-height: 1.55; opacity: .72; margin: 0; transition: opacity .45s var(--ease); }
.svc__more {
  margin-top: 20px;
  font-family: var(--font-display); font-weight: 700;
  font-size: .76rem; letter-spacing: .16em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
  opacity: .55;
  transition: opacity .4s var(--ease), gap .4s var(--ease);
}
.svc__card:hover .svc__more, .svc__card:focus-visible .svc__more { opacity: 1; gap: 14px; }
/* Kacheln ohne Bild (Fehlerseite) behalten ihre Bandfarbe. */
.svc__card:not(.svc__card--photo):hover { color: inherit; }

/* ------------------------------ Splitlayout ------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 6vw, 86px);
  align-items: center;
}
.split--narrow { grid-template-columns: 1.05fr .95fr; }
@media (max-width: 900px) { .split, .split--narrow { grid-template-columns: 1fr; } }

.frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--paper-3);
  aspect-ratio: 4 / 5;
}
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame--wide { aspect-ratio: 16 / 10; }

/* Merkmalsliste – der Haken liegt absolut, damit der Text als ein Block
   umbricht und nicht in eine schmale Rasterspalte gedrängt wird. */
.checks { list-style: none; margin: 26px 0 0; padding: 0; display: block; }
.checks li {
  position: relative;
  padding: 13px 0 13px 34px;
  border-top: 1px solid var(--on-paper-line);
  font-size: .96rem;
  line-height: 1.5;
}
.band--ink .checks li, .band--ink2 .checks li { border-color: var(--on-ink-line); }
.checks li::before {
  content: '';
  position: absolute;
  left: 3px; top: 19px;
  width: 15px; height: 9px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}
.checks li b { display: inline; }

/* -------------------------- Ablauf / Schritte ----------------------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--on-ink-line); border: 1px solid var(--on-ink-line); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step { background: var(--ink); padding: 32px 26px 30px; }
.step__no { font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; line-height: 1; opacity: .22; margin-bottom: 18px; }
.step h3 { font-size: 1.12rem; margin-bottom: 8px; }
.step p { font-size: .9rem; color: var(--on-ink-soft); margin: 0; }

/* ------------------------------ Kennzahlen -------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 4vw, 48px); }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat { border-top: 2px solid currentColor; padding-top: 20px; }
.stat .num { display: block; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1; }
.stat .lbl { display: block; margin-top: 10px; font-size: .82rem; text-transform: uppercase; letter-spacing: .14em; opacity: .66; }

/* --------------------------------- FAQ ------------------------------ */
.faq { border-top: 1px solid var(--on-paper-line); }
.band--ink .faq, .band--ink2 .faq { border-color: var(--on-ink-line); }
.faq__item { border-bottom: 1px solid var(--on-paper-line); }
.band--ink .faq__item, .band--ink2 .faq__item { border-color: var(--on-ink-line); }
.faq__q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: none; border: 0;
  padding: 26px 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.02rem, 1.7vw, 1.28rem);
  letter-spacing: -.01em;
}
.faq__sign { position: relative; width: 18px; height: 18px; flex: none; }
.faq__sign::before, .faq__sign::after {
  content: ''; position: absolute; background: currentColor;
  transition: transform .38s var(--ease), opacity .3s;
}
.faq__sign::before { inset: 8px 0 auto 0; height: 2px; }
.faq__sign::after  { inset: 0 8px auto 8px; width: 2px; height: 18px; }
.faq__q[aria-expanded="true"] .faq__sign::after { transform: rotate(90deg); opacity: 0; }
.faq__a { overflow: hidden; height: 0; transition: height .42s var(--ease); }
.faq__a > div { padding: 0 0 26px; max-width: 74ch; }
.faq__a p { font-size: .98rem; }

/* ------------------------------ Formulare --------------------------- */
.form { display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 660px) { .form__row { grid-template-columns: 1fr; } }

.field { display: grid; gap: 7px; }
.field > label {
  font-family: var(--font-display);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  opacity: .72;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 14px 15px;
  background: transparent;
  border: 1px solid var(--on-paper-line);
  border-radius: var(--r);
  font-size: 1rem;
  transition: border-color .25s, background .25s;
}
.band--ink .field input, .band--ink .field select, .band--ink .field textarea,
.band--ink2 .field input, .band--ink2 .field select, .band--ink2 .field textarea,
.band--ink2 .field input, .band--ink2 .field select, .band--ink2 .field textarea {
  border-color: var(--on-ink-line);
  background: rgba(255,255,255,.03);
  color: var(--on-ink);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: currentColor;
  outline: none;
  background: rgba(127,127,127,.06);
}
.field textarea { min-height: 140px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23888' stroke-width='1.6'/></svg>"); background-repeat: no-repeat; background-position: right 15px center; padding-right: 40px; }
.field--err input, .field--err select, .field--err textarea { border-color: var(--err); }
.field__err { font-size: .8rem; color: var(--err); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.consent { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: .86rem; line-height: 1.5; }
.consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: currentColor; }

.note {
  padding: 16px 18px;
  border: 1px solid var(--on-paper-line);
  border-left: 3px solid currentColor;
  border-radius: var(--r);
  font-size: .88rem;
  line-height: 1.55;
}
.band--ink .note, .band--ink2 .note { border-color: var(--on-ink-line); border-left-color: currentColor; }
.note--ok { border-left-color: var(--ok); }
.note--err { border-left-color: var(--err); }

/* -------------------------- Objekt-Konfigurator --------------------- */
.calc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr) minmax(300px, .82fr);
  gap: 1px;
  background: var(--on-paper-line);
  border: 1px solid var(--on-paper-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
@media (max-width: 1180px) { .calc { grid-template-columns: 1fr 1fr; } .calc__sum { grid-column: 1 / -1; } }
@media (max-width: 820px)  { .calc { grid-template-columns: 1fr; } }

.calc__col { background: var(--paper); padding: 26px 24px 28px; min-width: 0; }
.calc__col > h3 {
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .2em;
  margin: 0 0 4px; opacity: .6;
}
.calc__hint { font-size: .82rem; color: var(--on-paper-soft); margin: 0 0 20px; }

/* Objektdaten */
.calc__obj { display: grid; gap: 16px; }
.stepper { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 10px; }
.stepper label { font-size: .9rem; font-weight: 500; }
.stepper label small { display: block; font-size: .74rem; color: var(--on-paper-soft); font-weight: 400; }
.stepper input {
  width: 82px; text-align: center;
  padding: 9px 6px;
  border: 1px solid var(--on-paper-line);
  border-radius: var(--r);
  font-family: var(--font-display); font-weight: 700;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper button {
  width: 34px; height: 34px;
  border: 1px solid var(--on-paper-line);
  background: transparent; border-radius: var(--r);
  cursor: pointer; font-size: 1.1rem; line-height: 1;
  transition: background .2s, color .2s;
}
.stepper button:hover { background: var(--ink); color: var(--paper); }

.segmented { display: flex; gap: 0; border: 1px solid var(--on-paper-line); border-radius: var(--r); overflow: hidden; }
.segmented button {
  flex: 1; padding: 10px 6px; border: 0; background: transparent; cursor: pointer;
  font-size: .8rem; font-weight: 600;
  border-right: 1px solid var(--on-paper-line);
  transition: background .2s, color .2s;
}
.segmented button:last-child { border-right: 0; }
.segmented button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* Leistungspalette */
.palette { display: grid; gap: 8px; max-height: 560px; overflow-y: auto; padding-right: 4px; }
.chip {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--on-paper-line);
  border-radius: var(--r);
  background: var(--paper);
  cursor: grab;
  user-select: none;
  touch-action: none;
  transition: border-color .22s, transform .22s var(--ease), box-shadow .22s, opacity .22s;
}
.chip:hover { border-color: var(--ink); transform: translateX(3px); }
.chip:active { cursor: grabbing; }
.chip.is-used { opacity: .34; pointer-events: none; }
.chip.is-dragging { opacity: .3; }
.chip__ico { width: 26px; height: 26px; stroke: currentColor; stroke-width: 1.5; fill: none; }
.chip__name { font-size: .92rem; font-weight: 600; line-height: 1.25; }
.chip__name small { display: block; font-size: .74rem; font-weight: 400; color: var(--on-paper-soft); }
.chip__add {
  width: 28px; height: 28px; flex: none;
  border: 1px solid var(--on-paper-line);
  border-radius: var(--r);
  background: transparent; cursor: pointer;
  font-size: 1.05rem; line-height: 1;
  display: grid; place-items: center;
  transition: background .2s, color .2s;
}
.chip:hover .chip__add { background: var(--ink); color: var(--paper); }

/* Der Geist, der am Zeiger klebt */
.drag-ghost {
  position: fixed; z-index: 400;
  pointer-events: none;
  width: 260px;
  box-shadow: 0 22px 50px rgba(0,0,0,.28);
  transform: rotate(-1.6deg) scale(1.02);
  background: var(--paper);
  border: 1px solid var(--ink);
}

/* Ablagefläche */
.dropzone {
  min-height: 300px;
  border: 1.5px dashed var(--on-paper-line);
  border-radius: var(--r);
  padding: 14px;
  display: grid;
  gap: 8px;
  align-content: start;
  transition: border-color .25s, background .25s;
}
.dropzone.is-over { border-color: var(--ink); background: rgba(10,11,12,.04); border-style: solid; }
.dropzone__empty {
  align-self: center; justify-self: center;
  text-align: center; padding: 40px 20px;
  color: var(--on-paper-soft);
  font-size: .9rem;
  max-width: 30ch;
}
.dropzone__empty svg { width: 46px; height: 46px; stroke: currentColor; stroke-width: 1.2; fill: none; margin: 0 auto 14px; opacity: .5; }
.dropzone.has-items .dropzone__empty { display: none; }

.picked {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 12px 13px;
  border: 1px solid var(--on-paper-line);
  border-radius: var(--r);
  background: var(--paper-2);
  animation: pop .34s var(--ease);
}
@keyframes pop { from { opacity: 0; transform: translateY(-7px) scale(.98); } to { opacity: 1; transform: none; } }
.picked__t { font-size: .9rem; font-weight: 600; line-height: 1.3; min-width: 0; }
.picked__t small { display: block; font-size: .74rem; font-weight: 400; color: var(--on-paper-soft); }
.picked__p { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; font-size: .95rem; white-space: nowrap; }
.picked__x {
  width: 26px; height: 26px; border: 0; background: transparent; cursor: pointer;
  border-radius: var(--r); font-size: 1.1rem; line-height: 1; opacity: .45;
  transition: opacity .2s, background .2s;
}
.picked__x:hover { opacity: 1; background: rgba(10,11,12,.08); }
.picked select {
  grid-column: 1 / -1;
  padding: 7px 10px; font-size: .8rem;
  border: 1px solid var(--on-paper-line);
  border-radius: var(--r);
  background: var(--paper);
}

/* Zusammenfassung */
.calc__sum { background: var(--ink); color: var(--on-ink); display: flex; flex-direction: column; }
.calc__sum h3 { color: var(--on-ink-soft); }
.calc__sum .calc__hint { color: var(--on-ink-soft); }
.sum__lines { display: grid; gap: 9px; margin-bottom: 18px; font-size: .86rem; }
.sum__line { display: flex; justify-content: space-between; gap: 14px; color: var(--on-ink-soft); }
.sum__line b { color: #fff; font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.sum__total {
  border-top: 1px solid var(--on-ink-line);
  padding-top: 20px; margin-top: auto;
}
.sum__total .lbl { font-size: .74rem; text-transform: uppercase; letter-spacing: .18em; color: var(--on-ink-soft); }
.sum__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.5rem, 5.4vw, 3.4rem);
  line-height: 1;
  letter-spacing: -.03em;
  margin: 8px 0 2px;
  display: flex; align-items: baseline; gap: 8px;
}
.sum__price span { font-size: 1rem; font-weight: 600; letter-spacing: 0; color: var(--on-ink-soft); }
.sum__once { font-size: .84rem; color: var(--on-ink-soft); margin-bottom: 16px; }
.sum__save {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 600;
  color: var(--ok);
  border: 1px solid rgba(23,166,115,.4);
  border-radius: var(--r);
  padding: 5px 10px;
  margin-bottom: 16px;
}
.calc__sum .btn { margin-top: 16px; }
.calc__disclaimer { font-size: .72rem; line-height: 1.5; color: var(--on-ink-soft); margin-top: 14px; }

/* -------------------------- Einsatzgebiet-Prüfung ------------------- */
.plz {
  display: flex; gap: 10px; flex-wrap: wrap;
  max-width: 520px;
}
.plz input {
  flex: 1 1 160px;
  padding: 15px 16px;
  border: 1px solid currentColor;
  border-radius: var(--r);
  background: transparent;
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.1rem; letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
}
.plz__out { margin-top: 18px; min-height: 26px; font-size: .95rem; }
.plz__out b { font-family: var(--font-display); }

/* ------------------------------ Fußzeile ---------------------------- */
.ftr { background: var(--ink); color: var(--on-ink); padding-block: clamp(56px, 8vw, 92px) 34px; }
.ftr__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: clamp(28px, 4vw, 56px); }
@media (max-width: 940px) { .ftr__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ftr__top { grid-template-columns: 1fr; } }
.ftr h4 { font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--on-ink-soft); margin-bottom: 18px; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ftr a { text-decoration: none; font-size: .94rem; opacity: .85; transition: opacity .2s; }
.ftr a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.ftr__brand p { color: var(--on-ink-soft); font-size: .92rem; max-width: 34ch; margin-top: 20px; }
.ftr__bottom {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  justify-content: space-between; align-items: center;
  margin-top: clamp(40px, 6vw, 70px);
  padding-top: 24px;
  border-top: 1px solid var(--on-ink-line);
  font-size: .82rem;
  color: var(--on-ink-soft);
}
.ftr__bottom nav { display: flex; flex-wrap: wrap; gap: 20px; }

/* ------------------------ Notruf-/Kontaktleiste --------------------- */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  background: var(--ink);
  border-top: 1px solid var(--on-ink-line);
  padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom));
  gap: 10px;
}
.sticky-cta .btn { flex: 1; justify-content: center; padding: 13px 10px; font-size: .78rem; }
@media (max-width: 720px) { .sticky-cta { display: flex; } body { padding-bottom: 72px; } }

/* --------------------------- Cookie-Hinweis ------------------------- */
.cookie {
  position: fixed;
  left: var(--gut); bottom: 20px;
  z-index: 120;
  width: min(430px, calc(100vw - 2 * var(--gut)));
  background: var(--paper);
  color: var(--on-paper);
  border: 1px solid var(--ink);
  border-radius: var(--r);
  padding: 22px 22px 20px;
  box-shadow: 0 26px 60px rgba(0,0,0,.28);
  transform: translateY(150%);
  transition: transform .55s var(--ease);
}
.cookie.is-in { transform: none; }
.cookie h4 { margin-bottom: 8px; font-size: 1rem; }
.cookie p { font-size: .84rem; line-height: 1.55; color: var(--on-paper-soft); }
.cookie__row { display: flex; gap: 10px; margin-top: 16px; }
.cookie__row .btn { flex: 1; justify-content: center; padding: 12px; font-size: .76rem; }
@media (max-width: 720px) { .cookie { bottom: 84px; } }

/* --------------------------- Einblendungen -------------------------- */
[data-anim] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: var(--d, 0s);
}
[data-anim].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-anim] { opacity: 1; transform: none; } }

/* ---------------------------- Textseiten ---------------------------- */
.prose { max-width: 74ch; }
.prose h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-top: 2.2em; }
.prose h3 { font-size: 1.15rem; margin-top: 1.8em; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.prose li { margin-bottom: .45em; }
.prose a { text-underline-offset: 3px; }
.prose address { font-style: normal; margin-bottom: 1.2em; }

/* ------------------------------ Hilfsmittel ------------------------- */
.stack > * + * { margin-top: var(--s, 20px); }
.center { text-align: center; }
.center .lead, .center .kicker { margin-inline: auto; }
.center .kicker { justify-content: center; }
.mt-l { margin-top: clamp(34px, 5vw, 56px); }
.nowrap { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --------------------------- Paketkacheln --------------------------- */
.pkg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--on-paper-line); border: 1px solid var(--on-paper-line); border-radius: var(--r-lg); overflow: hidden; }
@media (max-width: 860px) { .pkg { grid-template-columns: 1fr; } }
.pkg__card { background: var(--paper); padding: 34px 28px 30px; position: relative; display: flex; flex-direction: column; gap: 10px; }
.pkg__card--hero { background: var(--ink); color: var(--on-ink); }
.pkg__card--hero .muted { color: var(--on-ink-soft); }
.pkg__flag {
  position: absolute; top: 0; right: 0;
  background: var(--paper); color: var(--ink);
  font-family: var(--font-display); font-weight: 700;
  font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  padding: 7px 12px;
}
.pkg__price { margin-top: auto; padding-top: 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.pkg__price .num { font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1; }

/* -------------------------- Abschlusskasten ------------------------- */
.cta-box {
  display: grid; grid-template-columns: 1.35fr .65fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  border: 1px solid var(--on-ink-line);
  border-radius: var(--r-lg);
  padding: clamp(32px, 5vw, 60px);
}
.band--paper .cta-box, .band--paper2 .cta-box { border-color: var(--on-paper-line); }
@media (max-width: 900px) { .cta-box { grid-template-columns: 1fr; } }

/* --------------------------- Hinweisleiste -------------------------- */
.notice-bar {
  position: fixed; z-index: 110;
  left: 50%; bottom: 22px;
  transform: translate(-50%, 160%);
  display: flex; align-items: center; gap: 14px;
  max-width: min(640px, calc(100vw - 32px));
  background: var(--ink); color: var(--on-ink);
  border: 1px solid var(--on-ink-line);
  border-radius: 100px;
  padding: 12px 14px 12px 20px;
  font-size: .88rem; line-height: 1.4;
  box-shadow: 0 20px 46px rgba(0,0,0,.35);
  transition: transform .55s var(--ease);
}
.notice-bar.is-in { transform: translate(-50%, 0); }
.notice-bar__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); flex: none; box-shadow: 0 0 0 0 rgba(23,166,115,.6); animation: ping 2.2s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 11px rgba(23,166,115,0); } 100% { box-shadow: 0 0 0 0 rgba(23,166,115,0); } }
.notice-bar button { background: none; border: 0; color: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer; opacity: .55; padding: 0 4px; }
.notice-bar button:hover { opacity: 1; }
@media (max-width: 720px) { .notice-bar { bottom: 84px; } }

/* --------------------------- Leistungsseite ------------------------- */
.lsvc { border-top: 1px solid var(--on-paper-line); padding-block: clamp(46px, 7vw, 92px); scroll-margin-top: 96px; }
.band--ink .lsvc, .band--ink2 .lsvc { border-color: var(--on-ink-line); }
.lsvc__grid { display: grid; grid-template-columns: minmax(0,.42fr) minmax(0,.58fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (max-width: 900px) { .lsvc__grid { grid-template-columns: 1fr; } }
.lsvc__head { position: sticky; top: 108px; }
@media (max-width: 900px) { .lsvc__head { position: static; } }
.lsvc__no { font-family: var(--font-display); font-weight: 800; font-size: .78rem; letter-spacing: .24em; opacity: .45; margin-bottom: 12px; }
.lsvc__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 34px; }
@media (max-width: 620px) { .lsvc__cols { grid-template-columns: 1fr; } }
.lsvc__price {
  display: inline-flex; align-items: baseline; gap: 8px;
  margin-top: 22px; padding: 10px 15px;
  border: 1px solid var(--on-paper-line); border-radius: var(--r);
  font-size: .84rem;
}
.band--ink .lsvc__price, .band--ink2 .lsvc__price { border-color: var(--on-ink-line); }
.lsvc__price b { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: 1.05rem; }

/* --------------------------- Schadensmeldung ------------------------ */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips label {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 16px;
  border: 1px solid var(--on-paper-line);
  border-radius: 100px;
  font-size: .88rem; font-weight: 500;
  cursor: pointer;
  transition: background .22s, color .22s, border-color .22s;
}
.band--ink .chips label, .band--ink2 .chips label { border-color: var(--on-ink-line); }
.chips label:hover { border-color: currentColor; }
.chips input:checked + label { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.band--ink .chips input:checked + label, .band--ink2 .chips input:checked + label { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.chips input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 3px; }

.drop-file {
  position: relative;
  display: block;
  border: 1.5px dashed var(--on-paper-line);
  border-radius: var(--r);
  padding: 26px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color .25s, background .25s;
}
.band--ink .drop-file, .band--ink2 .drop-file { border-color: var(--on-ink-line); }
.drop-file:hover, .drop-file.is-over { border-color: currentColor; background: rgba(127,127,127,.06); }
.drop-file input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.drop-file svg { width: 34px; height: 34px; stroke: currentColor; stroke-width: 1.3; fill: none; margin: 0 auto 12px; opacity: .55; }
.drop-file__list { display: grid; gap: 6px; margin-top: 14px; text-align: left; }
.drop-file__list div { display: flex; justify-content: space-between; gap: 12px; font-size: .82rem; padding: 7px 10px; background: rgba(127,127,127,.1); border-radius: var(--r); }

/* --------------------------- Kontaktkacheln ------------------------- */
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--on-paper-line); border: 1px solid var(--on-paper-line); }
@media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; } }
.band--ink .contact-grid, .band--ink2 .contact-grid { background: var(--on-ink-line); border-color: var(--on-ink-line); }
.contact-card { background: var(--paper); padding: 30px 26px; }
.band--ink .contact-card, .band--ink2 .contact-card { background: var(--ink); }
.contact-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.contact-card a { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; text-decoration: none; border-bottom: 1.5px solid currentColor; }

/* ------------------------- Formularabschnitt ------------------------ */
.form-wrap {
  border: 1px solid var(--on-paper-line);
  border-radius: var(--r-lg);
  padding: clamp(26px, 4vw, 48px);
  background: var(--paper);
}
.band--ink .form-wrap, .band--ink2 .form-wrap {
  border-color: var(--on-ink-line); background: rgba(255,255,255,.02);
}
.form__msg { margin-top: 6px; }

/* ---------------------- Kalkulator: Kopfbereich --------------------- */
.calc-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.presets { display: flex; flex-wrap: wrap; gap: 8px; }
.presets button {
  padding: 10px 16px;
  border: 1px solid var(--on-paper-line);
  border-radius: 100px;
  background: transparent; cursor: pointer;
  font-size: .84rem; font-weight: 600;
  transition: background .22s, color .22s, border-color .22s;
}
.presets button:hover { border-color: var(--ink); }
.presets button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Druckausgabe */
@media print {
  .hdr, .sticky-cta, .cookie, .hero__media, .hero__scroll { display: none !important; }
  body { background: #fff; color: #000; }
  .band, .band--ink, .band--ink2 { background: #fff !important; color: #000 !important; padding-block: 20px; }
  .fade, .svc__media, .svc__go { display: none !important; }
  .svc__card { color: #000 !important; border: 1px solid #ccc; }
}