/* ============================================================
   TISCHLEREI FEHLMANN - Gestaltung
   ============================================================
   Reihenfolge dieser Datei:
     1.  Farben und Maße (die "Design-Tokens")
     2.  Dunkler Modus
     3.  Grundlagen und Hilfsklassen
     4.  Schrift
     5.  Buttons
     6.  Kopfbereich und Navigation
     7.  Hero und die Schrank-Animation
     8.  Allgemeiner Sektions-Aufbau
     9.  Leistungs-Kacheln
     10. Unternehmensgeschichte (Zeitleiste + Kennzahlen)
     11. Referenzen
     12. Team
     13. Kundenrezensionen
     14. Kontakt, Formular, Kartenplatzhalter
     15. Fußbereich
     16. Einblenden beim Scrollen
     17. Rücksicht auf "weniger Bewegung"

   Die Seite ist "mobile first" gebaut: die Grundregeln gelten für
   Handys, weiter unten stehen die Ergänzungen für größere
   Bildschirme (@media).
   ============================================================ */


/* ------------------------------------------------------------
   1. FARBEN UND MASSE (heller Modus)
   ------------------------------------------------------------ */
:root {
  --bg:        #f7f4ee;   /* Creme, Grundfläche */
  --bg-alt:    #efe8dd;   /* etwas dunkler für jede zweite Sektion */
  --card:      #fffdf9;   /* Kachelfläche */
  --text:      #2e211a;   /* dunkles Nussbraun */
  --muted:     #6b574a;   /* gedämpftes Braun für Nebentext */
  --line-soft: rgba(46, 33, 26, .14);

  --accent:      #a34327; /* dunkles Terrakotta */
  --accent-ink:  #ffffff; /* Textfarbe AUF dem Akzent */
  --accent-soft: rgba(163, 67, 39, .10);

  /* Holztöne für die Zeichnungen */
  --wood-1:    #d9c3a5;
  --wood-2:    #c2a583;
  --wood-3:    #a3835f;
  --door-fill: rgba(217, 195, 165, .42);
  --draw-line: #2e211a;

  --grain-line: rgba(46, 33, 26, .05);
  --shadow: 0 1px 2px rgba(46, 33, 26, .05), 0 10px 28px rgba(46, 33, 26, .07);

  --radius:   4px;
  --header-h: 66px;
  --maxw:     1200px;
}


/* ------------------------------------------------------------
   2. DUNKLER MODUS
   Bewusst kein Fast-Schwarz, sondern ein warmes Nussbraun -
   dadurch wirkt die Seite abends weicher und die helle Schrift
   sitzt trotzdem mit deutlichem Abstand darüber.
   ------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #3a2f26;
    --bg-alt:    #443830;
    --card:      #493c33;
    --text:      #f7f1e8;
    --muted:     #c9b8a8;
    --line-soft: rgba(247, 241, 232, .18);

    --accent:      #e8895f;  /* heller als im Tagmodus, damit der
                                Kontrast auf dem helleren Grund hält */
    --accent-ink:  #33291f;
    --accent-soft: rgba(232, 137, 95, .16);

    --wood-1:    #8f7355;
    --wood-2:    #7a5f42;
    --wood-3:    #664d34;
    --door-fill: rgba(143, 115, 85, .40);
    --draw-line: #f2e9dd;

    --grain-line: rgba(247, 241, 232, .05);
    --shadow: 0 1px 2px rgba(0, 0, 0, .22), 0 10px 28px rgba(0, 0, 0, .28);
  }
}


/* ------------------------------------------------------------
   3. GRUNDLAGEN UND HILFSKLASSEN
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Feine Papierkörnung über der ganzen Seite. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 20px;
}
@media (min-width: 900px) {
  .container { padding-inline: 40px; }
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  transition: top .2s ease;
}
.skip-link:focus { top: 12px; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}


/* ------------------------------------------------------------
   4. SCHRIFT
   ------------------------------------------------------------ */
h1, h2, h3 {
  font-family: "Outfit", system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}

