/* 07.11.2026: Werkzeuge-Übersicht und Liste „Aktuelle Abofallen und Scams“ (Christophs Auftrag).
   Karten mit <details> (Tastatur und Screenreader ohne Zusatzskript), Warnhinweis oben in jeder Karte,
   Originalwarnung nur im neuen Tab (Einbettung am 07.11.2026 auf Christophs Entscheidung entfernt). Mobil ab 390 px geprüft. */
/* Liste */
.t12-scams-meta{font-size:14px!important;opacity:.85;margin-bottom:18px!important}
.t12-scams-list{display:grid;gap:14px}
.t12-scam{margin:0;scroll-margin-top:24px}
.t12-scam-card{background:#fff;border:1px solid var(--r-line);border-radius:6px}
.t12-scam-card[open]{border-color:var(--r-petrol)}
.t12-scam-card>summary{display:flex;gap:16px;align-items:center;justify-content:space-between;min-height:48px;padding:18px 22px;cursor:pointer;list-style:none}
.t12-scam-card>summary::-webkit-details-marker{display:none}
.t12-scam-card>summary:focus-visible{outline:3px solid var(--r-focus);outline-offset:2px;border-radius:6px}
.t12-scam-head{display:grid;gap:4px;min-width:0}
.t12-scam-title{font-weight:700;font-size:19px;line-height:1.3;letter-spacing:-.02em}
.t12-scam-date,.t12-scam-channel{font-size:13px;opacity:.8}
.t12-scam-date{font-weight:700;opacity:1;color:#147276}
.t12-scam-draft{justify-self:start;font-size:12px;font-weight:700;padding:2px 9px;border-radius:20px;background:var(--r-yellow-bg);color:var(--r-yellow)}
.t12-scam-toggle{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:1px solid var(--r-line);position:relative}
.t12-scam-toggle::before,.t12-scam-toggle::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--r-petrol)}
.t12-scam-toggle::after{transform:rotate(90deg)}
.t12-scam-card[open] .t12-scam-toggle::after{display:none}
.t12-scam-body{padding:0 22px 22px}
.t12-section .t12-scam-alert{margin:0 0 16px!important;padding:12px 16px;border-left:4px solid var(--r-red);background:var(--r-red-bg);font-size:15px}
.t12-scam-summary{margin-bottom:6px!important}
.t12-scam-body h4{font-family:inherit!important;font-size:17px!important;font-weight:700;margin:18px 0 6px!important;padding:0;color:var(--r-petrol)!important}
.t12-scam-body ul{margin:0 0 0 1.2em!important;padding:0!important}
.t12-scam-body li{margin-bottom:4px;padding-left:2px;font-size:16px}
.t12-scam-ids{list-style:none!important;margin-left:0!important}
.t12-scam-domain{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;background:var(--r-soft);padding:2px 6px;border-radius:3px;overflow-wrap:anywhere}
.t12-scam-ids a{font-size:14px;margin-left:6px}
.t12-scam-note{font-size:13px!important;opacity:.8;margin-top:4px!important}
.t12-scam-source{padding:14px 0;border-top:1px solid var(--r-line)}
.t12-scam-source:first-of-type{border-top:0}
.t12-scam-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px!important}
.t12-scams-compact{list-style:none!important;margin:0!important;padding:0!important;border-top:1px solid var(--r-line)}
.t12-scams-compact li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;margin:0!important;padding:12px 0;border-bottom:1px solid var(--r-line)}
.t12-scams-compact a{font-weight:600}
@media(max-width:600px){
 .t12-scam-card>summary{padding:16px 14px;align-items:flex-start}
 .t12-scam-title{font-size:17px}
 .t12-scam-body{padding:0 14px 18px}
 .t12-scam-actions .t12-radar-button{flex:1 1 100%}
 .t12-scams-compact li{grid-template-columns:minmax(0,1fr);gap:2px}
}
.t12-scams a,.t12-scams-compact a{text-decoration:underline;text-underline-offset:3px}
.t12-weiterlesen{margin:0 0 0 1.2em!important;padding:0!important}.t12-weiterlesen li{margin-bottom:8px;font-size:16px}.t12-weiterlesen a{text-decoration:underline;text-underline-offset:3px}

