/* =====================================================================
PHYbio Player – gemeinsames Frontend-Stylesheet
Heller Look, an die übrigen PHYbio-Webseiten (ledpuls.com) angeglichen:
Weiß, Roboto, Fließtext #666 / Überschriften #333, Akzentrot, Pill-Buttons.
Genutzt von index.html, download.html, handbuch.html und den legal/-Seiten.
Roboto wird je Seite per (Google Fonts) geladen.
===================================================================== */
:root{
/* Legacy-Tokennamen beibehalten (die Seiten referenzieren sie), aber hell: */
--rot:#DD302A; /* Akzentrot (Marke) */
--rot-strong:#E4032F; /* kräftiges Logo-Rot */
--rot-hover:#c21f1a;
--rot-ink:#B21E2A; /* dunkles Wortmarken-Rot */
--bg:#ffffff;
--panel:#ffffff; /* Karten auf Weiß */
--panel-2:#f7f7f7;
--line:#e8e8e8;
--text:#333333; /* Überschriften / kräftiger Text */
--body:#666666; /* Fließtext */
--muted:#8b8b8b;
--petrol:#003E51; --petrol-2:#15779B;
/* Logo-Quadrate */
--sq1:#E4032F; --sq2:#EA504E; --sq3:#F18376; --sq4:#F0C4B4;
/* Semantik */
--and:#1c9d63; --andgreen:#2fae6b;
--warn-bg:#fff7e6; --warn-line:#f0d48a; --warn-text:#8a6400;
--info-bg:#eef4f6; --info-line:#d6e5ea; --info-text:#0b4b60;
--shadow:0 12px 30px rgba(17,17,17,.08);
--font:Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;
--maxw:1080px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{color-scheme:light;}
body{
font-family:var(--font);background:var(--bg);color:var(--body);
font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
min-height:100vh;display:flex;flex-direction:column;
}
/* ---------------- Header ---------------- */
header.site{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.92);
backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line);}
header.site .bar{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;
justify-content:space-between;gap:16px;padding:14px 24px;}
.brand{display:flex;flex-direction:column;gap:6px;text-decoration:none;line-height:1;}
.brand .word{font-weight:800;font-size:24px;letter-spacing:.5px;color:var(--rot-ink);}
.brand .squares{display:flex;gap:5px;}
.brand .squares i{width:15px;height:15px;border-radius:2px;display:block;}
.brand .squares i:nth-child(1){background:var(--sq1);}
.brand .squares i:nth-child(2){background:var(--sq2);}
.brand .squares i:nth-child(3){background:var(--sq3);}
.brand .squares i:nth-child(4){background:var(--sq4);}
header.site .nav{display:flex;align-items:center;gap:22px;}
header.site .nav a{color:var(--text);text-decoration:none;font-size:14px;font-weight:500;
letter-spacing:.02em;transition:color .15s;}
header.site .nav a:hover{color:var(--rot);}
/* roter „Shop"-Button in der Menüzeile */
header.site .nav a.shopbtn{background:var(--rot);color:#fff;padding:8px 20px;border-radius:999px;
font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-size:13px;transition:background .15s,transform .15s;}
header.site .nav a.shopbtn:hover{background:var(--rot-hover);color:#fff;transform:translateY(-1px);}
@media(max-width:760px){header.site .nav{display:none;}}
/* ---------------- Seiten-Grundlayout ---------------- */
main.wrap,main.page{width:min(var(--maxw),100%);margin:0 auto;padding:48px 24px 8px;flex:1 0 auto;}
main.wrap{width:min(760px,100%);} /* schmalere Textseiten */
.center{text-align:center;}
/* ---------------- Hero / Badges / Headlines ---------------- */
.badge{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;color:var(--info-text);
background:var(--info-bg);border:1px solid var(--info-line);padding:7px 15px;border-radius:999px;margin-bottom:18px;}
.badge .dot{width:8px;height:8px;border-radius:50%;background:var(--and);
animation:pulse 2.4s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(28,157,99,.45)}70%{box-shadow:0 0 0 10px rgba(28,157,99,0)}100%{box-shadow:0 0 0 0 rgba(28,157,99,0)}}
h1{color:var(--text);font-weight:500;font-size:clamp(28px,5vw,42px);line-height:1.14;
letter-spacing:-.01em;text-wrap:balance;}
h1 span{color:var(--rot);}
p.sub{margin-top:14px;color:var(--body);font-size:17px;line-height:1.6;}
/* Equalizer-Animation (index) – dezent in Akzentrot */
.eq{display:flex;gap:6px;justify-content:center;align-items:flex-end;height:34px;margin:24px auto 0;}
.eq i{width:6px;background:var(--rot);border-radius:3px;animation:bounce 1.1s ease-in-out infinite;opacity:.9;}
.eq i:nth-child(1){animation-delay:0s}.eq i:nth-child(2){animation-delay:.12s}
.eq i:nth-child(3){animation-delay:.24s}.eq i:nth-child(4){animation-delay:.36s}
.eq i:nth-child(5){animation-delay:.48s}
@keyframes bounce{0%,100%{height:8px;opacity:.55}50%{height:34px;opacity:1}}
/* ---------------- Kachel-Grid (index) ---------------- */
.grid{margin-top:28px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:left;}
@media(max-width:860px){.grid{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto;}}
a.tile{display:flex;flex-direction:column;align-items:flex-start;gap:14px;text-decoration:none;color:var(--text);
background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px 24px;
transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;}
a.tile:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#e0cfcf;}
a.tile .ic{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;
background:linear-gradient(135deg,#fdecec,#f9dede);font-size:28px;line-height:1;}
a.tile .tbody{display:flex;flex-direction:column;align-items:flex-start;gap:8px;flex:1 1 auto;width:100%;}
a.tile .t{font-size:19px;font-weight:500;color:var(--text);}
a.tile .d{font-size:14px;color:var(--body);line-height:1.55;}
/* Button ans untere Ende schieben, damit alle „Öffnen"-Buttons auf gleicher Höhe stehen */
a.tile .go{margin-top:auto;background:var(--rot);color:#fff;font-weight:700;font-size:12.5px;
letter-spacing:.08em;text-transform:uppercase;padding:10px 20px;border-radius:999px;transition:.16s;}
a.tile:hover .go{background:var(--rot-hover);}
/* ---------------- Boxen / Karten (download, handbuch) ---------------- */
.box{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px 26px;margin-top:22px;
box-shadow:0 1px 2px rgba(17,17,17,.03);}
.box h2{font-size:19px;font-weight:500;color:var(--text);margin-bottom:12px;display:flex;align-items:center;gap:10px;}
.box p,.box li{font-size:15px;color:var(--body);line-height:1.65;}
ol{margin:8px 0 0 20px;} ol li{margin:5px 0;}
/* Info-/Hinweis-Box (Testphase) – Petrol statt Dunkelblau */
.box.notice{background:#f2f8fa;border-color:var(--info-line);}
.box.notice h2{color:var(--petrol);font-size:22px;}
.box.notice p{color:#33525c;font-size:16px;}
.notice-plus{margin-top:16px;padding:12px 16px;border-left:3px solid var(--and);
background:rgba(28,157,99,.08);border-radius:8px;color:#1f5c40;font-size:15px;line-height:1.55;}
/* Warn-Box */
.warnsub{background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:12px;padding:16px 18px;margin-top:20px;}
.warnsub h3{font-size:15.5px;color:var(--warn-text);margin-bottom:8px;display:flex;align-items:center;gap:8px;font-weight:600;}
.warnsub p,.warnsub li{color:#7a5a12;font-size:14px;line-height:1.6;}
/* ---------------- Buttons (Pill) ---------------- */
.dl,.dlbtn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;background:var(--rot);color:#fff;
font-weight:700;font-size:14.5px;letter-spacing:.04em;padding:13px 26px;border-radius:999px;transition:.16s;}
.dl{font-size:16px;}
.dl:hover,.dlbtn:hover{background:var(--rot-hover);transform:translateY(-2px);}
/* helle/sekundäre Variante (Store „bald", Word-Download): Outline dunkel */
.dl.pale,.dlbtn.word{background:#fff;color:#2b2b2b;border:1.5px solid #2b2b2b;box-shadow:none;font-weight:700;}
.dl.pale:hover,.dlbtn.word:hover{background:#2b2b2b;color:#fff;transform:none;}
.dl.soon-btn{opacity:.5;pointer-events:none;cursor:default;}
/* Store-Button: einheitliche Breite/Höhe, damit Android- und iOS-Button gleich sitzen */
.dl.storebtn{font-size:15px;padding:13px 22px;min-width:230px;justify-content:center;}
.scanhint{color:var(--muted);font-size:12.5px;}
.ver{font-size:13px;color:var(--muted);margin-top:6px;}
/* ---------------- QR-Bereich (download) ---------------- */
.qredges{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;margin-top:16px;}
.qrmid{flex:1 1 210px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;}
.qrcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;text-align:center;flex:0 0 auto;
box-shadow:0 6px 18px rgba(17,17,17,.08);}
.qrcard img{display:block;width:150px;height:150px;image-rendering:pixelated;}
.qrcap{color:var(--text);font-size:12px;margin-top:8px;font-weight:700;letter-spacing:.02em;}
.qrcard.soon-qr{opacity:.5;}
.soon{display:inline-block;font-size:10.5px;color:var(--muted);border:1px solid var(--line);border-radius:999px;
padding:3px 9px;text-transform:uppercase;letter-spacing:.06em;}
.laterlbl{margin-top:14px;color:var(--muted);font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;}
.langprompt{margin:20px 0 2px;color:var(--petrol-2);font-size:15.5px;font-weight:600;}
.actionrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:28px;margin-top:12px;}
.actionrow .col{display:flex;flex-direction:column;gap:8px;align-items:center;}
/* Handbuch-Downloads */
.dls{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px;}
.note{margin-top:16px;color:var(--muted);font-size:13px;text-align:center;}
/* ---------------- Sprachauswahl (i18n.js baut .phyb-langbar) ---------------- */
.phyb-langbar{display:flex;justify-content:center;align-items:center;gap:8px;margin:16px 0 0;}
.phyb-langsel{background:#fff;color:var(--text);border:1px solid var(--line);border-radius:999px;
padding:9px 16px;font-size:14px;font-family:inherit;cursor:pointer;transition:.15s;}
.phyb-langsel:hover{border-color:var(--rot);}
.phyb-refresh{cursor:pointer;background:#fff;color:var(--text);border:1px solid var(--line);border-radius:999px;
width:42px;height:42px;font-size:18px;line-height:1;display:inline-flex;align-items:center;justify-content:center;
font-family:inherit;transition:.15s;}
.phyb-refresh:hover{border-color:var(--rot);color:var(--rot);}
.phyb-refresh:active{transform:rotate(180deg);}
/* Der von i18n.js fix positionierte „← Startseite"-Button ist auf den
umgebauten Seiten redundant (Header-Logo verlinkt nach /) und würde das
Logo überlagern → ausblenden. */
.phyb-home{display:none !important;}
/* kompakte Variante in Box-Überschriften */
.box h2 .phyb-langbar.framelang{margin:0 0 0 auto;gap:6px;}
.framelang .globe{display:none;}
.framelang .phyb-langsel{padding:5px 11px;font-size:12.5px;}
/* ---------------- Petrol-CTA-Streifen (optional) ---------------- */
.strip{max-width:var(--maxw);margin:36px auto 0;}
.strip .in{background:linear-gradient(135deg,var(--petrol),#012a37);border-radius:20px;padding:32px;
display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.strip h4{color:#fff;font-size:22px;font-weight:500;}
.strip p{color:#bcd3db;font-size:15px;margin-top:4px;}
/* ---------------- Footer ---------------- */
footer.site{margin-top:auto;border-top:1px solid var(--line);background:var(--panel-2);}
footer.site .foot{max-width:var(--maxw);margin:0 auto;padding:26px 24px;display:flex;align-items:center;
justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13.5px;color:var(--muted);}
/* Legacy: einfache