/* meldungen.css */
/* =========================================================
   Meldungen – clean & konsistent (eckig, ruhig, verständlich)
   Stand: 2026-01
   - Fix: Button-Hover wird NICHT weiß (stark spezifisch + !important)
   - Pfeil rotiert sauber bei jedem Öffnen/Schließen (CSS-Rotation)
   - Inter als Font
   - Weniger Abstand: Icon↔Datum/Uhrzeit/Kategorie
   - X im Suchfeld (Overlay, „drin“), nur sichtbar wenn Text vorhanden
   - Shell-Kompatibel: mit menü.css ohne UI-Brüche
   ========================================================= */

:root{
  --green:#388e3c;
  --green-soft:#e8f5e9;

  --grey-bg:#f6f7f9;
  --grey-1:#eef1f5;
  --grey-2:#dde3ea;
  --grey-mid:#e0e0e0;
  --grey-dark:#60636a;

  --text:#2b2f33;
  --card-bg:#ffffff;
  --card-border:#d4dbe4;

  --chip-bg:#f3f6fa;
  --chip-border:#dbe3ec;

  --transition-fast:.2s;
  --transition-slow:.3s;

  --radius:0px; /* bewusst eckig */
}

*,
*::before,
*::after{ box-sizing:border-box; }

html{ font-size:clamp(.95rem,.88rem + .28vw,1.06rem); }

body{
  margin:0;
  font-family:'Inter', system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  color:var(--text);
  background:var(--grey-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Links */
a{ color:var(--green); text-decoration:underline; }
a:focus-visible{ outline:2px solid var(--green); outline-offset:2px; }

.material-icons{ vertical-align:middle; line-height:1; }
[hidden]{ display:none !important; }

/* Skip-Link */
.skip-link{
  position:absolute;
  left:-999px;
  top:8px;
  background:#fff;
  border:1px solid var(--card-border);
  padding:.5rem .75rem;
  z-index:9999;
  color:var(--text);
}
.skip-link:focus{ left:8px; }

/* Screenreader only */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* =========================================================
   Loader
   ========================================================= */
#loader{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:1rem;
  background:#fff;
}

.spinner,
.spinner-small{
  border-radius:50%;
  border:.5rem solid var(--grey-mid);
  border-top:.5rem solid var(--green);
  animation:spin 1.5s linear infinite;
}

.spinner{ width:3.5rem; height:3.5rem; }
.spinner-small{ width:1.2rem; height:1.2rem; border-width:.35rem; }

@keyframes spin{ to{ transform:rotate(360deg); } }

/* Main Container */
.main{ display:block; }

/* =========================================================
   Container / Header
   ========================================================= */
#meldungContainer{
  max-width:52rem;
  margin:4rem auto 1.5rem;
  padding:1.25rem 1.25rem 1rem;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--radius);
}

.page-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}

h1{
  margin:.1rem 0 .35rem;
  font-size:1.7rem;
  font-weight:700;
  letter-spacing:.2px;
}

.last-update{
  margin:0;
  font-size:.9em;
  color:var(--grey-dark);
  text-align:right;
}

.intro{
  margin:.25rem 0 1rem;
  color:var(--grey-dark);
  text-align:center;
  line-height:1.45;
}

/* =========================================================
   Abo-Bereich
   ========================================================= */
.abo-section{ margin:0 0 1rem; }

.abo-card{
  border:1px solid var(--card-border);
  background:#fff;
  border-radius:var(--radius);
  padding:1rem 1rem;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
}

.abo-head{
  display:flex;
  gap:.75rem;
  align-items:flex-start;
}

.abo-head .material-icons{
  font-size:1.8rem;
  color:var(--green);
  margin-top:.05rem;
}

.abo-text h2{
  margin:0 0 .15rem;
  font-size:1.1rem;
  font-weight:700;
  letter-spacing:.1px;
}

.abo-text p{
  margin:0;
  color:var(--grey-dark);
  line-height:1.35;
}

.abo-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex:0 0 auto;
}

/* Abo größer */
.abo-btn{
  padding:.72rem 1.15rem !important;
  font-size:1.02rem !important;
  font-weight:700 !important;
}

/* =========================================================
   Controls / Filter
   ========================================================= */
.controls{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-bottom:.75rem;
  align-items:stretch;
}

