/* kubeclinic | Stil fuer Impressum und Datenschutz
   Gleiche Gestaltung wie die Startseite (entwurf-dark.html): Inter, weisser
   Grund, schwebende Leiste oben, dunkler Footer mit dem Verlauf der
   farbigen Karten. */
:root{
  --bg:#ffffff;
  --ink:#16120f;
  --muted:rgba(22,18,15,.66);
  --muted-2:rgba(22,18,15,.46);
  --line:rgba(22,18,15,.10);
  --accent:#ff8a3d;
  --accent-rgb:255,138,61;
  --accent-text:#c9451a;
  --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#1a0d05}

/* Nur fuer Screenreader sichtbar (Wortmarke ohne i-Punkte) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.marke{white-space:nowrap}

/* Buttons */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 22px;border-radius:999px;font-size:.9rem;font-weight:600;letter-spacing:-.012em;white-space:nowrap;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn-dunkel{background:var(--ink);color:#fff;box-shadow:0 10px 30px -14px rgba(0,0,0,.35)}
.btn-hell{background:#f7f4f0;color:#0a0908}
.btn::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,150,70,.35) 50%,transparent 70%);
  transform:translateX(-130%);transition:transform .75s var(--ease)}
.btn:hover::after{transform:translateX(130%)}

/* Kopfleiste: schwebende, halb durchsichtige Pille wie auf der Startseite */
.hdr{position:sticky;top:0;z-index:50;padding:12px 0}
.hdr-in{width:calc(100% - 32px);max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:10px 10px 10px 26px;border-radius:999px;background:rgba(250,249,247,.62);border:1px solid rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 12px 34px -14px rgba(22,18,15,.22)}
.brand{font-weight:700;letter-spacing:-.04em;font-size:1.08rem}

/* Inhalt */
.wrap{width:100%;max-width:820px;margin:0 auto;padding:0 24px}
main{padding:56px 0 100px}
.back{display:flex;width:fit-content;align-items:center;gap:9px;margin-bottom:34px;padding:9px 16px;border-radius:999px;
  border:1px solid var(--line);font-size:.88rem;font-weight:600;letter-spacing:-.02em;color:var(--muted);
  transition:color .25s var(--ease), border-color .25s var(--ease), transform .3s var(--ease)}
.back:hover{color:var(--ink);border-color:rgba(22,18,15,.25);transform:translateX(-3px)}
.back svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}
main h1{margin:14px 0 8px;font-size:clamp(2rem,4.4vw,3.4rem);font-weight:600;line-height:1.05;letter-spacing:-.055em;color:#000}
main h2{margin:44px 0 12px;font-size:clamp(1.15rem,1.8vw,1.4rem);font-weight:600;letter-spacing:-.035em;line-height:1.25;color:#000}
main p,main li{font-size:1rem;line-height:1.75;color:var(--muted);margin:0 0 14px}
main .intro{font-size:.9rem;color:var(--muted-2)}
main address{font-style:normal}
main ul{margin:0 0 18px;padding-left:20px}
main li{margin-bottom:6px}
main li::marker{color:var(--accent)}
main a{color:var(--accent-text);text-decoration:underline;text-decoration-color:rgba(var(--accent-rgb),.4);text-underline-offset:3px;transition:text-decoration-color .25s var(--ease)}
main a:hover{text-decoration-color:currentColor}
main a.back{color:var(--muted);text-decoration:none}

/* Footer: dunkler Grund mit dem Licht der farbigen Karten aus der unteren
   linken Ecke. Die Ellipse hat feste Masse, damit sie wie in der Karte
   wirkt und nicht zu einem flachen Band gezogen wird. */
.foot{position:relative;overflow:hidden;color:#f7f4f0;padding:34px 0 26px;
  background:
    radial-gradient(640px 330px at 100% 0%, rgba(255,150,70,.22), transparent 60%),
    radial-gradient(1000px 360px at 0% 100%, #ffc27a 0%, #ff7a22 16%, #d8391a 34%, #5a160b 58%, #1c0906 80%, #120605 100%);
  background-color:#120605}
.foot-in{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px;text-shadow:0 1px 14px rgba(10,4,2,.55)}
.foot-top{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;align-items:flex-start}
.foot-brand .brand{font-size:1.08rem}
.foot-brand p{margin:12px 0 0;font-size:.86rem;color:rgba(247,244,240,.72)}
.foot-cols{display:flex;gap:56px;flex-wrap:wrap}
.foot-col h4{margin:0 0 14px;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,244,240,.45)}
.foot-col a{display:block;font-size:.88rem;color:rgba(247,244,240,.72);padding:4px 0;transition:color .25s}
.foot-col a:hover{color:#ffbe7d}
.foot-col .btn{display:inline-flex;margin-top:14px;padding:12px 20px;font-size:.88rem;color:#0a0908;text-shadow:none}
.foot-col .btn:hover{color:#0a0908}
.foot-bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:26px;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08);font-size:.8rem;color:rgba(247,244,240,.6)}
.foot-bot a:hover{color:#ffbe7d}

@media (max-width:640px){
  .wrap,.foot-in{padding:0 18px}
  .hdr-in{padding-left:20px}
  .hdr .btn{padding:10px 16px;font-size:.84rem}
  main{padding:36px 0 70px}
  .foot-cols{gap:30px;width:100%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important}
}