/* ============================================
   Schreinerei Eichenmann GmbH – Theme
   Neues, warmes, modernes Design: Holztöne
   ============================================ */

:root {
  --se-walnut: #4a3728;
  --se-walnut-dark: #362619;
  --se-oak: #b08655;
  --se-oak-light: #d9bd94;
  --se-cream: #faf6f0;
  --se-ink: #2b2622;
  --se-line: rgba(43,38,34,0.12);
  --se-huesler-green: #37463d;
  --se-huesler-green-light: #566c5e;
}

body.schreinerei {
  font-family: 'Inter', -apple-system, sans-serif;
  color: var(--se-ink);
  background: var(--se-cream);
  margin: 0;
}

.se-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  background: rgba(250,246,240,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--se-line);
}

.se-nav .logo {
  display: flex;
  align-items: center;
}

.se-nav .logo img {
  height: 92px;
  width: auto;
  display: block;
}

.se-nav ul {
  display: flex;
  gap: 28px;
}

.se-nav a {
  font-size: 0.92rem;
  font-weight: 500;
}

.se-nav a:hover { color: var(--se-oak); }

.se-nav .cta-btn {
  background: var(--se-oak);
  color: #2b2318;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  transition: transform 0.2s ease;
}

/* Gleiches Hover-Verhalten wie die Hero-Buttons (Nummer 5/6): nur ein
   leichtes Anheben, keine Farbänderung. */
.se-nav .cta-btn:hover { transform: translateY(-2px); }

.se-nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.se-burger {
  display: none;
  background: none;
  border: none;
  font-size: 1.4rem;
  color: var(--se-walnut);
}

.se-mobile-panel {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 8px 28px 20px;
  background: var(--se-cream);
  border-bottom: 1px solid var(--se-line);
}

.se-mobile-panel.open { display: flex; }

.se-mobile-panel a {
  padding: 12px 4px;
  border-bottom: 1px solid var(--se-line);
  font-weight: 500;
}

.se-mobile-panel a:last-child { border-bottom: none; }

.hero {
  position: relative;
  min-height: 86vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 75% 30%, rgba(176,134,85,0.25), transparent 55%),
    linear-gradient(135deg, #4a3728 0%, #362619 100%);
}

.hero .container {
  position: relative;
  z-index: 2;
  max-width: 540px;
  margin: 0;
  padding: 0 32px 0 56px;
  color: #fff;
}

/* Mobil ist der Hero deutlich höher als am Desktop (Text + das grosse
   Foto-Feld statt des schmalen seitlichen Fotos), darum reicht die reine
   Zentrierung über min-height nicht mehr für Luft oben/unten — sonst klebt
   die Eyebrow oben an und die Buttons wirken unten abgeschnitten. Feste
   Innenabstände statt Zentrierung sorgen für gleichmässige Luft, unabhängig
   von der tatsächlichen Bildschirmhöhe. */
@media (max-width: 960px) {
  .hero { min-height: 0; }
  .hero .container { padding: 56px 24px 64px; }
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, rgba(30,20,12,0.9) 0%, rgba(30,20,12,0.74) 34%, rgba(30,20,12,0.3) 52%, rgba(30,20,12,0) 64%);
  pointer-events: none;
}

.hero .eyebrow,
.hero h1,
.hero p.lead {
  text-shadow: 0 2px 14px rgba(0,0,0,0.35);
}

.hero .eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--se-oak-light);
  margin: 0 0 18px;
}

.hero h1 {
  font-family: 'Lora', Georgia, serif;
  font-weight: 500;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: 1.15;
  margin: 0 0 22px;
}

.hero p.lead {
  font-size: 1.08rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.85);
  margin: 0 0 32px;
  max-width: 520px;
}

.hero .actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.94rem;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.btn:hover { transform: translateY(-2px); }

.btn.primary { background: var(--se-oak); color: #2b2318; }
.btn.ghost { background: var(--se-oak); color: #2b2318; border: none; }

.hero-photo {
  position: absolute;
  right: -6%;
  top: 50%;
  transform: translateY(-50%);
  width: 46%;
  aspect-ratio: 3/4;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,0.35);
}

.hero-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
  cursor: pointer;
}

