/* =====================================================================
   Demczenko & Co. GmbH – Design 2026
   ---------------------------------------------------------------------
   Klar, ruhig, hochwertig: dunkler Schiefer-Header, weinrote Marke
   oben links, helle Flächen, kräftige Typografie, weiße Karten.
   Deckt alle öffentlichen Seiten ab (Startseite + Unterseiten).
   Klassennamen sind unverändert, damit script.js weiter greift.
   ===================================================================== */

/* ---------- 1. Design-Tokens ---------- */
:root {
  --wine: #C35050;          /* Markenfarbe (Header-Fläche, Akzente) */
  --wine-strong: #A83838;   /* für Flächen mit weißer Schrift (6,4:1) */
  --wine-deep: #8F2C2C;     /* Hover */
  --wine-tint: #F6E6E6;
  --cream: #F5EEE3;         /* Cremeweiß – Fläche oben links im Header */

  --slate: #51565C;         /* RAL 7015 Schiefergrau – Header & Footer */
  --header-glass: rgba(81, 86, 92, .9);
  --cream-glass: rgba(245, 238, 227, .86);
  --navy: var(--slate);     /* Alias, damit bestehende Regeln greifen */
  --navy-2: #5E646B;
  --navy-line: rgba(255,255,255,0.12);

  --bg: #EDEFF0;
  --surface: #FFFFFF;
  --surface-2: #F5F6F7;
  --ink: #15181B;
  --text: #24282C;
  --muted: #4F555B;
  --line: #D8DCDF;
  --field-border: #7A828A;  /* Formularränder: 3,6:1 gegen die Feldfläche */
  --on-dark: #FFFFFF;
  --on-dark-muted: #EDEFF0;   /* helle Nebenzeile: 4,7:1 auch auf der Milchglasfläche */

  --btn: #C35050;           /* Buttons & Ticker – weißer Text erreicht hier 4,6:1 */
  --logo-bg: #C96362;       /* Logo-Flächen (dekorativ, kein Text) */
  --link: #A83838;          /* rote Textlinks auf hellem Grund (6,4:1) */
  --btn-hover: #AE4444;

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-soft: 0 1px 2px rgba(45,49,53,.06), 0 4px 16px rgba(45,49,53,.06);
  --shadow-lift: 0 2px 4px rgba(45,49,53,.06), 0 18px 40px rgba(45,49,53,.14);
  --shadow-strong: 0 24px 60px rgba(0,0,0,.35);

  --font: "Inter", "Roboto", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.22,1,.36,1);
  --transition: .25s var(--ease);
  --container: 1200px;
  --gutter: clamp(1rem, 4vw, 2rem);

  /* Kompatibilität mit bestehenden Variablen aus script.js / Unterseiten */
  --brand-wine: var(--btn);
  --brand-wine-dark: var(--wine-deep);
  --brand-white: #fff;
  --text-muted: var(--muted);
  --border: var(--line);
}

@media (prefers-color-scheme: dark) {
  :root {
    --slate: #3C4146;
    --header-glass: rgba(42, 46, 50, .82);
    --cream-glass: rgba(226, 218, 205, .82);
    --navy: var(--slate);
    --navy-2: #474D53;
    --bg: #15181A;
    --surface: #1E2225;
    --surface-2: #262A2E;
    --ink: #F1F3F4;
    --text: #E2E5E7;
    --muted: #AEB4B9;
    --line: #333A3F;
    --field-border: #78838C;
    --wine-tint: #3A2527;
    --shadow-soft: 0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.25);
    --shadow-lift: 0 2px 4px rgba(0,0,0,.3), 0 20px 44px rgba(0,0,0,.45);
  }
}

/* ---------- 2. Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
body > main { flex: 1 0 auto; width: 100%; }

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

h1, h2, h3, h4 {
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 800;
  margin: 0 0 .75rem;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 5.2vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); }

p { margin: 0 0 1rem; text-wrap: pretty; }
strong { color: var(--ink); font-weight: 700; }

a { color: var(--wine-strong); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--wine-deep); }
@media (prefers-color-scheme: dark) {
  a { color: #F09A9A; }
  a:hover { color: #FFC2C2; }
}

:focus-visible {
  outline: 3px solid var(--wine-strong);
  outline-offset: 3px;
  border-radius: 6px;
}
@media (prefers-color-scheme: dark) {
  :focus-visible { outline-color: #F09A9A; }
}

main { display: block; outline: none; }

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(2.5rem, 6vw, 5rem); position: relative; z-index: 1; }
.section + .section { padding-top: 0; }

.text-center { text-align: center; }
.mt-2rem { margin-top: 2rem; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  z-index: 3000;
  background: var(--btn);
  color: #fff;
  padding: .8rem 1.25rem;
  font-weight: 700;
  border-radius: 0 0 var(--radius-sm) 0;
  text-decoration: none;
}
.skip-link:focus {
  width: auto; height: auto;
  overflow: visible;
  clip: auto; clip-path: none;
  white-space: normal;
  color: #fff;
}

/* Karte (weiße Fläche wie im Entwurf) */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

