/* augmentedrealitybrille.net – Token zirph (siehe FINGERPRINT.md) */
@font-face { font-family: 'ZirphH'; src: url(/assets/fonts/zirph-h-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'ZirphH'; src: url(/assets/fonts/zirph-h-800.woff2) format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'ZirphT'; src: url(/assets/fonts/zirph-t-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'ZirphT'; src: url(/assets/fonts/zirph-t-600.woff2) format('woff2'); font-weight: 600; font-display: swap; }

:root {
  --zirph-bg: #f3f5f8; --zirph-surface: #fff; --zirph-ink: #0c1424; --zirph-soft: #4a5468; --zirph-line: #dfe3ea;
  --zirph-primary: #1a1f36; --zirph-accent: #5b3df5; --zirph-accent2: #12b5d6; --zirph-ok: #138a5e; --zirph-warn: #b4540a;
  --zirph-r: 14px; --zirph-r2: 22px; --zirph-s: 17px; --zirph-max: 1160px;
  --zirph-shadow: 0 1px 3px rgba(12, 20, 36, .08);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--zirph-primary); }
body { margin: 0; background: var(--zirph-bg); color: var(--zirph-ink); font: 400 1.03rem/1.65 ZirphT, system-ui, sans-serif; overflow-wrap: break-word; }
h1, h2, h3 { font-family: ZirphH, system-ui, sans-serif; letter-spacing: -.02em; line-height: 1.18; hyphens: manual; }
h1 { font-size: clamp(1.9rem, 4.2vw, 2.6rem); font-weight: 800; margin: 0 0 .5em; }
h2 { font-size: clamp(1.45rem, 3vw, 1.85rem); font-weight: 700; margin: 2.2em 0 .6em; }
h3 { font-size: 1.2rem; font-weight: 700; margin: 1.6em 0 .4em; }
p, ul, ol { margin: 0 0 1em; }
a { color: var(--zirph-accent); text-underline-offset: 3px; }
a:hover { color: var(--zirph-primary); }
img { max-width: 100%; height: auto; display: block; }
.zirph-wrap { max-width: var(--zirph-max); margin: 0 auto; padding: 0 var(--zirph-s); }
.zirph-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.zirph-skip { position: absolute; left: -999px; top: 0; background: var(--zirph-primary); color: #fff; padding: 8px 14px; z-index: 50; }
.zirph-skip:focus { left: 8px; }

/* Kopfleiste */
.zirph-top { background: var(--zirph-surface); border-bottom: 1px solid var(--zirph-line); position: sticky; top: 0; z-index: 20; }
.zirph-top-in { display: flex; align-items: center; gap: 20px; min-height: 64px; }
.zirph-logo { display: flex; align-items: center; gap: 10px; color: var(--zirph-ink); text-decoration: none; font: 800 1.2rem ZirphH, sans-serif; letter-spacing: -.02em; white-space: nowrap; }
.zirph-logo small { font-size: .8em; color: var(--zirph-soft); font-weight: 700; }
.zirph-logo b { color: var(--zirph-accent); font-weight: 800; }
@media (max-width: 480px) { .zirph-logo { font-size: .98rem; gap: 8px; } .zirph-logo-mark { width: 30px; height: 30px; } }
.zirph-logo-mark { width: 34px; height: 34px; border-radius: 10px; background: url(/favicon.svg) center/cover; flex: none; }
.zirph-nav { margin-left: auto; }
.zirph-nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.zirph-nav a { display: block; padding: 8px 13px; border-radius: 999px; color: var(--zirph-ink); text-decoration: none; font-weight: 600; font-size: .95rem; white-space: nowrap; }
.zirph-nav a:hover, .zirph-nav a[aria-current] { background: var(--zirph-bg); box-shadow: 0 0 0 2px var(--zirph-line); }
.zirph-burger { display: none; margin-left: auto; font: 600 .95rem ZirphT, sans-serif; background: var(--zirph-primary); color: #fff; border: 0; border-radius: 999px; padding: 9px 16px; cursor: pointer; }
@media (max-width: 960px) {
  .zirph-burger { display: block; }
  .zirph-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--zirph-surface); border-bottom: 1px solid var(--zirph-line); padding: 8px var(--zirph-s) 16px; }
  .zirph-nav.zirph-offen { display: block; }
  .zirph-nav ul { flex-direction: column; }
  .zirph-nav a { padding: 12px 14px; }
}

/* Startbereich (Split links/rechts) */
.zirph-hero { background: radial-gradient(1100px 420px at 85% 0%, rgba(91, 61, 245, .12), transparent 60%), radial-gradient(700px 360px at 0% 100%, rgba(18, 181, 214, .10), transparent 60%), var(--zirph-surface); border-bottom: 1px solid var(--zirph-line); }
.zirph-hero-in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 34px; align-items: center; padding-top: 42px; padding-bottom: 42px; }
.zirph-kicker { display: inline-block; font: 700 .78rem ZirphT, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--zirph-accent); margin: 0 0 12px; }
.zirph-lead { font-size: 1.12rem; color: var(--zirph-soft); max-width: 60ch; }
.zirph-hero-img { margin: 0; border-radius: var(--zirph-r2); overflow: hidden; background: var(--zirph-bg); aspect-ratio: 4 / 3; }
.zirph-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.zirph-pills { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 18px 0 0; }
.zirph-pills li { background: var(--zirph-bg); border: 1px solid var(--zirph-line); border-radius: 999px; padding: 4px 12px; font-size: .9rem; }
@media (max-width: 820px) { .zirph-hero-in { grid-template-columns: 1fr; padding-top: 26px; padding-bottom: 26px; } }

