/**
 * =============================================================================
 * custom.css – thopex.de (Grav, Theme Quark)
 * =============================================================================
 * Lädt nach theme.css (Reihenfolge in templates/partials/base.html.twig).
 * Größere Umbauten: Cache leeren → bin/grav clearcache (oder Admin).
 *
 * ORIENTIERUNG – mit Suche (Strg/Cmd+F) zur passenden Überschrift springen
 * -----------------------------------------------------------------------------
 *  1. SCHRIFTEN      @font-face + Dateien in fonts/; Familiennamen in :root
 *  2. DESIGN-TOKENS  :root-Variablen (Farben, Schrift, Radien) – meist hier starten
 *  3. LIGHTBOX       Bild-Links + Raster Ordner-Galerie (.post-folder-gallery; js/site.js)
 *  4. BASIS & LINKS  body + Linkfarben im Hauptbereich (#body-wrapper)
 *  5. HEADER         Wortmarke „thopex.de“ (.site-wordmark), hell/dunkel, scrolled
 *  6. MOBIL          größere Basisschrift (html font-size = alle rem skalieren)
 *  7. BLOG-ARTIKEL   Fließtext + Überschriften in .content-item; Hero #blog-hero
 *  8. BLOG-LISTE     Teaser, Spaltenbreite ~40rem; statische Seiten .reading-column
 *  9. PAGINATION     Vor/Zurück unter der Blog-Liste
 * 10. MODULAR        Features-Modul auf der Startseite (.modular-features)
 * =============================================================================
 * Live-Vorbild WordPress: Fließtext Ysabeau, Überschriften Ysabeau (thopex.de).
 * =============================================================================
 */

/* ============================================================================
 * 1. SCHRIFTEN (@font-face)
 * ----------------------------------------------------------------------------
 * Neue Schnitte: WOFF2 nach fonts/ legen, hier @font-face spiegeln (font-weight!).
 * Ysabeau Variable Font (Gewichte 1-1000) ist geladen.
 * ============================================================================ */

@font-face {
  font-family: "Ysabeau";
  font-style: normal;
  font-weight: 1 1000;
  font-display: swap;
  src: url("../fonts/ysabeau-latin-variable.woff2") format("woff2");
}

@font-face {
  font-family: "Ysabeau";
  font-style: italic;
  font-weight: 1 1000;
  font-display: swap;
  src: url("../fonts/ysabeau-latin-italic-variable.woff2") format("woff2");
}

/* ============================================================================
 * 2. DESIGN-TOKENS (:root)
 * ----------------------------------------------------------------------------
 * Zentrale Schalter: Farben und Schriften hier ändern, dann var(--…) nutzt es überall.
 * Stil: dezent, fast farblos (weißer Grund, Grautöne).
 * ============================================================================ */

:root {
  /* Schriftfamilien (müssen zu @font-face passen oder System-Fallbacks bleiben) */
  --font-body: "Ysabeau", Georgia, "Times New Roman", serif;
  --font-heading: "Ysabeau", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Lesetext (einheitlich; früher gab es eine hellere „muted“-Variante) */
  --color-text: #1a1a1a;
  --color-border: #ebebeb;
  --color-bg: #ffffff;
  --color-bg-elevated: #ffffff;

  /* Links, Primär-Buttons (.btn-primary unten), dezente Hover-Flächen */
  --color-accent: #32528b;
  --color-accent-hover: #4574c5;
  --color-accent-muted: rgba(0, 0, 0, 0.06);
  --color-accent-underline: rgba(0, 0, 0, 0.22);

  /* Ecken / Schatten (Teaser-Karten, Pagination-Pills, …) */
  --radius-sm: 6px;
  --radius-md: 10px;
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* ============================================================================
 * 3. LIGHTBOX (GLightbox)
 * ----------------------------------------------------------------------------
 * site.js packt Bilder in .e-content / .post-folder-gallery / .reading-column in <a class="glightbox-post-img">.
 * Ordner-Galerie (partials/blog/folder-gallery.html.twig) liefert Links oft schon fertig.
 * Hier nur Optik des Links (Cursor, keine Doppel-Unterstreichung vom Theme).
 * ============================================================================ */

.content-item .e-content a.glightbox-post-img,
.content-item .post-folder-gallery a.glightbox-post-img,
.reading-column a.glightbox-post-img {
  display: inline-block;
  max-width: 100%;
  cursor: zoom-in;
  border-bottom: 0 !important;
  text-decoration: none !important;
}

.content-item .e-content a.glightbox-post-img:hover,
.content-item .post-folder-gallery a.glightbox-post-img:hover,
.reading-column a.glightbox-post-img:hover {
  border-bottom: 0 !important;
}

.content-item .e-content a.glightbox-post-img img,
.content-item .post-folder-gallery a.glightbox-post-img img,
.reading-column a.glightbox-post-img img {
  vertical-align: middle;
}

.content-item .post-folder-gallery--single a.glightbox-post-img img {
  vertical-align: top;
}

/* --------------------------------------------------------------------------
 * Ordner-Galerie unter dem Artikel (nicht im Markdown referenzierte Bilder)
 * -------------------------------------------------------------------------- */

.post-folder-gallery {
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--color-border);
}

