/* ============================================================
   Online Webshop Strickerei – style.css
   Erstellt von MyWebProfi (mywebprofi.at)
   ============================================================ */

/* ─────────────────────────────────────────────
   CSS CUSTOM PROPERTIES
───────────────────────────────────────────── */
:root {
  /* Farben */
  --col-black:     #0a0a0a;
  --col-white:     #ffffff;
  --col-cream:     #f8f5f1;
  --col-gray-lt:   #f0ece6;
  --col-gray-mid:  #d6cfc6;
  --col-text:      #2a2420;
  --col-muted:     #7a716b;

  /* Statusfarben & Hover (statt harter Hex-Codes im Code) */
  --col-black-hover: #333333;
  --col-success:     #2d6a4f;
  --col-error:       #c62828;

  /* RGB-Kanäle für rgba() (statt harter Codes im Code) */
  --col-white-rgb:  255, 255, 255;
  --col-black-rgb:  10, 10, 10;
  --col-shadow-rgb: 0, 0, 0;

  /* Markenakzent – warmes Altrosa/Terracotta (sparsam einsetzen).
     --col-accent:      für große/dekorative Elemente & UI (Linien, Punkte, Ziffern)
     --col-accent-deep: dunkler, für kleine Texte → AA-Kontrast auf Hell & Creme */
  --col-accent:      #b07a72;
  --col-accent-deep: #8f5d55;
  --col-accent-rgb:  176, 122, 114;

  /* Typografie */
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:  'Jost', system-ui, -apple-system, sans-serif;

  /* Abstände */
  --pad: clamp(1.5rem, 5vw, 4rem);
  --section-gap: clamp(5rem, 10vw, 9rem);
  --max-width: 1200px;

  /* Übergänge */
  --ease: 0.3s ease;
  --ease-slow: 0.7s ease;

  /* Feine, grafische Leinen-/Strick-Textur für die Creme-Sektionen.
     Reine SVG-Datei-URI (kein externes Laden → DSGVO-konform, kein Extra-Request),
     entsättigt und auf ~4,5 % Deckkraft gebacken → spürbar stofflich, nie aufdringlich. */
  --texture-linen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='lin'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23lin)' opacity='0.045'/%3E%3C/svg%3E");
}

/* ─────────────────────────────────────────────
   RESET & BASE
───────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--font-sans);
  font-size: clamp(0.95rem, 1.8vw, 1.05rem);
  font-weight: 300;
  line-height: 1.8;
  color: var(--col-text);
  background: var(--col-white);
  overflow-x: hidden;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
}
ul, ol { list-style: none; }
button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}
input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}
abbr { text-decoration: none; }

/* Einheitlicher Tastatur-Fokus für alle interaktiven Elemente */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--col-black);
  outline-offset: 3px;
}

/* Skip-Link – nur sichtbar bei Tastaturfokus */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 400;
  background: var(--col-black);
  color: var(--col-white);
  padding: 0.6rem 1rem;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  transition: top var(--ease);
}
.skip-link:focus {
  top: 1rem;
}

