/* Retter-Portal v1.3.34
   Whitemode nutzt exakt dieselbe Geometrie und Typografie wie der Darkmode.
   Ausschließlich Farben, Flächen, Konturen und Schatten wechseln mit dem Theme. */

:root{
  --rp34-light-page:#e8eef5;
  --rp34-light-page-deep:#e0e8f1;
  --rp34-light-surface:#f7f9fc;
  --rp34-light-surface-strong:#ffffff;
  --rp34-light-surface-soft:#eef3f8;
  --rp34-light-surface-muted:#e7edf4;
  --rp34-light-line:rgba(71,85,105,.21);
  --rp34-light-line-soft:rgba(71,85,105,.12);
  --rp34-light-text:#162238;
  --rp34-light-muted:#627187;
  --rp34-light-shadow:0 16px 38px rgba(42,58,79,.10);
}

/* --------------------------------------------------------------------------
   THEME-UNABHÄNGIGE GEOMETRIE UND TYPOGRAFIE
   Diese Regeln gelten bewusst identisch für Dark- und Whitemode.
   -------------------------------------------------------------------------- */
html body .sidebar{
  width:286px!important;
  min-width:286px!important;
  max-width:286px!important;
  padding:14px 13px 22px!important;
}
html body .sidebar-brand-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 32px!important;
  align-items:start!important;
  column-gap:7px!important;
  min-height:72px!important;
  padding:0 0 14px!important;
  margin:0 0 14px!important;
}
html body .sidebar .brand{
  width:auto!important;
  min-width:0!important;
  margin:0!important;
  padding:4px 0 0 4px!important;
  display:grid!important;
  grid-template-columns:46px minmax(0,1fr)!important;
  align-items:center!important;
  gap:10px!important;
}
html body .sidebar .brand-logo-wrap,
html body .sidebar .brand-logo{
  width:46px!important;
  min-width:46px!important;
  max-width:46px!important;
  height:46px!important;
  max-height:46px!important;
}
html body .sidebar .brand-text{
  min-width:0!important;
  display:block!important;
  font-size:1.16rem!important;
  line-height:1.05!important;
  letter-spacing:-.022em!important;
  font-weight:950!important;
  white-space:nowrap!important;
  overflow:visible!important;
}
html body .sidebar .brand-context,
html body .sidebar .brand-text small{
  display:block!important;
  width:max-content!important;
  max-width:100%!important;
  margin-top:5px!important;
  font-size:.65rem!important;
  line-height:1.15!important;
  letter-spacing:.045em!important;
  font-weight:900!important;
  white-space:nowrap!important;
}
html body .sidebar-collapse-toggle{
  position:static!important;
  grid-column:2!important;
  grid-row:1!important;
  align-self:start!important;
  justify-self:end!important;
  width:32px!important;
  height:32px!important;
  min-width:32px!important;
  min-height:32px!important;
  margin:6px 0 0!important;
  padding:0!important;
  border-radius:10px!important;
}
html body .sidebar-collapse-toggle__icon{width:16px!important;height:16px!important;}
html body .sidebar .nav-section{
  margin:18px 10px 8px!important;
  font-size:.72rem!important;
  line-height:1.2!important;
  letter-spacing:.14em!important;
  font-weight:950!important;
}
html body .sidebar nav a.sidebar-nav-link{
  min-height:48px!important;
  margin:2px 0!important;
  padding:12px 13px!important;
  gap:11px!important;
  border-radius:15px!important;
  font-size:1.015rem!important;
  line-height:1.18!important;
  font-weight:840!important;
  letter-spacing:-.012em!important;
}
html body .sidebar .sidebar-nav-icon{
  width:24px!important;
  min-width:24px!important;
  height:24px!important;
  flex:0 0 24px!important;
}
html body .sidebar .sidebar-nav-icon svg{width:20px!important;height:20px!important;}
html body .sidebar .sidebar-nav-label{line-height:1.18!important;}
html body .sidebar .nav-count{
  min-width:26px!important;
  height:26px!important;
  padding:0 8px!important;
  font-size:.74rem!important;
  line-height:1!important;
}

