/* crewhouse.digital — Produktseite. Dieselben Schriften und Farben wie das
   Backend (httpdocs/admin/style.css), damit die eigene Seite nicht wie ein
   fremdes Produkt neben der eigenen Oberfläche wirkt. */
@font-face{font-family:Bricolage;src:url(/admin/fonts/bricolage.woff2) format("woff2");
  font-weight:200 800;font-display:swap;font-style:normal}
@font-face{font-family:Instrument;src:url(/admin/fonts/instrument.woff2) format("woff2");
  font-weight:400 700;font-display:swap;font-style:normal}

:root{
  --ink:#14191B; --mut:#5E6864; --line:#E4E7E2; --line-2:#EEF0EC;
  --bg:#FAFAF8; --sur:#FFFFFF; --sur2:#F3F5F1;
  --acc:#0E5A63; --acc-ink:#FFFFFF; --acc-soft:#E7F1F2; --acc-line:#B7D5D8;
  --ok:#17603D; --ok-s:#E2F0E8; --crit:#8C3123; --crit-s:#F7E3DF;
  --r:10px; --r-s:8px;
  --f-ui:Instrument,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --f-dis:Bricolage,Instrument,-apple-system,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font:16px/1.65 var(--f-ui);color:var(--ink);background:var(--bg)}
h1,h2,h3{font-family:var(--f-dis);font-weight:700;letter-spacing:-.02em;margin:0}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
a{color:var(--acc)}

header.top{border-bottom:1px solid var(--line);background:var(--sur)}
header.top .wrap{display:flex;align-items:center;gap:10px;padding:16px 24px;min-height:64px}
header.top .brand{display:flex;align-items:center;gap:9px;font-family:var(--f-dis);
  font-weight:700;font-size:1.12rem;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
header.top .spacer{flex:1}
header.top nav{display:flex;gap:22px;align-items:center}
header.top nav a{color:var(--mut);text-decoration:none;font-size:.94rem;font-weight:600}
header.top nav a:hover{color:var(--ink)}
header.top .btn{background:var(--acc);color:var(--acc-ink);padding:10px 18px;border-radius:var(--r-s);
  font-weight:700;font-size:.92rem;text-decoration:none}

.hero{padding:128px 0 108px;background-size:cover;background-position:center;color:#fff}
.hero .wrap{display:grid;gap:18px;max-width:620px}
.hero .kicker{color:#BFE0E2;font-weight:700;font-size:.9rem;letter-spacing:.02em}
.hero h1{font-size:3.1rem;line-height:1.1;color:#fff;text-wrap:balance}
.hero p{font-size:1.16rem;color:rgba(255,255,255,.9);margin:0;max-width:52ch}
.hero .tun{display:flex;gap:12px;margin-top:10px;flex-wrap:wrap}
.hero .btn{background:var(--acc);color:var(--acc-ink);padding:14px 26px;border-radius:var(--r-s);
  font-weight:700;text-decoration:none;font-size:1rem}
.hero .btn.ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.45);
  backdrop-filter:blur(3px)}
.hero .btn.ghost:hover{background:rgba(255,255,255,.18)}

.schaugrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.schaukachel{position:relative;min-height:280px;border-radius:var(--r);background-size:cover;
  background-position:center top;overflow:hidden;display:flex;align-items:flex-end}
.schaukachel .text{position:relative;z-index:1;padding:20px 22px;color:#fff}
.schaukachel .text b{display:block;font-family:var(--f-dis);font-weight:700;font-size:1.14rem;
  letter-spacing:-.01em;margin-bottom:3px}
.schaukachel .text span{display:block;font-size:.88rem;opacity:.92}

section{padding:64px 0}
section .kopf{max-width:640px;margin:0 0 40px}
section .kopf .kicker{color:var(--acc);font-weight:700;font-size:.86rem;letter-spacing:.02em;
  display:block;margin-bottom:8px}
section h2{font-size:1.8rem;margin-bottom:10px}
section .kopf p{color:var(--mut);margin:0;font-size:1.05rem}

.vorteile{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.vorteile .karte{background:var(--sur);border:1px solid var(--line);border-radius:var(--r);
  padding:24px}
.vorteile .karte .ic{width:42px;height:42px;border-radius:var(--r-s);background:var(--acc-soft);
  color:var(--acc);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.vorteile .karte b{display:block;font-size:1.04rem;margin-bottom:6px;font-family:var(--f-dis)}
.vorteile .karte p{margin:0;color:var(--mut);font-size:.94rem}

.schritte{counter-reset:schritt;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px}
.schritte .schritt{position:relative;padding-left:52px}
.schritte .schritt::before{counter-increment:schritt;content:counter(schritt);
  position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;background:var(--acc);
  color:var(--acc-ink);display:flex;align-items:center;justify-content:center;
  font-family:var(--f-dis);font-weight:700}
.schritte .schritt b{display:block;font-size:1.02rem;margin-bottom:5px;font-family:var(--f-dis)}
.schritte .schritt p{margin:0;color:var(--mut);font-size:.94rem}

.kontakt{background:var(--sur2);border-top:1px solid var(--line)}
.kontakt .innen{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.kontakt form{background:var(--sur);border:1px solid var(--line);border-radius:var(--r);padding:26px}
.kontakt label{display:block;font-weight:600;font-size:.9rem;margin:14px 0 6px}
.kontakt label:first-child{margin-top:0}
.kontakt input,.kontakt textarea{width:100%;font:inherit;font-size:.96rem;padding:11px 13px;
  border:1px solid var(--line);border-radius:var(--r-s);background:var(--sur);color:var(--ink)}
.kontakt textarea{min-height:120px;resize:vertical}
.kontakt input:focus,.kontakt textarea:focus{outline:2px solid var(--acc-line);outline-offset:1px}
.kontakt button{margin-top:18px;background:var(--acc);color:var(--acc-ink);border:0;
  padding:13px 22px;border-radius:var(--r-s);font:inherit;font-weight:700;font-size:.96rem;cursor:pointer;
  min-height:44px}
.kontakt .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.msg{display:block;padding:13px 16px;border-radius:var(--r-s);font-size:.92rem;margin-bottom:18px}
.msg.ok{background:var(--ok-s);color:var(--ok)}
.msg.err{background:var(--crit-s);color:var(--crit)}

footer{border-top:1px solid var(--line);padding:26px 0;color:var(--mut);font-size:.86rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center}
footer a{color:var(--mut)}
footer .spacer{flex:1}

.legal{max-width:720px;padding:56px 24px 80px}
.legal h1{font-size:1.7rem;margin-bottom:22px}
.legal h2{font-size:1.1rem;margin:30px 0 8px}
.legal p{color:var(--mut);line-height:1.7}
.legal a{word-break:break-word}

@media (max-width:760px){
  .hero{padding:76px 0 56px}.hero h1{font-size:2.1rem}
  .kontakt .innen{grid-template-columns:1fr}
  header.top nav{display:none}
}