/* ─────────────────────────────────────────────
   TYPOGRAFIE
───────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.1;
  color: var(--col-black);
}
h1 { font-size: clamp(3rem, 6vw, 6rem); }
h2 { font-size: clamp(2rem, 4vw, 3.5rem); }
h3 { font-size: clamp(1rem, 2vw, 1.25rem); }
em { font-style: italic; }

/* ─────────────────────────────────────────────
   LAYOUT
───────────────────────────────────────────── */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.grid-halves {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
/* Fällt das Über-Mich-Foto weg (noch keine Datei hinterlegt), blendet
   script.js den Bildbereich aus – die Textspalte nimmt dann die volle
   Breite ein, statt eine leere Spalte stehen zu lassen. */
.grid-halves.ueber-ohne-bild { grid-template-columns: 1fr; }
.grid-kontakt {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

/* ─────────────────────────────────────────────
   HILFSKLASSEN
───────────────────────────────────────────── */
.label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--col-muted);
  margin-bottom: 0.85rem;
}
.section-header {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section-header h2 {
  margin-top: 0.5rem;
}
.section-desc {
  margin-top: 1rem;
  color: var(--col-muted);
  max-width: 55ch;
  line-height: 1.7;
}

/* ─────────────────────────────────────────────
   BUTTONS
───────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--col-black);
  color: var(--col-white);
  padding: 0.9rem 2.5rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background var(--ease), transform var(--ease);
  border: 1px solid var(--col-black);
}
.btn-primary:hover {
  background: var(--col-black-hover);
  transform: translateY(-2px);
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--col-black);
  color: var(--col-black);
  padding: 0.9rem 2.5rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: all var(--ease);
}
.btn-ghost:hover {
  background: var(--col-black);
  color: var(--col-white);
}
.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--col-black);
  padding-bottom: 2px;
  color: var(--col-black);
  transition: opacity var(--ease);
  margin-top: 2rem;
}
.btn-text:hover { opacity: 0.5; }
.btn-anfrage {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--col-black);
  border-bottom: 1px solid var(--col-black);
  padding-bottom: 2px;
  background: none;
  cursor: pointer;
  transition: opacity var(--ease);
  font-family: var(--font-sans);
  white-space: nowrap;
}
.btn-anfrage:hover { opacity: 0.4; }
.btn-submit {
  width: 100%;
  margin-top: 0.5rem;
}

/* ─────────────────────────────────────────────
   ANIMATIONS – SCROLL REVEAL
───────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--ease-slow), transform var(--ease-slow);
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
/* Gestaffelte Karten */
.produkt-card:nth-child(2).reveal { transition-delay: 0.1s; }
.produkt-card:nth-child(3).reveal { transition-delay: 0.2s; }
.produkt-card:nth-child(4).reveal { transition-delay: 0.05s; }
.produkt-card:nth-child(5).reveal { transition-delay: 0.15s; }
.produkt-card:nth-child(6).reveal { transition-delay: 0.25s; }

/* Hero Einblende-Animation */
.fade-up {
  opacity: 0;
  transform: translateY(18px);
  animation: fadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.fade-up:nth-child(1) { animation-delay: 0.15s; }
.fade-up:nth-child(2) { animation-delay: 0.35s; }
.fade-up:nth-child(3) { animation-delay: 0.55s; }
.fade-up:nth-child(4) { animation-delay: 0.75s; }
@keyframes fadeUp {
  to { opacity: 1; transform: none; }
}

/* ─────────────────────────────────────────────
   HEADER / NAV
───────────────────────────────────────────── */
#site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1.4rem var(--pad);
  transition: background var(--ease), box-shadow var(--ease), padding var(--ease);
}
#site-header.scrolled {
  background: rgba(var(--col-white-rgb), 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 var(--col-gray-lt);
  padding: 0.9rem var(--pad);
}
#site-header.scrolled .logo img { height: 44px; }
.nav-container {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.logo img {
  display: block;
  height: 58px;
  width: auto;
  transition: height var(--ease);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}
.nav-links a {
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--col-text);
  transition: opacity var(--ease);
}
.nav-links a:hover { opacity: 0.45; }
.nav-cta {
  border: 1px solid var(--col-black) !important;
  padding: 0.45rem 1.25rem;
}
/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 5px;
  z-index: 101;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--col-black);
  transition: all var(--ease);
}
.nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ─────────────────────────────────────────────
   HERO
───────────────────────────────────────────── */
#hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}
.hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 50%;
  /* Vertikales Padding an Bildschirmhöhe koppeln: passt auf flachen Laptops
     in eine Bildschirmhöhe, bleibt auf hohen Monitoren großzügig. */
  padding: clamp(7rem, 14vh, 11rem) var(--pad) clamp(2.5rem, 6vh, 5.5rem);
  /* Text-Kante am zentrierten 1200px-Container ausrichten (ab ~1440px sichtbar) */
  padding-left: max(var(--pad), calc((100vw - var(--max-width)) / 2 + var(--pad)));
  /* Milchig-durchsichtiger Glaseffekt */
  background: rgba(var(--col-white-rgb), 0.52);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.hero-tag {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--col-muted);
  margin-bottom: 1.75rem;
}
.hero-inner h1 {
  /* Schriftgröße zusätzlich an die Bildschirmhöhe koppeln (min(6vw, 8vh)),
     damit die große Headline auf flachen Laptops nicht auf 6 Zeilen umbricht
     und der Hero in eine Bildschirmhöhe passt. Auf hohen Monitoren greift 6vw. */
  font-size: clamp(2.75rem, min(6vw, 7.4vh), 6rem);
  line-height: 1.05;
  margin-bottom: 1.5rem;
}
.hero-sub {
  max-width: 42ch;
  color: var(--col-muted);
  font-size: 1rem;
  line-height: 1.8;
  /* Abstand auf flachen Schirmen straffen, auf hohen großzügig lassen */
  margin-bottom: clamp(1.25rem, 3vh, 2.5rem);
}
.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
/* Hero Hintergrundbild – vollflächig */
.hero-visual {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 9s ease;
}
#hero:hover .hero-visual img { transform: scale(1.04); }
.hero-visual-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(var(--col-shadow-rgb), 0.08) 0%, transparent 60%);
  pointer-events: none;
}
/* Scroll-Indikator */
.hero-scroll {
  position: absolute;
  bottom: 2.5rem;
  left: var(--pad);
  display: flex;
  align-items: center;
  gap: 1rem;
  z-index: 3;
  pointer-events: none;
}
.hero-scroll span {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--col-muted);
}
.scroll-line {
  width: 60px;
  height: 1px;
  background: var(--col-gray-mid);
  position: relative;
  overflow: hidden;
}
.scroll-line::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: var(--col-black);
  animation: linePulse 2.2s ease-in-out infinite;
}
@keyframes linePulse {
  0%   { left: -100%; }
  100% { left: 100%; }
}
/* Auf flachen Bildschirmen füllt der Hero-Inhalt die ganze Höhe – dann würde der
   absolut positionierte Scroll-Hinweis mit der letzten Textzeile (Microcopy)
   kollidieren. Erst ab ~840px Höhe gibt es genug Abstand, darunter ausblenden. */