/* Überschriften mit kräftiger Linie darüber (Editorial-Stil) */
.section-title,
.section > h2,
.ueber-uns-heading,
.copy-block > h2 {
  border-top: 4px solid var(--ink);
  padding-top: .6rem;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.copy-block.text-center > h2 { border-top: 0; padding-top: 0; }

/* ---------- 3. Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--header-glass);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  color: var(--on-dark);
  overflow-x: clip;
  box-shadow: 0 1px 0 rgba(0,0,0,.14);
  transition: box-shadow var(--transition);
}
.site-header.compact { box-shadow: 0 8px 26px rgba(0,0,0,.18); }
/* Browser ohne Milchglas-Unterstützung: deckende Fläche */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: var(--slate); }
  .brand-mark::before { background: var(--cream); }
}

.site-header .header-inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 88px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  align-self: stretch;
  color: var(--on-dark);
  text-decoration: none;
  position: relative;
  isolation: isolate;
  min-width: 0;
}
.brand:hover { color: var(--on-dark); }
.brand:focus-visible { outline-color: #fff; outline-offset: -4px; }

/* Weinrote Fläche oben links – reicht bis zum linken Bildschirmrand */
.brand-mark {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  padding-right: 1.9rem;
  flex-shrink: 0;
}
/* Cremeweiße Fläche oben links – reicht bis zum linken Bildschirmrand */
.brand-mark::before {
  content: "";
  position: absolute;
  inset: 0 0 0 -100vw;
  background: var(--cream-glass);
  clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
  z-index: -1;
}

/* Logo auf weinrotem Rahmen – das Logo selbst bleibt unverändert */
.logo-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--logo-bg);
  padding: 6px;
  border-radius: 13px;
  isolation: isolate;
  box-shadow: 0 1px 2px rgba(45,49,53,.18), 0 6px 14px rgba(45,49,53,.26);
}
.logo-img {
  height: 50px;
  width: auto;
  border-radius: 8px;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}
.brand-name {
  font-weight: 800;
  font-size: clamp(1.05rem, 1.9vw, 1.55rem);
  letter-spacing: -0.02em;
  color: #fff;
  white-space: nowrap;
}
.brand-sub {
  margin-top: .25rem;
  font-size: .95rem;
  color: var(--on-dark-muted);
  white-space: nowrap;
}
/* Unterseiten ohne .brand-text: "Startseite" als Beschriftung */
.brand-start {
  font-weight: 700;
  color: #fff;
  font-size: 1.05rem;
}

/* Navigation Desktop */
.site-nav { margin-left: auto; }
.nav-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  align-items: center;
  gap: .25rem;
}
.nav-list > li { position: relative; display: flex; align-items: center; }
.nav-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .5rem .85rem;
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  border-radius: 10px;
  transition: background var(--transition), color var(--transition);
}
.nav-list > li > a:hover { background: rgba(255,255,255,.08); color: #fff; }
.site-nav a:focus-visible,
.site-nav button:focus-visible,
.nav-toggle:focus-visible { outline-color: #fff; }

.nav-subtoggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 44px;
  margin-left: -.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--on-dark-muted);
  border-radius: 10px;
  cursor: pointer;
}
.nav-subtoggle:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav-subtoggle-icon { width: 18px; height: 18px; transition: transform var(--transition); }
.nav-subtoggle[aria-expanded="true"] .nav-subtoggle-icon { transform: rotate(180deg); }

