/* CCRI-Look (carbon-ratings.com): Navy #283044, Tuerkis #38AECC, Hintergrund #F3F8F9, Roboto */
@font-face { font-family:"Roboto"; font-weight:400; font-display:swap; src:url(/ccri/roboto-regular.woff2) format("woff2"); }
@font-face { font-family:"Roboto"; font-weight:500; font-display:swap; src:url(/ccri/roboto-500.woff2) format("woff2"); }
@font-face { font-family:"Roboto"; font-weight:700; font-display:swap; src:url(/ccri/roboto-700.woff2) format("woff2"); }

:root {
  --navy:#283044; --accent:#38AECC; --accent-dk:#0088B7; --bg:#F3F8F9; --card:#fff;
  --ink:#283044; --muted:#6b7686; --line:#dde7eb; --ok:#1a9e4b; --bad:#d23a2a;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --shadow: 0 1px 2px rgba(40,48,68,.06), 0 4px 14px rgba(40,48,68,.07);
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { margin:0; font-family:"Roboto", system-ui, sans-serif; background:var(--bg); color:var(--ink); min-height:100vh; }

/* Kopf: Navy mit den flachen Dreiecksflaechen der Firmenseite */
.hero { background:var(--navy); color:#fff; padding:16px 16px 26px; position:relative; overflow:hidden;
  background-image:
    linear-gradient(150deg, rgba(255,255,255,.045) 0 30%, transparent 30%),
    linear-gradient(210deg, rgba(255,255,255,.035) 0 22%, transparent 22%),
    linear-gradient(330deg, rgba(255,255,255,.03) 0 26%, transparent 26%); }
.hero-in, .wrap { max-width:480px; margin:0 auto; }
.wrap { padding:16px 16px 40px; }
.bar { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.logo { display:block; line-height:0; }
.logo svg { height:32px; width:auto; }
.hero h1 { font-weight:500; font-size:34px; line-height:1.12; margin:26px 0 0; letter-spacing:-.01em; }
.hero h1 span { color:var(--accent); }
.hero .sub { color:rgba(255,255,255,.72); font-size:15px; line-height:1.45; margin:8px 0 0; }
.hero a { color:#fff; }

.langs { display:flex; border:1.5px solid var(--accent); border-radius:64px; overflow:hidden; }
.langs button { all:unset; padding:5px 11px; font-weight:500; font-size:12px; cursor:pointer; color:#fff; }
.langs button.on { background:var(--accent); }

.online { display:inline-flex; align-items:center; gap:7px; font-size:13px; color:rgba(255,255,255,.8); margin-top:14px; }
.online i { width:8px; height:8px; border-radius:50%; background:#8a93a3; display:inline-block; }
.online.on i { background:#3ccf7a; animation:ping 1.6s infinite; }
.online.off i { background:var(--bad); }
@keyframes ping { 0% { box-shadow:0 0 0 0 rgba(60,207,122,.55) } 70%,100% { box-shadow:0 0 0 7px rgba(60,207,122,0) } }

.card { background:var(--card); border-radius:14px; box-shadow:var(--shadow); }
h2 { font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 10px; }

.pill { display:block; width:100%; text-align:center; padding:14px; border-radius:64px; border:1.5px solid var(--accent); font:inherit;
  font-weight:500; font-size:15px; background:var(--accent); color:#fff; cursor:pointer; text-decoration:none; }
.pill.ghost { background:transparent; color:var(--accent-dk); }

.foot { text-align:center; font-size:12px; color:var(--muted); margin-top:26px; line-height:1.55; }
.foot a { color:var(--accent-dk); text-decoration:none; }