@media (max-height: 840px) {
  .hero-scroll { display: none; }
}

/* ─────────────────────────────────────────────
   ÜBER MICH
───────────────────────────────────────────── */
.section-ueber {
  padding: var(--section-gap) 0;
  background: var(--col-cream);
}
.ueber-image {
  position: relative;
}
.ueber-image img {
  width: 100%;
  height: 520px;
  object-fit: cover;
}
.ueber-text h2 {
  margin-bottom: 1.5rem;
}
.ueber-text p {
  color: var(--col-muted);
}
.ueber-text p + p {
  margin-top: 1rem;
}

/* ─────────────────────────────────────────────
   PRODUKTE
───────────────────────────────────────────── */
.section-produkte {
  padding: var(--section-gap) 0;
}
.produkte-grid {
  display: grid;
  /* minmax(0, 1fr) statt 1fr → Spalten sind exakt gleich breit und richten sich
     NICHT nach dem längsten Textinhalt (z. B. nowrap-Preiszeile). */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* Alle Reihen gleich hoch → jede Produktkarte exakt gleich groß */
  grid-auto-rows: 1fr;
  gap: 3rem 2rem;
}
/* Farbhinweis unter dem Produkt-Grid – dezent, nicht als Warnschild */
.produkte-farbhinweis {
  margin: 3rem auto 0;
  max-width: 60ch;
  text-align: center;
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--col-muted);
}
.produkt-card {
  display: flex;
  flex-direction: column;
}
.produkt-bild {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--col-gray-lt);
  margin-bottom: 1.2rem;
}
.produkt-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.produkt-card:hover .produkt-bild img {
  transform: scale(1.05);
}
/* Platzhalter für Sonderanfertigung */
.produkt-bild--placeholder {
  background: var(--col-gray-lt);
  display: flex;
  align-items: center;
  justify-content: center;
}
.placeholder-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  color: var(--col-gray-mid);
  text-align: center;
}
.placeholder-icon {
  font-size: 2.5rem;
  line-height: 1;
}
.placeholder-inner span:last-child {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.produkt-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.produkt-info h3 {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  margin-bottom: 0.3rem;
}
.produkt-info p {
  font-size: 0.88rem;
  color: var(--col-muted);
  flex: 1;
  line-height: 1.65;
}
.produkt-info .produkt-unikat {
  flex: 0 0 auto;
  margin-top: 0.6rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--col-text);
}
.produkt-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  /* Kein trennender Strich mehr: Seit der Preis oben am Titel sitzt, würde eine
     Linie über dem alleinstehenden „Anfragen"-Button nichts mehr trennen und
     ihn optisch vom eigenen Produkt lösen. Der Abstand nach oben grenzt den
     Button dezent ab, der große Abstand zur nächsten Karte ordnet ihn eindeutig
     seiner Karte zu. */
  margin-top: 1.4rem;
}
/* Preis sitzt direkt unter dem Produktnamen (statt im Footer). Dadurch ist
   er auf dem Handy eindeutig dem Titel darüber zugeordnet und kann optisch
   nicht mehr zum darunterliegenden Bild „wandern". */
.preis {
  display: block;
  margin-bottom: 1rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--col-black);
}

/* ─────────────────────────────────────────────
   GALERIE / SLIDER
───────────────────────────────────────────── */
.section-galerie {
  padding: var(--section-gap) 0;
  background: var(--col-cream);
}
.section-galerie .container {
  margin-bottom: 2rem;
}
.galerie-wrapper {
  position: relative;
  overflow: hidden;
}
.galerie-track {
  display: flex;
  gap: 1rem;
  padding: 0 var(--pad);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.galerie-item {
  flex: 0 0 calc(33.333% - 0.67rem);
  min-width: 240px;
  overflow: hidden;
}
.galerie-item img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.galerie-item:hover img { transform: scale(1.04); }
/* Slider Buttons */
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--col-white);
  border: 1px solid var(--col-gray-mid);
  width: 52px;
  height: 52px;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: all var(--ease);
}
.slider-btn:hover {
  background: var(--col-black);
  color: var(--col-white);
  border-color: var(--col-black);
}
.slider-prev { left: var(--pad); }
.slider-next { right: var(--pad); }
/* Dot-Navigation */
.slider-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.75rem;
  padding: 0 var(--pad);
}
.slider-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--col-gray-mid);
  border: none;
  cursor: pointer;
  transition: all var(--ease);
  padding: 0;
}
.slider-dot.active {
  background: var(--col-black);
  width: 24px;
  border-radius: 3px;
}

