@charset "UTF-8";
/* ===========================================================================
   KredMed  ·  kredmed.de  ·  Beschaffung fuer Praxen, MVZ und Kliniken
   Schwestermarke von kredus.de. Farben, Schriften, Radien und Abstaende sind
   bewusst identisch mit dem Kredus-Design-System (assets/kredus.css), damit
   der Wechsel zwischen beiden Seiten nicht wie ein Markenbruch wirkt.
   Schriften liegen lokal, es werden keine externen Ressourcen geladen.
   Erstellt 2026-09-17.
   ========================================================================= */

@font-face{
  font-family:"Hanken Grotesk";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("fonts/hanken-grotesk-var.woff2") format("woff2");
}
@font-face{
  font-family:"Newsreader";font-style:normal;font-weight:200 800;font-display:swap;
  src:url("fonts/newsreader-var.woff2") format("woff2");
}

:root{
  color-scheme:light;
  --brand-950:#08201A; --brand-900:#0C3227; --brand-800:#244C3E; --brand-700:#2E5D4E;
  --brand-600:#345F4C;  --brand-500:#3E8C6F; --brand-400:#5AA07E; --brand-300:#8FC1AB;
  --brand-200:#BFDDD0;  --brand-100:#DEEEE6; --brand-050:#EFF6F2;
  --ground:#F5F2EA; --surface:#EFEBDF; --surface-2:#FCFAF4; --warm:#F1ECE0;
  --ink:#16263D; --ink-soft:#34425A; --muted:#6B6A5E; --muted-2:#8A897D;
  --line:#E5DFD1; --line-soft:#EFEBDF;

  --font:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,Arial,sans-serif;
  --font-serif:"Newsreader",Georgia,"Times New Roman",serif;
  --font-num:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --fs-xs:.8125rem; --fs-sm:.9375rem; --fs-base:1.0625rem;
  --fs-h3:clamp(1.14rem,1.08rem + .25vw,1.28rem);
  --fs-h2:clamp(1.6rem,1.28rem + 1.35vw,2.3rem);
  --fs-h1:clamp(2rem,1.42rem + 2.4vw,3.15rem);
  --lh-body:1.62; --lh-read:1.75;

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px;
  --s-6:24px; --s-7:32px; --s-8:40px; --s-9:56px; --s-10:72px;
  --sec-y:clamp(56px,7vw,92px);
  --r-xs:6px; --r-sm:10px; --r:14px; --r-lg:20px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(15,37,48,.05),0 1px 1px rgba(15,37,48,.03);
  --sh-2:0 2px 4px rgba(15,37,48,.04),0 10px 22px -10px rgba(15,37,48,.14);
  --sh-3:0 4px 10px rgba(15,37,48,.05),0 20px 40px -14px rgba(15,37,48,.20);
  --sh-brand:0 8px 18px -12px rgba(20,60,50,.30);
  --maxw:1120px; --maxw-text:70ch;
  --ease:cubic-bezier(.22,.68,.32,1);
}

/* == Basis =============================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:92px}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--font);font-size:var(--fs-base);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;
}
img,svg{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--brand-400);outline-offset:3px;border-radius:4px}
::selection{background:var(--brand-100);color:var(--brand-900)}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(18px,4vw,28px);width:100%}
section{padding-block:var(--sec-y)}
.tint{background:var(--surface)}
.warm{background:var(--warm)}
.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}

/* == Kopf und Navigation ================================================= */
.kopf{
  position:sticky;top:0;z-index:40;background:rgba(252,250,244,.92);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line);
}
.kopf .wrap{display:flex;align-items:center;gap:var(--s-5);min-height:68px;flex-wrap:wrap}
.marke{display:inline-flex;align-items:baseline;font-family:var(--font-serif);
  font-weight:600;font-size:1.5rem;letter-spacing:-.005em;color:var(--ink);line-height:1}
