/*
  ============================================================
  CSS developed by
  Gesswagner IT Solution e.U.
  https://www.gesswagner-it.at
  ============================================================

  Inhaltsverzeichnis
  1)  Design Tokens (Farben, Ring)
  2)  Global UX (Selection, Default Focus)
  3)  Link-Styles (nur wo erlaubt)
  4)  Sidebar Navigation (Light/Dark + Active)
  5)  Mobile Menu Overlay (Close Button)
  6)  Ripple Effekt (optional)
  7)  Scroll-Spy Active (nur Navigation)
  8)  A11y Menu (UI + pressed state)
  9)  A11y: Fontsize / Reduce Motion / Invert / Focus Highlight
  10) Skip-Link
  11) Content Lesbarkeit: Hours Cards + Sidebar Calendar
  12) Services Accent-Leiste (optional)
  13) HERO CTA Fix (Kontakt & Anfahrt immer lesbar)
  14) Cookie Banner (modern, externes cookie.svg)
  15) High-Contrast Mode (gezielt, ohne Tailwind global zu zerstören)
  16) Site Notice (Info/News) – Premium UI
  17) Site Notice – Layout / Wrapper / High-Contrast Fix
  18) Admin Login Modal (Popup) – Fallback CSS (ohne Tailwind)
*/

/* ==========================================================
   1) Design Tokens
========================================================== */
:root{
  --color-primary:        #c53a3a;
  --color-primary-hover:  #b33030;
  --color-primary-active: #912626;

  --color-gray-50:  #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;

  /* Tailwind Ring Defaults überschreiben (kein Blau) */
  --tw-ring-color: rgba(197,58,58,.45);
  --tw-ring-offset-color: #fff;

  --notice-max: 1200px;
  --notice-max-xl: 1320px;
  --sidebar-w: 18rem; /* w-72 */
}
.dark{ --tw-ring-offset-color: #111827; }

/* ==========================================================
   2) Global UX: Selection + Default Focus
========================================================== */
::selection{ background: rgba(197,58,58,.22); }

:focus-visible{
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* ==========================================================
   3) Link Styles (nur wenn nicht ausdrücklich deaktiviert)
========================================================== */
a[href]:not(.no-link-style){
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--color-primary) 55%, transparent);
}
a[href]:not(.no-link-style):hover{
  text-decoration-color: var(--color-primary);
}

/* ==========================================================
   4) Sidebar Navigation (Light/Dark)
========================================================== */
aside .nav-link{
  color: var(--color-gray-700);
  text-decoration: none !important;
}
aside .nav-link:hover,
aside .nav-link:focus{
  color: var(--color-gray-900);
}
aside .nav-link .nav-dot{
  background: rgba(197,58,58,.35);
}
aside .nav-link.active{
  color: var(--color-primary) !important;
  font-weight: 800;
}
aside .nav-link.active .nav-dot{
  background: var(--color-primary);
}

/* Dark Sidebar */
.dark aside .nav-link{ color: rgba(255,255,255,.82); }
.dark aside .nav-link:hover,
.dark aside .nav-link:focus{ color: #fff; }
.dark aside .nav-link.active{ color: #fff !important; }
.dark aside .nav-link.active .nav-dot{ background: #fff; }

/* Sidebar Scrollbar */
aside::-webkit-scrollbar{ width: 6px; }
aside::-webkit-scrollbar-thumb{
  background: var(--color-primary);
  border-radius: 9999px;
}

/* ==========================================================
   5) Mobile Menu Overlay (Brandfarbe)
========================================================== */
#mobileMenu{ background-color: rgba(197,58,58,.92) !important; }

#mobileMenu #closeMenuBtn{
  width: 5rem;
  height: 5rem;
  font-size: 2rem;
  padding: 0;

  background: transparent;
  border: none;

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

  cursor: pointer;
  transition: transform .2s ease;
}
#mobileMenu #closeMenuBtn:hover,
#mobileMenu #closeMenuBtn:focus{
  transform: scale(1.12);
  outline: none; /* Fokus wird global via :focus-visible gehandhabt */
}

/* ==========================================================
   6) Ripple Effekt (optional)
========================================================== */
.ripple{ position: relative; overflow: hidden; }

.ripple .ripple-ink{
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background: rgba(255,255,255,.50);
  animation: ripple 600ms ease-out;
}
@keyframes ripple{
  to{ transform: translate(-50%, -50%) scale(2); opacity: 0; }
}

/* ==========================================================
   7) Scroll-Spy Active – nur Nav, nicht global .active
========================================================== */
.nav-link.active{ font-weight: 800; color: var(--color-primary); }
.nav-link.active .nav-dot{ background: var(--color-primary); }

/* ==========================================================
   8) A11y Menu UI
========================================================== */
#a11yMenu{
  position: fixed;
  bottom: 5rem;
  left: 1rem;
  width: 12rem;

  background-color: var(--color-gray-50);
  color: var(--color-gray-800);

  border-radius: .75rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
  z-index: 9998;
  overflow: hidden;

  border: 1px solid rgba(17,24,39,.08);
}
.dark #a11yMenu{
  background-color: rgba(17,24,39,.92);
  color: var(--color-gray-100);
  border: 1px solid rgba(255,255,255,.12);
}