.post-folder-gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
}

.post-folder-gallery__item {
  margin: 0;
}

.post-folder-gallery__thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  vertical-align: middle;
}

/* Einzelbild im Ordner (kein Galerie-Raster, kein Zuschnitt); Abstand wie .post-folder-gallery oben */
.post-folder-gallery--single .post-folder-gallery__item--single {
  margin: 0;
}

.content-item .post-folder-gallery--single a.glightbox-post-img {
  display: block;
  width: 100%;
  line-height: 0;
}

.post-folder-gallery__photo {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  vertical-align: middle;
}

/* ============================================================================
 * 4. BASIS-TYPOGRAFIE & LINKS
 * ----------------------------------------------------------------------------
 * body: globale Schrift/Farbe. Speziellere Bereiche (Blog) überschreiben darunter.
 * Link-Selektor: schließt Buttons, Labels, Navbar aus (die haben eigene Styles).
 * ============================================================================ */

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================================
 * 5. HEADER – WORTMARKE (partials/logo.html.twig → .site-wordmark)
 * ----------------------------------------------------------------------------
 * Quark: .header-dark + .scrolled steuern transparente vs. eingeklappte Leiste.
 * ============================================================================ */

#header .logo .site-wordmark {
  display: inline-flex;
  align-items: center;
  height: 42px;
  text-decoration: none !important;
  border-bottom: 0 !important;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  line-height: 1;
  color: inherit;
}

#header .logo .site-wordmark:hover,
#header .logo .site-wordmark:focus {
  color: var(--color-accent);
}

/* Dunkler / transparenter Header: klare helle Marke */
.header-dark #header:not(.scrolled) .logo .site-wordmark {
  color: rgba(255, 255, 255, 0.96) !important;
}

.header-dark #header:not(.scrolled) .logo .site-wordmark:hover,
.header-dark #header:not(.scrolled) .logo .site-wordmark:focus {
  color: #f5f5f5 !important;
}

/* Eingeklappte/fixierte Leiste nach Scrollen (Quark body-Klassen) */
body.header-fixed.header-animated #header.scrolled .logo .site-wordmark {
  height: 28px;
  font-size: 1.05rem;
}

/* ============================================================================
 * 6. MOBIL – BASIS-SCHRIFTGRÖSSE
 * ----------------------------------------------------------------------------
 * html font-size hochsetzen = alle rem im Theme werden proportional größer.
 * ============================================================================ */

@media (max-width: 47.99rem) {
  html {
    font-size: 112.5%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
}

@media (max-width: 30rem) {
  html {
    font-size: 118.75%;
  }
}

/* --- 7a. Blog-Einzelseite: Fließtext (.e-content in partials/blog-item.html.twig) --- */
#item .content-item .e-content {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text);
}

/* Fett: hebt Links im Lesetext ab (Ysabeau 600 ist eingebunden). Lightbox-Bildlinks ausnehmen. */
#body-wrapper a:not(.btn):not(.label):not(.navbar-brand):not(.nav-link):not(.glightbox-post-img) {
  color: var(--color-accent);
  font-weight: 600;
  text-decoration-color: var(--color-accent-underline);
  text-underline-offset: 0.15em;
}

#body-wrapper a:not(.btn):not(.label):not(.navbar-brand):not(.nav-link):not(.glightbox-post-img):hover {
  color: var(--color-accent-hover);
  text-decoration-color: var(--color-accent-hover);
}

