:root{
  color-scheme: light dark;

  --bg:#0b0f14;
  --surface:#0f1620;
  --surface-2:#141e2b;
  --text:#e7eef7;
  --muted:#a9b6c6;
  --border:#223043;

  /* Default accent */
  --accent:#4aa3ff;

  --shadow:0 10px 30px rgba(0,0,0,0.35);

  --radius:14px;
  --max:1100px;

  --topbar-h:56px;
  --bottomnav-h:64px;
}

:root[data-theme="light"]{
  --bg:#f6f8fb;
  --surface:#ffffff;
  --surface-2:#f0f4fa;
  --text:#0b1220;
  --muted:#4a5a70;
  --border:#d9e2ef;
  --shadow:0 10px 30px rgba(10,25,41,0.10);
}

/* Accent presets */
:root[data-accent="blue"]{--accent:#4aa3ff;}
:root[data-accent="teal"]{--accent:#2dd4bf;}
:root[data-accent="purple"]{--accent:#a78bfa;}
:root[data-accent="amber"]{--accent:#fbbf24;}

/* Font scale */
:root[data-font="sm"]{font-size:14px;}
:root[data-font="md"]{font-size:16px;}
:root[data-font="lg"]{font-size:18px;}

/* Compact */
:root[data-compact="true"] .main{padding:12px 12px calc(var(--bottomnav-h) + 12px);}
:root[data-compact="true"] .view{padding:14px;}
:root[data-compact="true"] .bottom-nav{padding:6px 8px;}

/* Reduce motion */
:root[data-reduce-motion="true"] *{
  transition:none !important;
  animation:none !important;
  scroll-behavior:auto !important;
}

/* Hide bottom labels */
:root[data-hide-labels="true"] .bottom-nav__label{display:none;}
:root[data-hide-labels="true"] .bottom-nav__item{gap:0;}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,"Apple Color Emoji","Segoe UI Emoji";
  background:var(--bg);
  color:var(--text);
}

/* Utilities */
.muted{color:var(--muted);}

/* Skip link */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--surface);
  color:var(--text);
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  z-index:10;
}
.skip-link:focus{
  left:12px;
  top:12px;
}

/* Topbar */
.topbar{
  position:sticky;
  top:0;
  height:var(--topbar-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  z-index:5;
}
.brand{
  font-weight:800;
  letter-spacing:0.3px;
}

/* Buttons */
.icon-button{
  display:inline-flex;
  gap:10px;
  align-items:center;
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text);
  border-radius:999px;
  padding:8px 12px;
  cursor:pointer;
}
.icon{font-size:16px;line-height:1;}
.icon-button__label{font-size:14px;color:var(--muted);}

.button{
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text);
  border-radius:14px;
  padding:10px 14px;
  cursor:pointer;
}
.button--primary{
  border-color:color-mix(in srgb, var(--accent) 55%, var(--border));
  background:color-mix(in srgb, var(--accent) 18%, var(--surface-2));
}
.button:disabled{opacity:0.65;cursor:not-allowed;}
.button.is-applied{
  border-color:color-mix(in srgb, var(--accent) 70%, var(--border));
  background:color-mix(in srgb, var(--accent) 30%, var(--surface-2));
}

/* Focus */
.icon-button:focus-visible,
.bottom-nav__item:focus-visible,
.button:focus-visible,
.select:focus-visible,
.input:focus-visible,
.textarea:focus-visible{
  outline:3px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset:2px;
}

/* Image Header */
.image-header{
  position:relative;
  height:110px;
  background-image:url("./header.webp");
  background-size:cover;
  background-position:center;
  border-bottom:1px solid var(--border);
}
.image-header__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0.55));
  display:flex;
  align-items:center;
}
:root[data-theme="light"] .image-header__overlay{
  background:linear-gradient(to bottom, rgba(255,255,255,0.55), rgba(255,255,255,0.75));
}
.image-header__content{
  max-width:var(--max);
  padding:0 16px;
  margin:0 auto;
}
.image-header__title{
  display:block;
  font-size:16px;
  font-weight:700;
  letter-spacing:0.2px;
}
.image-header__subtitle{
  display:block;
  font-size:13px;
  color:var(--muted);
}

