/*
 * Art direction: Einspaltige Contao-Seite, professionell & klar
 * Palette: Neutral/Warm, Teal-Akzent (Nexus)
 * Typography: Nunito Sans (Body) + Anonymous Pro (Zitate) via @font-face
 * Density: Balanced
 * Max-Width: 1440px
 * DSGVO-konform: Google Fonts lokal eingebunden
 */

/* ============================================================
   1. GOOGLE FONTS — LOKAL EINGEBUNDEN (@font-face)
   Schriftdateien müssen im Ordner /files/fonts/ liegen.
   Download: https://gwfh.mranftl.com/fonts
   Benötigte Dateien:
     /files/fonts/inter/inter-v13-latin-regular.woff2
     /files/fonts/inter/inter-v13-latin-500.woff2
     /files/fonts/inter/inter-v13-latin-700.woff2
     /files/fonts/playfair-display/playfair-display-v37-latin-regular.woff2
     /files/fonts/playfair-display/playfair-display-v37-latin-700.woff2

   Ersetzt durch die fonts nuito-sans für text und anonymous-pro für zitate
     
   ============================================================ */

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local(''),
       url('../files/fonts/nunito-sans/nunito-sans-v19-latin-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local(''),
       url('../files/fonts/nunito-sans/nunito-sans-v19-latin-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local(''),
       url('../files/fonts/nunito-sans/nunito-sans-v19-latin-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Anonymous Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local(''),
       url('../files/fonts/anonymous-pro/anonymous-pro-v22-latin-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Anonymous Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local(''),
       url('../files/fonts/anonymous-pro/anonymous-pro-v22-latin-700.woff2') format('woff2');
}

/* ============================================================
   2. DESIGN TOKENS
   ============================================================ */

:root {
  /* Fonts */
  --font-body:    'Nunito Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Anonymous Pro', Georgia, serif;

  /* Fluid Type Scale */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);

  /* 4px Spacing System */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Nexus Color Palette — Light Mode */
  --color-bg:              #f7f6f2;
  --color-surface:         #f9f8f5;
  --color-surface-2:       #fbfbf9;
  --color-surface-offset:  #f3f0ec;
  --color-divider:         #dcd9d5;
  --color-border:          #d4d1ca;
  --color-text:            #28251d;
  --color-text-muted:      #7a7974;
  --color-text-faint:      #bab9b4;
  --color-text-inverse:    #f9f8f4;
  --color-primary:         #01696f;
  --color-primary-hover:   #0c4e54;
  --color-primary-active:  #0f3638;
  --color-primary-highlight: #cedcd8;

  /* Border Radius */
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px oklch(0.2 0.01 80 / 0.06);
  --shadow-md: 0 4px 12px oklch(0.2 0.01 80 / 0.08);
  --shadow-lg: 0 12px 32px oklch(0.2 0.01 80 / 0.12);

  /* Transitions */
  --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --max-width:       1440px;
  --content-width:   960px;
  --gutter:          clamp(var(--space-4), 3vw, var(--space-12));
  --header-height:   72px;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:              #171614;
    --color-surface:         #1c1b19;
    --color-surface-2:       #201f1d;
    --color-surface-offset:  #1d1c1a;
    --color-divider:         #262523;
    --color-border:          #393836;
    --color-text:            #cdccca;
    --color-text-muted:      #797876;
    --color-text-faint:      #5a5957;
    --color-text-inverse:    #2b2a28;
    --color-primary:         #4f98a3;
    --color-primary-hover:   #227f8b;
    --color-primary-active:  #1a626b;
    --color-primary-highlight: #313b3b;
    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.2);
    --shadow-md: 0 4px 12px oklch(0 0 0 / 0.3);
    --shadow-lg: 0 12px 32px oklch(0 0 0 / 0.4);
  }
}

/* ============================================================
   3. BASE RESET
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

body {
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  display: flex;
  flex-direction: column;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  text-wrap: balance;
  line-height: 1.15;
}

p, li, figcaption {
  text-wrap: pretty;
/*  max-width: 72ch; */
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

::selection {
  background: oklch(from var(--color-primary) l c h / 0.25);
  color: var(--color-text);
}

ul[role="list"], ol[role="list"] { list-style: none; }
button { cursor: pointer; background: none; border: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
}

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

/* ============================================================
   4. LAYOUT WRAPPER — Contao #wrapper / .wrapper
   ============================================================ */

#wrapper,
.wrapper {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

/* Innerer Content-Container (für zentrierten 960px-Inhalt) */
.inner,
.layout_full .inside,
#main .inside,
#header .inside,
#footer .inside {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Full-width inner (Header/Footer gehen bis 1440px) */
#header .inside,
#footer .inside {
  max-width: var(--max-width);
}

/* ============================================================
   5. HEADER — Contao #header
   ============================================================ */

#header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-surface);
  border-bottom: 1px solid oklch(from var(--color-text) l c h / 0.08);
  box-shadow: var(--shadow-sm);
  height: var(--header-height);
}

#header .inside {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  height: 100%;
  padding-block: var(--space-4);
}

/* Logo / Seitenname */
#header .logo,
#header .site-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

#header .logo:hover,
#header .site-title:hover {
  color: var(--color-primary);
  text-decoration: none;
}

/* Hauptnavigation im Header */
#header nav,
#header .mod_navigation {
  flex: 1;
  display: flex;
  justify-content: center;
}

#header nav ul,
#header .mod_navigation ul {
  list-style: none;
  display: flex;
  gap: var(--space-1);
  align-items: center;
  flex-wrap: wrap;
}

#header nav ul li a,
#header .mod_navigation ul li a {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: color var(--transition), background-color var(--transition);
}

#header nav ul li a:hover,
#header nav ul li.active > a,
#header nav ul li.trail > a,
#header .mod_navigation ul li a:hover,
#header .mod_navigation ul li.active > a,
#header .mod_navigation ul li.trail > a {
  color: var(--color-primary);
  background-color: var(--color-primary-highlight);
  text-decoration: none;
}

/* ============================================================
   6. SUCHFELD — oben rechts im Header
   ============================================================ */

#header .mod_search,
#header .search-form {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

#header .mod_search form,
#header .search-form form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

#header .mod_search input[type="search"],
#header .mod_search input[type="text"],
#header .search-form input[type="search"],
#header .search-form input[type="text"] {
  width: clamp(140px, 18vw, 220px);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text);
  background-color: var(--color-surface-offset);
  border: 1px solid oklch(from var(--color-text) l c h / 0.12);
  border-radius: var(--radius-full);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition), width var(--transition);
}

#header .mod_search input[type="search"]::placeholder,
#header .search-form input[type="search"]::placeholder {
  color: var(--color-text-faint);
}

#header .mod_search input[type="search"]:focus,
#header .search-form input[type="search"]:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px oklch(from var(--color-primary) l c h / 0.15);
  width: clamp(180px, 22vw, 280px);
  background-color: var(--color-surface-2);
}

#header .mod_search button[type="submit"],
#header .search-form button[type="submit"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: var(--space-2);
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background-color var(--transition), transform var(--transition);
  flex-shrink: 0;
}

#header .mod_search button[type="submit"]:hover,
#header .search-form button[type="submit"]:hover {
  background-color: var(--color-primary-hover);
  transform: scale(1.05);
}

/* Such-Icon (SVG inline oder via content) */
#header .mod_search button[type="submit"]::before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

/* ============================================================
   7. BREADCRUMB — Contao .mod_breadcrumb
   ============================================================ */

.mod_breadcrumb,
#breadcrumb {
  background-color: var(--color-surface-offset);
  border-bottom: 1px solid oklch(from var(--color-text) l c h / 0.06);
}

.mod_breadcrumb .inside,
.mod_breadcrumb > ul,
#breadcrumb .inside {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--space-3);
}

.mod_breadcrumb ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}

.mod_breadcrumb ul li {
  display: flex;
  align-items: center;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.mod_breadcrumb ul li a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  min-height: 28px;
  display: flex;
  align-items: center;
}

.mod_breadcrumb ul li a:hover {
  color: var(--color-primary);
  background-color: var(--color-primary-highlight);
  text-decoration: none;
}

/* Trennzeichen zwischen Breadcrumb-Elementen */
.mod_breadcrumb ul li + li::before {
  content: '/';
  margin-right: var(--space-1);
  color: var(--color-text-faint);
  font-size: var(--text-xs);
}

/* Aktives (letztes) Element */
.mod_breadcrumb ul li.last,
.mod_breadcrumb ul li:last-child {
  color: var(--color-text);
  font-weight: 500;
  padding-inline: var(--space-2);
}

.mod_breadcrumb ul li.last a {
  color: var(--color-text);
  font-weight: 500;
}

/* ============================================================
   8. MAIN CONTENT — Contao #main / #container
   ============================================================ */

#container,
#main {
  flex: 1;
  width: 100%;
}

#main .inside,
#container .inside {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: clamp(var(--space-8), 5vw, var(--space-20));
}