/* Die Rotation läuft jetzt (wie beim mobilen Foto-Streifen) per JS über
   eine .active-Klasse, nicht mehr per CSS-Keyframe-Schleife — dadurch kann
   das erste Foto beim Laden kurz (~1s) stehen bleiben, bevor der normale
   ~3s-Rhythmus einsetzt, ohne dass sich dieser Kurztakt bei jedem Zyklus
   wiederholt (siehe main.js). */
.hero-photo img.active {
  opacity: 1;
  pointer-events: auto;
}

/* Einzelne Fotos leicht verschieben/vergrössern, damit die Bildausschnitte
   passen (der Bildausschnitt wird durch dieses Feld selbst nach oben/unten
   bzw. rechts abgeschnitten – object-position greift hier nicht, da die
   Originalfotos exakt im Seitenverhältnis des Feldes sind). */
.hero-photo img:nth-child(1) { transform: scale(1.07) translateY(-3.3%); } /* Schrank mit Lamellen (Eingangsgarderobe): mehr unten zeigen, weniger reingezoomt */
.hero-photo img:nth-child(2) { transform: scale(1.04) translateX(3%); } /* Tisch: nach rechts verschieben, damit die rechte Tischecke nicht mehr abgeschnitten wird */
.hero-photo img:nth-child(3) { transform: scale(1.16) translateY(7%); }    /* Eichengarderobe: unverändert, siehe Notiz von Marco */

@media (prefers-reduced-motion: reduce) {
  .hero-photo img { transition: none; }
}

/* Mobile: die rotierenden Hero-Fotos sind ab 960px ausgeblendet (kein Platz
   für das seitliche Foto-Feld neben dem Text). Damit die schönen Projektfotos
   trotzdem auf dem Smartphone sofort zu sehen sind, steht dort stattdessen
   direkt nach der Überschrift ein automatisch durchlaufendes Foto-Feld (kein
   manuelles Wischen) — gleiche 5 Fotos, gleiche Überblend-Optik wie am
   Desktop. Der Takt (erstes Foto nur ~1s, alles danach im ~3s-Rhythmus,
   dauerhaft, nicht nur beim ersten Durchlauf) wird von main.js gesteuert
   (per Klasse .active umgeschaltet), nicht über eine CSS-Keyframe-Schleife —
   eine reine CSS-Schleife würde den kurzen 1s-Takt bei jedem Durchlauf
   wiederholen, nicht nur beim allerersten Foto. */
.hero-photo-mobile { display: none; }

@media (max-width: 960px) {
  .hero-photo-mobile {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 16px 34px rgba(0,0,0,0.3);
    margin: 20px 0 6px;
  }

  .hero-photo-mobile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    transition: opacity 0.5s ease;
  }

  .hero-photo-mobile img.active {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-photo-mobile img { transition: none; }
}

.section {
  padding: 92px 28px;
}

.section .container { max-width: 1140px; margin: 0 auto; }

.section-head {
  max-width: 620px;
  margin: 0 0 52px;
}

/* Überschrift/Einleitungssatz sollen hier nicht umbrechen — beide sind
   länger als die normale 620px-Textspalte, darum an diesen zwei Stellen
   gezielt breiter statt am Fliesstext generell zu drehen. */
#leistungen .section-head { max-width: 700px; }
#referenzen .section-head { max-width: 1080px; }

.section-head .eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--se-oak);
  font-weight: 600;
  margin: 0 0 12px;
}

.section-head h2 {
  font-family: 'Lora', Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  margin: 0 0 14px;
  color: var(--se-walnut);
}

.section-head p {
  color: rgba(43,38,34,0.7);
  line-height: 1.65;
}

.leistungen-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: flex-start;
}

