/* 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: #e6f47a;            /* 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: .8rem;
  min-height: 120px;                 /* genug Höhe, damit die Navi unten Platz hat */
}

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

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

/* NAV: mittig, EINE ZEILE, am unteren Rand des Headers */
.main-nav{
  position: absolute;
  left: 50%;
  bottom: 12px;                      /* 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; }

/* Mobile: Wenn's zu eng wird, Navi unter das Logo und darf umbrechen */
@media (max-width: 900px){
  .header-container{ padding-bottom: 1rem; min-height: unset; }
  .brand-title{ font-size: 1.6rem; }
  .brand-subtitle{ font-size: .98rem; }
  .logo{ width: 80px; height: 80px; padding: 6px; }
  .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); }