/* ==========================================================================
   Theme-Design – Werkstatt/Manufaktur-Ästhetik
   Farb- und Typo-Tokens zentral hier definiert, damit der Nutzer
   spätere Anpassungen an EINER Stelle vornehmen kann.
   ========================================================================== */

:root{
  /* Farben */
  --farbe-hintergrund: #F2EFE9;   /* warmes Papier/Stein statt reinem Weiß */
  --farbe-flaeche:     #FFFFFF;   /* Kartenflächen */
  --farbe-tinte:       #22201B;   /* fast schwarz, leicht warm */
  --farbe-tinte-mild:  #5B5646;   /* gedämpfter Fließtext */
  --farbe-linie:       #DAD4C7;   /* Trennlinien/Rahmen */
  --farbe-akzent:      #B8862B;   /* Ocker – Holz/Handwerk */
  --farbe-akzent-dunkel:#8C6720;
  --farbe-akzent-2:    #5C7A64;   /* gedecktes Salbeigrün – zweite Warengruppe */

  /* Typografie */
  --schrift-display: Charter, "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
  --schrift-text: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --radius-karte: 2px; /* bewusst fast kantig – Werkstatt statt App */
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body{
  background-color: var(--farbe-hintergrund);
  color: var(--farbe-tinte);
  font-family: var(--schrift-text);
  font-size: 1.05rem;
}

h1, h2, h3, .schrift-display{
  font-family: var(--schrift-display);
  color: var(--farbe-tinte);
  font-weight: 600;
  letter-spacing: -0.01em;
}

a{ color: var(--farbe-akzent-dunkel); }
a:hover{ color: var(--farbe-tinte); }

.eyebrow{
  font-family: var(--schrift-text);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--farbe-akzent-dunkel);
}

.linie{ border-top: 1px solid var(--farbe-linie); }

/* ---------- Skip-Link (Barrierefreiheit) ---------- */
.skip-link{
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--farbe-tinte);
  color: #fff;
  padding: 0.6rem 1rem;
  z-index: 2000;
}
.skip-link:focus{ left: 0.5rem; top: 0.5rem; }

/* Sichtbarer Fokus überall */
a:focus-visible, button:focus-visible, .nav-link:focus-visible{
  outline: 3px solid var(--farbe-akzent);
  outline-offset: 2px;
}

/* ==========================================================================
   Header / Navigation
   ========================================================================== */
.site-header{
  background-color: var(--farbe-hintergrund);
  border-bottom: 1px solid var(--farbe-linie);
}
.site-header .navbar-brand{
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--farbe-tinte);
}
.site-header .nav-link{
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--farbe-tinte-mild);
  margin-left: 0.5rem;
}
.site-header .nav-link:hover,
.site-header .nav-link.active{
  color: var(--farbe-akzent-dunkel);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  background-color: var(--farbe-tinte);
  color: var(--farbe-hintergrund);
  overflow: hidden;
}
.hero .eyebrow{ color: var(--farbe-akzent); }
.hero h1{
  color: #fff;
  font-size: clamp(2.1rem, 4.2vw, 3.4rem);
  line-height: 1.08;
}
.hero p.lead{
  color: #D8D2C2;
  max-width: 32rem;
}
.hero-bild-wrapper{
  position: relative;
}
.hero-bild-wrapper img{
  width: 100%;
  height: auto;
  border: 1px solid rgba(242,239,233,0.15);
}
.btn-akzent{
  background-color: var(--farbe-akzent);
  border-color: var(--farbe-akzent);
  color: var(--farbe-tinte);
  font-weight: 700;
  border-radius: var(--radius-karte);
}
.btn-akzent:hover{
  background-color: #D6A03E;
  border-color: #D6A03E;
  color: var(--farbe-tinte);
}
.btn-outline-hell{
  color: var(--farbe-hintergrund);
  border-radius: var(--radius-karte);
  
  font-weight: 600;
}
.btn-outline-hell:hover{
  background-color: rgba(242,239,233,0.1);
  color: #fff;
}

/* ==========================================================================
   Kategorien – "Hänge-Etiketten" (Signature-Element)
   Jede Warengruppe wird als physisches Anhänge-Etikett dargestellt,
   wie man es von Handwerksprodukten kennt: Lasche mit Loch oben,
   Stempel-Rahmen, leicht gekippt beim Hover.
   ========================================================================== */
