/* main.css – globale Layouts, Header, Buttons, Kacheln */

/* Container (Alias, damit dein .public-container weiter funktioniert) */
.container, .public-container{
  max-width:var(--container); margin:0 auto; padding:0 var(--space-4);
}

/* Header im Projektdeich-Stil */
header{
  background: var(--brand);
  border-bottom: 4px solid var(--brand-dark);
  position: sticky;
  top: 0;
  z-index: 2000;
  color: #fff;
}

/* Brandblock */
.brand{
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-text{ line-height: 1.05; }

.brand-title{
  color: #fff;
  font-weight: 800;
  font-size: 2rem;           /* groß, prägnant */
  letter-spacing: .2px;
  margin: 0;
}

.brand-subtitle{
  color: #deff00;            /* helles Gelbgrün wie im Bild */
  font-weight: 600;
  font-size: 1.05rem;
  margin-top: 4px;
}



/* Container: Logo links; Navi wird absolut am unteren Rand zentriert */
.header-container{
  max-width: var(--container);
  margin: 0 auto;
  padding: .9rem 1rem;
  position: relative;               /* nötig für absolute Position der Navi */
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 120px;                 /* genug Höhe, damit die Navi unten Platz hat */
  --brand-guard: 400px;              /* linker Sicherheitsabstand (Logo, + Text) */
}

/* Logo größer, leicht abgerundet (wie Vorlage) */
.logo{
  width: 100px;
  height: 100px;
  border-radius: 14px;
  object-fit: contain;
  background: #fff;
  padding: 2px;
  box-shadow: var(--shadow-1);
}

.brand, .logo { flex-shrink: 0; }

/* NAV: mittig, EINE ZEILE, am unteren Rand des Headers */
.main-nav{
  position: absolute;
  left: max(var(--brand-guard), 50%);/* nie weiter links als die Schutz-Zone */
  bottom:1px;                      /* sitzt am unteren Rand */
  transform: translateX(-50%);
  display: flex;
  flex-wrap: nowrap;                /* eine Zeile */
  gap: .5rem;
  white-space: nowrap;              /* bricht nicht um */
}

.main-nav a{
  color: #fff;
  text-decoration: none;
  padding: .5rem .8rem;
  border-radius: 10px;
}
.main-nav a:hover{ background: rgba(255,255,255,.12); }
.main-nav a.disabled{ opacity: .45; pointer-events: none; }


/* Buttons für Login/Logout */
.main-nav .btn-logout,
.main-nav .btn-login {
  display: inline-block;
  padding: .5rem .8rem;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 600;
  line-height: 1;
}

/* dezente Farben – gern an dein CD anpassen */
.main-nav .btn-logout {
  background: #cc0000;  /* Johanniter-Rot */
  color: #fff;
}
.main-nav .btn-logout:hover { filter: brightness(0.95); }

.main-nav .btn-login {
  background: --bg-blue;  /* gedecktes Blau */
  color: #fff;
}
.main-nav .btn-login:hover { filter: brightness(0.95); }




/* Mobile: Wenn's zu eng wird, Navi unter das Logo und darf umbrechen */
@media (max-width: 1200px){
  .header-container{ padding-bottom: 1rem; min-height: unset; }
  .brand-title{ font-size: 2rem; }
  .brand-subtitle{ font-size: 1.05rem; }
  .logo{ width: 100px; height: 100px; padding: 2px; }
  .main-nav{
    position: static;
    transform: none;
    bottom: auto;
    justify-content: center;
    flex-wrap: wrap;                /* darf umbrechen */
    white-space: normal;
    width: 100%;
    margin-top: .4rem;
  }
}

/* Footer schlicht, immer auf dem Seitenhintergrund */
.site-footer{ border-top: 1px solid var(--gray-200); background: var(--page-bg); }
.site-footer .footer-inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 1rem;
  color: var(--gray-600);
  font-size: .95rem;
  text-align: left;                 /* wie auf deiner Vorlage linksbündig */
}



/* nur auf großen Screens bis Seitenrand ziehen */
@media (min-width: 1200px){
.brand{
    position: relative;
    left: calc( (100vw - var(--container)) / -2 - var(--space-4) + 12px);
    /*   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
         zieht den Brand links bis an den Viewportrand
         und nimmt das 1rem Container-Padding (var(--space-4)) mit raus */
  }
  .logo{ margin-left: 0 !important; } /* falls noch ein alter Margin greift */
}

/* auf kleineren Screens wieder „normal“ */
@media (max-width: 1199.98px){
  .logo{ margin-left: 0; }
}


