/* Seiten-spezifische Styles: Tools-Hub + Tool-Seiten.
   Der Basis-Block (hero/blk/h2wrap/cards3/upsell/ladder/values) ist derselbe wie in
   page-website-audit.css — die Unterseiten-Klassen liegen nicht in styles.css. */

.hero{position:relative;padding:104px 0 56px;text-align:center;
  background:radial-gradient(900px 460px at 82% -10%, var(--pink-dim), transparent 60%),radial-gradient(760px 420px at -6% 0%, var(--y-dim), transparent 55%)}
.hero h1{font-size:clamp(32px,5.4vw,54px);max-width:18ch;margin:0 auto 18px;font-weight:900;letter-spacing:-0.5px;line-height:1.12;color:var(--white)}
.hero .grad{color:var(--y)}
.hero p.lead{font-size:clamp(16px,2.2vw,20px);color:var(--dim);max-width:64ch;margin:0 auto 30px}
.trustline{margin-top:16px;font-size:13px;color:var(--muted)} .trustline b{color:var(--dim)}
section.blk{padding:54px 0;border-top:1px solid var(--border)}
.h2wrap{text-align:center;max-width:64ch;margin:0 auto 36px}
.h2wrap h2{font-size:clamp(24px,3.4vw,34px);margin:0 0 12px;font-weight:900;letter-spacing:-0.5px;color:var(--white)}
.h2wrap p{color:var(--dim);font-size:16px;margin:0}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.c{background:linear-gradient(180deg,var(--bg2),var(--bg));border:1px solid var(--border);border-radius:16px;padding:24px}
.c .ic{width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:14px;background:var(--y-dim)}
.c:nth-child(2) .ic{background:var(--teal-dim)} .c:nth-child(3) .ic{background:var(--pink-dim)}
.c h3{font-size:18px;margin:0 0 8px;color:var(--white)} .c>p{font-size:14px;color:var(--dim);margin:0}
.c ul{list-style:none;margin:12px 0 0;padding:0}
.c ul li{font-size:13px;color:var(--dim);padding:4px 0 4px 16px;position:relative}
.c ul li::before{content:'·';position:absolute;left:4px;color:var(--y);font-weight:900}
.upsell{background:linear-gradient(135deg,var(--pink-dim),var(--teal-dim));border:1px solid var(--border);border-radius:20px;padding:40px;text-align:center}
.upsell h2{font-size:clamp(22px,3.2vw,32px);margin:0 0 14px;color:var(--white);font-weight:900}
.upsell>p{color:var(--dim);max-width:64ch;margin:0 auto 8px;font-size:16px}
.ladder{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:26px 0 28px;text-align:left}
.ladder .step{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:20px}
.ladder .n{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;color:var(--teal);margin-bottom:8px}
.ladder h4{margin:0 0 6px;font-size:16px;color:var(--white)} .ladder p{margin:0;font-size:13px;color:var(--dim)}
.values{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;padding:26px 0}
.values .v{font-size:13px;color:var(--dim);border:1px solid var(--border);border-radius:20px;padding:7px 16px} .values .v b{color:var(--white)}

/* --- Werkzeug-Rahmen ---------------------------------------------------- */
.tool-embed{background:var(--bg2);border:1px solid var(--border);border-radius:18px;padding:8px 22px 22px;box-shadow:0 24px 60px rgba(0,0,0,.35)}

/* --- Zitierfaehige Fakten ----------------------------------------------- */
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.fact{background:var(--bg2);border:1px solid var(--border);border-left:3px solid var(--y);border-radius:12px;padding:18px 20px}
.fact b{display:block;font-size:24px;font-weight:900;color:var(--white);line-height:1.15;margin-bottom:6px}
.fact p{margin:0;font-size:14px;color:var(--dim);line-height:1.6}
.fact cite{display:block;margin-top:8px;font-style:normal;font-size:11.5px;color:var(--muted)}

/* --- Vergleichstabelle --------------------------------------------------- */
.cmp-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:14px;background:var(--bg2)}
table.cmp{width:100%;border-collapse:collapse;font-size:14px;min-width:660px}
table.cmp th,table.cmp td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--border)}
table.cmp thead th{background:var(--bg3);color:var(--white);font-weight:800;font-size:13px;letter-spacing:.2px;white-space:nowrap}
table.cmp tbody th{color:var(--dim);font-weight:600;white-space:nowrap}
table.cmp td{color:var(--dim)}
table.cmp tbody tr:last-child th,table.cmp tbody tr:last-child td{border-bottom:none}
table.cmp .hl{background:var(--y-dim);color:var(--white)}
table.cmp thead th.hl{background:var(--y-dim);color:var(--y)}

/* --- FAQ ----------------------------------------------------------------
   Natives <details>: kein JS, tastaturbedienbar, und der Text steht auch
   zugeklappt im DOM — sonst liest ihn kein Crawler. */
