/* ══════════════════════════════════════════════════════════════════════════
   urqivo WEBSITES — Blatt für Impressum und Datenschutzerklärung.

   Warum eine eigene Datei und nicht inline wie die fünf Hauptseiten: Diese
   beiden Seiten teilen ihr ganzes Aussehen, sie ändern sich selten, und sie
   entstehen nicht aus `websites-quelle.html`. Zweimal dasselbe Blatt inline
   zu pflegen wäre die schlechtere Wahl.
   ⚠ Das ist KEINE Fremdanfrage — die Datei liegt neben den Seiten auf
     demselben Server. Die Zusage „lädt nichts von fremden Servern" gilt
     unverändert.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --blue:#00c257;--blue2:#00a848;--teal:#00e879;--teal-text:#5ff2a0;
  --nav2:#eaf7ee;--text:#e8f6ec;--muted:#9ec0aa;
  --surface:rgba(255,255,255,.055);--line:rgba(120,255,180,.17);
  --max:1180px;--navh:74px;
}
*{box-sizing:border-box}
html,body{overflow-x:clip}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);line-height:1.6;background:#04150c}
a{color:var(--teal-text)}
.container{width:min(var(--max),calc(100% - 40px));margin:auto}

/* ── Kopfleiste: dieselbe wie im Auftritt ────────────────────────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(4,21,12,.86);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(120,255,180,.16);box-shadow:0 6px 24px rgba(0,0,0,.35)}
.nav-inner{min-height:var(--navh);display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:1.22rem;
  letter-spacing:-.02em;color:#eaf7ee;text-decoration:none}
.brand b{font-weight:900;background:linear-gradient(90deg,var(--teal),#9ff9c6);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.nav-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:0 18px;
  border-radius:14px;border:1px solid transparent;font-weight:700;font-size:.93rem;
  text-decoration:none;cursor:pointer;transition:.2s ease}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--blue);color:#03140a;box-shadow:0 12px 26px rgba(0,201,79,.28)}
.btn-primary:hover{background:var(--teal)}
.nav-zurueck{font-size:.86rem;font-weight:700;color:#8fb9a0;white-space:nowrap;text-decoration:none}
.nav-zurueck:hover{color:#c8f5da}
@media(max-width:620px){
  .brand{font-size:1.02rem}
  .nav-zurueck{display:none}
  .btn{min-height:40px;padding:0 13px;font-size:.87rem}
}

/* ── Kopf der Rechtsseite ────────────────────────────────────────────── */
.rkopf{padding:calc(var(--navh) + 62px) 0 30px;text-align:center;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#062a17 0%,#04150c 100%)}
.rkopf .marke{margin:0 0 12px;font-size:.72rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--teal-text)}
.rkopf h1{margin:0 0 12px;font-size:clamp(1.8rem,3.4vw,2.5rem);font-weight:800;
  line-height:1.1;letter-spacing:-.03em;color:#f2fbf5}
.rkopf p{margin:0 auto;max-width:620px;color:#c3e3ce;font-size:1.02rem}

/* ── Inhalt ──────────────────────────────────────────────────────────── */
main{padding:46px 0 70px}
main .container{max-width:820px}
h2{margin:38px 0 12px;font-size:1.24rem;letter-spacing:-.02em;color:#f2fbf5}
h2:first-of-type{margin-top:0}
h3{margin:22px 0 8px;font-size:1.02rem;color:var(--nav2)}
p,li{color:var(--muted);font-size:.97rem}
p{margin:0 0 14px}
ul{margin:0 0 14px;padding-left:22px}
li{margin-bottom:7px}
b,strong{color:var(--nav2)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
  background:rgba(255,255,255,.07);border-radius:5px;padding:1px 5px;color:#c8f5da}
address{font-style:normal;color:var(--muted);margin:0 0 16px}
/* Ein Kasten für das, was man beim Überfliegen mitnehmen soll. */
.merk{margin:0 0 22px;border-radius:15px;padding:17px 20px;
  background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.13)}
@supports (backdrop-filter:blur(1px)){
  .merk{background:rgba(255,255,255,.05);
    -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2)}
}
.merk p:last-child{margin-bottom:0}
.stand{margin-top:40px;padding-top:18px;border-top:1px solid var(--line);
  font-size:.88rem;color:#7f9d8a}

/* ── Fußzeile ────────────────────────────────────────────────────────── */
footer{padding:44px 0 46px;color:#9ec0aa;
  background:linear-gradient(180deg,#0a3c26 0%,#03130a 100%)}
.footer-inner{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.14);padding-top:24px}
.footer-brand{font-weight:800;color:#eaf7ee}
.footer-brand small{display:block;color:#8fb9a0;font-weight:600;font-size:.8rem;margin-top:2px}
.footer-meta{font-size:.9rem;color:#9ec0aa;text-align:right}
.footer-meta a{color:#5ff2a0;font-weight:700;text-decoration:none}
@media(max-width:640px){
  .container{width:min(100% - 24px,var(--max))}
  .footer-inner{flex-direction:column}
  .footer-meta{text-align:left}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn:hover{transform:none}
}