/* ============================================================
   K&R Beschriftung GmbH – Stylesheet
   Basis: Weiß / Anthrazit / Schwarz · Akzent: Gelb → Orange → Rot
   ============================================================ */

:root {
  --c-white: #ffffff;
  --c-grey-050: #f7f7f6;
  --c-grey-100: #efefed;
  --c-grey-300: #d3d3d0;
  --c-grey-600: #6b6b70;
  --c-anthracite: #26262b;
  --c-black: #17171a;
  /* Akzente nach echtem K&R-Logo: warmes Orange mit Gelb- und Rot-Anteil */
  --c-yellow: #ffab2e;
  --c-orange: #f26522;
  --c-red: #e0391e;
  --grad-accent: linear-gradient(94deg, var(--c-yellow) 0%, var(--c-orange) 55%, var(--c-red) 115%);
  /* Dunkleres Orange für kleinen Text auf hellem Grund (Kontrast ≥ 4,5:1) */
  --c-orange-text: #c2410c;
  --radius: 18px;
  --shadow-soft: 0 10px 40px rgba(23, 23, 26, .10);
  --shadow-card: 0 6px 24px rgba(23, 23, 26, .07);
  --font: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --nav-h: 72px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }

body {
  font-family: var(--font);
  color: var(--c-anthracite);
  background: var(--c-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* height:auto ist hier kein Schmuck: die Bilder tragen im HTML width= und
   height= als Attribute (gut fuer den Seitenaufbau, verhindert Springen).
   Greift dann max-width:100%, bleibt ohne height:auto die Attribut-Hoehe
   stehen und das Bild wird verzerrt. Wer einem Bild per CSS eine Hoehe gibt,
   muss aus demselben Grund width:auto dazuschreiben. */
img { max-width: 100%; height: auto; display: block; }

.container { width: min(1180px, 92%); margin-inline: auto; }

/* ---------- Barrierefreiheit: Skip-Link & Fokus ---------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--c-anthracite); color: var(--c-white);
  padding: .8rem 1.4rem; border-radius: 0 0 12px 0;
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* Sichtbarer Tastatur-Fokus überall */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--c-orange); outline-offset: 2px; border-radius: 4px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .95rem 2rem; border-radius: 999px;
  font-weight: 700; font-size: 1rem; text-decoration: none;
  border: 2px solid transparent; cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.btn-primary {
  background: var(--grad-accent); color: var(--c-black);
  box-shadow: 0 8px 24px rgba(255, 138, 0, .35);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(255, 138, 0, .45); }
.btn-ghost { border-color: var(--c-grey-300); color: var(--c-anthracite); background: transparent; }
.btn-ghost:hover { border-color: var(--c-anthracite); transform: translateY(-2px); }
.section-dark .btn-ghost { border-color: rgba(255,255,255,.3); color: var(--c-white); }

@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(255, 138, 0, .35); }
  50% { box-shadow: 0 8px 34px rgba(255, 138, 0, .60); }
}
.btn-glow { animation: ctaPulse 3.2s ease-in-out infinite; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-h);
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(23, 23, 26, .06);
  transition: box-shadow .3s ease;
}
.site-header.is-scrolled { box-shadow: 0 4px 24px rgba(23,23,26,.08); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; }

/* ---------- Logo ----------
   Kopfzeile: echte Bildmarke (logo-kr-marke.png) links, danach der orange
   Strich und der Schriftzug als echter Text. Als Text bleibt "Werbetechnik
   GmbH" in jeder Groesse scharf - im Logo-Bild war das Wort so klein in den
   orangen Balken gesetzt, dass davon nur ein Fleck uebrig blieb.
   Die Fusszeile nutzt dasselbe Gespann in Weiss, nur groesser - Groessen
   stehen weiter unten bei .footer-logo.                                     */