/* --- 7b. Blog-Einzelseite: Überschriften im Artikel (inkl. .content-title ohne Hero) --- */
#item .content-item h1,
#item .content-item h2,
#item .content-item h3,
#item .content-item h4,
#item .content-item h5,
#item .content-item h6 {
  font-family: var(--font-heading);
  font-weight: 300;
  color: var(--color-text);
  letter-spacing: 0;
  line-height: 1.2;
}

/* --- 7c. Hero-Bereich mit Titel (item.html.twig / partials/hero, id blog-hero) --- */
#blog-hero.hero h1,
#blog-hero.hero h2,
#blog-hero.hero h3 {
  font-family: var(--font-heading);
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1.15;
}

/* Primär-Buttons (Quark/Spectre .btn-primary) an Token-Farben koppeln */
.btn.btn-primary {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.btn.btn-primary:focus,
.btn.btn-primary:hover {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

/* ============================================================================
 * 8. BLOG-ÜBERSICHT, TEASER & STATISCHE SEITEN
 * ----------------------------------------------------------------------------
 * Blog-Liste: templates/blog.html.twig → #body-wrapper.blog-listing …
 * Einspaltige Seiten (Impressum etc.): default.html.twig → .reading-column
 * ============================================================================ */

.blog-listing .columns {
  justify-content: center;
}

.blog-listing #item.column {
  flex: 0 1 40rem;
  max-width: 40rem;
  width: 100%;
}

/* Breadcrumbs (Plugin) an Blog-Spaltenbreite angleichen */
.blog-listing #breadcrumbs {
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}

/* default.html.twig: reiner Seiteninhalt, z. B. Impressum, Datenschutz */
.reading-column {
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* Markdown-Überschriften auf statischen Seiten = gleiche Heading-Schrift wie Blog */
.reading-column h1,
.reading-column h2,
.reading-column h3,
.reading-column h4,
.reading-column h5,
.reading-column h6 {
  font-family: var(--font-heading);
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1.2;
  color: var(--color-text);
}

/* Blog-Übersicht: Magazin-Raster (1 Spalte mobil, 2 ab Spectre-„md“) */
.blog-listing .blog-list--magazine {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 0.75rem;
  /* Keine Zeilenhöhen-Streckung: vermeidet große Lücken Titel↔Text neben kürzeren Karten */
  align-items: start;
}

@media (min-width: 840px) {
  .blog-listing .blog-list--magazine {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

/* Kachel: Bild oben, Text unten; geschlossene Karte */
.blog-listing .blog-teaser {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg, #fff);
}

.blog-listing .blog-teaser__media {
  display: block;
  overflow: hidden;
  background: var(--color-border);
  text-decoration: none;
}

.blog-listing .blog-teaser__media:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.blog-listing .blog-teaser__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.blog-listing .blog-teaser__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 1rem 1.15rem 1.2rem;
  min-width: 0;
}

.blog-listing .blog-teaser--no-media .blog-teaser__body {
  padding-top: 1.2rem;
}

/* Datum oberhalb des Titels */
.blog-listing .blog-teaser__meta {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: 0.45rem;
}

.blog-listing .blog-teaser__title {
  margin-bottom: 0.5rem;
}

.blog-listing .blog-teaser__title h4 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.3;
  margin-bottom: 0;
  letter-spacing: 0;
}

#body-wrapper .blog-listing .blog-teaser__title a {
  color: var(--color-text);
  text-decoration: none;
  text-decoration-color: transparent;
}

#body-wrapper .blog-listing .blog-teaser__title a:hover {
  color: var(--color-accent);
}

.blog-listing .blog-teaser__summary {
  margin: 0;
  padding-top: 0.35rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-text);
}

.blog-listing .blog-teaser__readmore {
  margin-left: 0.35em;
  font-weight: 500;
  text-decoration: none;
  color: var(--color-accent);
  white-space: nowrap;
}

.blog-listing .blog-teaser__readmore:hover {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
}

.blog-listing .blog-teaser__readmore:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.blog-listing .blog-date {
  font-size: inherit;
}

/* ============================================================================
 * 9. PAGINATION (Blog, kompakte Variante .blog-pagination-compact im Template)
 * ============================================================================ */

ul.pagination.blog-pagination-compact {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem 1rem;
  width: 100%;
  max-width: 40rem;
  margin: 2rem auto 0;
  padding: 0;
}