/* ─────────────────────────────────────────────
   FAQ
───────────────────────────────────────────── */
.section-faq {
  padding: var(--section-gap) 0;
}
.faq-list { max-width: 760px; }
.faq-item {
  border-top: 1px solid var(--col-gray-lt);
}
.faq-item:last-child {
  border-bottom: 1px solid var(--col-gray-lt);
}
.faq-item summary {
  padding: 1.4rem 0;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 400;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  user-select: none;
  transition: opacity var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 200;
  line-height: 1;
  flex-shrink: 0;
  transition: transform var(--ease);
  color: var(--col-muted);
}
.faq-item[open] > summary::after {
  transform: rotate(45deg);
  color: var(--col-black);
}
.faq-item summary:hover { opacity: 0.65; }
.faq-item summary:focus-visible {
  outline: 2px solid var(--col-black);
  outline-offset: 3px;
}
.faq-body {
  overflow: hidden;
}
.faq-body p {
  padding-bottom: 1.5rem;
  color: var(--col-muted);
  font-size: 0.93rem;
  line-height: 1.75;
}

/* ─────────────────────────────────────────────
   KONTAKT
───────────────────────────────────────────── */
.section-kontakt {
  padding: var(--section-gap) 0;
  background: var(--col-cream);
}
.kontakt-info h2 {
  margin-bottom: 1.25rem;
}
.kontakt-info p {
  color: var(--col-muted);
  max-width: 38ch;
  margin-bottom: 2rem;
}
.kontakt-liste {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 0.9rem;
}
.kontakt-liste li {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
}
.kontakt-liste li span {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--col-muted);
  min-width: 70px;
  flex-shrink: 0;
}
.kontakt-liste a {
  border-bottom: 1px solid var(--col-gray-mid);
  transition: opacity var(--ease);
}
.kontakt-liste a:hover { opacity: 0.55; }
/* Formular */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.2rem;
}
.form-group label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--col-muted);
}
.form-group input:not([type="checkbox"]),
.form-group textarea {
  background: var(--col-white);
  border: 1px solid var(--col-gray-lt);
  border-bottom-color: var(--col-gray-mid);
  padding: 0.8rem 1rem;
  color: var(--col-text);
  outline: none;
  transition: border-color var(--ease);
  border-radius: 0;
  width: 100%;
  appearance: none;
}
.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--col-black);
}
/* Deutlich sichtbarer Tastatur-Fokus (WCAG 2.4.7) – zusätzlich zum Border-Wechsel */
.form-group input:focus-visible,
.form-group textarea:focus-visible {
  outline: 2px solid var(--col-black);
  outline-offset: 2px;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--col-gray-mid);
}
.form-group textarea {
  resize: vertical;
  min-height: 130px;
}
.form-check {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.75rem;
}
.form-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--col-black);
  cursor: pointer;
}
.form-check label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.82rem;
  font-weight: 300;
  color: var(--col-muted);
  line-height: 1.6;
  cursor: pointer;
}
.form-check label a {
  color: var(--col-text);
  border-bottom: 1px solid var(--col-gray-mid);
  transition: opacity var(--ease);
}
.form-check label a:hover { opacity: 0.55; }
.frc-captcha {
  margin-bottom: 1.2rem;
}
.form-status {
  min-height: 1.5rem;
  font-size: 0.88rem;
  line-height: 1.5;
  margin-bottom: 0.75rem;
  display: none;
}
.form-status.show { display: block; }
.form-status.success { color: var(--col-success); }
.form-status.error   { color: var(--col-error); }

/* ─────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────── */
.site-footer {
  padding: 3.5rem 0;
  border-top: 1px solid var(--col-gray-lt);
  background: var(--col-white);
}
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  text-align: center;
}
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.footer-nav {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}
.footer-nav a {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--col-muted);
  transition: color var(--ease);
}
.footer-nav a:hover { color: var(--col-black); }
.footer-copy {
  font-size: 0.8rem;
  color: var(--col-muted);
  line-height: 1.7;
}
.footer-copy a {
  border-bottom: 1px solid var(--col-gray-mid);
  transition: opacity var(--ease);
}
.footer-copy a:hover { opacity: 0.55; }

/* ─────────────────────────────────────────────
   COOKIE BANNER
───────────────────────────────────────────── */
.cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 200;
  background: var(--col-black);
  color: var(--col-white);
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: 0.83rem;
  transform: translateY(110%);
  transition: transform 0.45s ease;
}
.cookie-banner.show { transform: translateY(0); }
.cookie-banner p { max-width: 70ch; line-height: 1.5; }
.cookie-banner a {
  color: var(--col-gray-mid);
  border-bottom: 1px solid var(--col-gray-mid);
}
.btn-cookie {
  background: var(--col-white);
  color: var(--col-black);
  padding: 0.55rem 1.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity var(--ease);
  font-family: var(--font-sans);
  flex-shrink: 0;
}
.btn-cookie:hover { opacity: 0.8; }

/* ─────────────────────────────────────────────
   PRODUKTE – KATEGORIE-FILTER
───────────────────────────────────────────── */
.produkte-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  margin: 0 0 2.5rem;
}
.produkte-filter[hidden] { display: none; }