.controls input,
.controls select{
  width:100%;
  padding:.6rem .7rem;
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  background:#fff;
  color:var(--text);
  appearance:none;
  min-height:2.5rem;
}

.controls input:hover,
.controls select:hover{
  border-color:var(--grey-2);
  background:var(--grey-1);
}

.controls input:focus-visible,
.controls select:focus-visible{
  outline:2px solid var(--green);
  outline-offset:2px;
  border-color:var(--green);
}

/* Select: eigener Pfeil */
.controls select{
  padding-right:2.2rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2360636a' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .7rem center;
  background-size:1.1rem;
}
.controls select::-ms-expand{ display:none; }

/* Suche mit X im Feld */
.search-wrap{
  position:relative;
  flex:1 1 14rem;
  min-width:0;
}

.search-wrap input{
  width:100%;
  padding-right:2.55rem; /* Platz für X */
}

/* native Search-X ausblenden, damit es nicht doppelt ist */
#searchInput::-webkit-search-cancel-button{ -webkit-appearance:none; }

.search-clear{
  position:absolute;
  right:.35rem;
  top:50%;
  transform:translateY(-50%);
  width:2.05rem;
  height:2.05rem;
  border:1px solid transparent;
  background:transparent;
  color:var(--grey-dark);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius);
}

.search-clear .material-icons{ font-size:1.2rem; }

.search-clear:hover{
  background:var(--grey-1);
  border-color:var(--grey-2);
}
.search-clear:active{ background:var(--grey-2); }
.search-clear:focus-visible{
  outline:2px solid var(--green);
  outline-offset:2px;
}

#searchInput{ flex:1 1 14rem; min-width:0; }
#dateFilter, #categoryFilter{ flex:0 0 12rem; }

/* =========================================================
   Ergebnis + Buttons
   ========================================================= */
.result-controls{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.6rem 1rem;
  margin-bottom:1rem;
}

.result-count{ font-weight:700; margin:0; }

.result-actions{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
}

/* Buttons (sehr robust gegen Fremd-CSS) */
#meldungContainer .btn{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.55rem 1rem;
  border:1px solid transparent;
  cursor:pointer;
  border-radius:var(--radius);
  user-select:none;
  background:#fff;
  color:var(--text);
  text-decoration:none;
  filter:none !important;
  box-shadow:none;
}

#meldungContainer a.btn{ text-decoration:none !important; }

#meldungContainer .btn .material-icons{ font-size:1.1rem; }

/* Default hover (secondary look) */
#meldungContainer .btn:hover{
  background:var(--grey-1) !important;
  border-color:var(--card-border) !important;
  color:var(--text) !important;
  filter:none !important;
}

/* Primary */
#meldungContainer .btn.primary{
  background:var(--green) !important;
  color:#fff !important;
}
#meldungContainer .btn.primary:hover{
  background:#2f7d33 !important;
  border-color:#2f7d33 !important;
  color:#fff !important;
}
#meldungContainer .btn.primary:active{
  background:#276d2b !important;
  border-color:#276d2b !important;
  color:#fff !important;
}

/* Danger */
#meldungContainer .btn.danger{
  background:#e53935 !important;
  color:#fff !important;
}
#meldungContainer .btn.danger:hover{
  background:#d32f2f !important;
  border-color:#d32f2f !important;
  color:#fff !important;
}
#meldungContainer .btn.danger:active{
  background:#c62828 !important;
  border-color:#c62828 !important;
  color:#fff !important;
}

#meldungContainer .btn:disabled{ opacity:.7; cursor:not-allowed; }

#meldungContainer .btn:focus-visible{
  outline:2px solid var(--green);
  outline-offset:2px;
}

