/* ============================================================
   APOTHEKEN REPORT — Magazin für Gesundheit
   Gemeinsames Stylesheet · stabil, ohne externe Abhängigkeiten
   (Webfonts mit Fallback). Eigene Marke: Serif-Magazin + Apotheke-Rot.
   ============================================================ */

:root{
  --paper:#FBF7EF;        /* warmes Papier (Seitenbasis)   */
  --paper-2:#F4ECDD;      /* leicht dunkler für Sektionen  */
  --white:#FFFFFF;
  --ink:#1B241F;          /* Haupttext                     */
  --muted:#5E6B63;        /* sekundärer Text               */
  --line:#E7DFCF;         /* Haarlinien                    */
  --line-2:#D8CFBC;

  --red:#C0392B;          /* Apotheke-Rot (Akzent/Marke)   */
  --red-d:#9C2B20;
  --green:#0F6E68;        /* Heil-Grün (Vertrauen)         */
  --green-d:#0B403C;
  --gold:#B9852A;         /* Sterne / Tipp-Akzent          */

  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  --wrap:1180px;
  --radius:14px;
  --shadow:0 1px 2px rgba(27,36,31,.05),0 8px 26px rgba(27,36,31,.06);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.12;
  letter-spacing:-.01em;margin:0;color:var(--ink);}
p{margin:0 0 1em;}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px;}
@media(max-width:600px){.wrap{padding:0 17px;}}

.eyebrow{font-family:var(--sans);font-weight:700;font-size:12.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--red);}
.muted{color:var(--muted);}
.center{text-align:center;}

/* focus / a11y */
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:3px solid color-mix(in srgb,var(--green) 55%,white);outline-offset:2px;border-radius:4px;}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}}