.leistung-card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--se-line);
  overflow: hidden;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc((100% - 2 * 28px) / 3);
  max-width: calc((100% - 2 * 28px) / 3);
  /* flex-basis/max-width/max-height during open+close are driven frame-by-frame
     by JS (in sync with the auto-scroll), not by CSS transitions — see main.js.
     Only the hover feedback stays CSS-driven here. */
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.leistung-card:not(.expanded):hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(74,55,40,0.1);
  border-color: var(--se-oak);
}

.leistung-card.expanded {
  flex-basis: 100%;
  max-width: 100%;
  border-color: var(--se-oak);
  box-shadow: 0 16px 36px rgba(74,55,40,0.12);
}

/* Slot-Wrapper NUR um die Massivholzbetten-Karte: übernimmt deren Platz im
   3er-Raster (statt der Karte selbst), damit der Hüsler-Nest-Banner als
   absolut positioniertes Geschwisterelement fest an DIESE Karte angehängt
   werden kann — unabhängig davon, welche andere Karte gerade auf-/zugeklappt
   wird. Vorher war der Banner ein eigenes Flex-Element am Ende des Rasters:
   sobald irgendeine andere Karte aufklappte (und damit auf volle Breite
   sprang), rutschten alle nachfolgenden Geschwister – auch der Banner – im
   normalen Fluss mit, sodass er sichtbar bei der zuletzt geöffneten Karte
   "klebte" statt bei Massivholzbetten zu bleiben. */
.leistung-card-slot {
  position: relative;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc((100% - 2 * 28px) / 3);
  max-width: calc((100% - 2 * 28px) / 3);
  align-self: flex-start;
  transition: flex-basis 0s, max-width 0s;
}

.leistung-card-slot.expanded {
  flex-basis: 100%;
  max-width: 100%;
}

/* Der Banner hängt absolut positioniert unterhalb des Slots (siehe
   .leistung-banner unten) und nimmt darum von sich aus KEINEN Platz im
   Raster ein — ohne Reserve würde er die nachfolgende Karte im Raster
   überlappen, statt sauber darüber zu "schweben". Die nötige Reserve wird
   per JS (main.js, adjustHuslerBannerSpace) als margin-bottom gesetzt,
   nicht per CSS: eine Reserve über padding/::after INNERHALB des Slots
   würde dessen eigene Höhe vergrössern, wodurch sich "top:100%" beim
   Banner (der relativ zum Slot positioniert ist) automatisch mit nach
   unten verschieben würde — die Reserve würde sich damit selbst
   aufheben. margin ist aussen am Slot und beeinflusst darum nicht die
   Bezugsgrösse für die Banner-Position. */

/* Die Karte selbst ist jetzt kein direktes Flex-Kind des Rasters mehr,
   sondern füllt einfach ihren Slot-Wrapper vollständig aus. */
.leistung-card-slot .leistung-card {
  flex-basis: auto;
  max-width: none;
  width: 100%;
}

/* Werbebanner Hüsler Nest, fest an die Massivholzbetten-Karte angehängt
   (siehe .leistung-card-slot oben). Zwei Bild-Ebenen: die grüne "Platte"
   bekommt abgerundete Ecken wie die Leistungen-Kästchen, das darüber
   ragende, schräg fotografierte Heftchen bleibt bewusst eckig (siehe
   Notiz von Marco). */
.leistung-banner {
  position: absolute;
  left: 0;
  /* KEIN right:0 hier (siehe unten) — die Breite wird fest von main.js
     gesetzt (syncHuslerBanner), damit der Banner IMMER die gleiche Grösse
     behält (wie im zugeklappten Zustand), auch wenn die Massivholzbetten-
     Karte selbst geöffnet ist und der Slot dabei auf volle Rasterbreite
     wächst. Mit nur left:0/right:0 würde der Banner (dessen Bezugsrahmen
     der Slot ist) automatisch mitwachsen. */
  top: 100%;
  z-index: 2;
  /* zieht den Banner etwas nach oben, so dass er ein Stück über das Kästchen
     darüber hinausragt (wie von Marco eingezeichnet), statt mit normalem
     Zeilenabstand darunter zu stehen. Wert bewusst kleiner als früher
     (-52px), damit der jetzt grössere Banner bei geöffneter Massivholz-
     betten-Karte den Checklisten-Text am unteren Kartenrand nicht mehr
     überdeckt. */
  margin-top: -16px;
  transform: translateX(10px);
  transition: opacity 0.2s ease;
}