#a11yMenu button{
  transition: background-color .15s ease, color .15s ease;
}
#a11yMenu button[aria-pressed="true"]{
  background-color: var(--color-primary) !important;
  color: #fff !important;
  font-weight: 900;
  border-left: 4px solid color-mix(in srgb, #000 12%, var(--color-primary)) !important;
}
#a11yMenu button[aria-pressed="true"]:hover{
  background-color: var(--color-primary-hover) !important;
}

@media (max-width: 1023px){
  #a11yMenu{ bottom: 6rem; left: 1rem; }
}

/* ==========================================================
   9) A11y: Fontsize / Reduce Motion / Invert / Focus Highlight
========================================================== */
/* Schriftgrößen-Stufen */
html.a11y-fontsize-decrease1{ font-size: 90% !important; }
html.a11y-fontsize-decrease2{ font-size: 80% !important; }
html.a11y-fontsize-decrease3{ font-size: 70% !important; }
html.a11y-fontsize-increase1{ font-size: 110% !important; }
html.a11y-fontsize-increase2{ font-size: 125% !important; }
html.a11y-fontsize-increase3{ font-size: 140% !important; }

/* Reduce Motion */
html.reduce-motion *,
html.reduce-motion *::before,
html.reduce-motion *::after{
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
html.reduce-motion [data-aos]{
  opacity: 1 !important;
  transform: none !important;
}

/* Invert Colors */
html.inverted-colors{
  filter: invert(1) hue-rotate(180deg) !important;
}
/* Medien wieder zurück-invertieren */
html.inverted-colors img,
html.inverted-colors video,
html.inverted-colors svg{
  filter: invert(1) hue-rotate(180deg) !important;
}

/* Focus Highlight: auch bei Klick (focus) + bei Keyboard (focus-visible) */
html.focus-highlight :is(a, button, input, select, textarea, summary, [tabindex]):focus,
html.focus-highlight :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
  outline: 6px dashed var(--color-primary-hover) !important;
  outline-offset: 4px !important;
  background: rgba(197,58,58,.12) !important;

  /* robust gegen Tailwind rings */
  box-shadow: 0 0 0 3px rgba(197,58,58,.35) !important;
}

/* ==========================================================
   10) Skip-Link
========================================================== */
.skip-link{
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translate(-50%, -1rem);
  opacity: 0;

  background: var(--color-primary);
  color: #fff;

  padding: .5rem 1rem;
  border-radius: .5rem;
  text-decoration: none;
  font-weight: 900;

  z-index: 10000;
  transition: transform .2s ease-out, opacity .2s ease-out;
}
.skip-link:focus{
  transform: translate(-50%, 0);
  opacity: 1;
}

/* ==========================================================
   11) Content Lesbarkeit: Öffnungszeiten + Sidebar-Kalender
========================================================== */
/* Hours Cards: Inhalt sicher lesbar */
#hours .day-card{ color: var(--color-gray-900); }
#hours .day-card :where(*){ color: inherit; opacity: 1; }

.dark #hours .day-card{ color: var(--color-gray-50); }
.dark #hours .day-card :where(*){ color: inherit; opacity: 1; }

