/* =======================================================================
   STYLE.CSS – Basis-Design der Website-Vorlage
   Aufbau dieser Datei (von oben nach unten):
   1. Variablen (Farben, Abstände) – zentral änderbar
   2. Grund-Einstellungen (Reset, Body, Container)
   3. Bausteine: Buttons, Navbar, Hero, Sektionen, Karten, Kontakt, Footer
   4. Responsive: Anpassungen für größere Bildschirme (ganz unten)

   WICHTIG: Wir bauen "Mobile-First". Das heißt: Die normalen Regeln gelten
   fürs Smartphone. Weiter unten in den @media-Blöcken machen wir das Layout
   für Tablet/Desktop breiter.
   ======================================================================= */

/* ===== 1. VARIABLEN ===================================================
   :root ist die ganze Seite. Hier definierte Werte kann man überall mit
   var(--name) benutzen. Farbe ändern? Nur hier eine Zeile anpassen! */
/* ===== SCHRIFTART POPPINS – lokal eingebunden (kein Google-Aufruf) ===== */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/poppins-400.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/poppins-500.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/poppins-600.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/poppins-700.woff2") format("woff2");
}

:root {
  --farbe-hintergrund: #ffffff;   /* Weiß – Seitenhintergrund */
  --farbe-text: #14213d;          /* Dunkelblau – Haupttext & Überschriften */
  --farbe-akzent: #3a5a98;        /* Helleres Blau – Buttons, Links, Hover */
  --farbe-akzent-dunkel: #2c4677; /* Etwas dunkler – für Hover-Effekte */
  --farbe-hell: #f4f6fb;          /* Sehr helles Blau – Karten / Sektions-Hintergrund */
  --farbe-rand: #e2e8f3;          /* Zarte Linien / Ränder */

  --font-basis: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Grundschrift (im Admin änderbar) */

  --abstand: 1rem;                /* Basis-Abstand (16px) */
  --max-breite: 1280px;           /* Maximale Breite des Inhalts */
  --radius: 14px;                 /* Abrundung der Ecken */
  --schatten: 0 6px 20px rgba(20, 33, 61, 0.08); /* Dezenter Schatten */
}

/* ===== 2. GRUND-EINSTELLUNGEN ======================================== */

/* Kleiner "Reset": nimmt Standard-Abstände weg und rechnet Breiten fair
   (border-box = Padding wird in die Breite eingerechnet, keine Überraschungen). */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Sanftes Scrollen, wenn man auf einen Anker-Link klickt (#kontakt etc.) */
html {
  scroll-behavior: smooth;
  /* scroll-padding sorgt dafür, dass die fixe Navbar den Sektionstitel nicht verdeckt */
  scroll-padding-top: 80px;
}

body {
  /* Schriftart über Variable (lokale Poppins als Standard, im Admin änderbar) */
  font-family: var(--font-basis);
  color: var(--farbe-text);
  background-color: var(--farbe-hintergrund);
  line-height: 1.6;          /* angenehme Zeilenhöhe = gut lesbar */
  -webkit-font-smoothing: antialiased; /* schönere Schrift auf Mac/iPhone */
}

/* Bilder sollen nie breiter als ihr Container werden (wichtig fürs Handy) */
img {
  max-width: 100%;
  display: block;
}

/* Links: Standardfarbe und kein Unterstrich */
a {
  color: var(--farbe-akzent);
  text-decoration: none;
}

/* "container" zentriert den Inhalt und gibt ihm Seitenabstand.
   Diese Klasse benutzen wir in jeder Sektion. */
.container {
  width: 100%;
  max-width: var(--max-breite);
  margin: 0 auto;                  /* zentriert */
  padding-left: var(--abstand);
  padding-right: var(--abstand);
}

/* Überschriften erben die dunkelblaue Textfarbe und bekommen etwas Gewicht */
h1, h2, h3 {
  color: var(--farbe-text);
  line-height: 1.2;
  font-weight: 600;
}

/* ===== 3a. BUTTON ==================================================== */
.button {
  display: inline-block;
  background-color: var(--farbe-akzent);
  color: #ffffff;                  /* weiße Schrift auf blauem Button */
  padding: 0.8rem 1.6rem;
  border-radius: var(--radius);
  font-weight: 600;
  transition: background-color 0.2s ease, transform 0.2s ease; /* sanfter Übergang */
}
/* :hover = Maus drüber, :focus-visible = mit Tastatur angesteuert (Barrierefreiheit) */
.button:hover,
.button:focus-visible {
  background-color: var(--farbe-akzent-dunkel);
  transform: translateY(-2px);     /* hebt sich leicht an */
}

/* ===== 3b. NAVBAR =================================================== */
.navbar {
  position: sticky;                /* bleibt beim Scrollen oben kleben */
  top: 0;
  z-index: 100;                    /* liegt über allem anderen */
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(6px);      /* leichter Milchglas-Effekt beim Drüberscrollen */
  border-bottom: 1px solid var(--farbe-rand);
}

/* Innenbereich der Navbar: Logo links, Rest rechts */
.navbar__inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 64px;
}