.nav-sublist {
  list-style: none;
  margin: 0;
  padding: .5rem;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s var(--ease), visibility .2s;
  z-index: 20;
}
.nav-sublist::before { /* Hover-Brücke */
  content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px;
}
.nav-sublist a {
  display: flex;
  width: 100%;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
}
.nav-sublist a:hover { background: var(--wine-tint); color: var(--wine-strong); }
@media (prefers-color-scheme: dark) {
  .nav-sublist a:hover { color: #FFC2C2; }
}

@media (min-width: 1025px) {
  .nav-item-parent:hover > .nav-sublist,
  .nav-item-parent:focus-within > .nav-sublist,
  .nav-sublist.nav-sublist-open {
    opacity: 1; visibility: visible; transform: none;
  }
}

/* Hamburger */
.nav-toggle {
  display: none;
  margin-left: auto;
  width: 48px; height: 48px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}
.nav-toggle span {
  position: absolute;
  left: 13px; right: 13px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s ease, top .3s var(--ease);
}
.nav-toggle span:nth-child(1) { top: 16px; }
.nav-toggle span:nth-child(2) { top: 23px; }
.nav-toggle span:nth-child(3) { top: 30px; }
.nav-toggle.open span:nth-child(1) { top: 23px; transform: rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { top: 23px; transform: rotate(-45deg); }

@media (max-width: 1024px) {
  .nav-toggle { display: block; }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    margin: 0;
    background: color-mix(in srgb, var(--slate) 92%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    border-top: 1px solid var(--navy-line);
    box-shadow: 0 24px 40px rgba(0,0,0,.3);
    max-height: calc(100dvh - var(--header-h, 72px));
    overflow-y: auto;
    padding: .75rem var(--gutter) 1.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .25s ease, transform .3s var(--ease), visibility .25s;
  }
  .site-nav.nav-open { opacity: 1; visibility: visible; transform: none; }

  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list > li {
    flex-wrap: wrap;
    border-bottom: 1px solid var(--navy-line);
  }
  .nav-list > li > a {
    flex: 1;
    min-height: 56px;
    font-size: 1.2rem;
    padding-inline: .25rem;
  }
  .nav-subtoggle { width: 56px; height: 56px; margin: 0; }
  .nav-sublist {
    position: static;
    flex-basis: 100%;
    min-width: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0 0 .75rem 1rem;
    opacity: 1; visibility: visible; transform: none;
    display: none;
  }
  .nav-sublist.nav-sublist-open { display: block; }
  .nav-sublist a { color: var(--on-dark-muted); font-size: 1.05rem; }
  .nav-sublist a:hover { background: rgba(255,255,255,.08); color: #fff; }

  body.menu-open main { filter: blur(4px); pointer-events: none; transition: filter .3s ease; }
}

@media (max-width: 700px) {
  .site-header .header-inner { min-height: 72px; gap: .9rem; }
  .logo-img { height: 42px; }
  .logo-tile { padding: 5px; border-radius: 11px; }
  .brand { gap: .75rem; }
  .brand-mark { padding-right: 1.5rem; }
  .brand-name { font-size: clamp(.84rem, 4.3vw, 1.1rem); letter-spacing: -0.025em; }
  .brand-sub { margin-top: .15rem; font-size: clamp(.6rem, 2.9vw, .82rem); }
  .nav-toggle { width: 44px; height: 44px; }
  .nav-toggle span { left: 11px; right: 11px; }
  .nav-toggle span:nth-child(1) { top: 14px; }
  .nav-toggle span:nth-child(2), .nav-toggle.open span:nth-child(1), .nav-toggle.open span:nth-child(3) { top: 21px; }
  .nav-toggle span:nth-child(3) { top: 28px; }
}
@media (max-width: 400px) {
  .hero-logo-tile { width: 96px; }
  .hero-split { gap: .9rem; }
}
@media (max-width: 360px) {
  .site-header .header-inner { gap: .5rem; }
  .brand { gap: .55rem; }
  .brand-mark { padding-right: 1.15rem; }
  .logo-img { height: 38px; }
  .brand-name { font-size: clamp(.7rem, 3.85vw, .86rem); }
  .brand-sub { font-size: clamp(.54rem, 2.6vw, .7rem); }
}

/* News-Ticker im Header */
.news-ticker {
  width: 100%;
  background: var(--btn);
  color: #fff;
  padding: .55rem 0;
  overflow: hidden;
  font-weight: 600;
  font-size: .98rem;
  text-align: center;
  position: relative;
}
.news-ticker .news-inner { white-space: nowrap; }
.news-ticker.news-scroll { text-align: left; cursor: pointer; }
.news-scroll .news-inner { display: inline-block; will-change: transform; transform: translateX(100vw); }
.news-ticker.news-scroll:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.news-ticker.news-scroll.is-static { text-align: center; cursor: default; }
.news-ticker.news-scroll.is-static .news-inner { white-space: normal; transform: none; padding: 0 1rem; }
.news-fade .news-inner { animation: tickerFade 6s ease-in-out infinite; }
@keyframes tickerFade { 0%{opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{opacity:0} }

/* ---------- 4. Hero ---------- */
.hero {
  position: relative;
  padding-block: clamp(2rem, 6vw, 4.5rem) clamp(1rem, 3vw, 2rem);
  z-index: 1;
}
.hero-split {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(1.25rem, 4vw, 3rem);
}
.hero-logo-tile {
  background: var(--logo-bg);
  border-radius: var(--radius-lg);
  padding: clamp(.55rem, 1.4vw, .9rem);
  box-shadow: 0 2px 4px rgba(45,49,53,.14), 0 14px 32px rgba(45,49,53,.26);
  width: clamp(112px, 22vw, 240px);
  isolation: isolate;
}
.hero-logo-large {
  width: 100%; height: auto;
  aspect-ratio: 1; object-fit: contain;
  border-radius: calc(var(--radius-lg) - 8px);
}
.hero-compact .hero-logo-tile { width: clamp(96px, 14vw, 150px); }

.hero-text { display: flex; flex-direction: column; min-width: 0; }
.hero-text h1,
.hero-title { margin: 0 0 .6rem; }

/* 1. Absatz = "Familienbetrieb seit 1981" als Kennzeichen über dem Titel */
.hero-text > p:first-of-type:not(:last-of-type),
.hero-subtitle {
  order: -1;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 1rem;
  padding: .35rem .85rem .35rem .7rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--muted);
}
.hero-text > p:first-of-type:not(:last-of-type)::before,
.hero-subtitle::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--wine);
  box-shadow: 0 0 0 4px rgba(195,80,80,.18);
}

/* letzter Absatz = Gewerke, gesperrt in Versalien */
.hero-text > p:last-of-type:not(:first-of-type),
.hero-services {
  margin: 0;
  font-size: clamp(.78rem, 1.4vw, 1rem);
  font-weight: 700;
  text-transform: none;   /* Text steht bereits in Versalien – so bleibt das ß erhalten */
  letter-spacing: .2em;
  color: var(--muted);
}
.hs-claim::before { content: "– "; }

.hero-text > p:only-of-type:not(.hero-subtitle):not(.hero-services) {
  margin: 0;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: var(--muted);
}
.hero-compact { padding-block: clamp(1.5rem, 4vw, 3rem) .5rem; }

/* ---------- 5. Parallax / Bauplan-Raster ---------- */
.parallax-zone { position: relative; isolation: isolate; }
.blueprint-backdrop {
  position: absolute;
  inset: -10% 0 0 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(31,41,55,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(31,41,55,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 70%, transparent);
}
/* Blaupause als zurückhaltende Zeichnung im Hintergrund */
.blueprint-backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("images/blueprint-bg-light.svg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  opacity: .1;
}
@media (max-width: 700px) {
  .blueprint-backdrop::before { background-image: url("images/blueprint-bg-light-mobile.svg"); }
}
@media (prefers-color-scheme: dark) {
  .blueprint-backdrop {
    background-image:
      linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  }
  .blueprint-backdrop::before {
    background-image: url("images/blueprint-bg-dark.svg");
    opacity: .08;
  }
}
@media (prefers-color-scheme: dark) and (max-width: 700px) {
  .blueprint-backdrop::before { background-image: url("images/blueprint-bg-dark-mobile.svg"); }
}

/* ---------- 6. Über uns ---------- */
.ueber-uns-content {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.ueber-uns-bildblock {
  overflow: hidden;
  position: sticky;
  top: calc(var(--header-h, 84px) + 1.5rem);
  /* Dezentes Milchglas – ohne backdrop-filter, daher auch auf dem Handy flüssig */
  background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.3));
  border-color: #BFC5CB;         /* klar sichtbarer Rahmen auf hellem Grund */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    0 1px 2px rgba(45,49,53,.05),
    0 10px 26px rgba(45,49,53,.07);
}
/* Echter Weichzeichner nur auf großen Bildschirmen, wo Leistung kein Thema ist */
@media (min-width: 1025px) and (hover: hover) {
  .ueber-uns-bildblock {
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    backdrop-filter: blur(8px) saturate(120%);
  }
}
.ueber-uns-namen-row { border-top-color: #BFC5CB; }
.ueber-uns-namen-row .person + .person { border-left-color: #BFC5CB; }
.ueber-uns-bild { width: 100%; height: auto; }
@media (prefers-color-scheme: dark) {
  .ueber-uns-bildblock {
    background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)), var(--surface);
    border-color: var(--line);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), var(--shadow-soft);
  }
  .ueber-uns-namen-row,
  .ueber-uns-namen-row .person + .person { border-color: var(--line); }
}
.ueber-uns-namen-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}
.ueber-uns-namen-row .person { padding: 1rem 1.1rem; }
.ueber-uns-namen-row .person + .person { border-left: 1px solid var(--line); }
.ueber-uns-namen-row p { margin: 0; font-size: .92rem; color: var(--muted); line-height: 1.4; }
.ueber-uns-namen-row strong { display: inline-block; margin-bottom: .15rem; font-size: 1rem; }