/* Bleibt jetzt IMMER sichtbar, auch wenn Massivholzbetten selbst geöffnet
   wird (auf Wunsch von Marco) — wächst dabei einfach mit dem Slot auf volle
   Breite mit (left:0;right:0 relativ zum Slot). Die dafür nötige Extra-
   Reserve unterhalb übernimmt weiterhin main.js (adjustHuslerBannerSpace),
   das die tatsächlich gerenderte Banner-Höhe misst — dadurch rutscht auch
   die im Raster nachfolgende Karte (Böden) automatisch weit genug nach
   unten, egal wie breit/hoch Slot und Banner gerade sind. */

.leistung-banner-plate {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  line-height: 0;
  box-shadow: 0 10px 26px rgba(74,55,40,0.14);
}

.leistung-banner-plate img {
  display: block;
  width: 100%;
  height: auto;
}

.leistung-banner-link {
  position: absolute;
}

.leistung-banner-link-pdf {
  left: 27.7%;
  top: 47.73%;
  width: 34.71%;
  height: 15.51%;
}

.leistung-banner-link-huesler {
  left: 19.06%;
  top: 78.16%;
  width: 52.52%;
  height: 12.53%;
}

.leistung-banner-booklet {
  position: absolute;
  left: 70.18%;
  width: 28.6%;
  bottom: 100%;
  height: auto;
  display: block;
  pointer-events: none;
}

.leistung-card-head {
  padding: 32px 26px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.leistung-card-head:hover,
.leistung-card.expanded .leistung-card-head {
  background: var(--se-oak-light);
}

.leistung-card-head:focus-visible {
  outline: 2px solid var(--se-oak);
  outline-offset: -2px;
}

.leistung-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.leistung-card .icon {
  width: 34px;
  height: 4px;
  border-radius: 2px;
  background: var(--se-oak);
}

.leistung-toggle-icon {
  position: relative;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  background: var(--se-oak-light);
  transition: transform 0.3s ease, background 0.2s ease;
}

.leistung-card-head:hover .leistung-toggle-icon {
  background: #fff;
}

.leistung-toggle-icon::before,
.leistung-toggle-icon::after {
  content: "";
  position: absolute;
  background: var(--se-oak);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.leistung-toggle-icon::before {
  left: 5px;
  top: 50%;
  width: 12px;
  height: 2px;
  transform: translateY(-50%);
}

.leistung-toggle-icon::after {
  top: 5px;
  left: 50%;
  width: 2px;
  height: 12px;
  transform: translateX(-50%);
}

.leistung-card.expanded .leistung-toggle-icon {
  transform: rotate(180deg);
  background: var(--se-oak);
}

.leistung-card.expanded .leistung-toggle-icon::before,
.leistung-card.expanded .leistung-toggle-icon::after {
  background: #fff;
}

.leistung-card.expanded .leistung-toggle-icon::after {
  opacity: 0;
  transform: translateX(-50%) rotate(90deg);
}

.leistung-card-head h3 {
  font-family: 'Lora', Georgia, serif;
  font-weight: 500;
  font-size: 1.15rem;
  margin: 0 0 10px;
  color: var(--se-walnut);
}

.leistung-card-head p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(43,38,34,0.72);
  margin: 0;
}

.leistung-card-panel {
  max-height: 0;
  overflow: hidden;
  /* height is driven frame-by-frame by JS, not a CSS transition (see main.js) */
}

.leistung-card-panel-inner {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 26px;
  align-items: start;
  padding: 26px 26px 32px;
  border-top: 1px solid var(--se-line);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.leistung-card.expanded .leistung-card-panel-inner {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.35s ease 0.12s, transform 0.35s ease 0.12s;
}

.leistung-media {
  aspect-ratio: 4/3;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 14px 32px rgba(74,55,40,0.16);
}

.leistung-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.leistung-media.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px;
  background: linear-gradient(140deg, var(--se-oak-light), var(--se-oak));
  box-shadow: none;
}

.leistung-media.placeholder span {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(43,38,34,0.6);
}

.leistung-media.repair-icon {
  flex-direction: column;
  gap: 16px;
}

.leistung-media.repair-icon svg {
  width: 62px;
  height: 62px;
  fill: var(--se-walnut);
  opacity: 0.82;
}

/* Hochformat-Fotos: ganzes Bild zeigen statt oben/unten abzuschneiden */
.leistung-media.contain-fit {
  background: var(--se-oak-light);
}

.leistung-media.contain-fit img {
  object-fit: contain;
}

.leistung-text p {
  color: rgba(43,38,34,0.72);
  line-height: 1.7;
  margin: 0;
  font-size: 0.95rem;
}

.check-list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.check-list li {
  position: relative;
  padding-left: 28px;
  font-size: 0.95rem;
  color: rgba(43,38,34,0.78);
}

.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--se-oak);
  font-weight: 700;
}