.navbar__logo {
  color: var(--farbe-text);
  font-weight: 700;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  overflow: visible;         /* Logo darf über die Navbar hinausragen (transparenter Rand) */
  height: 56px;              /* mobil: fixe Höhe, Bild darf größer sein */
}
/* "Geöffnet"-Status sitzt direkt neben dem Logo und schiebt den Rest nach rechts */
#status-navbar {
  margin-left: 0.25rem;
  margin-right: auto;
}
/* Der zweite Teil des Namens in Akzentfarbe */
.navbar__logo span {
  color: var(--farbe-akzent);
}
/* Logo-Bild (transparentes PNG) – Höhe passt sich der Navbar an.
   Mobil kompakt, auf dem Desktop groß (siehe @media unten). */
.navbar__logo img {
  height: 110px;             /* mobil deutlich größer (überragt die Navbar) */
  width: auto;
  max-width: 58vw;           /* lässt rechts Platz für Status + Menü-Knopf */
  object-fit: contain;
  display: block;
}

/* Die Navigations-Links.
   Auf dem Handy ist das Menü ZUERST versteckt und klappt per Button auf. */
.navbar__nav {
  display: none;                   /* auf dem Smartphone zunächst ausgeblendet */
  position: absolute;
  top: 64px;                       /* direkt unter der Navbar */
  left: 0;
  right: 0;
  flex-direction: column;
  background-color: #ffffff;
  border-bottom: 1px solid var(--farbe-rand);
  padding: var(--abstand);
  gap: 0.5rem;
}
/* Diese Klasse fügt unser JavaScript hinzu, wenn man auf den Hamburger tippt */
.navbar__nav.ist-offen {
  display: flex;
}
.navbar__nav a {
  color: var(--farbe-text);
  font-weight: 500;
  padding: 0.5rem 0;
}
.navbar__nav a:hover,
.navbar__nav a:focus-visible {
  color: var(--farbe-akzent);
}

/* Hamburger-Button (die drei Striche) – nur auf dem Handy sichtbar */
.navbar__toggle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  background: none;
  border: none;
  cursor: pointer;
}
.navbar__toggle span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: var(--farbe-text);
  border-radius: 2px;
}

/* ===== 3c. HERO-SLIDER ============================================== */
/* Hero läuft über die VOLLE Seitenbreite (randlos / "Full-Bleed") */
.hero {
  padding: 0;
}

/* Die äußere Hülle des Sliders: volle Breite, schneidet Überstehendes ab */
.slider {
  position: relative;
  max-width: none;
  margin: 0;
  overflow: hidden;                /* Slides, die "rechts daneben" liegen, werden abgeschnitten */
}

/* Die Schiene: alle Slides liegen nebeneinander. Per transform wird sie verschoben. */
.slider__track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* sanftes Gleiten */
}

/* Eine einzelne Slide = volle Breite des Sliders */
.slide {
  position: relative;
  flex: 0 0 100%;                  /* nicht schrumpfen, nicht wachsen, 100% breit */
  min-height: 58vh;               /* Höhe der Slide */
  background-size: cover;          /* Hintergrund-Verlauf (Fallback) füllt die Fläche */
  background-position: center;
  display: flex;
  align-items: flex-end;           /* Text unten anordnen */
}

/* Das Foto liegt über dem Verlauf und füllt die ganze Slide */
.slide__bild {
  position: absolute;
  inset: 0;                        /* oben/rechts/unten/links = 0 */
  width: 100%;
  height: 100%;
  object-fit: cover;               /* Bild füllt aus, ohne verzerrt zu werden */
}

/* Dunkler Verlauf unten -> weißer Text bleibt gut lesbar */
.slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(20, 33, 61, 0.78) 0%,
      rgba(20, 33, 61, 0.20) 55%,
      rgba(20, 33, 61, 0) 100%);
}

/* Der Textkasten auf der Slide (liegt dank z-index über Bild & Verlauf) */
.slide__inhalt {
  position: relative;
  z-index: 1;
  color: #ffffff;
  padding: 2rem 1.5rem 3rem;
  max-width: 40rem;
}
.slide__inhalt h1,
.slide__inhalt h2 {
  color: #ffffff;
  font-size: 1.8rem;
  margin-bottom: 0.6rem;
}
/* Kleines Label über der Überschrift (z.B. "Neu eingetroffen") */
.slide__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  opacity: 0.9;
}
.slide__text {
  margin-bottom: 1.3rem;
  font-size: 1.05rem;
}

/* Pfeile links/rechts */
.slider__pfeil {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: var(--farbe-text);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}
.slider__pfeil:hover,
.slider__pfeil:focus-visible {
  background: #ffffff;
  transform: translateY(-50%) scale(1.08);
}
.slider__pfeil--zurueck { left: 12px; }
.slider__pfeil--vor { right: 12px; }