ul.pagination.blog-pagination-compact .page-item {
  margin: 0;
  flex: 0 0 auto;
}

ul.pagination.blog-pagination-compact .page-status {
  flex: 1 1 auto;
  text-align: center;
  min-width: 10rem;
  font-size: 0.9rem;
  color: var(--color-text);
}

ul.pagination.blog-pagination-compact .page-prev a,
ul.pagination.blog-pagination-compact .page-next a {
  border-bottom: 0;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease, color 0.15s ease;
}

ul.pagination.blog-pagination-compact .page-prev a:hover,
ul.pagination.blog-pagination-compact .page-next a:hover {
  background-color: var(--color-accent-muted);
  color: var(--color-accent-hover);
  text-decoration: none;
}

ul.pagination.blog-pagination-compact .text-gray {
  color: var(--color-text);
}

/* ============================================================================
 * 10. MODULAR „FEATURES“ (Startseite, templates/modular/features.html.twig)
 * ----------------------------------------------------------------------------
 * Zeilen mit Icon + Titel + Untertitel; Hover-Farben an --color-accent gekoppelt.
 * ============================================================================ */

.modular-features {
  text-align: left;
}

.modular-features .frame-box > p {
  text-align: center;
  color: var(--color-text);
  line-height: 1.65;
}

.modular-features .features-list {
  max-width: 48rem;
  margin: 2rem 0 0;
}

.modular-features .feature-row {
  align-items: flex-start;
  margin-bottom: 1.75rem;
}

.modular-features .feature-row:last-child {
  margin-bottom: 0;
}

.modular-features .feature-row:hover .feature-row__icon i {
  color: var(--color-accent);
}

.modular-features .feature-row:hover .tile-title {
  color: var(--color-accent);
}

.modular-features .feature-row:hover .tile-subtitle {
  color: var(--color-text);
}

.modular-features .feature-row__icon {
  flex: 0 0 auto;
  font-size: 2.25rem;
  line-height: 1;
  color: #a3a3a3;
  min-width: 2.75rem;
  text-align: center;
}

.modular-features .feature-row__icon a {
  color: inherit;
  border-bottom: 0;
}

.modular-features .feature-row__icon i {
  transition: color 0.25s ease;
}

.modular-features .feature-row__content {
  text-align: left;
}

.modular-features .feature-row__content .tile-title {
  margin: 0 0 0.35rem;
  text-transform: none;
  font-family: var(--font-heading);
  font-weight: 300;
  color: var(--color-text);
  line-height: 1.35;
}

.modular-features .feature-row__content .tile-subtitle {
  margin: 0;
  color: var(--color-text);
  line-height: 1.55;
}

.modular-features.small .features-list {
  margin-top: 1rem;
}

.modular-features.small .feature-row__icon {
  font-size: 1.75rem;
  min-width: 2.25rem;
}

/* Markdown Extra (Parsedown): Fußnoten am Artikelende */
.e-content .footnotes {
  margin-top: 2rem;
  padding-top: 1rem;
  font-size: 0.9em;
  line-height: 1.5;
  color: var(--color-text-muted, #666);
}

.e-content .footnotes hr {
  margin: 0 0 1rem;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.e-content .footnotes ol {
  margin: 0;
  padding-left: 1.25rem;
}

.e-content .footnotes li {
  margin-bottom: 0.5rem;
}

.e-content .footnotes li p {
  margin: 0 0 0.35rem;
}

.e-content .footnote-ref {
  text-decoration: none;
  font-weight: 600;
}

.e-content .footnote-backref {
  text-decoration: none;
  margin-left: 0.15em;
}

/* ============================================================================
 * 11. NAVIGATION (MENÜ)
 * ----------------------------------------------------------------------------
 * Schriftart, Gewicht und Hover-Farben an das restliche Theme (Ysabeau, accent-color) anpassen.
 * ============================================================================ */

#header,
.dropmenu ul li a {
  font-family: var(--font-body);
  font-weight: 600;
}

.dropmenu ul li a:hover,
.dropmenu ul li a:focus,
.dropmenu ul li a.active {
  color: var(--color-accent) !important;
}

.header-dark #header:not(.scrolled) .dropmenu > ul > li > a:hover,
.header-dark #header:not(.scrolled) .dropmenu > ul > li > a:focus,
.header-dark #header:not(.scrolled) .dropmenu > ul > li > a.active {
  color: #fff !important;
}