.logo {
  display: inline-flex; align-items: center; gap: .55rem;
  text-decoration: none; color: var(--c-anthracite);
  transition: transform 160ms cubic-bezier(.23, 1, .32, 1);
}
/* flex-shrink: 0 - sonst quetscht der Flex-Kasten Marke und Strich zusammen,
   wenn die Spalte schmal wird, und die Marke verliert ihr Verhaeltnis. */
.logo-mark { height: 36px; width: auto; display: block; flex-shrink: 0; }
.logo-bar { width: 4px; height: 2.1rem; background: var(--c-orange); border-radius: 1px; flex-shrink: 0; }
.logo-wordmark { display: flex; flex-direction: column; line-height: 1.05; }
.logo-sub {
  font-size: .58rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--c-orange-text);
}
.logo-main { font-size: 1.06rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.logo-invert, .logo-invert .logo-main { color: var(--c-white); }
/* Kurzes Nachgeben beim Druecken - dasselbe Mass wie bei den Sozialen-Knoepfen */
.logo:active { transform: scale(.97); }
/* Das Sprungziel darf die Seite nicht verschieben */
#top { height: 0; }

.main-nav { display: flex; align-items: center; gap: 1.9rem; }
.main-nav a {
  text-decoration: none; color: var(--c-anthracite); font-weight: 600; font-size: .98rem;
  position: relative; padding: .3rem 0;
}
.main-nav a:not(.nav-cta)::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2.5px; width: 0;
  background: var(--grad-accent); border-radius: 2px; transition: width .28s ease;
}
.main-nav a:not(.nav-cta):hover::after { width: 100%; }
.nav-cta {
  background: var(--c-anthracite); color: var(--c-white) !important;
  padding: .55rem 1.4rem !important; border-radius: 999px;
  transition: background .25s ease;
}
.nav-cta:hover { background: var(--c-black); }

.nav-toggle { display: none; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; }
.nav-toggle span {
  display: block; width: 24px; height: 2.5px; margin: 5px auto;
  background: var(--c-anthracite); border-radius: 2px; transition: transform .3s ease, opacity .3s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  min-height: 100svh;
  display: flex; align-items: center;
  padding: calc(var(--nav-h) + 3rem) 0 4rem;
  background:
    radial-gradient(1100px 500px at 85% 8%, rgba(255, 193, 7, .10), transparent 60%),
    radial-gradient(900px 500px at 10% 100%, rgba(232, 68, 46, .06), transparent 60%),
    var(--c-white);
}
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 3.5rem; align-items: center;
}
.hero-kicker {
  font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  font-size: .85rem; color: var(--c-orange-text); margin-bottom: 1.1rem;
}
.hero-headline {
  font-size: clamp(2.3rem, 4.6vw, 3.7rem);
  line-height: 1.08; font-weight: 900; letter-spacing: -.025em;
  margin-bottom: 1.4rem;
}
.accent-gradient {
  background: var(--grad-accent);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-subline { font-size: 1.13rem; color: var(--c-grey-600); max-width: 44ch; margin-bottom: 2.2rem; }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Einblendung beim Laden */
.reveal-load { opacity: 0; transform: translateY(22px); animation: rise .8s ease forwards; }
.reveal-load.delay-1 { animation-delay: .15s; }
.reveal-load.delay-2 { animation-delay: .3s; }
.reveal-load.delay-3 { animation-delay: .45s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* Folierungs-Animation */
.hero-visual { position: relative; }
.wrap-stage {
  position: relative; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-soft);
}
/* Vorher/Nachher-Bühne: Basis (Vorher) + Folierungs-Ebene (Nachher) */
.wrap-stage { aspect-ratio: 16 / 9; }
.wrap-stage img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.stage-base { transition: filter .4s ease; }
.stage-base.is-gray { filter: grayscale(1) brightness(.92) contrast(.96); }
.stage-topwrap {
  position: absolute; inset: 0;
  clip-path: inset(0 100% 0 0);
}
.stage-topwrap.wipe {
  clip-path: inset(0 0 0 0);
  transition: clip-path 2.2s cubic-bezier(.6, .05, .3, .95);
}
/* Standbild-Ebene: friert beim Slide-Wechsel das fertige Nachher-Bild ein
   und blendet weich zum neuen Vorher-Bild ueber (kein harter Schnitt) */
.stage-hold {
  position: absolute; inset: 0; z-index: 2;
  opacity: 0; pointer-events: none;
  transition: opacity .65s ease;
}
.stage-hold.show { opacity: 1; transition: none; }
.stage-hold img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}