.kategorien-abschnitt{
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.etikett{
  --kippwinkel: -1.2deg;
  position: relative;
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-linie);
  padding: 2.5rem 1.5rem 2rem;
  text-align: center;
  text-decoration: none;
  display: block;
  height: 100%;
  transform: rotate(var(--kippwinkel));
  transition: transform 180ms ease, box-shadow 180ms ease;
  box-shadow: 0 1px 0 var(--farbe-linie);
}
.etikett:nth-child(2n){ --kippwinkel: 1deg; }
.etikett:nth-child(3n){ --kippwinkel: -0.4deg; }
.etikett:hover, .etikett:focus-visible{
  transform: rotate(0deg) translateY(-4px);
  box-shadow: 0 14px 24px -12px rgba(34,32,27,0.35);
}
/* Die Lasche mit "Loch" oben am Etikett */
.etikett::before{
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 16px;
  background: var(--farbe-linie);
  border-radius: 3px 3px 0 0;
}
.etikett::after{
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--farbe-hintergrund);
  border: 1px solid var(--farbe-tinte-mild);
}
.etikett .etikett-bild{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin-bottom: 1.2rem;
}
.etikett .eyebrow{ display:block; margin-bottom: 0.3rem; }
.etikett h3{ font-size: 1.15rem; margin-bottom: 0.4rem; }
.etikett p{ color: var(--farbe-tinte-mild); font-size: 0.92rem; margin-bottom: 0; }

/* ==========================================================================
   Produktgalerie
   ========================================================================== */
.galerie-abschnitt{
  background-color: var(--farbe-flaeche);
  padding-top: 5rem;
  padding-bottom: 5rem;
  border-top: 1px solid var(--farbe-linie);
  border-bottom: 1px solid var(--farbe-linie);
}
.produkt-karte{
  position: relative;
  overflow: hidden;
  border: 1px solid var(--farbe-linie);
}
.produkt-karte img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 260ms ease;
}
.produkt-karte:hover img{ transform: scale(1.04); }
.produkt-label{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: linear-gradient(0deg, rgba(34,32,27,0.85), rgba(34,32,27,0));
  color: #fff;
  padding: 1.6rem 0.9rem 0.7rem;
  font-size: 0.85rem;
  font-weight: 600;
}

/* ==========================================================================
   Über uns
   ========================================================================== */