.faq{max-width:80ch;margin:0 auto}
details.faq-item{border:1px solid var(--border);border-radius:12px;background:var(--bg2);margin-bottom:10px}
details.faq-item[open]{border-color:var(--y-border)}
details.faq-item summary{cursor:pointer;list-style:none;padding:17px 46px 17px 20px;position:relative;font-weight:700;font-size:15.5px;color:var(--white)}
details.faq-item summary::-webkit-details-marker{display:none}
details.faq-item summary::after{content:'';position:absolute;right:20px;top:50%;width:8px;height:8px;border-right:2px solid var(--y);border-bottom:2px solid var(--y);transform:translateY(-70%) rotate(45deg);transition:transform .18s ease}
details.faq-item[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
details.faq-item summary:hover{color:var(--y)}
details.faq-item summary h3{display:inline;font-size:inherit;font-weight:inherit;color:inherit;margin:0}
.faq-answer{padding:0 20px 18px;font-size:14.5px;color:var(--dim);line-height:1.7}
.faq-answer p{margin:0 0 10px} .faq-answer p:last-child{margin:0}

/* --- Autorenzeile -------------------------------------------------------- */
.authorline{display:flex;align-items:center;gap:14px;justify-content:center;flex-wrap:wrap;font-size:13px;color:var(--muted);padding:22px 0}
.authorline b{color:var(--dim);font-weight:700}

/* --- Tools-Hub ----------------------------------------------------------- */
.tool-lead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.tool-lead h2{font-size:22px;font-weight:900;color:var(--white);margin:0}
.tool-lead span{font-size:13px;color:var(--muted)}

@media(max-width:820px){
  .cards3,.ladder,.facts{grid-template-columns:1fr}
  .tool-embed{padding:6px 12px 16px;border-radius:14px}
}

/* --- Anpassung des Konverter-Plugins an den ewtos-Look --------------------
   Das Plugin bringt WP-Admin-Optik mit (weisse Flaechen, #1d2327, dashicons).
   Auf der dunklen Seite wirkt das wie ein eingeklebtes Backend-Fenster. Die
   Selektoren sind hier durch .tool-embed spezifischer und gewinnen deshalb,
   unabhaengig von der Ladereihenfolge. */
.tool-embed #cip-app{font-family:inherit;margin-top:0}
.tool-embed #cip-app hr{border-top-color:var(--border)}
.tool-embed h2,.tool-embed h3{color:var(--white)}

.tool-embed details.cip-accordion{background:var(--bg3);border-color:var(--border);border-radius:12px;box-shadow:none}
.tool-embed details.cip-accordion[open]{border-bottom-color:var(--border)}
.tool-embed details.cip-accordion summary{background:transparent;color:var(--white);border-bottom-color:transparent;border-radius:12px}
.tool-embed details.cip-accordion[open] summary{background:transparent;border-bottom-color:var(--border)}
.tool-embed details.cip-accordion summary:hover{background:var(--hover-soft)}
/* dashicons wird im Frontend nicht geladen — der Pfeil waere ein leeres Kaestchen. */
.tool-embed details.cip-accordion summary::after{content:'';width:8px;height:8px;border-right:2px solid var(--y);border-bottom:2px solid var(--y);transform:rotate(45deg);margin-left:10px;font-size:0}
.tool-embed details.cip-accordion[open] summary::after{transform:rotate(-135deg)}
.tool-embed .cip-accordion-content{border-top-color:var(--border)}

.tool-embed #cip-drop-zone{background:var(--bg4);border-color:var(--border-strong);color:var(--dim);border-radius:12px}
.tool-embed #cip-drop-zone.drag-over{border-color:var(--y);background:var(--y-dim)}
.tool-embed #cip-file-input-label{color:var(--y);text-decoration:underline;cursor:pointer}
.tool-embed #cip-file-input-label:hover{color:var(--white)}

.tool-embed #cip-sidebar,.tool-embed #cip-session-stats,.tool-embed .cip-category-container{background:var(--bg3);border-color:var(--border);border-radius:12px}
.tool-embed #cip-sidebar label,.tool-embed #cip-sidebar .setting-group strong{color:var(--text)}
.tool-embed #cip-sidebar small{color:var(--muted)}
.tool-embed #cip-sidebar input[type="number"],.tool-embed #cip-sidebar input[type="text"],.tool-embed #cip-sidebar select{background:var(--bg);border:1px solid var(--border);color:var(--white);border-radius:9px;padding:8px 10px;font-family:inherit}
.tool-embed #cip-sidebar input[type="number"]:focus,.tool-embed #cip-sidebar input[type="text"]:focus,.tool-embed #cip-sidebar select:focus{border-color:var(--y);outline:none}
.tool-embed #cip-sidebar input[type="radio"],.tool-embed #cip-sidebar input[type="checkbox"]{accent-color:var(--y)}
.tool-embed #cip-sidebar input:disabled{opacity:.4}

/* Kachel- und Kontrollfarben kommen aus den Plugin-Variablen (cip-styles.css),
   hier werden sie nur umbelegt. Vorher stand hier nur die Schriftfarbe des
   Kachelfusses — sein weisser Hintergrund blieb stehen, das Ergebnis war
   hellgraue Schrift auf Weiss. */
.tool-embed #cip-app{
  --cip-tile-bg:var(--bg2); --cip-tile-border:var(--border);
  --cip-info-bg:var(--bg2); --cip-info-border:var(--border);
  --cip-info-text:var(--text); --cip-info-strong:var(--white);
  --cip-frame:var(--bg4);
  --cip-good:var(--teal); --cip-bad:var(--red); --cip-ok:var(--green);
  --cip-neutral:var(--dim); --cip-muted:var(--dim);
  --cip-overlay-bg:rgba(7,7,19,.84); --cip-overlay-text:var(--white);
  --cip-ctrl-bg:var(--bg3); --cip-ctrl-border:var(--border-strong); --cip-ctrl-text:var(--white);
  --cip-ctrl-on-bg:var(--y); --cip-ctrl-on-text:var(--on-accent)
}
.tool-embed .cip-tile{border-radius:12px}
/* Die Checkbox liegt bei contain teils ueber heller Bildflaeche, teils ueber
   dem Rahmen — die Pille dahinter haelt sie in beiden Faellen sichtbar. */