h2 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 2.9rem); }
h3 { font-size: 1.15rem; letter-spacing: -.01em; }

p { margin: 0; }
a { color: var(--accent); }

.eyebrow {
  font-family: "Outfit", system-ui, sans-serif;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 20px;
}


/* ------------------------------------------------------------
   5. BUTTONS
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  padding: 15px 28px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 1.02rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, transform .12s ease, box-shadow .2s ease;
}

.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { box-shadow: var(--shadow); }
.btn-primary:active { transform: translateY(1px); }
.btn .ph { font-size: 1.1em; }


/* ------------------------------------------------------------
   6. KOPFBEREICH UND NAVIGATION
   ------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background-color .25s ease;
}
.site-header.is-scrolled { border-bottom-color: var(--line-soft); }

.header-inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -.01em;
}
.wordmark strong { font-weight: 600; }

.wordmark-icon {
  width: 22px; height: 22px;
  border-radius: 3px;
  background: linear-gradient(140deg, var(--wood-1), var(--wood-3));
  box-shadow: inset 0 0 0 1px var(--line-soft);
  flex: none;
}

/* --- Navigation: Grundzustand = Handy --- */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font-size: 1.35rem;
  cursor: pointer;
}

.main-nav {
  display: none;
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  background: var(--bg);
  border-bottom: 1px solid var(--line-soft);
  box-shadow: var(--shadow);
}
.main-nav.is-open { display: block; }

.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 8px 20px 20px;
}
.main-nav a {
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text);
  text-decoration: none;
  font-family: "Outfit", system-ui, sans-serif;
}
.main-nav li:last-child a { border-bottom: none; }

/* --- Ab 900px: eine einzige Zeile, kein Knopf mehr --- */
@media (min-width: 900px) {
  .nav-toggle { display: none; }

  .main-nav {
    display: block;
    position: static;
    background: none;
    border: none;
    box-shadow: none;
  }
  .main-nav ul {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 0;
  }
  .main-nav a {
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    font-size: .92rem;
    color: var(--muted);
    transition: color .2s ease, border-color .2s ease;
  }
  .main-nav a:hover { color: var(--text); }
  .main-nav a.is-current {
    color: var(--text);
    border-bottom-color: var(--accent);
  }
}


/* ------------------------------------------------------------
   7. HERO UND SCHRANK-ANIMATION
   ------------------------------------------------------------ */
.hero {
  padding-top: 32px;
  padding-bottom: 56px;
  overflow: hidden;   /* einfliegende Teile werden am Rand beschnitten */
}

.hero-grid {
  display: grid;
  gap: 32px;
  align-items: center;
}

.hero-title {
  font-size: clamp(2.4rem, 1.0rem + 3.4vw, 3.9rem);
  margin-bottom: 24px;
}

.hero-lead {
  max-width: 44ch;
  color: var(--muted);
  font-size: 1.12rem;
  margin-bottom: 34px;
}

.hero-art { display: flex; justify-content: center; }

.cabinet {
  width: 100%;
  max-width: 300px;
  height: auto;
  stroke: var(--draw-line);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (min-width: 900px) {
  .hero {
    /* 100dvh = volle sichtbare Höhe, auch auf Handys mit Adressleiste */
    min-height: calc(100dvh - var(--header-h));
    display: flex;
    align-items: center;
    padding-top: 24px;
    padding-bottom: 32px;
  }
  .hero-grid {
    width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }
  .cabinet { max-width: 440px; }
}
@media (min-width: 1200px) {
  .cabinet { max-width: 520px; }
}

/* --- Die einzelnen Bauteile ---------------------------------
   Grundzustand: unsichtbar und verschoben.
   --tx / --ty  = Startversatz (x = seitlich, y = hoch/runter)
   --sc         = Startgröße (für Beschläge, die "aufploppen")
   --d          = Verzögerung, also wann das Teil losfliegt
   ------------------------------------------------------------ */
.cab-part {
  opacity: 0;
  transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--sc, 1));
  transform-box: fill-box;
  transform-origin: center;
  transition:
    transform .85s cubic-bezier(.16, 1, .3, 1),
    opacity   .5s  ease-out;
  transition-delay: var(--d, 0s);
}