.ueber-uns-abschnitt{
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.ueber-uns-abschnitt img{
  width: 100%;
  height: auto;
  border: 1px solid var(--farbe-linie);
}

/* ==========================================================================
   Kontakt-Streifen
   ========================================================================== */
.kontakt-abschnitt{
  background-color: var(--farbe-akzent-2);
  color: #fff;
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.kontakt-abschnitt h2{ color: #fff; }
.kontakt-abschnitt p{ color: #E7EFE9; }
.kontakt-abschnitt .btn-akzent{
  background-color: #fff;
  border-color: #fff;
  color: var(--farbe-akzent-2);
}
.kontakt-abschnitt .btn-akzent:hover{
  background-color: var(--farbe-hintergrund);
  border-color: var(--farbe-hintergrund);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  background-color: var(--farbe-tinte);
  color: #D8D2C2;
  padding-top: 1.5rem;
  padding-bottom: 1rem;
}
.site-footer h4{
  font-family: var(--schrift-display);
  color: #fff;
  font-size: 1.1rem;
}
.site-footer a{ color: #D8D2C2; text-decoration: none; }
.site-footer a:hover{ color: var(--farbe-akzent); }
.site-footer .footer-linie{
  border-top: 1px solid rgba(216,210,194,0.2);
  padding-top: 0.5rem;
  font-size: 0.85rem;
  color: #A7A18F;
}

/* ==========================================================================
   Kompatibilität mit dem Block-Editor (editierbare Startseite)
   Die Klassen oben (.hero, .etikett, .kontakt-abschnitt, ...) wirken
   unverändert, da Gutenberg sie einfach zusätzlich an seine eigenen
   Block-Wrapper anhängt. Hier nur Ergänzungen für Dinge, die es in der
   festen Code-Version nicht gab (z. B. der Button-Block).
   ========================================================================== */

/* Buttons, die über den Block-Editor eingefügt werden */
.wp-block-button.btn-akzent .wp-block-button__link{
  background-color: var(--farbe-akzent);
  border-color: var(--farbe-akzent);
  color: var(--farbe-tinte);
  font-weight: 700;
  border-radius: var(--radius-karte);
  width:250px;
  height: 80px;
}
.wp-block-button.btn-akzent .wp-block-button__link:hover{
  background-color: #D6A03E;
}
.wp-block-button.btn-outline-hell .wp-block-button__link{
  background: transparent;
  border: 1px solid rgba(242,239,233,0.5);
  color: var(--farbe-hintergrund);
  border-radius: var(--radius-karte);
  font-weight: 600;
  width:250px;
  height: 80px;
}
.wp-block-button.btn-outline-hell .wp-block-button__link:hover{
  background-color: rgba(242,239,233,0.1);
}

/* Produktgalerie als reines CSS-Grid, unabhängig von Bootstrap-Klassen,
   damit sie auch mit dem vom Editor erzeugten Markup funktioniert. */
.galerie-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem;
}
@media (min-width: 768px){
  .galerie-grid{ grid-template-columns: repeat(3, 1fr); }
}
.produkt-karte{ aspect-ratio: 1 / 1; }
.produkt-karte figure{ height: 100%; margin: 0; }

/* Kategorien-Etikett: Bild, Überschrift & Text sollen im Editor
   dieselbe Wirkung wie vorher als reiner Link-Block behalten. */
.etikett h3{ margin-top: 0; }
.etikett-bild{ margin: 0 0 1.2rem; }
.etikett-bild img{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--farbe-linie);
  display: block;
}

.hero h1.wp-block-heading{ color: #fff; }
.kontakt-abschnitt h2.wp-block-heading{ color: #fff; }
.kontakt-abschnitt h3.wp-block-heading{ color: #fff; }


/* Link "Alle ansehen" auf den Kategorie-Etiketten der Startseite */
.etikett-link{ margin-top: 0.9rem; margin-bottom: 0; }
.etikett-link a{
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--farbe-akzent-dunkel);
  text-decoration: none;
}
.etikett-link a:hover{ color: var(--farbe-tinte); }

/* ==========================================================================
   Produktgruppen-Seite (einzelne Kategorie, z. B. "Holzarbeiten")
   ========================================================================== */
.gruppe-kopf{
  background-color: var(--farbe-tinte);
  color: var(--farbe-hintergrund);
  padding-top: 4.5rem;
  padding-bottom: 3rem;
}
.gruppe-kopf .eyebrow{ color: var(--farbe-akzent); }
.gruppe-kopf h1.wp-block-heading{ color: #fff; margin-bottom: 0.6rem; }
.gruppe-kopf .lead{ color: #D8D2C2; max-width: 40rem; margin-bottom: 0; }

.gruppe-galerie-abschnitt{
  background-color: var(--farbe-flaeche);
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
.gruppe-galerie.wp-block-gallery{
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0.3rem;
}
@media (min-width: 782px){
  .gruppe-galerie.wp-block-gallery{
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
.gruppe-galerie .wp-block-image{
  margin: 0;
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.gruppe-galerie .wp-block-image a,
.gruppe-galerie .wp-block-image img{
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border: 1px solid var(--farbe-linie);
}

.gruppe-zurueck{
  padding-top: 1rem;
  padding-bottom: 3rem;
}
.gruppe-zurueck a{
  font-weight: 600;
  text-decoration: none;
}
.gruppe-zurueck a:hover{ color: var(--farbe-tinte); }

/* ==========================================================================
   Footer immer unten halten ("Sticky Footer")
   Ohne das kann der Footer bei kurzen Seiten (z. B. Impressum) mitten
   im Bildschirm hängen, statt am unteren Rand zu bleiben.
   ========================================================================== */
html{
  height: 100%;
}
body{
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
#hauptinhalt{
  flex: 1 0 auto;
}
.site-footer{
  flex-shrink: 0;
}

/* ==========================================================================
   404-Seite (Seite nicht gefunden)
   ========================================================================== */
.fehler-abschnitt{
  padding-top: 6rem;
  padding-bottom: 6rem;
}
.fehler-abschnitt h1{
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
}