/* Contao Artikel */
.mod_article {
  margin-bottom: var(--space-12);
}

.mod_article:last-child {
  margin-bottom: 0;
}

/* ============================================================
   9. CONTENT ELEMENTS — Contao ce_* Klassen
   ============================================================ */

/* Text-Element */
.ce_text {
  margin-bottom: var(--space-8);
}

.ce_text h1,
.ce_text h2,
.ce_text h3,
.ce_text h4,
.ce_text h5,
.ce_text h6 {
  margin-bottom: var(--space-4);
}

.ce_text p {
  margin-bottom: var(--space-4);
  color: var(--color-text);
  line-height: 1.75;
}

/* Überschriften */
.ce_headline {
  margin-bottom: var(--space-6);
}

.ce_headline h1 { font-size: var(--text-2xl); }
.ce_headline h2 { font-size: var(--text-xl); }
.ce_headline h3 { font-size: var(--text-lg); }
.ce_headline h4 { font-size: var(--text-base); font-weight: 700; }

/* Bilder */
.ce_image {
  margin-bottom: var(--space-8);
}

.ce_image figure {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.ce_image figcaption {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  max-width: 100%;
}

/* Tabellen */
.ce_table {
  margin-bottom: var(--space-8);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ce_table table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--text-sm);
}

.ce_table th,
.ce_table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid oklch(from var(--color-text) l c h / 0.08);
}

.ce_table th {
  font-weight: 600;
  color: var(--color-text);
  background-color: var(--color-surface-offset);
}

.ce_table tr:hover td {
  background-color: var(--color-surface);
}

/* Listen */
.ce_list ul,
.ce_list ol {
  padding-left: var(--space-6);
  margin-bottom: var(--space-6);
}

.ce_list li {
  margin-bottom: var(--space-2);
  line-height: 1.6;
}

/* Code */
.ce_code {
  margin-bottom: var(--space-8);
}

.ce_code pre {
  background-color: var(--color-surface-offset);
  border: 1px solid oklch(from var(--color-text) l c h / 0.08);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  overflow-x: auto;
  font-size: var(--text-sm);
  line-height: 1.6;
  tab-size: 2;
}

/* Downloads */
.ce_download,
.ce_downloads {
  margin-bottom: var(--space-8);
}

.ce_download a,
.ce_downloads a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background-color: var(--color-surface-offset);
  border: 1px solid oklch(from var(--color-text) l c h / 0.1);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  transition: background-color var(--transition), border-color var(--transition);
}

.ce_download a:hover,
.ce_downloads a:hover {
  background-color: var(--color-primary-highlight);
  border-color: var(--color-primary);
  color: var(--color-primary);
  text-decoration: none;
}

/* ============================================================
   10. FRONT-END MODULE — Contao mod_* Klassen
   ============================================================ */

/* Navigation allgemein */
.mod_navigation ul {
  list-style: none;
}

.mod_navigation ul li a {
  display: block;
  padding: var(--space-2) var(--space-3);
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: color var(--transition), background-color var(--transition);
}

.mod_navigation ul li a:hover,
.mod_navigation ul li.active > a,
.mod_navigation ul li.trail > a {
  color: var(--color-primary);
  background-color: var(--color-primary-highlight);
  text-decoration: none;
}

/* Artikelliste */
.mod_article_list article {
  padding-block: var(--space-6);
  border-bottom: 1px solid oklch(from var(--color-text) l c h / 0.08);
}

.mod_article_list article:last-child {
  border-bottom: none;
}

/* ============================================================
   11. FOOTER — Contao #footer
   ============================================================ */

#footer {
  margin-top: auto;
  background-color: var(--color-surface);
  border-top: 1px solid oklch(from var(--color-text) l c h / 0.08);
}

#footer .inside {
  padding-block: clamp(var(--space-10), 4vw, var(--space-16));
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--space-8);
  align-items: start;
}

/* Footer-Navigation */
#footer .mod_navigation h3,
#footer .ce_headline h3 {
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  font-family: var(--font-body);
}

#footer .mod_navigation ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

#footer .mod_navigation ul li a {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  padding: var(--space-1) 0;
  border-radius: 0;
  transition: color var(--transition);
}

#footer .mod_navigation ul li a:hover,
#footer .mod_navigation ul li.active > a {
  color: var(--color-primary);
  background-color: transparent;
}

/* Footer-Text / Copyright */
#footer .ce_text p,
#footer .copyright {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* Footer Bottom Bar */
.footer-bottom {
  background-color: var(--color-surface-offset);
  border-top: 1px solid oklch(from var(--color-text) l c h / 0.06);
}

