/* ==========================================================
   SEORCH Orbit – Tool-Seiten (Ranking Check, Suchvolumen, Keyword
   Tool, Suggest, Content Briefing, CrUX, Hreflang,
   Quelltext-Vergleich, Lokale Rankings).
   Benötigt base.css + pages.css
   ========================================================== */

/* ---------- Hero ---------- */
.tool-hero { position: relative; padding: clamp(40px, 7vw, 88px) var(--gutter) clamp(28px, 4vw, 48px); text-align: center; overflow: hidden; }
body.is-tool-result .tool-hero { display: none; } /* während Laden und Ergebnis nur das Ergebnis zeigen (wie SEO Check) */
body.is-tool-result .tool-out { padding-top: clamp(24px, 4vw, 40px); } /* Abstand zur Menüleiste, wenn die Maske fehlt */
.tool-hero__inner { position: relative; width: min(880px, 100%); margin-inline: auto; }
.tool-hero .page-hero__crumbs { justify-content: center; }
.tool-hero .page-hero__icon { margin: 0 auto 22px; }
.tool-hero__title {
  margin: 0; font-weight: 800; letter-spacing: -.045em; line-height: .95; font-size: clamp(48px, 9vw, 112px); text-wrap: balance;
  background: linear-gradient(180deg, var(--text) 30%, color-mix(in srgb, var(--text) 55%, var(--c2))); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .14em; }
.tool-hero__title--long { font-size: clamp(34px, 5.4vw, 68px); line-height: 1.02; letter-spacing: -.04em; }
.tool-hero__lead { margin: 20px auto 34px; max-width: 36em; color: var(--text-2); font-size: clamp(17px, 1.8vw, 20px); text-wrap: pretty; }