.ueber-uns-text { font-size: clamp(1.05rem, 1.4vw, 1.15rem); color: var(--muted); }
.ueber-uns-text p:first-child,
.ueber-uns-lead {
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  line-height: 1.35;
  padding-left: 1rem;
  border-left: 4px solid var(--wine);
  margin-bottom: 1.5rem;
}

@media (max-width: 860px) {
  .ueber-uns-content { grid-template-columns: 1fr; }
  .ueber-uns-bildblock { position: static; }
}
@media (max-width: 480px) {
  .ueber-uns-namen-row .person { padding: .8rem .6rem; text-align: center; }
  .ueber-uns-namen-row p { font-size: .8rem; }
  .ueber-uns-namen-row strong { font-size: .88rem; }
}

/* ---------- 7. Gewerke-Kacheln (Videos) & Galerie ---------- */
.grid { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); }
.gallery-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.motion-toggle + .gallery-3 { margin-top: 0; }
@media (max-width: 960px) { .gallery-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .gallery-3 { grid-template-columns: 1fr; } }

.gallery-item {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  color: var(--text);
  text-decoration: none;
  margin: 0;
  position: relative;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s ease;
}
a.gallery-item:hover {
  color: var(--text);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: rgba(195,80,80,.45);
}
a.gallery-item:focus-visible { outline-offset: 4px; border-radius: var(--radius-lg); }