.cabinet.is-built .cab-part {
  opacity: 1;
  transform: translate(0px, 0px) scale(1);
}

/* Füllfarben der Bauteile */
.part-ground   { stroke: var(--line-soft); stroke-width: 3; }
.part-sockel   { fill: var(--wood-3); }
.part-bottom,
.part-side-l,
.part-side-r,
.part-top,
.part-kranz,
.part-divider  { fill: var(--wood-2); }
.part-shelf-1,
.part-shelf-2,
.part-shelf-3  { fill: var(--wood-1); }
.part-rail     { stroke: var(--accent); stroke-width: 5; }
.part-drawer-1,
.part-drawer-2 { fill: var(--wood-1); }
.part-dhandle-1,
.part-dhandle-2 { fill: var(--accent); stroke: none; }
.part-door-l,
.part-door-r   { fill: var(--door-fill); }
.part-fill-lt,
.part-fill-lb,
.part-fill-rt,
.part-fill-rb  { fill: none; stroke-width: 2; opacity: .9; }
.part-hinge-l1,
.part-hinge-l2,
.part-hinge-r1,
.part-hinge-r2 { fill: var(--wood-3); stroke: none; }
.part-handle-l,
.part-handle-r { fill: var(--accent); stroke: none; }

/* Startpositionen und Reihenfolge des Zusammenbaus.
   Erst der Boden, dann Seiten, Deckel und Kranz, dann das
   Innenleben, dann die Schubladen, zuletzt Türen und Beschläge. */
.part-ground    { --ty:  0px;   --d: .10s; }
.part-sockel    { --ty:  150px; --d: .20s; }
.part-bottom    { --ty:  190px; --d: .28s; }
.part-side-l    { --tx: -260px; --d: .38s; }
.part-side-r    { --tx:  260px; --d: .44s; }
.part-top       { --ty: -220px; --d: .54s; }
.part-kranz     { --ty: -270px; --d: .62s; }
.part-divider   { --ty: -190px; --d: .72s; }
.part-shelf-1   { --tx: -180px; --d: .80s; }
.part-shelf-2   { --tx: -180px; --d: .86s; }
.part-shelf-3   { --tx: -180px; --d: .92s; }
.part-rail      { --tx:  150px; --d: .98s; }
.part-drawer-1  { --tx:  200px; --d: 1.04s; }
.part-drawer-2  { --tx:  200px; --d: 1.10s; }
.part-dhandle-1 { --sc: .4;     --d: 1.20s; }
.part-dhandle-2 { --sc: .4;     --d: 1.25s; }
.part-door-l    { --tx: -340px; --d: 1.40s; }
.part-door-r    { --tx:  340px; --d: 1.50s; }
.part-fill-lt   { --sc: .88;    --d: 1.62s; }
.part-fill-lb   { --sc: .88;    --d: 1.66s; }
.part-fill-rt   { --sc: .88;    --d: 1.70s; }
.part-fill-rb   { --sc: .88;    --d: 1.74s; }
.part-hinge-l1  { --tx: -60px;  --d: 1.84s; }
.part-hinge-l2  { --tx: -60px;  --d: 1.88s; }
.part-hinge-r1  { --tx:  60px;  --d: 1.92s; }
.part-hinge-r2  { --tx:  60px;  --d: 1.96s; }
.part-handle-l  { --sc: .35;    --d: 2.06s; }
.part-handle-r  { --sc: .35;    --d: 2.12s; }


/* ------------------------------------------------------------
   8. ALLGEMEINER SEKTIONS-AUFBAU
   ------------------------------------------------------------ */
.section {
  padding-block: 72px;
  /* Der Abstand zur festen Kopfleiste kommt aus scroll-padding-top
     ganz oben bei html. Hier ist deshalb nichts nötig. */
}
@media (min-width: 900px) {
  .section { padding-block: 120px; }
}

/* Jede zweite Sektion bekommt einen dunkleren Ton plus eine sehr
   feine senkrechte Maserung. */
