/* erzeugt von werkzeuge/ratgeber-css.py aus base.scss (MagicAgent Inhalte) – nicht von Hand ändern */
/* MagicAgent Inhalte (allesecht., 16.10.2026): Gestaltung der Bausteine aus der Mastervorlage von MagicAgent Pro. */
/* Shopware filtert <style>, style-Variablen und <details> aus Texten – die Gestaltung kommt deshalb hierher. */
/* Farben und Schrift kommen aus dem Theme des Shops (Bootstrap-Variablen); --ma-akzent setzt die App-Einstellung. */
/* Ohne SCSS-Funktionen und nur mit Block-Kommentaren – dieselbe Datei läuft als CSS (Verschachtelung) in der Vorschau von MagicAgent Pro. */
/* Alle Regeln hängen unter html:is(#ma-inhalte, :root): Vorrang wie eine ID, damit Theme-Regeln für Blog-Listen und -Überschriften nicht gewinnen. */

:root {
  --ma-akzent: var(--bs-primary, #373f44);
  --ma-dunkel: var(--bs-primary, #373f44);
  --ma-text: var(--bs-body-color, #2b3136);
  --ma-leise: var(--bs-secondary-color, #6c757d);
  --ma-linie: var(--bs-border-color, #dee2e6);
  --ma-flaeche: var(--bs-tertiary-bg, #f6f6f4);
  --ma-flaeche: color-mix(in srgb, var(--ma-akzent) 9%, var(--bs-body-bg, #fff));
  --ma-radius: 14px;
}

html:is(#ma-inhalte, :root) {
  .ma-kurz, .ma-inhalt, .ma-zahlen, .ma-schritte, .ma-balken, .ma-tipp, .ma-passt, .ma-weiter, .ma-faq, table.ma-tabelle {
    margin: 2rem 0;
  }
  /* Erster Kasten im Text ohne Abstand nach oben – sonst klafft unter dem Blog-Kopf eine Lücke (Livetest Vodkahaus 17.10.2026) */
  .mb-text > :is(.ma-kurz, .ma-inhalt, .ma-zahlen, .ma-schritte, .ma-balken, .ma-tipp, .ma-passt, .ma-weiter, .ma-faq, table.ma-tabelle):first-child {
    margin-top: 0;
  }

  /* Sanftes Einblenden beim Scrollen (Klasse setzt das Skript; ohne Skript ist alles sofort sichtbar) */
  &.ma-js .ma-einblenden { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
  &.ma-js .ma-einblenden.ma-sichtbar { opacity: 1; transform: none; }

  /* ---------- Kurzfassung ---------- */
  .ma-kurz {
    position: relative;
    background: var(--ma-flaeche);
    border-radius: var(--ma-radius);
    padding: 1.5rem 1.75rem 1.25rem;
    border-left: 5px solid var(--ma-akzent);
  }
  .ma-kurz h2 { font-size: 1.15rem !important; margin: 0 0 .75rem !important; letter-spacing: .01em; }
  .ma-kurz ul { list-style: none; padding: 0; margin: 0; }
  .ma-kurz li { position: relative; padding: .35rem 0 .35rem 1.9rem; }
  .ma-kurz li::before {
    content: ""; position: absolute; left: 0; top: .55rem; width: 1.15rem; height: 1.15rem; border-radius: 50%;
    background: var(--ma-akzent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
  }

  /* ---------- Inhaltsverzeichnis (erzeugt MagicAgent Pro aus den Zwischenüberschriften) ---------- */
  .ma-inhalt { border: 1px solid var(--ma-linie); border-radius: var(--ma-radius); padding: 1.1rem 1.5rem; }
  .ma-inhalt-titel { font-weight: 700; text-transform: uppercase; font-size: .78rem; letter-spacing: .08em; color: var(--ma-leise); margin: 0 0 .5rem; }
  .ma-inhalt ol { margin: 0; padding-left: 1.3rem; columns: 2 260px; column-gap: 2rem; }
  .ma-inhalt li { padding: .2rem 0; break-inside: avoid; }
  .ma-inhalt li::before { content: none; display: none; } /* Theme-Punkt weg, die Liste zählt selbst */
  .ma-inhalt a { color: var(--ma-text); text-decoration: none; border-bottom: 1px solid transparent; }
  .ma-inhalt a:hover { border-bottom-color: var(--ma-akzent); }
  h2[id] { scroll-margin-top: 110px; }

  /* ---------- Kennzahlen ---------- */
  .ma-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
  .ma-zahlen > div { background: var(--ma-flaeche); border-radius: var(--ma-radius); padding: 1.25rem 1rem; text-align: center; }
  .ma-zahlen strong { display: block; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.1; color: var(--ma-akzent); font-weight: 800; }
  .ma-zahlen span { display: block; margin-top: .35rem; color: var(--ma-leise); font-size: .92rem; }

  /* ---------- Tabelle ---------- */
  /* !important nur hier: manche Themes (z. B. Kirmse) gestalten jede Tabelle in Kategorien mit !important */
  table.ma-tabelle { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--ma-linie); border-radius: var(--ma-radius); overflow: hidden; font-size: .97rem; }
  /* Shopware macht Tabellen in Produktbeschreibungen am Handy zu display:block + white-space:nowrap (zum Wischen) –
     unsere Tabelle wurde so 830 px breit und schob die ganze Beschreibung über den Rand (Möbel Universum 20.10.2026).
     Sie bleibt eine echte Tabelle und bricht um. */
  table.ma-tabelle { display: table !important; table-layout: auto; }
  table.ma-tabelle :is(caption, th, td) { white-space: normal !important; overflow-wrap: anywhere; }
  table.ma-tabelle caption { caption-side: top; text-align: left; font-weight: 700; color: var(--ma-text); padding: 0 0 .6rem; }
  table.ma-tabelle tr { border: 0 !important; background: transparent !important; }
  table.ma-tabelle th, table.ma-tabelle thead td { background: var(--ma-dunkel) !important; color: #fff !important; font-weight: 600 !important; text-align: left !important; padding: .8rem 1rem !important; border: 0 !important; font-size: inherit !important; }
  table.ma-tabelle td { padding: .75rem 1rem !important; border: 0 !important; border-top: 1px solid var(--ma-linie) !important; vertical-align: top !important; font-weight: 400 !important; font-size: inherit !important; color: var(--ma-text) !important; background: transparent !important; }
  table.ma-tabelle tbody tr:first-child td { border-top: 0 !important; }
  table.ma-tabelle tbody tr:nth-child(even) td { background: var(--ma-flaeche) !important; }
  table.ma-tabelle tbody td:first-child { font-weight: 600 !important; }
  table.ma-tabelle th, table.ma-tabelle td { word-break: normal !important; overflow-wrap: normal !important; hyphens: auto; }
  .col-md-6 table.ma-tabelle, .ma-spalten table.ma-tabelle { font-size: .9rem; }
  .col-md-6 table.ma-tabelle th, .col-md-6 table.ma-tabelle td, .ma-spalten table.ma-tabelle th, .ma-spalten table.ma-tabelle td { padding: .6rem .65rem !important; }
  @media (max-width: 767.98px) {
    table.ma-tabelle { display: block; overflow-x: auto; white-space: nowrap; }
  }

  /* ---------- Ablauf in Schritten ---------- */
  .ma-schritte { list-style: none; padding: 0; counter-reset: ma-schritt; position: relative; }
  .ma-schritte li { counter-increment: ma-schritt; position: relative; padding: 0 0 1.4rem 3.4rem; }
  .ma-schritte li::before {
    content: counter(ma-schritt); position: absolute; left: 0; top: -.15rem; width: 2.3rem; height: 2.3rem; border-radius: 50%;
    background: var(--ma-akzent); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; z-index: 1;
  }
  .ma-schritte li:not(:last-child)::after { content: ""; position: absolute; left: 1.1rem; top: 2.2rem; bottom: .1rem; width: 2px; background: var(--ma-linie); }
  .ma-schritte li strong:first-child { display: block; margin-bottom: .15rem; }

  /* ---------- Balkengrafik (Breite steht als style="width:…%" am Wert) ---------- */
  .ma-balken { border: 1px solid var(--ma-linie); border-radius: var(--ma-radius); padding: 1.25rem 1.5rem; }
  .ma-balken-titel { font-weight: 700; margin: 0 0 1rem; }
  .ma-balken-zeile { display: grid; grid-template-columns: minmax(110px, 32%) 1fr; gap: .9rem; align-items: center; margin: .55rem 0; }
  .ma-balken-name { font-size: .95rem; }
  .ma-balken-spur { background: var(--ma-flaeche); border-radius: 99px; height: 1.9rem; overflow: hidden; }
  .ma-balken-wert {
    display: flex; align-items: center; justify-content: flex-end; height: 100%; min-width: 3.2rem; padding: 0 .75rem; border-radius: 99px;
    background: var(--ma-akzent); color: #fff; font-size: .85rem; font-weight: 700; white-space: nowrap; box-sizing: border-box;
    transition: max-width 1.2s cubic-bezier(.2, .8, .2, 1);
  }
  &.ma-js .ma-balken:not(.ma-sichtbar) .ma-balken-wert { max-width: 3.2rem; }
  &.ma-js .ma-balken.ma-sichtbar .ma-balken-wert { max-width: 100%; }
  .ma-balken-quelle { font-size: .8rem; color: var(--ma-leise); margin: .75rem 0 0; }
  @media (max-width: 575.98px) { .ma-balken-zeile { grid-template-columns: 1fr; gap: .3rem; } }

  /* ---------- Tipp mit Erfahrung ---------- */
  .ma-tipp {
    position: relative; background: var(--ma-flaeche); border-radius: var(--ma-radius); padding: 1.6rem 1.75rem 1.4rem 4.2rem; border: 0;
  }
  .ma-tipp::before {
    content: "\201E"; position: absolute; left: 1.2rem; top: -.4rem; font-size: 4.6rem; line-height: 1; font-family: Georgia, serif; color: var(--ma-akzent);
  }
  .ma-tipp p { font-size: 1.1rem; font-style: italic; margin: 0 0 .6rem; }
  .ma-tipp cite { font-style: normal; font-weight: 700; font-size: .92rem; color: var(--ma-text); }
  .ma-tipp cite::before { content: "— "; color: var(--ma-akzent); }

  /* ---------- Passt zu dir / eher nicht ---------- */
  .ma-passt { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
  .ma-passt > div { border-radius: var(--ma-radius); padding: 1.25rem 1.5rem; border: 1px solid var(--ma-linie); }
  .ma-passt h3 { font-size: 1.05rem !important; margin: 0 0 .6rem !important; }
  .ma-passt ul { list-style: none; padding: 0; margin: 0; }
  .ma-passt li { position: relative; padding: .3rem 0 .3rem 1.6rem; }
  .ma-passt-ja { background: var(--ma-flaeche); }
  .ma-passt-ja li::before { content: "\2713"; position: absolute; left: 0; color: var(--ma-akzent); font-weight: 800; }
  .ma-passt-nein li::before { content: "\2013"; position: absolute; left: .15rem; color: var(--ma-leise); font-weight: 800; }
  /* Themes geben li::before oft einen eigenen Punkt (Möbel Universum: 5 px grau, rund) – Größe, Fläche und Lage
     vollständig zurücksetzen, sonst steht der graue Punkt über Haken und Strich (Stefan 20.10.2026) */
  .ma-passt li::before { top: .3rem; width: auto; height: auto; background: none; border-radius: 0; line-height: inherit; }

  /* ---------- Weiter im Shop ---------- */
  .ma-weiter { background: var(--ma-dunkel); color: #fff; border-radius: var(--ma-radius); padding: 1.9rem 2rem; }
  .ma-weiter h2, .ma-weiter h3 { color: #fff; margin-top: 0; }
  .ma-weiter p { color: rgba(255, 255, 255, .88); }
  .ma-weiter a { color: #fff; }
  a.ma-knopf {
    display: inline-block; margin: .35rem .5rem .1rem 0; padding: .7rem 1.25rem; border-radius: 99px; font-weight: 700; text-decoration: none;
    background: var(--ma-akzent); color: #fff; border: 2px solid var(--ma-akzent); transition: transform .15s ease, filter .15s ease;
  }
  a.ma-knopf:hover { transform: translateY(-1px); filter: brightness(1.08); color: #fff; }
  a.ma-knopf-leise { background: transparent; border-color: currentColor; }
  /* in der dunklen Box: heller Hauptknopf – Akzent und Dunkel sind in manchen Themes derselbe Ton (Vodkahaus) */
  .ma-weiter a.ma-knopf { background: #fff; border-color: #fff; color: var(--ma-dunkel); }
  .ma-weiter a.ma-knopf:hover { color: var(--ma-dunkel); }
  .ma-weiter a.ma-knopf-leise { background: transparent; border-color: rgba(255, 255, 255, .7); color: #fff; }
  .ma-weiter a.ma-knopf-leise:hover { color: #fff; border-color: #fff; }

  /* ---------- FAQ (das Skript macht die Fragen aufklappbar; ohne Skript ist alles offen) ---------- */
  .ma-faq { border-top: 1px solid var(--ma-linie); }
  .ma-faq h3 { font-size: 1.05rem !important; margin: 0 !important; line-height: 1.4 !important; padding: 1rem 2.5rem 1rem 0; border-bottom: 1px solid var(--ma-linie); position: relative; }
  .ma-faq h3 + p, .ma-faq h3 ~ p { margin: .75rem 0 1rem; }
  &.ma-js .ma-faq h3 { cursor: pointer; }
  &.ma-js .ma-faq h3::after {
    content: ""; position: absolute; right: .4rem; top: 50%; width: .7rem; height: .7rem; margin-top: -.5rem;
    border-right: 2px solid var(--ma-akzent); border-bottom: 2px solid var(--ma-akzent); transform: rotate(45deg); transition: transform .2s ease;
  }
  &.ma-js .ma-faq h3.ma-offen::after { transform: rotate(-135deg); margin-top: -.15rem; }
  &.ma-js .ma-faq .ma-antwort { display: none; padding: .25rem 0 .75rem; }
  &.ma-js .ma-faq .ma-antwort.ma-offen { display: block; }

  /* ---------- Zwei Spalten (abschnittsweise; am Handy untereinander) ---------- */
  .ma-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2.5rem; margin: 1.5rem 0; align-items: start; }
  .ma-spalten > div > :first-child { margin-top: 0; }
  .ma-spalten > div > h2:first-child, .ma-spalten > div > h3:first-child { margin-top: 0 !important; }
  @media (max-width: 767.98px) { .ma-spalten { grid-template-columns: 1fr; } }

  /* ---------- Gut zu wissen (Hinweis ohne Person) ---------- */
  .ma-hinweis { background: var(--ma-flaeche); border-radius: var(--ma-radius); padding: 1.1rem 1.4rem 1.1rem 3.4rem; position: relative; margin: 1.5rem 0; }
  .ma-hinweis::before {
    content: "i"; position: absolute; left: 1.1rem; top: 1.05rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--ma-akzent);
    color: #fff; font: 700 .95rem/1.5rem Georgia, serif; text-align: center; font-style: italic;
  }
  .ma-hinweis > :last-child { margin-bottom: 0; }

  /* ---------- Farben und Ausführungen: Musterkacheln (Stefan 20.10.2026, Möbel Universum) ----------
     Je Gruppe (Front, Griff, Korpus …) eine <h3> und eine Liste; je Muster Bild, Name, Zusatz. Bilder sind die Dekor-
     muster des Shops (Konfigurator). Rahmen um jedes Bild: reines Weiß verschwände sonst auf weißem Grund. */
  .ma-farben { margin: 1.5rem 0; }
  .ma-farben-gruppe + .ma-farben-gruppe { margin-top: 1.25rem; }
  .ma-farben-gruppe h3 { font-size: 1.05rem !important; margin: 0 0 .7rem !important; }
  .ma-farben ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 1rem .9rem; }
  .ma-farben li { padding: 0; margin: 0; }
  .ma-farben li::before { content: none; display: none; } /* Theme-Punkt (vgl. ma-passt) */
  .ma-farben img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--ma-linie); border-radius: 10px; margin: 0 0 .45rem; }
  .ma-farbe-name { display: block; font-weight: 600; font-size: .92rem; line-height: 1.3; color: var(--ma-text); }
  .ma-farbe-info { display: block; font-size: .8rem; line-height: 1.3; color: var(--ma-leise); }
  @media (max-width: 575.98px) { .ma-farben ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem .6rem; } }

  /* ---------- Empfehlungen (Produkte aus dem Shop) ---------- */
  .ma-empfehlungen { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
  .ma-empfehlungen li { border: 1px solid var(--ma-linie); border-radius: var(--ma-radius); padding: 1rem 1.2rem; }
  .ma-empfehlungen li::before { content: none; display: none; } /* Theme-Punkt stand oben links in jeder Karte */
  .ma-empfehlungen li > a:first-child, .ma-empfehlungen li > strong:first-child { display: block; font-weight: 700; margin-bottom: .3rem; }
  /* mit Produktbild (setzt MagicAgent Pro beim Veröffentlichen, Klasse ma-mit-bild): klein links – in Kategorien,
     wo die Produktliste darüber die großen Bilder schon zeigt */
  .ma-empfehlungen li.ma-mit-bild { display: grid; grid-template-columns: 72px 1fr; column-gap: 1rem; align-items: start; }
  .ma-empfehlungen li.ma-mit-bild > a.ma-empfehlung-bild {
    grid-row: 1 / span 3; display: block; width: 72px; height: 96px; margin: 0; border-radius: 10px; overflow: hidden;
    background: #fff; border: 1px solid var(--ma-linie);
  }
  .ma-empfehlungen li.ma-mit-bild > a.ma-empfehlung-bild img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 4px; box-sizing: border-box; }
  .ma-empfehlungen li.ma-mit-bild > a:not(.ma-empfehlung-bild) { display: block; font-weight: 700; margin-bottom: .3rem; }
  /* groß (Blogbeiträge: dort gibt es keine Produktliste) – Bild oben über die ganze Karte */
  .ma-empfehlungen.ma-gross { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .ma-empfehlungen.ma-gross li.ma-mit-bild { grid-template-columns: 1fr; }
  .ma-empfehlungen.ma-gross li.ma-mit-bild > a.ma-empfehlung-bild { grid-row: auto; width: 100%; height: 220px; margin-bottom: .8rem; }
  .ma-empfehlungen.ma-gross li.ma-mit-bild > a.ma-empfehlung-bild img { padding: 12px; transition: transform .25s ease; }
  .ma-empfehlungen.ma-gross li.ma-mit-bild:hover > a.ma-empfehlung-bild img { transform: scale(1.04); }

  /* ---------- Verkostungsnotiz (nur mit Quelle: selbst verkostet oder laut Hersteller) ---------- */
  .ma-verkostung { border: 1px solid var(--ma-linie); border-radius: var(--ma-radius); margin: 1.75rem 0; overflow: hidden; }
  .ma-verkostung-titel { margin: 0 !important; padding: .9rem 1.25rem; background: var(--ma-dunkel); color: #fff; font-weight: 700; font-size: 1rem; }
  .ma-verkostung-zeile { display: grid; grid-template-columns: 7.5rem 1fr; gap: .75rem; padding: .7rem 1.25rem; border-top: 1px solid var(--ma-linie); margin: 0 !important; }
  .ma-verkostung-zeile:first-of-type { border-top: 0; }
  .ma-verkostung-zeile > strong { color: var(--ma-akzent); font-weight: 700; }
  .ma-verkostung-quelle { margin: 0 !important; padding: .65rem 1.25rem; background: var(--ma-flaeche); font-size: .85rem; color: var(--ma-leise); }
  @media (max-width: 575.98px) { .ma-verkostung-zeile { grid-template-columns: 1fr; gap: .15rem; } }

  /* ---------- Verfasser: Zeile oben und Kasten am Ende ---------- */
  .ma-autor-zeile { font-size: .88rem; color: var(--ma-leise); margin: .25rem 0 1.25rem !important; }
  .ma-autor-zeile strong { color: var(--ma-text); }
  .ma-autor { display: grid; grid-template-columns: 4.5rem 1fr; gap: 0 1.1rem; align-items: start; border-top: 2px solid var(--ma-akzent); padding: 1.4rem 0 .5rem; margin: 2.5rem 0 1rem; }
  .ma-autor-bild { grid-row: 1 / span 4; width: 4.5rem; height: 4.5rem; border-radius: 50%; overflow: hidden; background: var(--ma-akzent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.6rem; margin: 0 !important; }
  .ma-autor-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .ma-autor-label { margin: 0 !important; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ma-leise); }
  .ma-autor-name { margin: .1rem 0 .35rem !important; font-weight: 700; font-size: 1.1rem; }
  .ma-autor > p:not([class]) { margin: 0 0 .4rem; }

  /* ---------- Bilder im Text (MagicAgent Pro bereitet sie auf: festes Format, nichts Wichtiges abgeschnitten) ---------- */
  .ma-bild-text { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1.25rem 2.25rem; align-items: center; margin: 2rem 0; }
  .ma-bild-text.ma-rechts > .ma-bild { order: 2; }
  .ma-bild-text > div > :first-child { margin-top: 0 !important; }
  .ma-bild { margin: 0 !important; }
  .ma-bild img { display: block; width: 100%; height: auto; border-radius: var(--ma-radius); }
  .ma-bild-breit { margin: 2rem 0; }
  .ma-bildunterschrift { font-size: .85rem; color: var(--ma-leise); margin: .5rem 0 0 !important; }
  @media (max-width: 767.98px) {
    .ma-bild-text { grid-template-columns: 1fr; }
    .ma-bild-text.ma-rechts > .ma-bild { order: 0; }
  }

  /* ---------- Quellen ---------- */
  .ma-quellen { font-size: .82rem; color: var(--ma-leise); border-top: 1px solid var(--ma-linie); padding-top: .75rem; margin-top: 2rem; }

  @media (prefers-reduced-motion: reduce) {
    &.ma-js .ma-einblenden { opacity: 1; transform: none; transition: none; }
    .ma-balken-wert { transition: none; }
    &.ma-js .ma-balken:not(.ma-sichtbar) .ma-balken-wert { max-width: 100%; }
  }
}

/* ---------- allesecht.: Farben statt Shop-Theme ---------- */
:root {

  --ma-dunkel: #141413;
  --ma-text: #27272a;
  --ma-leise: #6b6b73;
  --ma-linie: #e5e3dc;
  --ma-flaeche: #f1efe7;
  --ma-radius: 14px;
}

/* Bereichsfarbe der Seite: settings.js setzt --ae-acc auf body (Ratgeber Grün #3CC37A) – auf :root stünde noch das
   Standard-Türkis. Für Text auf Hell etwas dunkler. */
body {
  --mb-acc: var(--ae-acc, #3CC37A);
  --ma-akzent: color-mix(in srgb, var(--mb-acc) 72%, #000);
}

/* ---------- Ratgeber-Artikel ---------- */
/* Pro-Seiten setzen normalen Abschnitten 160 px Abstand und einen Kartenrahmen – Artikel und Liste schließen direkt an den Kopf an */
body.pro-page #dynamic-category #dynamicContentBlocks > section.mb-abschnitt:not(.ae-pro-section) {
  margin: 0 auto !important; padding: 56px 24px 128px !important; border: 0 !important; background: transparent !important; overflow: visible !important;
}
.mb-artikel { max-width: 780px; margin: 0 auto; color: var(--ma-text); font-size: 1.05rem; line-height: 1.75; }
.mb-artikel .mb-meta { color: var(--ma-leise); font-size: .9rem; margin: 0 0 2rem; }
.mb-text h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.25; font-weight: 600; letter-spacing: -.01em; margin: 3rem 0 1rem; color: var(--ma-dunkel); scroll-margin-top: 110px; }
.mb-text h3 { font-size: 1.25rem; line-height: 1.35; font-weight: 600; margin: 2rem 0 .6rem; color: var(--ma-dunkel); }
.mb-text p { margin: 0 0 1.1rem; }
.mb-text ul, .mb-text ol { margin: 0 0 1.25rem; padding-left: 1.3rem; }
.mb-text li { margin: .3rem 0; }
.mb-text a { color: var(--ma-akzent); text-decoration: underline; text-underline-offset: 3px; }
.mb-text img { max-width: 100%; height: auto; border-radius: 10px; }
.mb-text > :first-child { margin-top: 0; }

/* Inhaltsverzeichnis dunkel wie der Kasten „Fragen zu deinem Projekt?“ (Stefan 21.10.2026: „Hintergrund eher dunkel“) */
.mb-inhalt { border-radius: var(--ma-radius); padding: 1.25rem 1.6rem; margin: 0 0 2.5rem; background: #141413; color: #d4d4d8; }
.mb-inhalt-titel { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: #a1a1aa; margin: 0 0 .6rem; font-weight: 600; }
.mb-inhalt ol { margin: 0; padding-left: 1.2rem; }
.mb-inhalt li { margin: .3rem 0; color: #71717a; }
/* !important: die Linkregel der Website (#dynamicContentBlocks section … a) hat mehr Vorrang */
.mb-inhalt a { color: #faf9f6 !important; text-decoration: none; }
.mb-inhalt a:hover { color: var(--mb-acc) !important; }

.mb-themen { display: flex; flex-wrap: wrap; gap: .5rem; margin: 2.5rem 0 0; }
.mb-themen a, .mb-themen span { font-size: .85rem; padding: .3rem .8rem; border-radius: 999px; background: var(--ma-flaeche); color: var(--ma-dunkel); text-decoration: none; }
.mb-themen a:hover { background: color-mix(in srgb, var(--mb-acc) 18%, transparent); }

.mb-autor { display: flex; gap: 1rem; align-items: flex-start; border-top: 1px solid var(--ma-linie); margin: 2.5rem 0 0; padding: 1.75rem 0 0; }
.mb-autor img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; }
.mb-autor p { margin: 0 0 .35rem; font-size: .95rem; color: var(--ma-leise); }
.mb-autor .mb-autor-label { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; }
.mb-autor .mb-autor-name { color: var(--ma-dunkel); font-weight: 600; font-size: 1.05rem; }
.mb-autor a { color: var(--ma-akzent); }

.mb-anfrage { margin: 3rem 0 0; padding: 1.75rem 2rem; border-radius: var(--ma-radius); background: #141413; color: #d4d4d8; }
.mb-anfrage p { margin: 0 0 1rem; }
.mb-anfrage .mb-anfrage-titel { color: #faf9f6; font-size: 1.3rem; font-weight: 600; margin-bottom: .5rem; }
.mb-knopf { display: inline-block; background: var(--mb-acc); color: #0b1a12 !important; padding: .7rem 1.3rem; border-radius: 12px; font-weight: 600; text-decoration: none !important; }
.mb-knopf:hover { opacity: .9; }

.mb-zurueck { margin: 2rem 0 0; }
.mb-zurueck a { color: var(--ma-akzent); }

.mb-weitere { margin: 4rem 0 0; }
.mb-weitere h2 { font-size: 1.5rem; font-weight: 600; margin: 0 0 1.25rem; color: var(--ma-dunkel); }
.mb-weitere .mb-karten { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* ---------- Übersicht ---------- */
.mb-liste-titel { font-size: clamp(1.8rem, 3vw, 2.75rem); font-weight: 600; letter-spacing: -.01em; margin: 0 0 1.5rem; color: var(--ma-dunkel); }
.mb-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 2rem; }
.mb-filter button { font: inherit; font-size: .9rem; padding: .4rem .95rem; border-radius: 999px; border: 1px solid #ddd8ca; background: #ece8dd; color: var(--ma-dunkel); cursor: pointer; }
.mb-filter button.aktiv { background: #141413; border-color: #141413; color: #faf9f6; }
.mb-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.5rem; }
/* Karten: warmer Mittelton statt Weiß (Stefan 21.10.2026: „das Helle gefällt mir nicht, dunkel soll es auch nicht sein“) */
.mb-karte { display: flex; flex-direction: column; border: 1px solid #ddd8ca; border-radius: var(--ma-radius); overflow: hidden; background: #ece8dd; color: var(--ma-text); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }
.mb-karte:hover { background: #e7e2d5; }
.mb-karte[hidden] { display: none; }
.mb-karte:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(20, 20, 19, .08); }
.mb-karte-bild { display: block; aspect-ratio: 16 / 9; background: #141413; overflow: hidden; }
.mb-karte-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mb-karte-bild img[src$=".svg"] { object-fit: contain; padding: 1rem; }
.mb-karte-text { display: flex; flex-direction: column; gap: .45rem; padding: 1.1rem 1.25rem 1.3rem; flex: 1; }
.mb-karte-thema { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ma-akzent); font-weight: 600; }
.mb-karte-titel { font-size: 1.15rem; line-height: 1.35; font-weight: 600; color: var(--ma-dunkel); hyphens: auto; hyphenate-limit-chars: 14 6 6; overflow-wrap: break-word; }
.mb-karte-anriss { font-size: .95rem; line-height: 1.55; color: #5b5b63; flex: 1; }
.mb-karte-meta { font-size: .8rem; color: var(--ma-leise); }

/* statische Fassung (Crawler ohne JS; im Browser ersetzt settings.js sie sofort) */
.mb-kopf { max-width: 780px; margin: 0 auto; padding: 7rem 1rem 1rem; }
.mb-kopf img { max-width: 100%; height: auto; border-radius: 12px; }

/* Dunkle Kästen: die Website setzt Text- und Linkfarben in Inhaltsabschnitten mit !important und zwei IDs –
   doppelte ID hebt den Vorrang darüber, ohne an index.css etwas zu ändern */
#dynamic-category#dynamic-category #dynamicContentBlocks .mb-inhalt :is(p, li, ol) { color: #a1a1aa !important; }
#dynamic-category#dynamic-category #dynamicContentBlocks .mb-inhalt a { color: #faf9f6 !important; }
#dynamic-category#dynamic-category #dynamicContentBlocks .mb-inhalt a:hover { color: var(--mb-acc) !important; }
#dynamic-category#dynamic-category #dynamicContentBlocks .mb-anfrage p { color: #d4d4d8 !important; }
#dynamic-category#dynamic-category #dynamicContentBlocks .mb-anfrage .mb-anfrage-titel { color: #faf9f6 !important; }
#dynamic-category#dynamic-category #dynamicContentBlocks .mb-anfrage a.mb-knopf { color: #0b1a12 !important; }
/* Links im Text in der Bereichsfarbe – die Website färbt Links in Abschnitten sonst fest türkis (!important) */
#dynamic-category#dynamic-category #dynamicContentBlocks .mb-text a:not(.ma-knopf), #dynamic-category#dynamic-category #dynamicContentBlocks .mb-zurueck a, #dynamic-category#dynamic-category #dynamicContentBlocks .mb-autor a { color: var(--ma-akzent) !important; }
#dynamic-category#dynamic-category #dynamicContentBlocks .mb-themen a { color: var(--ma-dunkel) !important; }
/* „Nächster Schritt“ (ma-weiter) im Stil von allesecht.: dunkler Kasten, Knopf türkis mit dunkler Schrift (Stefan 21.10.2026) */
.mb-text .ma-weiter { background: #141413; }
.mb-text .ma-weiter > :last-child { margin-bottom: 0; }
.mb-text .ma-weiter h2 { margin-top: 0; font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
#dynamic-category#dynamic-category #dynamicContentBlocks .mb-text .ma-weiter :is(h2, h3) { color: #faf9f6 !important; }
#dynamic-category#dynamic-category #dynamicContentBlocks .mb-text .ma-weiter p { color: #d4d4d8 !important; }
#dynamic-category#dynamic-category #dynamicContentBlocks .mb-text .ma-weiter a.ma-knopf { background: var(--mb-acc); border-color: var(--mb-acc); color: #0b1a12 !important; border-radius: 12px; text-decoration: none; }
#dynamic-category#dynamic-category #dynamicContentBlocks .mb-text .ma-weiter a.ma-knopf-leise { background: transparent; border-color: rgba(250, 249, 246, .5); color: #faf9f6 !important; }
#dynamic-category#dynamic-category #dynamicContentBlocks .mb-text a.ma-knopf:not(.ma-weiter a) { background: var(--mb-acc); border-color: var(--mb-acc); color: #0b1a12 !important; text-decoration: none; }

@media (max-width: 768px) {
  .mb-artikel { font-size: 1rem; }
  .mb-anfrage { padding: 1.4rem 1.25rem; }
  .mb-karten { grid-template-columns: 1fr; }
}