/* Main */
.main{
  max-width:var(--max);
  margin:0 auto;
  padding:18px 16px calc(var(--bottomnav-h) + 18px);
}

.view{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:calc(var(--radius) + 4px);
  box-shadow:var(--shadow);
  padding:18px;
}
.view h1{
  margin:0 0 10px 0;
  font-size:24px;
  letter-spacing:0.2px;
}
.view p{
  margin:0;
  color:var(--muted);
  line-height:1.6;
}

/* Bottom nav */
.bottom-nav{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  height:var(--bottomnav-h);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
  padding:8px 10px;
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  border-top:1px solid var(--border);
  backdrop-filter:blur(10px);
  z-index:6;
}
.bottom-nav__item{
  border:1px solid transparent;
  border-radius:14px;
  background:transparent;
  color:var(--muted);
  cursor:pointer;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;

  padding:8px 6px;
  min-width:0;
}
.bottom-nav__icon{font-size:18px;line-height:1;}
.bottom-nav__label{
  font-size:12px;
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.bottom-nav__item.is-active{
  background:color-mix(in srgb, var(--accent) 10%, var(--surface-2));
  border-color:color-mix(in srgb, var(--accent) 30%, var(--border));
  color:var(--text);
}
.bottom-nav__item.is-active .bottom-nav__label{color:var(--text);}

/* Desktop */
@media (min-width:900px){
  .main{padding-top:22px;padding-bottom:22px;}
  .image-header{height:90px;}
  .bottom-nav{
    left:50%;
    transform:translateX(-50%);
    max-width:var(--max);
    border:1px solid var(--border);
    border-radius:16px;
    margin:0 16px 12px;
  }
}

/* Form elements */
.select{
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text);
  border-radius:14px;
  padding:9px 10px;
  min-width:150px;
}
.input, .textarea{
  width:100%;
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text);
  border-radius:14px;
  padding:10px 10px;
  font:inherit;
}
.textarea{resize:vertical;}

/* Settings UI */
.settings{
  margin-top:14px;
  display:grid;
  gap:14px;
}
.settings__group{
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:calc(var(--radius) + 2px);
  padding:14px;
}
.settings__title{
  margin:0 0 10px 0;
  font-size:14px;
  color:var(--muted);
  font-weight:700;
  letter-spacing:0.2px;
}
.settings__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-top:1px solid var(--border);
}
.settings__row:first-of-type{border-top:0;padding-top:0;}
.settings__row:last-of-type{padding-bottom:0;}
.settings__meta{min-width:0;}
.settings__label{font-weight:700;}
.settings__hint{font-size:13px;color:var(--muted);margin-top:2px;}
.settings__actions{display:flex;justify-content:flex-end;}

/* Switch */
.switch{display:inline-flex;align-items:center;}
.switch input{position:absolute;opacity:0;width:1px;height:1px;}
.switch__track{
  width:44px;height:26px;border-radius:999px;
  background:var(--surface-2);
  border:1px solid var(--border);
  position:relative;
  display:inline-block;
}
.switch__track::after{
  content:"";
  position:absolute;
  top:3px;left:3px;
  width:20px;height:20px;border-radius:999px;
  background:var(--muted);
  transition:transform 160ms ease, background 160ms ease;
}
.switch input:checked + .switch__track{
  border-color:color-mix(in srgb, var(--accent) 45%, var(--border));
  background:color-mix(in srgb, var(--accent) 10%, var(--surface-2));
}
.switch input:checked + .switch__track::after{
  transform:translateX(18px);
  background:var(--accent);
}

/* Section head */
.section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.section-head__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.field{display:grid;gap:6px;}
.field__label{font-size:12px;color:var(--muted);}

/* Cards grid */
.cards{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:12px;
}

/* Desktop: 2-3 columns */
@media (min-width:900px){
  .cards{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:14px;
  }
}
@media (min-width:1200px){
  .cards{grid-template-columns:repeat(3, minmax(0,1fr));}
}