.produkte-filter-btn {
  font-family: var(--font-sans);
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .6rem 1.3rem;
  border: 1px solid var(--col-gray-mid);
  border-radius: 99px;
  background: transparent;
  color: var(--col-text);
  cursor: pointer;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.produkte-filter-btn:hover {
  border-color: var(--col-accent);
  color: var(--col-accent-deep);
}
.produkte-filter-btn.active {
  background: var(--col-black);
  border-color: var(--col-black);
  color: var(--col-white);
}
.produkte-filter-btn:focus-visible {
  outline: 2px solid var(--col-accent-deep);
  outline-offset: 2px;
}
.produkte-filter-btn .filter-count {
  font-size: .7rem;
  opacity: .55;
  margin-left: .3rem;
}

/* Auf kleinen Bildschirmen horizontal scrollbar statt umbrechend */
@media (max-width: 560px) {
  .produkte-filter {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: .3rem;
  }
  .produkte-filter::-webkit-scrollbar { display: none; }
  /* flex: 0 0 auto -> Buttons behalten ihre Breite; min-height für Touch-Ziele */
  .produkte-filter-btn { flex: 0 0 auto; padding: .75rem 1.3rem; min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .produkte-filter-btn { transition: none; }
}

/* ─────────────────────────────────────────────
   PRODUKTE LADE-ANIMATION
───────────────────────────────────────────── */
.produkte-loading {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: .6rem;
  padding: 4rem 0;
}
.produkte-loading-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--col-gray-mid);
  animation: dotPulse 1.2s ease-in-out infinite;
}
.produkte-loading-dot:nth-child(2) { animation-delay: .2s; }
.produkte-loading-dot:nth-child(3) { animation-delay: .4s; }
@keyframes dotPulse {
  0%, 80%, 100% { transform: scale(.6); opacity: .4; }
  40%           { transform: scale(1);  opacity: 1; }
}

/* ─────────────────────────────────────────────
   LEGAL PAGES (Impressum, Datenschutz)
───────────────────────────────────────────── */
.legal-page {
  padding: 9rem var(--pad) var(--section-gap);
  max-width: 800px;
  margin: 0 auto;
}
.legal-page h1 {
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  margin-bottom: 0.5rem;
}
.legal-page .legal-intro {
  color: var(--col-muted);
  margin-bottom: 3rem;
  font-size: 0.9rem;
}
.legal-page h2 {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  margin: 2.5rem 0 0.75rem;
}
.legal-page h3 {
  font-size: 1rem;
  margin: 1.5rem 0 0.5rem;
}
.legal-page p, .legal-page li {
  color: var(--col-muted);
  font-size: 0.9rem;
  line-height: 1.8;
  margin-bottom: 0.75rem;
}
.legal-page ul {
  list-style: disc;
  padding-left: 1.5rem;
}
.legal-page a {
  color: var(--col-black);
  border-bottom: 1px solid var(--col-gray-mid);
}
.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--col-muted);
  margin-bottom: 3rem;
  border-bottom: 1px solid var(--col-gray-mid);
  padding-bottom: 2px;
  transition: color var(--ease);
}
.legal-back:hover { color: var(--col-black); }

/* ─────────────────────────────────────────────
   RESPONSIVE – TABLET (max 1024px)
───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .produkte-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .galerie-item {
    flex: 0 0 calc(50% - 0.5rem);
  }
  .grid-kontakt {
    grid-template-columns: 1fr 1.2fr;
  }
}

/* ─────────────────────────────────────────────
   RESPONSIVE – MOBIL (max 768px)
───────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Hero */
  #hero {
    min-height: 100svh;
  }
  .hero-inner {
    width: 100%;
    padding: 9rem 1.5rem 3rem;
    justify-content: flex-end;
    /* Mobil deckt der Textbereich die volle Breite ab. Statt eines flächigen
       Milchglases (das das Foto komplett verschluckt hat) ein Verlauf: oben
       klar → das Hero-Foto ist sichtbar, unten deckend → der Text bleibt
       gut lesbar. Kein backdrop-filter, sonst würde auch der obere, klare
       Bereich das Foto verwischen. */
    background: linear-gradient(
      to bottom,
      rgba(var(--col-white-rgb), 0) 0%,
      rgba(var(--col-white-rgb), 0) 22%,
      rgba(var(--col-white-rgb), 0.72) 46%,
      rgba(var(--col-white-rgb), 0.93) 66%,
      rgba(var(--col-white-rgb), 0.97) 100%
    );
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .hero-visual { opacity: 1; }
  .hero-visual-overlay { display: none; }
  /* Inhalt sitzt mobil am unteren Rand – Scroll-Hinweis würde überlagern */
  .hero-scroll { display: none; }

  /* Logo – auf Mobil über die Breite skalieren (eine Achse fix = kein Verzerren) */
  .logo img { height: auto; width: min(250px, 64vw); }
  #site-header.scrolled .logo img { height: auto; width: min(216px, 56vw); }

  /* Navigation */
  .nav-toggle { display: flex; }
  .nav-links {
    display: none;
    position: fixed;
    inset: 0;
    /* height zusätzlich zu inset:0 setzen: iOS Safari berechnet inset/vh beim
       Ein-/Ausblenden der Adressleiste sonst gegen die "große" Viewport-Höhe,
       wodurch der Overlay-Hintergrund kürzer als der sichtbare Bereich sein
       kann und die Seite dahinter (Hero-Buttons) durchscheint. dvh trackt die
       tatsächlich sichtbare Höhe live mit. */
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    background: var(--col-white);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
    z-index: 99;
  }
  .nav-links.open { display: flex; }
  /* Solange das Menü offen ist, über dem Cookie-Banner (z-index 200) liegen –
     sonst schneidet der Banner unten in die Menüpunkte hinein. */
  #site-header:has(.nav-links.open) {
    z-index: 210;
  }
  .nav-links a {
    font-size: 1.1rem;
    letter-spacing: 0.08em;
  }
  .nav-cta {
    padding: 0.6rem 2rem !important;
  }

  /* Grids */
  .grid-halves,
  .grid-kontakt {
    grid-template-columns: 1fr;
  }
  /* Über-Mich-Foto wird auf dem Handy jetzt MIT angezeigt (war vorher
     komplett ausgeblendet). Etwas niedriger als am Desktop, damit die
     Proportion auf schmalen Screens stimmt. */
  .ueber-image img { height: clamp(300px, 72vw, 440px); }
  .produkte-grid {
    grid-template-columns: 1fr;
    /* Großzügiger Abstand zwischen den (einspaltig gestapelten) Karten:
       nach dem Nähe-Prinzip signalisiert der Weißraum klar, wo eine Karte
       endet und die nächste beginnt – so wird der Preis nicht mit dem
       darunterliegenden Produkt verwechselt. */
    gap: 3.5rem;
  }
  /* Zusätzliche Abschlusslinie am unteren Kartenrand: markiert klar das Ende
     eines Produkts. Bewusst NAH am Button (kleines padding-bottom) und mit
     großem Abstand zur nächsten Karte (grid gap 3.5rem) → die Linie gehört
     eindeutig zur oberen Karte, nicht zur nächsten. Nicht nach der letzten
     Karte, damit keine Linie ins Leere läuft. */
  .produkt-card:not(:last-child) {
    padding-bottom: 1.6rem;
    border-bottom: 1px solid var(--col-gray-lt);
  }

  /* Galerie */
  .galerie-item {
    flex: 0 0 calc(80% - 0.5rem);
  }
  .galerie-item img { height: 300px; }

  /* Formular */
  .form-row { grid-template-columns: 1fr; }

  /* Footer */
  .footer-nav { gap: 1.25rem; }

  /* Cookie */
  .cookie-banner { padding: 1rem 1.25rem; }
  .cookie-banner p { font-size: 0.78rem; }
}

@media (max-width: 480px) {
  h1 { font-size: clamp(2.25rem, 9vw, 3rem); }
  /* Hero-H1 gezielt ansprechen – sonst überschreibt .hero-inner h1 (höhere
     Spezifität) diese Regel und die Headline läuft bei 320–480px über. */
  .hero-inner h1 { font-size: clamp(1.9rem, 8.5vw, 2.75rem); }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .btn-primary, .btn-ghost { width: 100%; justify-content: center; }
}

/* ─────────────────────────────────────────────
   HERO – MICROCOPY
───────────────────────────────────────────── */
.hero-microcopy {
  margin-top: 1.25rem;
  font-size: 0.78rem;
  color: var(--col-muted);
  letter-spacing: 0.02em;
}

/* ─────────────────────────────────────────────
   ÜBER MICH – VERTRAUENSELEMENTE
───────────────────────────────────────────── */
.vertrauen-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.65rem;
  margin-top: 1.85rem;
}
.vertrauen-liste li {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--col-text);
  border: 1px solid var(--col-gray-mid);
  padding: 0.42rem 0.85rem;
}

/* ─────────────────────────────────────────────
   PRODUKT-FOTO-SLIDER (je Produkt bis zu 3 Fotos)
───────────────────────────────────────────── */
.produkt-bild { position: relative; }
.pslider {
  position: relative;
  width: 100%;
  height: 100%;
}
.pslider-track {
  display: flex;
  height: 100%;
  /* Sanftes Gleiten statt abruptem Wechsel: längere Dauer + easeInOut-Kurve
     (beschleunigt und bremst weich ab). Die frühere easeOut-Kurve sprang
     sofort auf Tempo und wirkte dadurch ruckartig. */
  transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
}
.pslider-slide {
  flex: 0 0 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  display: block;
  overflow: hidden;
}
.pslider-slide:focus-visible {
  outline: 2px solid var(--col-black);
  outline-offset: -2px;
}
/* Pfeile im Produkt-Slider */
.pslider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--col-black);
  background: rgba(var(--col-white-rgb), 0.9);
  border: 1px solid var(--col-gray-lt);
  z-index: 3;
  opacity: 0;
  transition: opacity var(--ease), background var(--ease);
}
.produkt-bild:hover .pslider-arrow,
.pslider:focus-within .pslider-arrow { opacity: 1; }
.pslider-arrow:hover { background: var(--col-white); }
.pslider-prev { left: 0.55rem; }
.pslider-next { right: 0.55rem; }
/* Dots im Produkt-Slider */
.pslider-dots {
  position: absolute;
  bottom: 0.7rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  z-index: 3;
}
.pslider-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(var(--col-white-rgb), 0.6);
  border: 1px solid rgba(var(--col-shadow-rgb), 0.15);
  padding: 0;
  transition: all var(--ease);
}
.pslider-dot.active {
  background: var(--col-white);
  width: 20px;
  border-radius: 4px;
}
/* Touch-Geräte: Pfeile dauerhaft sichtbar */
@media (hover: none) {
  .pslider-arrow { opacity: 1; }
}