/* ============================ HEADER ============================ */
.utilitybar{background:var(--green-d);color:#EAF2EF;font-size:13px;}
.utilitybar .wrap{display:flex;gap:22px;align-items:center;
  justify-content:center;padding-top:7px;padding-bottom:7px;flex-wrap:wrap;line-height:1;}
.utilitybar span{display:inline-flex;gap:7px;align-items:center;white-space:nowrap;}
.utilitybar svg{width:15px;height:15px;flex:0 0 15px;}
@media(max-width:680px){
  .utilitybar .wrap{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    gap:18px;padding:7px 17px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .utilitybar .wrap::-webkit-scrollbar{display:none;}
}

.masthead{background:var(--white);border-bottom:1px solid var(--line);}
.masthead .wrap{display:flex;align-items:center;gap:26px;min-height:86px;}
.brand{display:flex;align-items:center;gap:13px;flex:0 0 auto;}
.brand .amark{width:46px;height:46px;border-radius:11px;background:var(--red);
  display:grid;place-items:center;box-shadow:0 3px 10px rgba(192,57,43,.28);flex:0 0 46px;}
.brand .amark svg{width:30px;height:30px;}
.brand .wordmark{line-height:1;}
.brand .wordmark .n{font-family:var(--serif);font-weight:600;font-size:23px;
  letter-spacing:.005em;color:var(--ink);display:block;}
.brand .wordmark .t{font-family:var(--sans);font-weight:600;font-size:11px;
  letter-spacing:.17em;text-transform:uppercase;color:var(--green);margin-top:4px;display:block;}
.brand .brandlogo{height:48px;width:auto;display:block;}
@media(max-width:860px){.brand .brandlogo{height:40px;}}

.searchbox{flex:1 1 auto;max-width:520px;position:relative;}
.searchbox input{width:100%;height:46px;border:1.5px solid var(--line-2);
  border-radius:24px;padding:0 50px 0 20px;font-size:15px;background:var(--paper);
  color:var(--ink);font-family:var(--sans);}
.searchbox input::placeholder{color:#9aa39c;}
.searchbox button{position:absolute;right:5px;top:5px;width:36px;height:36px;
  border:0;border-radius:50%;background:var(--green);display:grid;place-items:center;}
.searchbox button svg{width:18px;height:18px;}

.head-icons{display:flex;gap:8px;flex:0 0 auto;}
.head-icons a{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;
  color:var(--green-d);background:var(--paper);border:1px solid var(--line);transition:.15s;}
.head-icons a:hover{background:var(--paper-2);}
.head-icons svg{width:21px;height:21px;}

/* category nav */
.catnav{background:var(--white);border-bottom:1px solid var(--line);}
.catnav .wrap{display:flex;gap:4px;align-items:center;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;}
.catnav .wrap::-webkit-scrollbar{display:none;}
.catnav a{font-size:14.5px;font-weight:600;color:var(--ink);padding:14px 14px;
  white-space:nowrap;border-bottom:3px solid transparent;transition:.15s;}
.catnav a:hover{color:var(--red);}
.catnav a.active{color:var(--red);border-bottom-color:var(--red);}

@media(max-width:860px){
  .masthead .wrap{flex-wrap:wrap;min-height:0;padding-top:14px;padding-bottom:14px;gap:14px;}
  .searchbox{order:3;flex-basis:100%;max-width:none;}
  .head-icons{margin-left:auto;}
}

/* ============================ BUTTONS ============================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-weight:700;font-size:15.5px;border-radius:26px;
  padding:14px 26px;border:2px solid transparent;transition:.16s;}
.btn-primary{background:var(--green);color:#fff;border-color:var(--green);}
.btn-primary:hover{background:#fff;color:var(--green-d);border-color:var(--green);}
.btn-ghost{background:transparent;color:var(--green-d);border-color:var(--line-2);}
.btn-ghost:hover{border-color:var(--green);color:var(--green);}
.btn-soldout{background:var(--paper-2);color:#97907f;border-color:var(--line-2);
  cursor:not-allowed;font-weight:700;}

/* ============================ HERO ============================ */
.hero{background:linear-gradient(180deg,var(--white) 0%,var(--paper) 100%);
  border-bottom:1px solid var(--line);padding:64px 0 58px;}
.hero .wrap{display:grid;grid-template-columns:1.08fr .92fr;gap:54px;align-items:center;}
.hero h1{font-size:clamp(34px,4.6vw,55px);margin:14px 0 0;}
.hero h1 em{font-style:italic;color:var(--red);}
.hero .lede{font-size:19px;color:var(--muted);margin:20px 0 28px;max-width:30em;}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.hero-note{font-size:13.5px;color:var(--muted);margin-top:18px;display:flex;
  gap:8px;align-items:center;}
.hero-note svg{width:17px;height:17px;color:var(--green);flex:0 0 17px;}

.hero-art{position:relative;}
.hero-art .card{background:var(--white);border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--shadow);padding:30px;}
.hero-art svg{width:100%;height:auto;}

@media(max-width:860px){
  .hero{padding:40px 0 38px;}
  .hero .wrap{grid-template-columns:1fr;gap:32px;}
  .hero-art{order:-1;max-width:380px;margin:0 auto;}
}

/* ============================ SERVICE STRIP ============================ */
.services{background:var(--white);border-bottom:1px solid var(--line);}
.services .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0;}
.service{display:flex;gap:14px;align-items:flex-start;padding:26px 24px;
  border-right:1px solid var(--line);}
.services .wrap .service:last-child{border-right:0;}
.service .ic{width:42px;height:42px;border-radius:11px;background:var(--paper-2);
  display:grid;place-items:center;flex:0 0 42px;}
.service .ic svg{width:23px;height:23px;color:var(--green-d);}
.service h4{font-family:var(--sans);font-size:15.5px;font-weight:700;margin:2px 0 3px;}
.service p{font-size:13.5px;color:var(--muted);margin:0;line-height:1.45;}
@media(max-width:760px){.services .wrap{grid-template-columns:1fr 1fr;}
  .service{border-bottom:1px solid var(--line);}
  .service:nth-child(2n){border-right:0;}}
@media(max-width:430px){.services .wrap{grid-template-columns:1fr;}
  .service{border-right:0;}}

/* ============================ SECTION SHELL ============================ */
.section{padding:62px 0;}
.section.alt{background:var(--paper-2);}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;margin-bottom:34px;}
.section-head h2{font-size:clamp(26px,3vw,36px);margin:8px 0 0;}
.section-head .more{font-weight:700;color:var(--green-d);font-size:15px;
  display:inline-flex;gap:6px;align-items:center;white-space:nowrap;}
.section-head .more:hover{color:var(--red);}
.section-head .more svg{width:16px;height:16px;}
@media(max-width:600px){.section{padding:44px 0;}
  .section-head{flex-direction:column;align-items:flex-start;gap:6px;}}

/* ============================ THEMENWELTEN ============================ */
.themegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.theme{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 20px;display:flex;flex-direction:column;gap:14px;transition:.16s;}
.theme:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-2);}
.theme .ic{width:50px;height:50px;border-radius:13px;display:grid;place-items:center;}
.theme .ic svg{width:27px;height:27px;}
.theme h3{font-family:var(--sans);font-size:16.5px;font-weight:700;}
.theme p{font-size:13.5px;color:var(--muted);margin:0;}
@media(max-width:900px){.themegrid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:430px){.themegrid{grid-template-columns:1fr;}}

