/* Tools: Rahmen + Anzeigenvorschau + Consent-Check */
.tool-intro { font-size: var(--step-1); }
/* Tool-Seiten: Inhalte zentriert, breiter als Fließtext */
.entry.tool > * { max-width: var(--wide-inner); }
.entry.tool > .tool-intro { max-width: var(--content); }
.entry.tool-consent-check > * { max-width: var(--content); }

.tabs { display: flex; gap: .5rem; border-bottom: 2px solid var(--secondary); margin: 1.5rem 0; flex-wrap: wrap; }
.tab { font: inherit; color: var(--fg); background: none; border: 0; border-bottom: 3px solid transparent; padding: .5em 1em; cursor: pointer; margin-bottom: -2px; }
.tab[aria-selected="true"] { border-bottom-color: var(--orange); color: var(--heading); font-weight: 600; }

.adp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.adp-form h2, .adp-preview h2 { margin-top: 0; font-size: 1.2em; }
.adp-form .field { margin-bottom: 1rem; position: relative; }
.adp-form .field input[type="text"], .adp-form .field select, .adp-form .field textarea { width: 100%; font: inherit; color: var(--fg); background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 10px; padding: .5em .8em; }
.adp-form .field input[type="file"] { max-width: 100%; }
.adp-form label { display: block; font-weight: 600; margin-bottom: .2rem; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.counter { display: block; text-align: right; font-size: .8em; color: var(--contrast); }
.counter.over { color: var(--crit); font-weight: 600; }
.counter.soft { color: var(--warn); font-weight: 600; }
.hint { font-size: .85em; color: var(--contrast); display: block; }
.disclaimer { margin-top: 2rem; }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--link); text-decoration: underline; cursor: pointer; margin-bottom: 1.5rem; }

