/* hugy.ch - Logo: Original 2003 (Webarchiv), Rot #ad0800 aus dem Logo uebernommen
   nur HTML/CSS, keine externen Schriften oder Dienste
   Hausfarben: HuGy Rot, Hugener Informatik Violett, Hugener Beratung Anthrazit, Gygli Blau */
:root {
  --bg:#fbf9f8; --flaeche:#ffffff; --hell:#f4efed; --text:#1e1d22; --muted:#5f5b63; --linie:#e6dfdc;
  --rot:#ad0800; --rot-dunkel:#8a0600; --violett:#5b2a86; --anthrazit:#33363b; --blau:#1f4f9c; --auf-farbe:#ffffff;
  --radius:14px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg:#141215; --flaeche:#1d1a1e; --hell:#18161a; --text:#ece8ea; --muted:#aaa3a8; --linie:#2e292d;
  --rot:#e0525a; --rot-dunkel:#f07a80; --violett:#a77ad6; --anthrazit:#9aa0a8; --blau:#7aa6e8; --auf-farbe:#141215;
} }
:root[data-theme="dark"] { --bg:#141215; --flaeche:#1d1a1e; --hell:#18161a; --text:#ece8ea; --muted:#aaa3a8; --linie:#2e292d; --rot:#e0525a; --rot-dunkel:#f07a80; --violett:#a77ad6; --anthrazit:#9aa0a8; --blau:#7aa6e8; --auf-farbe:#141215; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font:17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; }
a { color:var(--rot-dunkel); }
.rahmen { max-width:1080px; margin:0 auto; padding:0 16px; }
@media (min-width:720px) { .rahmen { padding:0 32px; } }

.kopf { position:sticky; top:0; z-index:5; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--linie); }
.kopf-innen { display:flex; align-items:center; justify-content:space-between; height:64px; gap:16px; }
.marke { font-weight:800; font-size:1.35rem; letter-spacing:-0.02em; text-decoration:none; color:var(--text); }
.marke { display:inline-flex; align-items:center; }
.marke img { display:block; height:40px; width:auto; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .marke img { background:#fff; border-radius:8px; padding:3px 8px; } }
:root[data-theme="dark"] .marke img { background:#fff; border-radius:8px; padding:3px 8px; }
nav { display:flex; gap:18px; }
nav a { text-decoration:none; color:var(--muted); font-size:0.95rem; }
nav a:hover { color:var(--text); }

.held { padding:56px 0 48px; border-top:6px solid var(--rot); }
.held-innen { display:grid; gap:32px; align-items:center; }
@media (min-width:860px) { .held-innen { grid-template-columns:1.1fr 0.9fr; padding-top:16px; } }
.dachzeile { text-transform:uppercase; letter-spacing:0.12em; font-size:0.8rem; color:var(--muted); margin:0 0 12px; }
h1 { font-size:clamp(2.1rem, 5vw, 3.3rem); line-height:1.08; letter-spacing:-0.025em; margin:0 0 18px; }
.lead { font-size:1.15rem; color:var(--muted); margin:0 0 24px; max-width:36em; }
.knopf { display:inline-block; background:var(--rot); color:var(--auf-farbe); text-decoration:none; font-weight:650; padding:12px 20px; border-radius:999px; white-space:nowrap; }
.knopf:hover { filter:brightness(1.07); }
.knopf.violett { background:var(--violett); }
.bild { width:100%; height:auto; max-width:440px; justify-self:center; }

.abschnitt { padding:56px 0; }
.hell { background:var(--hell); }
h2 { font-size:1.35rem; margin:0 0 14px; }
h2.gross { font-size:clamp(1.6rem, 3.4vw, 2.1rem); letter-spacing:-0.02em; line-height:1.2; }
.raster { display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); margin-top:24px; }
.karte { background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--radius); padding:22px; }
.karte h3 { margin:14px 0 6px; font-size:1.12rem; }
.karte p { margin:0; color:var(--muted); font-size:0.97rem; }
.symbol { display:grid; place-items:center; width:46px; height:46px; border-radius:12px; background:color-mix(in srgb, var(--rot) 12%, transparent); }
.symbol svg { width:24px; height:24px; fill:none; stroke:var(--rot); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

.supportbox { display:grid; gap:20px; align-items:center; background:var(--flaeche); border:1px solid var(--linie); border-left:6px solid var(--violett); border-radius:var(--radius); padding:28px; }
@media (min-width:860px) { .supportbox { grid-template-columns:1fr auto; } }
.supportbox p { margin:0; max-width:40em; }
.supportbox .dachzeile { color:var(--violett); }

.kontakt { display:grid; gap:32px; }
@media (min-width:860px) { .kontakt { grid-template-columns:1fr 1.4fr; } }
.adresse { font-size:1.1rem; margin:0; }
.familie { display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); }
.firma { display:flex; flex-direction:column; gap:4px; background:var(--flaeche); border:1px solid var(--linie); border-top:5px solid var(--c); border-radius:var(--radius); padding:20px; text-decoration:none; color:var(--text); }
.firma span { color:var(--muted); font-size:0.95rem; }
.firma.hi { --c:var(--violett); } .firma.hb { --c:var(--anthrazit); } .firma.gy { --c:var(--blau); }
.firma:hover { border-color:var(--c); }

.fuss { border-top:1px solid var(--linie); padding:28px 0 40px; color:var(--muted); font-size:0.9rem; }
.fuss p { margin:4px 0; }
.supportaktion { display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.textlink { color:var(--violett); font-weight:600; text-decoration:none; padding-left:4px; }
.textlink:hover { text-decoration:underline; }
.adresse.klein { font-size:0.98rem; color:var(--muted); margin-top:16px; }
.adresse a { color:var(--text); font-weight:600; text-decoration:none; }
@media (max-width:520px) { nav { display:none; } .marke img { height:34px; } }