/* ========= Typo & Grundlayout ========= */
/* Dialog passt sich an Bildgröße an */
#fnpModal .modal-dialog {
  max-width: none;      /* keine feste Bootstrap-Breite */
  margin: auto;         /* horizontal zentriert */
}

#fnpModal .modal-content {
  width: max-content;   /* Breite richtet sich nach Bild */
  background: transparent;
  border: none;
  box-shadow: none;
}

#fnpModal img {
  display: block;
  max-width: calc(100vw - 2rem);  /* nie breiter als Bildschirm */
  max-height: calc(100vh - 2rem); /* nie höher als Bildschirm */
  height: auto;
}

/* falls der weiße Close-Button auf hellem Bild schlecht sichtbar ist */
#fnpModal .btn-close-white {
  filter: invert(1); /* macht ihn dunkel/hell je nach Hintergrund */
}
.x-small { font-size: 1.0rem; }

/* Wenn in der Row nur eine Column vorhanden ist: volle Breite */
.row.gx-2.align-items-stretch > .col-md-6:only-child {
  flex: 0 0 100%;
  max-width: 100%;
}
.card-body ul {
  padding-left: 0;              /* entfernt Standard-Einrückung */
  list-style-position: inside;  /* Aufzählungszeichen in den Textfluss */
  text-align: left;             /* sicherstellen, dass es linksbündig ist */
}

.card {
  border: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  text-align: center;
  transition: transform 0.2s ease-in-out;
}
.card:hover { transform: scale(1.01); }

.card-img-top {
  width: 100px; height: 100px; object-fit: cover; border-radius: 50%;
  margin: 15px auto 10px auto; display: block;
}

.accordion-button:not(.collapsed) {
  border-bottom: 0.25px solid #000;
  background-color: transparent; color: inherit; box-shadow: none;
}
.accordion-button:focus { outline: none; box-shadow: none; }
.accordion-button { font-size: 0.9rem; padding: 0.3rem 0.75rem; }

.accordion-body {
  font-size: 0.85rem; text-align: left;
  height: 100px; overflow-y: auto;
}

/* Schrift + Farbe global */
body, .navbar, .navbar * {
  font-family: 'Arimo', sans-serif !important;
  color: #001f3f;
}
h1, h2, h3, h4, h5, h6, p, li, a, span, div, article {
  color: #001f3f !important;
  font-family: 'Arimo', Arial, Helvetica, sans-serif;
}

/* Header (zusammengeführt) */
header {
  margin: 0 0 0 0;
  padding: 1rem 0;
  border: 0;
  border-bottom: 1px solid #aaa;
}
.headerLogo { width: 50px; height: auto; }

.navbar-toggler { border: none; padding: 0rem; }
.navbar-toggler i { font-size: 1.1rem; color: #333; }

h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; font-weight: bold !important; }
h3 { font-size: 0.8rem; }
h4 { font-size: 0.6rem; }

header h1 {
  font-weight: 700; font-size: 1.5rem;
  font-family: "Times New Roman", Times, serif;
  letter-spacing: 0.1em; margin-bottom: 0; text-align: center;
}
header .date {
  font-style: italic; font-size: 0.9rem; color: #6c757d !important; text-align: center;
}

/* Navbar */
nav {
  margin-bottom: 2rem; border-top: 1px solid #aaa; border-bottom: 2px solid #aaa;
  padding: 0.5rem 0; background: #f7f5f0;
}
nav a {
  color: #6c757d !important; font-weight: 600; margin: 0 1rem; text-decoration: none;
}

