/* ============================================================
   carl-huter.ch – gemeinsames Stylesheet
   Tokens wie carl-huter-institut.ch / carl-huter-akademie.ch
   Hausfarben: Grün = Institut, Blau = Akademie, Rot = Verlag
   ============================================================ */
:root{
  --green:#008035; --green-dark:#0A4A22; --green-soft:#E6F2EA;
  --blue:#00559E;  --blue-dark:#003A6E;  --blue-soft:#E4EEF8;
  --red:#CC1517;   --red-dark:#8F0F11;   --red-soft:#FBEAEA;
  --accent:#8E631D; --gold:#F3C969;
  --bg:#F8FAF6; --surface:#FFFFFF; --ink:#16232E; --muted:#57697A; --line:#E1E7E1;
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --radius-band:24px; --radius-pill:999px;
  --shadow:0 10px 30px rgba(20,48,79,.08);
  --shadow-lift:0 18px 44px rgba(20,48,79,.14);
  --wrap-max:1060px; --wrap-pad:24px;
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;min-height:100vh;display:flex;flex-direction:column;
  background:var(--bg);color:var(--ink);font-family:var(--font-sans);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased
}
img{max-width:100%;height:auto;display:block}
a{color:var(--green);text-decoration:none}
a:hover{color:var(--green-dark)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:6px}
.wrap{width:100%;max-width:var(--wrap-max);margin:0 auto;padding:0 var(--wrap-pad)}

/* ---------- Kopf ---------- */
.top{padding:56px 0 0;text-align:center}
.top .logo{width:190px;margin:0 auto 26px}
.top--sub{padding-top:48px}
.top--sub .logo{width:150px;margin-bottom:24px}
.eyebrow{
  font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin:0 0 14px
}
h1{font-size:clamp(30px,4.6vw,48px);font-weight:800;letter-spacing:-.02em;line-height:1.13;margin:0 0 16px}
.top--sub h1{font-size:clamp(28px,4vw,42px)}
.lead{font-size:18px;color:var(--muted);margin:0 auto;max-width:52ch}
.top--sub .lead{font-size:17.5px;max-width:56ch}

/* ---------- Startseite: die drei Websites ---------- */
main{flex:1 0 auto;padding:44px 0 72px}
main.main--sub{padding:40px 0 64px}
.houses{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.house{
  position:relative;
  display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-band);overflow:hidden;box-shadow:var(--shadow);
  transition:transform .18s ease,box-shadow .18s ease;color:var(--ink)
}
.house:hover,.house:focus-within{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
/* Der Hauptlink spannt sich unsichtbar über die ganze Karte, damit sie
   vollständig klickbar bleibt – und trotzdem ein zweiter Link Platz hat. */
a.go::after{content:"";position:absolute;inset:0;z-index:1}
.house-band{height:6px}
.house-shot{
  display:block;width:100%;aspect-ratio:900/459;object-fit:cover;object-position:top center;
  border-bottom:1px solid var(--line);background:var(--bg)
}
.house-body{padding:24px 26px 84px;display:flex;flex-direction:column;height:100%}
.kicker{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin:0 0 12px}
.house h2{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:0 0 10px}
.house .desc{color:var(--muted);font-size:15.5px;margin:0 0 22px}
.go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15.5px}
.house .go{align-self:flex-start}
.go .arrow{transition:transform .15s ease}
.house:hover .go .arrow{transform:translateX(4px)}
.since{display:block;font-size:13.5px;color:var(--muted);font-weight:600;margin:10px 0 0}

.h-green .house-band{background:var(--green)} .h-green .kicker,.h-green .go{color:var(--green)}
.h-blue  .house-band{background:var(--blue)}  .h-blue  .kicker,.h-blue  .go{color:var(--blue)}
.h-red   .house-band{background:var(--red)}   .h-red   .kicker,.h-red   .go{color:var(--red)}

/* ---------- Hinweiszeile in der Karte ---------- */
/* Sitzt am unteren Kartenrand; alle Karten halten denselben Platz frei,
   damit die Hauptlinks der drei Karten auf einer Linie bleiben.
   z-index hebt sie über das Klick-Overlay des Hauptlinks – sonst wäre
   der zweite Link nicht erreichbar. */
