/* =========================================================
   fyZIO mdash – Soft iOS Glass / Pastel CI (Petrol + Yellow)
   - weniger hartes Schwarz, weichere Typo
   - iOS/Apple-like frosted glass, glossy highlights
   - pastellige Flächen, sanfte Hover-Effekte
   - CI: Petrol #0E494D, Gelb #FFB500 als klare Akzente
   ========================================================= */

/* ---------- TOKENS (NUR 1x :root!) ---------- */
:root{
  /* CI */
  --petrol:#0e494d;
  --petrol2:#0a3b3f;
  --yellow:#ffb500;

  /* Pastel Ableitungen */
  --petrol-05: rgba(14,73,77,.05);
  --petrol-08: rgba(14,73,77,.08);
  --petrol-10: rgba(14,73,77,.10);
  --petrol-14: rgba(14,73,77,.14);
  --petrol-18: rgba(14,73,77,.18);

  --yellow-06: rgba(255,181,0,.06);
  --yellow-10: rgba(255,181,0,.10);
  --yellow-14: rgba(255,181,0,.14);
  --yellow-22: rgba(255,181,0,.22);

  /* Background – ruhiger & iOS-like */
  --bgA:#eef4f3;     /* very light petrol-grey */
  --bgB:#faf6ee;     /* cream */
  --bgC:#f7faf9;     /* airy white */

  /* Surfaces */
  --panel: rgba(255,255,255,.72);
  --panel2: rgba(255,255,255,.86);
  --panel3: rgba(255,255,255,.92);

  /* Text – weniger “schwarz”, mehr iOS graphite */
  --text: rgba(10,18,18,.86);
  --text-strong: rgba(8,14,14,.90);
  --muted: rgba(10,18,18,.58);

  /* Borders / strokes */
  --stroke: rgba(10,18,18,.10);
  --stroke2: rgba(10,18,18,.14);
  --stroke3: rgba(255,255,255,.40);

  /* Shadows – weicher, “floating” */
  --shadow: 0 26px 80px rgba(10,18,18,.10);
  --shadow2: 0 14px 40px rgba(10,18,18,.10);
  --shadow3: 0 10px 26px rgba(10,18,18,.08);

  /* Radii */
  --r:16px;
  --r2:22px;
  --r3:28px;

  /* Motion */
  --speed:220ms;
  --ease:cubic-bezier(.2,.8,.2,1);

  /* Focus */
  --focus: 0 0 0 4px rgba(255,181,0,.20);

  /* EINHEITLICHER RHYTHMUS */
  --gap: 16px;

  /* Wrap wird per Media Query überschrieben (siehe unten) */
  --wrap: min(2040px, calc(100vw - 56px));
}

/* Wrap responsive */
@media (min-width: 1700px){
  :root{ --wrap: min(2200px, calc(100vw - 70px)); }
}
@media (max-width: 980px){
  :root{ --wrap: calc(100vw - 28px); }
}

/* ---------- BASE ---------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
  font-size: 15.5px;
  color: var(--text);
  background:
    radial-gradient(1200px 760px at 18% 0%, rgba(14,73,77,.10), transparent 62%),
    radial-gradient(1200px 760px at 82% 16%, rgba(255,181,0,.08), transparent 64%),
    radial-gradient(900px 700px at 50% 120%, rgba(14,73,77,.06), transparent 70%),
    linear-gradient(180deg, var(--bgC), var(--bgA) 30%, var(--bgB));
  overflow-x:hidden;
}

/* Soft iOS noise */
.app-bg{ min-height:100vh; position:relative; }
.app-bg::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(0,0,0,.08) 1px, transparent 0);
  background-size: 34px 34px;
  opacity:.020;
  mix-blend-mode: soft-light;
}

/* ---------- GENERIC GLASS HELPERS (optional) ---------- */
.glass{
  background: var(--panel);
  border: 1px solid rgba(10,18,18,.10);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
}
.glass-soft{
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(10,18,18,.08);
  box-shadow: var(--shadow3);
  backdrop-filter: blur(22px) saturate(1.20);
  -webkit-backdrop-filter: blur(22px) saturate(1.20);
}

/* ---------- TOPBAR ---------- */
.topbar{
  width: var(--wrap);
  margin: 14px auto 0;
  padding: 12px 16px;
  border-radius: var(--r3);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;

  background: rgba(255,255,255,.66);
  border: 1px solid rgba(10,18,18,.10);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
}

.topbar-left{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding-left:4px;
}
.topbar-title{
  font-weight: 760;
  letter-spacing:.15px;
  color: var(--text-strong);
}
.topbar-subtitle{
  font-size:12px;
  color: var(--muted);
}

