/* Dermatologisches Prüfinstitut — gemeinsames Stylesheet */

html { scroll-behavior:smooth; }
body { font-family:'Inter',system-ui,sans-serif; color:#101a22; background:#fff; }

/* Raster */
.wrap { max-width:1180px; margin:0 auto; padding-left:22px; padding-right:22px; }
.col  { max-width:760px; }
.sec  { padding-top:72px; padding-bottom:72px; }
@media (min-width:768px){ .sec { padding-top:104px; padding-bottom:104px; } }
.sec-s { padding-top:52px; padding-bottom:52px; }

/* Typografie */
.head { font-family:'Source Serif 4',Georgia,serif; font-weight:600; letter-spacing:-.015em; line-height:1.14; }
.h1 { font-size:clamp(33px,4.6vw,55px); }
.h2 { font-size:clamp(27px,3.4vw,40px); }
.h3 { font-size:clamp(19px,1.6vw,22px); }
.kicker { font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:#1878a8; }
.lede { font-size:clamp(17.5px,1.8vw,21px); line-height:1.6; color:#485865; font-weight:300; }
p.body { font-size:17px; line-height:1.72; color:#485865; }

/* Fließtext in Artikeln */
.prose h2 { font-family:'Source Serif 4',Georgia,serif; font-weight:600; font-size:clamp(23px,2.4vw,30px); line-height:1.25; margin-top:52px; margin-bottom:16px; color:#101a22; }
.prose h3 { font-family:'Source Serif 4',Georgia,serif; font-weight:600; font-size:20px; line-height:1.3; margin-top:34px; margin-bottom:11px; color:#101a22; }
.prose p { font-size:17px; line-height:1.75; color:#485865; margin-bottom:1.15rem; }
.prose ul, .prose ol { margin:0 0 1.3rem; padding-left:23px; }
.prose ul { list-style:disc; } .prose ol { list-style:decimal; }
.prose li { font-size:17px; line-height:1.7; color:#485865; margin-bottom:.55rem; }
.prose strong { color:#101a22; font-weight:600; }
.prose a { color:#1878a8; text-decoration:underline; text-underline-offset:2px; }

/* Buttons */
.btn { display:inline-block; background:#0d3a57; color:#fff; padding:15px 30px; border-radius:5px; font-weight:600; font-size:14.5px; transition:background .15s; }
.btn:hover { background:#092a40; }
.btn-ghost { background:transparent; color:#0d3a57; border:1.5px solid #c3d4de; }
.btn-ghost:hover { background:#eef4f8; }
.btn-light { background:#1878a8; }
.btn-light:hover { background:#12658f; }

/* Karten */
.svc { background:#fff; border:1px solid #dde5eb; border-radius:7px; padding:30px 28px; height:100%; display:flex; flex-direction:column; transition:border-color .15s, box-shadow .15s; }
.svc:hover { border-color:#1878a8; box-shadow:0 12px 32px -20px rgba(13,58,87,.4); }
.svc .no { font-size:11.5px; letter-spacing:.18em; font-weight:600; color:#1878a8; margin-bottom:14px; }
.svc h3 { font-family:'Source Serif 4',Georgia,serif; font-size:21px; font-weight:600; line-height:1.25; margin-bottom:11px; }
.svc p { font-size:15.5px; line-height:1.65; color:#485865; }
.svc .meta { margin-top:auto; padding-top:15px; border-top:1px solid #eef2f5; font-size:13px; color:#7b8a95; }

.card { background:#fff; border:1px solid #dde5eb; border-radius:7px; padding:26px; }
.card-tint { background:#f5f8fa; border:1px solid #e4ecf1; border-radius:7px; padding:26px 28px; }

/* Hinweisbox */
.note { background:#eef4f8; border-left:3px solid #1878a8; padding:20px 24px; border-radius:0 6px 6px 0; margin:28px 0; }
.note p { font-size:16px; line-height:1.68; color:#3c5364; margin:0; }
.note p + p { margin-top:.8rem; }
.note .lbl { font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:#1878a8; display:block; margin-bottom:9px; }

.todo { background:#fff8e6; border-left:3px solid #d99a1c; padding:15px 19px; border-radius:0 5px 5px 0; margin:12px 0; font-size:15px; line-height:1.6; color:#6b5215; }

/* Prozess */
.step { display:grid; grid-template-columns:56px 1fr; gap:20px; padding-bottom:34px; position:relative; }
.step:not(:last-child)::before { content:""; position:absolute; left:27px; top:52px; bottom:0; width:1px; background:#dde5eb; }
.step .num { width:54px; height:54px; border-radius:50%; border:1.5px solid #1878a8; color:#0d3a57; display:flex; align-items:center; justify-content:center; font-family:'Source Serif 4',serif; font-size:19px; font-weight:600; background:#fff; position:relative; z-index:1; }
.step h3 { font-family:'Source Serif 4',Georgia,serif; font-size:20px; font-weight:600; margin-bottom:7px; padding-top:13px; }
.step p { font-size:16px; line-height:1.68; color:#485865; }

/* Parameterliste */
.param { border-left:2px solid #1878a8; padding:3px 0 3px 20px; }
.param dt { font-weight:600; font-size:16px; margin-bottom:4px; }
.param dd { font-size:15px; line-height:1.6; color:#485865; }

/* Kennzahlenband */
.fact { border-top:1px solid rgba(255,255,255,.18); padding-top:20px; }
.fact b { display:block; font-family:'Source Serif 4',serif; font-size:clamp(30px,3.6vw,42px); font-weight:600; line-height:1; margin-bottom:8px; color:#fff; }
.fact span { font-size:14.5px; color:#a8c4d6; line-height:1.5; display:block; }

/* Tabelle */
.tbl-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid #dde5eb; border-radius:7px; margin:26px 0; }
table.tbl { width:100%; border-collapse:collapse; min-width:560px; background:#fff; }
table.tbl th { background:#0d3a57; color:#fff; font-size:13px; font-weight:600; text-align:left; padding:14px 16px; letter-spacing:.02em; }
table.tbl td { padding:14px 16px; font-size:15px; line-height:1.6; color:#485865; border-top:1px solid #eef2f5; vertical-align:top; }
table.tbl tbody tr:nth-child(even) { background:#fafcfd; }

/* Navigation */
.navlink { font-size:14.5px; font-weight:500; color:#485865; transition:color .15s; }
.navlink:hover { color:#0d3a57; }
.navlink.on { color:#0d3a57; font-weight:600; }

/* Artikelkarten */
.art { display:block; background:#fff; border:1px solid #dde5eb; border-radius:7px; padding:26px 26px 24px; height:100%; transition:border-color .15s, box-shadow .15s; }
.art:hover { border-color:#1878a8; box-shadow:0 12px 32px -20px rgba(13,58,87,.4); }
.art .tag { font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:#1878a8; }
.art h3 { font-family:'Source Serif 4',Georgia,serif; font-size:20px; font-weight:600; line-height:1.28; margin:12px 0 10px; color:#101a22; }
.art p { font-size:15px; line-height:1.62; color:#485865; }
.art .more { margin-top:16px; font-size:13.5px; font-weight:600; color:#1878a8; }

/* Umbruch und Bilder */
h1,h2,h3,h4,.head { overflow-wrap:break-word; hyphens:auto; }
p,li,dd,dt,td,th,summary { overflow-wrap:break-word; }
img,svg { max-width:100%; height:auto; }

@media (max-width:639px){
  .sec { padding-top:56px; padding-bottom:56px; }
  .svc { padding:24px 21px; }
  .card, .card-tint { padding:22px 20px; }
  .note { padding:17px 19px; }
  .step { grid-template-columns:44px 1fr; gap:15px; padding-bottom:28px; }
  .step .num { width:42px; height:42px; font-size:16px; }
  .step:not(:last-child)::before { left:21px; top:44px; }
  .step h3 { padding-top:8px; font-size:18px; }
  p.body, .prose p, .prose li { font-size:16px; }
  .btn { padding:14px 24px; font-size:14px; }
}