/* WECKTECH Gestaltung "Werkstatt" – warm und handwerklich (Zusatz zu shop.css, Koerperklasse .stil-werkstatt).
   Sand- und Papiertoene statt Kuehlweiss, Kacheln im Bento-Raster, runde Knoepfe, Petrol bleibt Markenfarbe,
   Holz-Akzent fuer Markierungen. Gleiche Bausteine wie der Grundstil, nur andere Gestaltung. */

/* Farben aus dem gemeinsamen Schema /static/konfigurator/css/farben.css (Inhaber 2026-10-10: ein neues Schema aendert nur
   diese Datei) – hier stehen nur noch die Zuordnungen. Kopf und Menue sind in allen Gestaltungen dunkel (shop.css). */
.stil-werkstatt {
  --bg: var(--wt-grund); --bg-2: var(--wt-grund-2); --papier: var(--wt-karte); --sand: var(--wt-sand);
  --ink: var(--wt-text); --ink-2: var(--wt-text-2); --muted: var(--wt-text-3); --line: var(--wt-linie);
  --holz: var(--wt-holz); --holz-l: var(--wt-holz-l);
  --petrol-l: var(--wt-akzent-l); --petrol-xl: var(--wt-akzent-xl);
  --r: 26px;
  --schatten: var(--wt-schatten-l);
  --schatten-s: var(--wt-schatten-s);
  background: var(--bg);
}

/* Knoepfe: Pillenform, klare Flaechen */
.stil-werkstatt .btn { border-radius: 999px; padding: 13px 26px; box-shadow: none; }
.stil-werkstatt .btn:hover { transform: none; background: var(--petrol-d); }
.stil-werkstatt .btn-hell { background: var(--papier); border-color: var(--line); color: var(--ink); }
.stil-werkstatt .btn-hell:hover { background: var(--sand); color: var(--ink); border-color: var(--sand); }
.stil-werkstatt .ueber { color: var(--holz); }