.topbar-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* Center Tabs (optional) */
.topbar-center{
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 1 1 auto;
}
.top-tabs{
  display:flex;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.60);
  border: 1px solid rgba(10,18,18,.10);
  box-shadow: 0 14px 34px rgba(10,18,18,.08);
  backdrop-filter: blur(18px) saturate(1.18);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
}
.top-tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 12px;
  border-radius: 999px;
  text-decoration:none;
  color: rgba(10,18,18,.70);
  font-weight: 650;
  transition: transform var(--speed) var(--ease), background var(--speed), box-shadow var(--speed);
}
.top-tab:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.82);
  box-shadow: 0 14px 30px rgba(10,18,18,.10);
}
.top-tab.active{
  background: rgba(14,73,77,.12);
  color: rgba(10,18,18,.86);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.60);
}

/* ---------- MAIN LAYOUT ---------- */
.shell{
  width: var(--wrap);
  margin: 0 auto;
  padding: 18px 0 28px;
  display:grid;
  grid-template-columns: 340px 1fr;
  gap: var(--gap);
}

@media (min-width: 1700px){
  .shell{ grid-template-columns: 360px 1fr; }
}

@media (max-width: 980px){
  .shell{
    grid-template-columns: 1fr;
    padding: 14px 0 22px;
  }
}

.content{
  min-height: calc(100vh - 120px);
  padding: 8px 6px 22px;
}

/* ---------- SIDEBAR ---------- */
.sidebar{
  border-radius: var(--r3);
  overflow:hidden;
  border: 1px solid rgba(10,18,18,.10);
  box-shadow: var(--shadow2);
  background:
    radial-gradient(900px 240px at 20% 10%, rgba(14,73,77,.10), transparent 60%),
    radial-gradient(900px 260px at 80% 20%, rgba(255,181,0,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.58));
  backdrop-filter: blur(22px) saturate(1.20);
  -webkit-backdrop-filter: blur(22px) saturate(1.20);
}

/* keine lila Links */
.sidebar a, .sidebar a:visited{ color: inherit !important; text-decoration:none !important; }

.sidebrand-header{
  background: linear-gradient(180deg, rgba(14,73,77,1), rgba(10,59,63,.96));
  padding: 22px 18px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.sidebrand-logo{
  width: 230px;
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,.18));
}

.nav-block{ padding: 14px 14px 6px; }

.nav-sep{
  height:1px;
  background: rgba(10,18,18,.10);
  margin: 8px 14px;
}

.nav-label{
  font-size: 12px;
  color: rgba(10,18,18,.55);
  padding: 8px 18px 4px;
  font-weight: 700;
  letter-spacing: .2px;
}

.nav-item{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(10,18,18,.08);
  background: rgba(255,255,255,.58);
  position:relative;
  margin-bottom: 8px;

  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);

  transition:
    transform var(--speed) var(--ease),
    background var(--speed) var(--ease),
    box-shadow var(--speed) var(--ease),
    border-color var(--speed) var(--ease),
    filter var(--speed) var(--ease);
}

.nav-item:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.78);
  border-color: rgba(10,18,18,.12);
  box-shadow: 0 22px 70px rgba(10,18,18,.12);
  filter: saturate(1.02);
}

/* Gloss overlay on hover */
.nav-item::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 18px;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,0) 60%),
    radial-gradient(520px 220px at 20% 0%, rgba(255,255,255,.55), rgba(255,255,255,0) 70%);
  opacity: 0;
  transition: opacity var(--speed);
}
.nav-item:hover::after{ opacity: .92; }

/* ACTIVE = glossy gelb wie Primary Button */
.nav-item.active{
  background: linear-gradient(180deg, rgba(255,181,0,1), rgba(255,181,0,.82));
  border-color: rgba(255,181,0,.40);
  box-shadow: 0 22px 72px rgba(255,181,0,.22);
}

.nav-ico{
  width: 18px;
  height: 18px;
  color: rgba(14,73,77,.88);
  flex: 0 0 auto;
  filter: drop-shadow(0 8px 14px rgba(14,73,77,.10));
}
.nav-item.active .nav-ico{
  color: rgba(10,18,18,.92);
  filter: none;
}

/* ---------- HEADERS / TYPO ---------- */
.h1{
  margin:0 0 6px 0;
  font-size: 30px;
  letter-spacing:-.25px;
  color: var(--text-strong);
  font-weight: 760;
}
.muted{ color: var(--muted); }

.page-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: var(--gap);
  margin: 8px 0 var(--gap);
}
.head-actions{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}
@media (max-width: 980px){
  .page-head{ flex-direction:column; }
}

