/* ═══════════════════════════════════════════════════════
   Schichtwerk Handwerk – Bereich schichtwerk.app/handwerk (16.10.2026, Zweig handwerk-website)
   Lädt NACH style.css und färbt nur Seiten mit <body class="seite-start seite-handwerk"> um.
   Seit 18.10.2026 Anthrazit mit kleinem Orange-Akzent (Lars), Werte aus Graphiken/Handwerk/handwerk-farben.css:
   Knopf/Fläche --primary #2b2f33 (Weiß 13,49:1), Orange #ea7535 nur als Punkt, Linie, Fläche;
   Orange als Schrift nur --akzent-text #b84a14 (5,21:1 auf Weiß).
   Die Website hat keinen Dunkelmodus, darum nur die helle Palette.
   ═══════════════════════════════════════════════════════ */
body.seite-handwerk {
  --primary: #2b2f33;
  --primary-dark: #1b1e21;
  --primary-light: #4a5057;
  --primary-deep: #1b1e21;
  --primary-pale: #eef0f2;
  --on-primary-muted: #c9ced4;
  --on-primary-check: #ea7535;
  --akzent: #ea7535;
  --akzent-text: #b84a14;
  --text: #1d2023;
  --text-secondary: #5b6168;
  --text-tertiary: #646a71;
  --bg-subtle: #f9fafb;
  --bg-muted: #f1f3f4;
  --bg-karte: #f6f7f8;
  --border: #d5d9dd;
  --border-light: #e8ebed;
  --border-strong: #868d95;
  --shadow-shot-phone: 0 16px 34px rgba(27, 30, 33, .2);
  --shadow-karte: 0 30px 60px -30px rgba(27, 30, 33, .4), 0 0 0 1px rgba(27, 30, 33, .06);
  --shadow-preis: 0 18px 40px -28px rgba(27, 30, 33, .35);
  --shadow-preis-blau: 0 24px 48px -24px rgba(27, 30, 33, .6);
  --shadow-hover: 0 26px 48px -26px rgba(27, 30, 33, .42);
  --shadow-hover-blau: 0 32px 56px -24px rgba(27, 30, 33, .7);
  --hover-rand: var(--primary);
}

/* ── Menü: Rücklink zur Gastro-Startseite ── */
.seite-handwerk .nav-gastro { font-size: 14px; color: var(--text-secondary); text-decoration: none; padding: 8px 4px; }
.seite-handwerk .nav-gastro:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }

/* ── Hero: Fläche mit Zeichnung statt Foto ── */
.hw-hero-flaeche {
  position: relative; overflow: hidden; width: 100%; height: 580px; border-radius: var(--radius-foto);
  background: linear-gradient(135deg, #3a3f45 0%, #2b2f33 55%, #1b1e21 100%);
}
.hw-hero-flaeche svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hw-hero-glyphe {
  position: absolute; right: 7%; top: 50%; transform: translateY(-58%);
  width: min(30%, 300px); height: auto; filter: drop-shadow(0 20px 30px rgba(59, 28, 11, .28));
}
.hw-badge-neu {
  display: inline-block; margin-bottom: 14px; padding: 4px 12px; border-radius: var(--radius-pill);
  background: var(--primary-pale); color: var(--primary-deep); font-size: 13px; font-weight: 700; letter-spacing: .02em;
}

/* ── Bald-Kennzeichnung (wie „Bald“ in der Tarifliste) ── */
.hw-bald {
  display: inline-block; vertical-align: middle; margin-left: 8px; padding: 2px 10px; border-radius: var(--radius-pill);
  background: var(--primary-pale); color: var(--primary-deep); border: 1px solid var(--border);
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .02em; line-height: 1.5;
}

/* ── Karten mit Zeichnung statt Foto ── */
.hw-bild {
  display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-lg);
  background: var(--primary-pale); overflow: hidden;
}
.hw-bild svg { display: block; width: 100%; height: 100%; }

/* ── Standort-Abschnitt (Vertrauen) ── */
.hw-standort {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px 56px; align-items: center;
  background: var(--bg-karte); border-radius: var(--radius-karte); padding: 48px 44px;
}
.hw-standort .feature-list { margin: 18px 0 0; }
.hw-zeitstrahl {
  background: var(--bg); border-radius: var(--radius-karte); padding: 22px 20px 16px;
  box-shadow: var(--shadow-preis);
}
.hw-zeitstrahl svg { display: block; width: 100%; height: auto; }
.hw-zeitstrahl figcaption { margin-top: 8px; font-size: 14px; color: var(--text-secondary); text-align: center; }

/* ── Weitere Funktionen ── */
.hw-funktionen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 40px; list-style: none; padding: 0; }
.hw-funktion { background: var(--bg-karte); border-radius: var(--radius-karte); padding: 28px 28px 30px; }
.hw-funktion-symbol {
  display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 16px;
  border-radius: 14px; background: var(--primary-pale); color: var(--primary);
}
.hw-funktion-symbol svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hw-funktion h3 { font-size: 21px; line-height: 1.2; color: var(--primary-dark); margin-bottom: 8px; }
.hw-funktion p { color: var(--text-secondary); font-size: 16px; }
.hw-tarif { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--primary); }