/* Zustände */
.error-msg{ color:#b00020; margin:.25rem 0 1rem; font-size:.95em; }

.loading{
  text-align:center;
  color:var(--grey-dark);
  padding:1rem 0;
}

.no-msg{
  text-align:center;
  color:var(--grey-dark);
  padding:2rem;
  background:#fff;
  border:1px solid var(--card-border);
  border-radius:var(--radius);
}
.no-msg .material-icons{
  font-size:3rem;
  color:var(--green);
  margin-bottom:.5rem;
}
.no-msg-small{ margin-top:.5rem; font-size:.95em; color:var(--grey-dark); }

/* =========================================================
   Karten / Liste
   ========================================================= */
.meldungen-grid{ display:flex; flex-direction:column; gap:1rem; }

.card{
  border:1px solid var(--card-border);
  background:#fff;
  border-radius:var(--radius);
  overflow:hidden;
  transition:box-shadow var(--transition-fast), background var(--transition-fast);
}

.card:hover{
  background:#fcfcfd;
  box-shadow:0 1px 0 0 rgba(10,16,30,.06);
}

/* Header */
.card-header{
  display:flex;
  align-items:center;
  gap:.9rem;
  padding:1rem 1rem;
  cursor:pointer;
  border-bottom:1px solid var(--card-border);
}

.card-header:focus-visible{
  outline:2px solid var(--green);
  outline-offset:2px;
}

/* Pfeil rotiert bei jedem Toggle */
.card-toggle{
  font-size:1.45rem;
  color:#8f9bb3;
  transition:transform var(--transition-fast);
  transform:rotate(0deg);
}
.card.open .card-toggle{ transform:rotate(180deg); }

.card-info{
  flex:1;
  min-width:0;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.75rem;
}

.title{
  font-size:1.02rem;
  font-weight:700;
  line-height:1.3;
  word-break:break-word;
  white-space:normal;
}

.badge-new{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.15rem .45rem;
  border:1px solid var(--chip-border);
  background:var(--chip-bg);
  color:var(--text);
  font-size:.82rem;
  font-weight:700;
  border-radius:var(--radius);
  white-space:nowrap;
}

/* Meta (Chips) */
.meta-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:.75rem;
  align-items:start;
  padding:.6rem 1rem;
  background:var(--chip-bg);
  border-bottom:1px solid var(--card-border);
}

.validity-box,
.category-box{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.35rem .5rem;          /* weniger Abstand */
  padding:.45rem .6rem;
  background:#fff;
  border:1px solid var(--chip-border);
  border-radius:var(--radius);
}

.category-box{ justify-self:end; }

.validity-box .material-icons,
.category-box .material-icons{
  font-size:1.08rem;
  color:var(--green);
  margin-right:.05rem;       /* minimal enger */
}

.validity-box .date{ margin-right:.18rem; white-space:nowrap; }
.validity-box .time{ margin-right:.08rem; white-space:nowrap; }

.meta-row .arrow{
  margin:0 .18rem;
  color:#8f9bb3;
  display:inline-flex;
  align-items:center;
}

/* Content */
.card-content{
  max-height:0;
  overflow:hidden;
  transition:max-height var(--transition-slow) ease;
}
.card.open .card-content{ max-height:60rem; }

.card-content-inner{
  padding:1rem;
  line-height:1.55;
  color:var(--text);
}

.detail-text{ margin:.1rem 0 .9rem; word-wrap:break-word; }
.detail-text p{ margin:.45rem 0; }
.detail-text a{ color:var(--green); }

.detail-flex{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem .6rem;
  color:var(--grey-dark);
  font-size:.95em;
  margin:.35rem 0;
}

.detail-flex i{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.5rem;
  height:1.5rem;
  border-radius:50%;
  background:var(--green-soft);
  color:var(--green);
  font-size:1.15rem;
}

.detail-flex strong{ color:var(--text); font-weight:700; }

/* =========================================================
   Responsive
   ========================================================= */
@media (min-width:48rem){
  #meldungContainer{ padding:1.25rem 1.5rem 1.2rem; }
  .card:hover{
    box-shadow:0 1px 0 0 rgba(10,16,30,.06),
               0 2px 6px rgba(10,16,30,.06);
  }
}

@media (min-width:37.5rem){
  .controls input, .controls select{ width:auto; }
  .search-wrap{ width:auto; }
  #dateFilter, #categoryFilter{ width:11rem; }
}

@media (max-width:30rem){
  #meldungContainer{ margin:3.2rem .5rem 1rem; padding:1rem; }
  .page-header{ align-items:flex-start; }
  .meta-row{ grid-template-columns:1fr; }
  .category-box{ justify-self:start; }
  .card-header{ flex-direction:column; align-items:flex-start; gap:.5rem; }
  .card-info{ width:100%; }

  .abo-card{
    flex-direction:column;
    align-items:stretch;
  }
  .abo-actions{ justify-content:flex-start; }
  .abo-btn{ width:100%; justify-content:center; }
}

/* =========================================================
   Reduced Motion
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}