/* Impfhinweise · Häufige Fragen, Gut zu wissen, Impf-Lexikon
   Zentrale Datei für alle MAXMO Apotheken. Liegt neben index.html und impfhinweise.js.
   Akzentfarbe kommt aus ?accent=%23ff0000, Rückfall ist #ff0000. */

:root{--mx-accent:#ff0000}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:#3d3d3b;font:16px/1.65 "PT Sans",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif}
.mx *{box-sizing:border-box}
/* Spalte wie der Shopware-Container (Storefront-Raster: Container 1400px, Gutter 40px).
   Läuft das Script der Shopware-Seite, meldet es die exakte Spalte und übersteuert das (siehe unten). */
.mx-wrap{width:100%;max-width:1400px;margin:0 auto;padding:0 20px}
@media (max-width:1399.98px){.mx-wrap{max-width:1140px}}
@media (max-width:1199.98px){.mx-wrap{max-width:960px}}
@media (max-width:991.98px){.mx-wrap{max-width:720px}}
@media (max-width:767.98px){.mx-wrap{max-width:540px}}
@media (max-width:575.98px){.mx-wrap{max-width:none}}
/* Eingebettet: Spalte kommt von der Shopware-Seite, bündig mit den Containern darüber */
html[data-layout="host"] .mx-wrap{max-width:none;width:var(--mx-col-width);margin:0 0 0 var(--mx-col-left);padding:0}
.mx h1,.mx h2,.mx h3{color:#4a545b;font-weight:400;margin:0;text-wrap:balance}
.mx h1{font-size:38px;line-height:1.15}
.mx h2{font-size:31px;line-height:1.2}
.mx p{margin:0;text-wrap:pretty}
.mx a{color:var(--mx-accent)}
.mx a:hover{filter:brightness(.85)}
.mx :focus-visible{outline:3px solid #4a545b;outline-offset:3px;border-radius:4px}
.mx-section{padding:72px 0}
.mx-head{max-width:760px;margin-bottom:32px}

/* Kopf und Fuß: nur in der normalen Ansicht, im iframe ausgeblendet */
.ih-head{padding:56px 0 8px}
.ih-head p{font-size:18px;color:#6d7880;margin-top:14px;max-width:720px}
.ih-foot{border-top:1px solid #e4e7ea;padding:28px 0 48px;font-size:14px;color:#8b959c}
html[data-embed="1"] .ih-chrome{display:none}
/* Solange die Shopware-Seite die Höhe steuert, scrollt der Rahmen nicht selbst.
   Meldet sie sich nicht, wird die Seite im Rahmen scrollbar, damit nichts abgeschnitten bleibt. */
html[data-embed="1"]:not([data-host="none"]){overflow:hidden}

/* Häufige Fragen */
.mx-faq{padding-top:52px}
.mx-faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;align-items:start}
.mx-faq-col{border-top:1px solid #e4e7ea}
.mx-acc{border-bottom:1px solid #e4e7ea}
.mx-acc summary{list-style:none;cursor:pointer;display:block;padding:18px 0}
.mx-acc summary::-webkit-details-marker{display:none}
.mx-acc .mx-sum{display:flex;gap:16px;align-items:flex-start;font-weight:700;color:#4a545b;font-size:18px;line-height:1.4}
.mx-acc .mx-sum::before{content:"";flex:0 0 24px;width:24px;height:24px;border-radius:50%;background-color:#ffe9e9;background-color:color-mix(in srgb,var(--mx-accent) 13%,#fff);background-image:linear-gradient(var(--mx-accent),var(--mx-accent)),linear-gradient(var(--mx-accent),var(--mx-accent));background-size:12px 2px,2px 12px;background-position:center,center;background-repeat:no-repeat}
.mx-acc[open] .mx-sum::before{background-size:12px 2px,0 0}
.mx-acc summary:hover .mx-sum{color:var(--mx-accent)}
.mx-acc-body{padding:0 0 22px 40px}
.mx-acc-body p+p{margin-top:8px}

/* Gut zu wissen */
.mx-wissen{background:#f5f7f8;padding:72px 0;border-top:1px solid #e4e7ea}
.mx-wissen h2{font-size:34px;font-weight:700}
.mx p.mx-kicker{font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8b959c;margin-bottom:10px}
.mx p.mx-sub{font-size:20px;color:#6d7880;margin-top:10px}
.mx-wissen-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:48px 64px;margin-top:40px;align-items:start}
.mx-toc{background:#fff;border:1px solid #e4e7ea;border-radius:14px;padding:18px 24px 20px;position:sticky;top:24px}
.mx-toc>summary{list-style:none;display:block;padding:2px 0 8px;cursor:default}
.mx-toc>summary::-webkit-details-marker{display:none}
.mx-toc>summary .mx-sum{display:flex;align-items:center;font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8b959c}
.mx-toc>summary .mx-sum::after{content:"";display:none;flex:0 0 12px;width:12px;height:12px;margin-left:auto;transition:transform .15s ease;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%238b959c' stroke-width='1.8' stroke-linecap='round'><path d='M2 4l4 4 4-4'/></svg>") center/12px no-repeat}
.mx-toc[open]>summary .mx-sum::after{transform:rotate(180deg)}
.mx .mx-toc a{display:block;padding:11px 0;color:#4a545b;text-decoration:none;font-size:17px;line-height:1.4;border-top:1px solid #e4e7ea}
.mx .mx-toc a:first-of-type{border-top:0}
.mx .mx-toc a:hover{color:var(--mx-accent)}
.mx-wissen h3{font-size:21px;font-weight:700;margin:40px 0 12px;scroll-margin-top:24px}
.mx-wissen h3:first-of-type{margin-top:0}
.mx-wissen .mx-text p{max-width:720px}
.mx-wissen .mx-text p+p{margin-top:14px}

/* Kleines Impf-Lexikon – bewusst leiser, kein Button dahinter */
.mx-lex{background:#fff;padding:56px 0 64px;border-top:1px solid #e4e7ea}
.mx-lex h2{font-size:24px;font-weight:700}
.mx p.mx-lex-intro{max-width:760px;font-size:18px;color:#5c666d;margin:10px 0 0}
.mx-lex-jump{display:none;flex-wrap:wrap;gap:8px;margin-top:20px}
.mx .mx-lex-jump a{background:#fff;border:1px solid #e4e7ea;border-radius:99px;padding:8px 14px;font-size:15px;color:#4a545b;text-decoration:none}
.mx-lex-group{margin-top:56px}
.mx-lex-grp{font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8b959c;margin:0 0 4px;scroll-margin-top:16px}
.mx-lex-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;align-items:start}
.mx-lex-col{border-top:1px solid #e4e7ea}
.mx-lex details{border-bottom:1px solid #e4e7ea}
.mx-lex summary{list-style:none;cursor:pointer;display:block;padding:15px 0}
.mx-lex summary::-webkit-details-marker{display:none}
.mx-lex .mx-sum{display:flex;gap:14px;align-items:center;color:#4a545b;font-size:18px;line-height:1.4}
.mx-lex .mx-sum::before{content:"";flex:0 0 16px;width:16px;height:16px;background-image:linear-gradient(#8b959c,#8b959c),linear-gradient(#8b959c,#8b959c);background-size:12px 1.6px,1.6px 12px;background-position:center,center;background-repeat:no-repeat}
.mx-lex details[open] .mx-sum::before{background-size:12px 1.6px,0 0}
.mx-lex summary:hover .mx-sum{color:#1f262b}
.mx-lex-body{padding:2px 0 20px 30px;font-size:15.5px;color:#5c666d}
.mx-lex-body p+p{margin-top:8px}
.mx-lex-body strong{color:#4a545b}
.mx p.mx-lex-legal{margin:48px auto 0;font-size:14px;color:#8b959c;max-width:none;text-align:center;white-space:nowrap}

@media (max-width:900px){
  .mx h1{font-size:29px}
  .mx h2{font-size:26px}
  .mx-wissen h2{font-size:28px}
  .mx-lex h2{font-size:22px}
  .mx p.mx-sub{font-size:18px}
  .mx p.mx-lex-intro{font-size:16.5px}
  .mx-section{padding:48px 0}
  .mx-head{margin-bottom:24px}
  .ih-head{padding:36px 0 4px}
  .mx-faq-grid,.mx-lex-grid{grid-template-columns:1fr}
  .mx-faq-col+.mx-faq-col,.mx-lex-col+.mx-lex-col{border-top:0}
  .mx-acc summary{padding:16px 0}
  .mx-acc .mx-sum{min-height:48px;align-items:center}
  .mx-wissen{padding:48px 0 56px}
  .mx-wissen-grid{grid-template-columns:1fr;gap:32px;margin-top:28px}
  .mx-toc{position:static;order:-1;padding:6px 20px 10px}
  .mx-toc>summary{cursor:pointer;padding:10px 0}
  .mx-toc>summary .mx-sum{min-height:44px}
  .mx-toc>summary .mx-sum::after{display:block}
  .mx-toc[open]>summary{padding-bottom:6px}
  .mx .mx-toc a{padding:12px 0;min-height:48px}
  .mx-wissen h3{margin-top:32px}
  .mx-lex{padding:48px 0 56px}
  .mx-lex-jump{display:flex}
  .mx-lex-group{margin-top:40px}
  .mx-lex summary{padding:12px 0}
  .mx-lex .mx-sum{min-height:48px}
  .mx p.mx-lex-legal{white-space:normal}
}