.leistung-huesler-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--se-huesler-green);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.leistung-huesler-link:hover { color: var(--se-huesler-green-light); }

.ueber-uns {
  background: #fff;
}

.ueber-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.ueber-photo {
  aspect-ratio: 5/4;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(74,55,40,0.16);
}

.ueber-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.stat-row {
  display: flex;
  gap: 40px;
  margin-top: 32px;
}

.stat-row .stat strong {
  display: block;
  font-family: 'Lora', Georgia, serif;
  font-size: 2rem;
  color: var(--se-walnut);
}

.stat-row .stat span {
  font-size: 0.85rem;
  color: rgba(43,38,34,0.6);
}

.quote-block {
  border-left: 3px solid var(--se-oak);
  padding-left: 20px;
  margin: 28px 0;
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--se-walnut);
  line-height: 1.5;
}

.quote-author {
  display: block;
  margin-top: 10px;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--se-oak);
}

.referenzen {
  background: var(--se-cream);
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: -20px 0 40px;
}

.filter-btn {
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--se-line);
  background: #fff;
  color: var(--se-walnut);
  font-size: 0.88rem;
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.filter-btn:hover { border-color: var(--se-oak); }

.filter-btn.active {
  background: var(--se-walnut);
  border-color: var(--se-walnut);
  color: #fff;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.gallery-grid .tile {
  border-radius: 10px;
  background: var(--se-oak-light);
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

.gallery-grid .tile.hidden {
  display: none;
}

.gallery-grid .cat-break {
  grid-column: 1 / -1;
  height: 0;
  margin: 0;
  padding: 0;
}

.gallery-grid .cat-break.hidden {
  display: none;
}

.gallery-grid .tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
  transition: transform 0.4s ease;
}

.gallery-grid .tile:hover img { transform: scale(1.05); }

.gallery-grid .tile.contain-fit img {
  object-fit: contain;
}

.gallery-grid .tile.contain-fit:hover img { transform: scale(1); }

/* Einzelnes Foto: mehr vom unteren Teil zeigen (Ablagefächer), oben darf
   dafür etwas mehr abgeschnitten werden. */
.gallery-grid .tile img[src*="schrank-04"] { object-position: 50% 82%; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(20,14,9,0.9);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lightbox.open {
  opacity: 1;
  visibility: visible;
}

.lightbox img {
  max-width: 92vw;
  max-height: 88vh;
  border-radius: 8px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  transform: scale(0.85);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(.2,.9,.3,1.2), opacity 0.3s ease;
}

.lightbox.open img {
  transform: scale(1);
  opacity: 1;
}

.lightbox-close {
  position: absolute;
  top: 24px;
  right: 28px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.lightbox-close:hover { background: rgba(255,255,255,0.25); }

.lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 1.8rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  z-index: 2;
}

.lightbox-arrow:hover { background: rgba(255,255,255,0.25); }

.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }

.lightbox-counter {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.75);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