/* ---------- GRID / SECTIONS ---------- */
.grid{
  display:grid;
  gap: var(--gap);
}
.grid-3{
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 980px){
  .grid-3{ grid-template-columns: 1fr; }
}

/* Einheitlicher Abstand zwischen Sektionen */
.section-gap-top{
  margin-top: var(--gap);
}

/* ---------- CARDS ---------- */
.card{
  border-radius: var(--r2);
  padding: 18px;
  background: rgba(255,255,255,.66);
  border: 1px solid rgba(10,18,18,.10);
  box-shadow: var(--shadow2);
  position:relative;
  overflow:hidden;

  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);

  transition:
    transform var(--speed) var(--ease),
    box-shadow var(--speed) var(--ease),
    border-color var(--speed) var(--ease),
    background var(--speed) var(--ease);
}

.card::before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,0) 58%),
    radial-gradient(900px 260px at 18% 10%, rgba(14,73,77,.08), transparent 62%),
    radial-gradient(900px 280px at 86% 28%, rgba(255,181,0,.06), transparent 62%);
  opacity:.96;
}
.card > *{ position:relative; z-index:1; }

.card-link{
  display:block;
  color:inherit;
  text-decoration:none;
  transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease), border-color var(--speed);
}
.card-link:hover{
  transform: translateY(-2px);
  box-shadow: 0 30px 90px rgba(10,18,18,.14);
}

.card-title{
  font-weight: 700; /* vorher sehr fett -> jetzt iOS-like */
  margin-bottom: 4px;
  color: rgba(10,18,18,.84);
}

.card-head{
  display:flex;
  align-items:flex-start;
  gap: 12px;
}

.chip{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}

.chip-petrol{
  background: linear-gradient(180deg, rgba(14,73,77,1), rgba(10,59,63,.95));
  box-shadow: 0 16px 34px rgba(14,73,77,.18);
  border: 1px solid rgba(14,73,77,.20);
}

.chip-ico{
  width: 18px;
  height: 18px;
  color: rgba(255,255,255,.96);
}

.divider{
  height:1px;
  background: rgba(10,18,18,.10);
  margin: 12px 0;
}

/* Harmonische Abstände für Status/QuickTipps:
   -> KEIN margin-top mehr! Abstände kommen aus Section/Grid */
.card.is-status,
.card.is-quicktips{
  margin-top: 0;
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(10,18,18,.10);
  background: rgba(255,255,255,.62);
  color: rgba(10,18,18,.84);
  text-decoration:none;
  cursor:pointer;
  user-select:none;
  box-shadow: 0 14px 34px rgba(10,18,18,.10);

  backdrop-filter: blur(16px) saturate(1.18);
  -webkit-backdrop-filter: blur(16px) saturate(1.18);

  transition:
    transform var(--speed) var(--ease),
    background var(--speed) var(--ease),
    box-shadow var(--speed) var(--ease),
    border-color var(--speed) var(--ease),
    filter var(--speed) var(--ease);
}
.btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.78);
  border-color: rgba(10,18,18,.14);
  box-shadow: 0 20px 60px rgba(10,18,18,.12);
  filter: saturate(1.02);
}
.btn:focus{ outline:none; box-shadow: var(--focus); }

.btn-primary{
  background: linear-gradient(180deg, rgba(255,181,0,1), rgba(255,181,0,.82));
  border-color: rgba(255,181,0,.45);
  color: rgba(10,18,18,.92) !important;
  box-shadow: 0 22px 74px rgba(255,181,0,.22);
}
.btn-primary:hover{
  background: linear-gradient(180deg, rgba(255,181,0,1), rgba(255,181,0,.90));
  box-shadow: 0 26px 84px rgba(255,181,0,.25);
}

.btn-ghost{
  background: rgba(255,255,255,.58);
  border-color: rgba(10,18,18,.10);
}

/* ---------- USER PILL / BADGE ---------- */
.userpill{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(10,18,18,.10);
  box-shadow: 0 14px 34px rgba(10,18,18,.10);
  backdrop-filter: blur(16px) saturate(1.18);
  -webkit-backdrop-filter: blur(16px) saturate(1.18);
}
.userpill-name{
  font-weight: 700;
  font-size: 13px;
  color: rgba(10,18,18,.86);
}
.userpill-role{
  font-size: 12px;
  color: rgba(255,255,255,.95);
  background: linear-gradient(180deg, rgba(14,73,77,1), rgba(10,59,63,.95));
  padding: 3px 8px;
  border-radius: 999px;
}