.gallery-item figure { margin: 0; display: flex; flex-direction: column; height: 100%; }
.gallery-item > picture img,
.gallery-item > img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

.gewerke-media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--navy);
}
.gewerk-video {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
a.gallery-item:hover .gewerk-video { transform: scale(1.04); }
.gewerke-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(45,49,53,.82) 0%, rgba(45,49,53,.45) 26%, rgba(45,49,53,.1) 52%, transparent 72%);
  pointer-events: none;
}
.gewerke-title {
  position: absolute;
  left: 1.25rem; bottom: 1rem;
  right: 1.25rem;
  margin: 0;
  color: #fff;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  z-index: 2;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}

.gallery-item figcaption {
  padding: 1.25rem 1.35rem 1.4rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.gallery-item figcaption h3 { margin-bottom: .6rem; }
.lead-callout { color: var(--muted); margin-bottom: .6rem; }
.gallery-item figcaption .lead-callout {
  position: relative;
  padding-left: 1.1rem;
}
.gallery-item figcaption .lead-callout::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--btn);
  font-weight: 800;
}

.gewerke-more {
  margin-top: auto;
  padding-top: .6rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 700;
  color: var(--link);
}
.gewerke-more::after {
  content: "→";
  transition: transform var(--transition);
}
a.gallery-item:hover .gewerke-more::after { transform: translateX(4px); }
@media (prefers-color-scheme: dark) { .gewerke-more { color: #F09A9A; } }

/* Vorher/Nachher-Slider (Unterseiten) */
.ba-wrapper { position: relative; overflow: hidden; }
.ba-image { position: relative; }
.ba-image-before img,
.ba-image-after img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.ba-image-after {
  position: absolute; inset: 0;
  width: 100% !important;
  opacity: .5;
  transition: opacity .35s ease;
  pointer-events: none;
}
.ba-slider {
  position: absolute;
  left: 50%; bottom: 1rem;
  transform: translateX(-50%);
  width: 80%; max-width: 300px;
  height: 44px;
  margin: 0;
  -webkit-appearance: none; appearance: none;
  background: transparent;
  cursor: pointer;
}
.ba-slider::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: rgba(255,255,255,.55); }
.ba-slider::-moz-range-track { height: 6px; border-radius: 6px; background: rgba(255,255,255,.55); }
.ba-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px; height: 26px; margin-top: -10px;
  border-radius: 50%;
  background: var(--wine-strong);
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.ba-slider::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--wine-strong);
  border: 3px solid #fff;
}
.ba-slider:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ---------- 8. Textblöcke (Unterseiten, Impressum usw.) ---------- */
.copy-block { position: relative; z-index: 1; }
.section > .copy-block:not(.card):not(:has(> .copy-block-inner)),
.copy-block-inner {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: clamp(1.25rem, 4vw, 2.5rem);
}
.gallery-3 + .copy-block { margin-top: clamp(1.5rem, 4vw, 3rem); }
.copy-block p, .copy-block li { color: var(--muted); }
.copy-block h3 { margin-top: 1.75rem; }
.copy-block ul, .copy-block ol { padding-left: 1.25rem; }
.copy-block.text-center { max-width: 820px; margin-inline: auto; }
.section > .text-center:not(.copy-block) { margin-top: 2rem; }