/* Buttons – Basistypen + Mappings auf deine bestehenden Klassen */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.55rem .9rem; border-radius:var(--radius-sm);
  border:1px solid var(--gray-300); background:var(--white); color:var(--gray-800);
  text-decoration:none; box-shadow:var(--shadow-1);
}
.btn:hover{ background:var(--gray-100); }
.btn-primary{ border-color:var(--blue-900); background:var(--blue-900); color:#fff; }
.btn-ghost{ border-color:transparent; background:transparent; box-shadow:none; color:var(--blue-900); }
.btn-ghost:hover{ background:var(--bg-blue); }

/* Kompatibilität: .btn-schnell / .btn-blass / .btn-blau beibehalten */
.btn-schnell{ border:1px solid var(--blue-900); background:var(--blue-900); color:#fff; border-radius:var(--radius-sm); padding:.55rem .9rem; }
.btn-schnell.small{ padding:.35rem .6rem; font-size:.9rem; }
.btn-blass{ border:1px solid var(--gray-300); background:#fff; color:var(--gray-800); border-radius:var(--radius-sm); padding:.55rem .9rem; }
.alarm-btn.btn-blau{ border:1px solid var(--blue-900); background:var(--blue-900); color:#fff; }

/* sanfte Übergänge für alle Buttons */
.btn, .btn-schnell, .btn-blass, .alarm-btn,
.btn-xl, .btn-accent, .btn-doku-zeit {
  transition: background-color .15s ease, color .15s ease,
              box-shadow .15s ease, transform .06s ease;
}

/* Basis-Button */
.btn:hover,
.btn-xl:hover{
  background: var(--gray-100);
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}

/* Primär (dunkelblau) – z.B. .btn-schnell */
.btn-schnell:hover,
.alarm-btn.btn-blau:hover{
  background: #003b5c;            /* etwas dunkler */
  border-color: #003b5c;
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}

/* Neutrale Buttons hell */
.btn-blass:hover{
  background: var(--bg-blue);
  color: var(--blue-900);
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}

/* Startseiten-Akzent (blaugrün) bleibt weißer Text */
.btn-accent:hover{
  background: var(--brand-dark);
  color:#fff;
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}




/* Kacheln (framed) – Farben wie in ac.css */
.framed{ border:1px solid var(--gray-400); border-radius:var(--radius-md); padding:1.2rem; margin-bottom:1.5rem; background:#fff; box-shadow:var(--shadow-1); }
.framed-blue{   border-left:6px solid var(--blue-900);   background:var(--bg-blue); }
.framed-yellow{ border-left:6px solid var(--yellow-500); background:var(--bg-yellow); }
.framed-red{    border-left:6px solid var(--red-700);    background:var(--bg-red); }
.framed-green{  border-left:6px solid var(--green-700);  background:var(--bg-green); }

/* Form-Elemente (generisch, stören deine spezial-Styles nicht) */
input[type="text"], textarea, select,
input[type="date"], input[type="time"], input[type="datetime-local"]{
  margin-top:.3rem; margin-bottom:1rem; padding:.5rem .6rem;
  border:1px solid var(--gray-400); border-radius:var(--radius-sm); background:#fff; min-width:260px; max-width:800px;
}

/* Seiten-Layouts */
.notruf-layout{ display:grid; grid-template-columns:1.2fr .8fr .9fr; gap:var(--space-6); padding:var(--space-6) 0; }
@media (max-width:1000px){ .notruf-layout{ grid-template-columns:1fr; } }

/* Schnellauswahl – vorbereiteter Grid (wir aktivieren ihn in Schritt 3) */
.schnell-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(210px,1fr)); gap:var(--space-4); padding:var(--space-6) 0; }
.schnell-card{ padding:var(--space-4); border-radius:var(--radius-md); border:1px solid var(--gray-300); background:#fff; box-shadow:var(--shadow-1); text-decoration:none; color:inherit; }
.schnell-card:hover{ background:var(--gray-100); }


/* === JUHelp: Header- & Button-Styles =================================== */

/* Farben (falls du schon :root hast, gern nur ergänzen) */
:root{
  --ju-red: #cc0000;
  --ju-red-600: #b30000;
  --ju-blue: #0d47a1;
  --ju-blue-600: #0a3a85;
  --ju-text: #1b1f24;
  --ju-muted: #6b7280;
  --ju-border: #e5e7eb;
  --ju-bg: #ffffff;
  --ju-bg-soft: #f6f7fb;
}

/* Dark Mode dezent (optional, schadet nicht) */
@media (prefers-color-scheme: dark){
  :root{
    --ju-text: #e5e7eb;
    --ju-muted: #a1a1aa;
    --ju-border: #2b2f36;
    --ju-bg: #0f1216;
    --ju-bg-soft: #11151a;
  }
}

/* Haupt-Navigation als Flex-Zeile 
.main-nav{
  display:flex; align-items:center; gap:.8rem; flex-wrap:wrap;
}

/* disabled Links 
.main-nav .disabled{
  opacity:.5; pointer-events:none; cursor:not-allowed;
}

/* Spacer, um die Buttons nach rechts zu schieben 
.main-nav .nav-spacer{ flex:1 1 auto; }

/* Base-Button */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  padding:.52rem .9rem;
  border-radius:12px;
  font-weight:600; line-height:1; text-decoration:none;
  border:1px solid transparent;
  transition:transform .06s ease, filter .15s ease, box-shadow .15s ease;
  will-change:transform;
}
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(13,71,161,.25);
}

/* Varianten */
.btn--logout{ background:var(--ju-red); color:#fff; }
.btn--logout:hover{ filter:brightness(.95); }
.btn--logout:focus-visible{ box-shadow:0 0 0 3px rgba(204,0,0,.25); }

.btn--login{ background:var(--ju-blue); color:#fff; }
.btn--login:hover{ filter:brightness(.95); }

/* Kleine Badge/Chip-Optik (falls du später Infos neben Button zeigen willst) */
.badge{
  display:inline-block; padding:.25rem .5rem; border-radius:999px;
  background:var(--ju-bg-soft); color:var(--ju-muted); font-size:.85rem;
}

/* Login-Panel (auch für admin_login.html verwendet) 
.panel{
  background:var(--ju-bg);
  max-width:92%; width:420px;
  margin:1.2rem auto; padding:1.6rem 1.5rem;
  border:1px solid var(--ju-border);
  border-radius:14px;
  box-shadow:0 10px 26px rgba(0,0,0,.06);
}*/

/* Panel kompakter & leicht breiter */
.panel{
  background: var(--ju-bg);
  width: 420px;              /* etwas breiter als vorher */
  max-width: 92%;
  padding: 1.6rem 1.5rem;
  border-radius: 14px;
  border: 1px solid var(--ju-border);
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.panel h1{ font-size:1.25rem; margin:.2rem 0 1rem; color:var(--ju-text); }
.panel label{ display:block; margin:.6rem 0 .35rem; color:var(--ju-text); }
.panel input[type=password]{
  width:100%; padding:.68rem .7rem;
  border:1px solid var(--ju-border); border-radius:10px;
  background:var(--ju-bg);
  color:var(--ju-text);
}
.panel .muted{ font-size:.88rem; color:var(--ju-muted); margin-top:.6rem; }

/* Flash-Messages (Flask) */
.flash{ margin:.45rem 0; padding:.55rem .65rem; border-radius:10px; font-size:.95rem; }
.flash.error{ background:#ffe6e6; color:#7a0a0a; }
.flash.success{ background:#e9ffe6; color:#0a7a3a; }
.flash.info{ background:#e8f0ff; color:#0d47a1; }
.flash.warning{ background:#fff3cd; color:#7a5a00; }

/* Seite-Hintergrund zart 
.page-soft{
  background:var(--ju-bg-soft);
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  margin:0;
  padding:2rem 0;
}*/

/* Body-Hintergrund bleibt hell, aber nicht 100% Höhe */
.page-soft{
  background: var(--ju-bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  padding: 2rem 0;           /* etwas Luft oben/unten, nicht Vollhöhe */
}

/* Header Kleinkram: Logo klickbar ohne Unterstreichung */
.brand{ text-decoration:none; color:inherit; }



/* Abstand der unteren Zeilen */
.panel p.muted{
  margin-top: 1rem;
  margin-bottom: 0;
}

/* === Fix: Admin-Login-Panel nicht strecken ===================== */

/* Seite zentriert, aber die Höhe kommt NICHT aus dem Panel,
   sondern aus dem Body-Spacing */
.page-soft{
  background: var(--ju-bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;      /* Seite füllt die Höhe */
  padding: 6vh 0;         /* Luft oben/unten – Panel bleibt kompakt */
}

/* Panel auf Inhalts-Höhe zwingen (evtl. alte Regeln aushebeln) */
.panel{
  display: block !important;
  height: auto !important;
  min-height: unset !important;   /* ältere min-height überschreiben */
  max-height: none !important;
  margin-bottem: 800px;                      /* falls irgendwo extra Abstand gesetzt war */
}

/* letzter Absatz unten ohne Extra-Abstand */
.panel > *:last-child { margin-bottom: 0 !important; }

/* Optik: Input nicht schwarz umrandet */
.panel input[type="password"]{
  border: 1px solid var(--ju-border) !important;
  border-radius: 10px;
  outline: none;
}
.panel input[type="password"]:focus{
  border-color: var(--ju-blue);
  box-shadow: 0 0 0 3px rgba(13, 71, 161, .22);
}

/* Korrektur: falsche Variable in deinem Button (war: --bg-blue) */
.main-nav .btn-login { background: var(--blue-900); color: #fff; }
.main-nav .btn-login:hover { filter: brightness(.95); }