.marke i{display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--brand-700);margin-left:4px}
.marke-zusatz{display:block;font-family:var(--font);font-size:.68rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.nav{display:flex;gap:var(--s-5);margin-left:auto;flex-wrap:wrap}
.nav a{font-size:var(--fs-sm);font-weight:600;color:var(--ink-soft);padding-block:6px;
  border-bottom:2px solid transparent}
.nav a:hover{color:var(--brand-700);border-bottom-color:var(--brand-300)}
.nav a.zurueck{color:var(--muted)}
@media (max-width:860px){
  .kopf .wrap{padding-block:12px}
  .nav{width:100%;margin-left:0;gap:var(--s-5);flex-wrap:nowrap;overflow-x:auto;
    padding-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    /* am Rand ausblenden, damit sichtbar ist, dass die Reihe weitergeht */
    mask-image:linear-gradient(90deg,#000 88%,transparent);
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap}
}

/* == Typografie ========================================================== */
h1,h2,h3{font-family:var(--font-serif);font-weight:500;color:var(--ink);letter-spacing:-.012em}
h1{font-size:var(--fs-h1);line-height:1.12;margin:0 0 var(--s-4);font-weight:400}
h2{font-size:var(--fs-h2);line-height:1.2;margin:0 0 var(--s-4)}
h3{font-size:var(--fs-h3);line-height:1.3;margin:0 0 var(--s-3);font-weight:600}
p{margin:0 0 var(--s-4);line-height:var(--lh-read)}
.lead{font-size:1.16rem;color:var(--ink-soft);max-width:62ch;line-height:1.6}
.prose{max-width:var(--maxw-text)}
.prose ul,.prose ol{padding-left:22px;margin:0 0 var(--s-4)}
.prose li{margin-bottom:10px}
.prose a,.inline-link{color:var(--brand-700);font-weight:600;text-decoration:underline}
.prose a:hover,.inline-link:hover{color:var(--brand-800)}
.augenbraue{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand-700);margin:0 0 var(--s-3)}

/* == Schaltflaechen ====================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:13px 24px;border:1px solid transparent;border-radius:var(--r-sm);
  font-family:var(--font);font-size:var(--fs-sm);font-weight:700;cursor:pointer;
  transition:background .18s var(--ease),transform .18s var(--ease)}
.btn-voll{background:var(--brand-700);color:#fff;box-shadow:var(--sh-brand)}
.btn-voll:hover{background:var(--brand-800);transform:translateY(-1px)}
.btn-linie{background:var(--ground);color:var(--brand-800);border-color:var(--line)}
.btn-linie:hover{border-color:var(--brand-300);background:var(--brand-050)}
.btn-weiss{background:#fff;color:var(--brand-800)}
.btn-weiss:hover{transform:translateY(-1px)}
.btn-geist{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-geist:hover{background:rgba(255,255,255,.1)}
.btn-reihe{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-6)}

/* == Auftakt ============================================================= */
.auftakt{
  padding-block:clamp(48px,6vw,84px);
  background:linear-gradient(180deg,var(--brand-050),var(--ground) 72%);
  border-bottom:1px solid var(--line);
}
.auftakt .lead{margin-bottom:0}
.auftakt-gitter{display:grid;grid-template-columns:1fr;gap:var(--s-8);align-items:center}
@media (min-width:920px){.auftakt-gitter{grid-template-columns:1.15fr .85fr;gap:var(--s-10)}}
.auftakt-karte{
  background:var(--brand-900);color:var(--ground);border-radius:var(--r-lg);
  padding:clamp(22px,3vw,32px);box-shadow:var(--sh-3);
}
.auftakt-karte h2{color:#fff;font-size:1.28rem;margin-bottom:var(--s-4)}
.auftakt-karte ol{margin:0;padding-left:20px}
.auftakt-karte li{margin-bottom:var(--s-3);color:rgba(245,242,234,.86);font-size:var(--fs-sm);line-height:1.6}
.auftakt-karte li:last-child{margin-bottom:0}
.auftakt-karte li b{color:#fff;font-weight:700}
.auftakt-karte li::marker{color:var(--brand-300);font-weight:700}

/* == Karten und Raster =================================================== */
.raster{display:grid;gap:var(--s-5);grid-template-columns:1fr}
@media (min-width:680px){.raster-2{grid-template-columns:1fr 1fr}}
@media (min-width:860px){.raster-3{grid-template-columns:repeat(3,1fr)}}
.karte{
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(20px,2.6vw,26px);box-shadow:var(--sh-1);min-width:0;
}
.karte h3{margin-bottom:var(--s-2)}
.karte p:last-child{margin-bottom:0}
.karte .zahl{
  font-family:var(--font-serif);font-size:1.9rem;color:var(--brand-700);
  display:block;line-height:1.1;margin-bottom:6px;
}
.ic{
  width:44px;height:44px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--brand-050);border:1px solid var(--brand-100);color:var(--brand-700);
  margin-bottom:var(--s-4);
}
.ic svg{width:24px;height:24px}

/* Abschnitt mit Text links, Karte rechts */
.zweispalt{display:grid;grid-template-columns:1fr;gap:var(--s-7);align-items:start}
@media (min-width:920px){.zweispalt{grid-template-columns:1.1fr .9fr;gap:var(--s-9)}}

.liste-haken{list-style:none;padding:0;margin:0}
.liste-haken li{
  position:relative;padding-left:30px;margin-bottom:var(--s-3);
  font-size:var(--fs-sm);line-height:1.6;color:var(--ink-soft);
}
.liste-haken li::before{
  content:"";position:absolute;left:0;top:7px;width:16px;height:16px;border-radius:50%;
  background:var(--brand-100);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E5D4E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.6 4.4 4.4 9.2-10'/%3E%3C/svg%3E");
  background-size:11px;background-position:center;background-repeat:no-repeat;
}

/* == Hinweisband ========================================================= */
.einordnung{
  background:var(--brand-050);border:1px solid var(--brand-100);border-left:3px solid var(--brand-500);
  border-radius:var(--r-sm);padding:var(--s-5) var(--s-6);margin-top:var(--s-6);
}
.einordnung p{margin:0;font-size:var(--fs-sm);color:var(--ink-soft)}
.einordnung strong{color:var(--brand-800)}

/* == FAQ ================================================================= */
.faq details{
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
  margin-bottom:var(--s-3);overflow:hidden;
}
.faq details[open]{border-color:var(--brand-200);box-shadow:var(--sh-1)}
.faq summary{
  display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);
  padding:16px 20px;font-weight:700;cursor:pointer;list-style:none;color:var(--ink);
  font-size:var(--fs-sm);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--brand-600);font-weight:600;font-size:1.4rem;line-height:1;flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq summary:hover{background:var(--surface)}
.faq p{margin:0;padding:0 20px 18px;color:var(--muted);max-width:72ch;font-size:var(--fs-sm)}

/* == Abschlussband ======================================================= */
.band{
  background:var(--brand-900);color:#fff;border-radius:var(--r-lg);
  padding:clamp(26px,3.4vw,44px);
}
.band h2{color:#fff}
.band p{color:rgba(255,255,255,.85);max-width:60ch}
.kontaktreihe{
  display:grid;gap:var(--s-4);grid-template-columns:1fr;margin-top:var(--s-7);
  padding-top:var(--s-6);border-top:1px solid rgba(245,242,234,.25);
}
@media (min-width:620px){.kontaktreihe{grid-template-columns:1fr 1fr}}
.kp{border:1px solid rgba(245,242,234,.28);border-radius:var(--r-sm);padding:var(--s-4)}
.kp .n{font-family:var(--font-serif);font-size:1.12rem;color:#fff;display:block;line-height:1.25}
.kp .r{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-300);
  font-weight:700;margin:2px 0 8px}
.kp a{display:block;color:rgba(255,255,255,.9);font-size:var(--fs-sm);line-height:1.8}
.kp a:hover{color:var(--brand-200);text-decoration:underline}

/* == Fuss ================================================================ */
.fuss{background:var(--brand-950);color:rgba(245,242,234,.72);padding-block:var(--s-8)}
.fuss .wrap{display:grid;gap:var(--s-5);grid-template-columns:1fr}
@media (min-width:760px){.fuss .wrap{grid-template-columns:1.3fr 1fr;align-items:start}}
.fuss .marke{color:#fff}
.fuss p{font-size:var(--fs-xs);margin:var(--s-3) 0 0;max-width:52ch;line-height:1.65}
.fuss-links{display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:flex-start}
.fuss-links a{font-size:var(--fs-sm);color:rgba(245,242,234,.86)}
.fuss-links a:hover{color:#fff;text-decoration:underline}

/* == Rechtstexte ========================================================= */
.recht{padding-block:var(--s-9)}
.recht h2{font-size:1.28rem;margin-top:var(--s-8)}
.recht h2:first-of-type{margin-top:0}
.recht dl{margin:0 0 var(--s-4);display:grid;grid-template-columns:1fr;gap:2px var(--s-5)}
@media (min-width:620px){.recht dl{grid-template-columns:200px 1fr}}
.recht dt{font-weight:700;color:var(--ink);font-size:var(--fs-sm);padding-top:6px}
.recht dd{margin:0;color:var(--ink-soft);font-size:var(--fs-sm);padding-top:6px}
.recht p,.recht li{font-size:var(--fs-sm);color:var(--ink-soft)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}