/* ==========================================================
   SEORCH Orbit – Ergebnis eines SEO Checks
   Benötigt base.css + pages.css
   ========================================================== */

.rpage { padding-block: clamp(28px, 5vw, 56px) 64px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }

/* ---------- Hero ---------- */
.rhero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.rhero__title { margin: 0 0 24px; font-weight: 800; letter-spacing: -.045em; line-height: .95; font-size: clamp(34px, 5.2vw, 72px); overflow-wrap: break-word; }
.rhero__title span { display: block; margin-bottom: 10px; font: 700 13px var(--mono); letter-spacing: .14em; text-transform: uppercase; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .14em; }
.rmeta { margin: 0 0 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rmeta > div { padding: 12px 16px; border-radius: var(--r); background: var(--glass-2); border: 1px solid var(--stroke); min-width: 0; }
.rmeta--wide { grid-column: 1 / -1; }
.rmeta dt { font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.rmeta dd { margin: 0; font-size: 15px; font-weight: 500; overflow-wrap: anywhere; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.rmeta a { color: var(--text); text-decoration-color: var(--c2); text-underline-offset: 3px; }
ul.ractions { gap: 4px; width: 100%; } /* so breit wie die Karten darüber, Aktionen gleichmäßig verteilt */
.ractions > li { flex: 1 1 auto; display: flex; }
.ractions > li > a { flex: 1; justify-content: center; }
.ractions a { font: 700 12px var(--mono); letter-spacing: .06em; }
.ractions svg { width: 16px; height: 16px; }

.browser { border-radius: 10px; overflow: hidden; background: var(--glass-2); border: 1px solid var(--stroke); box-shadow: var(--shadow-lg); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease); }
.rhero__shot { margin: 0; perspective: 1000px; }
.browser__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--stroke); }
.browser__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--stroke-2); }
.browser__bar i:first-child { background: var(--c1); } .browser__bar i:nth-child(2) { background: var(--c3); } .browser__bar i:nth-child(3) { background: var(--c4); }
.browser__bar span { margin-left: 10px; flex: 1; padding: 4px 12px; border-radius: 8px; background: var(--bg-2); font: 500 12px var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browser a { display: block; max-height: 440px; overflow: hidden; }
.browser img { width: 100%; }
/* Desktop: Screenshot oben bündig mit den Boxen, unten mit der Aktionsleiste */
@media (min-width: 961px) {
  .rhero { grid-template-areas: "crumbs ." "title ." "meta shot" "acts shot"; row-gap: 0; align-items: start; }
  .rhero__info { display: contents; }
  .rhero__info > .page-hero__crumbs { grid-area: crumbs; }
  .rhero__title { grid-area: title; }
  .rmeta { grid-area: meta; }
  ul.ractions { grid-area: acts; }
  .rhero__shot { grid-area: shot; align-self: stretch; display: flex; }
  .rhero__shot .browser { flex: 1; display: flex; flex-direction: column; }
  .rhero__shot .browser > a, .rhero__shot .browser__wait { flex: 1 1 0; min-height: 0; max-height: none; }
  .rhero__shot .browser img { height: 100%; object-fit: cover; object-position: top; }
}

/* ---------- Summary ---------- */
.rsum { display: grid; gap: 24px; }
.rsum__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; }
.rsum__head h2 { margin: 0; font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -.03em; }
.rsum__head p { margin: 0; color: var(--text-2); }
.rsum__grid { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr); gap: 24px; align-items: start; }
.rsum__totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tot { display: grid; gap: 2px; text-align: left; padding: 16px 18px; border-radius: var(--r); border: 1px solid var(--stroke); background: var(--glass-2); transition: transform .3s var(--spring), box-shadow .3s; }
.tot:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.tot b { font-size: clamp(34px, 4vw, 48px); line-height: 1; letter-spacing: -.04em; }
.tot span { font-size: 13px; font-weight: 600; color: var(--muted); }
.tot--err b { color: var(--c1); } .tot--warn b { color: var(--c3); } .tot--ok b { color: var(--c4); }
.distbar { grid-column: 1 / -1; display: flex; height: 12px; border-radius: 4px; overflow: hidden; gap: 3px; }
.distbar span { flex: var(--w) 1 0; border-radius: 4px; transform-origin: left; animation: grow 1.2s var(--ease) both; }
.distbar .err { background: var(--c1); } .distbar .warn { background: var(--c3); animation-delay: .1s; } .distbar .ok { background: var(--c4); animation-delay: .2s; }
@keyframes grow { from { transform: scaleX(0); } }