.section-tinted {
  background-color: var(--bg-alt);
  background-image: repeating-linear-gradient(
    90deg,
    var(--grain-line) 0 1px,
    transparent 1px 7px
  );
}

.section-head { margin-bottom: 44px; max-width: 58ch; }
.section-head p {
  margin-top: 16px;
  color: var(--muted);
  font-size: 1.05rem;
}
@media (min-width: 900px) {
  .section-head { margin-bottom: 60px; }
}


/* ------------------------------------------------------------
   9. LEISTUNGS-KACHELN
   ------------------------------------------------------------ */
.tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .tiles { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (min-width: 900px) {
  .tiles { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

.tile {
  padding: 28px 26px 30px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  transition: border-color .25s ease, transform .25s ease;
}
.tile:hover { border-color: var(--accent); transform: translateY(-3px); }
.tile h3 { margin-bottom: 10px; }
.tile p  { color: var(--muted); font-size: .97rem; }

.tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  margin-bottom: 20px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 1.45rem;
}

.tiles-solid .tile {
  background: var(--card);
  border-color: transparent;
  box-shadow: var(--shadow);
}
.tiles-solid .tile:hover { border-color: var(--accent); }


/* ------------------------------------------------------------
   10. UNTERNEHMENSGESCHICHTE
   Zeitleiste: links das Jahr, rechts der Text, dazwischen eine
   senkrechte Linie mit einem Punkt je Station.
   ------------------------------------------------------------ */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}

.milestone {
  display: grid;
  grid-template-columns: 3.6rem 1fr;
  gap: 0;
}
@media (min-width: 700px) {
  .milestone { grid-template-columns: 6rem 1fr; }
}

.milestone-year {
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent);
  padding-top: 1px;
}
@media (min-width: 700px) {
  .milestone-year { font-size: 1.15rem; }
}

.milestone-body {
  position: relative;
  border-left: 2px solid var(--line-soft);
  padding-left: 26px;
  padding-bottom: 32px;
}
.milestone-body::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
}
/* Die letzte Station braucht keine weiterlaufende Linie. */
.milestone:last-child .milestone-body {
  border-left-color: transparent;
  padding-bottom: 0;
}
/* Die heutige Station bekommt einen Ring, damit sie heraussticht. */
.milestone.is-today .milestone-body::before {
  box-shadow: 0 0 0 5px var(--accent-soft);
}

.milestone-body h3 { margin-bottom: 6px; font-size: 1.08rem; }
.milestone-body p  { color: var(--muted); font-size: .97rem; }