/* Punkte unten (Anzeige + Sprung zur jeweiligen Slide) */
.slider__punkte {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.slider__punkt {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.slider__punkt.ist-aktiv {
  background: #ffffff;
  transform: scale(1.3);          /* aktiver Punkt etwas größer */
}

/* ===== 3d. SEKTIONEN (allgemein) =================================== */
.section {
  padding: 3rem 0;
}
/* Variante mit hellblauem Hintergrund (für Dienstleistungen) */
.section--hell {
  background-color: var(--farbe-hell);
}
.section__titel {
  font-size: 1.6rem;
  text-align: center;
  margin-bottom: 0.5rem;
}
.section__intro {
  text-align: center;
  margin-bottom: 2rem;
  color: #4a5a7a;                  /* etwas helleres Blau-Grau */
}

/* ===== 3e. KARTEN-RASTER ============================================ */
/* CSS-Grid: ordnet die Karten automatisch an.
   auto-fit + minmax = so viele Spalten wie passen, mindestens 240px breit.
   Auf dem Handy ergibt das automatisch EINE Spalte. */
.karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}
.karte {
  background-color: #ffffff;
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  padding: 1.8rem;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* Karte hebt sich beim Drüberfahren leicht an */
.karte:hover {
  transform: translateY(-4px);
  box-shadow: var(--schatten);
}
/* Icon-Kreis: hellblauer Kreis mit SVG-Linien-Icon in Akzentfarbe */
.karte__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;             /* zentriert, Abstand nach unten */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--farbe-hell);
  color: var(--farbe-akzent);      /* Icon-Farbe (stroke="currentColor") */
  border-radius: 50%;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
/* Das SVG-Icon selbst */
.karte__icon .ikon {
  width: 30px;
  height: 30px;
}
/* Beim Überfahren der Karte den Icon-Kreis kurz hervorheben */
.karte:hover .karte__icon {
  transform: scale(1.08);
  background-color: #e7edf8;
}
.karte h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}
.karte p {
  color: #4a5a7a;
}

/* ===== 3f. KONTAKT ================================================== */
.kontakt {
  display: flex;
  flex-direction: column;          /* Handy: Infos oben, Karte darunter */
  gap: 2rem;
}
.kontakt__adresse {
  font-style: normal;              /* <address> wäre sonst kursiv */
  margin-bottom: 1.5rem;
  font-size: 1.05rem;
}
.kontakt h3 {
  margin-bottom: 0.8rem;
}
/* Tabelle der Öffnungszeiten */
.oeffnungszeiten {
  width: 100%;
  border-collapse: collapse;       /* keine doppelten Linien */
}
.oeffnungszeiten th,
.oeffnungszeiten td {
  text-align: left;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--farbe-rand);
}
.oeffnungszeiten th {
  font-weight: 600;
}
.oeffnungszeiten td {
  text-align: right;
}
.kontakt__karte iframe {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}

/* Hervorgehobener "NEU: per WhatsApp/Signal/Telegram"-Hinweis */
.messaging-hinweis {
  margin: 1.2rem 0;
  padding: 0.9rem 1.1rem;
  background: var(--farbe-hell);
  border-left: 4px solid var(--farbe-akzent);
  border-radius: 8px;
  font-size: 1.02rem;
}
.messaging-hinweis strong {
  color: var(--farbe-akzent);
}
.messaging-hinweis__zusatz {
  color: #4a5a7a;
  font-size: 0.9rem;
}

/* ===== 3g. FOOTER ================================================== */
.footer {
  background-color: var(--farbe-text); /* dunkelblauer Balken unten */
  color: #ffffff;
  padding: 2rem 0;
}
.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  text-align: center;
}
.footer__links {
  display: flex;
  gap: 1.5rem;
}
.footer a {
  color: #cdd7ec;                  /* helles Blau, gut lesbar auf dunkel */
}
.footer a:hover {
  color: #ffffff;
}

/* ===== 3h. NEUE BEREICHE & KOMPONENTEN (Runde 2) =================== */

/* --- Kleines Akzent-Label über Überschriften --- */
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--farbe-akzent);
  margin-bottom: 0.5rem;
}
.eyebrow--zentriert {
  text-align: center;
}