.foil-edge {
  position: absolute; top: 0; bottom: 0; width: 3px; left: 0;
  background: var(--grad-accent);
  filter: drop-shadow(0 0 12px rgba(242, 101, 34, .85));
  opacity: 0; transition: opacity .3s ease;
  z-index: 3;
}
.foil-edge.wipe {
  left: calc(100% - 3px); opacity: 1;
  transition: left 2.2s cubic-bezier(.6, .05, .3, .95), opacity .2s ease;
}

.hero-labels {
  display: flex; flex-wrap: wrap; gap: .6rem;
  list-style: none; margin-bottom: 1.3rem;
}
.hero-labels li {
  opacity: 0; transform: translateY(10px);
  animation: rise .55s ease forwards;
}
.hero-labels button {
  font-family: var(--font); font-size: .88rem; font-weight: 600;
  color: var(--c-anthracite); cursor: pointer;
  padding: .42rem 1rem; border-radius: 999px;
  background: var(--c-grey-050); border: 1px solid var(--c-grey-100);
  transition: background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.hero-labels button:hover { border-color: var(--c-orange); color: var(--c-orange-text); }
.hero-labels button.is-active {
  background: var(--grad-accent); color: var(--c-black);
  border-color: transparent; font-weight: 700;
  box-shadow: 0 4px 16px rgba(242, 101, 34, .35);
}
.hero-labels button.is-active:hover { color: var(--c-black); }
.hero-labels li:nth-child(1) { animation-delay: 2.4s; }
.hero-labels li:nth-child(2) { animation-delay: 2.6s; }
.hero-labels li:nth-child(3) { animation-delay: 2.8s; }
.hero-labels li:nth-child(4) { animation-delay: 3.0s; }
.hero-labels li:nth-child(5) { animation-delay: 3.2s; }

/* ---------- Sections (allgemein) ---------- */
.section { padding: 6.5rem 0; }
.section-grey { background: var(--c-grey-050); }
.section-dark { background: var(--c-anthracite); color: var(--c-white); }
.section-dark .section-headline { color: var(--c-white); }
.section-dark .section-intro { color: rgba(255,255,255,.75); }

.section-kicker {
  font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  font-size: .82rem; color: var(--c-orange-text); margin-bottom: .9rem;
}
/* Auf dunklem Grund reicht das helle Gelb (starker Kontrast) */
.section-dark .section-kicker { color: var(--c-yellow); }
.section-headline {
  font-size: clamp(1.75rem, 3.2vw, 2.6rem);
  font-weight: 850; letter-spacing: -.02em; line-height: 1.15;
  max-width: 24ch; margin-bottom: 1.2rem;
}
.section-intro { font-size: 1.1rem; color: var(--c-grey-600); max-width: 58ch; margin-bottom: 2.8rem; }

/* Scroll-Reveal */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Leistungs-Karten ---------- */
.cards-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem;
  margin-top: 3rem;
}
.card {
  background: var(--c-white); border: 1px solid var(--c-grey-100);
  border-radius: var(--radius); padding: 0;
  box-shadow: var(--shadow-card);
  transition: transform .3s ease, box-shadow .3s ease;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
}
.card-img { aspect-ratio: 4 / 3; overflow: hidden; }
.card-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
.card:hover .card-img img { transform: scale(1.05); }
.card-body { padding: 1.5rem 1.5rem 1.8rem; }
.card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--grad-accent);
  transform: scaleX(0); transform-origin: left; transition: transform .35s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.card:hover::before { transform: scaleX(1); }
.card h3 { font-size: 1.18rem; font-weight: 800; margin-bottom: .55rem; letter-spacing: -.01em; }
.card p { font-size: .96rem; color: var(--c-grey-600); }

/* Reveal-Staffelung für Kartenreihen */
.cards-grid .card:nth-child(2), .steps .step:nth-child(2) { transition-delay: .1s; }
.cards-grid .card:nth-child(3), .steps .step:nth-child(3) { transition-delay: .2s; }
.cards-grid .card:nth-child(4), .steps .step:nth-child(4) { transition-delay: .3s; }
.steps .step:nth-child(5) { transition-delay: .4s; }

/* ---------- Vorher / Nachher ---------- */
.ba-tabs {
  display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem;
}
.ba-tab {
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06);
  color: var(--c-white); border-radius: 999px; padding: .5rem 1.2rem;
  font-size: .9rem; font-weight: 700; cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s;
}
.ba-tab:hover { background: rgba(255,255,255,.14); }
.ba-tab.is-active { background: var(--grad-accent); color: var(--c-black); border-color: transparent; }

.ba-slider {
  position: relative; border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  /* pan-y: Seite bleibt auf dem Handy vertikal scrollbar, Regler zieht horizontal */
  user-select: none; touch-action: pan-y; cursor: ew-resize;
  margin-top: 1rem; width: 100%; aspect-ratio: 3 / 2; background: #14141a;
}
.ba-slider img { pointer-events: none; }
.ba-base { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-after {
  position: absolute; inset: 0; overflow: hidden;
  clip-path: inset(0 0 0 50%);
}
.ba-after img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; }
.ba-handle {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 0; outline: none;
}
.ba-line {
  position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px;
  background: var(--c-white); box-shadow: 0 0 14px rgba(0,0,0,.4);
}
.ba-knob {
  position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--grad-accent); color: var(--c-black);
  display: grid; place-items: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
  transition: transform .2s ease;
}
.ba-handle:focus-visible .ba-knob { outline: 3px solid var(--c-white); outline-offset: 2px; }
.ba-slider:hover .ba-knob { transform: translate(-50%, -50%) scale(1.07); }
.ba-tag {
  position: absolute; top: 1rem; padding: .35rem 1rem; border-radius: 999px;
  font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(23,23,26,.65); color: var(--c-white); backdrop-filter: blur(6px);
}
.ba-tag-before { left: 1rem; }
.ba-tag-after { right: 1rem; background: var(--grad-accent); color: var(--c-black); }

/* ---------- Ablauf ---------- */
.steps {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.3rem;
  list-style: none; margin-top: 3rem; counter-reset: step;
}
.step {
  background: var(--c-grey-050); border-radius: var(--radius);
  padding: 1.8rem 1.4rem; position: relative;
}
.step-num {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--grad-accent); color: var(--c-black);
  font-weight: 900; font-size: 1.15rem; margin-bottom: 1rem;
}
.step h3 { font-size: 1.02rem; font-weight: 800; margin-bottom: .45rem; line-height: 1.3; }
.step p { font-size: .9rem; color: var(--c-grey-600); }

/* ---------- Galerie ---------- */
.gallery-filters { display: flex; flex-wrap: wrap; gap: .6rem; margin: 2.2rem 0 2rem; }
.filter-btn {
  padding: .55rem 1.3rem; border-radius: 999px; border: 1.5px solid var(--c-grey-300);
  background: var(--c-white); color: var(--c-anthracite);
  font-family: var(--font); font-size: .93rem; font-weight: 600; cursor: pointer;
  transition: all .25s ease;
}
.filter-btn:hover { border-color: var(--c-orange); color: var(--c-orange-text); }
.filter-btn.is-active {
  background: var(--c-anthracite); border-color: var(--c-anthracite); color: var(--c-white);
}
.gallery-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem;
}
.gallery-item {
  position: relative; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-card); aspect-ratio: 4 / 3;
  transition: transform .35s ease, box-shadow .35s ease, opacity .35s ease;
}
.gallery-item.is-hidden { display: none; }
.gallery-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s ease;
}
.gallery-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item figcaption {
  position: absolute; inset: auto 0 0 0; padding: 2.2rem 1.3rem 1.1rem;
  background: linear-gradient(transparent, rgba(23,23,26,.85));
  color: var(--c-white);
  opacity: 0; transform: translateY(12px);
  transition: opacity .35s ease, transform .35s ease;
  display: flex; flex-direction: column; gap: .1rem;
}
.gallery-item:hover figcaption { opacity: 1; transform: none; }
.gallery-item figcaption strong { font-size: 1rem; }
.gallery-item figcaption span { font-size: .85rem; opacity: .85; }

