/* ==========================================================================
   handwerk.css — Design-Schicht nach Skill „web-design-handwerk"
   Nur Testkopie. Überschreibt style.css, ändert keine Inhalte.
   Goldener Schnitt: Fibonacci-Abstände, 62/38-Hero, Zeilenhöhe 1,6.
   ========================================================================== */

:root {
  /* Fibonacci-Raster */
  --f1: 8px; --f2: 13px; --f3: 21px; --f4: 34px; --f5: 55px; --f6: 89px;
  --phi: 1.618;

  /* Kein reines Weiss, ruhigerer Dunkelgrund mit Gelb-Wärme im Text */
  --ink:      #e9f0f2;
  --ink-soft: #b4c5cc;          /* Kontrast auf --bg ≈ 10:1 */
  --ink-mute: #8499a4;          /* vorher #6a7d88, jetzt ≥ 4,5:1 */

  /* Weichere, gestufte Tiefe statt Heiligenschein */
  --shadow-soft: 0 1px 2px rgba(0,0,0,.4), 0 14px 30px -16px rgba(0,0,0,.65);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io:  cubic-bezier(0.77, 0, 0.175, 1);
}

/* ---------- Typografie ---------- */
body { line-height: 1.6; }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
h1 { font-size: clamp(2.25rem, 1.3rem + 3.6vw, 4.2rem); line-height: 1.04; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.8rem); line-height: 1.1; }
.lead { max-width: 58ch; line-height: 1.6; }
p, .lead { max-width: 70ch; }
.card p, .footer-col a, .footer-grid p { max-width: none; }
table, .price, [data-count], .stat { font-variant-numeric: tabular-nums; }

/* Eyebrow: ohne gestrichelte Deko-Linie, ruhiger */
.eyebrow { letter-spacing: 0.12em; font-size: 0.74rem; color: var(--brand); }
.eyebrow::before { display: none; }

/* ---------- Browser-Flächen in Markenfarben ---------- */
::selection { background: var(--brand); color: var(--brand-ink); }
html { caret-color: var(--brand); accent-color: var(--brand); scrollbar-color: #2a3d4d var(--bg); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #2a3d4d; border-radius: 10px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--brand-deep); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; box-shadow: 0 0 0 5px rgba(255,200,46,.18); }
input, textarea, select { caret-color: var(--brand); }

/* ---------- Hero: 62 / 38, Schwerpunkt leicht über der Mitte ---------- */
.hero { padding: clamp(var(--f4), 8vw, var(--f6)) 0 clamp(var(--f5), 9vw, 144px); }
.hero > .container { display: grid; gap: var(--f3); }
@media (min-width: 1040px) {
  .hero > .container { grid-template-columns: 61.8fr 38.2fr; column-gap: var(--f5); align-content: start; }
  .hero > .container > * { grid-column: 1; }
}
.hero h1 { max-width: 13ch; margin-top: var(--f3); }
.hero .lead { margin-top: var(--f3); }
.hero-trust { margin-top: var(--f4); }
.hero-trust li { color: var(--ink-soft); }

/* ---------- Abstände zwischen Gruppen ≈ 1,6 × innerhalb ---------- */
.section-head { margin-bottom: clamp(var(--f4), 5vw, var(--f5)); }
.section-head .lead { margin-top: var(--f2); }
.card { padding: var(--f4); gap: var(--f2); box-shadow: var(--shadow-soft); }
.card h3 { margin-bottom: var(--f1); }

/* ---------- Karten: ruhiger, keine Verschachtelung ---------- */
.card, .pricecard, .product { transition: transform .3s var(--ease-out), border-color .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.card:hover, .pricecard:hover, .product:hover { transform: translateY(-3px); }

/* ---------- Buttons: Rückmeldung, 44px Mindestfläche ---------- */
.btn { min-height: 44px; transition: transform .16s var(--ease-out), background .2s ease, box-shadow .25s var(--ease-out), border-color .2s ease; }
.btn:active { transform: scale(0.97); }
.btn-brand:hover { box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 26px -12px rgba(255,200,46,.45); }
.nav a { min-height: 44px; }

/* ---------- Footer: lesbarer ---------- */
.footer-col a, .footer-bottom { color: var(--ink-soft); }
.footer-col a:hover { color: var(--brand); }

/* ---------- Bewegung: sanfter Eintritt, nur transform/opacity ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero > .container > * { animation: hw-in .7s var(--ease-out) both; }
  .hero > .container > *:nth-child(2) { animation-delay: .08s; }
  .hero > .container > *:nth-child(3) { animation-delay: .16s; }
  .hero > .container > *:nth-child(4) { animation-delay: .24s; }
}
@keyframes hw-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Handy: Grid-Kinder dürfen schrumpfen, lange Wörter umbrechen ---------- */
.hero-grid > *, .hero > .container > * { min-width: 0; }
h1, h2, h3 { overflow-wrap: break-word; hyphens: manual; }
@media (max-width: 480px) { h1 { font-size: clamp(1.9rem, 8.4vw, 2.4rem); } }
html, body { overflow-x: clip; }
.hero-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1040px) { .hero-grid { grid-template-columns: 61.8fr 38.2fr; } }
main p, main li, main td, main h1, main h2, main h3 { overflow-wrap: anywhere; }
main table { display: block; overflow-x: auto; }
h1, h2 { hyphens: auto; -webkit-hyphens: auto; }