/* /assets/extra.css
   Zusatz-Styles: Slideshow, Chatroom, Gruppen, Melde-Dialog, Moderatoren.
   Wird NACH styles.css geladen. */

/* ── Startseiten-Slideshow: alles untereinander, zentriert ─────── */
.full-gallery{
  display: block !important;
  max-width: 440px;
  margin: 0 auto;
  text-align: center;
}
.full-gallery .stage{
  max-width: 440px;
  width: 100%;
  margin: 0 auto;
  background: transparent;
}
.full-gallery .stage img{
  width: 100%;
  height: auto;
  object-fit: contain;
  background: transparent;
}
/* Pfeile direkt unter dem Bild, zentriert */
.full-gallery .gallery-controls{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 10px 0 6px;
}
/* Bildunterschrift unter den Pfeilen */
.full-gallery .gallery-caption{
  max-width: 440px;
  margin: 0 auto;
  text-align: center;
  line-height: 1.5;
}


/* ── Chatroom (echte Klassen aus index.php) ────────────────────── */
.chat-wrap { max-width: 760px; margin: 1rem auto; padding: 0 .75rem; }
.chat-intro { text-align: center; }

/* Gruppen-Tabs */
.chat-groups { display: flex; flex-wrap: wrap; gap: 8px; margin: 1rem 0 .5rem; align-items: center; justify-content: center; }
.group-tab { background: #fff; border: 2px solid #111; padding: 6px 14px; cursor: pointer; font-family: inherit; font-size: 1rem; text-decoration: none; color: #111; }
.group-tab:hover, .group-tab.active { background: #023344; color: #fff; border-color: #023344; }
.group-tab.group-new { border-style: dashed; }

/* Raum-Leiste mit Aktionen */
.chat-room-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; margin-bottom: .5rem; }
.chat-room-bar #currentRoomLabel { font-weight: bold; }
.link-btn { background: none; border: none; color: #023344; cursor: pointer; font-family: inherit; font-size: .9rem; text-decoration: underline; padding: 2px 4px; }
.link-btn:hover { color: #c00; }

/* Nachrichten-Fenster – grösser */
.chat-box {
  border: 2px solid #111;
  background: #fff;
  height: min(65vh, 560px);
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.chat-empty { color: #888; text-align: center; margin: auto; }

.chat-msg { font-size: 1.05rem; line-height: 1.45; }
.chat-meta { font-size: .8rem; color: #666; margin-bottom: 2px; }
.chat-name { font-weight: bold; color: #023344; margin-right: 8px; }
.chat-text { background: #f5f0e8; border: 1px solid #e0d8c8; border-radius: 4px; padding: 7px 11px; display: inline-block; max-width: 100%; word-break: break-word; }
.chat-msg--mine { text-align: right; }
.chat-msg--mine .chat-text { background: #d6eadf; }
.chat-report { background: none; border: none; color: #bbb; font-size: .85rem; cursor: pointer; margin-left: 6px; }
.chat-report:hover { color: #c00; }

/* Eingabe – grösser */
.chat-form { display: flex; gap: 8px; margin-top: .75rem; align-items: stretch; }
.chat-form textarea {
  flex: 1;
  border: 2px solid #111;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 1.05rem;
  resize: none;
  min-height: 48px;
  line-height: 1.4;
}
.chat-form button {
  background: #023344;
  color: #fff;
  border: none;
  padding: 0 22px;
  cursor: pointer;
  font-family: inherit;
  font-size: 1.05rem;
}
.chat-form button:hover { background: #034d63; }
.chat-hint { font-size: .8rem; color: #888; margin-top: 4px; text-align: center; }


/* ── Gruppe erstellen Dialog ──────────────────────────────────── */
#group-modal-bg { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 200; align-items: center; justify-content: center; }
#group-modal-bg.open { display: flex; }
#group-modal { background: #fdf9f3; border: 2px solid #111; padding: 1.5rem; width: min(90%, 400px); }
#group-modal h2 { margin: 0 0 1rem; font-size: 1.1rem; text-align: center; }
#group-modal label { display: block; font-size: .85rem; margin-bottom: 2px; }
#group-modal input[type=text], #group-modal textarea { width: 100%; box-sizing: border-box; border: 2px solid #111; padding: 6px 8px; font-family: inherit; font-size: .92rem; margin-bottom: .75rem; }
#group-modal fieldset { border: 1px solid #ccc; padding: .5rem .75rem; margin-bottom: .75rem; }
#group-modal legend { font-size: .8rem; padding: 0 4px; }
#group-modal .modal-btns { display: flex; justify-content: flex-end; gap: 8px; }
#group-modal .modal-btns button { border: 2px solid #111; background: none; padding: 5px 16px; cursor: pointer; font-family: inherit; }
#group-modal .modal-btns button.primary { background: #023344; color: #fff; border-color: #023344; }

/* ── Mitglieder-Dialog ────────────────────────────────────────── */
#member-modal-bg { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 200; align-items: center; justify-content: center; }
#member-modal-bg.open { display: flex; }
#member-modal { background: #fdf9f3; border: 2px solid #111; padding: 1.5rem; width: min(90%, 380px); }
#member-modal h2 { margin: 0 0 1rem; font-size: 1.1rem; text-align: center; }
#member-email { width: 100%; box-sizing: border-box; border: 2px solid #111; padding: 6px 8px; font-family: inherit; font-size: .92rem; margin-bottom: .75rem; }
#member-modal .modal-btns { display: flex; justify-content: flex-end; gap: 8px; }
#member-modal .modal-btns button { border: 2px solid #111; background: none; padding: 5px 16px; cursor: pointer; font-family: inherit; }
#member-modal .modal-btns button.primary { background: #023344; color: #fff; border-color: #023344; }

/* ── Melden-Dialog ────────────────────────────────────────────── */
#report-modal-bg { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 300; align-items: center; justify-content: center; }
#report-modal-bg.open { display: flex; }
#report-modal { background: #fdf9f3; border: 2px solid #111; padding: 1.5rem; width: min(90%, 360px); }
#report-modal h2 { margin: 0 0 .75rem; font-size: 1rem; }
#report-reason { width: 100%; box-sizing: border-box; border: 2px solid #111; padding: 6px; font-family: inherit; font-size: .88rem; margin-bottom: .75rem; }
#report-modal .modal-btns { display: flex; justify-content: flex-end; gap: 8px; }
#report-modal .modal-btns button { border: 2px solid #111; background: none; padding: 5px 14px; cursor: pointer; font-family: inherit; }
#report-modal .modal-btns button.primary { background: #c00; color: #fff; border-color: #c00; }

/* ── Moderatoren-Dashboard ───────────────────────────────────── */
.mod-wrap { max-width: 800px; margin: 1.5rem auto; padding: 0 .75rem; }
.mod-wrap h1 { font-size: 1.3rem; border-bottom: 2px solid #111; padding-bottom: .4rem; margin-bottom: 1rem; }
.mod-report { border: 2px solid #ddd; padding: .75rem; margin-bottom: .75rem; background: #fff; }
.mod-report.hidden-msg { border-color: #c00; background: #fff5f5; }
.mod-report .meta { font-size: .78rem; color: #666; margin-bottom: .35rem; }
.mod-report .msg-body { background: #f5f0e8; padding: 6px 10px; margin-bottom: .5rem; font-size: .9rem; word-break: break-word; }
.mod-report .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mod-report .actions button { border: 2px solid #111; background: none; padding: 4px 12px; cursor: pointer; font-family: inherit; font-size: .82rem; }
.mod-report .actions .btn-hide { border-color: #c00; color: #c00; }
.mod-report .actions .btn-hide:hover { background: #c00; color: #fff; }
.mod-report .actions .btn-clear:hover { background: #023344; color: #fff; }
.mod-empty { color: #888; font-size: .9rem; padding: 1rem 0; }

/* ── PLZ-Hinweis im Registrierungsformular ───────────────────── */
.plz-hint { font-size: .8rem; min-height: 1.2em; margin: .2em 0 .6em; }
.plz-ok { color: #0a7a2e; }
.plz-warn { color: #8a6d00; }

/* ── Header: Auth-Links schlank statt klobig ─────────────────── */
.site-header .auth-inline a,
nav.auth-inline a {
  border: none !important;
  border-width: 0 !important;
  background: transparent !important;
  padding: 4px 6px !important;
  font-size: .95rem !important;
  text-decoration: none !important;
  color: #023344 !important;
  border-radius: 0 !important;
  border-bottom: 2px solid transparent !important;
}
.site-header .auth-inline a:hover,
nav.auth-inline a:hover {
  background: transparent !important;
  color: #023344 !important;
  border-bottom: 2px solid #d61d1d !important;
}
/* Sprach-Umschalter: kleiner, dezenter Rahmen behalten */
.site-header .auth-inline .lang-btn,
nav.auth-inline .lang-btn {
  border: 1px solid #ccc !important;
  padding: 2px 8px !important;
  font-size: .85rem !important;
  background: #fff !important;
  color: #023344 !important;
}
.site-header .auth-inline .lang-btn.active,
nav.auth-inline .lang-btn.active {
  background: #023344 !important;
  color: #fff !important;
  border-color: #023344 !important;
}

/* ════════════════════════════════════════════════════════════════
   PUNKT 5: Titel ohne Balken – dezenter Teal-Text, zentriert
   ════════════════════════════════════════════════════════════════ */
.hero-title {
  background: none !important;
  color: #023344 !important;
  font-size: 1.5rem !important;
  line-height: 1.3 !important;
  padding: 6px 12px !important;
  margin: 4px auto 10px !important;
  text-align: center !important;
  border: none !important;
  font-weight: bold;
  word-break: break-word;
  max-width: 800px;
}
@media (max-width: 768px) {
  .hero-title { font-size: 1.2rem !important; }
}
@media (max-width: 480px) {
  .hero-title { font-size: 1.05rem !important; padding: 4px 8px !important; }
}
/* Oberen Abstand des Inhalts zum Header verkleinern */
main.container { padding-top: 10px !important; }
main.container > .hero-title:first-child,
main.container > h1:first-child,
main.container > h2:first-child { margin-top: 2px !important; }

/* ════════════════════════════════════════════════════════════════
   PUNKT 2: Header schlanker + aktive Seite rot
   ════════════════════════════════════════════════════════════════ */
/* Aktiver Link in der Hauptnavigation rot */
.top-nav a.active,
.site-header .auth-inline a.active {
  color: #d61d1d !important;
  border-bottom-color: #d61d1d !important;
}
/* CH/DE Sprachbuttons diskreter und kompakter */
.site-header .auth-inline .lang-btn,
nav.auth-inline .lang-btn {
  padding: 1px 6px !important;
  font-size: .78rem !important;
  border: 1px solid #ddd !important;
  opacity: .85;
}
.site-header .auth-inline .lang-switch,
nav.auth-inline .lang-switch {
  margin-left: 4px !important;
  gap: 1px !important;
}
/* Header insgesamt etwas kompakter */
.site-header .header-inner { gap: 8px; }
.auth-inline { gap: 2px !important; }

/* ════════════════════════════════════════════════════════════════
   PUNKT 1 + Responsive: Chat Mobile sauber einpassen
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Chat-Container nie breiter als der Bildschirm */
  .chat-wrap { max-width: 100%; padding: 0 10px; box-sizing: border-box; }
  .chat-box { width: 100%; box-sizing: border-box; }
  .chat-groups { gap: 6px; }
  .group-tab { font-size: .9rem; padding: 5px 10px; }
}
@media (max-width: 480px) {
  .chat-wrap { padding: 0 8px; }
  .chat-box {
    height: 50vh;
    padding: .6rem;
    width: 100%;
    box-sizing: border-box;
  }
  .chat-msg { font-size: 1rem; }
  /* Textfeld grösser zum Schreiben */
  .chat-form textarea {
    font-size: 1.05rem;
    min-height: 60px;
    padding: 10px;
  }
  .chat-form button { font-size: 1rem; padding: 0 16px; }
  #group-modal, #member-modal, #report-modal { padding: 1rem; }
}

/* ════════════════════════════════════════════════════════════════
   PUNKT 4: Beiträge als Kacheln (Desktop), untereinander (Mobile)
   ════════════════════════════════════════════════════════════════ */
.beitraege {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 768px) {
  .beitraege { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .beitraege { grid-template-columns: repeat(3, 1fr); }
}
.beitrag-box {
  border: 2px solid #111;
  background: #fff;
  padding: 16px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.beitrag-box h3 { margin-top: 0; }
.beitrag-box .bild-container { margin: 8px 0; }
.beitrag-box .bild-container img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border: 1px solid #ccc;
  display: block;
}
.beitrag-box .meta { font-size: .8rem; color: #666; margin-top: auto; }
.beitrag-box .btn-row { margin-top: 12px; }

/* ── Kacheln: Bildhöhe erzwingen (überschreibt styles.css) ─────── */
.beitraege .beitrag-box .bild-container img,
.container .beitraege .beitrag-box img {
  width: 100% !important;
  height: 190px !important;
  object-fit: cover !important;
  border: 1px solid #ccc !important;
  display: block !important;
  max-width: 100% !important;
}
.beitraege .beitrag-box {
  height: 100%;
}
.beitraege .beitrag-box h3 {
  font-size: 1.05rem;
  line-height: 1.3;
}

/* ════════════════════════════════════════════════════════════════
   PWA Install-Link im Footer (dezent)
   ════════════════════════════════════════════════════════════════ */
.pwa-footer {
  margin-top: 6px;
  font-size: .85rem;
}
.pwa-footer a, .pwa-footer span {
  color: #023344;
  text-decoration: none;
  opacity: .8;
}
.pwa-footer a:hover {
  text-decoration: underline;
  opacity: 1;
}

/* ── Leitsatz beim Beitrag-Erstellen ──────────────────────────── */
.leitsatz {
  max-width: 800px;
  margin: 0 auto 18px;
  padding: 12px 16px;
  background: #f5f0e8;
  border-left: 4px solid #023344;
  font-style: italic;
  color: #333;
  line-height: 1.5;
}

/* ── Beri-Projekt Seite ───────────────────────────────────────── */
.beri-prose {
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
  line-height: 1.6;
  color: #111;
}
.beri-prose h2 {
  font-size: 1.2rem;
  color: #023344;
  margin: 22px 0 8px;
  border-bottom: 2px solid #023344;
  padding-bottom: 4px;
}
.beri-prose p { margin: 0 0 14px; }
.beri-lead { font-size: 1.05rem; }
.beri-fiktiv { font-size: .9rem; color: #666; }
.beri-prose a { color: #023344; }

/* ── Impressum schlicht ───────────────────────────────────────── */
.impressum-prose {
  max-width: 600px;
  margin: 0 auto 8px;
  text-align: center;
  line-height: 1.6;
}

/* ── Chat-Eingabe Mobile: gestapelt, Textfeld gross ───────────── */
/* Verstecktes Label sauber ausblenden */
.chat-form .visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
@media (max-width: 600px) {
  .chat-form {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .chat-form textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 70px;
    font-size: 1.05rem;
  }
  .chat-form button {
    width: 100%;
    padding: 12px;
    font-size: 1.05rem;
  }
}

/* ── Registrier-Aufruf auf Startseite (klickbar) ──────────────── */
.register-cta {
  color: #023344;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  cursor: pointer;
  transition: color .15s;
}
.register-cta:hover {
  color: #d61d1d;
}

/* ── Suchseite ────────────────────────────────────────────────── */
.search-form {
  display: flex;
  gap: 8px;
  max-width: 600px;
  margin: 0 auto 18px;
  flex-wrap: wrap;
}
.search-form input {
  flex: 1;
  min-width: 200px;
  padding: 10px 12px;
  border: 2px solid #023344;
  font-size: 1rem;
  box-sizing: border-box;
}
.search-form .btn {
  white-space: nowrap;
}
.search-count {
  text-align: center;
  color: #666;
  font-size: .9rem;
  margin-bottom: 16px;
}
.post-rubrik {
  display: inline-block;
  font-size: .75rem;
  background: #023344;
  color: #fff;
  padding: 2px 8px;
  margin: 0 0 8px;
  border-radius: 3px;
}

/* ── Startseiten-Funktions-Kacheln ────────────────────────────── */
.start-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 900px;
  margin: 4px auto 22px;
}
.start-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: #fff;
  border: 2px solid #023344;
  text-decoration: none;
  color: #023344;
  transition: background .15s, color .15s;
}
.start-tile,
.start-tile:hover,
.start-tile * {
  text-decoration: none !important;
}
.start-tile:hover {
  background: #023344;
  color: #fff;
}
/* "Über das Projekt"-Kachel hervorgehoben als einladender Einstieg */
.start-tile.tile-ueber {
  background: #023344;
  color: #fff;
}
.start-tile.tile-ueber .tile-desc {
  opacity: .92;
}
.start-tile.tile-ueber:hover {
  background: #d61d1d;
  border-color: #d61d1d;
}
.start-tile .tile-title {
  font-weight: bold;
  font-size: 1.15rem;
  letter-spacing: .02em;
  color: #d61d1d;
}
/* Auf dunklen Kacheln (hervorgehoben + Hover) Titel weiss, sonst unlesbar */
.start-tile.tile-ueber .tile-title,
.start-tile:hover .tile-title {
  color: #fff;
}
.start-tile .tile-desc {
  font-size: .85rem;
  line-height: 1.35;
  opacity: .85;
}
/* Tablet: 2 Spalten */
@media (max-width: 800px) {
  .start-tiles { grid-template-columns: repeat(2, 1fr); }
}
/* Handy/kleinere Tablets: 1 Spalte, gut tippbar, grössere Schrift */
@media (max-width: 600px) {
  .start-tiles { grid-template-columns: 1fr; gap: 10px; }
  .start-tile { padding: 16px 18px; }
  .start-tile .tile-title { font-size: 1.4rem !important; }
  .start-tile .tile-desc { font-size: 1.05rem !important; line-height: 1.45; }
  .start-tile.tile-kunst .tile-title { font-size: 1.5rem !important; }
}

/* ════════════════════════════════════════════════════════════════
   KUNST-KISTE
   ════════════════════════════════════════════════════════════════ */
.kunst-intro {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 8px;
  line-height: 1.5;
}
.kunst-eintrag {
  max-width: 700px;
  margin: 0 auto 28px;
  padding: 18px;
  background: #fff;
  border: 2px solid #023344;
}
.kunst-name {
  margin: 0 0 2px;
  color: #d61d1d;
  font-size: 1.2rem;
}
.kunst-technik {
  margin: 0 0 12px;
  font-size: .85rem;
  color: #666;
  font-style: italic;
}
.kunst-stage {
  text-align: center;
  background: #f5f0e8;
}
.kunst-img {
  max-width: 100%;
  max-height: 440px;
  height: auto;
  object-fit: contain;
}
.kunst-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 8px 0;
}
.kunst-counter { font-size: .9rem; color: #666; }
.kunst-desc { line-height: 1.6; margin: 12px 0; }
.kunst-actions { margin-top: 10px; }
.kunst-interesse-form {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #ddd;
}
.kunst-interesse-form label {
  display: block;
  margin-bottom: 10px;
  font-size: .9rem;
}
.kunst-interesse-form input,
.kunst-interesse-form textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
  border: 2px solid #023344;
  margin-top: 4px;
  font-family: inherit;
}
/* Vorschau im Upload-Formular */
.kunst-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.kunst-thumb {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border: 1px solid #ccc;
}

/* ── Kunst-Kiste: eigene breite Reihe mit warmem Akzent ───────── */
.start-tile.tile-kunst {
  max-width: 900px;
  margin: 0 auto 22px;
  background: #fff;
  border: 2px solid #c2410c;       /* warmer Akzent (Terrakotta) */
  align-items: center;
  text-align: center;
}
.start-tile.tile-kunst .tile-title {
  color: #c2410c;
  font-size: 1.3rem;
}
.start-tile.tile-kunst:hover {
  background: #c2410c;
  border-color: #c2410c;
}
.start-tile.tile-kunst:hover .tile-title,
.start-tile.tile-kunst:hover .tile-desc {
  color: #fff;
}

/* ════════════════════════════════════════════════════════════════
   KUNST-KISTE v2 – Vorschau-Raster, Lightbox, Verwaltung
   ════════════════════════════════════════════════════════════════ */
/* Vorschau-Thumbnails in der Übersicht */
.kunst-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 12px 0;
}
.kunst-thumb-fig {
  margin: 0;
  width: 150px;
}
.kunst-thumb-img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border: 2px solid #023344;
  cursor: pointer;
  transition: transform .12s;
  display: block;
}
.kunst-thumb-img:hover { transform: scale(1.03); }
.kunst-thumb-fig figcaption {
  font-size: .8rem;
  color: #555;
  margin-top: 4px;
  line-height: 1.3;
}

/* Lightbox */
.kunst-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.kunst-lightbox[hidden] { display: none; }
.kunst-lightbox-inner {
  margin: 0;
  max-width: 92vw;
  max-height: 92vh;
  text-align: center;
}
.kunst-lightbox-inner img {
  max-width: 92vw;
  max-height: 82vh;
  object-fit: contain;
  border: 3px solid #fff;
}
.kunst-lightbox-inner figcaption {
  color: #fff;
  margin-top: 10px;
  font-size: 1rem;
}
.kunst-lightbox-close {
  position: absolute;
  top: 16px;
  right: 22px;
  background: none;
  border: none;
  color: #fff;
  font-size: 2.4rem;
  line-height: 1;
  cursor: pointer;
}

/* Verwaltungsseite */
.kunst-manage-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.kunst-manage-item {
  width: 200px;
  border: 1px solid #ccc;
  padding: 8px;
  background: #fafafa;
}
.kunst-manage-item img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border: 1px solid #ddd;
}
.kunst-titel-form {
  display: flex;
  gap: 4px;
  margin: 6px 0;
}
.kunst-titel-form input {
  flex: 1;
  min-width: 0;
  padding: 5px;
  border: 1px solid #023344;
  font-family: inherit;
  font-size: .85rem;
}
.btn-small { padding: 5px 8px; font-size: .8rem; }
.btn-danger { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.btn-danger:hover { background: #991b1b; }
/* ════════════════════════════════════════════════════════════════
   BUTTONS EINHEITLICH – Teal Standard, Rot für Löschen
   Fängt auch nackte <button> ohne .btn-Klasse ab (sonst browser-blau)
   ════════════════════════════════════════════════════════════════ */
button,
input[type="submit"],
.btn {
  background: #023344;
  color: #fff;
  border: 2px solid #023344;
  padding: 9px 18px;
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  line-height: 1.3;
  transition: background .15s, border-color .15s;
}
button:hover,
input[type="submit"]:hover,
.btn:hover {
  background: #034d63;
  border-color: #034d63;
  color: #fff;
}

/* Sekundär: Abbrechen / Zurück – weiss mit teal Rahmen */
.btn--ghost {
  background: #fff !important;
  color: #023344 !important;
  border: 2px solid #023344 !important;
}
.btn--ghost:hover {
  background: #023344 !important;
  color: #fff !important;
}

/* Löschen / Gefahr – rot */
.btn-danger,
.btn--danger,
button.btn-danger {
  background: #b91c1c !important;
  border-color: #b91c1c !important;
  color: #fff !important;
}
.btn-danger:hover,
.btn--danger:hover,
button.btn-danger:hover {
  background: #991b1b !important;
  border-color: #991b1b !important;
}

/* Kleine Buttons (in der Bildverwaltung) */
.btn-small {
  padding: 6px 12px;
  font-size: .85rem;
}

/* Ausnahmen: bestimmte UI-Buttons NICHT überschreiben
   (Chat-Link-Buttons, Sprach-Buttons bleiben wie sie sind) */
.link-btn,
.chat-report {
  background: none !important;
  border: none !important;
  padding: 2px 4px !important;
}
.link-btn {
  color: #023344 !important;
  text-decoration: underline !important;
  font-size: .9rem !important;
}
.link-btn:hover { color: #c00 !important; }
.chat-report { color: #bbb !important; }
.chat-report:hover { color: #c00 !important; }
.lang-btn {
  border: 1px solid #ccc !important;
  padding: 2px 8px !important;
  background: #fff !important;
  color: #023344 !important;
}
.lang-btn.active {
  background: #023344 !important;
  color: #fff !important;
  border-color: #023344 !important;
}

/* ── Anbieter-Kontaktformular bei Beiträgen (offen für alle) ──── */
.anbieter-form {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #ddd;
}
.anbieter-form label {
  display: block;
  margin-bottom: 10px;
  font-size: .9rem;
}
.anbieter-form input,
.anbieter-form textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
  border: 2px solid #023344;
  margin-top: 4px;
  font-family: inherit;
}

/* ════════════════════════════════════════════════════════════════
   GESAMT-ERSCHEINUNGSBILD – Schrift grösser, Farbe tiefblau-schwarz
   Wird nach styles.css geladen, übersteuert daher die Grundwerte.
   ════════════════════════════════════════════════════════════════ */
/* Grundschrift etwas grösser + Textfarbe tiefblau-schwarz */
body {
  font-size: 17px;
  color: #0a1a2f;
}
/* Fliesstext, Listen, Absätze in der tiefblau-schwarzen Farbe */
main, main p, main li, .container, .beitrag-box, .kunst-eintrag,
.beri-prose, .beri-prose p, .impressum-prose, .notice {
  color: #0a1a2f;
}
/* Meta-Zeilen (Datum/Name) waren grau – jetzt dezent dunkler, nicht mehr blass */
.meta, .kunst-technik, .search-count, .thumb-fig figcaption,
.kunst-thumb-fig figcaption {
  color: #44566b !important;
}

/* Startseiten-Kacheln: Schrift nochmals grösser */
.start-tile .tile-title {
  font-size: 1.3rem;
}
.start-tile .tile-desc {
  font-size: 1rem;
  opacity: 1;            /* war .85 – jetzt voll deckend, besser lesbar */
}
/* Auf dem Handy noch etwas grösser (überschreibt frühere Regel) */
@media (max-width: 600px) {
  .start-tile .tile-title { font-size: 1.5rem !important; }
  .start-tile .tile-desc  { font-size: 1.12rem !important; }
  .start-tile.tile-kunst .tile-title { font-size: 1.6rem !important; }
}

/* Beitrags-Kacheln: Titel und Text etwas grösser */
.beitrag-box h3 { font-size: 1.2rem; }
.beitrag-box p  { font-size: 1.02rem; line-height: 1.55; }

/* ═════════════════════════════════════════════════════════════════
   WETTER-WIDGET & WETTER-SEITE STYLES (NUR DIESE AM ENDE HINZUGEFÜGT)
   ═════════════════════════════════════════════════════════════════ */

/* Kleines, schmales Wetter-Widget mittig unter dem Titel */
.weather-mini {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto 18px;
  padding: 5px 14px;
  background: #023344;
  border-radius: 999px;
  text-decoration: none;
  color: #fff;
  transition: background .15s;
}
/* damit es mittig steht, Wrapper-Zeile zentrieren */
main.container > .weather-mini { display: inline-flex; }
.weather-mini-wrap { text-align: center; }
.weather-mini:hover { background: #034d63; }
.weather-mini-icon { font-size: 1.4rem; line-height: 1; }
.weather-mini-temp { font-size: 1rem; font-weight: 500; letter-spacing: .01em; }
.weather-mini-label { font-size: .82rem; opacity: .85; letter-spacing: .02em; }
.weather-mini-arrow { font-size: 1rem; opacity: .7; transition: transform .15s; }
.weather-mini:hover .weather-mini-arrow { transform: translateX(3px); opacity: 1; }
/* Auf sehr schmalen Handys das Label ausblenden, damit es kompakt bleibt */
@media (max-width: 400px) {
  .weather-mini-label { display: none; }
}

.weather-widget {
  margin: 1rem 0 1.6rem 0;
}

.weather-widget-title {
  color: #023344;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  text-align: center;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0.8;
}

.weather-widget-link {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  background: linear-gradient(135deg, #023344 0%, #0a1a2f 100%);
  border: none;
  border-radius: 6px;
  padding: 0.7rem 1.2rem;
  text-decoration: none;
  color: white;
  transition: all 0.3s;
  box-shadow: 0 2px 8px rgba(2, 51, 68, 0.12);
}

.weather-widget-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(2, 51, 68, 0.2);
}

.weather-icon {
  font-size: 3.6rem;
  min-width: 64px;
  text-align: center;
  line-height: 1;
}

.weather-data {
  flex: 1;
}

.weather-temp {
  font-size: 1.3rem;
  font-weight: 400;
  color: white;
  letter-spacing: -0.3px;
}

.weather-desc {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.75);
  margin-top: 0.2rem;
  font-weight: 400;
}

.weather-arrow {
  font-size: 1.4rem;
  color: rgba(255,255,255,0.6);
  min-width: 20px;
  text-align: right;
  transition: transform 0.2s;
}

.weather-widget-link:hover .weather-arrow {
  transform: translateX(3px);
  color: white;
}

.weather-hero {
  background: linear-gradient(135deg, #023344 0%, #0a1a2f 100%);
  color: white;
  padding: 3rem 2rem;
  border-radius: 8px;
  margin-bottom: 2rem;
  text-align: center;
}

.weather-hero h1 {
  margin: 0 0 1rem 0;
  font-size: 2.5rem;
  font-weight: 300;
}

.weather-icon-large {
  font-size: 5rem;
  margin: 1rem 0;
}

.weather-temp-large {
  font-size: 3.5rem;
  font-weight: 300;
  margin: 0.5rem 0;
}

.weather-desc-large {
  font-size: 1.3rem;
  margin: 0.5rem 0;
  opacity: 0.9;
}

.weather-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.weather-detail-box {
  background: rgba(255,255,255,0.1);
  padding: 1rem;
  border-radius: 6px;
  text-align: center;
}

.detail-label {
  font-size: 0.9rem;
  opacity: 0.8;
  margin-bottom: 0.5rem;
}

.detail-value {
  font-size: 1.5rem;
  font-weight: 500;
}

.weather-section {
  margin: 3rem 0;
}

.weather-section h2 {
  color: #023344;
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
  border-bottom: 2px solid #023344;
  padding-bottom: 0.5rem;
}

.forecast-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.forecast-card {
  background: #f5f7f9;
  border: 1px solid #e0e4e8;
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
}

.forecast-day {
  font-weight: 600;
  color: #023344;
  margin-bottom: 0.5rem;
}

.forecast-icon {
  font-size: 2.5rem;
  margin: 0.5rem 0;
}

.forecast-desc {
  font-size: 0.9rem;
  color: #0a1a2f;
  margin: 0.5rem 0;
}

.forecast-temps {
  margin-top: 1rem;
  border-top: 1px solid #d0d4d8;
  padding-top: 1rem;
}

.temp-max {
  color: #d9534f;
  font-weight: 500;
}

.temp-min {
  color: #5bc0de;
  font-weight: 500;
}

.chart-container {
  background: #f5f7f9;
  border-radius: 8px;
  padding: 2rem;
  margin-bottom: 2rem;
}

.simple-chart {
  display: flex;
  align-items: flex-end;
  gap: 0.3rem;
  height: 200px;
  justify-content: space-around;
}

.chart-bar {
  flex: 1;
  background: #023344;
  border-radius: 3px 3px 0 0;
  opacity: 0.7;
  min-width: 4px;
  position: relative;
}

.chart-bar:hover {
  opacity: 1;
}

.chart-label {
  font-size: 0.75rem;
  color: #0a1a2f;
  margin-top: 0.3rem;
  text-align: center;
}

.weathercloud-link {
  display: inline-block;
  margin-top: 2rem;
  padding: 1rem 2rem;
  background: #023344;
  color: white;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 500;
  transition: opacity 0.2s;
}

.weathercloud-link:hover {
  opacity: 0.85;
}

.error-message {
  background: #fff3cd;
  border: 1px solid #ffc107;
  color: #856404;
  padding: 1rem;
  border-radius: 6px;
  margin: 1rem 0;
}