/* Sidebar Mini-Kalender (JS füllt #calendar) */
#calendar{ color: var(--color-gray-900); }
#calendar :where(*){ color: inherit; opacity: 1 !important; }

.dark #calendar{ color: var(--color-gray-50); }
.dark #calendar :where(*){ color: inherit; opacity: 1 !important; }

/* Mini-Calendar Items (zusätzliche Absicherung) */
.mini-cal-item{ color: #111827; }
.dark .mini-cal-item{ color: #fff; }
/* Day-Label im Mini-Calendar (z.B. Mo/Di) */
.mini-cal-item .day-label{ color: #111827; }
.dark .mini-cal-item .day-label{ color: #fff; }

/* ==========================================================
   12) Services Accent-Leiste (optional)
========================================================== */
#services details{
  position: relative;
  border-radius: 1.5rem;
  overflow: hidden;
}
#services details::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width: 6px;
  background: linear-gradient(to bottom, rgba(197,58,58,.95), rgba(197,58,58,.35));
}

/* ==========================================================
   13) HERO CTA „Kontakt & Anfahrt“ immer lesbar
========================================================== */
#hero a[href="#contact"],
#hero a[href*="#contact"]{
  color: #fff !important;
}

/* ==========================================================
   14) Cookie Banner (modern, externes cookie.svg)
========================================================== */
.cookie-banner{
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 10001;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.cookie-banner.hidden{ display:none; }

.cookie-card{
  pointer-events: auto;
  width: min(980px, 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 14px;
  border-radius: 18px;

  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);

  border: 1px solid rgba(17,24,39,.10);
  box-shadow:
    0 18px 45px rgba(0,0,0,.10),
    0 2px 0 rgba(255,255,255,.65) inset;

  transform: translateY(10px);
  opacity: 0;
  animation: cookieIn .28s ease-out forwards;
}

@keyframes cookieIn{ to{ transform: translateY(0); opacity: 1; } }

.cookie-left{
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.cookie-icon{
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  display: grid;
  place-items: center;

  background: #fff;
  border: 1px solid rgba(17,24,39,.10);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);

  flex: 0 0 auto;
}

.cookie-icon-img{
  width: 22px;
  height: 22px;
  display: block;
}

/* Text */
.cookie-text{ min-width: 0; }
.cookie-title{
  font-weight: 900;
  letter-spacing: .02em;
  color: var(--color-gray-900);
  line-height: 1.15;
}
.cookie-desc{
  margin-top: 2px;
  color: var(--color-gray-700);
  font-size: .95rem;
  line-height: 1.25;
}
.cookie-link{
  color: var(--color-primary);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cookie-link:hover{ color: var(--color-primary-hover); }

/* Actions */
.cookie-actions{
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

/* Buttons */
.cookie-btn{
  border-radius: 9999px;
  padding: 10px 14px;
  font-weight: 900;
  font-size: .9rem;
  letter-spacing: .02em;
  line-height: 1;

  border: 1px solid transparent;
  text-decoration: none;

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

  transition: transform .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
  user-select: none;
}

.cookie-btn-solid{
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 10px 22px rgba(197,58,58,.22);
}
.cookie-btn-solid:hover{
  background: var(--color-primary-hover);
  transform: translateY(-1px);
}
.cookie-btn-solid:active{
  background: var(--color-primary-active);
  transform: translateY(0);
}

.cookie-btn-ghost{
  background: rgba(17,24,39,.04);
  color: var(--color-gray-800);
  border-color: rgba(17,24,39,.10);
}
.cookie-btn-ghost:hover{
  background: rgba(17,24,39,.07);
  transform: translateY(-1px);
}
.cookie-btn-ghost:active{ transform: translateY(0); }

/* Close */
.cookie-x{
  width: 38px;
  height: 38px;
  border-radius: 9999px;

  border: 1px solid rgba(17,24,39,.10);
  background: rgba(17,24,39,.04);
  color: var(--color-gray-800);

  display: grid;
  place-items: center;

  font-size: 20px;
  line-height: 1;

  transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}
.cookie-x:hover{
  background: rgba(17,24,39,.08);
  transform: translateY(-1px);
}
.cookie-x:active{ transform: translateY(0); }

.cookie-btn:focus-visible,
.cookie-x:focus-visible{
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* Dark Mode */
.dark .cookie-card{
  background: rgba(17,24,39,.82);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 18px 55px rgba(0,0,0,.35),
    0 1px 0 rgba(255,255,255,.08) inset;
}
.dark .cookie-title{ color: #fff; }
.dark .cookie-desc{ color: rgba(255,255,255,.86); }
.dark .cookie-link{ color: #fff; }

.dark .cookie-icon{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.14);
  box-shadow: none;
}

.dark .cookie-btn-ghost{
  background: rgba(255,255,255,.08);
  color: #fff;
  border-color: rgba(255,255,255,.14);
}
.dark .cookie-btn-ghost:hover{ background: rgba(255,255,255,.12); }

.dark .cookie-x{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.14);
  color: #fff;
}
.dark .cookie-x:hover{ background: rgba(255,255,255,.12); }

/* Responsive */
@media (max-width: 640px){
  .cookie-banner{ bottom: 84px; }
  .cookie-card{
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .cookie-actions{
    width: 100%;
    justify-content: flex-end;
  }
}

/* ==========================================================
   15) High-Contrast Mode (gezielt, ohne Tailwind global zu zerstören)
========================================================== */
html.high-contrast{
  --color-primary: #fff;
  --color-primary-hover: #fff;
  --color-primary-active: #fff;
  background: #000 !important;
}

html.high-contrast body{
  background: #000 !important;
  color: #fff !important;
}

html.high-contrast :is(main, section, header, footer){
  background: #000 !important;
  color: #fff !important;
}

html.high-contrast main :where(
  p, li, span, small, em, strong,
  h1, h2, h3, h4, h5, h6
){
  color: #fff !important;
  opacity: 1 !important;
}

html.high-contrast a{
  color: #fff !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

html.high-contrast :focus-visible{
  outline: 3px solid #fff !important;
  outline-offset: 3px !important;
}

html.high-contrast.focus-highlight :is(a, button, input, select, textarea, summary, [tabindex]):focus,
html.high-contrast.focus-highlight :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
  outline: 4px solid #fff !important;
  outline-offset: 4px !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Sidebar (Nav) */
html.high-contrast aside{
  background: #000 !important;
  color: #fff !important;
  border-left: 2px solid #fff !important;
}

html.high-contrast aside .nav-link{ color: #fff !important; }
html.high-contrast aside .nav-dot{ background: #fff !important; }

html.high-contrast aside .nav-link.active{
  font-weight: 900 !important;
  text-decoration: underline !important;
}

html.high-contrast #sideNav .nav-link{
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Öffnungszeiten Cards (#hours) */
html.high-contrast #hours .day-card{
  background: #000 !important;
  border: 2px solid #fff !important;
  box-shadow: none !important;
  color: #fff !important;
}
html.high-contrast #hours .day-card :where(*){
  color: inherit !important;
  opacity: 1 !important;
}
html.high-contrast #hours .day-card.ring-2{
  --tw-ring-color: #fff !important;
}

/* Sidebar Kalender (#calendar) */
html.high-contrast #calendar{ color: #fff !important; }
html.high-contrast #calendar :where(*){
  color: inherit !important;
  opacity: 1 !important;
}
html.high-contrast #calendar > *{
  background: #000 !important;
  border: 2px solid #fff !important;
  box-shadow: none !important;
}

/* Services Details (#services) */
html.high-contrast #services details{
  background: #000 !important;
  border: 2px solid #fff !important;
  box-shadow: none !important;
}
html.high-contrast #services details::before{ background: #fff !important; }
html.high-contrast #services details :where(*){
  color: #fff !important;
  opacity: 1 !important;
}

/* Weitere Leistungen (#inhouse) */
html.high-contrast #inhouse article{
  background: #000 !important;
  border: 2px solid #fff !important;
  box-shadow: none !important;
}
html.high-contrast #inhouse article :where(*){
  color: #fff !important;
  opacity: 1 !important;
}

html.high-contrast #inhouse article > span.absolute{
  background: #000 !important;
  border: 2px solid #fff !important;
  box-shadow: none !important;
  color: #fff !important;
}
html.high-contrast #inhouse article > span.absolute :is(svg, i){
  color: #fff !important;
  fill: #fff !important;
  stroke: #fff !important;
}