/* --- Handgezeichneter Schwung unter zentrierten Sektions-Titeln (Flair) --- */
.section__titel::after {
  content: "";
  display: block;
  width: 132px;
  height: 14px;
  margin: 0.5rem auto 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 14'%3E%3Cpath d='M4 9C36 3 96 3 128 8' fill='none' stroke='%232e9e5b' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

/* --- Live-Status "geöffnet/geschlossen" --- */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
}
/* Der farbige Punkt vor dem Text */
.status::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #9aa3b2;             /* neutral, bis JS den Status kennt */
  flex-shrink: 0;
}
.status--offen { color: #2e7d4f; }                 /* grün */
.status--offen::before { background: #2e9e5b; }
.status--zu { color: #b23a4b; }                    /* rot */
.status--zu::before { background: #d1495b; }
.status--gross {                                    /* Variante im Kontaktbereich */
  font-size: 1rem;
  margin-bottom: 0.8rem;
}

/* --- ÜBER UNS --- */
.ueber {
  display: flex;
  flex-direction: column;          /* mobil: Bild über Text */
  gap: 2rem;
}
.ueber__bild img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}
/* Platzhalter, falls noch kein Foto da ist */
.ueber__bild--leer {
  min-height: 240px;
  background: linear-gradient(135deg, var(--farbe-hell), #e3e9f5);
  border-radius: var(--radius);
}
.ueber__bild--leer img { display: none; }
.ueber__text h2 {
  font-size: 1.8rem;
  margin-bottom: 0.8rem;
}
.ueber__text p {
  color: #4a5a7a;
  margin-bottom: 1rem;
}

/* --- KUNDENSTIMMEN --- */
.stimmen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.stimme {
  background: #ffffff;
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  padding: 1.8rem;
}
.sterne {
  display: flex;
  gap: 2px;
  margin-bottom: 0.8rem;
}
.stern {
  width: 20px;
  height: 20px;
  fill: #f5b301;                   /* goldgelb */
}
.stimme blockquote {
  margin: 0 0 0.8rem;
  font-size: 1.05rem;
}
.stimme figcaption {
  color: var(--farbe-akzent);
  font-weight: 600;
  font-size: 0.9rem;
}

/* --- GALERIE --- */
.galerie {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* mobil: 2 Spalten */
  gap: 0.8rem;
}
.galerie__bild {
  padding: 0;
  border: none;
  background: var(--farbe-hell);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1 / 1;             /* quadratische Kacheln */
}
.galerie__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.galerie__bild:hover img {
  transform: scale(1.06);          /* sanftes Zoomen beim Überfahren */
}
.galerie__bild--leer {
  background: linear-gradient(135deg, var(--farbe-hell), #e3e9f5);
}
.galerie__bild--leer img { display: none; }

/* --- SCHWEBENDE SCHNELLKONTAKT-BUTTONS --- */
.schnellkontakt {
  position: fixed;
  /* "max(...)" hält Abstand zu Handy-Rändern (Notch/Gestenleiste) ein */
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fab {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(20, 33, 61, 0.25);
  transition: transform 0.2s ease;
}
.fab svg {
  width: 24px;
  height: 24px;
}
.fab:hover,
.fab:focus-visible {
  transform: scale(1.08);
}
.fab--anruf { background: var(--farbe-akzent); }
.fab--route { background: var(--farbe-text); }
.fab--whatsapp { background: #25d366; }            /* WhatsApp-Grün */

/* --- "NACH OBEN"-BUTTON (unten links) --- */
.nach-oben {
  position: fixed;
  left: 16px;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 200;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--farbe-text);
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Standardmäßig versteckt; JS blendet ein, sobald man scrollt */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}
.nach-oben svg {
  width: 22px;
  height: 22px;
}
.nach-oben.ist-sichtbar {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* --- LIGHTBOX (großes Galerie-Bild) --- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(20, 33, 61, 0.92);   /* dunkler Schleier */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
/* hidden-Attribut hat höhere Priorität -> Lightbox ist dann wirklich aus */
.lightbox[hidden] { display: none; }
.lightbox__bild {
  max-width: 92vw;
  max-height: 86vh;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.lightbox__schliessen {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

/* --- Gestaffeltes Einblenden in Karten-/Stimmen-/Galerie-Rastern (Flair) ---
   Elemente eines Rasters erscheinen leicht nacheinander -> edler "Kaskaden"-Effekt. */
.karten .reveal:nth-child(2),
.stimmen .reveal:nth-child(2),
.galerie .reveal:nth-child(2) { transition-delay: 0.08s; }
.karten .reveal:nth-child(3),
.stimmen .reveal:nth-child(3),
.galerie .reveal:nth-child(3) { transition-delay: 0.16s; }
.karten .reveal:nth-child(4),
.galerie .reveal:nth-child(4) { transition-delay: 0.24s; }
.galerie .reveal:nth-child(5) { transition-delay: 0.32s; }
.galerie .reveal:nth-child(6) { transition-delay: 0.40s; }

/* ===== 3i. EFFEKTE ================================================== */

/* Sanftes Einblenden beim Scrollen.
   Start: unsichtbar & leicht nach unten verschoben.
   Sobald das Element ins Bild kommt, fügt JavaScript die Klasse "sichtbar"
   hinzu -> es blendet weich ein und rutscht hoch. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.sichtbar {
  opacity: 1;
  transform: none;
}

/* Navbar wirft einen dezenten Schatten, sobald man nach unten scrollt
   (JavaScript schaltet die Klasse "navbar--gescrollt"). */
.navbar--gescrollt {
  box-shadow: 0 4px 20px rgba(20, 33, 61, 0.10);
}

/* Barrierefreiheit: Wer im System "Bewegung reduzieren" eingestellt hat,
   bekommt keine Animationen (verhindert Übelkeit/Ablenkung). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .slider__track { transition: none; }
  .button:hover, .karte:hover, .slider__pfeil:hover,
  .fab:hover, .galerie__bild:hover img, .karte:hover .karte__icon { transform: none; }
}

/* =======================================================================
   4. RESPONSIVE – Anpassungen für GRÖSSERE Bildschirme
   Alles oben war fürs Smartphone. Ab hier machen wir es breiter.
   ======================================================================= */

/* ----- Ab 768px (Tablets und aufwärts) ----- */
@media (min-width: 768px) {

  /* Navigation wird zur normalen waagerechten Leiste,
     der Hamburger-Button verschwindet. */
  .navbar__toggle {
    display: none;
  }
  .navbar__nav {
    display: flex;                 /* immer sichtbar */
    flex-direction: row;
    position: static;              /* nicht mehr ausklappbar */
    background: none;
    border: none;
    padding: 0;
    gap: 1.8rem;
  }

  /* Höhere Navbar + großes Logo auf dem Desktop */
  .navbar__inner { min-height: 108px; }
  /* Der Logo-Link behält die Navbar-Höhe; das Bild darf größer sein und
     oben/unten hinausragen (nur transparenter Rand) – so wird das Logo groß,
     ohne die Navbar mitwachsen zu lassen. */
  .navbar__logo {
    height: 108px;
    display: flex;
    align-items: center;
    overflow: visible;
  }
  .navbar__logo img { height: 184px; max-width: none; }
  /* Anker-Sprünge unter die höhere Navbar setzen */
  html { scroll-padding-top: 120px; }

  /* Slider: höher und größere Schrift auf Tablet/Desktop */
  .slide {
    min-height: 70vh;
  }
  .slide__inhalt {
    padding: 2.5rem 3rem 3.5rem;
  }
  .slide__inhalt h1,
  .slide__inhalt h2 {
    font-size: 2.8rem;             /* große Überschrift auf der Slide */
  }
  .slide__text {
    font-size: 1.2rem;
  }

  /* Kontakt: Infos und Karte nebeneinander */
  .kontakt {
    flex-direction: row;
  }
  .kontakt__info,
  .kontakt__karte {
    flex: 1;
  }

  /* Footer: Text links, Links rechts */
  .footer__inner {
    flex-direction: row;
    justify-content: space-between;
  }

  /* Über uns: Bild und Text nebeneinander; Bild bewusst schmal */
  .ueber {
    flex-direction: row;
    align-items: center;
  }
  .ueber__bild {
    flex: 0 0 320px;
    max-width: 320px;
  }
  .ueber__text {
    flex: 1;
  }
  /* Zweiter Block: Bild rechts, Text links */
  .ueber--rechts {
    flex-direction: row-reverse;
  }

  /* Galerie: 3 Spalten auf größeren Schirmen */
  .galerie {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Auf dem Handy zeigt der Navbar-Status Punkt + Text ("Geöffnet"/"Geschlossen"),
   etwas kleiner, damit es neben dem größeren Logo Platz hat. */
@media (max-width: 767px) {
  #status-navbar {
    font-size: 0.72rem;
    margin-left: 0.15rem;
  }
}

/* ----- Ab 1024px (Desktop) – etwas mehr Luft ----- */
@media (min-width: 1024px) {
  .section {
    padding: 4.5rem 0;
  }
  .hero {
    padding: 0;
  }
  .section__titel {
    font-size: 2rem;
  }
}

/* =======================================================================
   5. PRODUKTKATALOG – Mega-Menü + Produkt-Kacheln
   ======================================================================= */

/* Der "Sortiment"-Button in der Navbar */
.navbar__mega-btn {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-weight: 500;
  color: var(--farbe-text);
  padding: 0.5rem 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.navbar__mega-btn:hover,
.navbar__mega-btn:focus-visible { color: var(--farbe-akzent); }
.navbar__mega-btn .pfeil { font-size: 0.8em; }

/* Das Mega-Menü-Panel (Standard: versteckt) */
.mega {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #ffffff;
  border-bottom: 1px solid var(--farbe-rand);
  box-shadow: var(--schatten);
  z-index: 90;
}
.mega.ist-offen { display: block; }
.mega__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  padding: 1.6rem var(--abstand);
}
.mega__titel {
  font-size: 0.95rem;
  margin: 0 0 0.6rem;
  color: var(--farbe-text);
}
.mega ul { list-style: none; margin: 0; padding: 0; }
.mega li { margin-bottom: 0.35rem; }
.mega a { color: #4a5a7a; font-size: 0.9rem; }
.mega a:hover { color: var(--farbe-akzent); }

/* Auf großen Schirmen öffnet das Mega-Menü auch per Hover / Tastatur-Fokus */
@media (min-width: 768px) {
  /* Navigation + Sortiment-Button füllen die volle Navbar-Höhe aus.
     Dadurch bleibt beim Weg von Button zum Panel KEINE tote Lücke,
     über der die Maus den Hover verliert (Menü würde sonst zufrüh zuklappen). */
  .navbar__nav { align-self: stretch; align-items: center; }
  .hat-mega { align-self: stretch; display: flex; align-items: center; }

  .hat-mega:hover > .mega,
  .hat-mega:focus-within > .mega { display: block; }
}

/* Auf dem Handy sitzt das Mega-Menü im Klappmenü und stapelt untereinander */
@media (max-width: 767px) {
  .mega {
    position: static;
    box-shadow: none;
    border: none;
  }
  .mega__inner {
    grid-template-columns: 1fr;
    gap: 0.9rem;
    padding: 0.4rem 0 0.4rem 0.6rem;
  }
}

/* Produkt-Raster auf der Kategorie-Seite */
.produkte {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
}
.produkt {
  background: #ffffff;
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.produkt__bild {
  aspect-ratio: 1 / 1;
  background: var(--farbe-hell);
}
.produkt__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.produkt__bild--leer {
  background: linear-gradient(135deg, var(--farbe-hell), #e3e9f5);
}
.produkt__bild--leer img { display: none; }
.produkt__name {
  font-size: 1.05rem;
  margin: 0.9rem 1rem 0.3rem;
}
.produkt__text {
  margin: 0 1rem 1rem;
  color: #4a5a7a;
  font-size: 0.9rem;
}

/* Hinweis, wenn eine Kategorie noch keine Produkte hat */
.hinweis-leer {
  background: var(--farbe-hell);
  border-left: 4px solid var(--farbe-akzent);
  border-radius: 8px;
  padding: 1.3rem 1.4rem;
  color: #4a5a7a;
}

/* ----- Neuheiten: horizontaler Produkt-Slider ----- */
.produkt-slider {
  position: relative;
  margin-top: 1.5rem;
}
/* Die "Spur" scrollt waagerecht; auf dem Handy einfach wischen */
.produkt-slider__spur {
  display: flex;
  gap: 1rem;
  /* Wenig Elemente -> mittig; viele -> normal scrollen (safe verhindert Abschneiden) */
  justify-content: safe center;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.8rem;
  -webkit-overflow-scrolling: touch;
}
.produkt-slider__spur::-webkit-scrollbar { height: 8px; }
.produkt-slider__spur::-webkit-scrollbar-thumb {
  background: var(--farbe-rand);
  border-radius: 4px;
}
.neuheit {
  flex: 0 0 auto;
  width: 230px;
  scroll-snap-align: start;
}
/* Produktbild "freigestellt" auf Weiß (ganzes Produkt sichtbar, kein Beschnitt) */
.neuheit__bild {
  aspect-ratio: 1 / 1;
  background: #ffffff;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.neuheit__bild img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  padding: 0.8rem;
  box-sizing: border-box;
}
.neuheit__bild--leer { background: linear-gradient(135deg, var(--farbe-hell), #e3e9f5); }
.neuheit__bild--leer img { display: none; }
.neuheit__name {
  font-size: 0.95rem;
  margin: 0.9rem 0.3rem 0;
  text-align: center;
  color: var(--farbe-text);
  /* höchstens 2 Zeilen, danach "…" */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Linksbündige Überschrift für den Neuheiten-Slider (wie in der Vorlage) */
.slider-titel {
  font-size: 1.7rem;
  margin: 0 0 1.2rem;
}
/* Pfeile links/rechts */
.pslider__pfeil {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: var(--schatten);
  color: var(--farbe-text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pslider__pfeil:hover { color: var(--farbe-akzent); }
.pslider__pfeil--zurueck { left: -10px; }
.pslider__pfeil--vor { right: -10px; }
/* Auf schmalen Schirmen keine Pfeile – einfach wischen */
@media (max-width: 600px) {
  .pslider__pfeil { display: none; }
}

/* =======================================================================
   6. SCHULBEDARF-SEITE – Service-Karten + Anfrage-Formular
   ======================================================================= */
.service-karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.2rem;
  margin: 1.5rem 0 1rem;
}
.service-karte {
  background: var(--farbe-hell);
  border-radius: var(--radius);
  padding: 1.3rem 1.4rem;
}
.service-karte h2 { font-size: 1.15rem; margin: 0 0 0.4rem; }
.service-karte p { margin: 0; color: #4a5a7a; }

.anfrage-form {
  margin-top: 1rem;
  max-width: 620px;
}
.anfrage-form label {
  display: block;
  margin-bottom: 1rem;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--farbe-text);
}
.anfrage-form input[type="text"],
.anfrage-form input[type="email"],
.anfrage-form input[type="tel"],
.anfrage-form input[type="file"],
.anfrage-form textarea {
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--farbe-rand);
  border-radius: 8px;
  font: inherit;
  color: var(--farbe-text);
  background: #ffffff;
}
.anfrage-form textarea { resize: vertical; }
.anfrage-form input:focus,
.anfrage-form textarea:focus {
  outline: 2px solid var(--farbe-akzent);
  outline-offset: 1px;
  border-color: var(--farbe-akzent);
}
.form-zwei { display: flex; gap: 1rem; }
.form-zwei > label { flex: 1; }
.form-hinweis { font-size: 0.85rem; color: #7a8296; margin-top: 0.5rem; }
.form-fehler {
  background: #fbe7ea;
  color: #b23a4b;
  border: 1px solid #e6c2c8;
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
  margin-bottom: 1rem;
}
.banner-erfolg {
  background: #e4f5ea;
  color: #2e7d4f;
  border: 1px solid #bfe6cd;
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
  font-weight: 500;
}
/* Spam-Falle unsichtbar */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
@media (max-width: 560px) {
  .form-zwei { flex-direction: column; gap: 0; }
}

/* Navigation etwas kompakter, da jetzt mehr Punkte (Sortiment + Schule + Schulbedarf) */
@media (min-width: 768px) {
  .navbar__nav { gap: 1.1rem; }
}

/* =======================================================================
   7. Verfügbarkeit, Suche & Kontaktformular
   ======================================================================= */

/* Verfügbarkeits-Badge auf Produkt-Kacheln */
.produkt__bild { position: relative; }
.verf-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  color: #ffffff;
}
.verf-badge--ja { background: #2e9e5b; }      /* grün = verfügbar */
.verf-badge--nein { background: #8a94a6; }    /* grau = nicht verfügbar */
.produkt--weg .produkt__bild img { opacity: 0.5; filter: grayscale(1); }
.produkt--weg .produkt__name { color: #8a94a6; }

/* Suchleiste in der Navigation */
.nav-suche { display: flex; align-items: center; position: relative; }

/* Live-Trefferliste unter dem Suchfeld (erscheint beim Tippen) */
.such-treffer {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 6px;
  background: #ffffff;
  border: 1px solid var(--farbe-rand);
  border-radius: 10px;
  box-shadow: var(--schatten);
  list-style: none;
  padding: 0.3rem;
  z-index: 120;
  max-height: 60vh;
  overflow-y: auto;
}
.such-treffer[hidden] { display: none; }
.such-treffer a {
  display: block;
  padding: 0.45rem 0.6rem;
  border-radius: 7px;
  color: var(--farbe-text);
  font-size: 0.9rem;
}
.such-treffer a:hover,
.such-treffer a:focus { background: var(--farbe-hell); color: var(--farbe-akzent); }
.nav-suche input {
  border: 1px solid var(--farbe-rand);
  border-radius: 999px 0 0 999px;
  padding: 0.4rem 0.8rem;
  font: inherit;
  font-size: 0.9rem;
  min-width: 8rem;
  max-width: 12rem;
  color: var(--farbe-text);
}
.nav-suche input:focus { outline: 2px solid var(--farbe-akzent); outline-offset: -1px; }
.nav-suche button {
  border: 1px solid var(--farbe-akzent);
  border-left: none;
  border-radius: 0 999px 999px 0;
  background: var(--farbe-akzent);
  color: #ffffff;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  display: flex;
  align-items: center;
}
/* Auf dem Handy (im Klappmenü) volle Breite */
@media (max-width: 767px) {
  .nav-suche { width: 100%; }
  .nav-suche input { flex: 1; max-width: none; }
}

/* Suchseite */
.such-seite {
  display: flex;
  gap: 0.6rem;
  margin: 1rem 0 2rem;
  max-width: 520px;
}
.such-seite input {
  flex: 1;
  border: 1px solid var(--farbe-rand);
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
  font: inherit;
  color: var(--farbe-text);
}
.such-seite input:focus { outline: 2px solid var(--farbe-akzent); border-color: var(--farbe-akzent); }

/* Kontaktformular im Kontaktbereich der Startseite */
.kontakt-form { margin-top: 2.5rem; max-width: 620px; }
.kontakt-form h3 { font-size: 1.3rem; margin-bottom: 1rem; }

/* =======================================================================
   10. DSGVO-CONSENT: Banner + Platzhalter für externe Inhalte
   ======================================================================= */
/* Banner unten (nicht blockierend – es lädt ohnehin nichts ohne Zustimmung) */
.cookie-banner {
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 400;
  max-width: 540px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(20, 33, 61, 0.22);
  padding: 1.1rem 1.2rem;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner p { font-size: 0.9rem; margin: 0 0 0.9rem; color: #4a5a7a; }
.cookie-banner__btns { display: flex; gap: 0.6rem; }
/* Beide Buttons gleich groß/gleichwertig (kein Dark-Pattern) */
.cookie-banner__btns .button { flex: 1; text-align: center; padding: 0.6rem 1rem; }
.button--ghost {
  background: #ffffff;
  color: var(--farbe-akzent);
  border: 1px solid var(--farbe-rand);
}
.button--ghost:hover,
.button--ghost:focus-visible { background: var(--farbe-hell); }

/* Platzhalter, solange ein externer Inhalt (Karte/Widget) noch nicht geladen ist */
.karte-consent,
.bewertungen-widget[data-consent-embed] { position: relative; min-height: 220px; }
.karte-consent iframe {
  width: 100%;
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  display: block;
}
.karte-consent__overlay,
.embed-consent__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  text-align: center;
  padding: 1.4rem;
  background: var(--farbe-hell);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
}
.karte-consent__overlay p,
.embed-consent__overlay p { margin: 0; font-size: 0.9rem; color: #4a5a7a; max-width: 34rem; }
.consent-klein { font-size: 0.8rem; }

@media (max-width: 480px) {
  .cookie-banner__btns { flex-direction: column; }
}

/* =======================================================================
   8. MARKEN (runde Logos) + GALERIE-SLIDER
   ======================================================================= */
.marken-section { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.marken {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem 2rem;
  margin-top: 1.2rem;
}
.marke { width: 120px; }
/* Der weiße runde Kreis, in dem das Logo sitzt */
.marke__kreis {
  width: 100px;
  height: 100px;
  margin: 0 auto 0.5rem;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid var(--farbe-rand);
  box-shadow: var(--schatten);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.marke:hover .marke__kreis { transform: translateY(-4px) scale(1.05); }
.marke__kreis img { max-width: 72%; max-height: 72%; object-fit: contain; }
.marke__kreis--leer { background: linear-gradient(135deg, var(--farbe-hell), #e3e9f5); }
.marke__kreis--leer img { display: none; }
.marke__name { text-align: center; font-size: 0.85rem; color: #4a5a7a; margin: 0; }

/* Auf dem Handy: Marken nebeneinander in einer Reihe zum Wischen (nicht gestapelt) */
@media (max-width: 767px) {
  .marken {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    gap: 1.2rem;
    padding-bottom: 0.6rem;
  }
  .marke { flex: 0 0 auto; scroll-snap-align: start; }
}

/* =======================================================================
   9. ÜBERSCHRIFTEN "BOUNCEN" beim Reinscrollen (Startseite)
   JavaScript zerlegt die Überschrift in einzelne Buchstaben; sobald sie
   ins Bild kommt, hüpft jeder Buchstabe versetzt herein.
   "Bewegung reduzieren" = aus (dann normales Einblenden).
   ======================================================================= */
.hat-bounce {
  /* Diese Überschrift steuert sich selbst -> normales Reveal aushebeln */
  opacity: 1 !important;
  transform: none !important;
}
/* Der grüne Schwung erscheint erst, wenn die Buchstaben da sind */
.hat-bounce::after { opacity: 0; }
.hat-bounce.los::after { opacity: 1; transition: opacity 0.4s ease 0.3s; }

.hat-bounce .bb {
  display: inline-block;
  opacity: 0;
  transform: translateY(-0.55em);
}
.hat-bounce.los .bb {
  animation: buchstabe-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes buchstabe-bounce {
  0%   { opacity: 0; transform: translateY(-0.6em); }
  55%  { opacity: 1; transform: translateY(0.14em); }
  75%  { transform: translateY(-0.05em); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Galerie als horizontaler Slider (nutzt .produkt-slider aus Abschnitt 5) */
.galerie-slider .galerie__bild {
  flex: 0 0 auto;
  width: 340px;
  max-width: 82vw;
  aspect-ratio: 3 / 2;      /* querformatige Kacheln wie in der Vorlage */
  scroll-snap-align: start;
  border-radius: var(--radius);
}

/* ===== NEWSLETTER-ANMELDUNG (Footer) ================================= */
.newsletter {
  padding: 1.6rem 1rem 0.4rem;
  text-align: center;
}
.newsletter strong { display: block; margin-bottom: 0.7rem; font-size: 1.05rem; }
.newsletter__form {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.newsletter__form input[type="email"] {
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--farbe-rand);
  border-radius: 10px;
  font: inherit;
  min-width: min(320px, 80vw);
}
.newsletter__hinweis { font-size: 0.75rem; opacity: 0.75; margin-top: 0.6rem; }
.newsletter__ok { color: #2e9e5b; font-weight: 600; }
.newsletter__fehler { color: #b23a4b; margin-top: 0.4rem; }
/* Honeypot: für Menschen unsichtbar, Bots füllen es trotzdem aus */
.hp-feld { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }