/* ============================================================
   moersbergertools.de — Stile für alles, was /site/site.js erzeugt oder bindet
   (Port der passenden Abschnitte aus moersbergerit.de assets/shared.css, 08.10.2026).
   Farben nur über die Layout-Variablen --mt-*; feste Werte stehen nur als Fallback.
   Klassennamen bleiben die alten (top-ad, partner-box, mm-*, th-*, tool-hinweis …),
   weil übernommene Seiten und Tests sie kennen.
   ============================================================ */

/* ---------- Anzeigenrahmen, gekennzeichnet als „Anzeige“ ---------- */
.top-ad{
  max-width: 780px;
  margin: 14px auto 28px;
  padding: 0 20px;
  text-align: center;
  box-sizing: border-box;
}
/* display:block schlägt das UA-Stylesheet für [hidden] – ohne diese Zeile bliebe das
   Label sichtbar, obwohl site.js es versteckt (gemessen 19.09.2026). */
.top-ad-label[hidden]{ display: none; }
.top-ad[hidden]{ display: none; }
.top-ad-label{
  display: block;
  font-family: var(--mt-font, inherit);
  font-size: .68rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--mt-muted, #6b7c82);
  margin-bottom: 6px;
}
/* display:block kommt hier statt aus einem style-Attribut (CSP). */
.top-ad ins.adsbygoogle{
  display: block;
  min-height: 90px;
  text-decoration: none;   /* <ins> ist von Haus aus unterstrichen */
}
/* Solange keine Anzeige geliefert ist (Werbeblocker, mit_internal=1, kein Gebot),
   setzt site.js die Klasse ad-leer: kein 90-px-Loch und kein „Anzeige“-Label.
   Sobald AdSense liefert, fallen Klasse und hidden am Label weg. QA-Befund 19.09.2026. */
.top-ad.ad-leer ins.adsbygoogle{ min-height: 0; }
.top-ad.result-ad{ margin-top: 28px; }
/* Hub-Seiten: Anzeige unter dem letzten Kartenraster, deutlich abgesetzt von den Karten. */
.top-ad.hub-ad{ margin-top: 40px; margin-bottom: 36px; }
/* In-Article-Anzeige mitten im Artikel: Luft nach oben und unten zum Fließtext. */
.top-ad.art-ad{ margin-top: 28px; margin-bottom: 32px; }
@media (max-width: 768px){
  .top-ad{ margin: 12px auto 22px; padding: 0 16px; }
}

/* ---------- „Nächster Schritt“ nach dem Ergebnis ----------
   Bewusst als Linkliste: linksbündig, Akzentlinie links, Pfeile, kein Rahmenkasten –
   nichts, was nach Anzeige aussieht. Zu jeder Anzeige mindestens 40 px Abstand. */