/* Drei Kennzahlen als Abschluss der Sektion */
.facts-row {
  display: grid;
  gap: 26px;
  margin-top: 44px;
  padding-top: 40px;
  border-top: 1px solid var(--line-soft);
}
@media (min-width: 700px) {
  .facts-row { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}

.fact-number {
  display: block;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: clamp(2.1rem, 1.4rem + 2vw, 2.9rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--accent);
  margin-bottom: 10px;
}
.fact-label {
  display: block;
  color: var(--muted);
  font-size: .95rem;
  max-width: 26ch;
}


/* ------------------------------------------------------------
   11. REFERENZEN
   Strichzeichnungen im gleichen Stil wie der Hero-Schrank.
   ------------------------------------------------------------ */
.refs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .refs { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .refs { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}

.ref-art {
  background: var(--card);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 18px;
  box-shadow: var(--shadow);
}
.ref-art svg { width: 100%; height: auto; }

.ref-line {
  fill: none;
  stroke: var(--draw-line);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.ref-accent { fill: var(--accent); stroke: none; }
.ref-ground { stroke: var(--line-soft); stroke-width: 3; stroke-linecap: round; }

.ref-card h3 { margin-bottom: 8px; }
.ref-card p  { color: var(--muted); font-size: .95rem; }

.refs-note {
  margin-top: 30px;
  color: var(--muted);
  font-size: .88rem;
  font-style: italic;
}


/* ------------------------------------------------------------
   12. TEAM
   Handy/Tablet: seitlich wischbare Reihe.
   Großer Bildschirm: fünf Spalten, leicht versetzt.
   ------------------------------------------------------------ */
.team-row {
  list-style: none;
  margin: 0;
  padding: 0 20px 8px;
  margin-inline: -20px;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.person {
  flex: 0 0 236px;
  scroll-snap-align: start;
  padding: 26px 22px 28px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Platzhalter-Portrait: Initialen auf einem Holzton.
   Einzige runde Form der Seite, bewusst als Ausnahme. */
.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px; height: 54px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--tint, var(--wood-2));
  color: #2e211a;   /* bleibt in beiden Modi dunkel auf hellem Holz */
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .04em;
  flex: none;
}

.person h3 { font-size: 1.05rem; }
.person .role {
  margin-top: 4px;
  color: var(--muted);
  font-size: .87rem;
  /* Platz für zwei Zeilen fest reserviert. Manche Rollen sind
     einzeilig ("Werkstattleitung"), andere zweizeilig - ohne
     diese Reserve säße die Trennlinie darunter in jeder Karte
     auf einer anderen Höhe und die Reihe wirkte wieder unruhig. */
  min-height: 3.3em;
}
.person blockquote {
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  font-size: .94rem;
  line-height: 1.55;
  color: var(--text);
}
.person blockquote::before { content: "\201E"; }
.person blockquote::after  { content: "\201C"; }

@media (min-width: 1200px) {
  .team-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    overflow: visible;
    padding: 0;
    margin-inline: 0;
    /* align-items: stretch (Standard) sorgt dafür, dass alle fünf
       Karten exakt gleich hoch sind und oben wie unten auf einer
       Linie stehen. Das passt zu den geraden Kanten, die der
       Schrank im Hero vorgibt. */
  }
  .person {
    flex: none;
    padding: 30px 20px 32px;
  }
}


/* ------------------------------------------------------------
   13. KUNDENREZENSIONEN
   Bewusst anders herum aufgebaut als das Team: Zitat oben und
   groß, Person klein darunter als Signatur.
   ------------------------------------------------------------ */
.reviews {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 800px) {
  .reviews { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

.review {
  padding: 28px 26px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.review-text {
  font-size: 1.02rem;
  line-height: 1.6;
}
.review-text::before { content: "\201E"; }
.review-text::after  { content: "\201C"; }

.review-by {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}

.avatar-sm {
  width: 42px; height: 42px;
  margin-bottom: 0;
  font-size: .85rem;
}

.review-name {
  display: flex;
  flex-direction: column;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: .95rem;
  font-weight: 500;
}
.review-name em {
  font-style: normal;
  font-weight: 400;
  font-family: "Instrument Sans", system-ui, sans-serif;
  color: var(--muted);
  font-size: .85rem;
  margin-top: 2px;
}


/* ------------------------------------------------------------
   14. KONTAKT, FORMULAR, KARTENPLATZHALTER
   ------------------------------------------------------------ */
.contact-grid { display: grid; gap: 32px; }
@media (min-width: 1000px) {
  .contact-grid {
    grid-template-columns: 1.15fr .85fr;
    gap: 48px;
    align-items: start;
  }
}

.facts {
  margin: 0 0 40px;
  display: grid;
  gap: 24px;
}
@media (min-width: 640px) {
  .facts { grid-template-columns: repeat(2, 1fr); gap: 28px 32px; }
}

.fact dt {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.fact dt .ph { color: var(--accent); font-size: 1.15rem; }
.fact dd { margin: 0; line-height: 1.6; }
.fact dd a { text-decoration: none; }
.fact dd a:hover { text-decoration: underline; }

.contact-form {
  padding: 28px 24px 30px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
@media (min-width: 640px) {
  .contact-form { padding: 32px 30px 34px; }
}
.contact-form h3 { margin-bottom: 22px; }

.field { margin-bottom: 20px; }

/* Spam-Falle (Honeypot): fuer echte Besucher unsichtbar gemacht,
   aber weiterhin Teil der Seite - Spam-Programme lesen oft nur
   das HTML, ohne CSS auszuwerten, und tappen deshalb trotzdem
   hinein. display:none wird von manchen Bots erkannt und dann
   umgangen; diese Variante (aus dem sichtbaren Bereich geschoben)
   ist zuverlaessiger. */
.feld-falle {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Beschriftung steht IMMER über dem Feld, nie nur im Feld drin. */
.field label {
  display: block;
  margin-bottom: 7px;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: .9rem;
  font-weight: 500;
}

.field input,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { resize: vertical; min-height: 118px; }

.field input:focus,
.field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.field-hint {
  margin-top: 7px;
  font-size: .86rem;
  color: var(--muted);
}

.field-error {
  margin-top: 7px;
  font-size: .86rem;
  font-weight: 500;
  color: var(--accent);
}
.field.has-error input,
.field.has-error textarea { border-color: var(--accent); }

.contact-form .btn { width: 100%; justify-content: center; margin-top: 4px; }
@media (min-width: 640px) {
  .contact-form .btn { width: auto; }
}

.form-status {
  margin-top: 18px;
  padding: 14px 16px;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .94rem;
}

/* Eigene Farbe fuer Fehlermeldungen (z.B. Versand fehlgeschlagen) -
   bewusst ein anderer Ton als der Marken-Akzent, damit "hat
   geklappt" und "hat nicht geklappt" auf den ersten Blick
   auseinanderzuhalten sind. */
.form-status-fehler {
  border-left-color: #b0413a;
  background: rgba(176, 65, 58, .10);
}

.map-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 320px;
  padding: 32px 24px;
  border: 1px dashed var(--line-soft);
  border-radius: var(--radius);
  text-align: center;
  background-image:
    repeating-linear-gradient(0deg,  var(--grain-line) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, var(--grain-line) 0 1px, transparent 1px 26px);
}
@media (min-width: 1000px) {
  .map-placeholder { min-height: 100%; }
}
.map-placeholder .ph { font-size: 2rem; color: var(--accent); }
.map-title {
  font-family: "Outfit", system-ui, sans-serif;
  font-weight: 500;
  font-size: 1.05rem;
}
.map-sub { color: var(--muted); font-size: .9rem; }


/* ------------------------------------------------------------
   15. FUSSBEREICH
   ------------------------------------------------------------ */
.site-footer {
  padding-block: 36px;
  border-top: 1px solid var(--line-soft);
}
.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 700px) {
  .footer-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }
}
.wordmark-static { color: var(--text); }
.footer-note { color: var(--muted); font-size: .87rem; }


/* ------------------------------------------------------------
   16. EINBLENDEN BEIM SCROLLEN
   ------------------------------------------------------------ */
/* WICHTIG: Der unsichtbare Startzustand gilt nur, wenn JavaScript
   tatsächlich läuft - script.js setzt dafür die Klasse "js-anim"
   an das <html>-Element. Ohne JavaScript (oder wenn beim Einblenden
   etwas schiefgeht) ist die Seite einfach sofort vollständig
   sichtbar. Eine halb leere Seite beim Kundentermin wäre deutlich
   schlimmer als eine Seite ohne Animation. */
.js-anim [data-reveal] > .container > * {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity   .7s ease,
    transform .7s cubic-bezier(.16, 1, .3, 1);
}
.js-anim [data-reveal].is-visible > .container > * {
  opacity: 1;
  transform: none;
}
.js-anim [data-reveal].is-visible > .container > *:nth-child(2) {
  transition-delay: .12s;
}
.js-anim [data-reveal].is-visible > .container > *:nth-child(3) {
  transition-delay: .2s;
}


/* ------------------------------------------------------------
   17. RÜCKSICHT AUF "WENIGER BEWEGUNG"
   Wer im Betriebssystem Animationen reduziert hat, bekommt die
   Seite sofort fertig zu sehen, ganz ohne Bewegung.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }

  .cab-part,
  .js-anim [data-reveal] > .container > * {
    opacity: 1;
    transform: none;
  }

  .tile:hover { transform: none; }
}