.device-toggle { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.chip { font: inherit; font-size: .85em; border: 1px solid var(--input-border); background: var(--input-bg); color: var(--fg); border-radius: 1em; padding: .1em .9em; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.preview-frame { background: #fff; border: 1px solid #dadce0; border-radius: 10px; padding: 1rem; font-family: Arial, Helvetica, sans-serif; color: #202124; overflow: hidden; }
.preview-frame.mobile { max-width: 22rem; }
.preview-frame * { hyphens: manual; }

.gad-top { font-size: 14px; display: flex; flex-wrap: wrap; gap: .4em; align-items: baseline; color: #202124; margin-bottom: 4px; }
.gad-badge { font-weight: 700; font-size: 12px; }
.gad-url { color: #4d5156; overflow-wrap: anywhere; }
.gad-title { font-size: 20px; line-height: 1.3; color: #1a0dab; margin-bottom: 4px; overflow-wrap: anywhere; }
.gad-desc { font-size: 14px; line-height: 1.58; color: #4d5156; overflow-wrap: anywhere; }
.mobile .gad-title { font-size: 18px; }
.preview-frame .over { text-decoration: underline wavy #b3261e; }
.preview-frame .soft { text-decoration: underline wavy #8a5a00; }

.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { padding-left: 1.6em; position: relative; margin-bottom: .3em; }
.check-list li::before { position: absolute; left: 0; font-weight: 700; }
.check-list .ok::before { content: "✓"; color: var(--ok); }
.check-list .warn::before { content: "!"; color: var(--warn); }
.check-list .bad::before { content: "✕"; color: var(--crit); }

.mad { max-width: 28rem; font-size: 15px; }
.mad-head { display: flex; gap: .6rem; align-items: center; margin-bottom: .6rem; }
.mad-avatar { width: 40px; height: 40px; border-radius: 50%; background: #425a85; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.mad-who { display: flex; flex-direction: column; line-height: 1.25; }
.mad-who small { color: #65676b; }
.mad-text { margin: 0 0 .6rem; white-space: pre-line; overflow-wrap: anywhere; }
.mad-more { color: #65676b; }
.mad-media { background: #e4e6eb; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.mad-media.square { aspect-ratio: 1 / 1; }
.mad-media.wide { aspect-ratio: 1.91 / 1; }
.mad-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mad-foot { display: flex; gap: .8rem; justify-content: space-between; align-items: center; background: #f0f2f5; padding: .7rem .8rem; }
.mad-meta { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.mad-meta small { color: #65676b; font-size: 12px; }
.mad-meta span { color: #65676b; font-size: 14px; }
.mad-cta { flex: none; background: #d8dadf; border-radius: 6px; padding: .4em .8em; font-weight: 600; font-size: 14px; }

@media screen and (max-width: 768px) {
    .adp-grid { grid-template-columns: 1fr; }
}

/* Consent-Check */
.cc-form { max-width: var(--content); margin: 0 auto 2rem; }
.cc-row { display: flex; gap: .75rem; flex-wrap: wrap; }
.cc-row input { flex: 1 1 14rem; min-width: 0; font: inherit; color: var(--fg); background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 10px; padding: .5em .8em; }
.cc-form label { display: block; font-weight: 600; margin-bottom: .2rem; }
.cc-result { max-width: var(--content); margin: 0 auto; }
.verdict { color: var(--fg); display: flex; flex-direction: column; gap: .2em; border-radius: 10px; padding: .9em 1.2em; margin: 1em 0; border-left: 6px solid; }
.verdict-crit { background: var(--crit-bg); border-color: var(--crit); }
.verdict-warn { background: var(--warn-bg); border-color: var(--warn); }
.verdict-ok { background: var(--ok-bg); border-color: var(--ok); }
.findings { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.finding { display: grid; grid-template-columns: 5.5rem 1fr; gap: .75rem; align-items: start; overflow-wrap: anywhere; hyphens: manual; }
.finding .level { font-size: .8em; font-weight: 600; text-align: center; border-radius: 1em; padding: 0 .6em; }
.finding-crit .level { background: var(--crit-bg); color: var(--crit); }
.finding-warn .level { background: var(--warn-bg); color: var(--warn); }
.finding-ok .level { background: var(--ok-bg); color: var(--ok); }
.finding-info .level { background: var(--line); }
.table-wrap { overflow-x: auto; }
.cc-table { border-collapse: collapse; width: 100%; font-size: .9em; }
.cc-table th, .cc-table td { text-align: left; padding: .4em .6em; border-bottom: 1px solid var(--secondary); vertical-align: top; hyphens: manual; overflow-wrap: anywhere; }
@media screen and (max-width: 480px) { .finding { grid-template-columns: 1fr; gap: .2rem; } .finding .level { justify-self: start; } }

/* Alerting */
.entry.tool .al-section { max-width: var(--wide-inner); margin-bottom: 2.5rem; }
.al-section h2 { font-size: 1.3em; }
.token { display: inline-block; padding: .3em .6em; background: var(--paper); border-radius: 6px; overflow-wrap: anywhere; user-select: all; }
.al-form { max-width: 32rem; }
.al-form input[type="number"] { width: 8rem; font: inherit; color: var(--fg); background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 10px; padding: .4em .7em; }
.al-table .finding { grid-template-columns: 4.5rem 1fr; margin-bottom: .4rem; }
.ok-pill { background: var(--ok-bg); color: var(--ok); font-size: .8em; border-radius: 1em; padding: 0 .8em; }

/* Vorlagen-Bibliothek */
.script-code { max-height: 32rem; overflow: auto; background: var(--paper); border: 1px solid var(--line); padding: 1em; border-radius: 10px; hyphens: none; font-size: .85em; }
.entry.tool .script-code { max-width: var(--wide-inner); }
.al-table th, .al-table td { overflow-wrap: normal; hyphens: manual; }
.al-table td:nth-child(1) { min-width: 9rem; }
.al-table td:nth-child(2), .al-table td:nth-child(3), .al-table td:last-child { white-space: nowrap; }
.al-table td:nth-child(5) { min-width: 18rem; }