/* ---------- Über uns ---------- */
.about-grid {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 4rem; align-items: center;
}
.about-copy p { color: var(--c-grey-600); margin-bottom: 1.1rem; max-width: 56ch; }
.about-facts {
  display: flex; gap: 2.6rem; list-style: none; margin-top: 2.2rem; flex-wrap: wrap;
}
.about-facts li { display: flex; flex-direction: column; }
.about-facts strong {
  font-size: 2rem; font-weight: 900; letter-spacing: -.02em;
  background: var(--grad-accent);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.about-facts span { font-size: .9rem; color: var(--c-grey-600); }
.about-visual img { border-radius: var(--radius); box-shadow: var(--shadow-soft); }

/* ---------- Kontakt ---------- */
.contact-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 4rem; align-items: start;
}
.contact-copy > p { color: rgba(255,255,255,.75); max-width: 46ch; }
.contact-list { list-style: none; margin-top: 2.4rem; display: grid; gap: 1.5rem; }
.contact-list li { display: flex; flex-direction: column; gap: .15rem; }
.contact-label {
  font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-yellow);
}
.contact-list a, .contact-list address {
  color: var(--c-white); font-style: normal; font-size: 1.15rem; font-weight: 600;
  text-decoration: none;
}
.contact-list a:hover { text-decoration: underline; text-decoration-color: var(--c-orange); }

/* Social-Links (Kontakt + Fuß) */
.social-links { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .3rem; }
.social-links a {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .95rem .5rem .75rem; border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,.22); color: var(--c-white);
  font-size: .95rem; font-weight: 600; text-decoration: none;
  transition: transform 160ms cubic-bezier(.23, 1, .32, 1), border-color 150ms ease, background-color 150ms ease;
}
.social-links a:hover { border-color: var(--c-orange); background: rgba(242,101,34,.12); text-decoration: none; }
.social-links a:active { transform: scale(.97); }
.social-links svg { flex: none; }
.social-links-footer { margin-top: 1rem; }
.social-links-footer a { font-size: .88rem; padding: .4rem .8rem .4rem .6rem; }
.social-links-footer svg { width: 17px; height: 17px; }

.contact-form {
  background: var(--c-white); color: var(--c-anthracite);
  border-radius: var(--radius); padding: 2.2rem;
  box-shadow: 0 24px 70px rgba(0,0,0,.35);
  display: grid; gap: 1.1rem;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.form-field { display: grid; gap: .35rem; }
.form-field label { font-size: .88rem; font-weight: 700; }
.form-field input, .form-field select, .form-field textarea {
  font-family: var(--font); font-size: 1rem; color: var(--c-anthracite);
  padding: .8rem 1rem; border: 1.5px solid var(--c-grey-300); border-radius: 12px;
  background: var(--c-grey-050); width: 100%;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--c-orange);
  box-shadow: 0 0 0 3px rgba(255, 138, 0, .18);
}
.form-field textarea { resize: vertical; }
.form-field input[type="file"] { padding: .6rem; background: var(--c-white); border-style: dashed; }
.form-hint { font-size: .8rem; color: var(--c-grey-600); }
.form-status { font-size: .95rem; font-weight: 600; min-height: 1.4em; }
/* Honeypot-Feld: für Menschen unsichtbar, Bots füllen es trotzdem aus */
.hp-field {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}
.form-status.ok { color: #2e7d32; }
.form-status.err { color: var(--c-red); }

/* ---------- Footer ---------- */
.site-footer { background: var(--c-black); color: rgba(255,255,255,.8); padding: 4rem 0 2rem; }
.footer-grid {
  display: grid; grid-template-columns: 2fr 1.2fr 1.2fr 1fr; gap: 2.5rem;
  padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,.1);
}
/* Dasselbe Gespann wie in der Kopfzeile, nur etwas groesser und in Weiss.
   Als Bild lag das Logo hier zu eng beieinander und die Leistungszeile war
   bei der Groesse ohnehin nicht mehr zu lesen. */