/* Rechtstexte (Impressum, Datenschutz, Cookies, Barrierefreiheit): Karten-Stapel */
.copy-block:has(> .copy-block-inner) {
  max-width: 860px;
  margin-inline: auto;
  display: grid;
  gap: clamp(.9rem, 2vw, 1.25rem);
}
.copy-block-inner > :first-child { margin-top: 0; }
.copy-block-inner > :last-child { margin-bottom: 0; }
.copy-block-inner h2 {
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  border: 0; padding: 0;
}
.copy-block-inner h2::before,
.copy-block-inner > h3:first-child::before {
  content: "";
  display: block;
  width: 36px; height: 4px;
  border-radius: 4px;
  background: var(--wine);
  margin-bottom: .75rem;
}
.copy-block-inner li + li { margin-top: .3rem; }
.copy-block-inner p, .copy-block-inner li { overflow-wrap: anywhere; }

/* Danke- & Fehlerseite */
.page-danke .copy-block,
.page-fehler .copy-block {
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
}
.page-fehler .copy-block ul {
  list-style: none;
  padding: 0;
  display: inline-grid;
  gap: .3rem;
  text-align: left;
}
.copy-block .btn { margin-top: .5rem; }

/* Unterseiten-Galerie: Bild oben, Text in der Karte */
.gallery-item > picture { display: block; overflow: hidden; }
.gallery-item > picture img { transition: transform .8s var(--ease); }
.gallery-item:hover > picture img { transform: scale(1.03); }
.gallery-item .ba-wrapper { border-bottom: 1px solid var(--line); }

/* 404-Seite */
.page-404 .copy-block { max-width: 680px; margin-inline: auto; text-align: center; }

/* Schalter zum Anhalten der Videos (WCAG 2.2.2) */
.motion-toggle {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  margin: 0 0 1rem auto;
  padding: .5rem 1rem;
  border: 1.5px solid var(--field-border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.motion-toggle:hover { border-color: var(--ink); }
.motion-toggle-icon {
  position: relative;
  width: 14px; height: 16px;
  flex-shrink: 0;
}
.motion-toggle-icon::before,
.motion-toggle-icon::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 5px;
  border-radius: 1px;
  background: currentColor;
}
.motion-toggle-icon::before { left: 0; }
.motion-toggle-icon::after { right: 0; }
.motion-toggle.is-paused .motion-toggle-icon::after { display: none; }
.motion-toggle.is-paused .motion-toggle-icon::before {
  left: 1px;
  width: 0; height: 0;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  background: none;
  border-left: 13px solid currentColor;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

/* Fehlermeldung direkt am Formularfeld */
.field-error {
  display: block;
  margin-top: .3rem;
  font-size: .9rem;
  font-weight: 600;
  color: #A8261C;
}
.field-error:empty { display: none; }
@media (prefers-color-scheme: dark) {
  .field-error { color: #FF9C93; }
}

/* ---------- 9. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 48px;
  padding: .75rem 1.4rem;
  border-radius: 12px;
  border: 2px solid transparent;
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--btn);
  color: #fff;
  box-shadow: 0 6px 16px rgba(195,80,80,.28);
}
.btn-primary:hover { background: var(--btn-hover); color: #fff; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(195,80,80,.32); }
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-secondary:hover { border-color: var(--ink); color: var(--ink); }
.btn-whatsapp { background: #128C4B; color: #fff; }
.btn-whatsapp:hover { background: #0E6F3B; color: #fff; }

.btn-small { min-height: 46px; padding: .6rem 1.1rem; font-size: .95rem; min-width: 150px; justify-content: flex-start; }

.btn-icon {
  width: 20px; height: 20px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.icon-phone  { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.8 2z'/%3E%3C/svg%3E"); }
.icon-mobile { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2' width='12' height='20' rx='2.5'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E"); }
.icon-mail   { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='15' rx='2.5'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }

/* ---------- 10. Kontakt ---------- */
.kontakt-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 1.75rem);
  align-items: stretch;
}
.kontakt-grid > .copy-block { padding: clamp(1.25rem, 4vw, 2.25rem); }
.kontakt-side { display: flex; flex-direction: column; gap: clamp(1rem, 3vw, 1.75rem); }
@media (max-width: 860px) { .kontakt-grid { grid-template-columns: 1fr; } }

.kontakt-adresse {
  padding: 1rem 1.15rem;
  background: var(--surface-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  color: var(--text) !important;
}

.copy-block .contact-list { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .75rem; }
.contact-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  color: var(--text) !important;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.map-wrapper { overflow: hidden; min-height: 260px; display: flex; flex: 1; }
.map-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: .75rem;
  padding: 2rem 1.5rem;
  background:
    radial-gradient(circle at 30% 20%, rgba(195,80,80,.08), transparent 55%),
    var(--surface-2);
  color: var(--muted);
}
.map-placeholder p { max-width: 34ch; margin: 0; }
.map-placeholder-icon { width: 56px; height: 56px; }
.real-map { width: 100%; min-height: 320px; border: 0; }
.real-map.map-loaded { display: block !important; }

.google-review-block { padding: 1rem 1.25rem; }
.google-review-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  color: var(--ink);
  font-weight: 800;
  font-size: 1.1rem;
  min-height: 56px;
}
.google-review-link:hover { color: var(--wine-strong); }
.google-review-link img { width: 52px; height: 52px; }
.google-review-arrow { width: 22px; height: 22px; margin-left: auto; flex-shrink: 0; }
.google-review-hint { margin: .5rem 0 0; font-size: .85rem; color: var(--muted); }