.next-step{
  margin: 22px 0 0;
  padding: 4px 0 4px 16px;
  border-left: 3px solid var(--mt-accent, #226f80);
  text-align: left;
}
.next-step-titel{
  margin: 0 0 6px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mt-accent, #226f80);
}
.next-step ul{ list-style: none; margin: 0; padding: 0; }
.next-step li{ margin: 0; padding: 5px 0; line-height: 1.4; }
.next-step a{
  font-weight: 600;
  color: var(--mt-text, #0d1a1f);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.next-step a::after{ content: " →"; text-decoration: none; }
.next-step a:hover{ color: var(--mt-accent, #226f80); }
.next-step-kurz{ display: block; font-size: .88rem; color: var(--mt-muted, #5a7076); }
.next-step + .top-ad,
.next-step + [data-result-ad],
.top-ad + .next-step{ margin-top: 40px; }

/* ---------- Partner-Kasten „Passende Angebote · Anzeige“ ---------- */
.partner-box{
  max-width: 760px; margin: 24px auto 0; padding: 14px 16px; box-sizing: border-box;
  border: 1px solid var(--mt-border, #d5dcde); border-radius: var(--mt-radius, 10px);
  background: var(--mt-surface-2, #fafbfb); color: var(--mt-text, #2c3e43);
  font-family: var(--mt-font, inherit); font-size: .95rem; overflow-wrap: anywhere;
}
.partner-box-kopf{ margin: 0 0 8px; font-size: .8rem; font-weight: 600; letter-spacing: .02em; color: var(--mt-muted, #5a7076); text-transform: uppercase; }
.partner-box-anzeige{ display: inline-block; padding: 0 6px; border: 1px solid var(--mt-muted, #9aa8ab); border-radius: 4px; color: var(--mt-text, #3d5257); }
.partner-box ul{ list-style: none; margin: 0; padding: 0; }
.partner-box li{ margin: 0 0 10px; }
.partner-box li:last-child{ margin-bottom: 6px; }
.partner-box a{ color: var(--mt-text, #0c3a4a); text-decoration: underline; text-underline-offset: 3px; }
.partner-box a::after{ content: " ↗"; text-decoration: none; }
.partner-box-nutzen, .partner-box-hinweis{ display: block; font-size: .88rem; color: var(--mt-muted, #5a7076); }
.partner-box-hinweis{ font-size: .8rem; }
.partner-box-fuss{ margin: 6px 0 0; font-size: .78rem; color: var(--mt-muted, #6b7f84); }
[data-result-ad] + .partner-box{ margin-top: 24px; }

/* ---------- Hinweis-Kasten [data-shared-hinweis] (gebacken, site.js bindet den Link) ---------- */
.tool-hinweis{ max-width: 72ch; margin: 28px auto 8px; padding: 0 20px; box-sizing: border-box; }
.tool-hinweis-box{
  padding: 16px 18px; background: var(--mt-surface-2, #f6f8f9); border: 1px solid var(--mt-border, #dde4e6);
  border-radius: var(--mt-radius, 12px); color: var(--mt-text, #33454b); font-size: .92rem; line-height: 1.55;
}
.tool-hinweis h2{ font-size: 1rem; margin: 0 0 6px; color: var(--mt-text, #0d1a1f); line-height: 1.3; }
.tool-hinweis p{ margin: 0 0 10px; }
.tool-hinweis a{ color: var(--mt-accent, #226f80); }
.th-link-zeile{ margin: 0 !important; }
.tool-hinweis .th-link{ font-weight: 600; }

/* ---------- Meldeformular (im Panel) ---------- */
.th-form{ display: grid; gap: 6px; margin-top: 12px; }
.th-form label{ font-weight: 600; color: var(--mt-text, #0d1a1f); }
.th-form textarea, .th-form input[type=email]{
  width: 100%; box-sizing: border-box; font: inherit; padding: 10px 12px;
  border: 1px solid var(--mt-border, #b9c6ca); border-radius: 8px;
  background: var(--mt-bg, #fff); color: var(--mt-text, #0d1a1f);
}
.th-form textarea{ resize: vertical; min-height: 96px; }
.th-form textarea:focus, .th-form input[type=email]:focus{ outline: 2px solid var(--mt-accent, #2d8fa3); border-color: var(--mt-accent, #2d8fa3); }
.th-klein{ font-weight: 400; font-size: .82rem; color: var(--mt-muted, #5a7076); margin: 0; }
.th-zaehler{ text-align: right; }
.th-form .th-check{ display: flex; gap: 8px; align-items: flex-start; font-weight: 400; margin-top: 6px; }
.th-check input{ margin-top: 4px; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--mt-accent, #226f80); }
.th-honig{ position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.th-senden{
  justify-self: start; margin-top: 6px; background: var(--mt-accent, #226f80); color: var(--mt-accent-ink, #fff);
  border: 0; border-radius: 8px; padding: .65em 1.3em; font: inherit; font-weight: 600; cursor: pointer; min-height: 44px;
}
.th-senden:hover{ filter: brightness(.92); }
.th-senden:disabled{ opacity: .6; cursor: wait; }
.th-status{ margin: 4px 0 0; min-height: 1.4em; }
/* Erfolg/Fehler: Text plus Gewicht, Farbe nur als Zusatz (keine eigenen Variablen vorhanden) */
.th-status.th-ok{ color: var(--mt-accent, #1d7a4f); font-weight: 600; }
.th-status.th-fehler{ color: var(--mt-text, #b42318); font-weight: 600; }
.th-status.th-fehler::before{ content: "⚠ "; }
@media (max-width: 600px){
  .tool-hinweis{ margin-top: 24px; }
  .tool-hinweis-box{ padding: 14px; }
  .th-senden{ width: 100%; }
}

/* ---------- Alter Feedback-Knopf [data-feedback-tool] (in übernommenen Seiten) ---------- */
.tool-feedback-trigger{ max-width: 72ch; margin: 32px auto 8px; padding: 0 20px; text-align: center; }
.tf-trigger{
  background: transparent; border: 1px solid var(--mt-border, #cbd5e1); color: var(--mt-muted, #5b6b7f);
  padding: 8px 18px; border-radius: 999px; font-family: inherit; font-size: .88rem; font-weight: 500; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.tf-trigger:hover{ border-color: var(--mt-accent, #226f80); color: var(--mt-text, #0c3a4a); background: var(--mt-surface-2, #f5f7fa); }

/* ---------- „Frage oder Problem melden“: Symbol rechts unten + Panel ----------
   z-index 1000: unter Google-CMP/AdSense-Anker (2147483647). Die Höhe (bottom) setzt
   site.js so, dass das Symbol nie auf einer Anzeige liegt. */
:root{ --mm-unten-extra: 0px; }
.mm-sonde{ position: fixed; left: 0; bottom: 0; width: 0; height: 0; visibility: hidden; pointer-events: none; padding-bottom: env(safe-area-inset-bottom); }
.mm-fab{
  position: fixed; right: 16px; bottom: calc(16px + var(--mm-unten-extra) + env(safe-area-inset-bottom)); z-index: 1000;
  width: 52px; height: 52px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--mt-accent, #226f80); color: var(--mt-accent-ink, #fff);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--mt-text, #000) 28%, transparent);
  transition: background .15s, transform .15s, bottom .2s ease-out, opacity .15s;
}
.mm-fab:hover{ filter: brightness(.92); transform: translateY(-1px); }
.mm-fab.mm-offen{ background: var(--mt-text, #0d1a1f); color: var(--mt-bg, #fff); }
/* Anzeige füllt den Platz: nur optisch und für Zeiger weg, per Tastatur weiter erreichbar */
.mm-fab.mm-weg{ opacity: 0; pointer-events: none; }
.mm-fab.mm-weg:focus, .mm-fab.mm-weg:focus-visible{ opacity: 1; pointer-events: auto; }
.mm-fab:focus-visible{ outline: 3px solid var(--mt-accent, #1d6fb8); outline-offset: 3px; box-shadow: 0 0 0 6px var(--mt-bg, #fff), 0 4px 14px color-mix(in srgb, var(--mt-text, #000) 28%, transparent); }
.mm-panel{
  position: fixed; right: 16px; bottom: calc(80px + var(--mm-unten-extra) + env(safe-area-inset-bottom)); z-index: 1001;
  width: 360px; max-width: calc(100vw - 32px); max-height: calc(100vh - 120px - var(--mm-unten-extra));
  overflow-y: auto; box-sizing: border-box;
  background: var(--mt-surface, #fff); color: var(--mt-text, #0d1a1f);
  border: 1px solid var(--mt-border, #dde4e6); border-radius: var(--mt-radius, 14px);
  box-shadow: 0 12px 40px color-mix(in srgb, var(--mt-text, #000) 22%, transparent);
  padding: 14px 16px 16px; font-family: var(--mt-font, inherit); font-size: .95rem; line-height: 1.5;
  animation: mm-ein .16s ease-out;
}
.mm-panel[hidden]{ display: none; }
@keyframes mm-ein{ from{ opacity: 0; transform: translateY(8px); } to{ opacity: 1; transform: none; } }
.mm-kopf{ display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mm-panel h2{ font-size: 1.05rem; margin: 0; line-height: 1.3; color: var(--mt-text, #0d1a1f); }
.mm-zu-knopf{
  width: 40px; height: 40px; flex-shrink: 0; border: 0; background: transparent; color: var(--mt-muted, #38535a);
  border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; margin-right: -8px;
}
.mm-zu-knopf:hover{ background: var(--mt-surface-2, #eef3f4); }
.mm-zu{ margin: 4px 0 0; color: var(--mt-muted, #38535a); }
.mm-panel .th-form{ margin-top: 10px; }
.mm-panel .th-senden{ width: 100%; }
.mm-extra{ margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--mt-border, #e6ecee); font-size: .88rem; color: var(--mt-muted, #38535a); }
.mm-panel a{ color: var(--mt-accent, #226f80); }
@media (max-width: 600px){
  .mm-panel{
    left: 0; right: 0; bottom: 0; width: 100%; max-width: 100%; max-height: 85vh;
    border-radius: 14px 14px 0 0; border-width: 1px 0 0;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
}
@media (prefers-reduced-motion: reduce){
  .mm-fab, .mm-panel{ transition: none; animation: none; }
  .mm-fab:hover{ transform: none; }
}
@media print{
  .mm-fab, .mm-panel, .top-ad, .partner-box{ display: none !important; }
}

/* ---------- KI-Progress-Overlay (window.MIT_AI) ---------- */
.ai-progress{
  position: relative; max-width: 640px; margin: 20px auto; padding: 24px;
  background: var(--mt-surface-2, #f8fafc); border: 1px solid var(--mt-border, #e2e8f0);
  border-radius: var(--mt-radius, 12px); text-align: center; color: var(--mt-text, #0c3a4a);
}
.ai-progress-inner{ display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ai-spinner{
  width: 40px; height: 40px; border: 3px solid var(--mt-border, #e2e8f0);
  border-top-color: var(--mt-accent, #0c3a4a); border-radius: 50%;
  animation: ai-spin .9s linear infinite;
}
@keyframes ai-spin{ to{ transform: rotate(360deg); } }
.ai-progress .ai-label{ font-weight: 600; font-size: 1.05rem; }
.ai-progress .ai-timer{ font-variant-numeric: tabular-nums; color: var(--mt-muted, #5b6b7f); font-size: .95rem; }
.ai-progress .ai-hint{
  display: none; font-size: .85rem; color: var(--mt-text, #92702a); background: var(--mt-surface, #fef6e0);
  border-left: 3px solid var(--mt-accent, #d97706); padding: 8px 12px; border-radius: 6px; text-align: left; max-width: 500px;
}
.ai-progress .ai-hint.show{ display: block; }
@media (prefers-reduced-motion: reduce){ .ai-spinner{ animation-duration: 3s; } }