/* ============================ ARTIKEL ============================ */
.artgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.article{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;transition:.16s;}
.article:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
.article .thumb{aspect-ratio:16/10;position:relative;overflow:hidden;}
.article .thumb svg{width:100%;height:100%;}
.article .body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1;}
.article .cat{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--red);margin-bottom:9px;}
.article h3{font-size:21px;line-height:1.18;margin:0 0 9px;}
.article .dek{font-size:14.5px;color:var(--muted);margin:0 0 16px;flex:1;}
.article .meta{font-size:12.5px;color:var(--muted);display:flex;gap:10px;
  align-items:center;border-top:1px solid var(--line);padding-top:13px;}
.article .meta b{color:var(--ink);font-weight:600;}
.article .meta svg{width:14px;height:14px;color:var(--muted);flex:0 0 14px;}
.article .meta .dot{width:3px;height:3px;border-radius:50%;background:var(--line-2);}
@media(max-width:900px){.artgrid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.artgrid{grid-template-columns:1fr;}}

/* Magazin Aufmacher */
.feature{display:grid;grid-template-columns:1.15fr .85fr;gap:0;background:var(--white);
  border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-bottom:40px;}
.feature .ft-img{position:relative;min-height:340px;}
.feature .ft-img svg{position:absolute;inset:0;width:100%;height:100%;}
.feature .ft-body{padding:46px 44px;display:flex;flex-direction:column;justify-content:center;}
.feature h2{font-size:clamp(26px,3.4vw,40px);margin:12px 0 16px;}
.feature .dek{font-size:17px;color:var(--muted);margin:0 0 22px;}
.feature .meta{font-size:13px;color:var(--muted);display:flex;gap:10px;align-items:center;}
.feature .meta b{color:var(--ink);}
.feature .meta .dot{width:3px;height:3px;border-radius:50%;background:var(--line-2);}
@media(max-width:820px){.feature{grid-template-columns:1fr;}
  .feature .ft-img{min-height:220px;}.feature .ft-body{padding:30px 26px;}}

/* ============================ PRODUKTE ============================ */
.filterbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:30px;}
.chip{font-size:13.5px;font-weight:600;padding:9px 16px;border-radius:20px;
  border:1.5px solid var(--line-2);background:var(--white);color:var(--ink);transition:.15s;}
.chip:hover{border-color:var(--green);color:var(--green);}
.chip.active{background:var(--green-d);border-color:var(--green-d);color:#fff;}

.prodgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.product{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;position:relative;transition:.16s;}
.product:hover{box-shadow:var(--shadow);border-color:var(--line-2);}
.product .pimg{aspect-ratio:1/1;background:var(--paper);display:grid;place-items:center;
  position:relative;border-bottom:1px solid var(--line);}
.product .pimg svg{width:72%;height:72%;}
.product .soldflag{position:absolute;top:12px;left:12px;background:rgba(27,36,31,.82);
  color:#fff;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 11px;border-radius:20px;backdrop-filter:blur(2px);}
.product .tip{position:absolute;top:12px;right:12px;background:var(--gold);color:#fff;
  font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:5px 10px;border-radius:20px;}
.product .pbody{padding:16px 17px 18px;display:flex;flex-direction:column;flex:1;}
.product .pcat{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px;}
.product .pname{font-family:var(--serif);font-size:18px;font-weight:600;line-height:1.16;margin:0 0 3px;}
.product .pbrand{font-size:13px;color:var(--muted);margin:0 0 11px;}
.product .prate{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);margin-bottom:13px;}
.product .stars{display:inline-flex;gap:1px;}
.product .stars svg{width:14px;height:14px;color:var(--gold);}
.product .pfoot{margin-top:auto;}
.product .price{font-family:var(--sans);font-weight:800;font-size:20px;color:var(--ink);}
.product .price .base{display:block;font-size:11.5px;font-weight:600;color:var(--muted);margin-top:1px;}
.product .pfoot .btn{width:100%;margin-top:12px;padding:11px;font-size:14px;}
.product .notify{display:block;text-align:center;font-size:12.5px;color:var(--green-d);
  font-weight:600;margin-top:9px;}
.product .notify:hover{color:var(--red);}
@media(max-width:980px){.prodgrid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:720px){.prodgrid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:420px){.prodgrid{grid-template-columns:1fr;}}

/* ============================ REDAKTION / ÜBER UNS ============================ */
.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center;}
.about .badge-stack{display:flex;flex-direction:column;gap:14px;}
.about .tline{display:flex;gap:14px;align-items:flex-start;background:var(--white);
  border:1px solid var(--line);border-radius:13px;padding:18px 20px;}