/* orbit decoration (pure CSS sibling of the radar on the home page) */
.tool-orbit { position: absolute; left: 50%; top: 46%; width: min(1000px, 160vw); aspect-ratio: 1; translate: -50% -50%; z-index: -1; pointer-events: none;
  mask-image: radial-gradient(circle, #000 30%, transparent 68%); -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 68%); }
.tool-orbit i { position: absolute; inset: 0; margin: auto; border-radius: 50%; border: 1px dashed var(--stroke-2); animation: rot var(--t, 60s) linear infinite; }
.tool-orbit i:nth-child(1) { width: 34%; height: 34%; --t: 40s; }
.tool-orbit i:nth-child(2) { width: 58%; height: 58%; --t: 70s; animation-direction: reverse; }
.tool-orbit i:nth-child(3) { width: 82%; height: 82%; --t: 110s; border-style: solid; }
.tool-orbit i::after { content: ""; position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--c, var(--c2)); box-shadow: 0 0 0 6px color-mix(in srgb, var(--c, var(--c2)) 18%, transparent), 0 0 18px var(--c, var(--c2)); }
.tool-orbit i:nth-child(1)::after { --c: var(--c1); }
.tool-orbit i:nth-child(2)::after { --c: var(--c4); top: auto; bottom: -5px; }
.tool-orbit i:nth-child(3)::after { --c: var(--c3); }

/* ---------- Form ---------- */
.tool-form { position: relative; text-align: left; }
.tool-form .toolbar { position: relative; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: box-shadow .3s, transform .3s var(--spring); }
.tool-form .toolbar::before {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; z-index: -1; padding: 2px;
  background: var(--grad); opacity: 0; transition: opacity .3s;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.tool-form .toolbar:focus-within { box-shadow: var(--shadow-lg); transform: scale(1.012); }
.tool-form .toolbar:focus-within::before { opacity: 1; }
.tool-form .toolbar input { font-size: 19px; }
.tool-form .toolbar input::placeholder { color: var(--muted); }
.toolbar__ico { width: 22px; height: 22px; color: var(--muted); }
.toolbar__sep { width: 1px; align-self: stretch; margin: 10px 4px; background: var(--stroke-2); flex: none; }
.tool-form .cta { flex: none; }

/* option pills under the bar */
.tool-opts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.tool-opt {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; max-width: 100%; padding: 0 6px 0 16px; border-radius: 8px;
  background: var(--glass); border: 1px solid var(--stroke); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 14px; transition: border-color .2s;
}
.tool-opt:focus-within, .tool-opt:hover { border-color: var(--stroke-2); }
.tool-opt__k { color: var(--muted); font-weight: 500; white-space: nowrap; }
.tool-opt input, .tool-opt select { min-width: 0; height: 34px; border: 0; outline: 0; background: transparent; color: var(--text); font: 600 14px var(--font); }
.tool-opt input { width: 170px; }
.tool-opt input::placeholder { color: var(--muted); font-weight: 500; }
.tool-opt select {
  max-width: 360px; appearance: none; -webkit-appearance: none; padding: 0 30px 0 10px; border-radius: 8px; cursor: pointer;
  background: var(--glass-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a85a0' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 14px;
}
.tool-opt select:focus-visible, .tool-opt input:focus-visible { outline: 2px solid var(--c2); outline-offset: 2px; }
.tool-opt select option { background: var(--bg); color: var(--text); }
.tool-opt svg { width: 16px; height: 16px; color: var(--muted); }
.tool-opt--btn { gap: 8px; padding: 0 16px; color: var(--text-2); font-weight: 500; cursor: pointer; text-align: left; }
.tool-opt--btn::after { content: "+"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--bg-2); font-weight: 600; transition: transform .4s var(--spring); }
.tool-opt--btn[aria-expanded="true"] { background: var(--text); color: var(--bg); border-color: transparent; }
.tool-opt--btn[aria-expanded="true"]::after { transform: rotate(135deg); background: var(--grad); color: #fff; }
.tool-opt--btn h4, .tool-opt--btn span { margin: 0; font: inherit; }

/* expandable option area */
.tool-area { margin: 14px auto 0; max-width: 680px; padding: 20px; border-radius: var(--r-lg); background: var(--glass-2); border: 1px solid var(--stroke); box-shadow: var(--shadow); text-align: left; display: grid; gap: 14px; }
.tool-area:not([hidden]) { animation: drop .4s var(--spring); }
.tool-area[hidden] { display: none; }
.tool-area .small, .tool-step { margin: 0; font: 700 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tool-area .field textarea { min-height: 110px; }

/* textarea card (multi line inputs) */
.tool-box {
  position: relative; display: grid; border-radius: var(--r-lg); padding: 8px;
  background: var(--glass-2); border: 1px solid var(--stroke); box-shadow: var(--shadow-lg);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: box-shadow .3s;
}
.tool-box::before {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; z-index: -1; padding: 2px; background: var(--grad); opacity: 0; transition: opacity .3s;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.tool-box:focus-within::before { opacity: 1; }
.tool-box__label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 12px 14px 0; font-weight: 700; font-size: 15px; }
.tool-box__label small { font-weight: 500; color: var(--muted); font-size: 13px; }
.tool-box textarea {
  width: 100%; min-height: 180px; padding: 10px 14px; border: 0; outline: 0; resize: vertical; background: transparent; color: var(--text);
  font: 500 16px/1.6 var(--font);
}
.tool-box--short textarea { min-height: 120px; }
.tool-box textarea::placeholder { color: var(--muted); }
.tool-box__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 8px 0 0 14px; border-top: 1px solid var(--stroke); }
.tool-box__hint { font-size: 13px; color: var(--muted); }
.tool-count { font: 600 12px var(--mono); color: var(--muted); padding: 4px 10px; border-radius: 8px; background: var(--bg-2); }
.tool-count.is-over { color: #fff; background: var(--c1); }

/* messages */
:is(#errorinfo, #errorinfo2).tool-msg { margin: 16px auto 0; width: fit-content; max-width: 100%; padding: 10px 18px; border-radius: 8px; border: 0; font-weight: 600; font-size: 15px; color: #fff; background: var(--c1); box-shadow: 0 10px 30px -10px var(--c1); text-align: center; animation: drop .4s var(--spring); }
:is(#errorinfo, #errorinfo2).tool-msg:empty { display: none; }
:is(#errorinfo, #errorinfo2).tool-msg.is-info { color: #1d1300; background: var(--c3); box-shadow: 0 10px 30px -10px var(--c3); }
.tool-form.is-shake .toolbar, .tool-form.is-shake .tool-box { animation: shake .45s; }
.cta.is-loading { pointer-events: none; }

/* tabs (two forms on one page) */
.tool-tabs { margin: 0 auto 18px; display: grid; width: fit-content; max-width: 100%; }
.tool-tabs button { white-space: normal; line-height: 1.2; }
.tool-pane[hidden] { display: none; }

/* ---------- Result / output ---------- */
.tool-out { padding-bottom: 8px; }
.tool-out #result:not(.hidden) { margin-bottom: 28px; }
.tool-empty { display: grid; justify-items: center; gap: 10px; padding: 48px 24px; border-radius: 14px; text-align: center; background: var(--glass); border: 1px dashed var(--stroke-2); color: var(--text-2); }
.tool-empty b { font-size: 20px; color: var(--text); }
.tool-empty .st { width: 40px; height: 40px; font-size: 18px; }
#result > .loader { border-radius: 14px; background: var(--glass); border: 1px solid var(--stroke); }

.tool-live { margin: 18px auto 0; max-width: 880px; padding: 20px 24px; border-radius: var(--r-lg); background: var(--glass); border: 1px dashed var(--stroke-2); color: var(--text-2); text-align: center; font-weight: 500; }
.tool-live.is-active { border-style: solid; border-color: color-mix(in srgb, var(--c3) 45%, transparent); background: color-mix(in srgb, var(--c3) 10%, var(--glass-2)); color: var(--text); }

/* ---------- Feature list ---------- */
.tool-feats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.tool-feats h2.tool-feats__t { margin: 0; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; text-wrap: balance; }
.tool-feats__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.tool-feats__list li { display: flex; gap: 12px; align-items: flex-start; padding: 16px 0; border-top: 1px solid var(--stroke); font-size: 15.5px; line-height: 1.5; color: var(--text-2); }
.tool-feats__list li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: color-mix(in srgb, var(--c4) 14%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") no-repeat center / 13px; }
.tool-feats__list li.is-wide { grid-column: 1 / -1; }
.tool-feats__list a { color: var(--text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.tool-feats__side { display: grid; gap: 16px; }
.tool-feats__side p { margin: 0; }

.tool-last { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--stroke); }
.tool-last h3 { margin: 0 0 12px; font: 700 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
#lastview ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
#lastview a { color: var(--text); }

/* ---------- Promo banner ---------- */
.promo { margin: 0; display: grid; place-items: center; }
.promo a { display: block; max-width: min(980px, 100%); border-radius: 14px; transition: transform .4s var(--spring); }
.promo a:hover { transform: translateY(-4px) scale(1.01); }
.promo img, .promo picture { display: block; width: 100%; border-radius: 14px; box-shadow: var(--shadow-lg); }
.promo--obs a { max-width: min(860px, 100%); }

/* ---------- Content panels ---------- */
.tool-content { grid-template-columns: minmax(0, 1fr); padding-bottom: 64px; }
.tool-feats__list li > span { min-width: 0; }
.panel .prose { max-width: 74ch; }
.panel .prose > :last-child { margin-bottom: 0; }
.panel .prose h3 { color: var(--text); }
.panel .prose p { margin: 0 0 1em; }
.panel .prose ul, .panel .prose ol { margin: 0 0 1.2em; }
.panel .table-wrap { margin: 8px 0 24px; }
.panel .table-wrap:last-child { margin-bottom: 0; }
.panel .table td:first-child { color: var(--text); font-weight: 600; }
.panel .split .prose { max-width: none; }
.panel .shot { position: sticky; top: 100px; }
.panel .shot img { width: 100%; }
.panel .shots .shot { position: static; }
.panel h2 + .prose > h3:first-child { margin-top: 0; }
.panel .lead-p { font-size: clamp(18px, 1.8vw, 21px); color: var(--text); }

/* numbered card list (e.g. metrics) */
.cards { list-style: none; counter-reset: c; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; padding: 0 !important; margin: 8px 0 24px; }
.cards li { counter-increment: c; position: relative; margin: 0 !important; padding: 20px 20px 20px 64px; border-radius: var(--r); background: var(--glass-2); border: 1px solid var(--stroke); font-size: 15.5px; line-height: 1.5; transition: transform .35s var(--spring), box-shadow .3s; }
.cards li:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.cards li::before { content: counter(c); position: absolute; left: 18px; top: 18px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 800 14px var(--font); color: #fff; background: var(--c, var(--c2)); box-shadow: 0 6px 14px -6px var(--c, var(--c2)); }
.cards li:nth-child(5n+1) { --c: var(--c1); } .cards li:nth-child(5n+2) { --c: var(--c3); } .cards li:nth-child(5n+3) { --c: var(--c4); } .cards li:nth-child(5n+4) { --c: var(--c2); } .cards li:nth-child(5n+5) { --c: var(--c5); }
.cards li b { color: var(--text); font-size: 17px; }

/* short items as pills inside prose */
.prose ul.pills { padding: 0; margin: 8px 0 20px; }
.prose ul.pills li { margin: 0; color: var(--text); }
.panel .kits { margin-top: 16px; }

/* intro paragraph in hero (hreflang) */
.tool-hero__lead b { color: var(--text); }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .tool-feats { grid-template-columns: 1fr; }
  .panel .shot { position: static; }
}
@media (max-width: 680px) {
  .tool-hero { padding-top: 32px; }
  .tool-hero__lead { margin-bottom: 26px; }
  .tool-form .toolbar { padding: 8px; }
  .tool-form .toolbar:focus-within { transform: none; }
  .toolbar__ico { display: none; }
  .toolbar--split { flex-direction: column; align-items: stretch; gap: 0; }
  .toolbar--split input { flex: none; }
  .toolbar--split .toolbar__sep { width: auto; height: 1px; margin: 0 12px; align-self: auto; }
  .tool-opts { justify-content: stretch; }
  .tool-opt { width: 100%; justify-content: space-between; border-radius: 10px; }
  .tool-opt input { flex: 1; width: auto; }
  .tool-opt select { flex: 1; max-width: none; }
  .tool-opt--btn { justify-content: space-between; min-height: 48px; padding-block: 8px; }
  .tool-box__foot { padding-left: 6px; }
  .tool-box__foot .cta { width: 100%; }
  .tool-area { padding: 16px; }
  :is(#errorinfo, #errorinfo2).tool-msg { border-radius: 10px; }
  .tool-feats__list { grid-template-columns: 1fr; }
  .tool-tabs { width: 100%; }
  .tool-tabs button { padding: 10px 8px; font-size: 13.5px; white-space: normal; }
  .promo img, .promo a { border-radius: 10px; }
  .cards li { padding: 18px 16px 18px 58px; }
  .cards li::before { left: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .tool-orbit i { animation: none; }
}

/* ---------- Ergänzungen ---------- */
.tool-hero__title + .tool-form, .tool-hero__title + .tool-tabs { margin-top: 34px; }
.tool-tabs button[aria-selected="true"] { color: var(--text); }
.tool-example { display: grid; gap: 12px; min-width: 0; }
.tool-example .shot img { max-width: 420px; width: 100%; }
.prose .kits { max-width: none; }
.prose .kit ul { padding: 0; margin: 0; }
.prose .kit li { margin: 0; color: var(--text-2); }
.prose .kit--must li { color: var(--bg); }
.prose .kit li::marker { content: none; }
.tool-area [hidden], .tool-form [hidden] { display: none !important; }

/* Zurück-Icon aller Tools (wie #i-back im SEO Check) */
.res-back::before, .sg-back::before, [data-kit-back]::before, [data-res-back]::before {
  content: ""; width: 16px; height: 16px; flex: none;
  background: currentColor; -webkit-mask: var(--back-ico) center / contain no-repeat; mask: var(--back-ico) center / contain no-repeat;
  --back-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E");
}