.rings { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.rings a { display: grid; justify-items: center; gap: 6px; padding: 14px 8px 12px; border-radius: var(--r); text-decoration: none; text-align: center; background: var(--glass-2); border: 1px solid var(--stroke); transition: transform .3s var(--spring), border-color .2s; height: 100%; }
.rings a:hover { transform: translateY(-3px); border-color: var(--c); }
.ring { width: 62px; height: 62px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 7; stroke-linecap: butt; }
.ring__bg { stroke: var(--bg-2); }
.rings__t { font-size: 13px; font-weight: 700; line-height: 1.2; }
.rings__n { display: flex; gap: 6px; font: 600 11px var(--mono); }
.rings__n .ok { color: var(--c4); } .rings__n .warn { color: var(--c3); } .rings__n .err { color: var(--c1); }
.rings__n i { font-style: normal; }

.todo { border-radius: var(--r-lg); background: color-mix(in srgb, var(--c1) 6%, var(--glass-2)); border: 1px solid color-mix(in srgb, var(--c1) 22%, transparent); }
.todo summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 16px 20px; font-weight: 700; font-size: 17px; }
.todo summary::-webkit-details-marker { display: none; }
.todo summary::after { content: "+"; margin-left: auto; font-size: 22px; font-weight: 400; transition: transform .3s var(--spring); }
.todo[open] summary::after { transform: rotate(45deg); }
.todo__list { list-style: none; margin: 0; padding: 0 10px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.todo__list a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 6px; text-decoration: none; font-size: 14px; line-height: 1.35; }
.todo__list a:hover { background: var(--glass-2); }
.todo__list .st { width: 20px; height: 20px; font-size: 10px; box-shadow: none; }
.todo__t { flex: 1; min-width: 0; }
.todo__list .badge-s { flex: none; }