.badge{
  display:inline-block;
  margin-left:8px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  vertical-align:middle;
}
.badge-petrol{
  color:#fff;
  background: linear-gradient(180deg, rgba(14,73,77,1), rgba(10,59,63,.95));
  box-shadow: 0 10px 26px rgba(14,73,77,.18);
}

/* ---------- HELPERS ---------- */
.row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.mt-12{ margin-top:12px; }

.list{
  margin: 0;
  padding-left: 18px;
  line-height: 1.55;
  color: rgba(10,18,18,.72);
}

a, button { -webkit-tap-highlight-color: transparent; }
::selection{ background: rgba(255,181,0,.22); color: rgba(0,0,0,.88); }

/* ===== Forms (News Create/Edit) – fyZIO Look (softer) ===== */

.form{ display:flex; flex-direction:column; gap: 12px; }

.label{
  font-size: 12px;
  color: rgba(10,18,18,.58);
  font-weight: 650;
  letter-spacing: .2px;
}

.input{
  width:100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(10,18,18,.12);
  background: rgba(255,255,255,.82);
  color: rgba(10,18,18,.88);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    0 10px 24px rgba(10,18,18,.06);
  transition: box-shadow var(--speed) var(--ease), border-color var(--speed) var(--ease), background var(--speed) var(--ease);
}
.input:focus{
  outline:none;
  border-color: rgba(255,181,0,.55);
  box-shadow: var(--focus), 0 18px 50px rgba(255,181,0,.10);
  background: rgba(255,255,255,.92);
}

textarea.input{ resize: vertical; min-height: 180px; }

.checkbox{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(10,18,18,.10);
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
}
.checkbox input{
  width: 16px; height: 16px;
  accent-color: var(--petrol);
}

.alert{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,181,0,.28);
  background:
    radial-gradient(500px 200px at 20% 0%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%),
    rgba(255,181,0,.12);
  color: rgba(10,18,18,.86);
  box-shadow: 0 16px 40px rgba(255,181,0,.10);
}

/* ===== Modal Confirm (fyZIO CI) – softer iOS glass ===== */
.modal-overlay{
  position: fixed;
  inset: 0;
  display:none;
  align-items:center;
  justify-content:center;
  padding: 24px;
  background: rgba(10,18,18,.32);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  z-index: 9999;
}

.modal-overlay.open{ display:flex; }

.modal{
  width: min(520px, calc(100vw - 32px));
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.38);
  background: rgba(255,255,255,.72);
  box-shadow: 0 34px 110px rgba(0,0,0,.26);
  overflow:hidden;
  position: relative;
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
}

.modal::before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.68), rgba(255,255,255,0) 58%),
    radial-gradient(700px 240px at 20% 0%, rgba(14,73,77,.10), transparent 62%),
    radial-gradient(700px 260px at 85% 20%, rgba(255,181,0,.10), transparent 62%);
  opacity:.96;
}

.modal-inner{ position:relative; padding: 18px 18px 14px; }

.modal-title{
  font-weight: 760;
  letter-spacing: -.2px;
  font-size: 18px;
  margin: 2px 0 6px;
  color: rgba(10,18,18,.90);
}

.modal-text{ color: rgba(10,18,18,.70); line-height:1.5; }

.modal-actions{
  display:flex;
  gap: 10px;
  justify-content:flex-end;
  padding: 12px 18px 18px;
  position:relative;
}

.btn-danger{
  border-color: rgba(255,90,90,.26) !important;
  color: rgba(140,20,20,.92) !important;
  background: rgba(255,255,255,.70) !important;
}
.btn-danger:hover{
  background: rgba(255,255,255,.86) !important;
  box-shadow: 0 20px 60px rgba(140,20,20,.10) !important;
}

/* ===== Auth (Login) – Popup Card mit Logo Header ===== */
.auth-wrap{
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 32px 16px;
}

.auth-card{
  width: min(420px, calc(100vw - 32px));
  padding: 0;
  overflow: hidden;
  border-radius: 22px;
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(10,18,18,.12);
  box-shadow: 0 34px 110px rgba(10,18,18,.18);
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
}

.auth-brand-header{
  background: #0e494d;
  padding: 28px 24px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.auth-logo{
  width: 160px;
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.35));
}

.auth-subtitle{
  text-align:center;
  padding: 12px 16px 0;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .25px;
  color: rgba(10,18,18,.60);
}

.auth-card .form{
  padding: 18px 20px 22px;
}

.auth-submit{
  width:100%;
  padding: 12px 14px;
}

/* ===== Reduced “hard black” defaults for common tags ===== */
h1,h2,h3,h4,strong,b{
  color: rgba(10,18,18,.88);
}
strong,b{ font-weight: 700; }