/* ── Für wen / Gut zu wissen ── */
.hw-wen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 48px; align-items: start; }
.hw-hinweis {
  background: var(--bg-karte); border-radius: var(--radius-karte); padding: 28px 30px;
  color: var(--text-secondary); border-left: 4px solid var(--primary-light);
}
.hw-hinweis h3 { font-size: 20px; color: var(--primary-dark); margin-bottom: 8px; }
.hw-hinweis p + p { margin-top: 10px; }
.hw-hinweis a { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ── Test-Platz anfragen ── */
.hw-anfrage {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 36px 56px; align-items: start;
  background: var(--primary-pale); border-radius: var(--radius-karte); padding: 48px 44px;
}
.hw-anfrage .start-h2 { text-wrap: balance; }
.hw-anfrage-form {
  background: var(--bg); border-radius: var(--radius-karte); padding: 28px 28px 30px; box-shadow: var(--shadow-preis);
}
.hw-anfrage-form select {
  width: 100%; padding: 11px 12px; font: inherit; color: var(--text); background: var(--bg);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
}
.hw-anfrage-form select:focus { border-color: var(--primary); outline: 3px solid var(--primary-pale); }
.hw-anfrage-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hw-anfrage .hilfe-direkt { margin-top: 14px; }

/* ── Tablet und Handy ── */
@media (max-width: 900px) {
  .hw-hero-flaeche { height: 320px; border-radius: var(--radius-karte); }
  .hw-hero-glyphe { right: 6%; width: 34%; transform: translateY(-50%); }
  .hw-standort, .hw-anfrage { grid-template-columns: 1fr; padding: 28px 20px 30px; }
  .hw-funktionen { grid-template-columns: 1fr; }
  .hw-wen { grid-template-columns: 1fr; }
  .hw-anfrage-zeile { grid-template-columns: 1fr; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .hw-funktionen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Feinschliff nach erster Sichtprüfung ── */
.seite-handwerk .start-hero-karte h1 { font-size: clamp(34px, 3.8vw, 50px); }
.seite-handwerk .start-sia .sia-log { max-height: none; }
.hw-anfrage .hilfe-zeit { margin-top: 18px; }
/* Sprach-Beschriftung: Orange (--on-primary-check) ist nur für Haken, kleine Schrift bekommt das helle Grau */
.seite-handwerk .spr-gruss small { color: var(--on-primary-muted); }

/* ═══ Seite wie die Gastro-Startseite (17.10.2026, Zweig handwerk-website-2) ═══ */
/* Symbole im Funktionen-Menü: Anthrazit statt Blau */
.seite-handwerk .nav-klapp-symbol { background: var(--primary-pale); color: var(--primary); }
.seite-handwerk .nav-klapp-symbol--sia { background: linear-gradient(135deg, #eef0f2, #dfe3e7); color: var(--primary); }
.seite-handwerk .nav-klapp-liste a:hover .nav-klapp-symbol { box-shadow: var(--shadow); }

/* Abschnitte mit Bild links (Urlaub): Spalten tauschen nur am Rechner */
@media (min-width: 901px) {
  .hw-umgekehrt { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .hw-umgekehrt .start-standorte-bild { order: -1; }
}
/* Handy-Bild im Detail-Abschnitt: kleiner, mittig */
.hw-bild-handy { display: flex; justify-content: center; }
.hw-bild-handy img { max-width: 240px; }
.hw-liste-bald li { display: block; }
.hw-umzug { max-width: 720px; }
.hw-umzug .feature-list { margin-top: 20px; }
.hw-wen-hinweis { margin-top: 28px; max-width: 70ch; color: var(--text-secondary); }
.hw-wen-hinweis a { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.hw-faq { margin-top: 28px; max-width: 820px; }
.hw-zeichnung { margin: 0; min-width: 0; }
.hw-zeichnung svg { display: block; width: 100%; height: auto; background: var(--primary-pale); border-radius: var(--radius-lg); }

/* ═══ Kopfzeile (18.10.2026, Zweig handwerk-website-3) ═══ */
/* Das Logo „Schichtwerk Handwerk“ ist 259 px breit: die volle Leiste passt erst ab ~1040 px.
   Darunter Menü-Knopf, auf dem Handy Logo schmaler. */
@media (max-width: 1040px) {
  .seite-handwerk .nav-center, .seite-handwerk .nav-actions { display: none; }
  .seite-handwerk .nav-hamburger { display: flex; }
}
@media (min-width: 1041px) {
  .seite-handwerk .nav-mobile { display: none; }
}
.seite-handwerk .nav-logo { min-width: 0; white-space: nowrap; }
@media (max-width: 420px) {
  .seite-handwerk .nav-inner { padding: 0 16px; gap: 8px; }
  .seite-handwerk .nav-logo { font-size: 16px; gap: 8px; }
  .seite-handwerk .nav-logo img { width: 28px; height: 28px; }
}

/* ═══ Anthrazit: Orange nur als kleiner Punkt (18.10.2026) ═══ */
.seite-handwerk .feature-list li::before { background: var(--akzent); }
.hw-bald::before, .hw-badge-neu::before {
  content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%;
  background: var(--akzent); vertical-align: middle; position: relative; top: -1px;
}
.hw-bald { padding-left: 8px; }