/* 07.11.2026: Gliederung für die Suche (h2-Kacheln, h3-Listentitel, h3-FAQ) – Größen wie vorher, design.css setzt h2/h3 sonst groß. */
.t12-section .t12-scam-title{font-size:19px!important;line-height:1.3!important;letter-spacing:-.02em;margin:0!important;padding:0!important}
.t12-section .t12-radar-faq .et_pb_toggle_title,.t12-section .t12-radar-faq h3{font-size:18px!important;line-height:1.4!important;letter-spacing:-.01em;padding-right:36px}
@media(max-width:600px){.t12-section .t12-scam-title{font-size:17px!important}}
/* 07.11.2026: FAQ-Akkordeon im Stil der Karten (statt Divi-Grau). */
.t12-section .t12-radar-faq .et_pb_toggle{border:1px solid #d8dfdc;border-radius:6px;background:#fff;padding:18px 22px;margin-bottom:10px!important}
.t12-section .t12-radar-faq .et_pb_toggle_open{border-color:#263e46}
.t12-section .t12-radar-faq .et_pb_toggle_content{padding-top:10px}
.t12-section .t12-radar-faq .et_pb_toggle_title:before{color:#263e46}
@media(max-width:600px){.t12-section .t12-radar-faq .et_pb_toggle{padding:16px 14px}}

/* 08.11.2026: Werkzeug-Kacheln mit Live-Vorschau (Christophs Wahl: Vorschlag B) – nur CI-Farben. Radar-Kachel Petrol mit
   Fragen-/Ampel-Vorschau, Listen-Kachel weiß mit den drei neuesten Warnungen; so sind beide auf einen Blick unterscheidbar. */
.t12-tools{list-style:none!important;margin:0!important;padding:0!important;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,440px),1fr));gap:28px}
.t12-tool{display:flex;flex-direction:column;margin:0!important;padding:30px;border-radius:10px}
.t12-tool.is-dunkel{background:#263e46;color:#fdfcf5}
.t12-tool.is-hell{background:#fff;border:1px solid #d8dfdc}
.t12-section .t12-tool-kicker{font-size:12px!important;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#147276;margin:0 0 6px!important}
.t12-tool.is-dunkel .t12-tool-kicker{color:#a9dedf}
.t12-section .t12-tool h2{font-size:clamp(24px,2.2vw,30px)!important;letter-spacing:-.04em;line-height:1.15;margin:0 0 18px!important;padding:0}
.t12-section .t12-tool.is-dunkel h2{color:#fdfcf5!important}
.t12-tool-preview-radar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;background:#fdfcf5;color:#263e46;border-radius:8px;padding:18px;margin-bottom:22px}
.t12-section .t12-tp-q{font-weight:700;font-size:15px!important;margin:0 0 10px!important}
.t12-tp-q small{display:block;font-weight:700;color:#147276;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.t12-section .t12-tp-opt{border:1px solid #d8dfdc;border-radius:5px;padding:8px 12px!important;font-size:14px!important;margin:0 0 6px!important;background:#fff}
.t12-section .t12-tp-opt.is-sel{border-color:#263e46;box-shadow:inset 3px 0 0 #2fb0b5;background:#eef4f1}
.t12-tp-lights{display:grid;gap:8px;padding:10px;border-radius:20px;background:#263e46}
.t12-tp-lights i{display:block;width:30px;height:30px;border-radius:50%;opacity:.25}
.t12-tp-lights .is-r{background:#e5483d;opacity:1;box-shadow:0 0 18px #e5483d99}.t12-tp-lights .is-y{background:#f5c02a}.t12-tp-lights .is-g{background:#3cb371}
.t12-tool-feed{list-style:none!important;margin:0 0 22px!important;padding:0!important;border-top:1px solid #e4efeb}
.t12-tool-feed li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;margin:0!important;padding:12px 0;border-bottom:1px solid #e4efeb;font-size:15px}
.t12-tf-date{font-size:13px;font-weight:700;color:#147276}
.t12-tool-feed a{text-decoration:none}.t12-tool-feed a:hover{text-decoration:underline;text-underline-offset:3px}
.t12-tf-new{display:inline-block;margin-left:4px;padding:1px 8px;border-radius:10px;background:#e4efeb;color:#147276;font-size:11px;font-weight:700}
.t12-section .t12-tool-cta{margin:auto 0 0!important;padding-top:4px}
.t12-section .t12-tool-foot{margin:14px 0 0!important;font-size:14px!important;opacity:.85}
@media(max-width:600px){.t12-tool{padding:22px 18px}.t12-tool-preview-radar{padding:14px;gap:12px}.t12-tp-lights i{width:24px;height:24px}.t12-tool-feed li{grid-template-columns:minmax(0,1fr);gap:2px}.t12-tool-cta .t12-radar-button{width:100%}}

/* 08.11.2026: Hauptbuttons auf den Werkzeug-Seiten auffälliger (Christoph): CI-Türkis #147276 mit weißer Schrift (5,7:1),
   beim Darüberfahren Petrol mit weißer Schrift. Gilt für Radar-/Listen-Buttons und die Divi-Hauptbuttons im Seitenkopf. */
.t12-section .t12-radar-button:not(.t12-radar-button-secondary),.t12-section a.t12-radar-button:not(.t12-radar-button-secondary){background:#147276;border-color:#147276;color:#fff!important;font-weight:700;font-size:16px;min-height:52px;padding:14px 24px;box-shadow:0 6px 16px #14727647}
.t12-section .t12-radar-button:not(.t12-radar-button-secondary):hover,.t12-section a.t12-radar-button:not(.t12-radar-button-secondary):hover{background:#263e46;border-color:#263e46;box-shadow:0 6px 16px #263e4647}
body.page-id-600 .t12-service-hero .t12-button:not(.t12-button-secondary) .et_pb_button,body.page-id-601 .t12-service-hero .t12-button:not(.t12-button-secondary) .et_pb_button,body.page-id-602 .t12-service-hero .t12-button:not(.t12-button-secondary) .et_pb_button{background:#147276!important;border-color:#147276!important;font-size:16px!important;font-weight:700!important;padding:15px 24px!important;box-shadow:0 6px 16px #14727647}
body.page-id-600 .t12-service-hero .t12-button:not(.t12-button-secondary) .et_pb_button:hover,body.page-id-601 .t12-service-hero .t12-button:not(.t12-button-secondary) .et_pb_button:hover,body.page-id-602 .t12-service-hero .t12-button:not(.t12-button-secondary) .et_pb_button:hover{background:#263e46!important;border-color:#263e46!important}
.t12-section .t12-radar-button{gap:8px}

/* 08.11.2026: Radar-Kachel zeigt den Ablauf statt eines Standbilds (Christoph: Klick in die „Antwortfelder“ tat nichts,
   Nutzer verstehen nicht, was dahinter passiert). Schleife 12 s: Frage 1 → Antwort wird gewählt, Ampel Gelb → Frage 2 →
   Ampel Rot → Ergebnis. Ganze Kachel ist ein Link (Button-Link über die Kachel gespannt), Vorschau zeigt Hand-Zeiger.
   prefers-reduced-motion: keine Bewegung, Standbild Frage 2 mit roter Ampel wie bisher. Nur CI-Farben. */
.t12-tool.is-klickbar{position:relative;transition:transform .2s ease,box-shadow .2s ease}
.t12-section .t12-tool.is-klickbar .t12-tool-cta a{position:static}
.t12-section .t12-tool.is-klickbar .t12-tool-cta a::after{content:"";position:absolute;inset:0;border-radius:10px;z-index:1}
/* Hover nur bei Maus/Trackpad – auf Handys bliebe er nach dem Antippen sonst hängen. Auf der Petrol-Kachel wird der
   Button beim Darüberfahren Creme mit Petrol-Schrift (Petrol auf Petrol wäre unsichtbar). */
@media(hover:hover){
 .t12-tool.is-klickbar:hover{transform:translateY(-3px);box-shadow:0 14px 34px #263e4640}
 .t12-section .t12-tool.is-klickbar:hover .t12-radar-button:not(.t12-radar-button-secondary){background:#fdfcf5;border-color:#fdfcf5;color:#263e46!important}
}
@media(prefers-reduced-motion:reduce){.t12-tool.is-klickbar,.t12-tool.is-klickbar:hover{transition:none;transform:none}}
.t12-tool.is-klickbar .t12-tool-preview{cursor:pointer}
.t12-tool-preview-radar{position:relative;padding-bottom:30px}
.t12-tp-scenes{display:grid}
.t12-tp-scene{grid-area:1/1;opacity:0}
.t12-section .t12-tp-note{font-size:14px!important;margin:0!important;line-height:1.5}
.t12-section .t12-tp-s3 .t12-tp-q{font-size:17px!important;line-height:1.3;color:#263e46}
.t12-tp-s3 small{color:#147276}
.t12-section .t12-tp-pick{position:relative}
.t12-tp-steps{position:absolute;left:18px;bottom:12px;display:flex;gap:6px}
.t12-tp-steps i{display:block;width:22px;height:4px;border-radius:2px;background:#d8dfdc}
.t12-tp-lights i{transition:opacity .3s,box-shadow .3s}
@media(prefers-reduced-motion:reduce){
 .t12-tp-s2{opacity:1}
 .t12-section .t12-tp-s2 .t12-tp-pick{border-color:#263e46;box-shadow:inset 3px 0 0 #2fb0b5;background:#eef4f1}
 .t12-tp-steps i:nth-child(-n+2){background:#147276}
}
@media(prefers-reduced-motion:no-preference){
 .t12-tp-s1{animation:t12-tp-s1 12s infinite}
 .t12-tp-s2{animation:t12-tp-s2 12s infinite}
 .t12-tp-s3{animation:t12-tp-s3 12s infinite}
 .t12-section .t12-tp-s1 .t12-tp-pick{animation:t12-tp-pick1 12s infinite}
 .t12-section .t12-tp-s2 .t12-tp-pick{animation:t12-tp-pick2 12s infinite}
 .t12-tp-lights .is-r{animation:t12-tp-r 12s infinite}
 .t12-tp-lights .is-y{animation:t12-tp-y 12s infinite}
 .t12-tp-steps i:nth-child(1){animation:t12-tp-st1 12s infinite}
 .t12-tp-steps i:nth-child(2){animation:t12-tp-st2 12s infinite}
 .t12-tp-steps i:nth-child(3){animation:t12-tp-st3 12s infinite}
 .t12-tool.is-klickbar:hover .t12-tp-scene,.t12-tool.is-klickbar:hover .t12-tp-scene .t12-tp-pick,.t12-tool.is-klickbar:hover .t12-tp-lights i,.t12-tool.is-klickbar:hover .t12-tp-steps i{animation-play-state:paused}
}
@keyframes t12-tp-s1{0%,30%{opacity:1;transform:none}33%,97%{opacity:0;transform:translateX(-10px)}100%{opacity:1;transform:none}}
@keyframes t12-tp-s2{0%,31%{opacity:0;transform:translateX(10px)}34%,63%{opacity:1;transform:none}66%,100%{opacity:0;transform:translateX(-10px)}}
@keyframes t12-tp-s3{0%,64%{opacity:0;transform:translateX(10px)}67%,96%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes t12-tp-pick1{0%,11%{border-color:#d8dfdc;box-shadow:none;background:#fff;transform:none}13%{transform:scale(.97)}15%,100%{border-color:#263e46;box-shadow:inset 3px 0 0 #2fb0b5;background:#eef4f1;transform:none}}
@keyframes t12-tp-pick2{0%,44%{border-color:#d8dfdc;box-shadow:none;background:#fff;transform:none}46%{transform:scale(.97)}48%,100%{border-color:#263e46;box-shadow:inset 3px 0 0 #2fb0b5;background:#eef4f1;transform:none}}
@keyframes t12-tp-y{0%,14%{opacity:.25;box-shadow:none}16%,46%{opacity:1;box-shadow:0 0 18px #f5c02a99}48%,100%{opacity:.25;box-shadow:none}}
@keyframes t12-tp-r{0%,47%{opacity:.25;box-shadow:none}49%,96%{opacity:1;box-shadow:0 0 18px #e5483d99}99%,100%{opacity:.25;box-shadow:none}}
@keyframes t12-tp-st1{0%,30%{background:#147276}33%,100%{background:#d8dfdc}}
@keyframes t12-tp-st2{0%,31%{background:#d8dfdc}34%,63%{background:#147276}66%,100%{background:#d8dfdc}}
@keyframes t12-tp-st3{0%,64%{background:#d8dfdc}67%,96%{background:#147276}99%,100%{background:#d8dfdc}}