/* ==========================================================================
   fonds-news.net — Theme-CSS
   Teil 1: Basis (1:1 aus dem Design-Template, index.html)
   Teil 2: Beitragstext (.beitragstext) — Template "Artikel" + WP-Ergänzungen
   Teil 3: WordPress-spezifische Anpassungen
   Tailwind selbst kommt per CDN (siehe inc/setup.php), die Konfiguration
   (Farben, Schriften, Schatten) steht in assets/js/tailwind-config.js.
   ========================================================================== */

/* ---------- Teil 1: Basis ---------- */
    body { font-family:'Inter',system-ui,sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
    .display { font-family:'Space Grotesk','Inter',sans-serif; letter-spacing:-0.02em; }
    h1,h2,h3,h4 { text-wrap:balance; } p { text-wrap:pretty; }
    .tnum { font-variant-numeric: tabular-nums lining-nums; }
    html { scroll-behavior:smooth; } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto!important} }

    .kicker { font-weight:600; letter-spacing:.16em; text-transform:uppercase; font-size:.72rem; }

    /* Runde Bildecken — Hausregel (§4a). Beitragsbilder rund, große Hero/Banner eckig. */
    :root { --bild-radius:16px; }

    /* Bild-Zoom bei Hover */
    .imgzoom { overflow:hidden; }
    .imgzoom img { transition: transform 1s cubic-bezier(.22,.61,.36,1); }
    .group:hover .imgzoom img { transform: scale(1.05); }
    @media (prefers-reduced-motion:reduce){ .imgzoom img{transition:none} }

    /* Unterstreichungs-Link (Akzent) */
    .ulink { background-image:linear-gradient(currentColor,currentColor); background-size:0% 1.5px; background-repeat:no-repeat; background-position:0 100%; transition:background-size .35s cubic-bezier(.22,.61,.36,1); }
    .ulink:hover { background-size:100% 1.5px; }

    /* Reveal on scroll */
    .js .reveal { opacity:0; transform:translateY(16px); transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); transition-delay:calc(var(--i,0) * 80ms); }
    .js .reveal.in { opacity:1; transform:none; }
    @media (prefers-reduced-motion:reduce){ .js .reveal{opacity:1!important;transform:none!important;transition:none} }

    /* Fokus-Ring (a11y) */
    :where(a,button,input,summary,[tabindex]):focus-visible { outline:2px solid #0d7d71; outline-offset:3px; border-radius:8px; }
    .on-dark :where(a,button,input,[tabindex]):focus-visible { outline-color:#9ce7cf; }

    /* Aurora-Farbverläufe im Hero (Stripe-artig) */
    .aurora::before, .aurora::after { content:''; position:absolute; border-radius:9999px; filter:blur(64px); opacity:.75; pointer-events:none; }
    .aurora::before { width:38rem; height:38rem; top:-14rem; right:-10rem; background:radial-gradient(circle at 30% 30%, #DDFBEF, rgba(221,251,239,0) 62%); }
    .aurora::after  { width:34rem; height:34rem; bottom:-16rem; left:-12rem; background:radial-gradient(circle at 50% 50%, rgba(34,179,158,.35), rgba(34,179,158,0) 60%); }

    /* Feines Punktraster als Hero-Textur */
    .dotgrid { background-image:radial-gradient(rgba(47,72,88,.10) 1px, transparent 1px); background-size:22px 22px; -webkit-mask-image:linear-gradient(180deg,#000 0%, transparent 78%); mask-image:linear-gradient(180deg,#000 0%, transparent 78%); }

    /* Marktdaten-Tabelle */
    .mkt th, .mkt td { padding:.9rem 1.1rem; }
    .mkt tbody tr { border-top:1px solid #e0ebe9; }
    .mkt tbody tr:hover { background:#f1fdf8; }
    .spark { display:block; width:74px; height:22px; }

    ::selection { background:#DDFBEF; color:#122029; }
    @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms!important; transition-duration:.001ms!important; } }
  

/* ---------- Teil 2: Beitragstext ---------- */
/* ===== Artikel ===== */
    .beitragstext { font-size:1.0625rem; line-height:1.75; color:#3a5666; }
    .beitragstext > p { margin-top:1.4rem; } .beitragstext > p:first-child { margin-top:0; }
    .beitragstext .lead { font-size:1.22rem; line-height:1.6; color:#1b303a; }
    .beitragstext h2 { font-family:'Space Grotesk','Inter',sans-serif; letter-spacing:-0.02em; font-weight:700; font-size:1.65rem; line-height:1.18; color:#122029; margin-top:3rem; scroll-margin-top:6rem; position:relative; }
    .beitragstext h3 { font-weight:700; font-size:1.18rem; color:#1b303a; margin-top:2rem; }
    /* Listen: Tailwind-Reset entfernt Aufzählungszeichen -> hier wieder sichtbar machen.
       Greift für unklassierte Listen im Beitragstext (auch verschachtelt) und WP-Block-Listen;
       Listen mit eigenen Klassen (z. B. ct-* oder Tailwind-Module) bleiben unberührt. */
    .beitragstext ul:not([class]), .beitragstext ul.wp-block-list { margin-top:1.1rem; padding-left:0; list-style:none; }
    .beitragstext ul:not([class]) > li, .beitragstext ul.wp-block-list > li { position:relative; padding-left:1.5rem; margin-top:.6rem; }
    .beitragstext ul:not([class]) > li::before, .beitragstext ul.wp-block-list > li::before { content:''; position:absolute; left:.1rem; top:.62rem; width:7px; height:7px; border-radius:9999px; background:#0d7d71; }
    .beitragstext ul:not([class]) ul:not([class]), .beitragstext ol:not([class]) ul:not([class]) { margin-top:.4rem; }
    .beitragstext ul:not([class]) ul:not([class]) > li::before { background:transparent; box-shadow:inset 0 0 0 1.5px #0d7d71; }
    .beitragstext ol:not([class]), .beitragstext ol.wp-block-list { margin-top:1.1rem; padding-left:1.7rem; list-style:decimal; }
    .beitragstext ol:not([class]) > li, .beitragstext ol.wp-block-list > li { padding-left:.35rem; margin-top:.6rem; }
    .beitragstext ol:not([class]) > li::marker, .beitragstext ol.wp-block-list > li::marker { color:#0d7d71; font-weight:600; }
    .beitragstext ol:not([class]) ol:not([class]) { margin-top:.4rem; list-style:lower-alpha; }
    .beitragstext strong { color:#1b303a; font-weight:600; }
    .beitragstext a:not(.no-prose):not(.heading-anchor):not([class*="ct-"]):not(.wp-element-button) { color:#0b655c; text-decoration:underline; text-underline-offset:2px; }
    .table-wrap { overflow-x:auto; margin:2rem 0; border-radius:16px; border:1px solid #e0ebe9; }
    .beitragstext table { width:100%; border-collapse:collapse; font-size:.95rem; min-width:34rem; }
    .beitragstext th,.beitragstext td { text-align:left; padding:.8rem 1rem; border-bottom:1px solid #e0ebe9; }
    .beitragstext thead th { background:#f1fdf8; color:#4d6b7b; font-weight:600; white-space:nowrap; border-bottom:2px solid #c1f3e0; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
    .beitragstext tbody tr:hover { background:#f1fdf8; }
    .beitragstext caption { caption-side:bottom; margin-top:.7rem; font-size:.75rem; color:#688492; text-align:left; }
    .faq { margin-top:1.2rem; border-top:1px solid #e0ebe9; }
    .faq details { border-bottom:1px solid #e0ebe9; }
    .faq summary { cursor:pointer; list-style:none; padding:1.1rem 2rem 1.1rem 0; position:relative; font-weight:600; color:#1b303a; }
    .faq summary::-webkit-details-marker { display:none; }
    .faq summary::after { content:'+'; position:absolute; right:.2rem; top:.8rem; font-size:1.5rem; color:#0d7d71; line-height:1; }
    .faq details[open] summary::after { content:'–'; }
    .faq .faq-a { margin:0 0 1.1rem; color:#3a5666; line-height:1.7; }
    .heading-anchor { opacity:0; margin-left:.45rem; color:#b6c7cf; text-decoration:none!important; font-weight:400; transition:opacity .15s,color .15s; }
    .beitragstext h2:hover .heading-anchor,.heading-anchor:focus { opacity:1; }
    .heading-anchor:hover { color:#0d7d71; }
    .toc-link { border-left:2px solid #e0ebe9; }
    .toc-link.active { border-left-color:#0d7d71; color:#122029; font-weight:600; }
    #toTop { opacity:0; pointer-events:none; transition:opacity .2s,transform .2s; transform:translateY(6px); }
    #toTop.show { opacity:1; pointer-events:auto; transform:none; }
  

/* ---------- Teil 3: WordPress-Ergänzungen ---------- */

/* Fließtext robust: lange URLs/Wörter, Medien, Tabellen ohne Wrapper */
.beitragstext { overflow-wrap:break-word; min-width:0; }
.beitragstext img, .beitragstext video, .beitragstext iframe, .beitragstext embed { max-width:100%; height:auto; }
.beitragstext > figure, .beitragstext > .wp-block-image { margin:2rem 0; }
.beitragstext img { border-radius:var(--bild-radius); }
.beitragstext figure img { display:block; }
.beitragstext figcaption, .beitragstext .wp-caption-text { margin-top:.6rem; font-size:.78rem; color:#688492; }
.beitragstext blockquote { margin:2rem 0; padding:.2rem 0 .2rem 1.4rem; border-left:3px solid #0d7d71; color:#1b303a; font-size:1.12rem; line-height:1.6; }
.beitragstext blockquote cite { display:block; margin-top:.6rem; font-size:.85rem; font-style:normal; color:#688492; }
.beitragstext hr { margin:2.5rem 0; border:0; border-top:1px solid #e0ebe9; }
.beitragstext pre, .beitragstext code { font-size:.9em; }
.beitragstext pre { overflow-x:auto; padding:1rem 1.2rem; border-radius:12px; background:#f1fdf8; border:1px solid #e0ebe9; }
.beitragstext > table, .beitragstext > figure.wp-block-table { display:block; width:100%; min-width:0; max-width:100%; overflow-x:auto; margin:2rem 0; }
.beitragstext .table-wrap table, .beitragstext figure.wp-block-table table { display:table; }
.beitragstext .alignleft { float:left; margin:.3rem 1.4rem 1rem 0; max-width:50%; }
.beitragstext .alignright { float:right; margin:.3rem 0 1rem 1.4rem; max-width:50%; }
.beitragstext .aligncenter { margin-left:auto; margin-right:auto; display:block; }
.beitragstext::after { content:''; display:table; clear:both; }
@media (max-width:640px){ .beitragstext .alignleft, .beitragstext .alignright { float:none; margin:1.5rem 0; max-width:100%; } }

/* Rechtstexte (Impressum, Datenschutz …): kompaktere Überschriften wie im Template */
.beitragstext.is-legal { font-size:1rem; line-height:1.7; color:#2F4858; }
.beitragstext.is-legal h2 { font-size:1.3rem; margin-top:2rem; }
.beitragstext.is-legal > p { margin-top:.75rem; }

/* WordPress-Hilfsklassen */
.screen-reader-text { position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.screen-reader-text:focus { position:fixed!important; top:.75rem; left:.75rem; z-index:100; width:auto; height:auto; margin:0; padding:.7rem 1.1rem; clip:auto; background:#fff; color:#122029; border-radius:9999px; box-shadow:0 8px 30px rgba(18,32,41,.25); font-weight:600; }

/* Eingeloggt: sticky Header unterhalb der WP-Adminleiste */
body.admin-bar header.sticky { top:32px; }
body.admin-bar #progress { top:32px; }
@media (max-width:782px){ body.admin-bar header.sticky, body.admin-bar #progress { top:46px; } }
@media (max-width:600px){ body.admin-bar header.sticky, body.admin-bar #progress { top:0; } body.admin-bar #progress { top:46px; } }
body.admin-bar .beitragstext h2 { scroll-margin-top:8rem; }

/* Newsletter-Plugin-Formulare (Shortcode) im dunklen Banner angleichen */
.fn-nl-embed form { display:flex; flex-direction:column; gap:.75rem; }
@media (min-width:640px){ .fn-nl-embed form { flex-direction:row; } }
.fn-nl-embed input[type="email"], .fn-nl-embed input[type="text"] { width:100%; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.1); color:#fff; border-radius:9999px; padding:.875rem 1.25rem; font-size:.95rem; }
.fn-nl-embed input::placeholder { color:#d7e2e6; }
.fn-nl-embed input[type="submit"], .fn-nl-embed button { flex-shrink:0; white-space:nowrap; border:0; cursor:pointer; background:#DDFBEF; color:#122029; border-radius:9999px; padding:.875rem 1.75rem; font-size:.95rem; font-weight:600; }
.fn-nl-embed label { color:#d7e2e6; font-size:.82rem; }
.fn-nl-embed a { color:#9ce7cf; text-decoration:underline; }

/* Kategorie-Chips / Pagination */
.chip-on { background:#2F4858; border-color:#2F4858; color:#fff; }

/* Lange deutsche Komposita ("Vermögensverwaltung") dürfen schmale Viewports nie sprengen */
h1, h2, h3, h4 { overflow-wrap: break-word; }
@media (max-width: 640px) { h1, h2, h3, h4 { -webkit-hyphens: auto; hyphens: auto; } }

/* Altinhalte: Blocksatz/zentrierte Überschriften aus dem früheren Editor (Inline-Styles)
   auf das Design zurücksetzen — linksbündig, kein Blocksatz (Lücken auf Mobil).
   Nur Fließtext-Ebene; ct-Module, Tabellen und Bilder bleiben unberührt. */
.beitragstext > :is(p, h2, h3, h4, blockquote),
.beitragstext > :is(ul, ol) > li { text-align: left !important; }