.tool-embed .cip-tile input.cip-checkbox{background-color:rgba(7,7,19,.55)}
.tool-embed #cip-session-stats .stat-saved{color:var(--y)}

/* WP-Buttons: der primaere bekommt den CTA-Look, der Rest den Ghost-Look. */
.tool-embed .button{font-family:inherit;font-weight:700;border-radius:10px;border:1px solid var(--border-strong);background:var(--bg3);color:var(--white);padding:9px 16px;cursor:pointer;line-height:1.4;box-shadow:none;text-shadow:none;transition:border-color .15s,background .15s}
.tool-embed .button:hover:not(:disabled){border-color:var(--y-border);background:var(--hover-soft)}
.tool-embed .button:disabled{opacity:.45;cursor:default}
.tool-embed .button-primary{background:var(--accent-gradient);color:var(--on-accent);border-color:transparent}
.tool-embed .button-primary:hover:not(:disabled){background:var(--accent-gradient);filter:brightness(1.08);border-color:transparent}

.tool-embed #cip-log-output,.tool-embed .cip-log{background:var(--bg);border:1px solid var(--border);color:var(--dim);border-radius:10px;font-size:12.5px}
.tool-embed .log-error{color:var(--red)} .tool-embed .log-success{color:var(--green)} .tool-embed .log-warning{color:var(--orange)}

/* --- Anleitung mit vier Schritten ----------------------------------------
   .ladder.cols-4 ist spezifischer als .ladder und gewinnt deshalb unabhaengig
   von der Ladereihenfolge — die schmalen Stufen muessen hier also mit. */
.ladder.cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1080px){.ladder.cols-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.ladder.cols-4{grid-template-columns:1fr}}

/* --- Anpassung des Bulk-Crop-Plugins an den ewtos-Look --------------------
   Das Plugin bringt eine neutral-helle Palette mit und legt sie komplett als
   Variablen auf #ebc-app ab. Hier wird nur dieser Block umbelegt; einzelne
   Regeln zu ueberschreiben waere derselbe Fehler wie beim Konverter, wo dabei
   ein weisser Kachelfuss stehengeblieben ist. */
.tool-embed #ebc-app{
  --ebc-surface:var(--bg2); --ebc-surface-2:var(--bg3); --ebc-surface-3:var(--bg4);
  --ebc-border:var(--border); --ebc-border-strong:var(--border-strong);
  --ebc-strong:var(--white); --ebc-text:var(--text); --ebc-dim:var(--dim);
  --ebc-accent:var(--y); --ebc-accent-soft:var(--y-dim); --ebc-accent-border:var(--y-border);
  --ebc-on-accent:var(--on-accent);
  --ebc-ok:var(--green); --ebc-err:var(--red);
  /* Die Maske bleibt auch im hellen Theme dunkel: einen Bildausschnitt erkennt
     man gegen Abdunklung, nicht gegen eine hellere Flaeche. */
  --ebc-mask:rgba(7,7,19,.72);
  font-family:inherit
}
.tool-embed #ebc-app .ebc-btn-primary{background:var(--accent-gradient);border-color:transparent}
.tool-embed #ebc-app .ebc-btn-primary:hover:not(:disabled){background:var(--accent-gradient);filter:brightness(1.08)}