/* ---------- 11. Kontaktformular ---------- */
.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 1.5rem;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  position: relative;
}
.contact-form > .form-full,
.contact-form > p,
.contact-form > .form-status { grid-column: 1 / -1; }
@media (max-width: 700px) { .contact-form { grid-template-columns: 1fr; } }

.form-required-hint { margin: 0; font-size: .9rem; color: var(--muted); }
.form-group { display: flex; flex-direction: column; gap: .4rem; margin: 0; }

.contact-form label,
.contact-form legend {
  font-weight: 700;
  font-size: .95rem;
  color: var(--ink);
}
.contact-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.contact-form legend { padding: 0; margin-bottom: .5rem; }

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea,
#intern-pin {
  width: 100%;
  min-height: 52px;
  padding: .8rem 1rem;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface-2);
  border: 1.5px solid var(--field-border);
  border-radius: 12px;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.contact-form input:not([type="radio"]):not([type="checkbox"]):hover,
.contact-form textarea:hover { border-color: var(--ink); }
.contact-form input:not([type="radio"]):not([type="checkbox"]):focus,
.contact-form textarea:focus,
#intern-pin:focus {
  outline: none;
  border-color: var(--wine-strong);
  background: var(--surface);
  box-shadow: 0 0 0 4px rgba(195,80,80,.2);
}
.contact-form textarea {
  min-height: 160px;
  resize: vertical;
  line-height: 1.55;
}
.contact-form input[aria-invalid="true"],
.contact-form textarea[aria-invalid="true"] { border-color: #B42318; }

.salutation-group { display: flex; flex-wrap: wrap; gap: .6rem; }
.salutation-option {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 48px;
  padding: .5rem 1rem;
  border: 1.5px solid var(--field-border);
  border-radius: 12px;
  background: var(--surface-2);
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
  transition: border-color var(--transition), background var(--transition);
}
.salutation-option:hover { border-color: var(--ink); }
/* Ausgewählt wird nur der Punkt bzw. das Häkchen markiert – das Feld bleibt ruhig */
.contact-form input[type="radio"],
.contact-form input[type="checkbox"] {
  box-shadow: none;
  background: none;
  border: 0;
}
.contact-form input[type="radio"]:focus-visible,
.contact-form input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--wine-strong);
  outline-offset: 2px;
}
.salutation-option input {
  width: 22px; height: 22px;
  margin: 0;
  accent-color: var(--btn);
  flex-shrink: 0;
  cursor: pointer;
}

.form-actions { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; margin-top: .25rem; }
.form-actions .btn { min-width: 220px; }
.form-privacy-hint { font-size: .88rem; color: var(--muted); margin: 0; max-width: 70ch; }
.form-status:empty { display: none; }
.form-status {
  padding: .9rem 1.1rem;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-weight: 600;
}

/* ---------- 12. Footer ---------- */
.site-footer {
  position: relative;
  background: var(--navy);
  color: var(--on-dark-muted);
  padding: 2.25rem 0 calc(2.25rem + env(safe-area-inset-bottom, 0px));
  margin-top: clamp(2rem, 5vw, 4rem);
  font-size: .95rem;
  overflow: hidden;
}
.site-footer::before { /* weinroter Akzent oben links – Echo des Headers */
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: min(34%, 320px);
  height: 5px;
  background: var(--wine);
}
.site-footer .container { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; justify-content: space-between; }
.footer-copy { margin: 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.site-footer a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.site-footer a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--wine); text-decoration-thickness: 2px; }
.site-footer a:focus-visible { outline-color: #fff; }

/* ---------- 13. Back-to-Top ---------- */
.back-to-top {
  position: fixed;
  right: max(1.25rem, env(safe-area-inset-right, 0px));
  bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
  width: 52px; height: 52px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14);
  background: var(--navy);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 26px rgba(45,49,53,.3);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s var(--ease), visibility .3s, background .25s ease;
  z-index: 500;
}
.back-to-top svg { width: 22px; height: 22px; }
.back-to-top.visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top.near-footer { opacity: 0; visibility: hidden; }
.back-to-top:hover { background: var(--btn); }
.back-to-top:focus-visible { outline-color: var(--wine-strong); }