.about .tline .ic{width:40px;height:40px;border-radius:10px;background:var(--paper-2);
  display:grid;place-items:center;flex:0 0 40px;}
.about .tline .ic svg{width:22px;height:22px;color:var(--green-d);}
.about .tline h4{font-family:var(--sans);font-size:15.5px;font-weight:700;margin:1px 0 3px;}
.about .tline p{font-size:13.5px;color:var(--muted);margin:0;}
.about h2{font-size:clamp(26px,3vw,36px);margin:10px 0 16px;}
.about p.big{font-size:17px;color:var(--muted);}
@media(max-width:820px){.about{grid-template-columns:1fr;gap:28px;}}

/* ============================ NEWSLETTER ============================ */
.newsletter{background:var(--green-d);color:#EAF2EF;}
.newsletter .wrap{padding:54px 26px;display:grid;grid-template-columns:1fr 1fr;
  gap:40px;align-items:center;}
.newsletter h2{color:#fff;font-size:clamp(25px,3vw,34px);}
.newsletter p{color:#C4D6D1;margin:12px 0 0;font-size:16px;}
.nl-form{display:flex;gap:10px;flex-wrap:wrap;}
.nl-form input{flex:1 1 220px;height:52px;border:0;border-radius:26px;padding:0 22px;
  font-size:15px;font-family:var(--sans);}
.nl-form .btn{background:var(--red);border-color:var(--red);color:#fff;}
.nl-form .btn:hover{background:#fff;color:var(--red-d);border-color:#fff;}
.nl-note{font-size:12.5px;color:#9FBAB4;margin-top:12px;}
@media(max-width:760px){.newsletter .wrap{grid-template-columns:1fr;gap:22px;padding:40px 17px;}}

/* ============================ FOOTER ============================ */
.footer{background:#13201C;color:#B7C6C0;font-size:14px;}
.footer .top{padding:54px 0 38px;display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;gap:38px;}
.footer .fbrand .brand .wordmark .n{color:#fff;}
.footer .fbrand p{margin-top:16px;color:#8FA39C;max-width:30em;line-height:1.6;}
.footer .paylogos{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;}
.footer .paylogos span{height:30px;min-width:46px;border-radius:5px;background:#23332E;
  border:1px solid #2C4039;display:grid;place-items:center;font-size:10px;font-weight:700;
  color:#C4D6D1;padding:0 9px;letter-spacing:.03em;}
.footer h5{font-family:var(--sans);color:#fff;font-size:14px;font-weight:700;
  letter-spacing:.04em;margin:0 0 16px;}
.footer ul{list-style:none;margin:0;padding:0;}
.footer ul li{margin-bottom:11px;}
.footer ul a{color:#B7C6C0;transition:.15s;}
.footer ul a:hover{color:#fff;}
.footer .bottom{border-top:1px solid #233530;padding:20px 0;display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;color:#7E928B;font-size:13px;}
.footer .disc{background:#0F1A17;color:#7E928B;font-size:12.5px;line-height:1.6;
  padding:18px 0;border-top:1px solid #233530;}
@media(max-width:860px){.footer .top{grid-template-columns:1fr 1fr;gap:30px;}}
@media(max-width:480px){.footer .top{grid-template-columns:1fr;}}

/* Foto über topischer SVG-Illustration (Foto fällt aus -> SVG erscheint) */
.thsvg{position:absolute;inset:0;}
.thsvg svg{width:100%;height:100%;display:block;}
.thimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.tint{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(15,110,104,.03),rgba(11,64,60,.15));}

/* page intro band (Magazin / Produkte) */
.pageband{background:var(--white);border-bottom:1px solid var(--line);padding:46px 0 40px;}
.pageband h1{font-size:clamp(30px,4vw,46px);margin:12px 0 12px;}
.pageband p{font-size:18px;color:var(--muted);max-width:44em;margin:0;}

/* Meistgelesen-Listen (Ratgeber, apotheken.de-Stil) */
.readgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;}
.readcol h3{font-family:var(--serif);font-size:21px;margin:0 0 16px;
  padding-bottom:12px;border-bottom:2px solid var(--red);}
.readcol ul{list-style:none;margin:0;padding:0;}
.readcol li{margin:0 0 12px;}
.readcol li a{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;
  color:var(--ink);transition:.15s;line-height:1.4;}
.readcol li a:hover{color:var(--red);}
.readcol li a::before{content:"";flex:0 0 6px;width:6px;height:6px;border-radius:50%;
  background:var(--red);margin-top:7px;}
@media(max-width:820px){.readgrid{grid-template-columns:1fr;gap:26px;}}