.footer-logo { margin-bottom: .55rem; }
.footer-logo .logo-mark { height: 46px; }
.footer-logo .logo-bar { height: 2.6rem; }
.footer-logo .logo-sub { font-size: .64rem; color: var(--c-orange); }
.footer-logo .logo-main { font-size: 1.3rem; }
/* Die Leistungszeile aus der Bildmarke, hier als Text gesetzt: gleiche
   Reihenfolge und gleicher Zeilenumbruch wie im Logo, Trenner in Orange. */
.logo-leistungen {
  font-size: .68rem; font-weight: 600; letter-spacing: .05em; line-height: 1.75;
  color: rgba(255,255,255,.72); margin-bottom: 1.1rem;
}
.logo-leistungen .trenner { color: var(--c-orange); font-weight: 700; padding: 0 .12rem; }
.footer-claim { font-size: .95rem; color: rgba(255,255,255,.55); }
.site-footer h4 {
  font-size: .85rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-yellow); margin-bottom: .9rem;
}
.site-footer ul { list-style: none; display: grid; gap: .45rem; }
.site-footer a { color: rgba(255,255,255,.8); text-decoration: none; }
.site-footer a:hover { color: var(--c-white); text-decoration: underline; text-decoration-color: var(--c-orange); }
.site-footer address { font-style: normal; line-height: 1.9; }
.footer-bottom { padding-top: 1.6rem; font-size: .85rem; color: rgba(255,255,255,.45); }
/* Dezenter Hinweis auf KI-bearbeitete Inhalte (EU-KI-Verordnung, Art. 50) */
.footer-ki { margin-top: .4rem; font-size: .78rem; color: rgba(255,255,255,.5); } /* .5 = Kontrast ≥ 4,5:1 auf Schwarz, trotzdem zurückhaltend */
.footer-ki a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255,255,255,.25); }
.footer-ki a:hover { color: rgba(255,255,255,.6); }

/* ---------- Floating CTA ---------- */
.floating-cta {
  position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 90;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .85rem 1.4rem; border-radius: 999px;
  background: var(--grad-accent); color: var(--c-black);
  font-weight: 800; font-size: .95rem; text-decoration: none;
  box-shadow: 0 10px 30px rgba(255, 138, 0, .45);
  opacity: 0; transform: translateY(20px); pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
.floating-cta.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.floating-cta:hover { transform: translateY(-2px); }

/* ---------- Datenschutz-Hinweis (Folierung statt Keks) ---------- */
.consent-banner {
  position: fixed; z-index: 150;
  left: 1.2rem; right: 1.2rem; bottom: 1.2rem;
  margin-inline: auto; max-width: 680px;
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 1.2rem; align-items: center;
  background: var(--c-anthracite); color: var(--c-white);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius); padding: 1.2rem 1.4rem;
  box-shadow: 0 24px 70px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(24px);
  transition: opacity .45s ease, transform .45s ease;
}
.consent-banner.is-visible { opacity: 1; transform: none; }
.consent-banner[hidden] { display: none; }