/* ---------- 14. Scroll-Reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s ease-out, transform .8s var(--ease);
}
.reveal.visible { opacity: 1; transform: none; }
.gallery-3 > .reveal:nth-child(2) { transition-delay: .08s; }
.gallery-3 > .reveal:nth-child(3) { transition-delay: .16s; }
.hero-split > .reveal,
.hero .reveal { transition-delay: 0s; }

/* ---------- 15. Countdown (Danke-/Fehlerseite) ---------- */
.countdown-visual { display: flex; justify-content: center; margin-top: 1.5rem; position: relative; }
.countdown-ring { overflow: visible; }
.ring-rotation { transform: rotate(-90deg); transform-origin: 40px 40px; }
.ring-bg { fill: none; stroke: var(--line); stroke-width: 6; }
.ring-progress {
  fill: none;
  stroke: var(--btn);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 219.911;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear;
}
.ring-text {
  font-size: 1.5rem; font-weight: 800;
  fill: var(--ink);
  font-family: var(--font);
  dominant-baseline: central;
  text-anchor: middle;
}

/* ---------- 16. Internes System (nur mit ?Lock-show) ---------- */
.intern-login-icon,
.intern-login-icon-footer { display: none !important; }

body.lock-show .intern-login-icon,
body.lock-show .intern-login-icon-footer {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-width: 44px; min-height: 44px;
  padding: .4rem .7rem;
  font-size: 1rem;
  color: #fff;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 12px;
  cursor: pointer;
}
body.lock-show .intern-login-icon:hover,
body.lock-show .intern-login-icon-footer:hover { background: var(--btn); }

.intern-login-overlay,
#intern-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,14,20,.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 6000;
  padding: 1rem;
}
#intern-panel-overlay { z-index: 6500; }
.intern-login-overlay.active,
#intern-panel-overlay.active { display: flex; }

.intern-login-dialog {
  background: var(--surface);
  color: var(--text);
  padding: 2rem;
  border-radius: var(--radius-lg);
  width: min(100%, 420px);
  box-shadow: var(--shadow-strong);
  border-top: 5px solid var(--wine);
}
.intern-login-dialog h2 { border: 0; padding: 0; font-size: 1.5rem; }
#intern-pin { margin: 1rem 0; text-align: center; letter-spacing: .3em; font-weight: 700; font-size: 1.2rem; }
.intern-login-actions { display: flex; justify-content: flex-end; gap: .75rem; }
.intern-login-message { margin-top: .75rem; font-size: .92rem; color: var(--wine-strong); font-weight: 600; }

#intern-panel-container {
  width: min(100%, 960px);
  max-height: 90vh;
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-strong);
  overflow: auto;
}

/* ---------- 17. Mobil-Feinschliff ---------- */
@media (max-width: 640px) {
  body { font-size: 1.02rem; }
  .hero-split { gap: 1.1rem; }
  .hero-text > p:first-of-type:not(:last-of-type),
  .hero-subtitle { font-size: .8rem; margin-bottom: .7rem; padding: .25rem .7rem .25rem .6rem; }
  .hero-text h1, .hero-title { font-size: clamp(1.5rem, 6.4vw, 2rem); margin-bottom: .45rem; }
  .hero-text > p:last-of-type:not(:first-of-type),
  .hero-services { letter-spacing: .1em; font-size: clamp(.5rem, 2.5vw, .78rem); line-height: 1.6; }
  .hs-trades, .hs-claim { display: block; white-space: nowrap; }
  .hs-claim::after { content: " –"; }
  /* Anrede bleibt auch auf dem Handy einreihig */
  .salutation-group:has(input[type="radio"]) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .45rem;
  }
  .salutation-group:has(input[type="radio"]) .salutation-option {
    justify-content: center;
    gap: .4rem;
    padding: .5rem .3rem;
    font-size: clamp(.76rem, 3.3vw, .95rem);
  }
  .salutation-group:has(input[type="radio"]) .salutation-option input {
    width: 20px; height: 20px;
  }
  .contact-row { flex-wrap: nowrap; gap: .75rem; font-size: .95rem; }
  .contact-row .btn-small { width: 138px; min-width: 0; padding-inline: .8rem; flex-shrink: 0; }
  .contact-row > span { min-width: 0; font-size: .9rem; overflow-wrap: anywhere; }
  .contact-row .btn-small { font-size: .92rem; }
  .form-actions .btn { width: 100%; }
}

/* ---------- 18. Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  a.gallery-item:hover { transform: none; }
}

/* ---------- 19. Hoher Kontrast (Windows) ---------- */
@media (forced-colors: active) {
  .brand-mark::before, .logo-tile, .hero-logo-tile { forced-color-adjust: none; }
  .btn, .card, .gallery-item { border: 1px solid CanvasText; }
}