.hr-1px { border: none; height: 1px; background-color: #000; opacity: .2; }

.hover-link { display: inline-block; transition: transform 0.3s ease; }
.hover-link:hover { transform: scale(1.01); }

nav a:hover { text-decoration: none; transform: scale(1); }

.navbar-text-dark { color: #001f3f !important; }

.nav-link {
  position: relative; font-weight: 500; color: #6c757d !important;
  text-decoration: none !important;
}
.nav-link.active { font-weight: 900; color: #000; }
.nav-link.active::after {
  content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 0; background-color: #000;
}
.navbar-nav .nav-link:hover { text-decoration: none; font-weight: 900; transform: scale(1.2); }
.navbar { position: relative; z-index: 1100; }

/* Toggler-Icon kleiner (nur Optik) */
.navbar-light .navbar-toggler .navbar-toggler-icon {
  width: 1rem !important; height: 1rem !important; background-size: 1rem 1rem !important;
}
@media (max-width: 575.98px) {
  .navbar-toggler { padding: .25rem .45rem; }
}

/* Footer */
footer {
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
  margin-top: 3rem; padding-top: 1rem; padding-bottom: 1rem;
  border-top: 1px solid #aaa; font-size: 0.8rem; color: #666; text-align: center;
}

/* Artikel */
article h2 { margin-bottom: 0.5rem; margin-top: 0; }
article p.lead { margin-bottom: 0; font-style: italic; color: #444; }

article > .image-block img {
  margin-top: 0.3rem; border: 1px solid #ccc; box-shadow: 1px 1px 4px rgba(0,0,0,0.1);
  max-width: 100%; height: auto; object-fit: cover; display: block;
}

/* Flex-Layout in Artikellisten */
main .row > .col > article { display: flex; flex-direction: column; height: 100%; }
main .row > .col > article > .text-block { flex-grow: 1; display: flex; flex-direction: column; }
main .row > .col > article > .image-block { margin-top: auto; display: flex; flex-direction: column; }

/* XS: Container-Padding minimieren */
@media (max-width: 575.98px) {
  .container, .container-fluid { padding-left: 2px !important; padding-right: 2px !important; }
  .article { padding-left: 2px !important; padding-right: 2px !important; }
  .article-figure { width: 100%; margin: 0 0 1rem 0; }
}

/* Bildbreiten staffeln */
.article-figure { width: 100%; margin: 0 0 1rem 0; }
@media (min-width: 768px) {
  .article-figure {
    float: left; width: clamp(220px, 30%, 360px); margin: .25rem 1rem 1rem 0;
  }
}
@media (min-width: 992px) { .article-figure { width: clamp(240px, 28%, 380px); } }
@media (min-width: 1200px){ .article-figure { width: clamp(260px, 26%, 400px); } }

/* h2 in main dichter */
main.article-shell h2 { margin-top: 0 !important; line-height: 1.15; }
main.article-shell .article > header { padding-top: 0 !important; margin-top: 0 !important; }
main.article-shell > *:first-child h2:first-child { margin-top: -6px !important; }

/* ========= Links / Unterstreichung ========= */

/* NEU: Links sauber umbrechen – keine Silbentrennung in Links */
.article a, nav a, footer a {
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}

/* NEU: E-Mails/Handles nie trennen */
a[href^="mailto:"],
a.mention,
a.email { white-space: nowrap; }

/* Nur Text (span.u) unterstreichen, Icon nicht */
.text-underline-text span {
  text-decoration: underline;
  text-underline-offset: .2em;
}
.text-underline-text i,
.text-underline-text::before {
  text-decoration: none !important;
}

/* Global: Links ohne Unterstreichung – außer .link-dotted */
a:not(.link-dotted) { text-decoration: none; }

/* --- .link-dotted: Icon + gepunktete Linie NUR unter dem Text --- */
a.link-dotted {
  position: relative;
  padding-left: 1.1em;                 /* Platz fürs Icon */
  text-decoration: none !important;    /* native Underline aus */
  color: inherit;
}

/* Icon links, aus dem Textfluss raus */
a.link-dotted::before {
  font-family: "bootstrap-icons";
  content: "\f4b3";                    /* bi-link-45deg */
  position: absolute;
  left: 0;
  top: .15em;                          /* bei Bedarf .12–.20em feinjustieren */
  width: 1em; height: 1em; line-height: 1;
  pointer-events: none;
}

/* Gepunktete Linie NUR unter dem Text (ab 1.1em) */
a.link-dotted::after {
  content: "";
  position: absolute;
  left: 1.1em;                         /* startet hinter dem Icon */
  right: 0;
  bottom: 0;                           /* ggf. auf -.05em/.1em justieren */
  border-bottom: 1px dotted currentColor;
  pointer-events: none;
}

/* etwas stärker bei Hover */
a.link-dotted:hover::after {
  border-bottom-width: 1.5px;
}


/* Accordion: nur einmal definiert */
.accordion-body a.link-dotted {
  text-decoration-line: underline !important;
  text-decoration-style: dotted !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: .3em !important;
  font-style: italic;
}

/* ========= Link-Icons ========= */
a[href^="http"]:not([href*="stadtvertreter.com"]):not(.social)::before {
  font-family: "bootstrap-icons";
  content: "\f470"; /* bi-link-45deg */
  margin-right: 0.20rem;
  transition: color 0.2s ease-in-out;
  vertical-align: -0.15em;
}
a[href$=".pdf" i]:not(.link-dotted)::before {
  font-family: "bootstrap-icons";
  content: "\F63D"; /* bi-file-earmark-pdf */
  font-size: 1em;
  margin-right: 0.20rem;
  transition: color 0.2s ease-in-out;
  color: #dc3545;
  vertical-align: -0.15em;
}
a[href^="mailto:"]:not(.link-dotted)::before {
  font-family: "bootstrap-icons";
  content: "\f32f"; /* bi-envelope */
  margin-right: 0.20rem;
  transition: color 0.2s ease-in-out;
  vertical-align: -0.15em;
}
a:hover::before { color: var(--bs-primary); }

/* ========= Tooltip (Wikipedia-Stil) ========= */
.tooltip-wiki { position: relative; display: inline-block; cursor: help; }
.tooltip-wiki .tw-box {
  position: absolute; z-index: 1000; top: calc(100% + .5rem); left: 50%;
  transform: translateX(-50%);
  max-width: 90vw; min-width: max-content; width: auto;
  display: block; background: #f8f9fa; color: #202122;
  font-size: 12pt; line-height: 1.35; padding: .6rem .7rem;
  border: 1px solid #a2a9b1; border-radius: 2px; box-shadow: 0 2px 6px rgba(0,0,0,.15);
  visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .15s ease;
  overflow-wrap: break-word; white-space: normal;
}

/* Pfeil mittig */
.tooltip-wiki .tw-box::before,
.tooltip-wiki .tw-box::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
}
.tooltip-wiki .tw-box::before {
  top: -6px; border: 6px solid transparent; border-bottom-color: #a2a9b1;
}
.tooltip-wiki .tw-box::after {
  top: -5px; border: 5px solid transparent; border-bottom-color: #f8f9fa;
}

/* Desktop: Hover/Focus zeigt Tooltip */
@media (hover:hover) {
  .tooltip-wiki:hover .tw-box,
  .tooltip-wiki:focus-within .tw-box {
    visibility: visible; opacity: 1; pointer-events: auto;
  }
}

/* Motion-Reduce */
@media (prefers-reduced-motion: reduce) {
  .tooltip-wiki .tw-box { transition: none; }
}

/* Mobile/JS-Öffnen */
.tooltip-wiki.is-open .tw-box {
  visibility: visible; opacity: 1; pointer-events: auto;
}


@media print {
  nav, footer {
    display: none !important;
  }
  body {
    margin: 0;
  }
}