@media (max-width: 640px) {
  .lightbox-arrow { width: 44px; height: 44px; font-size: 1.5rem; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
}

.lightbox-huesler-link {
  position: absolute;
  top: 26px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  background: rgba(20,14,9,0.55);
  padding: 8px 16px;
  border-radius: 999px;
  display: none;
}

.lightbox-huesler-link.visible { display: inline-block; }

.lightbox-huesler-link:hover { color: var(--se-oak-light); }

@media (max-width: 640px) {
  .lightbox-huesler-link { top: auto; bottom: 60px; font-size: 0.82rem; padding: 7px 14px; }
}

.kontakt {
  background: var(--se-walnut);
  color: #fff;
}

.kontakt .section-head h2 { color: #fff; }
.kontakt .section-head p { color: rgba(255,255,255,0.75); }
.kontakt .section-head .eyebrow { color: var(--se-oak-light); }

.kontakt-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
}

.kontakt-info dl {
  margin: 0;
}

.kontakt-info dt {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.5);
  margin-top: 22px;
}

.kontakt-info dd {
  margin: 6px 0 0;
  font-size: 1rem;
}

.kontakt-info dd a { text-decoration: underline; }

.map-block {
  aspect-ratio: 16/10;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(74,55,40,0.16);
}

.map-block iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

form.anfrage {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 14px;
  padding: 32px;
  display: grid;
  gap: 16px;
}

form.anfrage label {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 6px;
  color: rgba(255,255,255,0.8);
}

form.anfrage input,
form.anfrage textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
  color: #fff;
  font: inherit;
}

form.anfrage input::placeholder,
form.anfrage textarea::placeholder { color: rgba(255,255,255,0.4); }

form.anfrage input[type="file"] {
  padding: 9px 10px;
  color: rgba(255,255,255,0.85);
  font-size: 0.85rem;
}

form.anfrage input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 8px 14px;
  border-radius: 6px;
  border: none;
  background: var(--se-oak);
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

form.anfrage input[type="file"]::file-selector-button:hover {
  background: var(--se-oak-light);
  color: var(--se-walnut-dark);
}

form.anfrage button {
  justify-self: start;
  margin-top: 6px;
}

form.anfrage button.primary {
  color: #fff;
}

.anfrage-title {
  margin: 0 0 4px;
  font-family: 'Lora', Georgia, serif;
  font-weight: 500;
  font-size: 1.3rem;
  color: #fff;
}

.anfrage-privacy {
  margin: 4px 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.6);
}

.anfrage-privacy a { text-decoration: underline; }
.anfrage-privacy a:hover { color: var(--se-oak-light); }

.se-footer {
  background: var(--se-walnut-dark);
  color: rgba(255,255,255,0.65);
  text-align: center;
  padding: 26px 24px;
  font-size: 0.82rem;
}

.se-footer p { margin: 0; }
.se-footer p + p { margin-top: 8px; }
.se-footer a { text-decoration: underline; }

/* ============================================
   Rechtliche Seiten (Datenschutzerklärung u.ä.)
   ============================================ */

.legal-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  background: rgba(250,246,240,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--se-line);
}

.legal-nav .logo img { height: 48px; display: block; }

.legal-nav .legal-back-link {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--se-walnut);
}

.legal-nav .legal-back-link:hover { color: var(--se-oak); }

.legal-page { padding: 56px 0 80px; }

.legal-page .container { max-width: 820px; }

.legal-page h1 {
  font-family: 'Lora', Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  color: var(--se-walnut);
  margin: 0 0 26px;
}

.legal-page .legal-intro p {
  line-height: 1.7;
  color: rgba(43,38,34,0.78);
  margin: 0 0 16px;
}

.legal-page h2 {
  font-family: 'Lora', Georgia, serif;
  font-weight: 500;
  font-size: 1.35rem;
  color: var(--se-walnut);
  margin: 2.2em 0 0.7em;
  padding-top: 1.4em;
  border-top: 1px solid var(--se-line);
}

.legal-page section:first-of-type h2 { border-top: none; padding-top: 0; }

.legal-page h3 {
  font-family: 'Lora', Georgia, serif;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--se-walnut);
  margin: 1.6em 0 0.6em;
}

