/* =========================================================
   WEITERMITWEITER UI SYSTEM (Light + Glasshouse + A11y)
   Datei: _css/ui_system.css
   Ziel: EIN CSS für alle Seiten (Legacy-kompatibel)
   ========================================================= */

/* ------------------------------
   1) Design Tokens (LIGHT default)
   ------------------------------ */
:root{
  /* Background / Text */
  --bg0: #f7f9ff;
  --bg1: #eff3ff;
  --bg2: #f5f7fb;

  --text: rgba(8,12,18,.92);
  --text2: rgba(8,12,18,.74);
  --text3: rgba(8,12,18,.62);

  /* Glass surfaces */
  --glass: rgba(255,255,255,.78);
  --glass-strong: rgba(255,255,255,.88);
  --stroke: rgba(10,20,30,.12);

  /* Brand */
  --brand: #1b8f88;     /* etwas dunkler als #69C1BB -> bessere Lesbarkeit */
  --brand2: #0f6f69;

  /* Feedback */
  --danger: #c5162e;
  --danger2: #a71227;
  --success: #127a2e;
  --warning: #9a5b00;

  /* Shadows / radius */
  --shadow: 0 18px 60px rgba(20,30,45,.14);
  --shadow-soft: 0 10px 28px rgba(20,30,45,.10);

  --r-lg: 18px;
  --r-md: 14px;
  --r-sm: 12px;
  --pill: 999px;

  /* Spacing system */
  --s-1: 6px;
  --s-2: 10px;
  --s-3: 14px  ;
  --s-4: 18px;
  --s-5: 24px;
  --s-6: 32px;

  /* Focus (A11y) */
  --focus: 0 0 0 4px rgba(27,143,136,.28);
}

/* Optional: Dark Mode – nur falls ihr später wollt */
@media (prefers-color-scheme: dark){
  :root{
    --bg0: #0b1220;
    --bg1: #0b1220;
    --bg2: #0b1220;

    --text: rgba(255,255,255,.92);
    --text2: rgba(255,255,255,.74);
    --text3: rgba(255,255,255,.62);

    --glass: rgba(255,255,255,.10);
    --glass-strong: rgba(255,255,255,.14);
    --stroke: rgba(255,255,255,.18);

    --shadow: 0 18px 60px rgba(0,0,0,.35);
    --shadow-soft: 0 10px 30px rgba(0,0,0,.22);

    --focus: 0 0 0 4px rgba(27,143,136,.34);
  }
}

/* ------------------------------
   2) Base + Accessibility
   ------------------------------ */
html, body { height:100%; }
body{
  margin:0;
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 18% 0%, rgba(105,193,187,.20), transparent 60%),
    radial-gradient(900px 700px at 92% 10%, rgba(140,120,255,.18), transparent 60%),
    linear-gradient(180deg, var(--bg0) 0%, var(--bg1) 45%, var(--bg2) 100%);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* A11y: sichtbarer Fokus nur wenn Tastatur (focus-visible) */
*:focus{ outline:none; }
:focus-visible{
  box-shadow: var(--focus);
}

/* Links: standardmäßig unterstreichen -> besser erkennbar */
a{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover{ opacity:.92; }

/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}

/* Typo: etwas größer + gute Zeilenhöhe */
h1,h2,h3,h4{ margin:0 0 10px 0; letter-spacing:-0.01em; }
h1{ font-size: clamp(22px, 2.3vw, 40px); line-height:1.15; }
h2{ font-size: clamp(16px, 1.6vw, 24px); line-height:1.2; }
h3{ font-size: 16px; line-height:1.25; }
p, span, div{ line-height:1.55; }

img{ border:0; }
img.responsive{ width:100%; height:auto; }
img.resp{ max-width:700px; height:auto; }

/* ------------------------------
   3) Legacy Layout Utilities (kompatibel)
   ------------------------------ */
.row{ display:flex; flex-wrap:wrap; flex-direction:row; color: var(--text2); padding:0; border:0; }
.column{ display:flex; flex-direction:column; flex-wrap:wrap; }
.ib{ display:inline-block; }
.l{ text-align:left; } .r{ text-align:right; } .c{ text-align:center; }
.b{ font-weight:700; } .n{ font-weight:400; } .i{ font-style:italic; } .u{ text-decoration:underline; }
.upper{ text-transform:uppercase; }