/* Card */
.card{
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:calc(var(--radius) + 4px);
  box-shadow:var(--shadow);
  padding:14px;

  display:grid;
  gap:10px;

  transition:transform 140ms ease, border-color 140ms ease, background 140ms ease;
}
.card:hover{
  transform:translateY(-1px);
  border-color:color-mix(in srgb, var(--accent) 35%, var(--border));
}

/* Card header: mobile stacked */
.card__top{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:12px;
}

/* Title + meta */
.card__title{
  margin:0;
  font-size:18px;
  font-weight:800;
  line-height:1.2;
}
.card__meta{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

/* Badges */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text);
  font-size:12px;
  line-height:1;
  white-space:nowrap;
}
.badge--open{
  border-color:color-mix(in srgb, var(--accent) 45%, var(--border));
  background:color-mix(in srgb, var(--accent) 16%, var(--surface-2));
}
.badge--count{
  border-color:color-mix(in srgb, var(--accent) 30%, var(--border));
  background:color-mix(in srgb, var(--accent) 10%, var(--surface-2));
}

/* Card actions */
.card__actions{
  display:flex;
  justify-content:flex-start;
  gap:10px;
  flex-wrap:wrap;
}
.card__actions .button{
  min-height:44px;
  padding:10px 14px;
}

/* Description */
.card__desc{
  margin:0;
  color:var(--muted);
  line-height:1.6;
}

/* Desktop: card header inline again */
@media (min-width:700px){
  .card__top{
    flex-direction:row;
    align-items:flex-start;
    justify-content:space-between;
  }
  .card__actions{
    justify-content:flex-end;
    flex-wrap:nowrap;
  }
}

/* Empty state */
.empty{
  border:1px dashed var(--border);
  background:color-mix(in srgb, var(--surface) 75%, transparent);
  border-radius:calc(var(--radius) + 4px);
  padding:18px;
}
.empty__title{font-weight:800;}
.empty__text{margin-top:6px;color:var(--muted);}

/* Modal */
.modal{position:fixed;inset:0;z-index:50;}
.modal[hidden]{display:none;}

.modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.55);
}
:root[data-theme="light"] .modal__backdrop{
  background:rgba(10,25,41,0.25);
}

.modal__panel{
  position:relative;
  margin:24px auto;
  width:min(720px, calc(100% - 24px));
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:calc(var(--radius) + 6px);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.modal__head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:14px;
  border-bottom:1px solid var(--border);
  background:color-mix(in srgb, var(--accent) 6%, var(--surface));
}

.modal__title{font-weight:900;}
.modal__sub{margin-top:4px;color:var(--muted);font-size:13px;}

.form{padding:14px;}
.form__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
@media (min-width:700px){
  .form__grid{grid-template-columns:1fr 1fr;}
  .form__full{grid-column:1 / -1;}
}
.form__actions{
  margin-top:12px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding-top:12px;
  border-top:1px solid var(--border);
}
.form__error{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  background:color-mix(in srgb, var(--accent) 12%, var(--surface-2));
  color:var(--text);
}

/* Segmented control */
.segmented{
  display:inline-flex;
  gap:6px;
  padding:6px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--surface-2);
}
.segmented__btn{
  border:1px solid transparent;
  background:transparent;
  color:var(--muted);
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
  font:inherit;
}
.segmented__btn.is-active{
  color:var(--text);
  background:color-mix(in srgb, var(--accent) 14%, var(--surface));
  border-color:color-mix(in srgb, var(--accent) 35%, var(--border));
}

/* Bewerberliste */
.list{display:grid;gap:10px;}
.list__item{
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:14px;
  padding:12px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.list__title{font-weight:800;margin:0;}
.list__meta{margin-top:6px;display:flex;flex-wrap:wrap;gap:8px;}

/* =========================================
   Zusatzdienste: Desktop-Fassung breiter
   ========================================= */

/* Standard: in Zusatzdienste immer 1 Spalte (Mobile & Tablet) */
#view-services .cards{
  grid-template-columns: 1fr;
}

/* Desktop: Karten sollen die volle Breite nutzen */
@media (min-width: 900px){
  #view-services .cards{
    grid-template-columns: 1fr; /* bleibt 1-spaltig -> breite Cards */
    max-width: 980px;          /* verhindert "zu breit" auf sehr großen Screens */
  }
}