/* Team (#team) */
html.high-contrast #team{
  background: #000 !important;
  color: #fff !important;
}
html.high-contrast #team :is(article, .group){
  background: #000 !important;
  border: 2px solid #fff !important;
  box-shadow: none !important;
}
html.high-contrast #team :is(article, .group) :where(*){
  color: #fff !important;
  opacity: 1 !important;
}
html.high-contrast #team article .absolute.inset-0{
  display: none !important;
}

/* A11y Menu in HC */
html.high-contrast #a11yMenu{
  background: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}
html.high-contrast #a11yMenu button[aria-pressed="true"]{
  background: #fff !important;
  color: #000 !important;
  border-left: 6px solid #fff !important;
}

/* Cookie Banner in HC */
html.high-contrast .cookie-card{
  background: #000 !important;
  border: 2px solid #fff !important;
  box-shadow: none !important;
}
html.high-contrast .cookie-title,
html.high-contrast .cookie-desc,
html.high-contrast .cookie-link{
  color: #fff !important;
}
html.high-contrast .cookie-icon{
  background: #000 !important;
  border: 2px solid #fff !important;
  box-shadow: none !important;
}
html.high-contrast .cookie-icon-img{
  filter: invert(1) brightness(1.1);
}

html.high-contrast .cookie-btn-ghost{
  background: transparent !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}
html.high-contrast .cookie-btn-solid{
  background: #fff !important;
  color: #000 !important;
  border: 2px solid #fff !important;
}
html.high-contrast .cookie-x{
  background: transparent !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}

html.high-contrast #cookieBanner .cookie-actions :is(a, button){
  box-shadow: none !important;
}

/* Skip-Link in HC */
html.high-contrast .skip-link{
  background: #fff !important;
  color: #000 !important;
  border: 2px solid #fff !important;
}

/* Buttons / Button-like Elemente im High-Contrast */
html.high-contrast :is(
  button,
  .btn,
  a[role="button"],
  [role="button"],
  input[type="button"],
  input[type="submit"]
){
  background: transparent !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}

html.high-contrast :is(
  a, button, input[type="button"], input[type="submit"], [role="button"]
).bg-primary{
  background: #fff !important;
  color: #000 !important;
  border: 2px solid #fff !important;
}
html.high-contrast :is(
  a, button, input[type="button"], input[type="submit"], [role="button"]
).bg-primary :where(*){
  color: inherit !important;
}

html.high-contrast :is(.ring, .ring-1, .ring-2){
  --tw-ring-color: #fff !important;
}

html.high-contrast :is(a, button, [role="button"])[class*="bg-white"]{
  background: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}

html.high-contrast a[href*="#contact"],
html.high-contrast a[href="#contact"]{
  background: transparent !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}

/* ==========================================================
   16) Site Notice (Info/News) – Premium UI
========================================================== */
.notice-shell{
  position: relative;
  border-radius: 24px;
  padding: 18px;
  background:
    radial-gradient(1200px 400px at 10% 0%, rgba(197,58,58,.18), transparent 60%),
    radial-gradient(900px 380px at 100% 20%, rgba(17,24,39,.10), transparent 55%),
    rgba(255,255,255,.78);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(17,24,39,.08);
  box-shadow:
    0 22px 60px rgba(0,0,0,.10),
    0 1px 0 rgba(255,255,255,.7) inset;
}

.dark .notice-shell{
  background:
    radial-gradient(1200px 420px at 10% 0%, rgba(197,58,58,.22), transparent 60%),
    radial-gradient(900px 420px at 100% 20%, rgba(255,255,255,.10), transparent 55%),
    rgba(17,24,39,.70);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 28px 70px rgba(0,0,0,.45),
    0 1px 0 rgba(255,255,255,.08) inset;
}

.notice-top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px 6px;
}