html body .content > :is(.page-head,.page-hero){
  min-height:118px!important;
  padding:20px clamp(22px,2.05vw,32px)!important;
  border-radius:22px!important;
}
html body .content > :is(.page-head,.page-hero) h1{
  font-size:clamp(2.05rem,2.45vw,2.85rem)!important;
  line-height:1.02!important;
  letter-spacing:-.05em!important;
}
html body .content > :is(.page-head,.page-hero) .muted{
  font-size:.96rem!important;
  line-height:1.55!important;
}
html body .content .stat-card{
  min-height:108px!important;
  padding:20px!important;
  border-radius:20px!important;
}
html body .content .stat-card strong{font-size:2rem!important;line-height:1!important;}
html body .content .card{border-radius:20px!important;}
html body .content .card-head h2{font-size:1.22rem!important;line-height:1.2!important;}
html body .content .toolbar{padding:14px!important;border-radius:18px!important;gap:11px!important;}
html body .content :is(input,select,textarea){font-size:1rem!important;}
html body .content .btn{font-size:.94rem!important;line-height:1.1!important;}

/* Kalender-Geometrie in beiden Modi identisch. */
html body .content .youth-mini-calendar{
  grid-template-columns:repeat(7,minmax(0,1fr))!important;
  gap:8px!important;
}
html body .content .youth-weekday{
  padding:8px 10px!important;
  font-size:.76rem!important;
  line-height:1.2!important;
}
html body .content .youth-day{
  min-height:106px!important;
  padding:10px!important;
  border-radius:16px!important;
  gap:5px!important;
}
html body .content .youth-calendar-event-link{
  font-size:.88rem!important;
  line-height:1.25!important;
  border-radius:10px!important;
}

@media(min-width:1101px){
  html body.sidebar-collapsed .sidebar{
    width:88px!important;
    min-width:88px!important;
    max-width:88px!important;
  }
  html body.sidebar-collapsed .sidebar-brand-row{
    grid-template-columns:1fr!important;
    justify-items:center!important;
    gap:10px!important;
    padding-bottom:12px!important;
  }
  html body.sidebar-collapsed .sidebar-collapse-toggle{
    grid-column:1!important;
    grid-row:2!important;
    justify-self:center!important;
    margin:0!important;
  }
}

/* --------------------------------------------------------------------------
   WHITEMODE: NUR FARBEN, FLÄCHEN, KONTUREN UND SCHATTEN
   -------------------------------------------------------------------------- */