.footer-bottom .inside {
  padding-block: var(--space-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.footer-bottom p,
.footer-bottom .copyright {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ============================================================
   12. FORMULARE — Contao formbody
   ============================================================ */

.mod_login form,
.mod_registration form,
.ce_form form,
.formbody {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 480px;
}

.widget {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.widget label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
}

.widget input[type="text"],
.widget input[type="email"],
.widget input[type="password"],
.widget input[type="tel"],
.widget input[type="url"],
.widget input[type="number"],
.widget textarea,
.widget select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-surface-2);
  border: 1px solid oklch(from var(--color-text) l c h / 0.14);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.widget input:focus,
.widget textarea:focus,
.widget select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px oklch(from var(--color-primary) l c h / 0.15);
}

.widget textarea {
  min-height: 120px;
  resize: vertical;
}

.widget.submit .submit,
button[type="submit"],
input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-8);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-inverse);
  background-color: var(--color-primary);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  min-height: 44px;
  transition: background-color var(--transition), transform var(--transition);
}

.widget.submit .submit:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background-color: var(--color-primary-hover);
  transform: translateY(-1px);
}

/* ============================================================
   13. PAGINIERUNG — Contao .pagination
   ============================================================ */

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-10);
  flex-wrap: wrap;
}

.pagination a,
.pagination strong,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding-inline: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background-color var(--transition), color var(--transition);
}

.pagination a {
  color: var(--color-text);
  background-color: var(--color-surface-offset);
  border: 1px solid oklch(from var(--color-text) l c h / 0.1);
}

.pagination a:hover {
  background-color: var(--color-primary-highlight);
  color: var(--color-primary);
  border-color: var(--color-primary);
  text-decoration: none;
}

.pagination strong {
  color: var(--color-text-inverse);
  background-color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

/* ============================================================
   14. NACHRICHTEN / NEWS — Contao mod_newslist, mod_newsreader
   ============================================================ */

.mod_newslist article {
  padding-block: var(--space-8);
  border-bottom: 1px solid oklch(from var(--color-text) l c h / 0.08);
}

.mod_newslist article:last-child {
  border-bottom: none;
}

.mod_newslist .headline a {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition);
}

.mod_newslist .headline a:hover {
  color: var(--color-primary);
}

.mod_newslist .info,
.mod_newslist .meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  margin-bottom: var(--space-3);
}

.mod_newslist p {
  color: var(--color-text-muted);
  line-height: 1.65;
}

.mod_newsreader .info,
.mod_newsreader .meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

/* ============================================================
   15. RESPONSIVE — Mobile-first
   ============================================================ */

/* Tablet: ab 768px */
@media (min-width: 768px) {
  :root {
    --header-height: 80px;
  }

  #header .inside {
    gap: var(--space-8);
  }
}

/* Desktop: ab 1024px */
@media (min-width: 1024px) {
  :root {
    --header-height: 88px;
  }
}

/* Mobile: bis 767px */
@media (max-width: 767px) {
  /* Mobile Navigation ausblenden / Burger-Menü */
  #header nav,
  #header .mod_navigation {
    display: none;
  }

  #header .inside {
    gap: var(--space-4);
  }

  /* Suchfeld auf Mobile kompakter */
  #header .mod_search input[type="search"],
  #header .search-form input[type="search"] {
    width: 120px;
  }

  #header .mod_search input[type="search"]:focus,
  #header .search-form input[type="search"]:focus {
    width: 160px;
  }

  #footer .inside {
    grid-template-columns: 1fr;
  }

  .footer-bottom .inside {
    flex-direction: column;
    text-align: center;
  }
}

/* Extra small: bis 480px */
@media (max-width: 480px) {
  #header .mod_search,
  #header .search-form {
    /* Auf sehr kleinen Screens: Suchfeld hinter Icon verbergen */
  }

  #header .mod_search input[type="search"],
  #header .search-form input[type="search"] {
    width: 100px;
  }
}

/* ============================================================
   16. UTILITY KLASSEN
   ============================================================ */

.text-center { text-align: center; }
.text-muted   { color: var(--color-text-muted); }
.text-small   { font-size: var(--text-sm); }

.mt-0  { margin-top: 0; }
.mt-4  { margin-top: var(--space-4); }
.mt-8  { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }

.mb-0  { margin-bottom: 0; }
.mb-4  { margin-bottom: var(--space-4); }
.mb-8  { margin-bottom: var(--space-8); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}