/* ============================================================
   Hufschmied Dirk Ludwig — Stylesheet
   Optik angelehnt an das Originaldesign (Grautöne, orangene
   Akzentfarbe des Logos), Technik: modern & responsiv.
   ============================================================ */

:root{
  --bg:#5e6162;          /* Original-Hintergrund */
  --sidebar-bg:#b0aeb0;  /* Original-Seitenspalte */
  --nav-bg:#454445;      /* Original-Navigationsfläche */
  --nav-text:#b0aeb0;
  --text-on-dark:#e9e7e4;
  --text-on-side:#3a3736;
  --accent:#c1541f;      /* Orange aus dem Logo */
  --accent-dark:#a3441a;
  --card-bg:#6c6f70;
  --line:#7a7d7e;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: Georgia, 'Times New Roman', serif;
  --maxw:1200px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text-on-dark);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--accent); }
a:visited{ color:var(--accent); }
a:hover{ color:#fff; }
h1,h2,h3{ font-family:var(--font-display); color:#fff; line-height:1.25; }
h1{ font-size:clamp(1.6rem,3vw,2.2rem); font-style:italic; font-weight:normal; }
h2{ font-size:1.3rem; margin-top:1.6em; }
h3{ font-size:1.05rem; }
p{ margin:0 0 1em; }

:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--accent); color:#fff;
  padding:.6em 1em; z-index:200;
}
.skip-link:focus{ left:0; }

/* ---------- Kopfbild ---------- */
.masthead{ width:100%; max-width:var(--maxw); margin:0 auto; }
.masthead img{ width:100%; }

/* ---------- Layout: Seitenspalte + Inhalt ---------- */
.layout{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:250px 1fr;
}
@media (max-width:820px){
  .layout{ grid-template-columns:1fr; }
}

/* ---------- Seitenspalte ---------- */
aside.sidebar{
  background:var(--sidebar-bg); color:var(--text-on-side);
  padding:1.4em 1.2em 2em;
}
aside.sidebar h1{
  color:var(--text-on-side); font-size:1.05rem; font-style:italic;
  margin:0 0 1.2em; line-height:1.4;
}
.nav-toggle{
  display:none; width:100%; background:var(--nav-bg); color:#fff; border:none;
  padding:.7em; font-size:1rem; border-radius:4px; margin-bottom:.6em; cursor:pointer;
}
@media (max-width:820px){ .nav-toggle{ display:block; } }

nav.mainnav ul{ list-style:none; margin:0 0 1.6em; padding:0; }
nav.mainnav li{ margin-bottom:2px; }
nav.mainnav a{
  display:block; background:var(--nav-bg); color:var(--nav-text);
  padding:.6em .8em; border-radius:3px; text-decoration:none; font-size:.95rem;
}
nav.mainnav a:hover, nav.mainnav .current > a{ background:var(--accent); color:#fff; }
nav.mainnav ul ul{ margin:2px 0 2px 0; }
nav.mainnav ul ul a{ padding-left:1.6em; background:#3a3736; font-size:.9rem; }
nav.mainnav ul ul a:hover{ background:var(--accent); }

@media (max-width:820px){
  nav.mainnav{ display:none; }
  nav.mainnav.open{ display:block; }
}

.quote-box{
  font-style:italic; font-size:.92rem; border-top:1px solid #999; padding-top:1em; color:var(--text-on-side);
}
.quote-box cite{ display:block; margin-top:.5em; font-style:normal; font-size:.85rem; }

/* ---------- Hauptinhalt ---------- */
main{ padding:2em 1.6em 3em; }
main h1{ color:#fff; }

.lead-note{
  background:var(--card-bg); border-left:4px solid var(--accent);
  padding:.9em 1.1em; border-radius:4px; margin:1.3em 0; font-size:.95rem;
}

.card-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.2em; margin:1.4em 0; }
.card{ background:var(--card-bg); border-radius:8px; padding:1.1em; }
.card h3{ margin-top:0; color:#fff; }

table.pricelist{ width:100%; border-collapse:collapse; margin:1.2em 0; }
table.pricelist th, table.pricelist td{ text-align:left; padding:.55em .5em; border-bottom:1px solid var(--line); }
table.pricelist th{ color:#fff; font-family:var(--font-display); font-weight:normal; }
table.pricelist td.amount{ text-align:right; white-space:nowrap; }

figure{ margin:1.3em 0; }
figure img{ border-radius:6px; }
figcaption{ font-size:.85rem; color:#cfcccb; margin-top:.35em; }

.gallery{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.9em; margin:1.3em 0; }
.gallery figure{ margin:0; }
.gallery img{ width:100%; aspect-ratio:4/3; object-fit:cover; }

.badge-row{ display:flex; flex-wrap:wrap; gap:1.6em; align-items:flex-start; margin:1.2em 0; }
.badge-row img{ max-width:150px; }

.contact-block{ background:var(--card-bg); border-radius:8px; padding:1.2em 1.4em; margin:1.4em 0; }
.contact-block a{ font-weight:bold; }

/* ---------- Footer ---------- */
footer.site{
  background:var(--nav-bg); color:var(--nav-text); font-size:.85rem;
}
footer.site .wrap{
  max-width:var(--maxw); margin:0 auto; padding:1.4em 1.6em;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1em;
}
footer.site a{ color:#fff; }

@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }