/* =========================================================================
   id4web – Feinschliff über dem Bootstrap Package (Bootstrap 5 / TYPO3 14)
   Referenzwerte aus dem gerenderten Bestand gemessen:
     Navbar-BG  #f7f4d7 · Nav-Link #3d3c3c (uppercase) · Logo 142x140
     Footer-Content-BG #3d3c3c · Footer-Meta-BG #353434 · Footer-Text/Links #fff
   ========================================================================= */

:root {
  --id4web-primary:        #3d3c3c;
  --id4web-secondary:      #f7f4d7;
  --id4web-tertiary:       #04473d;
  --id4web-footer-bg:      #3d3c3c;
  --id4web-footer-meta-bg: #353434;

  /* Ecken global eckig (wie im Bestand): alle Bootstrap-Radien auf 0 */
  --bs-border-radius:      0;
  --bs-border-radius-sm:   0;
  --bs-border-radius-lg:   0;
  --bs-border-radius-xl:   0;
  --bs-border-radius-xxl:  0;
  --bs-border-radius-2xl:  0;
  --bs-border-radius-pill: 0;
}
/* Sicherheitsnetz für Komponenten mit eigenem Radius-Wert */
.btn, .card, .form-control, .form-select, .input-group-text, .dropdown-menu,
.alert, .badge, .list-group, .list-group-item, .pagination .page-link,
.nav-tabs .nav-link, .breadcrumb, .toast, .modal-content, .carousel,
.img-thumbnail, .rounded, .rounded-top, .rounded-bottom, .rounded-start, .rounded-end {
  border-radius: 0 !important;
}

/* ---------------------------------------------------------------- Typografie */
body {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 1.25rem;      /* 20px Fließtext (rem = skaliert mit Browser-Einstellung) */
  line-height: 1.55;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "Times New Roman", Times, serif;
  font-weight: 600;
  line-height: 1.3;
  color: var(--id4web-tertiary);   /* Überschriften grün (#04473d) wie im Bestand */
}
h1, .h1 { text-transform: uppercase; }
/* h2 und h4 dunkelgrau wie im Bestand */
h2, h4, .h2, .h4 { color: var(--id4web-primary); }

/* Überschriftengrößen am Bestand ausgerichtet (Basis 20px, gerendert desktop) */
h1, .h1 { font-size: 2.5rem; }    /* ~40px  */
h2, .h2 { font-size: 2.15rem; }   /* ~34px  */
h3, .h3 { font-size: 2rem; }      /* 32px   */
h4, .h4 { font-size: 1.55rem; }   /* ~25px  */
h5, .h5 { font-size: 1.3rem; }
h6, .h6 { font-size: 1.15rem; }

/* ------------------------------------------------------------- Hauptnavigation */
/* Cremefarbene Navbar mit dunklen, versalen Links */
.navbar-mainnavigation {
  background-color: var(--id4web-secondary) !important;
  border-bottom: 1px solid #e9e3b8;
}
.navbar-mainnavigation .nav-item,
.navbar-mainnavigation .nav-link {
  text-transform: uppercase;
}
/* Navigations-Schriftgröße wie im Bestand (20px) */
.navbar-mainnavigation .navbar-nav .nav-link {
  font-size: 1.25rem;
}
.navbar-mainnavigation .navbar-nav .nav-link {
  color: var(--id4web-primary);
}
.navbar-mainnavigation .navbar-nav .nav-link:hover,
.navbar-mainnavigation .navbar-nav .nav-link:focus,
.navbar-mainnavigation .navbar-nav .nav-link.active,
.navbar-mainnavigation .navbar-nav .active > .nav-link,
.navbar-mainnavigation .navbar-nav .show > .nav-link {
  color: #000;
}
/* Menü rechtsbündig: nav-spacer (frisst per flex-grow den Platz) ausblenden,
   dann Items ans rechte Ende der vollbreiten navbar-nav */
@media (min-width: 992px) {
  .navbar-mainnavigation .navbar-nav {
    justify-content: flex-end;
    width: 100%;
  }
  .navbar-mainnavigation .navbar-nav .nav-spacer {
    display: none;
  }
}
/* Dropdown-Menü hell */
.navbar-mainnavigation .dropdown-menu {
  background-color: #fff;
}
.navbar-mainnavigation .dropdown-item:hover,
.navbar-mainnavigation .dropdown-item:focus {
  background-color: var(--id4web-primary);
  color: #fff;
}

/* --------------------------------------------------------------------- Logo */
/* Bestand: Logo ~140px hoch */
/* Logo-Höhe = Navigationsbalken-Höhe (eine gemeinsame CSS-Variable --navbar-h
   ist die einzige Quelle: daraus leiten sich Balken- UND Logohöhe ab).
   Dadurch ist das Logo immer exakt so hoch wie der Balken – kein Überstand –
   in Desktop wie Mobil, und schrumpft beim Scrollen (.navbar-transition) mit. */
.navbar-mainnavigation.navbar-top {
  --navbar-h: 60px;                /* mobil */
  min-height: var(--navbar-h);
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  transition: min-height 0.2s ease;
}
.navbar-mainnavigation .navbar-brand {
  padding-top: 0;
  padding-bottom: 0;
}
.navbar-mainnavigation .navbar-brand img {
  display: block;
  height: var(--navbar-h);         /* Logo = Balkenhöhe */
  width: auto !important;
  max-height: none !important;
  transition: height 0.2s ease;
}
@media (min-width: 992px) {
  .navbar-mainnavigation.navbar-top                   { --navbar-h: 140px; }  /* oben   */
  .navbar-mainnavigation.navbar-top.navbar-transition { --navbar-h: 80px;  }  /* scroll */
}

/* ------------------------------------------------------------------- Footer */
.footer-section-content {
  background-color: var(--id4web-footer-bg) !important;
  color: #ffffff;
  /* mehr Innenabstand oben im dunklen Footer (Bestand ~70px, Default 42px) */
  padding-top: 1.75rem;
}
.footer-section-meta,
.footer-meta {
  background-color: var(--id4web-footer-meta-bg) !important;
  color: #ffffff;
}
.footer-section-content,
.footer-section-meta,
.footer-meta {
  color: #ffffff;
}
/* Footer-Links weiß wie im Bestand (überschreibt Bootstrap-Link-Farbe) */
.footer-section-content a,
.footer-section-meta a,
.footer-meta a {
  color: #ffffff !important;
}
.footer-section-content a:hover,
.footer-section-meta a:hover,
.footer-meta a:hover {
  color: #cccccc !important;
}

/* -------------------------------------------------------------- Buttons/Cards */
/* Buttons etwas größer (Innenabstand); Text auf Fließtextgröße (20px) */
.btn {
  --bs-btn-padding-y: 0.7rem;
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-font-size: 1.25rem;
  font-size: 1.25rem;
}
/* Formularfelder-Text auf Fließtextgröße (20px) – alles außer Menü/Überschriften einheitlich */
.form-control,
.form-select,
input,
textarea,
select {
  font-size: 1.25rem;
}
.btn-primary {
  --bs-btn-bg: var(--id4web-primary);
  --bs-btn-border-color: var(--id4web-primary);
  --bs-btn-hover-bg: #2b2a2a;
  --bs-btn-hover-border-color: #2b2a2a;
  --bs-btn-color: #fff;
}
.card-body,
.card-footer {
  background-color: var(--id4web-secondary);
}
/* Abstand zwischen nebeneinanderstehenden Buttons im zentrierten Inhalt */
.bp-page-content .text-center .btn {
  margin: 0.3rem 0.35rem;
}

/* -------------------------------------------------- Abstände Inhaltselemente */
/* Größerer Standard-Abstand zwischen den Content-Elementen der Spalte "Normal"
   (colPos 0) – nur über margin-top gelöst, damit das letzte Element bündig am
   Footer sitzt (kein weißer Abstand). Greift nur im Default-Zustand
   (frame-space-*-none); im Backend gesetzte Abstände behalten Vorrang. */
.bp-page-content .frame-space-before-none { margin-top: 1.5rem; }

/* Heller Grau-Hintergrund für Inhaltselemente (wie Bestand: #f2f2f2 statt #e9e9e9) */
.frame-background-light {
  background-color: #f2f2f2;
}

/* ------------------------------------------------- Datei-Downloads (uploads) */
.frame-type-uploads .filelink-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.frame-type-uploads .filelink-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.25rem;
  background-color: #f2f2f2 !important;
  border: 1px solid #e4e4e4;
  border-left: 4px solid var(--id4web-primary);
  transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
  position: relative;   /* Basis für den über die ganze Karte gespannten Link */
  cursor: pointer;
}
/* Kompletter Kartenbereich (inkl. Pfeil) als Klickfläche für den Datei-Link */
.frame-type-uploads .filelink-filename a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.frame-type-uploads .filelink-item:hover {
  background-color: #ffffff !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .10);
  transform: translateY(-1px);
}
.frame-type-uploads .filelink-media { flex: 0 0 auto; }
.frame-type-uploads .filelink-fileicon {
  font-size: 1.9rem;
  line-height: 1;
  color: var(--id4web-primary);
}
.frame-type-uploads .filelink-body { flex: 1 1 auto; min-width: 0; }
.frame-type-uploads .filelink-heading { display: flex; flex-direction: column; }
.frame-type-uploads .filelink-filename a {
  font-weight: 600;
  text-decoration: none;
  color: var(--id4web-primary);
}
.frame-type-uploads .filelink-filename a:hover { text-decoration: underline; }
.frame-type-uploads .filelink-filesize {
  font-size: 0.8em;
  color: #777;
}
/* Download-Pfeil rechts (SVG), hebt sich beim Hover hervor */
.frame-type-uploads .filelink-item::after {
  content: "";
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d3c3c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0l-4-4m4 4l4-4M4 21h16'/%3E%3C/svg%3E");
  opacity: .5;
  transition: opacity .15s ease, transform .15s ease;
}
.frame-type-uploads .filelink-item:hover::after {
  opacity: 1;
  transform: translateY(2px);
}

/* ------------------------------------------------------------------ Sonstiges */
.frame-ruler-after { margin-bottom: 1em; }