/* DopaLog-Shop im Erscheinungsbild des Parkinson Journals (Beitragsseiten)
   Schriften lokal eingebunden (keine Verbindung zu Google-Servern) */
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/Lato-400.woff2) format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/Lato-700.woff2) format('woff2')}

:root{
  --pj-blau:#185FA5;        /* Box-Überschriften, Buttons, Links */
  --pj-blau-dunkel:#0F3C78; /* Verlauf im Seitenkopf */
  --pj-hell:#E6F1FB;        /* Infoboxen, Tabellenköpfe */
  --pj-hell2:#F5F9FD;       /* Tabellen-Zebra */
  --pj-linie:#B5D4F4;       /* Strich im Seitenkopf */
  --pj-gelb:#FFD166;        /* Rubrik im Seitenkopf */
  --pj-graublau:#6786A1;    /* hervorgehobene Links */
  --pj-nav:#AAAAAA;         /* Menü */
  --pj-text:#222222;
  --pj-titel:#1F1F1F;
  --pj-muted:#666666;
  --pj-rahmen:#E1E1E1;
  --pj-grund:#F8F8F8;
  --pj-socket:#3A4D5C;
  --warn:#7a4500; --warn-bg:#fff4e0;
  --ok:#165c33; --ok-bg:#e6f4ea;
  --err:#8c1c13; --err-bg:#fdebe9;
}
*{box-sizing:border-box}
html{font-size:100%}
body{margin:0;background:var(--pj-grund);color:var(--pj-text);font-family:Lato,Arial,sans-serif;font-size:18px;line-height:1.65;overflow-wrap:break-word}
.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px;background:#fff;padding:10px;z-index:10}
a{color:var(--pj-blau)}
a:hover{color:var(--pj-blau-dunkel)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--pj-linie);outline-offset:2px}

/* ---------- Kopfzeile: Logo links, graues Menü mit Trennstrichen ---------- */
.pj-top{background:#fff}
.pj-bar{max-width:1100px;margin:0 auto;padding:0 20px;min-height:90px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 24px}
.pj-logo{display:block;line-height:0}
.pj-logo img{width:90px;height:90px;display:block}
.pj-nav{display:flex;flex-wrap:wrap;align-items:center}
.pj-nav a{color:var(--pj-nav);font-weight:700;font-size:16px;text-decoration:none;padding:6px 15px;line-height:1.3;border-left:1px solid var(--pj-rahmen)}
.pj-nav a:first-child{border-left:0}
.pj-nav a:hover{color:var(--pj-blau)}

/* ---------- Blauer Seitenkopf wie bei Beiträgen ---------- */
.pj-oben{background:#fff;padding:0 16px 30px;border-bottom:1px solid var(--pj-rahmen)}
.pj-kopf{display:grid;grid-template-columns:1fr 1fr;max-width:900px;margin:0 auto;border-radius:14px;overflow:hidden;font-family:Arial,Helvetica,sans-serif;color:#fff;
  background:linear-gradient(160deg,var(--pj-blau-dunkel) 0%,var(--pj-blau) 100%);background-color:var(--pj-blau-dunkel)}
.pj-kopf-text{padding:40px 40px 34px}
.pj-kopf-logo{display:flex;align-items:center;justify-content:center;padding:28px}
.pj-kopf-logo img{display:block;width:100%;max-width:190px;height:auto;background:#E4E4E4;border-radius:10px;padding:12px 16px;box-sizing:content-box}
.pj-kopf span,.pj-kopf h1{display:block}
.pj-kopf .marke{font-size:40px;line-height:1.1;font-weight:700;letter-spacing:-.4px;margin-bottom:22px;color:#fff}
.pj-kopf .kicker{font-size:12px;font-weight:600;letter-spacing:1.68px;text-transform:uppercase;color:var(--pj-gelb);margin-bottom:8px}
.pj-kopf .titel{font-family:Arial,Helvetica,sans-serif;font-size:26px;line-height:1.3;font-weight:600;color:#fff;margin:0;hyphens:auto}
.pj-kopf .strich{height:1px;background:var(--pj-linie);margin:26px 0 14px}
.pj-kopf .foerderung{font-size:14px;color:var(--pj-linie)}

/* ---------- Inhaltskarte ---------- */
.pj-main{padding:0 16px}
.pj-karte{display:block;max-width:720px;margin:0 auto 60px;background:var(--pj-grund);box-shadow:0 0 12px rgba(0,0,0,.15);padding:24px 16px 40px}
.pj-karte > :first-child{margin-top:0}

h1,h2,h3{font-family:Lato,Arial,sans-serif;font-weight:700;hyphens:auto;overflow-wrap:break-word}
h1{font-size:24px;line-height:1.25;color:var(--pj-titel);margin:0 0 .8rem}
/* Box-Überschriften wie in den Beiträgen */
h2{font-size:24px;line-height:30px;color:#fff;background:var(--pj-blau);border-radius:6px;padding:12px 18px;margin:43px 0 19px}
h2 a{color:#fff}
h3{font-size:22px;line-height:1.35;color:var(--pj-titel);margin:1.6rem 0 .4rem}
p{margin:0 0 1em}
.lead{font-style:italic;font-size:18px;color:var(--pj-text)}
strong{font-weight:700}

/* Infobox wie im Journal (hellblau, blauer Strich links) */
.panel{background:var(--pj-hell);border-left:4px solid var(--pj-blau);border-radius:0 6px 6px 0;padding:18px 20px;margin:1.4rem 0}
.panel h2,.panel h3{background:none;color:#1d3752;padding:0;margin:0 0 .5rem;font-size:17px;line-height:1.4;letter-spacing:.06em;text-transform:uppercase;border-radius:0}
.pricebox{text-align:left}
.price-label{font-weight:700;color:#1d3752;margin:0}
.price{font-size:44px;font-weight:700;color:var(--pj-blau);line-height:1.1;margin:.1rem 0 .1rem}
.price-sub{margin:0 0 .6rem;font-weight:700;color:#1d3752}

ul.feat{padding-left:1.4rem}
ul.feat li{margin:.45rem 0}
ul.feat li::marker{color:var(--pj-blau)}

/* Formulare */
form.panel{background:#fff;border:1px solid var(--pj-rahmen);border-left:4px solid var(--pj-blau)}
label{display:block;font-weight:700;margin:1.1rem 0 .3rem;color:var(--pj-titel)}
input[type=text],input[type=email],input[type=password]{width:100%;font:inherit;padding:12px 14px;border:1px solid #9aa9b5;border-radius:6px;background:#fff;color:var(--pj-text)}
input[type=text]:focus,input[type=email]:focus,input[type=password]:focus{border-color:var(--pj-blau);outline:2px solid var(--pj-hell)}
.grid{display:grid;grid-template-columns:1fr;gap:0 18px}
@media(min-width:640px){.grid.two,.grid.zc{grid-template-columns:1fr 2fr}}
.check{display:flex;gap:12px;align-items:flex-start;font-weight:400;margin:1rem 0}
.check input{width:26px;height:26px;margin-top:3px;flex:none;accent-color:var(--pj-blau)}

/* Buttons: blau wie die Box-Überschriften, Zweitbutton wie „Beitrag teilen“ */
.btn{display:inline-block;font-family:Lato,Arial,sans-serif;font-size:19px;font-weight:700;background:var(--pj-blau);color:#fff;border:0;border-radius:6px;padding:15px 28px;cursor:pointer;text-decoration:none;margin-top:1rem;line-height:1.3}
.btn:hover{background:var(--pj-blau-dunkel);color:#fff}
.btn.sec{background:#fff;color:var(--pj-graublau);border:1px solid #d6dde3;border-radius:10px}
.btn.sec:hover{background:var(--pj-hell2);color:var(--pj-blau)}
.btn.danger{background:#a3291c}
.btn.danger:hover{background:#7f1f15}

/* Hinweise */
.note{padding:14px 18px;border-radius:0 6px 6px 0;margin:1rem 0;border-left:4px solid transparent}
.note.ok{background:var(--ok-bg);color:var(--ok);border-color:#3d9a63}
.note.err{background:var(--err-bg);color:var(--err);border-color:#c0392b}
.note.info{background:var(--pj-hell);color:#1d3752;border-color:var(--pj-blau)}
.note.warn{background:var(--warn-bg);color:var(--warn);border-color:#e0a030}
.small{font-size:15px;color:var(--pj-muted)}

/* Tabellen wie im Journal */
table{border-collapse:collapse;width:100%;background:#fff;font-size:17px;margin:18px 0}
th,td{text-align:left;padding:8px 9px;border:1px solid var(--pj-rahmen);vertical-align:top}
th{background:var(--pj-hell);font-weight:700}
tbody tr:nth-child(even) td{background:var(--pj-hell2)}
.tablewrap{overflow-x:auto}
dl.facts{display:grid;grid-template-columns:max-content 1fr;gap:6px 22px;margin:0}
dl.facts dt{font-weight:700;color:#1d3752}dl.facts dd{margin:0}

/* Rechtstexte */
.legal h2{font-size:21px;line-height:1.35}
.ph{background:#fff3b0;padding:0 4px}

/* ---------- Fuß ---------- */
.pj-fuss{background:#fff;border-top:1px solid var(--pj-rahmen);color:var(--pj-muted);font-size:15px}
.pj-fuss-in{max-width:720px;margin:0 auto;padding:22px 16px 18px}
.pj-fuss p{margin:.3rem 0}
.pj-fuss strong{color:var(--pj-titel)}
.pj-fuss .links{display:flex;flex-wrap:wrap;gap:4px 0}
.pj-fuss .links a{color:var(--pj-graublau);font-weight:700;margin-right:18px;text-decoration:none}
.pj-fuss .links a:hover{color:var(--pj-blau)}
.pj-socket{background:var(--pj-socket);color:#dbe3ea;font-size:13px;text-align:center;padding:10px 16px}
.pj-socket a{color:#fff}

/* ---------- Handy ---------- */
@media(max-width:700px){
  .pj-bar{justify-content:center;padding:8px 12px}
  .pj-logo img{width:64px;height:64px}
  .pj-nav{justify-content:center}
  .pj-nav a{font-size:15px;padding:4px 11px}
  .pj-kopf{grid-template-columns:1fr;border-radius:12px}
  .pj-kopf-text{padding:28px 22px 24px}
  .pj-kopf-logo{order:-1;padding:22px 22px 0;justify-content:flex-start}
  .pj-kopf-logo img{max-width:150px;padding:10px 12px}
  .pj-kopf .marke{font-size:32px;margin-bottom:16px}
  .pj-kopf .titel{font-size:22px}
  h2{font-size:21px;line-height:1.3;padding:10px 14px}
  .price{font-size:38px}
  dl.facts{grid-template-columns:1fr;gap:0}
  dl.facts dd{margin-bottom:.5rem}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{.pj-top,.pj-oben,.pj-fuss,.pj-socket,.noprint{display:none}body{background:#fff;font-size:12pt}.pj-karte{box-shadow:none;max-width:none;padding:0;background:#fff}}
.btn + p{margin-top:1.2rem}