.also{
  position:absolute;left:26px;right:26px;bottom:24px;z-index:2;
  margin:0;padding-top:14px;border-top:1px solid var(--line);
  font-size:14.5px;color:var(--muted)
}
.also a{
  color:var(--red);font-weight:700;display:inline-flex;align-items:center;gap:6px;
  white-space:nowrap
}
.also a:hover{color:var(--red-dark)}
.also .arrow{transition:transform .15s ease}
.also a:hover .arrow{transform:translateX(3px)}

/* ---------- Impressum: Firmenkarten ---------- */
.firms{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.firm{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-band);
  overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column
}
.firm-band{height:6px}
.firm-body{padding:26px}
.firm h2{font-size:20px;font-weight:800;letter-spacing:-.02em;margin:0 0 14px}
.firm .role{font-size:13.5px;color:var(--muted);font-weight:600;margin:-8px 0 14px}
dl{margin:0;font-size:15px}
dt{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:14px 0 3px}
dt:first-of-type{margin-top:0}
dd{margin:0;color:var(--ink)}
dd a{font-weight:600;word-break:break-word}

.h-green .firm-band{background:var(--green)} .h-green .firm .kicker{color:var(--green)}
.h-green dd a{color:var(--green)} .h-green dd a:hover{color:var(--green-dark)}
.h-blue .firm-band{background:var(--blue)}   .h-blue .firm .kicker{color:var(--blue)}
.h-blue dd a{color:var(--blue)}   .h-blue dd a:hover{color:var(--blue-dark)}
.h-red .firm-band{background:var(--red)}     .h-red .firm .kicker{color:var(--red)}
.h-red dd a{color:var(--red)}     .h-red dd a:hover{color:var(--red-dark)}

/* ---------- Textabschnitte (Impressum, Datenschutz) ---------- */
.notes{
  margin-top:22px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-band);padding:30px;box-shadow:var(--shadow)
}
.notes h2{font-size:19px;font-weight:800;letter-spacing:-.02em;margin:0 0 10px}
.notes section+section{margin-top:26px;padding-top:26px;border-top:1px solid var(--line)}
.notes p{margin:0 0 10px;color:var(--muted);font-size:15.5px;max-width:70ch}
.notes ul{margin:0 0 10px;padding-left:20px;color:var(--muted);font-size:15.5px;max-width:70ch}
.notes li{margin-bottom:6px}
.notes p:last-child,.notes ul:last-child{margin-bottom:0}
.notes a{font-weight:600}

/* ---------- 404 ---------- */
.oops{text-align:center;padding:20px 0 0}
.oops .code{
  font-size:clamp(64px,12vw,120px);font-weight:800;letter-spacing:-.04em;line-height:1;
  background:linear-gradient(100deg,var(--green),var(--blue) 55%,var(--red));
  -webkit-background-clip:text;background-clip:text;color:transparent;margin:0 0 8px
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;border-radius:var(--radius-pill);font-weight:700;font-size:15.5px;
  background:var(--green);color:#fff;border:2px solid transparent;
  box-shadow:0 6px 18px rgba(0,128,53,.28);transition:transform .15s ease,background .15s ease
}
.btn:hover{background:var(--green-dark);color:#fff;transform:translateY(-1px)}

/* ---------- Fuss ---------- */
footer{
  flex:none;border-top:1px solid var(--line);background:var(--surface);
  padding:28px 0;font-size:14.5px;color:var(--muted)
}
.foot{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between}
.foot a{color:var(--muted);font-weight:600}
.foot a:hover{color:var(--ink)}
.foot nav{display:flex;flex-wrap:wrap;gap:18px}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .houses,.firms{grid-template-columns:1fr;gap:18px}
  .house-body{padding-bottom:24px}
  .also{position:static;margin-top:16px}
  .top{padding-top:40px}
  main{padding:32px 0 56px}
  .foot{justify-content:center;text-align:center}
}