.m5{ margin:5px; } .m15{ margin:15px; }
.p5{ padding:5px; } .p10{ padding:10px; } .p15{ padding:15px; }
.p05{ padding:0 5px !important; } .p010{ padding:0 10px !important; }
.pt5{ padding:5px 0; }
.mt10{ margin-top:10px; } .mt20{ margin-top:20px; }
.ml15{ margin-left:15px; min-width:90% !important; }
.ml30{ margin-left:30px; } .ml40{ margin-left:40px; }

.w20{ width:20%; } .w30{ width:30%; } .w50{ width:50%; }
.w100{ width:100%; }
.mw50{ max-width:50%; }

@media (max-width:700px){
  .mw50{ max-width:100%; padding:5px; }
}

/* ------------------------------
   4) Glass surfaces / Cards
   ------------------------------ */
.ui-glass,
.infoblock,
.subnav-content,
.navbar{
  background: var(--glass);
  border: 1px solid var(--stroke);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
}

.ui-card,
.infoblock{
  padding: clamp(14px, 2vw, 20px);
}

/* Infoblock Legacy */
.infoblock{
  display:inline-block;
  margin:10px;
  min-width:180px;
  width: -webkit-fill-available;
  width: -moz-available;
}

/* Detail “Pills” */
.detailbox{
  background: rgba(255,255,255,.85);
  border: 1px solid var(--stroke);
  border-radius: var(--pill);
  padding: 7px 10px;
  font-weight: 700;
  display:inline-block;
  box-shadow: 0 8px 18px rgba(20,30,45,.08);
}

/* ------------------------------
   5) Inputs (NEU + Legacy mapping)
   ------------------------------ */
.ui-input,
.inputtext,
input, select, textarea{
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.90);
  color: var(--text);
  border-radius: var(--r-md);
  padding: 14px 14px;
  box-shadow:none;
  margin-left: 2px;
}

/* Legacy inputtext: pill */
.inputtext{ border-radius: var(--pill); }

/* bessere Breite für neue Inputs */
.ui-input{ width:90%; 
		   color: black;}

/* Focus */
.ui-input:focus, .inputtext:focus, input:focus, select:focus, textarea:focus{
  box-shadow: var(--focus);
  border-color: rgba(27,143,136,.55);
}

/* ------------------------------
   6) Buttons (NEU + Legacy mapping)
   ------------------------------ */
.ui-btn,
.btn,
.delbutton{
  appearance: none;
  -webkit-appearance:none;
  border-radius: var(--pill);
  padding: 12px 16px;
  font-weight: 700;
  letter-spacing: .01em;
  border: 1px solid rgba(10,20,30,.10);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  line-height:1;
  box-shadow: 0 12px 24px rgba(20,30,45,.12);
  transition: transform .16s ease, opacity .16s ease, box-shadow .16s ease;
  user-select:none;
  max-height: none;
  text-decoration:none; /* buttons sollten nicht unterstrichen sein */
}
.ui-btn:hover, .btn:hover, .delbutton:hover{ transform: translateY(-1px); }
.ui-btn:active, .btn:active, .delbutton:active{ transform: translateY(0) scale(.99); opacity:.96; }
.ui-btn[disabled], .btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none; }

/* Primary (NEU) */
.ui-btn--primary,
.btn{
  background: linear-gradient(180deg, rgba(27,143,136,.95), rgba(15,111,105,.92));
  color: rgba(255,255,255,.95);
  border-color: rgba(255,255,255,.22);
}

/* Ghost (NEU) */
.ui-btn--ghost{
  background: transparent;
  border-color: var(--stroke);
  color: var(--text);
  box-shadow:none;
}

/* Danger (Legacy delbutton + NEU) */
.ui-btn--danger,
.delbutton{
  background: linear-gradient(180deg, rgba(197,22,46,.95), rgba(167,18,39,.92));
  color: #fff;
  border-color: rgba(197,22,46,.35);
}

/* Sizes */
.ui-btn--lg{ padding: 14px 18px; font-size: 1.05rem; }
.ui-btn--sm{ padding: 10px 14px; font-size: .95rem; }

/* ------------------------------
   7) Navbar / Dropdown (Legacy)
   ------------------------------ */
.navbar{
  height:40px;
  position: -webkit-sticky;
  position: sticky;
  top:0;
  z-index:1020;
  max-width:1600px;
  margin:0 auto;
  font-size:120%;
  background: var(--glass-strong);
}
.bg-light{ background-color: transparent !important; }