body[data-theme="light"]{
  --bg:var(--rp34-light-page)!important;
  --bg2:var(--rp34-light-page-deep)!important;
  --surface:var(--rp34-light-surface)!important;
  --surface-2:var(--rp34-light-surface-soft)!important;
  --text:var(--rp34-light-text)!important;
  --muted:var(--rp34-light-muted)!important;
  --muted-2:#7d8ca0!important;
  --line:var(--rp34-light-line)!important;
  --line-soft:var(--rp34-light-line-soft)!important;
  color-scheme:light!important;
  color:var(--rp34-light-text)!important;
  background:
    radial-gradient(circle at 8% -8%,rgba(225,29,72,.07),transparent 32rem),
    radial-gradient(circle at 94% -4%,rgba(37,99,235,.085),transparent 38rem),
    linear-gradient(135deg,var(--rp34-light-page),#edf2f7 58%,var(--rp34-light-page-deep))!important;
}
body[data-theme="light"]::before{
  display:block!important;
  content:""!important;
  position:fixed!important;
  inset:0!important;
  pointer-events:none!important;
  background-image:
    linear-gradient(rgba(82,101,125,.026) 1px,transparent 1px),
    linear-gradient(90deg,rgba(82,101,125,.026) 1px,transparent 1px)!important;
  background-size:48px 48px!important;
  mask-image:linear-gradient(to bottom,#000,transparent 88%)!important;
}
body[data-theme="light"] .main{
  color:var(--rp34-light-text)!important;
  background:
    radial-gradient(circle at 10% 0,rgba(225,29,72,.045),transparent 27rem),
    radial-gradient(circle at 95% 0,rgba(37,99,235,.06),transparent 34rem),
    linear-gradient(135deg,#e7edf4,#eef3f8 56%,#e2eaf3)!important;
}

/* Sidebar bleibt pixelgleich zum Darkmode; nur die bereits dunklen Farben werden fixiert. */
body[data-theme="light"] .sidebar{
  color:#edf3fb!important;
  background:
    radial-gradient(circle at 0 -8%,rgba(225,29,72,.17),transparent 20rem),
    radial-gradient(circle at 120% 35%,rgba(37,99,235,.10),transparent 22rem),
    linear-gradient(180deg,#091426 0%,#071120 100%)!important;
  border-right-color:rgba(148,163,184,.15)!important;
  box-shadow:16px 0 42px rgba(15,23,42,.18)!important;
}
body[data-theme="light"] .sidebar,
body[data-theme="light"] .sidebar *{opacity:1!important;}
body[data-theme="light"] .sidebar .logo-light{display:none!important;}
body[data-theme="light"] .sidebar .logo-dark{display:block!important;}
body[data-theme="light"] .sidebar .brand-text{color:#f8fafc!important;}
body[data-theme="light"] .sidebar .brand-context,
body[data-theme="light"] .sidebar .brand-text small{color:#9baabd!important;}
body[data-theme="light"] .sidebar .nav-section{color:#8e9eb3!important;}
body[data-theme="light"] .sidebar nav a.sidebar-nav-link{
  color:#d6e0ec!important;
  background:transparent!important;
  border-color:transparent!important;
}
body[data-theme="light"] .sidebar nav a.sidebar-nav-link:hover{
  color:#fff!important;
  background:rgba(255,255,255,.055)!important;
  border-color:rgba(148,163,184,.13)!important;
}
body[data-theme="light"] .sidebar nav a.sidebar-nav-link.active{
  color:#fff!important;
  background:linear-gradient(90deg,rgba(225,29,72,.19),rgba(37,99,235,.08))!important;
  border-color:rgba(251,113,133,.28)!important;
  box-shadow:inset 3px 0 0 #ef3154,0 10px 24px rgba(2,6,23,.15)!important;
}
body[data-theme="light"] .sidebar .sidebar-nav-icon{color:#9dacc0!important;}
body[data-theme="light"] .sidebar nav a.sidebar-nav-link.active .sidebar-nav-icon{color:#fb7185!important;}
body[data-theme="light"] .sidebar .nav-count{
  color:#eef4fb!important;
  background:rgba(148,163,184,.20)!important;
  border-color:rgba(148,163,184,.15)!important;
}
body[data-theme="light"] .sidebar-collapse-toggle{
  color:#cbd7e6!important;
  background:rgba(14,31,52,.68)!important;
  border-color:rgba(148,163,184,.12)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02),0 4px 12px rgba(0,0,0,.10)!important;
}

/* Header */
body[data-theme="light"] .topbar{
  background:rgba(238,244,250,.96)!important;
  border-bottom:1px solid rgba(71,85,105,.18)!important;
  box-shadow:0 7px 22px rgba(42,58,79,.08)!important;
  backdrop-filter:blur(20px) saturate(1.12)!important;
}
body[data-theme="light"] .topbar .topbar-eyebrow{color:#526176!important;}
body[data-theme="light"] .topbar .topbar-version{
  color:#172033!important;
  background:#e4ebf3!important;
  border-color:rgba(71,85,105,.18)!important;
}
body[data-theme="light"] .topbar :is(.department-context-switch,.department-context-static){
  color:var(--rp34-light-text)!important;
  background:linear-gradient(180deg,#f5f8fc,#e8eef5)!important;
  border-color:var(--rp34-light-line)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 5px 14px rgba(42,58,79,.055)!important;
}
body[data-theme="light"] .topbar :is(.department-context-switch,.department-context-static) span{color:#68798f!important;}
body[data-theme="light"] .topbar .department-context-switch select,
body[data-theme="light"] .topbar .department-context-static strong{color:var(--rp34-light-text)!important;}
body[data-theme="light"] .topbar .department-context-switch select{
  background:#f7faff!important;
  border-color:rgba(71,85,105,.17)!important;
}
body[data-theme="light"] .topbar :is(.theme-switch,.topbar-account-info,.user-chip,.btn:not(.primary)){
  color:var(--rp34-light-text)!important;
  background:linear-gradient(180deg,#f8fafc,#e8eef5)!important;
  border-color:rgba(71,85,105,.18)!important;
  box-shadow:inset 0 1px 0 #fff,0 5px 14px rgba(42,58,79,.055)!important;
}

/* Flächen: gleiche Struktur wie Darkmode, in kühler heller Übersetzung. */
body[data-theme="light"] .content > :is(.page-head,.page-hero,.card,.toolbar,.pagination,.table-wrap,.data-table-card,.checks-table-wrap,.portal-footer),
body[data-theme="light"] .content :is(.form-subcard,.detail-item,.info-grid>div,.entity-card,.admin-panel,.admin-card,.admin-command-nav,.admin-water-source-row,.billing-status-card,.stat-card),
body[data-theme="light"] .rp55-dashboard :is(.rp55-dash-hero,.card,.rp55-kpi-card,.rp55-focus-card,.rp55-own-card,.rp55-table-card),
body[data-theme="light"] :is(.feed-card,.dashboard-card,.overview-card,.youth-calendar-card,.youth-table-card){
  color:var(--rp34-light-text)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.62),transparent 34%),
    radial-gradient(circle at 100% 0,rgba(37,99,235,.055),transparent 22rem),
    radial-gradient(circle at 0 0,rgba(225,29,72,.035),transparent 18rem),
    linear-gradient(145deg,var(--rp34-light-surface),var(--rp34-light-surface-soft))!important;
  border-color:var(--rp34-light-line)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),var(--rp34-light-shadow)!important;
}
body[data-theme="light"] .content > :is(.page-head,.page-hero){
  background:
    linear-gradient(180deg,rgba(255,255,255,.72),transparent 35%),
    radial-gradient(circle at 100% 0,rgba(37,99,235,.065),transparent 25rem),
    radial-gradient(circle at 0 0,rgba(225,29,72,.045),transparent 20rem),
    linear-gradient(145deg,#f7f9fc,#eaf0f6)!important;
}
body[data-theme="light"] .content > .toolbar{background:linear-gradient(145deg,#eff4f8,#e6edf4)!important;}
body[data-theme="light"] .content > :is(.pagination,.portal-footer){background:linear-gradient(145deg,#f2f6fa,#e8eef5)!important;}
body[data-theme="light"] .content > :is(.page-head,.page-hero,.card,.toolbar,.pagination,.table-wrap,.data-table-card,.checks-table-wrap,.portal-footer)::before,
body[data-theme="light"] .content > :is(.page-head,.page-hero,.card,.toolbar,.pagination,.table-wrap,.data-table-card,.checks-table-wrap,.portal-footer)::after{
  display:none!important;
  content:none!important;
}
body[data-theme="light"] :is(h1,h2,h3,h4,h5,strong,th,.card-head,.page-head,.page-hero,.rp55-dash-hero){color:var(--rp34-light-text)!important;}
body[data-theme="light"] :is(.muted,.subtle,small,label,.timeline-list small,.rp55-kpi-card small){color:var(--rp34-light-muted)!important;}

/* Stat- und Entitätskarten */
body[data-theme="light"] :is(.entity-card,.department-card,.rp55-kpi-card,.stat-card){
  background:
    linear-gradient(180deg,rgba(255,255,255,.75),transparent 35%),
    linear-gradient(145deg,#f7f9fc,#e9eff5)!important;
  border-color:var(--rp34-light-line)!important;
  box-shadow:inset 0 1px 0 #fff,0 13px 30px rgba(42,58,79,.085)!important;
}
body[data-theme="light"] :is(.timeline-item,.feed-list article,.v138-feed-item){
  color:var(--rp34-light-text)!important;
  background:linear-gradient(145deg,#f7f9fc,#ebf1f6)!important;
  border:1px solid var(--rp34-light-line)!important;
  box-shadow:inset 0 1px 0 #fff,0 5px 15px rgba(42,58,79,.055)!important;
}
body[data-theme="light"] :is(.timeline-item,.feed-list article):hover{background:linear-gradient(145deg,#f2f6fa,#e4ebf2)!important;}

/* Formulare, Buttons und Tabellen */
body[data-theme="light"] :is(input,select,textarea,.smart-person-picker,.smart-select-field){
  color:var(--rp34-light-text)!important;
  background:linear-gradient(180deg,#fafcff,#edf2f7)!important;
  background-image:linear-gradient(180deg,#fafcff,#edf2f7)!important;
  border-color:var(--rp34-light-line)!important;
  box-shadow:inset 0 1px 0 #fff!important;
}
body[data-theme="light"] :is(input,select,textarea):focus{
  border-color:rgba(225,29,72,.40)!important;
  box-shadow:0 0 0 3px rgba(225,29,72,.085),inset 0 1px 0 #fff!important;
}
body[data-theme="light"] input::placeholder,
body[data-theme="light"] textarea::placeholder{color:#8796a9!important;}
body[data-theme="light"] select option,
body[data-theme="light"] select optgroup{color:#142033!important;background:#f7faff!important;}
body[data-theme="light"] .btn:not(.primary):not(.danger){
  color:#203047!important;
  background:linear-gradient(180deg,#f8fafc,#e7edf4)!important;
  border-color:var(--rp34-light-line)!important;
  box-shadow:inset 0 1px 0 #fff,0 5px 13px rgba(42,58,79,.055)!important;
}
body[data-theme="light"] .btn:not(.primary):not(.danger):hover{background:linear-gradient(180deg,#f2f6fa,#dfe7ef)!important;}
body[data-theme="light"] :is(.table-wrap,.card.table-wrap){
  background:linear-gradient(145deg,#f5f8fb,#eaf0f6)!important;
  border-color:var(--rp34-light-line)!important;
}
body[data-theme="light"] table thead th{
  color:#4a5b71!important;
  background:linear-gradient(180deg,#e2e9f0,#d9e3ec)!important;
  border-bottom-color:var(--rp34-light-line)!important;
}
body[data-theme="light"] table tbody tr{background:#f7f9fc!important;}
body[data-theme="light"] table tbody tr:nth-child(even){background:#edf2f7!important;}
body[data-theme="light"] table tbody tr:hover{background:#e3ebf3!important;}
body[data-theme="light"] table td{color:#26374d!important;border-bottom-color:var(--rp34-light-line-soft)!important;}
body[data-theme="light"] :is(.pill,.status,.role){
  color:#33455b!important;
  background:linear-gradient(180deg,#edf2f7,#e1e9f1)!important;
  border-color:var(--rp34-light-line)!important;
  box-shadow:inset 0 1px 0 #fff!important;
}

/* Jugendkalender: exakt dieselben Dimensionen, nur helle Farbübersetzung. */
body[data-theme="light"] .youth-weekday{color:#58697f!important;}
body[data-theme="light"] .youth-day{
  color:var(--rp34-light-text)!important;
  background:linear-gradient(145deg,#f7f9fc,#eaf0f6)!important;
  border-color:var(--rp34-light-line)!important;
  box-shadow:inset 0 1px 0 #fff,0 4px 12px rgba(42,58,79,.045)!important;
}
body[data-theme="light"] .youth-day.empty-day{
  background:rgba(226,233,241,.70)!important;
  border-color:rgba(71,85,105,.13)!important;
  box-shadow:none!important;
}
body[data-theme="light"] .youth-day.has-event{
  border-color:rgba(225,29,72,.30)!important;
  box-shadow:inset 0 3px 0 rgba(225,29,72,.50),0 4px 12px rgba(42,58,79,.045)!important;
}
body[data-theme="light"] .youth-day > span{color:var(--rp34-light-text)!important;}
body[data-theme="light"] .youth-calendar-event-link{
  color:#fff!important;
  background:linear-gradient(135deg,#d8193b,#ae1230)!important;
  border-color:rgba(225,29,72,.34)!important;
}

/* Benachrichtigungsstreifen */
body[data-theme="light"] .dashboard-notification-strip{
  color:var(--rp34-light-text)!important;
  background:
    linear-gradient(90deg,rgba(225,29,72,.07),rgba(37,99,235,.06)),
    linear-gradient(145deg,#f7f9fc,#e9eff5)!important;
  border-color:rgba(225,29,72,.22)!important;
  box-shadow:inset 0 1px 0 #fff,0 9px 22px rgba(42,58,79,.07)!important;
}
body[data-theme="light"] .dashboard-notification-strip__copy small{color:var(--rp34-light-muted)!important;}
body[data-theme="light"] .dashboard-notification-strip__action{
  color:var(--rp34-light-text)!important;
  background:linear-gradient(180deg,#f8fafc,#e7edf4)!important;
  border-color:var(--rp34-light-line)!important;
}

/* Semantische Farben */
body[data-theme="light"] :is(.status.Aktiv,.status.Verfügbar,.status.Genehmigt,.status.Bezahlt,.ok){
  color:#047857!important;background:#e7f8f1!important;border-color:#a7e8cf!important;
}
body[data-theme="light"] :is(.status.Defekt,.status.Abgelehnt,.status.Storniert,.danger-text){
  color:#be123c!important;background:#fff0f3!important;border-color:#f7bdc9!important;
}
body[data-theme="light"] :is(.status.Offen,.status.Entwurf,.status.In,.status.In.Prüfung){
  color:#92400e!important;background:#fff8e7!important;border-color:#f4dc92!important;
}

@media(max-width:1100px){
  html body .sidebar{
    width:min(91vw,318px)!important;
    min-width:min(91vw,318px)!important;
    max-width:min(91vw,318px)!important;
  }
  html body .sidebar-brand-row{
    display:block!important;
    min-height:72px!important;
    padding-right:0!important;
  }
  html body .sidebar-collapse-toggle{display:none!important;}
  html body .content .youth-mini-calendar{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  html body .content .youth-weekday{display:none!important;}
  html body .content .youth-day.empty-day{display:none!important;}
  html body .content .youth-day{min-height:108px!important;}
}

@media(max-width:760px){
  html body .content > :is(.page-head,.page-hero){
    min-height:0!important;
    padding:19px 17px!important;
    border-radius:17px!important;
  }
  html body .content > :is(.page-head,.page-hero) h1{font-size:clamp(1.75rem,8vw,2.25rem)!important;}
  body[data-theme="light"] .table-wrap table.responsive-table tbody tr{
    color:var(--rp34-light-text)!important;
    background:
      linear-gradient(180deg,rgba(255,255,255,.72),transparent 32%),
      linear-gradient(145deg,#f7f9fc,#e9eff5)!important;
    border-color:var(--rp34-light-line)!important;
    box-shadow:inset 0 1px 0 #fff,0 9px 22px rgba(42,58,79,.07)!important;
  }
  body[data-theme="light"] .table-wrap table.responsive-table tbody td{
    color:#26374d!important;
    border-bottom-color:var(--rp34-light-line-soft)!important;
  }
  body[data-theme="light"] .table-wrap table.responsive-table td::before{color:#66778d!important;}
}