/* ---------- Sticky bar ---------- */
.rbar {
  position: sticky; top: 86px; z-index: 50; display: flex; align-items: center; gap: 12px; padding: 8px;
  border-radius: 14px; background: var(--glass-2); border: 1px solid var(--stroke); box-shadow: var(--shadow);
  backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5);
}
.rbar__chips { flex: 1; min-width: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; mask-image: linear-gradient(90deg, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); }
.rbar__chips::-webkit-scrollbar { display: none; }
.rbar__chips a { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 8px; text-decoration: none; font-size: 14px; font-weight: 600; color: var(--text-2); white-space: nowrap; transition: background .2s, color .2s; }
.rbar__chips a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.rbar__chips a i { font: normal 700 11px var(--mono); color: var(--c1); }
.rbar__chips a:hover { background: var(--bg-2); color: var(--text); }
.rbar__chips a.is-active, .rbar__chips a.is-active:hover { background: var(--text); color: #fff; -webkit-text-fill-color: #fff; }
.rbar__chips a.is-active::before { background: #fff; }
.rbar__chips a.is-active i { color: #ff6b6b; -webkit-text-fill-color: #ff6b6b; }
.rbar__tools { display: flex; align-items: stretch; gap: 8px; flex: none; } /* Suchfeld so hoch wie der Filter-Umschalter */
.rfilter { margin: 0; }
.rfilter button { padding: 8px 14px; font-size: 14px; }
.rsearch { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--stroke); }
.rsearch:focus-within { border-color: var(--c2); }
.rsearch svg { width: 18px; height: 18px; color: var(--muted); }
.rsearch input { width: 140px; border: 0; outline: 0; background: transparent; color: var(--text); font: 500 15px var(--font); }

/* ---------- Sections ---------- */
.rsections { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.rsec { padding: clamp(16px, 2.4vw, 28px); border-radius: 14px; background: var(--glass-2); border: 1px solid var(--stroke); box-shadow: var(--shadow); scroll-margin-top: 160px; }
.rsec[hidden] { display: none; }
.rsec__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.rsec__ico { width: 44px; height: 44px; flex: none; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, color-mix(in srgb, var(--c) 80%, #fff), var(--c)); box-shadow: 0 10px 22px -8px var(--c); }
.rsec__ico svg { width: 22px; height: 22px; }
.rsec__head h2 { margin: 0; flex: 1; min-width: 0; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.1; letter-spacing: -.03em; }
/* optisch mittig zu Symbol und Zählern: Box auf Versalhöhe bis Grundlinie zuschneiden (Browser ohne text-box: wie bisher) */
.rsec__head h2 { text-box: trim-both cap alphabetic; }
.rsec__head h2 a { text-decoration: none; }
.rsec__counts { display: flex; gap: 6px; flex: none; }
.cnt { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px; border-radius: 8px; font: 700 13px var(--mono); }
.cnt::before { font-size: 11px; }
.cnt--ok { color: var(--c4); background: color-mix(in srgb, var(--c4) 13%, transparent); } .cnt--ok::before { content: "✓"; }
.cnt--warn { color: var(--c3); background: color-mix(in srgb, var(--c3) 15%, transparent); } .cnt--warn::before { content: "!"; }
.cnt--err { color: var(--c1); background: color-mix(in srgb, var(--c1) 13%, transparent); } .cnt--err::before { content: "✕"; }

/* TEST einspaltig (vorher zweispaltig: grid-template-columns: repeat(2, minmax(0, 1fr))) */
.rgroups { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: start; }
.rgroup { min-width: 0; padding: 12px 16px; border-radius: var(--r-lg); background: var(--glass-2); border: 1px solid var(--stroke); }
.rgroup[hidden] { display: none; }
.rgroup--wide { grid-column: 1 / -1; }
.rgroup__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 4px; padding: 0 2px; }
.rgroup__head h3 { margin: 0; font-size: 17px; letter-spacing: -.01em; line-height: 1.3; }
.rhelp { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--stroke-2); background: var(--bg-2); font-weight: 800; font-size: 14px; color: var(--text-2); transition: background .2s, color .2s; }
.rhelp:hover { background: var(--c2); color: #fff; border-color: transparent; }

.ritems { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
/* kompakt, tabellenartig: Prüfungen als Zeilen mit Trennlinie */
.ritems > .ritem + .ritem { border-top: 1px solid var(--stroke); border-radius: 0; }
.ritem { display: flex; gap: 12px; align-items: flex-start; padding: 10px 6px; border-radius: 6px; transition: background .2s; scroll-margin-top: 180px; }
.ritem[hidden] { display: none; }
.ritem:target, .ritem.is-flash { background: color-mix(in srgb, var(--c1) 10%, transparent); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c1) 40%, transparent); }
.ritem .st { width: 24px; height: 24px; font-size: 12px; margin-top: 1px; }
.ritem__body { flex: 1; min-width: 0; }
.ritem p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-2); overflow-wrap: anywhere; }
.ritem b { color: var(--text); font-weight: 700; }
.ritem b.good { color: color-mix(in srgb, var(--c4) 75%, var(--text)); }
.ritem b.warn { color: color-mix(in srgb, var(--c3) 75%, var(--text)); }
.ritem b.err { color: var(--c1); }
.ritem small { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.ritem a { color: var(--text); text-decoration-color: var(--c2); text-underline-offset: 3px; }
.ritem--note { padding-left: 44px; }
.ritem--note p { font-size: 14px; color: var(--muted); }
.ritem--credit { align-items: center; padding: 8px 6px 2px 44px; font-size: 12px; color: var(--muted); }
.ritem--credit img { height: 22px; width: auto; opacity: .75; }
.ritem--credit a { color: var(--text-2); }

.rdetail { margin-top: 4px; }
.rdetail summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 8px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c2); background: color-mix(in srgb, var(--c2) 10%, transparent); transition: background .2s; }
.rdetail summary::-webkit-details-marker { display: none; }
.rdetail summary::after { content: "›"; font-size: 16px; transition: transform .3s var(--spring); }
.rdetail[open] summary::after { transform: rotate(90deg); }
.rdetail summary i { font: normal 600 11px var(--mono); padding: 1px 6px; border-radius: 4px; background: var(--c2); color: #fff; }
.rdetail summary:hover { background: color-mix(in srgb, var(--c2) 18%, transparent); }
.rdetail__body { margin-top: 10px; padding: 14px; border-radius: 6px; background: var(--bg-2); animation: drop .35s var(--spring); }
.rdetail__t { margin: 0 0 8px !important; font-weight: 700; color: var(--text) !important; font-size: 13px !important; }
.rlist { margin: 0; padding: 0 0 0 1.6em; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.rlist li { overflow-wrap: anywhere; padding: 1px 0; }
.rlist li::marker { color: var(--muted); font: 500 11px var(--mono); }
.rlist li.u { font: 12.5px/1.6 var(--mono); }
.rlist.is-long:not(.is-open) { max-height: 300px; overflow: hidden; mask-image: linear-gradient(#000 70%, transparent); -webkit-mask-image: linear-gradient(#000 70%, transparent); }
.rmore { margin-top: 8px; }
.rtext { max-height: 220px; overflow: auto; font-size: 13.5px !important; line-height: 1.6 !important; }

.bots { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.bot { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; font-size: 13px; font-weight: 500; background: var(--glass-2); border: 1px solid var(--stroke); }
.bot::before { font-weight: 800; }
.bot--ok::before { content: "✓"; color: var(--c4); } .bot--err::before { content: "✕"; color: var(--c1); } .bot--info::before { content: "•"; color: var(--muted); }

.meter { margin-top: 10px; display: flex; align-items: center; gap: 12px; }
.meter span { flex: 1; height: 10px; border-radius: 4px; background: linear-gradient(90deg, var(--c4), var(--c3), var(--c1)); position: relative; }
.meter span::after { content: ""; position: absolute; top: 50%; left: calc(var(--v) * 100%); width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--bg); border: 3px solid var(--text); box-shadow: var(--shadow); }
.meter b { font: 700 12px var(--mono); white-space: nowrap; }

/* readability gauge */
.gauge { position: relative; width: 150px; margin: 4px auto 6px; text-align: center; }
.gauge svg { width: 150px; height: 88px; }
.gauge path { fill: none; stroke-width: 12; stroke-linecap: round; }
.gauge__bg { stroke: var(--bg-2); }
.gauge__val { stroke: var(--c4); stroke-dasharray: 157; stroke-dashoffset: calc(157 * (1 - var(--v))); transition: stroke-dashoffset 1.2s var(--ease); }
.gauge b { position: absolute; left: 0; right: 0; top: 34px; font-size: 32px; letter-spacing: -.03em; line-height: 1; }
.gauge span { display: block; margin-top: -8px; font: 600 11px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }

/* keywords */
.rinfo, .rlead, .rlegend { margin: 0 0 16px; color: var(--text-2); font-size: 15px; max-width: 80ch; }
.rlead { font-size: clamp(16px, 1.6vw, 18px); line-height: 1.6; margin: 0; }
.rlead b { color: var(--text); }
.rlegend { margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.rlegend a { color: inherit; }
.kw { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.kw__row { display: grid; grid-template-columns: 32px minmax(0, 1fr) 56px; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 6px; background: var(--bg-2); }
.kw__row.is-more { display: none; }
.kw.is-open .kw__row.is-more { display: grid; }
.kw__n { font: 600 12px var(--mono); color: var(--muted); text-align: center; }
.kw__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.kw__kw { font-size: 17px; }
.kw__meta { font: 500 12px var(--mono); color: var(--muted); }
.kw__bar { margin: 6px 0; height: 6px; border-radius: 4px; background: color-mix(in srgb, var(--text) 8%, transparent); overflow: hidden; }
.kw__bar span { display: block; height: 100%; width: calc(var(--v) * 100%); border-radius: inherit; background: var(--grad); }
.kw__where { display: flex; flex-wrap: wrap; gap: 4px; }
.kw__where span { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 6px; background: var(--glass-2); color: var(--text-2); border: 1px solid var(--stroke); }
.kw__vis { font-size: 22px; font-weight: 800; letter-spacing: -.03em; text-align: right; }
.kw__row:nth-child(-n+3) .kw__vis { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .14em; }
.kw__gap { list-style: none; display: flex; align-items: center; gap: 12px; margin: 6px 0; font: 600 12px var(--mono); color: var(--c3); }
.kw__gap::before, .kw__gap::after { content: ""; flex: 1; border-top: 2px dashed color-mix(in srgb, var(--c3) 55%, transparent); }
.kw__toggle { margin-top: 12px; }

/* heading tree */
.htree { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 3px; font-size: 14px; }
.htree.is-long:not(.is-open) { max-height: 360px; overflow: hidden; mask-image: linear-gradient(#000 70%, transparent); -webkit-mask-image: linear-gradient(#000 70%, transparent); }
.hx { display: flex; align-items: baseline; gap: 10px; padding: 5px 10px; border-radius: 6px; }
.hx b { flex: none; width: 30px; text-align: center; font: 700 11px var(--mono); padding: 2px 0; border-radius: 6px; color: #fff; }
.hx--h1 b { background: var(--c1); } .hx--h2 { padding-left: 34px; } .hx--h2 b { background: var(--c2); }
.hx--h3 { padding-left: 58px; } .hx--h3 b { background: var(--c4); }
.hx--h4, .hx--h5, .hx--h6 { padding-left: 82px; } .hx--h4 b, .hx--h5 b, .hx--h6 b { background: var(--muted); }
.hx span { color: var(--text-2); overflow-wrap: anywhere; }
.hx--h1 span { font-weight: 700; color: var(--text); }

/* devices */
.devices { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-end; justify-content: center; margin-top: 20px; }
.device { margin: 0; display: grid; gap: 10px; justify-items: center; text-align: center; }
.device a { display: block; overflow: hidden; background: var(--text); padding: 8px; box-shadow: var(--shadow-lg); }
.device--phone a { width: 190px; height: 400px; border-radius: 14px; }
.device--tab a { width: min(440px, 80vw); height: 320px; border-radius: 14px; }
.device img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 10px; }
.device--tab img { border-radius: 10px; }
.device figcaption { font-size: 13px; color: var(--muted); font-weight: 500; }


/* phrases */
.phtabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 16px; border-radius: 8px; background: var(--bg-2); max-width: 100%; overflow-x: auto; }
.phtabs button { border: 0; background: none; padding: 8px 16px; border-radius: 8px; font-weight: 600; font-size: 14px; color: var(--text-2); white-space: nowrap; }
.phtabs button[aria-selected="true"] { background: var(--glass-2); color: var(--text); box-shadow: var(--shadow); }
.ph__title { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.ph ol { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 28px; }
.ph li { break-inside: avoid; display: grid; grid-template-columns: minmax(0, 1fr) 90px 44px 54px; gap: 10px; align-items: center; padding: 5px 0; font-size: 14px; border-bottom: 1px solid var(--stroke); }
.ph__w { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ph__bar { height: 6px; border-radius: 4px; background: color-mix(in srgb, var(--text) 8%, transparent); position: relative; overflow: hidden; }
.ph__bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); border-radius: inherit; background: var(--c5); }
.ph li b { font: 700 13px var(--mono); text-align: right; }
.ph li small { font: 500 12px var(--mono); color: var(--muted); text-align: right; }

.rempty { margin: 0; padding: 40px; text-align: center; color: var(--muted); border-radius: var(--r-lg); background: var(--glass); border: 1px dashed var(--stroke-2); }

/* newsletter */
.rnews { display: flex; align-items: center; gap: 32px; justify-content: space-between; background: linear-gradient(var(--glass-2), var(--glass-2)) padding-box, var(--grad) border-box; border: 2px solid transparent; }
.rnews h2 { margin: 0 0 12px; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.03em; line-height: 1.1; }
.rnews p { margin: 0 0 10px; color: var(--text-2); max-width: 70ch; }
.rnews a:not(.cta) { color: var(--text); text-decoration-color: var(--c2); text-underline-offset: 3px; }
.rnews .cta { flex: none; text-decoration: none; }

/* help dialog */
.rhelpdlg { padding: 0; border: 0; background: transparent; color: var(--text); width: min(560px, calc(100vw - 24px)); }
.rhelpdlg::backdrop { background: rgba(10, 10, 10, .35); backdrop-filter: blur(8px); }
.rhelpdlg__panel { padding: 20px 24px 24px; border-radius: var(--r-lg); background: var(--glass-2); border: 1px solid var(--stroke); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); box-shadow: var(--shadow-lg); }
.rhelpdlg[open] .rhelpdlg__panel { animation: drop .45s var(--spring); }
.rhelpdlg__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.rhelpdlg__t { margin: 0; font-weight: 800; font-size: 20px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .rbar { flex-wrap: wrap; }
  .rbar__chips { flex-basis: 100%; }
  .rbar__tools { flex: 1; justify-content: space-between; }
}
@media (max-width: 960px) {
  .rhero { grid-template-columns: 1fr; }
  .rhero__shot { order: -1; }
  .browser a { max-height: 300px; }
  .rsum__grid { grid-template-columns: 1fr; }
  .rgroups { grid-template-columns: 1fr; }
  .todo__list { grid-template-columns: 1fr; }
  .ph ol { columns: 1; }
}
@media (max-width: 680px) {
  .rmeta { grid-template-columns: 1fr; }
  ul.ractions { display: grid; grid-template-columns: 1fr 1fr; }
  ul.ractions a { padding: 0 8px; white-space: nowrap; }
  .rbar { top: 74px; border-radius: 10px; padding: 6px; gap: 6px; }
  .rbar__tools { flex-wrap: wrap; }
  .rfilter { flex: 1 1 100%; display: grid; }
  .rfilter button { padding: 8px 4px; font-size: 13px; }
  .rsearch { flex: 1; }
  .rsearch input { width: 100%; }
  .rsec { border-radius: 14px; scroll-margin-top: 230px; }
  .rsec__head { flex-wrap: wrap; gap: 12px; }
  .rsec__head h2 { flex-basis: calc(100% - 70px); }
  .rsec__counts { width: 100%; }
  .rgroup { padding: 14px 12px; }
  .ritem { gap: 10px; padding: 9px 2px; scroll-margin-top: 240px; }
  .ritem--note, .ritem--credit { padding-left: 36px; }
  .kw__row { grid-template-columns: 24px minmax(0, 1fr) 44px; gap: 8px; padding: 10px 8px; }
  .kw__vis { font-size: 18px; }
  .hx--h2 { padding-left: 22px; } .hx--h3 { padding-left: 40px; }
  .device--phone a { width: 150px; height: 320px; }
  .ph li { grid-template-columns: minmax(0, 1fr) 60px 36px; }
  .ph li small { display: none; }
  .rnews { flex-direction: column; align-items: stretch; }
  .rsum__totals { gap: 8px; }
  .rings { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .rings a { padding: 10px 4px; }
  .ring { width: 46px; height: 46px; }
  .rings__t { font-size: 12px; }
  .todo summary { padding: 14px 16px; font-size: 16px; }
  .todo__list { padding: 0 4px 8px; }
  .todo__list a { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 4px 10px; padding: 10px 8px; }
  .todo__list .badge-s { grid-column: 2; justify-self: start; }
  .tot { padding: 12px; }
}

/* ---------- Live-Check: Zustände (Startseite + Permalink) ---------- */
/* Während eines Checks zeigt die Startseite nur noch das Ergebnis */
body.is-checking main > :not(#result) { display: none !important; }
body.is-checking #result { display: block; }
#result > .rload, #result > .rerror { margin: clamp(28px, 5vw, 56px) auto 64px; width: min(var(--max), calc(100% - 2 * var(--gutter))); }
.rload { display: grid; justify-items: center; gap: 6px; text-align: center; padding: clamp(32px, 6vw, 64px) 24px; }
.rload .loader { padding: 0 0 8px; }
.rload h2 { margin: 0; font-size: clamp(22px, 3vw, 32px); letter-spacing: -.02em; overflow-wrap: anywhere; }
.rload p { margin: 0; color: var(--text-2); }
.rerror { display: grid; gap: 16px; justify-items: start; }
.rerror h2 { margin: 0; font-size: clamp(22px, 3vw, 32px); letter-spacing: -.02em; }
.rerror__msg { color: var(--text-2); }
.rerror__msg h1, .rerror__msg h2, .rerror__msg h3 { font-size: 18px; margin: 0 0 6px; color: var(--text); }
.spin { display: inline-block; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--stroke-2); border-top-color: var(--red); animation: rot .8s linear infinite; vertical-align: -3px; }
.ritem--loading { align-items: center; padding-left: 10px; }
.ritem--loading p { color: var(--muted); font-size: 14px; }
.rmeta__pending { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); font-weight: 500; }
.browser__wait { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 240px; color: var(--muted); font-size: 14px; }

/* Hilfe-Dialog: lange Texte scrollen im Panel, Kopf bleibt stehen */
.rhelpdlg { margin: auto; }
.rhelpdlg__panel { display: flex; flex-direction: column; max-height: calc(100dvh - 32px); padding-bottom: 0; }
.rhelpdlg__head { flex: none; padding-bottom: 8px; border-bottom: 1px solid var(--stroke); }
#helpContent { overflow-y: auto; overscroll-behavior: contain; padding: 12px 0 20px; min-height: 0; }
#helpContent h1, #helpContent h2 { font-size: 22px; letter-spacing: -.02em; margin: .6em 0 .3em; }
#helpContent h3 { font-size: 17px; }

/* PageSpeed-Filmstreifen */
.ritem--film { display: block; padding: 10px 6px 4px; min-width: 0; }
.film { list-style: none; margin: 0; padding: 0 0 6px; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px 12px; min-width: 0; }
.film li { display: grid; gap: 4px; justify-items: center; text-align: center; }
.film img { width: auto; max-width: 100%; max-height: 260px; aspect-ratio: auto; border-radius: 4px; border: 1px solid var(--stroke-2); background: #fff; box-shadow: var(--shadow); }
.film span { font: 500 11.5px/1.25 var(--mono); color: var(--muted); }

/* Externer Dienst nicht erreichbar: neutral, kein Fehler */
.st--na { background: var(--gray); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gray) 18%, transparent); }
.st--na::before { content: "–"; }
.ritem[data-status="na"] p { color: var(--muted); }

/* ---------- Hilfe-Dialog: Inhalt aus den Suchmaschinen-Tipps (ohne content.css) ---------- */
.rhelpdlg { width: min(640px, calc(100vw - 24px)); }
#helpContent.prose { max-width: none; font-size: 15.5px; }
#helpContent .tip__head { display: flex; align-items: center; gap: 14px; margin: 4px 0 18px; }
#helpContent .tip__num { flex: none; width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; color: #fff; font: 800 15px var(--mono); background: var(--text); }
#helpContent .tip__head h2 { margin: 0; font-size: 22px; line-height: 1.15; }
#helpContent .tip__sub { margin: 4px 0 0; font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
#helpContent .hints { display: grid; gap: 12px; }
#helpContent .hint { --hc: var(--gray); padding: 16px 18px 6px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--hc) 8%, var(--glass-2)); border: 1px solid color-mix(in srgb, var(--hc) 22%, transparent); }
#helpContent .hint--good { --hc: var(--c4); }
#helpContent .hint--bad { --hc: var(--c1); }
#helpContent .hint--info { --hc: var(--c3); }
#helpContent .hint--code { padding: 0; background: none; border: 0; }
#helpContent .hint h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 15.5px; line-height: 1.3; }
#helpContent .hint h4 .st { width: 22px; height: 22px; font-size: 11px; }
#helpContent .hint ul { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
#helpContent .hint li { position: relative; margin: 0; padding-left: 20px; font-size: 14.5px; line-height: 1.5; color: var(--text-2); overflow-wrap: anywhere; }
#helpContent .hint li::before { content: ""; position: absolute; left: 3px; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--hc); }
#helpContent .hint a { color: var(--text); text-decoration-color: var(--hc); text-underline-offset: 3px; }
#helpContent .codebox { border-radius: var(--r); overflow: hidden; background: #0d0d0d; }
#helpContent .codebox__bar { padding: 7px 14px; background: #1f1f1f; color: #bdbdbd; font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
#helpContent .codebox .code, #helpContent pre { margin: 0; padding: 14px 16px; border-radius: 0; background: #0d0d0d; color: #ececec; font: 13px/1.55 var(--mono); white-space: pre; overflow-x: auto; }
#helpContent pre code { background: none; padding: 0; color: inherit; }
#helpContent .hl { color: #ff8a8a; }
#helpContent > p:last-child { margin: 16px 0 0; font-size: 14px; }

/* Anzeige mittig */
.rad a { display: block; width: fit-content; max-width: 100%; margin-inline: auto; }

/* Google Suchergebnisse (Top 30) */
.ritem--rank { display: flex; gap: 14px; align-items: flex-start; padding: 4px 6px 12px; }
.ritem--rank p { margin: 0; font-size: 15px; color: var(--text-2); }
.rank-wrap { max-height: 420px; overflow: auto; }
.rank-table { font-size: 13.5px; }
.rank-table td { padding: 7px 12px; vertical-align: top; }
.rank-table td.num { width: 1%; color: var(--muted); }
.rank-table td:nth-child(2) { max-width: 360px; overflow-wrap: anywhere; }
.rank-table tr.is-own td { background: color-mix(in srgb, var(--c4) 12%, transparent); font-weight: 700; }
.rank-table tr.is-own td.num { color: var(--c4); }
/* Top-10-Tabelle vollständig zeigen, ohne eigenen Scrollbereich */
.rank-wrap { max-height: none; overflow: visible; }

/* ---------- Druck / „Als PDF speichern“ (PDF-Button = window.print) ---------- */
@media print {
  @page { size: A4; margin: 14mm 12mm; }
  html, body { background: #fff !important; }
  body { font-size: 12pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .aurora, .nav, .drawer, .footer, .orb, .skip, .ractions, .rbar, .rnews, .rad, .copybtn, [data-copy], [data-copy-perma] { display: none !important; }
  .rhelp, .rdetail:not([open]), .rdetail > summary, .rmore, .todo > summary::after { display: none !important; } /* Bedienelemente; aufgeklappte Listen bleiben */
  main, .wrap { max-width: none !important; width: auto !important; padding: 0 !important; margin: 0 !important; }
  #result > *, .rhero, .rsum, .rsections { width: auto !important; margin-left: 0 !important; margin-right: 0 !important; }
  * { box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; animation: none !important; transition: none !important; }
  .browser { transform: none !important; }
  /* Druckseite ist schmaler als 960 px: Kopf trotzdem zweispaltig, Angaben links, Screenshot rechts */
  .rhero { grid-template-columns: minmax(0, 1fr) 38%; align-items: start; }
  .rhero__shot { order: 0; }
  .rmeta { grid-template-columns: 1fr 1fr; }
  .browser a { max-height: 360px; }
  /* Verlaufstext druckt als Kasten: einfarbig rot */
  .rhero__title span { background: none !important; color: var(--c1) !important; -webkit-text-fill-color: var(--c1); }
  /* Angaben kompakt: kleinere Schrift, User Agent und Permalink über die volle Breite */
  .rmeta { gap: 6px; margin-bottom: 0; }
  .rmeta > div { padding: 8px 12px; }
  .rmeta dt { margin-bottom: 2px; }
  .rmeta dd { font-size: 12px; line-height: 1.4; }
  .rmeta > div:has(> dt + dd):nth-last-child(2) { grid-column: 1 / -1; }
  /* Überblick darf über die Seite laufen (sonst bleibt Seite 1 halb leer), nur einzelne Bausteine nicht trennen */
  .rhero__shot, .ritem, .rmeta > div, .todo__list li, .rsum__totals, .rings > li { break-inside: avoid; page-break-inside: avoid; }
  .rsec__head, h2, h3, .todo > summary, .rsum__head { break-after: avoid; page-break-after: avoid; }
  .rsec { break-before: auto; }
  /* Grid über Seitenwechsel: Chrome lässt Bereiche überlappen – im Druck normaler Blockfluss mit Abständen */
  .rpage, .rsections, .rgroups { display: block !important; }
  .rpage > * + *, .rsections > * + * { margin-top: 18px !important; }
  .rgroups > * + * { margin-top: 10px; }
  .ph ol { columns: auto; } /* mehrspaltiger Text über Seitenwechsel erzeugt in Chrome Leerflächen und eine Leerseite am Ende */
  a { text-decoration: none !important; }
}