/* Abschnitte: Hintergrundwechsel weiß/hellgrau */
.zirph-sec { padding: 30px 0 38px; }
.zirph-sec-w { background: var(--zirph-surface); border-top: 1px solid var(--zirph-line); border-bottom: 1px solid var(--zirph-line); }
.zirph-sec > .zirph-wrap > h2:first-child { margin-top: .4em; }
.zirph-text { max-width: 76ch; }
.zirph-text li { margin-bottom: .35em; }

/* Knöpfe */
.zirph-btn { display: inline-block; background: var(--zirph-primary); color: #fff; text-decoration: none; font-weight: 600; border-radius: 999px; padding: 10px 20px; white-space: nowrap; }
.zirph-btn:hover { color: #fff; box-shadow: 0 0 0 2px var(--zirph-accent); }

/* Abzeichen je Brillen-Art */
.zirph-badge { display: inline-block; font: 600 .76rem ZirphT, sans-serif; border-radius: 999px; padding: 3px 10px; margin: 0; white-space: nowrap; }
.zirph-b-kam { background: #ece8ff; color: #3b22c4; }
.zirph-b-dis { background: #dff5fb; color: #0b6e84; }
.zirph-b-vid { background: #fff0e2; color: #8a3f06; }
.zirph-b-ar { background: #e3f6ec; color: #0e6b48; }

/* Modellkarten 3-spaltig */
.zirph-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; margin: 18px 0 8px; }
.zirph-card { background: var(--zirph-surface); border: 1px solid var(--zirph-line); border-radius: var(--zirph-r2); padding: 20px; box-shadow: var(--zirph-shadow); display: flex; flex-direction: column; }
.zirph-card:hover { box-shadow: 0 0 0 2px var(--zirph-accent); }
.zirph-card h3 { margin: 10px 0 12px; }
.zirph-card .zirph-btn { margin-top: auto; align-self: flex-start; }
.zirph-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin: 0 0 14px; }
.zirph-facts div { min-width: 0; }
.zirph-facts dt { font-size: .78rem; color: var(--zirph-soft); }
.zirph-facts dd { margin: 0; font-weight: 600; font-size: .95rem; }
.zirph-plus, .zirph-minus { list-style: none; padding: 0; margin: 0 0 10px; font-size: .95rem; }
.zirph-plus li, .zirph-minus li { padding-left: 1.4em; position: relative; margin-bottom: 4px; }
.zirph-plus li::before { content: '+'; position: absolute; left: 0; font-weight: 800; color: var(--zirph-ok); }
.zirph-minus li::before { content: '–'; position: absolute; left: 0; font-weight: 800; color: var(--zirph-warn); }
.zirph-minus { margin-bottom: 16px; }

/* Vergleichstabelle; auf dem Handy werden Zeilen zu Karten */
.zirph-tabwrap { overflow-x: auto; border-radius: var(--zirph-r); border: 1px solid var(--zirph-line); background: var(--zirph-surface); }
.zirph-tab { width: 100%; border-collapse: collapse; font-size: .95rem; }
.zirph-tab caption { text-align: left; padding: 12px 16px; font-weight: 600; color: var(--zirph-soft); }
.zirph-tab th, .zirph-tab td { text-align: left; padding: 11px 14px; border-top: 1px solid var(--zirph-line); vertical-align: top; }
.zirph-tab thead th { background: var(--zirph-bg); font-size: .82rem; color: var(--zirph-soft); }
.zirph-tab tbody th { min-width: 190px; }
.zirph-tname { display: block; font-weight: 700; margin-bottom: 4px; }
.zirph-tab .zirph-btn { padding: 7px 15px; font-size: .9rem; }
.zirph-tab tr.zirph-aus { display: none; }
.zirph-tab tr.zirph-treffer th { box-shadow: inset 4px 0 0 var(--zirph-accent); }
@media (max-width: 760px) {
  .zirph-tabwrap { border: 0; background: none; overflow: visible; }
  .zirph-tab thead { display: none; }
  .zirph-tab, .zirph-tab tbody, .zirph-tab tr, .zirph-tab th, .zirph-tab td { display: block; }
  .zirph-tab caption { display: block; padding: 0 0 10px; }
  .zirph-tab tr { background: var(--zirph-surface); border: 1px solid var(--zirph-line); border-radius: var(--zirph-r); margin-bottom: 12px; padding: 6px 0; }
  .zirph-tab th, .zirph-tab td { border: 0; padding: 5px 16px; }
  .zirph-tab td[data-l]:not([data-l=""])::before { content: attr(data-l) ': '; color: var(--zirph-soft); font-size: .85rem; }
  .zirph-tab tr.zirph-aus { display: none; }
}

/* Brillen-Finder */
.zirph-finder { background: var(--zirph-surface); border: 1px solid var(--zirph-line); border-radius: var(--zirph-r2); padding: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; box-shadow: var(--zirph-shadow); margin-bottom: 20px; }
.zirph-finder[hidden] { display: none; }
.zirph-q { border: 0; margin: 0; padding: 0; min-width: 0; }
.zirph-q legend { font: 700 1rem ZirphH, sans-serif; margin-bottom: 10px; padding: 0; }
.zirph-q label { display: flex; gap: 10px; align-items: flex-start; padding: 8px 12px; border: 1px solid var(--zirph-line); border-radius: 12px; margin-bottom: 7px; cursor: pointer; font-size: .95rem; }
.zirph-q label:has(input:checked) { border-color: var(--zirph-accent); box-shadow: 0 0 0 1px var(--zirph-accent); background: #f6f4ff; }
.zirph-q input { margin-top: 5px; accent-color: var(--zirph-accent); flex: none; }
.zirph-finder-out { grid-column: 1 / -1; margin: 0; font-weight: 600; background: var(--zirph-bg); border-radius: 12px; padding: 12px 16px; }
@media (max-width: 860px) { .zirph-finder { grid-template-columns: 1fr; } }

/* Infokästen, Bilder, FAQ */
.zirph-box { background: #eef9fc; border: 1px solid #c6ebf4; border-radius: var(--zirph-r); padding: 14px 18px; margin: 1.2em 0; max-width: 76ch; }
.zirph-box p:last-child { margin: 0; }
.zirph-fig { margin: 1.4em 0; max-width: 76ch; }
.zirph-fig img { border-radius: var(--zirph-r2); width: 100%; }
.zirph-fig figcaption { font-size: .85rem; color: var(--zirph-soft); margin-top: 6px; }
.zirph-arten { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin: 16px 0; }
.zirph-art { background: var(--zirph-surface); border: 1px solid var(--zirph-line); border-radius: var(--zirph-r2); overflow: hidden; }
.zirph-art img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.zirph-art div { padding: 14px 16px 16px; }
.zirph-art h3 { margin: 6px 0 6px; }
.zirph-art p { margin: 0; font-size: .95rem; }
.zirph-faq details { background: var(--zirph-surface); border: 1px solid var(--zirph-line); border-radius: var(--zirph-r); margin-bottom: 10px; max-width: 76ch; }
.zirph-faq summary { cursor: pointer; padding: 13px 18px; font-weight: 600; }
.zirph-faq details > div { padding: 0 18px 12px; }
.zirph-stand { font-size: .88rem; color: var(--zirph-soft); }

/* Fuß */
.zirph-foot { background: var(--zirph-primary); color: #c9cfdd; font-size: .93rem; }
.zirph-foot-in { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 26px; padding-top: 30px; padding-bottom: 30px; }
.zirph-foot-h { color: #fff; font-weight: 700; margin-bottom: 8px; }
.zirph-foot ul { list-style: none; padding: 0; margin: 0; }
.zirph-foot li { margin-bottom: 4px; }
.zirph-foot a { color: #fff; }
.zirph-foot-note { margin: 0; font-size: .85rem; }
@media (max-width: 760px) { .zirph-foot-in { grid-template-columns: 1fr; } }
.zirph-quellen { background: var(--zirph-bg); border-radius: var(--zirph-r); padding: 10px 16px; font-size: .9rem; }
.zirph-quellen summary { cursor: pointer; font-weight: 600; }
.zirph-quellen ul { margin: 10px 0 4px; padding-left: 1.2em; }
.zirph-ohne { color: var(--zirph-soft); }
.zirph-card .zirph-badge { align-self: flex-start; }
.zirph-facts div:nth-child(n+5) { grid-column: 1 / -1; }
@media (max-width: 760px) { .zirph-tab td:has(.zirph-ohne) { display: none; } }