/* ============================================================
   Grey Investment News — geteiltes Design-CSS
   1:1 aus der Vorlage übernommen (index/blog/artikel/ueber-uns).
   ============================================================ */

body { font-family:'Hanken Grotesk',system-ui,sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.display { font-family:'Spectral',Georgia,ui-serif,serif; }
h1,h2,h3,h4 { text-wrap:balance; } p { text-wrap:pretty; }
.tnum { font-feature-settings:'tnum' 1,'lnum' 1; font-variant-numeric: tabular-nums lining-nums; }
html { scroll-behavior:smooth; } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto!important} }

/* Feine Messing-Haarlinie als Markenzeichen */
.rule-brass { height:1px; background:linear-gradient(90deg, transparent, #c1a466 12%, #c1a466 88%, transparent); }
.kicker { font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:.72rem; }

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

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

/* Reveal — verbessert nur einen bereits sichtbaren Default; sanfter Stagger via --i */
.js .reveal { opacity:0; transform:translateY(14px); 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} }

/* Tastatur-Fokus (a11y) — deutlicher Ring, auf hell wie dunkel sichtbar */
:where(a,button,input,summary,[tabindex]):focus-visible { outline:2px solid #114e30; outline-offset:3px; border-radius:4px; }
.on-dark :where(a,button,input,[tabindex]):focus-visible { outline-color:#e7d9b4; }

@media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; } }

/* Marktdaten-Tabelle */
.mkt th, .mkt td { padding:.85rem 1rem; }
.mkt tbody tr { border-top:1px solid #e4e0d2; }
.mkt tbody tr:hover { background:#faf8f2; }

::selection { background:#d8e8de; color:#0b1712; }

/* ===== Artikel (single.php) ===== */
.article-body{font-size:1.075rem;line-height:1.75;color:#2c4034}
.article-body>p{margin-top:1.4rem}.article-body>p:first-child{margin-top:0}
.article-body .lead{font-size:1.25rem;line-height:1.6;color:#12211a}
.article-body h2{font-family:'Spectral',Georgia,serif;letter-spacing:-.01em;font-weight:600;font-size:1.7rem;line-height:1.2;color:#12211a;margin-top:3rem;scroll-margin-top:7rem}
.article-body h3{font-family:'Spectral',serif;font-weight:600;font-size:1.2rem;color:#12211a;margin-top:2rem}
.article-body>ul{margin-top:1.1rem;padding-left:0;list-style:none}
.article-body>ul>li{position:relative;padding-left:1.5rem;margin-top:.6rem}
.article-body>ul>li::before{content:'';position:absolute;left:.15rem;top:.72rem;width:6px;height:6px;border-radius:9999px;background:#15643d}
.article-body strong{color:#12211a;font-weight:600}
.article-body a:not(.no-prose):not(.heading-anchor){color:#114e30;text-decoration:underline;text-underline-offset:2px}
.table-wrap{overflow-x:auto;margin:2rem 0}
.article-body table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:34rem}
.article-body th,.article-body td{text-align:left;padding:.75rem .9rem;border-bottom:1px solid #e4e0d2}
.article-body thead th{color:#45564c;font-weight:600;white-space:nowrap;border-bottom:1px solid #c1a466}
.article-body tbody tr:hover{background:#faf8f2}
.article-body caption{caption-side:bottom;margin-top:.7rem;font-size:.75rem;color:#5b6b60;text-align:left}
.faq{margin-top:1.4rem;border-top:1px solid #e4e0d2}
.faq details{border-bottom:1px solid #e4e0d2}
.faq summary{cursor:pointer;list-style:none;padding:1.1rem 2rem 1.1rem 0;position:relative;font-weight:600;color:#12211a;font-family:'Spectral',serif}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:.2rem;top:.85rem;font-size:1.4rem;color:#114e30;line-height:1}
.faq details[open] summary::after{content:'\2013'}
.faq .faq-a{margin:0 0 1.1rem;color:#2c4034;line-height:1.7}
.sources{counter-reset:src;list-style:none;padding:0;margin-top:1.2rem;font-size:.9rem}
.sources li{counter-increment:src;position:relative;padding-left:2.2rem;margin-top:.8rem;color:#45564c;line-height:1.6}
.sources li::before{content:counter(src);position:absolute;left:0;top:.05rem;width:1.5rem;height:1.5rem;background:#efece1;color:#45564c;border-radius:9999px;font-size:.72rem;font-weight:600;display:flex;align-items:center;justify-content:center}
.heading-anchor{opacity:0;margin-left:.45rem;color:#c4bda6;text-decoration:none!important;font-weight:400;transition:opacity .15s,color .15s}
.article-body h2:hover .heading-anchor,.heading-anchor:focus{opacity:1}
.heading-anchor:hover{color:#114e30}
.toc-link{border-left:2px solid transparent}
.toc-link.active{border-left-color:#114e30;color:#12211a;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}

/* ===== Archiv-Filter-Chips (archive.php / template-blog.php) ===== */
.chip{border:1px solid #d7d2c0;color:#2c4034;background:transparent;border-radius:9999px;padding:.5rem 1rem;font:600 .85rem/1 'Hanken Grotesk';cursor:pointer;transition:border-color .2s,color .2s,background .2s;text-decoration:none;display:inline-block}
.chip:hover{border-color:#114e30;color:#114e30}
.chip.chip-on{background:#0d3c26;border-color:#0d3c26;color:#faf8f2}

/* ===== Pagination (paginate_links, "1 2 3 … 7") ===== */
/* Hinweis: paginate_links() unterstützt KEIN eigenes 'class'-Argument für
   das <ul> — es ist immer fest "page-numbers". Deshalb stylen wir über den
   umschließenden Container ".gin-pagination", der ums echo gelegt wird. */
.gin-pagination ul.page-numbers{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;list-style:none;margin:0;padding:0}
.gin-pagination li{display:inline-block;margin:0}
.gin-pagination a.page-numbers,.gin-pagination span.page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:2.4rem;height:2.4rem;padding:0 .7rem;border:1px solid #d7d2c0;border-radius:9999px;font:600 .85rem/1 'Hanken Grotesk',sans-serif;color:#2c4034;text-decoration:none;transition:border-color .2s,color .2s,background .2s}
.gin-pagination a.page-numbers:hover{border-color:#114e30;color:#114e30}
.gin-pagination span.page-numbers.dots{border:none;background:none;color:#8a9089}
.gin-pagination span.page-numbers.current{background:#0d3c26;border-color:#0d3c26;color:#faf8f2;font-weight:700}
.gin-pagination a.page-numbers.next,.gin-pagination a.page-numbers.prev{padding:0 1rem;font-weight:600}

/* WP-Grundlagen: Ausrichtung von Bildern/Captions aus dem Editor im Artikeltext */
.article-body .wp-caption, .article-body .wp-block-image { margin-top:1.4rem; }
.article-body img { border-radius:.5rem; }
.alignleft{float:left;margin:.3rem 1.4rem 1rem 0}
.alignright{float:right;margin:.3rem 0 1rem 1.4rem}
.aligncenter{display:block;margin-left:auto;margin-right:auto}

/* ===== Pagination (paginate_links, "1 2 3 … 7") ===== */
.gin-pagination ul.page-numbers{display:flex;flex-wrap:wrap;align-items:center;justify-items:center;gap:.4rem;list-style:none;margin:0;padding:0}
.gin-pagination li{display:inline-block;margin:0}
.gin-pagination a.page-numbers,.gin-pagination span.page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:2.4rem;height:2.4rem;padding:0 .7rem;border:1px solid #d7d2c0;border-radius:9999px;font:600 .85rem/1 'Hanken Grotesk',sans-serif;color:#2c4034;text-decoration:none;transition:border-color .2s,color .2s,background .2s}
.gin-pagination a.page-numbers:hover{border-color:#114e30;color:#114e30}
.gin-pagination span.page-numbers.dots{border:none;background:none;color:#8a9089}
.gin-pagination span.page-numbers.current{background:#0d3c26;border-color:#0d3c26;color:#faf8f2;font-weight:700}
.gin-pagination a.page-numbers.next,.gin-pagination a.page-numbers.prev{padding:0 1rem;font-weight:600}

/* 1. Bỏ dấu chấm mặc định */
nav li.menu-item {
  list-style: none;
}

/* 2. Thiết lập thanh ngang cố định chiều rộng 100%, thu nhỏ scaleX = 0 và chọn gốc biến đổi ở bên trái */
nav li.menu-item > a {
  position: relative; /* Cần thiết để căn vị trí thanh ngang */
  display: inline-block;
}

nav li.menu-item > a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0); /* Thu nhỏ về 0 theo chiều ngang */
  transform-origin: left; /* Gốc mở rộng từ bên trái sang */
  transition: transform 0.3s ease-in-out; /* Tạo hiệu ứng mượt */
}

/* 3. Hiệu ứng hover: Phóng to scaleX lên 1 */
nav li.menu-item:hover > a::after {
  transform: scaleX(1);
}

/* 4. (Tùy chọn) Giữ thanh ngang ở trang hiện tại */
nav li.menu-item.current-menu-item > a::after {
  transform: scaleX(1);
}