/* Grundlayout: nutzt Bootstrap-Variablen, damit Light/Dark automatisch mitgehen */
body {
  min-height: 100vh;
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Header und Footer erhalten Safe-Area-Padding und weißen Hintergrund */
header.sticky-top {
  background-color: #f8f9fa;
  padding-top: env(safe-area-inset-top);
  /* ältere iOS-Versionen: */
  padding-top: constant(safe-area-inset-top);
}

/* Lange Datum (Sonntag, 23. November 2025) nur für Desktop */
#long-date {
    display: block;
}

/* Kurzes Datum (So, 23.11.2025) nur für mobile Geräte */
#short-date {
    display: none;
}

/* Für mobile Ansicht: Zeige das kurze Datum und verstecke das lange Datum */
@media (max-width: 767px) {
    #long-date {
        display: none;
    }
    #short-date {
        display: block;
    }
}

.card, 
.hero-panel,
.post-card {
    border-radius: 0 !important; /* Keine abgerundeten Ecken */
}

.region-column {
    border-radius: 0 !important; /* Keine abgerundeten Ecken */
}

.card-header, .card-body, .card-footer, .news-item {
	padding: 10px;
}

/* Für Widgets ebenfalls den border-radius entfernen */
#widget-weather,
#widget-quote,
#widget-joke {
    border-radius: 0 !important; /* Keine abgerundeten Ecken */
}
.list-group {
	line-height:1.1em;
}

#site-logo {
	height:100px; 
	width:auto;	
}

/* Mehrzeilige Anzeige für die Ortsliste im Standort-Modal erzwingen */
#locationSelect.form-select[size] {
  /* Bootstrap setzt für .form-select eine feste Höhe, 
     hier stellen wir sicher: bei size>1 immer automatisch an Inhalt anpassen */
  height: auto;
}

@media (max-width: 767px) {
	#site-logo {
		height:70px; 
		width:auto;	
		margin-bottom:10px;
	}
	/* Auf kleineren Viewports soll die Liste mind. ca. 3 Zeilen hoch sein */
    #locationSelect.form-select[size] {
        min-height: 6.5rem; /* grob ≈ 3 Zeilen bei form-select-sm */
    }
}

/* Titel innerhalb der Cards dürfen umbrechen */
.region-column .news-item .fw-semibold {
  white-space: normal;
  word-break: break-word;
}

/* text-truncate-2: lange Wörter (z.B. Domains) trotzdem umbrechen */
.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.logo-mark {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: conic-gradient(from 220deg, #22c55e, #2563eb, #a855f7, #22c55e);
  font-weight: 700;
  font-size: 0.9rem;
  color: #020617;
}

.letter-spacing {
  letter-spacing: 0.04em;
}

/* Hero */

.hero {
  background-color: var(--bs-body-bg);
}

/* Hero-Panel: passt sich in beiden Themes an */

.hero-panel {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color-translucent) !important;
  border-radius: 0.9rem;
  box-shadow: 0 1rem 2rem rgba(15, 23, 42, 0.08);
}

[data-bs-theme="dark"] .hero-panel {
  background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.25), rgba(15, 23, 42, 0.98));
  border-color: rgba(37, 99, 235, 0.6) !important;
  box-shadow: 0 1rem 2rem rgba(15, 23, 42, 0.8);
}

[data-bs-theme="dark"] .hero-panel .text-muted {
  color: #9ca3af !important;
}

/* Post-Karten */

.post-card {
  background-color: var(--bs-body-bg);
  border-radius: 0.75rem;
  border: 1px solid var(--bs-border-color-translucent);
  padding: 0.9rem 1rem;
  transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, border-color 0.16s ease-out;
}

[data-bs-theme="dark"] .post-card {
  background-color: #020617;
  border-color: #1f2937;
}

.post-card:hover {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, 0.75);
  box-shadow: 0 1rem 2rem rgba(15, 23, 42, 0.18);
}

.post-topic-pill {
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background-color: var(--bs-secondary-bg);
  color: var(--bs-secondary-color);
}

.post-type-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bs-secondary-color);
}

.post-title {
  font-size: 1.05rem;
}

.post-title a {
  color: inherit;
  text-decoration: none;
}

.post-title a:hover {
  text-decoration: underline;
}

/* Schnellstart-Formular */

.quick-post-form {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color-translucent) !important;
  box-shadow: 0 0.75rem 1.5rem rgba(15, 23, 42, 0.1);
}

[data-bs-theme="dark"] .quick-post-form {
  background-color: #020617;
  border-color: #374151 !important;
  box-shadow: 0 0.75rem 1.5rem rgba(15, 23, 42, 0.7);
}

[data-bs-theme="dark"] .quick-post-form .form-label {
  color: #e5e7eb;
}

[data-bs-theme="dark"] .quick-post-form .form-control,
[data-bs-theme="dark"] .quick-post-form .form-select,
[data-bs-theme="dark"] .quick-post-form textarea {
  background-color: #020617;
  border-color: #4b5563;
  color: #e5e7eb;
}

[data-bs-theme="dark"] .quick-post-form .form-control::placeholder,
[data-bs-theme="dark"] .quick-post-form textarea::placeholder {
  color: #6b7280;
}

[data-bs-theme="dark"] .quick-post-form .text-muted {
  color: #9ca3af !important;
}

/* Feedback-Meldungen im Formular */

#quick-post-message.form-message--success {
  color: #198754;
}

#quick-post-message.form-message--error {
  color: #dc3545;
}

/* Theme-Toggle Icon leicht kleiner */

#themeToggleIcon {
  font-size: 0.9rem;
}

/* Mehrzeilige Kürzung für Zusammenfassungen in der Liste */
.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.category-filter {
  font-size: 0.75rem;      
  padding: 0.1rem 0.4rem; 
}

/* Modal so groß wie möglich und scrollbar */
#articleModal .modal-dialog {
  max-width: 800px;
}
#articleModal .modal-body {
  max-height: 80vh;
  overflow-y: auto;
}
#articleModal img {
  max-width: 100%;
  height: auto;
}

/* Wetter-Widget responsiv skalieren */
#weather-widget-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}
#weather-widget-wrapper .wcom-default {
  transform-origin: top left;
}    


#map {
	position:relative; 
	width:100%; 
	height:650px;
	z-index:1;
	overflow:hidden;
}

#mapLayer {
	position:absolute;
	top:10px; 
	width:250px;
	height:auto; 
	z-index:3;
}

@media (max-width: 767px) {
	#map {
		position:relative;
		height:500px;
	} 
	#mapLayer {
		position:relative; 
		display:inline-block;
		width:100%;
		height:auto; 
		z-index:3;		
	}
	#mapLayer:after {
		clear:both;
	}
}
	

footer {
  background-color: #ffffff;
  padding-bottom: env(safe-area-inset-bottom);
  padding-bottom: constant(safe-area-inset-bottom);
}

/* Footer lesbar machen – Hell- und Dunkelmodus */

footer.bg-dark {
  color: #f8f9fa; /* Standard-Text im Footer hell */
}

footer.bg-dark .letter-spacing,
footer.bg-dark .small {
  color: rgba(248, 249, 250, 0.8); /* OpenNews + Tagline etwas abgesetzt, aber gut sichtbar */
}

footer.bg-dark .link-secondary {
  color: rgba(248, 249, 250, 0.7) !important;
}

footer.bg-dark .link-secondary:hover {
  color: rgba(248, 249, 250, 1) !important;
}