/* Titelbereich: zwei Kacheln (Text, Bild), Fakten als kleine Kacheln */
.stil-werkstatt .hero { background: var(--bg); border-bottom: 0; }
.stil-werkstatt .hero-innen { padding-top: 28px; padding-bottom: 40px; gap: 20px; align-items: stretch; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.stil-werkstatt .hero-text {
  background: var(--papier); border-radius: 32px; padding: 52px 48px 40px; display: flex; flex-direction: column; justify-content: center;
  border: 1px solid var(--line);
}
.stil-werkstatt .kicker { background: var(--holz-l); border-color: transparent; color: var(--holz); }
.stil-werkstatt .kicker i { background: var(--holz); box-shadow: 0 0 0 4px rgba(168,102,42,.18); }
.stil-werkstatt h1 { font-size: clamp(36px, 4.6vw, 58px); }
.stil-werkstatt h1 span { display: inline; color: var(--petrol); }
.stil-werkstatt .hero-fakten { border-top: 0; padding-top: 0; margin-top: 34px; gap: 10px; }
.stil-werkstatt .hero-fakten li { background: var(--bg); border-radius: 18px; padding: 14px 14px 13px; }
.stil-werkstatt .hero-bild { display: flex; }
.stil-werkstatt .hero-bild > picture { flex: 1; display: flex; }
.stil-werkstatt .hero-bild > picture img { aspect-ratio: auto; height: 100%; min-height: 480px; border-radius: 32px; box-shadow: none; }
.stil-werkstatt .hero-karte { left: auto; right: 18px; bottom: 18px; border-radius: 22px; border-color: transparent; }
.stil-werkstatt .hero-hinweis { left: 18px; right: auto; top: 18px; background: rgba(255,253,249,.92); }

/* Bloecke: Ueberschriften links, ruhige Flaechen */
.stil-werkstatt .block { padding-top: 84px; padding-bottom: 84px; }
.stil-werkstatt .kopf { text-align: left; margin-left: 0; max-width: 760px; }
.stil-werkstatt .flaeche { background: var(--sand); border: 0; }

/* Bereiche als Bento: grosse Kachel links, zwei breite Kacheln rechts */
.stil-werkstatt .bereiche { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-auto-rows: 1fr; gap: 20px; }
.stil-werkstatt .bereich { background: var(--papier); border-color: var(--line); box-shadow: none; }
.stil-werkstatt .bereich:hover { transform: translateY(-3px); box-shadow: var(--schatten-s); border-color: var(--sand); }
.stil-werkstatt .bereich:first-child { grid-row: span 2; }
/* 2026-10-25 (8. Kachel Warmluft-Ausströmer): bei gerader Zahl stünde die letzte allein – sie geht über beide Spalten */
@media (min-width: 901px) { .stil-werkstatt .bereich:last-child:nth-child(even):not(:first-child) { grid-column: 1 / -1; } }
.stil-werkstatt .bereich:first-child .bereich-bild { aspect-ratio: auto; flex: 1; min-height: 280px; }
.stil-werkstatt .bereich:not(:first-child) { flex-direction: row; }
.stil-werkstatt .bereich:not(:first-child) .bereich-bild { flex: 0 0 44%; aspect-ratio: auto; }
.stil-werkstatt .bereich-titel { font-size: 22px; }
.stil-werkstatt .marker { background: var(--papier); }
.stil-werkstatt .marker-petrol { background: var(--holz); color: #fff; }

/* Produkte */
.stil-werkstatt .produkt { background: var(--papier); border-color: var(--line); box-shadow: none; }
.stil-werkstatt .produkt-bild { margin: 10px 10px 0; border-radius: 20px; }
.stil-werkstatt .haken li::before, .stil-werkstatt .haken .li-ersatz::before { background-color: var(--holz-l);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8662a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E"); }
.stil-werkstatt .produkt-mehr { background: linear-gradient(160deg, #3a3129 0%, #26221d 100%); }
.stil-werkstatt .produkt-mehr .haken .li-ersatz::before { background-color: rgba(255,255,255,.14);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E"); }
.stil-werkstatt .produkt-mehr .ueber { color: #e9c9a6; }

/* Vertrauen und Ueber uns */
.stil-werkstatt .vertrauen { background: var(--bg); border: 0; }
.stil-werkstatt .vertrauen ul { padding-top: 0; padding-bottom: 56px; }
.stil-werkstatt .vertrauen li { background: var(--papier); border: 1px solid var(--line); border-radius: 22px; padding: 18px; }
.stil-werkstatt .vertrauen .ico { background: var(--holz-l); color: var(--holz); }
.stil-werkstatt .ueber-karte { background: var(--papier); border-color: var(--line); border-radius: 32px; }
.stil-werkstatt .ueber-karte dl div { border-top-color: var(--line); }

/* Fuss in dunklem Holzton */
.stil-werkstatt .fuss { background: var(--wt-fuss); color: var(--wt-fuss-text); }
.stil-werkstatt .fuss a { color: var(--wt-fuss-link); }

@media (max-width: 900px) {
  .stil-werkstatt .hero-innen { grid-template-columns: minmax(0, 1fr); padding-top: 16px; gap: 12px; }
  .stil-werkstatt .hero-text { padding: 32px 22px 24px; border-radius: 26px; }
  .stil-werkstatt .hero-bild > picture img { min-height: 0; aspect-ratio: 4 / 5; border-radius: 26px; }
  .stil-werkstatt .hero-karte { right: 12px; bottom: 12px; left: auto; }
  .stil-werkstatt .bereiche { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .stil-werkstatt .bereich:first-child { grid-row: auto; }
  .stil-werkstatt .bereich:first-child .bereich-bild { min-height: 0; aspect-ratio: 16 / 10; flex: none; }
  .stil-werkstatt .block { padding-top: 64px; padding-bottom: 64px; }
}
@media (max-width: 640px) {
  .stil-werkstatt .hero-fakten li { padding: 12px 14px; }
  .stil-werkstatt .bereich:not(:first-child) { flex-direction: column; }
  .stil-werkstatt .bereich:not(:first-child) .bereich-bild { flex: none; aspect-ratio: 16 / 10; }
  .stil-werkstatt .vertrauen ul { padding-bottom: 44px; gap: 10px; }
}

/* ---------- Kraeftigere Farben (Nutzerwunsch 2026-10-06) ---------- */
.stil-werkstatt { --amber: var(--wt-amber); }
.stil-werkstatt .hero-text { background: linear-gradient(150deg, var(--petrol) 0%, var(--wt-akzent-dd) 100%); border: 0; color: #fff; }
.stil-werkstatt .hero-text h1 { color: #fff; }
.stil-werkstatt .hero-text h1 span { color: var(--amber); }
.stil-werkstatt .hero-text .lead { color: rgba(255,255,255,.88); }
.stil-werkstatt .hero-text .kicker { background: rgba(255,255,255,.14); color: #fff; }
.stil-werkstatt .hero-text .kicker i { background: var(--amber); box-shadow: 0 0 0 4px rgba(255,196,107,.28); }
.stil-werkstatt .hero-text .btn { background: var(--holz); }
.stil-werkstatt .hero-text .btn:hover { background: var(--wt-holz-d); }
.stil-werkstatt .hero-text .btn-hell { background: #fff; color: var(--ink); border-color: #fff; }
.stil-werkstatt .hero-text .btn-hell:hover { background: var(--holz-l); border-color: var(--holz-l); }
/* Google-Abzeichen im dunklen Titelbereich (2026-10-12): Hinweis-Link hell */
.stil-werkstatt .hero-text a.bw-hinweis-link { color: rgba(255,255,255,.82); }
.stil-werkstatt .hero-text a.bw-hinweis-link:hover { color: #fff; }
.stil-werkstatt .hero-text :focus-visible { outline-color: #fff; }
/* Ganz feines Wabenmuster im Hintergrund der Start-Kachel (Inhaber 2026-10-11: „ganz leichte Hexagon mit in den Hintergrund“),
   kräftigste Stelle oben rechts, läuft zur Mitte hin aus – hinter Text und Knöpfen */
.stil-werkstatt .hero-text { position: relative; isolation: isolate; overflow: hidden; }
.stil-werkstatt .hero-text::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .11;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23ffffff' stroke-width='1.3'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34' fill='none' stroke='%23ffffff' stroke-width='1.3'/%3E%3C/svg%3E") 0 0 / 42px 75px repeat;
  -webkit-mask-image: radial-gradient(130% 95% at 100% 0%, #000 0%, rgba(0,0,0,.35) 45%, transparent 78%);
          mask-image: radial-gradient(130% 95% at 100% 0%, #000 0%, rgba(0,0,0,.35) 45%, transparent 78%);
}
.stil-werkstatt .hero-fakten li { background: rgba(255,255,255,.1); }
.stil-werkstatt .hero-fakten b { color: #fff; }
.stil-werkstatt .hero-fakten span { color: rgba(255,255,255,.75); }
/* nur die vollen Knöpfe – .btn-hell und .btn-rand behalten ihr helles Aussehen von oben (2026-10-12: vorher überschrieb diese Regel
   sie mit Petrol, dunkle Schrift auf dunklem Grund – z. B. „Zum Shop“, „Details“, „Bewertung schreiben“) */
.stil-werkstatt .btn:where(:not(.btn-hell, .btn-rand)) { background: var(--petrol); }   /* :where – Gewicht wie bisher, :hover von oben gilt weiter */
.stil-werkstatt .produkt-mehr { background: linear-gradient(155deg, var(--holz) 0%, var(--wt-holz-dd) 100%); }
.stil-werkstatt .produkt-mehr .ueber { color: #ffe1bf; }
.stil-werkstatt .vertrauen .ico { background: var(--holz); color: #fff; }
@media (max-width: 1080px) and (min-width: 641px) {
  .stil-werkstatt .hero-fakten { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .stil-werkstatt .hero-fakten li { display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; }
  .stil-werkstatt .hero-fakten b { flex: 0 0 118px; }
  .stil-werkstatt .hero-fakten span { margin-top: 0; }
}

/* Textseiten als Papierkarte */
.stil-werkstatt .rechtstext { background: var(--papier); border: 1px solid var(--line); border-radius: 32px; padding: 44px 48px; max-width: 860px; }
.stil-werkstatt .inhalt-liste { background: var(--bg); }
.stil-werkstatt .kontakt-weg { background: var(--bg); border-color: transparent; }
.stil-werkstatt .kontakt-weg:hover { border-color: var(--holz); }
.stil-werkstatt .kontakt-weg b { color: var(--holz); }
@media (max-width: 640px) { .stil-werkstatt .rechtstext { padding: 26px 18px; border-radius: 24px; } }

/* ---------- Kopf: dunkel mit hellem, groesserem Logo – seit 2026-10-10 in allen Gestaltungen gleich (shop.css,
   „Kopfzeile: immer dunkel“); hier nur noch das helle Aufklappmenue „Nach Maß“ in Papier ---------- */
.stil-werkstatt .menue-liste { background: var(--papier); border-color: var(--line); }
.stil-werkstatt .menue .menue-liste a:hover { background: var(--bg); }
.stil-werkstatt .hs-name small { color: var(--holz); }
.stil-werkstatt .hs-name { background: rgba(255,253,249,.95); }
.stil-werkstatt .hs-kachel { background: var(--sand); }
.stil-werkstatt .hs-kachel.text { background: linear-gradient(155deg, var(--holz) 0%, var(--wt-holz-dd) 100%); }
.stil-werkstatt .hs-kachel.text .hs-name small { color: #ffe1bf; }