.produkte-empty {
  color: var(--col-muted);
  grid-column: 1 / -1;
  padding: 2rem 0;
}

/* Galerie-Item als Button (klickbar → Lightbox) */
.galerie-item {
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  display: block;
}
.galerie-item:focus-visible {
  outline: 2px solid var(--col-black);
  outline-offset: 3px;
}

/* ─────────────────────────────────────────────
   SO KOMMEN SIE ZU IHREM STÜCK
───────────────────────────────────────────── */
.section-weg {
  padding: var(--section-gap) 0;
  background: var(--col-cream);
}
.weg-schritte {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
.weg-schritt {
  padding-top: 1.5rem;
  border-top: 1px solid var(--col-gray-mid);
}
.weg-nummer {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--col-gray-mid);
  margin-bottom: 0.9rem;
}
.weg-schritt h3 {
  font-size: 1.15rem;
  margin-bottom: 0.6rem;
}
.weg-schritt p {
  color: var(--col-muted);
  font-size: 0.92rem;
  line-height: 1.7;
}
@media (min-width: 769px) {
  .weg-schritte { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
}

/* ─────────────────────────────────────────────
   HONEYPOT (Spam-Schutz, für Menschen unsichtbar)
───────────────────────────────────────────── */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 0;
  overflow: hidden;
}

/* ─────────────────────────────────────────────
   LIGHTBOX – Fotos vergrößert durchklicken
───────────────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(var(--col-black-rgb), 0.93);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.lightbox.open { opacity: 1; }
.lightbox[hidden] { display: none; }
.lightbox-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  max-width: min(94vw, 1000px);
}
.lightbox-img {
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  box-shadow: 0 24px 70px rgba(var(--col-shadow-rgb), 0.5);
}
.lightbox-caption {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--col-white);
  text-align: center;
}
.lightbox-close {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  width: 48px;
  height: 48px;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--col-white);
  background: none;
  border: none;
  transition: opacity var(--ease);
}
.lightbox-close:hover { opacity: 0.6; }
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--col-white);
  background: rgba(var(--col-white-rgb), 0.08);
  border: 1px solid rgba(var(--col-white-rgb), 0.25);
  transition: background var(--ease);
}
.lightbox-nav:hover { background: rgba(var(--col-white-rgb), 0.18); }
.lightbox-prev { left: 0.75rem; }
.lightbox-next { right: 0.75rem; }
.lightbox-counter {
  position: absolute;
  bottom: 1.1rem;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  color: rgba(var(--col-white-rgb), 0.7);
}
.lightbox-close:focus-visible,
.lightbox-nav:focus-visible {
  outline: 2px solid var(--col-white);
  outline-offset: 2px;
}
/* Mobil: Navigationspfeile etwas kleiner & unten */
@media (max-width: 640px) {
  .lightbox-nav { width: 44px; height: 44px; font-size: 1.2rem; }
  .lightbox-img { max-height: 70vh; }
  .lightbox-counter { bottom: 0.6rem; }
}

