/* site.css — geteilte Basis- & Komponenten-Styles für alle Seiten
   (extrahiert aus index.html; Werte 1:1). Tailwind-Utilities kommen aus styles.css. */

html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: #F6F2EC;
  color: #161512;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.font-serif { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; letter-spacing: -0.01em; }
.display { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; letter-spacing: -0.025em; line-height: 0.96; }
/* Hero-Titel — eigene Größe (Tailwind text-8xl ist nicht im Build) */
.hero-title { font-size: clamp(2.75rem, 8vw, 6.5rem); line-height: 0.94; }
/* Sehr schmale Handys: lange Ortsnamen ("Gummersbach.", "Bergneustadt.") passen sonst nicht in die Zeile */
@media (max-width: 400px) { .hero-title { font-size: clamp(2.25rem, 11.5vw, 2.75rem); } }
.eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6E6A60;
}
.hairline { border-color: #E5DFD5; }

/* Reveal on scroll.
   Sichtbar ist der Ausgangszustand. Versteckt wird nur, wenn JavaScript
   nachweislich laeuft und die Klasse js-an gesetzt hat — sonst bliebe der
   Inhalt bei einem Skriptfehler, deaktiviertem JavaScript oder in einem
   Renderer ohne Ausfuehrung dauerhaft unsichtbar. */
.reveal { transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
html.js-an .reveal { opacity: 0; transform: translateY(18px); }
html.js-an .reveal.in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html.js-an .reveal { opacity: 1; transform: none; transition: none; }
}

/* Numbered section markers */
.sec-num { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

/* Form */
.field {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(245,241,232,0.25);
  padding: 14px 0 12px;
  font-family: inherit;
  font-size: 15px;
  color: #F5F1E8;
  width: 100%;
  outline: none;
  transition: border-color .2s ease;
}
.field:focus { border-bottom-color: #F5F1E8; }
.field::placeholder { color: rgba(245,241,232,0.45); }
.field-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245,241,232,0.55);
  font-weight: 500;
}

/* Buttons */
.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 26px;
  background: #161512;
  color: #F6F2EC;
  border-radius: 999px;
  font-weight: 500;
  font-size: 15px;
  transition: background .2s ease, transform .2s ease;
}
.btn-primary:hover { background: #C2643A; }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 22px;
  color: #161512;
  border-radius: 999px;
  font-weight: 500;
  font-size: 15px;
  border: 1px solid #161512;
  transition: background .2s, color .2s;
}
.btn-ghost:hover { background: #161512; color: #F6F2EC; }
.arrow-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 500;
  color: #161512;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color .2s, gap .2s;
}
.arrow-link:hover { color: #C2643A; gap: 12px; }

/* Pricing */
.price-card {
  background: #FBF8F3;
  border: 1px solid #E5DFD5;
  border-radius: 18px;
  padding: 36px 32px;
  transition: transform .3s ease, box-shadow .3s ease;
  display: flex; flex-direction: column;
}
.price-card.featured {
  background: #161512;
  color: #F6F2EC;
  border-color: #161512;
  transform: translateY(-8px);
  box-shadow: 0 24px 40px -18px rgba(20,18,15,0.35);
}
.price-card.featured .feature-row { border-color: #2A2823; }
.price-card.featured .check { color: #C2643A; }
.price-card.featured .muted-text { color: #B0AB9F; }

/* Die transition auf .price-card war deklariert, aber es gab nie einen
   :hover-Zustand, der sie ausgeloest haette. Ease-out, kein Zurueckfedern. */
.price-card {
  transition: transform .42s cubic-bezier(.25,1,.5,1), box-shadow .42s cubic-bezier(.25,1,.5,1);
  will-change: transform;
}
/* Die Paketkarten tragen auch .reveal. Seit die Reveal-Regel als
   html.js-an .reveal.in geschrieben ist, liegt sie bei Spezifitaet (0,3,1)
   und ihr transform:translateY(0) schlaegt ein blosses .price-card:hover
   mit (0,2,0). Darum die Hover-Regeln in beiden Fassungen: die mit
   html.js-an gewinnt gegen die Reveal-Regel, die blosse deckt den Fall
   ohne JavaScript ab. */
.price-card:hover,
.price-card:focus-within,
html.js-an .price-card:hover,
html.js-an .price-card:focus-within {
  transform: translateY(-7px) scale(1.014);
  box-shadow: 0 28px 48px -22px rgba(20,18,15,.32);
}
/* featured steht bereits 8px hoeher, sonst faellt es beim Hover zurueck. */
.price-card.featured:hover,
.price-card.featured:focus-within,
html.js-an .price-card.featured:hover,
html.js-an .price-card.featured:focus-within {
  transform: translateY(-15px) scale(1.014);
  box-shadow: 0 34px 58px -20px rgba(20,18,15,.48);
}
.price-card .font-serif { transition: transform .42s cubic-bezier(.25,1,.5,1); transform-origin: left center; }
.price-card:hover .font-serif { transform: scale(1.035); }
html.js-an .price-card:hover .font-serif { transform: scale(1.035); }

@media (prefers-reduced-motion: reduce) {
  .price-card, .price-card .font-serif { transition: none; will-change: auto; }
  .price-card:hover, .price-card:focus-within { transform: none; }
  .price-card.featured:hover, .price-card.featured:focus-within { transform: translateY(-8px); }
  .price-card:hover .font-serif { transform: none; }
}
.price-custom {
  background: #F6F2EC;
  border: 1px solid #E5DFD5;
  border-radius: 18px;
  padding: 40px 36px;
}
@media (min-width: 1024px) { .price-custom { padding: 48px 56px; } }
.feature-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0;
  border-top: 1px solid #E5DFD5;
  font-size: 14px;
}
.check { color: #C2643A; flex-shrink: 0; }
.cross { color: #B0AB9F; flex-shrink: 0; }

/* Process steps */
.step-num {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 64px;
  line-height: 1;
  color: #C2643A;
}

/* Tablet (768 bis 1023 px): Die fuenf Menuepunkte passen nicht neben Name, Telefon, WhatsApp und
   Erstgespraech (bei 768 px fehlten 130 px, der Name lief in "Leistungen"). Dort wandern nur die
   Menuepunkte ins Hamburger-Menue, Telefon, WhatsApp und Erstgespraech bleiben in der Kopfzeile. */
@media (min-width: 768px) and (max-width: 1023px) {
  .nav-links { display: none !important; }
  #mobileMenuBtn { display: inline-flex !important; align-items: center; justify-content: center; }
  #mobileNav { display: block !important; }
  .nav-links + div { margin-left: auto; margin-right: 12px; }
}

/* Mobile menu — geschlossen unklickbar & unsichtbar */
.mobile-nav {
  transform: translateY(-100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform .35s cubic-bezier(.4,0,.2,1), visibility 0s .35s;
}
.mobile-nav.open {
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition: transform .35s cubic-bezier(.4,0,.2,1), visibility 0s 0s;
}

/* ---------------------------------------------------------------
   Aufklappmenues in der Kopfnavigation
   Der Hauptpunkt bleibt ein echter Link; nur der kleine Pfeil daneben
   klappt auf. Ohne JavaScript oeffnet :hover und :focus-within das
   Menue -- Tastaturbedienung funktioniert also auch dann.
   Rand und Flaeche folgen den Preiskarten (#E5DFD5 auf #FBF8F3);
   das Feld ist zusaetzlich durch seinen Schatten als schwebend
   erkennbar, der Rand ist nicht das einzige Merkmal.
   --------------------------------------------------------------- */
.nav-item { position: relative; }
.nav-topline { display: inline-flex; align-items: center; gap: 1px; }
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0; margin: 0;
  border: 0; background: none; color: inherit; cursor: pointer; border-radius: 5px;
}
.nav-toggle svg { transition: transform .18s ease; }
.nav-item.offen .nav-toggle svg { transform: rotate(180deg); }
.nav-toggle:focus-visible { outline: 2px solid #C2643A; outline-offset: 2px; }

.nav-menu {
  display: none;
  position: absolute; top: calc(100% + 12px); left: -14px; z-index: 60;
  min-width: 232px; padding: 8px;
  background: #FBF8F3; border: 1px solid #E5DFD5; border-radius: 14px;
  box-shadow: 0 20px 44px -24px rgba(20,18,15,.42);
}
/* Unsichtbarer Puffer: sonst klappt das Menue zu, waehrend der Zeiger
   die Luecke zwischen Punkt und Feld ueberquert. */
.nav-menu::before {
  content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px;
}
.nav-item:hover > .nav-menu,
.nav-item:focus-within > .nav-menu,
.nav-item.offen > .nav-menu { display: block; }

.nav-menu a {
  display: block; padding: 8px 12px; border-radius: 9px;
  font-size: 14px; line-height: 1.35; color: #2A2823; text-decoration: none;
  white-space: nowrap;
}
/* #C2643A kaeme auf der Hoverflaeche nur auf 3,39:1 -- der dunklere
   Ton misst 4,77:1 und haelt die Grenze fuer Fliesstext. */
.nav-menu a:hover, .nav-menu a:focus-visible { background: #F0EAE0; color: #A34E28; }
.nav-menu a:focus-visible { outline: 2px solid #C2643A; outline-offset: -2px; }

/* Acht Wissensbeitraege sind fuer eine Spalte zu viel. */
.nav-menu--breit { min-width: 470px; }
.nav-item:hover > .nav-menu--breit,
.nav-item:focus-within > .nav-menu--breit,
.nav-item.offen > .nav-menu--breit { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; }
.nav-menu--breit a { white-space: normal; }

/* Auf dem Telefon schwebt nichts: die Unterpunkte stehen eingerueckt
   unter ihrem Hauptpunkt und brauchen kein Aufklappen. */
/* Langes Menue auf kleinen Telefonen: im festen Kopf scrollbar statt abgeschnitten. */
.mobile-nav { max-height: calc(100vh - 4rem); max-height: calc(100dvh - 4rem); overflow-y: auto; overscroll-behavior: contain; }
.mobile-nav .nav-sub { display: flex; flex-direction: column; padding: 2px 0 10px 16px; }
.mobile-nav .nav-sub a { padding: 6px 0; font-size: 14px; color: #6E6A60; border: 0; }
.mobile-nav .nav-sub a:hover { color: #A34E28; }
/* Branchenseiten eingerueckt unter "Branchenvorlagen" im Menue Arbeiten. */
.nav-menu a.nav-unter { padding: 6px 12px 6px 26px; font-size: 13.5px; color: #6E6A60; }
.mobile-nav .nav-sub a.nav-unter { padding-left: 14px; font-size: 13.5px; }

@media (prefers-reduced-motion: reduce) { .nav-toggle svg { transition: none; } }

/* Section anchor offset */
section { scroll-margin-top: 80px; }

/* Sprunglink: nur bei Tastaturfokus sichtbar. WCAG 2.4.1 (Level A) --
   ohne ihn muss sich jeder Tastaturnutzer auf JEDER Seite erst durch
   Logo, fuenf Navigationspunkte, Login und CTA arbeiten. */
.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:#161512; color:#F6F2EC;
  padding:10px 18px; border-radius:0 0 8px 0;
  font-size:14px; font-weight:500; text-decoration:none;
}
.skip:focus{ left:0; }

/* ---------------------------------------------------------------
   Kontrastkorrekturen (WCAG 2.2 AA). Nachgerechnet, nicht geschaetzt.
   Der Marken-Token --accent (#C2643A) bleibt unveraendert -- er wird
   fuer Flaechen und Raender weiter gebraucht. Nur die TEXT-Nutzung
   bekommt den dunkleren Ton, weil dort 4,5:1 gefordert sind.
   --------------------------------------------------------------- */
.text-accent, .hover\:text-accent:hover { color: #A34E28; }   /* 3,64 -> 5,12 auf Creme */

/* Aktive Seite nicht nur ueber Farbe kennzeichnen (WCAG 1.4.1, Level A) */
[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; }

/* Fokus sichtbar -- fehlte in site.css komplett, stand nur in der
   Inline-Kopie von index.html. */
:focus-visible { outline: 2px solid #A34E28; outline-offset: 3px; }
.field:focus-visible { outline: 2px solid #F5F1E8; outline-offset: 3px; }

/* Eingabefelder: Rand war 1,56:1, gefordert sind 3,0. #686660 misst 3,18
     (der zuerst erwogene Ton #5B5952 kam nur auf 2,60).
   Schriftgroesse 16px verhindert, dass iOS beim Antippen hineinzoomt
   und nicht wieder herauszoomt. */
.field { border-bottom-color: #686660 !important; font-size: 16px; }
.field::placeholder { color: rgba(245,241,232,0.62); }          /* 4,16 -> 6,84 */

/* Kreuz-Symbol "nicht enthalten" traegt Bedeutung -> 3,0 gefordert */
.cross { color: #8A8578; }

/* Pflichtfeld-Kennzeichnung. Der Stern ist fuer Screenreader per
   aria-hidden ausgeblendet -- dort traegt aria-required die Information. */
.req-stern{ color:#A34E28; font-weight:600; }

/* Tap-Ziele: 44px ist die Untergrenze, unter der Treffsicherheit auf
   Beruehrungsbildschirmen messbar leidet. */
#mobileMenuBtn, .device-toggle button, .filter__chip { min-height: 44px; }
.device-toggle button, .filter__chip { display: inline-flex; align-items: center; }

/* Feldbezogene Fehlermeldungen. Stand bisher nur in der Inline-Kopie von
   index.html -- kontakt.html hatte die Klasse gar nicht. */
.field-error { color: #E8927C; font-size: 12px; margin-top: 6px; }
.field[aria-invalid="true"] { border-bottom-color: #E8927C !important; }
/* Pflichtangabe gewerblich/privat (anfrage-formular.js erzeugt die Knoepfe).
   Gleiche Anmutung wie .field, aber als Radiogruppe -- zwei Schaltflaechen
   statt eines Auswahlfeldes, damit die Entscheidung sichtbar getroffen und
   nicht uebersehen wird. Genutzt von kontakt.html und index.html.
   ACHTUNG: index.html laedt site.css nicht und traegt eine eigene Kopie. */
.typ-gruppe { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.typ-knopf { padding: 13px 16px; border: 1px solid #3A3833; border-radius: 12px; background: transparent;
             color: #F6F2EC; font: inherit; font-size: 15px; cursor: pointer; text-align: center;
             transition: border-color .15s, background-color .15s; }
.typ-knopf:hover { border-color: #C2643A; }
.typ-knopf:focus-visible { outline: 2px solid #C2643A; outline-offset: 2px; }
.typ-knopf.is-an { border-color: #C2643A; background: rgba(194, 100, 58, .16); }
@media (max-width: 460px) { .typ-gruppe { grid-template-columns: 1fr; } }

/* Grosse Bildschirme: Die ganze Seite waechst proportional mit (Schrift, Abstaende, Bilder,
   Ringe, Inhaltsverzeichnis), statt nur breiter zu werden und Loecher zu bekommen. Wirkt wie die
   Zoomstufe des Browsers. Stufen so gewaehlt, dass die Layoutbreite nie unter ~1900 px faellt
   (dort ist alles nachgemessen); unter 2000 px Fensterbreite unveraendert. zoom: Chrome, Safari,
   Firefox ab 126; aeltere Browser zeigen die Seite einfach in normaler Groesse. */
@media (min-width: 2000px) { html { zoom: 1.05; } }
@media (min-width: 2150px) { html { zoom: 1.12; } }
@media (min-width: 2300px) { html { zoom: 1.2; } }
@media (min-width: 2450px) { html { zoom: 1.27; } }
@media (min-width: 2600px) { html { zoom: 1.35; } }