/* Sehr breite Screens: optional 2 Spalten, aber erst wenn genug Platz */
@media (min-width: 1300px){
  #view-services .cards{
    max-width: none;
    grid-template-columns: repeat(2, minmax(520px, 1fr));
    align-items: start;
  }
}

/* Card-Header auf Desktop: links Inhalt, rechts Aktionen */
@media (min-width: 900px){
  #view-services .card__top{
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
  }

  #view-services .card__actions{
    justify-content: flex-end;
    flex-wrap: nowrap;
  }

  /* Buttons sollen nicht "riesig" werden, aber konsistent bleiben */
  #view-services .card__actions .button{
    min-width: 170px;
  }
}

/* Meta-Badges: auf Desktop kompakter und besser lesbar */
@media (min-width: 900px){
  #view-services .card__meta{
    max-width: 760px;
  }
}
/* ===== HARD OVERRIDE: Zusatzdienste Desktop-Breite ===== */
#view-services .cards{
  width: 100% !important;
  max-width: none !important;
  grid-template-columns: 1fr !important;
}

#view-services .card{
  width: 100% !important;
  max-width: none !important;
}

/* Desktop: Header links/rechts sauber ausrichten */
@media (min-width: 900px){
  #view-services .card__top{
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  #view-services .card__actions{
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
  }

  /* Buttons nicht „riesig“ – sonst schiebt es Layout seltsam */
  #view-services .card__actions .button{
    min-width: 0 !important;
    padding: 10px 16px !important;
  }
}

/* Bottom-Nav Badge: ungelesene Zusatzdienste */
.nav-badge{
  position:absolute;
  top:6px;
  right:16px;
  min-width:18px;
  height:18px;
  padding:0 6px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border-radius:999px;
  background:#e11d48; /* rot */
  color:#fff;
  font-size:12px;
  font-weight:800;
  line-height:1;

  border:2px solid color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow:0 6px 16px rgba(0,0,0,0.25);
}

.bottom-nav__item{ position:relative; }

/* =========================
   News
   ========================= */

.news-card{
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:calc(var(--radius) + 4px);
  box-shadow:var(--shadow);
  padding:14px;
  display:grid;
  gap:10px;
}

.news-card__top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}

.news-card__title{
  margin:0;
  font-size:18px;
  font-weight:850;
  line-height:1.2;
}

.news-card__body{
  margin:0;
  color:var(--muted);
  line-height:1.6;
}

.news-card__meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.badge--important{
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
}

/* Dringend: bewusst rot, unabhängig von Akzent (dringend muss immer „rot“ bleiben) */
.badge--urgent{
  border-color: color-mix(in srgb, #e11d48 55%, var(--border));
  background: color-mix(in srgb, #e11d48 18%, var(--surface-2));
  color: var(--text);
}
.home-intro{
  margin-top:14px;
}

/* =========================
   Home: Notice / Panels / Checklist / Activity
   ========================= */

.notice{
  margin-top:14px;
  border:1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
  border-radius: calc(var(--radius) + 4px);
  padding:14px;
  display:grid;
  gap:10px;
}
.notice__title{
  font-weight:900;
}
.notice__text{
  color: var(--muted);
  line-height:1.6;
}
.notice__actions{
  display:flex;
  justify-content:flex-end;
}

.panel{
  margin-top:14px;
  border:1px solid var(--border);
  background: var(--surface);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow);
  padding:14px;
}
.panel__title{
  font-weight:900;
  color: var(--text);
  margin-bottom:10px;
}

.checklist{
  margin:0;
  padding-left:18px;
  color: var(--muted);
  line-height:1.8;
}
.checklist li{
  margin:4px 0;
}

.activity{
  display:grid;
  gap:10px;
}
.activity__row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding-top:10px;
  border-top:1px solid var(--border);
}
.activity__row:first-child{
  border-top:0;
  padding-top:0;
}
.activity__label{
  font-weight:800;
}
.activity__value{
  text-align:right;
  max-width:60%;
}

[hidden] {
  display: none !important;
}