.legal-page p {
  line-height: 1.7;
  color: rgba(43,38,34,0.82);
  margin: 0 0 1em;
}

.legal-page address {
  font-style: normal;
  line-height: 1.7;
  color: rgba(43,38,34,0.82);
  margin: 0 0 1em;
}

.legal-page ul {
  list-style: disc;
  margin: 0 0 1.2em 1.3em;
  padding: 0;
}

.legal-page li {
  line-height: 1.7;
  color: rgba(43,38,34,0.82);
  margin-bottom: 0.7em;
}

.legal-page a {
  color: var(--se-oak);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-page a:hover { color: var(--se-walnut); }

.legal-page .legal-back-bottom {
  margin-top: 3em;
  padding-top: 1.6em;
  border-top: 1px solid var(--se-line);
}

@media (max-width: 960px) {
  .leistung-card { flex-basis: calc((100% - 28px) / 2); max-width: calc((100% - 28px) / 2); }
  .leistung-card-slot { flex-basis: calc((100% - 28px) / 2); max-width: calc((100% - 28px) / 2); }
  .ueber-split, .kontakt-grid { grid-template-columns: 1fr; gap: 36px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-photo { display: none; }
  .se-nav-links { display: none; }
  .se-burger { display: block; }
  .leistung-card-panel-inner { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .leistung-card { flex-basis: 100%; max-width: 100%; }
  .leistung-card-slot { flex-basis: 100%; max-width: 100%; }
  .leistung-banner { max-width: 320px; margin: -28px auto 0; left: 0; right: 0; transform: none; }
  .stat-row { gap: 26px; }
  .section { padding: 64px 20px; }
}

/* Kontaktformular: kurze Bestätigungs-Meldung nach dem Absenden, statt eines
   vollen Seiten-Reloads (der sich sonst wie ein unmotiviertes "Springen" der
   Seite anfühlt). Erscheint oben mittig, verschwindet automatisch wieder. */
.form-toast {
  position: fixed;
  top: 24px;
  left: 50%;
  z-index: 1100;
  max-width: min(90vw, 440px);
  transform: translate(-50%, -16px);
  background: var(--se-walnut);
  color: #fff;
  border-radius: 14px;
  padding: 18px 44px 18px 22px;
  box-shadow: 0 20px 45px rgba(20,14,9,0.28);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

.form-toast.visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.form-toast.is-error {
  background: #7a2f24;
}

.form-toast p {
  margin: 0;
  line-height: 1.55;
  font-size: 0.96rem;
}

.form-toast-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.75);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}

.form-toast-close:hover {
  color: #fff;
}

@media (max-width: 560px) {
  .form-toast {
    top: 14px;
    padding: 16px 40px 16px 18px;
  }
}

/* Bildtext im Foto (Referenzen): schwarz, unten im Bild, ohne Kasten.
   Leere Texte (Standard) werden nicht angezeigt. Text wird in index.html
   zwischen <span class="tile-caption"> und </span> eingetragen. */
.gallery-grid .tile .tile-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 14px 10px;
  color: #000;
  background: none;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.25;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.85), 0 0 2px rgba(255, 255, 255, 0.9);
  pointer-events: none;
  z-index: 2;
}

.gallery-grid .tile .tile-caption:empty {
  display: none;
}

/* Feste Kopfleiste: Sprungziele (Leistungen, Referenzen, Kontakt ...) werden
   nicht mehr von Logo/Menü überdeckt, und das aufgeklappte Handy-Menü bleibt
   immer direkt unter der Kopfleiste sichtbar, egal wie weit unten man ist. */
html {
  scroll-padding-top: calc(var(--nav-h, 110px) + 12px);
}

.se-mobile-panel {
  position: fixed;
  top: var(--nav-h, 110px);
  left: 0;
  right: 0;
  z-index: 99;
  max-height: calc(100vh - var(--nav-h, 110px));
  max-height: calc(100dvh - var(--nav-h, 110px));
  overflow-y: auto;
  box-shadow: 0 8px 18px rgba(43, 38, 34, 0.12);
}