/* Mini-Bühne: eine Folie wird über die Fläche gezogen */
.consent-stage {
  position: relative; width: 86px; height: 56px;
  border-radius: 10px; overflow: hidden;
  background: #35353b;
}
.consent-surface { position: absolute; inset: 0; background: #4a4a52; }
.consent-wrap {
  position: absolute; inset: 0;
  background: var(--grad-accent);
  clip-path: inset(0 100% 0 0);
  animation: foilWipe 3.6s cubic-bezier(.6,.05,.3,.95) infinite;
}
.consent-rakel {
  position: absolute; top: 6px; bottom: 6px; left: -6px; width: 5px;
  border-radius: 3px; background: var(--c-white);
  box-shadow: 0 0 10px rgba(255,255,255,.6);
  animation: rakelMove 3.6s cubic-bezier(.6,.05,.3,.95) infinite;
}
@keyframes foilWipe {
  0%, 12%   { clip-path: inset(0 100% 0 0); }
  55%, 82%  { clip-path: inset(0 0 0 0); }
  96%, 100% { clip-path: inset(0 100% 0 0); }
}
@keyframes rakelMove {
  0%, 12%   { left: -6px; opacity: 1; }
  55%       { left: calc(100% + 2px); opacity: 1; }
  70%, 100% { left: calc(100% + 2px); opacity: 0; }
}
.consent-text strong { display: block; font-size: 1rem; margin-bottom: .25rem; }
.consent-text p { font-size: .88rem; color: rgba(255,255,255,.75); line-height: 1.5; }
.consent-text a { color: var(--c-yellow); }
.consent-ok { padding: .7rem 1.5rem; font-size: .95rem; min-height: 48px; }

@media (max-width: 700px) {
  .consent-banner {
    grid-template-columns: 1fr;
    text-align: left; gap: .9rem;
    left: .8rem; right: .8rem; bottom: .8rem;
    padding: 1.1rem 1.2rem;
  }
  .consent-foil { display: none; }
  .consent-ok { width: 100%; }
}

/* ---------- Rechtsseiten ---------- */
.legal-page { padding: calc(var(--nav-h) + 4rem) 0 5rem; }
.legal-page h1 { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 900; letter-spacing: -.02em; margin-bottom: 2rem; }
.legal-page h2 { font-size: 1.3rem; font-weight: 800; margin: 2.2rem 0 .7rem; }
.legal-page p, .legal-page li { color: var(--c-grey-600); max-width: 75ch; margin-bottom: .6rem; }
.legal-page ul { padding-left: 1.2rem; }
.legal-page a { color: var(--c-orange-text); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-grid, .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 2.6rem; }
  .hero { min-height: auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  .section { padding: 4.2rem 0; }
  .cards-grid, .steps, .gallery-grid, .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .contact-form { padding: 1.5rem; }
  .about-facts { gap: 1.8rem; }

  .main-nav {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--c-white); border-bottom: 1px solid var(--c-grey-100);
    box-shadow: 0 20px 40px rgba(23,23,26,.12);
    max-height: 0; overflow: hidden; transition: max-height .35s ease;
  }
  .main-nav.is-open { max-height: 26rem; }
  .main-nav a { padding: 1rem 6%; border-top: 1px solid var(--c-grey-050); }
  .main-nav a:not(.nav-cta)::after { display: none; }
  .nav-cta { border-radius: 0; text-align: center; margin: .6rem 6% 1rem; border-radius: 999px; }
  .nav-toggle { display: block; }
}

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal-load, .hero-labels li { animation: none; opacity: 1; transform: none; }
  .stage-topwrap, .stage-topwrap.wipe { clip-path: inset(0 0 0 0); transition: none; }
  .foil-edge { display: none; }
  .reveal { transition: none; opacity: 1; transform: none; }
  .btn-glow { animation: none; }
  .consent-wrap { animation: none; clip-path: inset(0 0 0 0); }
  .consent-rakel { animation: none; opacity: 0; }
  .consent-banner { transition: none; }
  .stage-hold { transition: none; opacity: 0 !important; }
}