/* ─────────────────────────────────────────────
   REDUCED MOTION – Animationen für empfindliche Nutzer abschalten
───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Inhalte, die sonst per Animation/Transition sichtbar werden, sofort zeigen */
  .reveal, .fade-up { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   VEREDELUNG – Akzentfarbe (A), Haptik (B) & Mikro-Bewegung (C)
   Erstellt von MyWebProfi (mywebprofi.at)
   Nachträglich gebündelt ans Dateiende → überschreibt frühere
   Regeln gleicher Spezifität ganz bewusst per Quellreihenfolge.
   ============================================================ */

/* ─────────────────────────────────────────────
   A · AKZENTFARBE – warm, sparsam, markenbildend
───────────────────────────────────────────── */
/* Textmarkierung in zartem Altrosa statt Browser-Blau */
::selection      { background: rgba(var(--col-accent-rgb), 0.22); }
::-moz-selection { background: rgba(var(--col-accent-rgb), 0.22); }

/* Eyebrow-Labels tragen die Markenfarbe (dunkle Variante = AA-Kontrast) */
.label,
.hero-tag { color: var(--col-accent-deep); }

/* Große, dekorative Schritt-Ziffern */
.weg-nummer { color: var(--col-accent); }

/* Geöffneter FAQ-Marker & aktiver Galerie-Punkt */
.faq-item[open] > summary::after { color: var(--col-accent); }
.slider-dot.active { background: var(--col-accent); }

/* Warme Hover-/Fokus-Akzente auf Textlinks & Formularfeldern */
.footer-nav a:hover { color: var(--col-accent-deep); }
.btn-text:hover,
.btn-anfrage:hover {
  opacity: 1;
  color: var(--col-accent-deep);
  border-bottom-color: var(--col-accent-deep);
}
.form-group input:focus,
.form-group textarea:focus { border-color: var(--col-accent); }

/* ─────────────────────────────────────────────
   B · HAPTIK – Leinentextur & gezeichnete Naht-Linie
───────────────────────────────────────────── */
/* Feine Textur nur auf den Creme-Bändern (background-color bleibt erhalten,
   da hier nur das background-image-Longhand gesetzt wird). */
.section-ueber,
.section-galerie,
.section-weg,
.section-kontakt { background-image: var(--texture-linen); }

/* „Faden“ als Naht-Linie über den drei Schritten – zeichnet sich beim
   Einscrollen von links nach rechts (clip-path-Wipe statt Dash-Animation,
   damit die gestrichelte Naht-Optik erhalten bleibt). */
.weg-faden { color: var(--col-accent); height: 8px; margin: 0 0 2.75rem; }
.weg-faden svg { display: block; width: 100%; height: 100%; }
.weg-faden.reveal {
  opacity: 1; transform: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Auslöser an die (nicht geclippte) Schrittliste koppeln: deren .visible kommt
   zuverlässig vom IntersectionObserver. Ein selbst auf 0 geclipptes Element
   meldet in Chromium keine Intersection → eigene .visible-Klasse bliebe aus. */
.weg-faden.reveal.visible,
.section-weg:has(.weg-schritte.visible) .weg-faden.reveal { clip-path: inset(0 0 0 0); }

/* ─────────────────────────────────────────────
   C · MIKRO-BEWEGUNG
───────────────────────────────────────────── */
/* Schlanker Lesefortschritt-Balken am oberen Rand */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--col-accent);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 150;
  pointer-events: none;
  will-change: transform;
}

/* Hero-Bild: konstanter leichter Zoom als Spielraum für die Parallax
   (JS setzt translateY inline). Ersetzt den früheren 9s-Hover-Zoom. */
.hero-visual img {
  transition: none;
  transform: scale(1.1);
  will-change: transform;
}
#hero:hover .hero-visual img { transform: scale(1.1); }

/* Nav-Links: Unterstreichung läuft von links ein (statt Opacity-Fade) */
.nav-links a:not(.nav-cta) { position: relative; }
.nav-links a:not(.nav-cta)::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 1px;
  background: var(--col-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ease);
}
.nav-links a:not(.nav-cta):hover::after,
.nav-links a:not(.nav-cta):focus-visible::after { transform: scaleX(1); }
.nav-links a:not(.nav-cta):hover { opacity: 1; }
.nav-links a.nav-cta:hover {
  background: var(--col-black);
  color: var(--col-white);
  opacity: 1;
}

/* Pfeil-Nudge: Pfeil rutscht beim Hover sanft nach rechts.
   Der Pfeil kommt jetzt aus CSS (Markup ohne „→“), damit nur er sich bewegt. */
.btn-text::after,
.btn-anfrage::after {
  content: '→';
  display: inline-block;
  transition: transform var(--ease);
}
.btn-anfrage::after { margin-left: 0.4rem; }
.btn-text:hover::after,
.btn-anfrage:hover::after { transform: translateX(4px); }

/* Bild-Reveals als Masken-Wipe: Foto wird beim Einscrollen von unten
   aufgedeckt (clip-path). Beeinflusst kein Layout → kein CLS. */
.produkt-card .produkt-bild,
.galerie-wrapper .galerie-item {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.produkt-card.visible .produkt-bild,
.galerie-wrapper.visible .galerie-item { clip-path: inset(0 0 0 0); }
/* Leichte Staffelung der ersten Galeriebilder */
.galerie-wrapper.visible .galerie-item:nth-child(2) { transition-delay: 0.08s; }
.galerie-wrapper.visible .galerie-item:nth-child(3) { transition-delay: 0.16s; }
.galerie-wrapper.visible .galerie-item:nth-child(4) { transition-delay: 0.24s; }

/* Bewegungsempfindliche Nutzer: keine Wipes/Parallax – Inhalte sofort sichtbar.
   Nach dem globalen reduced-motion-Block notiert → gewinnt per Reihenfolge. */
@media (prefers-reduced-motion: reduce) {
  .produkt-card .produkt-bild,
  .galerie-wrapper .galerie-item,
  .weg-faden.reveal { clip-path: none !important; }
  .hero-visual img { transform: none !important; }
}

/* Vertrauens-Badges („Über mich“): dezentes Aufleuchten in der Markenfarbe.
   Bewusst KEIN Lift / kein Pointer-Cursor – die Chips sind nicht klickbar,
   ein button-artiger Hover würde falsche Klickbarkeit suggerieren.
   Nur auf Zeigegeräten (hover: hover), damit auf Touch nichts „klebt“. */
@media (hover: hover) {
  .vertrauen-liste li {
    transition: border-color var(--ease), color var(--ease), background var(--ease);
  }
  .vertrauen-liste li:hover {
    border-color: var(--col-accent);
    color: var(--col-accent-deep);
    background: rgba(var(--col-accent-rgb), 0.06);
  }
}