/* Saarhandwerk – öffentliches Design
   Fonts: Bricolage Grotesque (Display) + Instrument Sans (Text)
   Palette: Tiefes Marineblau + warmes Handwerks-Orange auf Papierton */
:root {
  --ink: #16283a;
  --ink-soft: #33465a;
  --muted: #5f6d7c;
  --paper: #f6f3ec;
  --card: #ffffff;
  --line: #e3dccd;
  --accent: #E8491D;
  --accent-dark: #C93A12;
  --accent-soft: #FDE8DF;
  --ok: #2e7d4f;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(22,40,58,.06), 0 8px 24px -12px rgba(22,40,58,.18);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Instrument Sans', system-ui, sans-serif;
  background:var(--paper); color:var(--ink);
  line-height:1.6; font-size:16.5px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display { font-family:'Bricolage Grotesque','Instrument Sans',sans-serif; line-height:1.15; letter-spacing:-.015em; }
a { color:inherit; }
img { max-width:100%; display:block; }
.wrap { max-width:1120px; margin:0 auto; padding:0 22px; }

/* Buttons */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  background:var(--accent); color:#fff;
  font-family:'Instrument Sans',sans-serif; font-weight:600; font-size:17px;
  padding:15px 28px; border-radius:10px; border:none; cursor:pointer;
  text-decoration:none; transition:background .15s, transform .15s, box-shadow .15s;
  box-shadow:0 2px 0 rgba(22,40,58,.18);
}
.btn:hover { background:var(--accent-dark); transform:translateY(-1px); box-shadow:0 4px 10px -2px rgba(22,40,58,.3); }
.btn:active { transform:translateY(0); }
.btn.ghost { background:transparent; color:var(--ink); border:1.5px solid var(--line); box-shadow:none; }
.btn.ghost:hover { background:#fff; border-color:var(--ink-soft); }
.btn.big { font-size:18px; padding:17px 34px; }

/* Header */
header.site {
  position:sticky; top:0; z-index:50;
  background:rgba(246,243,236,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
header.site .wrap { display:flex; align-items:center; justify-content:space-between; height:70px; }
.logo { display:flex; align-items:center; gap:10px; text-decoration:none; font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:22px; letter-spacing:-.02em; }
.logo svg { flex:none; }
.logo b { color:var(--accent); font-weight:700; }
nav.main { display:flex; gap:28px; align-items:center; }
nav.main a { text-decoration:none; font-weight:500; font-size:15.5px; color:var(--ink-soft); }
nav.main a:hover { color:var(--ink); }
nav.main .btn { font-size:15.5px; padding:11px 20px; color:#fff; }
@media (max-width:820px){ nav.main a:not(.btn){ display:none; } }

/* Hero */
.hero { padding:72px 0 64px; position:relative; overflow:hidden; }
.hero .wrap { display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
@media (max-width:900px){ .hero .wrap { grid-template-columns:1fr; } }
.hero h1 { font-size:clamp(34px,4.6vw,54px); font-weight:700; margin-bottom:18px; }
.hero h1 em { font-style:normal; color:var(--accent); }
.hero p.sub { font-size:19px; color:var(--muted); max-width:52ch; margin-bottom:30px; }
.hero-points { display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:26px; }
.hero-points span { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:500; color:var(--ink-soft); }
.hero-points svg { color:var(--ok); flex:none; }
.hero-photo { position:relative; }
.hero-photo .frame {
  border-radius:18px; overflow:hidden; box-shadow:var(--shadow);
  aspect-ratio:4/3.4; background:#d8cfbe;
}
.hero-photo .frame img { width:100%; height:100%; object-fit:cover; }
.hero-photo .tag {
  position:absolute; left:-14px; bottom:26px; background:var(--ink); color:#fff;
  padding:12px 18px; border-radius:10px; font-size:14.5px; font-weight:600;
  box-shadow:var(--shadow); display:flex; gap:9px; align-items:center;
}
.hero-photo .tag svg { color:#F97316; }

/* Abschnitte */
section.block { padding:64px 0; }
section.alt { background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.kicker { font-size:13.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
h2.head { font-size:clamp(26px,3.2vw,36px); margin-bottom:14px; }
p.lead { color:var(--muted); font-size:17.5px; max-width:62ch; }

/* Gewerk-Karten */
.gewerke { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:38px; }
@media (max-width:820px){ .gewerke { grid-template-columns:1fr; } }
.gcard {
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; text-decoration:none; transition:transform .18s, box-shadow .18s;
  display:flex; flex-direction:column;
}
.gcard:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.gcard .ph { aspect-ratio:16/10; background:#e8e2d4; overflow:hidden; }
.gcard .ph img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.gcard:hover .ph img { transform:scale(1.04); }
.gcard .tx { padding:22px 24px 24px; }
.gcard h3 { font-size:21px; margin-bottom:6px; }
.gcard p { font-size:15px; color:var(--muted); margin-bottom:14px; }
.gcard .go { font-weight:600; font-size:15.5px; color:var(--accent); display:flex; align-items:center; gap:7px; }

/* Schritte */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:40px; counter-reset:step; }
@media (max-width:820px){ .steps { grid-template-columns:1fr; } }
.step { position:relative; padding:28px 26px 26px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); }
.step::before {
  counter-increment:step; content:counter(step);
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:15px;
  width:34px; height:34px; border-radius:50%; background:var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.step h3 { font-size:19px; margin-bottom:8px; }
.step p { font-size:15.5px; color:var(--muted); }

/* Vorteile */
.vorteile { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:38px; }
@media (max-width:820px){ .vorteile { grid-template-columns:1fr; } }
.vt { display:flex; gap:16px; align-items:flex-start; }
.vt .ic { flex:none; width:46px; height:46px; border-radius:12px; background:var(--accent-soft); color:var(--accent-dark); display:flex; align-items:center; justify-content:center; }
.vt h3 { font-size:17.5px; margin-bottom:4px; }
.vt p { font-size:15px; color:var(--muted); }

/* Betriebe-CTA */
.betriebe {
  background:var(--ink); color:#fff; border-radius:20px; padding:52px 54px;
  display:grid; grid-template-columns:1.3fr .7fr; gap:40px; align-items:center;
}
@media (max-width:820px){ .betriebe { grid-template-columns:1fr; padding:38px 30px; } }
.betriebe h2 { font-size:clamp(24px,3vw,32px); margin-bottom:12px; }
.betriebe p { color:#b9c4d0; font-size:16.5px; max-width:56ch; }
.betriebe .kontakt { display:flex; flex-direction:column; gap:12px; }
.betriebe .kontakt a {
  display:flex; align-items:center; gap:12px; text-decoration:none; font-weight:600;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  padding:14px 20px; border-radius:10px; transition:background .15s;
}
.betriebe .kontakt a:hover { background:rgba(255,255,255,.15); }
.betriebe .kontakt svg { color:#F97316; flex:none; }

/* Footer */
footer.site { padding:40px 0 48px; border-top:1px solid var(--line); }
footer.site .wrap { display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between; align-items:center; font-size:14.5px; color:var(--muted); }
footer.site a { color:var(--muted); text-decoration:none; margin-left:22px; }
footer.site a:hover { color:var(--ink); }

/* Einblenden beim Laden */
.rise { animation:rise .7s cubic-bezier(.2,.7,.3,1) both; }
.rise.d1{animation-delay:.08s} .rise.d2{animation-delay:.16s} .rise.d3{animation-delay:.24s}
@keyframes rise { from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none} }