.notice-brand{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.notice-icon{
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  display: grid;
  place-items: center;
  background: rgba(197,58,58,.12);
  border: 1px solid rgba(197,58,58,.22);
  box-shadow: 0 10px 26px rgba(197,58,58,.18);
  flex: 0 0 auto;
}

.notice-icon-svg{
  width: 22px;
  height: 22px;
  color: var(--color-primary);
}

.notice-kicker{
  display: inline-flex;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 900;
  color: var(--color-primary);
}

.notice-title{
  font-family: var(--font-heading, inherit);
  font-weight: 900;
  font-size: clamp(1.25rem, 1.1rem + 1vw, 1.75rem);
  letter-spacing: .02em;
  color: var(--color-gray-900);
  margin-top: 2px;
  line-height: 1.15;
  white-space: normal;
  word-break: break-word;
}
.dark .notice-title{ color: #fff; }

.notice-subtitle{
  margin-top: 6px;
  font-size: 0.95rem;
  color: rgba(55,65,81,.78);
  line-height: 1.35;
}
.dark .notice-subtitle{ color: rgba(255,255,255,.78); }

.notice-meta{
  text-align: right;
  padding-top: 6px;
  flex: 0 0 auto;
}

.notice-meta-label{
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 900;
  color: rgba(55,65,81,.60);
}
.dark .notice-meta-label{ color: rgba(255,255,255,.55); }

.notice-meta-value{
  font-size: 13px;
  font-weight: 900;
  color: rgba(17,24,39,.80);
  margin-top: 4px;
}
.dark .notice-meta-value{ color: rgba(255,255,255,.85); }

.notice-divider{
  height: 1px;
  margin: 10px 12px 14px;
  background: linear-gradient(to right,
    rgba(197,58,58,.35),
    rgba(17,24,39,.10),
    rgba(197,58,58,.20)
  );
}
.dark .notice-divider{
  background: linear-gradient(to right,
    rgba(197,58,58,.45),
    rgba(255,255,255,.12),
    rgba(197,58,58,.25)
  );
}

.notice-grid{
  display: grid;
  gap: 12px;
  padding: 0 12px 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 860px){
  .notice-grid{ grid-template-columns: 1fr; }
  .notice-meta{ display: none; }
}

/* Card */
.notice-card{
  border-radius: 18px;
  padding: 14px 14px 14px;
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(17,24,39,.08);
  box-shadow: 0 14px 35px rgba(0,0,0,.08);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.dark .notice-card{
  background: rgba(17,24,39,.55);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
}

.notice-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 50px rgba(0,0,0,.12);
  border-color: rgba(197,58,58,.25);
}

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

.notice-tag{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: rgba(197,58,58,.10);
  border: 1px solid rgba(197,58,58,.18);
}

.notice-pin{
  width: 34px;
  height: 34px;
  border-radius: 9999px;
  display: grid;
  place-items: center;
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 12px 24px rgba(197,58,58,.22);
  flex: 0 0 auto;
}

.notice-card-title{
  margin-top: 10px;
  font-family: var(--font-heading, inherit);
  font-weight: 900;
  font-size: 1.05rem;
  color: var(--color-gray-900);
  line-height: 1.2;
}
.dark .notice-card-title{ color: #fff; }

.notice-card-date{
  margin-top: 6px;
  font-size: 0.85rem;
  color: rgba(55,65,81,.75);
}
.dark .notice-card-date{ color: rgba(255,255,255,.72); }

.notice-card-text{
  margin-top: 10px;
  font-size: 0.95rem;
  line-height: 1.45;
  color: rgba(17,24,39,.82);
}
.dark .notice-card-text{ color: rgba(255,255,255,.86); }

/* ==========================================================
   17) Site Notice – Layout / Wrapper / Release (clean)
   Zweck:
   - Standard max-width (1200)
   - XL max-width (1320)
   - Desktop: ignoriert lg:pr-72 (Sidebar rechts)
========================================================== */

/* Section spacing */
#siteNotice{
  padding-top: 2.5rem;
  padding-bottom: 0.25rem;
}

/* Wrapper: JS toggelt .hidden */
.site-notice-wrapper{
  width: 100%;
  margin-top: 2.5rem;
  margin-bottom: 3rem;
}
.site-notice-wrapper.hidden{
  display: none !important;
}
.site-notice-wrapper:not(.hidden){
  display: flex;
  justify-content: center;
}

/* Inner shell */
#siteNotice .notice-shell{
  width: 100%;
  max-width: var(--notice-max);
  margin: 0 auto;
}

/* XL Screens */
@media (min-width: 1400px){
  #siteNotice .notice-shell{
    max-width: var(--notice-max-xl);
  }
}

