/* 1) Font einbinden */
@font-face {
  font-family: 'DIN Schablonierschrift';
  src: url('../fonts/DINSchablonierschrift.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 2) Farb-Token */
:root {
  --f0d53-primary: #0A3B8E; /* oder #004D7A */
  --f0d53-primary-contrast: #ffffff;
  --f0d53-primary-600: #0f5c8d;
  --f0d53-primary-700: #0b4d75;
  --f0d53-bg: #0A3B8E;
  --f0d53-text: #0B1F2A;
  --f0d53-text-muted: #4A6170;
  --f0d53-link: #004E7C;
  --f0d53-link-hover: #0F5C8D;
  --f0d53-border: #D6DFE6;
  --f0d53-focus: #0F5C8D;
}

/* 3) Headings in Schablonierschrift */
h1, h2, h3, .site-title, .hero h1, .modular .callout h2 {
  font-family: 'DIN Schablonierschrift', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: 0.02em;
  text-transform: uppercase; /* wirkt bei Stencil oft besser */
}

/* 4) Primärfarbe anwenden (Links, Buttons, Nav) */
a, a:visited{ color: var(--f0d53-link); }
a:hover, a:focus{ color: var(--f0d53-link-hover); }

/* Quark Buttons */
.button, button, input[type="submit"] {
  background: var(--f0d53-primary);
  color: var(--f0d53-primary-contrast);
  border-color: var(--f0d53-primary);
}

.button:hover,
button:hover,
input[type="submit"]:hover {
  background: var(--f0d53-primary-700);
  border-color: var(--f0d53-primary-700);
}

/* Header/Nav */
.site-header, .navbar-section, .navigation {
  background: var(--f0d53-primary);
}
.site-header a, .navigation a { color: var(--f0d53-primary-contrast); }

.site-footer { background:#07324e; }
a { color:#004E7C; }

/* Hero-Block (falls verwendet) */
.hero, .modular .hero {
  background: linear-gradient(180deg, var(--f0d53-primary) 0%, #07324e 100%);
  color: var(--f0d53-primary-contrast);
}

/* Footer in Enzianblau */
#footer.f0d53-footer {
  background: #004E7C;   /* Enzianblau */
  color: #fff;
}

/* Links/Fine-Tuning */
#footer.f0d53-footer a { color: #cfeaff; }
#footer.f0d53-footer a:hover { color: #ffffff; }

/* Falls Quark irgendwas überschreibt: */
#footer.f0d53-footer { background: #0A3B8E !important; }

/* Enzianblau-Hintergrund für eigene Sektionen */
.f0d53-bg {
  background: #004E7C;   /* Enzianblau */
  color: #fff;
}

/* Lesbarkeit/Links */
.f0d53-bg a { color: #cfeaff; }
.f0d53-bg a:hover, .f0d53-bg a:focus { color: #ffffff; }

/* Seite: blauer Grund */
html, body { background:#004E7C !important; }

/* Hauptbereich: transparent, damit Blau durchkommt */
#body,
#body > .container,
.content,
.content-wrapper,
.section,
.modular,
.modular .section,
.modular-row,
.columns {
  background: transparent !important;
}

body{
  color: var(--f0d53-text);
}

/* Typische weiße Boxen neutralisieren */
.card, .panel, .box, .callout, .showcase {
  background: transparent !important;
  box-shadow: none;
}

/* Tabellen/Pre/Blockquotes nicht grau machen */
.content table,
.content pre,
.content blockquote,
.content code {
  background: transparent !important;
  color: #fff;
  border-color: rgba(255,255,255,.25);
}


/* Divider/Borders */
hr, .divider{ border-color: var(--f0d53-border); }

/* Auswahl */
::selection{ background: var(--f0d53-link-hover); color:#fff; }

/* ---------- Auf Enzianblau-Hintergründen umschalten ---------- */
/* Du nutzt bereits .f0d53-bg für blaue Sektionen */
.f0d53-bg{
  --f0d53-bg: #004E7C;
  --f0d53-text: #F2F7FB;
  --f0d53-text-muted: #D9EAF7;
  --f0d53-link: #E6F2FF;
  --f0d53-link-hover: #FFFFFF;
  --f0d53-border: rgba(255,255,255,0.25);
  --f0d53-focus: #B3D9FF;

  color: var(--f0d53-text);
}

/* Typo in blauen Sektionen */
.f0d53-bg h1, .f0d53-bg h2, .f0d53-bg h3,
.f0d53-bg p, .f0d53-bg li { color: var(--f0d53-text); }

.f0d53-bg .muted, .f0d53-bg .text-muted { color: var(--f0d53-text-muted); }

.f0d53-bg a, .f0d53-bg a:visited{ color: var(--f0d53-link); }
.f0d53-bg a:hover, .f0d53-bg a:focus{ color: var(--f0d53-link-hover); }

.f0d53-bg hr, .f0d53-bg .divider{ border-color: var(--f0d53-border); }

/* ---------- Buttons ---------- */
.button, button, input[type="submit"]{
  background: var(--f0d53-link);
  border-color: var(--f0d53-link);
  color: #fff;
}
.button:hover, button:hover, input[type="submit"]:hover{
  background: var(--f0d53-link-hover);
  border-color: var(--f0d53-link-hover);
}

/* Sekundär/Umriss-Buttons */
.button.secondary, .btn-outline{
  background: transparent;
  border-color: var(--f0d53-border);
  color: var(--f0d53-text);
}
.button.secondary:hover, .btn-outline:hover{
  border-color: var(--f0d53-link);
  color: var(--f0d53-link);
}

/* ---------- Tabellen, Code, Zitate ---------- */
.content table, .content th, .content td{
  color: var(--f0d53-text);
  border-color: var(--f0d53-border);
  background: transparent;
}
.content blockquote, .content pre, .content code{
  color: var(--f0d53-text);
  background: transparent;
  border-color: var(--f0d53-border);
}

/* ---------- Formulare ---------- */
input, textarea, select{
  color: var(--f0d53-text);
  border-color: var(--f0d53-border);
  background: #ffffff;
}
.f0d53-bg input, .f0d53-bg textarea, .f0d53-bg select{
  background: rgba(255,255,255,0.08);
  color: var(--f0d53-text);
  border-color: var(--f0d53-border);
}
input:focus, textarea:focus, select:focus{
  outline: 2px solid var(--f0d53-focus);
  outline-offset: 1px;
}

/* ---------- Navigation & Footer (falls nicht schon gemacht) ---------- */
.site-header, .navigation{
  color: #fff;
}
.site-header a, .navigation a{ color: #E6F2FF; }
.site-header a:hover, .navigation a:hover{ color: #fff; }

.site-footer, .footer{
  color: var(--f0d53-text);
}

/* === APPENDED OVERRIDES FOR ENZIAN THEME === */

/* ============================================================
   Enzian Theme Overrides
   Requested: Set all backgrounds to Enzianblau and make text/link
   colors pleasantly high-contrast.
   Palette:
     --enzian:       #0A3B8E
     --enzian-dark:  #08306B
     --text:         #FFFFFF
     --link:         #BBD8FF
     --link-hover:   #A2C8FF
     --muted:        #E0E6F5
   Note: Overrides rely on !important to win specificity without
   rewriting every selector from the base theme.
   ============================================================ */

:root{
  --enzian:#0A3B8E;
  --enzian-dark:#08306B;
  --text:#FFFFFF;
  --link:#BBD8FF;
  --link-hover:#A2C8FF;
  --muted:#E0E6F5;
}

/* Global backgrounds -> Enzian */
html, body, #page-wrapper, #body-wrapper, section, .section, .hero,
.card, .card-header, .card-footer, .overlay, .overlay-light, .overlay-dark,
.overlay-light-gradient, .overlay-dark-gradient, .image-overlay,
pre code, pre.xdebug-var-dump, pre code:not(.hljs):not([class*="language-"]),
.table table, .dropmenu ul, .dropmenu ul ul, .blog-listing .card,
.modular-features .frame-box, .modular-text, .modular-features,
#sidebar ul.related-pages, #breadcrumbs, #footer, #header,
.treemenu li, .label, .notice, .notices, .content-title, .blog-listing,
.prev-next, ul.pagination, .mobile-menu .overlay, .overlay-menu
{
  background: var(--enzian) !important;
  background-color: var(--enzian) !important;
  box-shadow: none !important;
}

/* Text defaults -> white */
body, h1, h2, h3, h4, h5, h6, p, li, dt, dd, small, .label,
.text-light, .content-title h2, .blog-listing .blog-date, time,
#footer, #header, #breadcrumbs span, #breadcrumbs a, .treemenu li a,
.modular-features .feature-content, .modular-features .feature-icon h6,
.form-label, .form-help, .form-errors, .form-field, .form-input,
.table, .table table td, .table table th
{
  color: var(--text) !important;
}

/* Icons and decorative elements */
i, .icon, svg, svg path {
  color: var(--text) !important;
  fill: var(--text) !important;
  stroke: var(--text) !important;
}

/* Links */
a, a:link, .dropmenu ul li a, .treemenu li a {
  color: var(--link) !important;
  text-decoration-color: var(--link) !important;
}
a:hover, a:focus, a:active,
.dropmenu ul li a:hover, .dropmenu ul li a:focus,
.treemenu li a:hover {
  color: var(--link-hover) !important;
  text-decoration: underline;
  text-decoration-color: var(--link-hover) !important;
}

/* Buttons & interactive controls */
button, .button, .btn,
input[type="submit"], input[type="button"], input[type="reset"] {
  background: var(--enzian) !important;
  background-color: var(--enzian) !important;
  color: var(--text) !important;
  border-color: var(--muted) !important;
}
button:hover, .button:hover, .btn:hover,
input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover,
button:focus, .button:focus, .btn:focus {
  background: var(--enzian-dark) !important;
  background-color: var(--enzian-dark) !important;
  color: var(--text) !important;
  border-color: var(--text) !important;
}

/* Inputs */
input, select, textarea, .form-input {
  background: var(--enzian) !important;
  background-color: var(--enzian) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,.35) !important;
}
input::placeholder, textarea::placeholder {
  color: rgba(255,255,255,.7) !important;
}

/* Tables */
table, th, td {
  border-color: rgba(255,255,255,.25) !important;
}
tbody tr:nth-child(odd) td {
  background: rgba(255,255,255,0.04) !important;
}
tbody tr:nth-child(even) td {
  background: rgba(255,255,255,0.02) !important;
}

/* Code blocks syntax area */
pre, code, kbd, samp {
  background: rgba(8,48,107,0.35) !important;
  color: var(--muted) !important;
}

/* Breadcrumb separators */
#breadcrumbs span:not(:first-child)::before,
#breadcrumbs a:not(:first-child)::before {
  color: rgba(255,255,255,.4) !important;
}

/* Drop menus */
.dropmenu ul ul {
  background: var(--enzian) !important;
  box-shadow: none !important;
}
.dropmenu ul li a:before { color: var(--link) !important; }

/* Header/Footer specifics */
#header {
  background: var(--enzian) !important;
  color: var(--text) !important;
  border-bottom-color: rgba(255,255,255,.2) !important;
}
#footer {
  color: var(--muted) !important;
}

/* Remove any residual light backgrounds */
*[style*="background:#fff"],
*[style*="background: #fff"],
*[style*="background-color:#fff"],
*[style*="background-color: #fff"],
.bg-white, .bg-light, .bg-gray, .bg-grey {
  background: var(--enzian) !important;
  background-color: var(--enzian) !important;
}

/* Links inside cards/hero/text-light areas */
.card a, .hero a, .text-light a {
  color: var(--link) !important;
}
.card a:hover, .hero a:hover, .text-light a:hover {
  color: var(--link-hover) !important;
  text-decoration: underline;
}

/* Fine-tune shadows and borders to suit dark-on-blue */
* {
  box-shadow: none !important;
}
hr {
  border-color: rgba(255,255,255,.25) !important;
}

.gallery {
      width: 100%;
      max-width: 800px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      margin: 20px auto;
    }

.gallery-item img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 8px;
    }

@media (max-width: 480px) {
.gallery {
        grid-template-columns: 1fr;
  }
}

/* Logo nimmt nur Eigengröße ein */
#header .navbar .navbar-section.logo {
  flex: 0 0 auto !important;
}

/* Mittlere Section darf wachsen und zentriert ihren Inhalt */
#header .navbar .navbar-section.desktop-menu {
  flex: 1 1 auto !important;
  display: flex !important;
  justify-content: flex-end !important;
  padding-right: 200px !important; /* Abstand zum rechten Rand */
  box-sizing: border-box;
}

/* Optional: Menüpunkte in einer Reihe mit etwas Abstand */
#header .navbar .desktop-menu .dropmenu > ul {
  display: flex;
  gap: 1.25rem; /* nach Geschmack anpassen */
  align-items: center;
  margin: 0;
  padding: 0;
}

/* Stelle sicher, dass nur das Top-Level-Flex ist */
.dropmenu > ul { display: flex !important; }

/* Submenüs: vertikale Liste, volle Höhe, nicht abgeschnitten */
.dropmenu > ul > li { position: relative; }

.dropmenu > ul > li > ul {
  position: absolute;   /* wie im Quark-Dropdown üblich */
  top: 100%;
  left: 0;
  display: none;        /* aus, bis hover */
  max-height: none !important;
  overflow: visible !important;
  /* optional: etwas Polster, damit nix klebt */
  padding: .25rem 0;
}

/* Anzeigen bei Hover (Desktop) */
.dropmenu > ul > li:hover > ul {
  display: block !important;
}

/* Submenü-Einträge wirklich blockig (nicht flexen) */
.dropmenu > ul > li > ul > li { display: block !important; }

/* Sicherheitsnetz: keine Flex-/Gap-Vererbung ins Submenü */
.dropmenu > ul > li > ul {
  display: block !important;
  gap: 0 !important;
}

/* 1) Nichts mehr abschneiden */
#header,
#header .section,
#header .container,
#header .navbar,
#header .navbar .navbar-section,
.dropmenu {
  overflow: visible !important;
}

/* 2) Submenü korrekt positionieren & sichtbar machen */
.dropmenu > ul > li { position: relative; }

.dropmenu > ul > li > ul {
  position: absolute !important;
  top: 100%;
  left: 0;
  display: none;                 /* bis Hover */
  max-height: none !important;   /* keine Höhenbegrenzung */
  overflow: visible !important;
  padding: .25rem 0;
  margin: 0;
  z-index: 10000;                /* über allem */
}

/* 3) Anzeigen bei Hover (Desktop) */
.dropmenu > ul > li:hover > ul {
  display: block !important;
}

/* 4) Animationseffekte neutralisieren (klassisches Dropdown) */
.dropmenu.animated > ul > li > ul {
  transform: none !important;
  opacity: 1 !important;
}

/* 5) Sicherheitsnetz: Submenü ist nicht flexend */
.dropmenu > ul > li > ul { display: block !important; gap: 0 !important; }
.dropmenu > ul > li > ul > li { display: block !important; }