.subnav{ float:left; margin:5px 5px  5px 10px; cursor:pointer; }
.subnav-content{
  display:none;
  position:absolute;
  z-index:1;
  min-width:200px;
  margin-top:10px;
  background: var(--glass-strong);
}
.subnav-content a{
  display:block;
  color: var(--text2);
  text-decoration:none;
  padding:10px 15px;
  text-align:left;
}
.subnav-content a:hover{ background-color: rgba(27,143,136,.10); }
.subnav-content hr{ border:0; border-top:1px solid rgba(10,20,30,.10); margin:0; }

.show{ display:block; }
.navicon{ float:right; display:none; opacity:.8; margin:0 5px 0 0; cursor:pointer; }
@media screen and (max-width:950px){
  .navbar .m{ display:none; }
  .navbar .navicon{ display:block; }
}

/* ------------------------------
   8) Tables (Legacy)
   ------------------------------ */
th, th a, .th, .th a{
  color: rgba(255,255,255,.96);
  background-color: rgba(10,20,30,.55);
  text-align:center;
  font-weight: 600;
}
th, td { padding:5px; }
table{ border-spacing:0; }
td{ color: var(--text2); vertical-align:middle; word-break:break-all; }
tr.bas, div.bas{ background-color: rgba(255,255,255,.65); color: var(--text2); }
tr.bas:hover, div.bas:hover,
tr.bas2:hover, div.bas2:hover{ background-color: rgba(27,143,136,.10); }

/* ------------------------------
   9) Searchbar (einheitlich, ohne Overlap)
   Nutzt: .searchbar, .search-group, .field, .search-actions
   ------------------------------ */
.searchbar{
  max-width: 980px;
  width:100%;
  margin:0 auto;
}

/* Wichtig: form NICHT umbrechen auf Desktop */
.searchbar form{
  display:flex;
  flex-wrap: nowrap;
  align-items:flex-end;
  gap: var(--s-3);
}

/* 2 Felder als Gruppe */
.search-group{
  display:flex;
  flex: 1 1 auto;
  min-width: 0;
  gap: var(--s-3);
  align-items:flex-end;
}

/* Felder dürfen schrumpfen, damit sie NICHT untereinander fallen */
.search-group .field{
  flex: 1 1 0;
  min-width: 0;
}

/* Label spacing einheitlich */
.search-group label{
  display:block;
  margin-bottom: 8px;
  color: var(--text2);
}

/* Such-Inputs als Pill */
.search-group input.ui-input,
.search-group input.inputtext,
.search-group input{
  border-radius: var(--pill);
}

/* Button: niemals überlappen */
.search-actions{
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Mobile: untereinander ist OK */
@media (max-width:750px){
  .searchbar form{ flex-wrap: wrap; }
  .search-group{ flex-direction: column; }
}

/* ------------------------------
   10) Modal (einheitlich)
   ------------------------------ */
.modal{
  display:none;
  position: fixed;
  z-index: 9;
  inset: 0;
  background-color: rgba(0,0,0,0.35);
}
body.has-modal{ overflow:hidden; }
body.has-modal .modal{ display:block; }

#logindiv{ display:none; }
body.has-modal #logindiv{
  display:flex;
  position:absolute;
  z-index:10;
  top:70px;
  left:50%;
  transform: translate(-50%, 0%);
}

/* ------------------------------
   11) Messages / Errors (Legacy)
   ------------------------------ */
.oschibka{
  color: var(--danger);
  background-color: transparent;
  font-weight: 800;
  width:auto;
  text-align:center;
  margin:10px 0;
  position:absolute;
}
.oschibka div{
  background: rgba(255,255,255,.85);
  border: 1px solid var(--stroke);
  width:max-content;
  padding:8px 12px;
  margin:0 auto;
  border-radius: var(--r-md);
}
@keyframes fadeOut {from {opacity:1;} to {opacity:0;} }
.oschibka{ animation: fadeOut 2s forwards; animation-delay: 10s; }

.err-row{ color: #fff; background-color: transparent; height: 250px; }

/* Footer */
#footer{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  flex-direction:row;
  text-align:center;
  height:40px;
  width:100%;
}
#footer div, #footer a{ padding:5px; color: var(--text2); display:inline-block; }
#footer a:hover{ color: var(--text); }