/* Desktop Fix:
   Dein <main> hat lg:pr-72 -> content wäre schmal.
   Wir machen den Notice-Wrapper so breit wie "Viewport minus Sidebar".
*/
@media (min-width: 1024px){
  /* Wrapper wird so breit wie Viewport minus Sidebar */
  .site-notice-wrapper{
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100vw - var(--sidebar-w)); /* Sidebar rechts */
    max-width: none;
  }

  /* Shell soll am Desktop nicht mehr künstlich gedeckelt sein */
  #siteNotice .notice-shell{
    max-width: none;   /* <-- DAS ist der entscheidende Fix */
    width: 100%;
    margin: 0 auto;
  }
}

/* ==========================================================
   High-Contrast Fix for Site Notice (bleibt wie gehabt)
========================================================== */
html.high-contrast #siteNotice .notice-shell{
  background: #000 !important;
  border: 2px solid #fff !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html.high-contrast #siteNotice .notice-divider{
  background: #fff !important;
  opacity: 1 !important;
}

html.high-contrast #siteNotice :is(.notice-title, .notice-subtitle, .notice-meta-label, .notice-meta-value){
  color: #fff !important;
  opacity: 1 !important;
}

html.high-contrast #siteNotice .notice-card{
  background: #000 !important;
  border: 2px solid #fff !important;
  box-shadow: none !important;
}

html.high-contrast #siteNotice .notice-tag{
  background: transparent !important;
  border: 2px solid #fff !important;
  color: #fff !important;
}

html.high-contrast #siteNotice .notice-pin{
  background: #fff !important;
  color: #000 !important;
  box-shadow: none !important;
}

html.high-contrast #siteNotice :is(.notice-card-title, .notice-card-date, .notice-card-text){
  color: #fff !important;
  opacity: 1 !important;
}

/* ==========================================================
   Site Notice – Breite Fix (Desktop: bis Sidebar-Rand)
========================================================== */

/* Standard: wie alle Sections (zentriert, sauberer Rand) */
.site-notice-inner{
  width: 100%;
  max-width: var(--notice-max);
  margin: 0 auto;
  padding: 0 1.5rem; /* entspricht px-6 */
}

/* XL Screens */
@media (min-width: 1400px){
  .site-notice-inner{
    max-width: var(--notice-max-xl);
  }
}

/* Desktop: main hat lg:pr-72 -> das gleichen wir aus */
@media (min-width: 1024px){
  .site-notice-inner{
    max-width: none; /* nicht mehr deckeln */
    width: calc(100vw - var(--sidebar-w)); /* Sidebar rechts abziehen */
    margin: 0 auto;
  }

  /* die notice-shell darf dann auch voll laufen */
  #siteNotice .notice-shell{
    max-width: none;
    width: 100%;
  }
}

/* ==========================================================
   18) Admin Login Modal (Popup) – Fallback CSS (ohne Tailwind)
========================================================== */
#adminLoginModal{
  position: fixed;
  inset: 0;
  z-index: 10050;
}

#adminLoginModal[aria-hidden="true"]{
  display: none !important;
}

#adminLoginBackdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

#adminLoginDialog{
  position: relative;
  width: 100%;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

#adminLoginPanel{
  width: min(520px, 100%);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(17,24,39,.10);
  box-shadow: 0 30px 80px rgba(0,0,0,.22);
}

.dark #adminLoginPanel{
  background: rgba(17,24,39,.92);
  border: 1px solid rgba(255,255,255,.12);
}

#adminLoginClose{
  border: 1px solid rgba(17,24,39,.10);
  background: rgba(17,24,39,.04);
  cursor: pointer;
}
.dark #adminLoginClose{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: #fff;
}

#adminLoginForm input{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(17,24,39,.12);
  padding: 12px 14px;
  background: rgba(255,255,255,.9);
}
.dark #adminLoginForm input{
  border-color: rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: #fff;
}
#adminLoginForm input:focus-visible{
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* Fix Admin Login Button Position (falls Tailwind Utilities fehlen/weggepurged werden) */
#info { position: relative; }
#adminLoginOpen{
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  left: auto;
}

/* EOF */