:root{
  --bg-page: #ffffff;
  --bg-card: #ffffff;
  --text: #0d0d12;
  --muted: #5a5a6a;
  --line: rgba(0,0,0,.12);
  --shadow: 0 12px 45px rgba(0,0,0,.12);
  --radius: 18px;

  --social-bg: #f8f9fa;
  --social-icon: #0d0d12;

  --page-bg: var(--bg-page);
  --gradient: linear-gradient(138deg, #ffffff 2%, #f0f2f5 100%);
  --gradient2: linear-gradient(138deg, #f0f2f5 2%, #ffffff 100%);
}

html[data-theme="dark"]{
  --bg-page: #000000;
  --bg-card: #121212;
  --text: #f3f3f6;
  --muted: #b9b9c6;
  --line: rgba(255,255,255,.12);
  --shadow: 0 20px 60px rgba(0,0,0,.15);

  --social-bg: #1a1a1a;
  --social-icon: #f3f3f6;

  --page-bg: var(--bg-page);
  --gradient: linear-gradient(138deg, #000000FF 2%, #07263FFF 100%);
  --gradient2: linear-gradient(138deg, #07263FFF 2%, #000000FF 100%);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --bg-page: #000000;
    --bg-card: #121212;
    --text: #f3f3f6;
    --muted: #b9b9c6;
    --line: rgba(255,255,255,.12);
    --shadow: 0 20px 60px rgba(0,0,0,.15);

    --social-bg: #1a1a1a;
    --social-icon: #f3f3f6;

    --page-bg: var(--bg-page);
    --gradient: linear-gradient(138deg, #000000FF 2%, #07263FFF 100%);
    --gradient2: linear-gradient(138deg, #07263FFF 2%, #000000FF 100%);
  }
}

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

body{

  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: var(--page-bg);

  min-height: 100vh;
  min-height: 100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow-y:auto;

  padding:
    max(16px, env(safe-area-inset-top))
    16px
    max(16px, env(safe-area-inset-bottom))
    16px;

  transition: background .25s ease, color .25s ease;
}

@media (max-width: 860px), (max-height: 740px){
  body{ align-items:flex-start; }
}

.wrap{
  width:min(980px, 100%);
  display:grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap:18px;
  margin: 0 auto;
    padding-bottom: 10em;
}
@media (max-width: 860px){
  .wrap{ grid-template-columns:1fr; }
}

dialog a {
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px var(--text);
    transition: all .25s ease;
}
dialog a:hover {
    color: var(--text);
    text-decoration: none;
    border-bottom: 3px var(--text);
}

.card{
  background-size: 100% 100%;
  background-position: 0px 0px;
  background-image: var(--gradient);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  /* overflow:hidden; */ /* Deaktiviert für sticky child elements */
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
  display: flex;
  flex-direction: column;
}
.card2 {
    background-image: var(--gradient2);
}

.hero{
  padding:32px 28px 26px 28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:16px;
}

#random {
    font-weight: bold;
}
#random span {
    font-weight: normal;
}

.logo{
  width: min(520px, 100%);
  height:auto;
  border-radius: 16px;
  border: 1px solid var(--line);
  padding: 12px;
  background: #ffffff;
  position: sticky;
  top: 10px;
  z-index: 10;
  min-height: 5.5em;
    box-shadow: var(--shadow);
}

.hero h1{
  margin: 6px 0 4px 0;
  font-size: clamp(22px, 2.3vw, 30px);
  letter-spacing:.2px;
}
.hero p{
  margin:0;
  color:var(--muted);
  line-height:1.45;
}

.actions{
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.section-title{
  margin: 10px 0 2px 0;
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 2px 0 2px;
}

.btn{
  appearance:none;
  border: 1px solid var(--line);
  background: var(--bg-card);
  color: var(--text);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 16px;
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  cursor:pointer;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
html[data-theme="dark"] .btn{ background: rgba(255,255,255,.06); }
html[data-theme="dark"] .logo {
  filter: invert(1);
  /*background: #000;*/
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .logo {
      filter: invert(1) sepia(0.26) hue-rotate(185deg) saturate(1.35) brightness(1.06) contrast(1.05);
      /*background: #000;*/
  }
}

.btn:hover{ background: rgba(0,0,0,.04); }
html[data-theme="dark"] .btn:hover{ background: rgba(255,255,255,.10); }

.btn:active{ transform: none; }
.btn strong{ font-weight:600; }
.btn small{ color: var(--muted); font-size: 13px; }

/* Social icons: links neben Text + zentriert zur 2-Zeilen-Höhe */
.btn-main{
  display:grid;
  grid-template-columns: 22px 1fr;
  column-gap:12px;
  align-items:center;
  min-width:0;
}
.btn-icon{
  width:22px;
  height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 22px;
  color: var(--text);
}
.btn-icon svg{
  width:22px;
  height:22px;
  display:block;
}

.footer{
  padding:16px 22px 20px 22px;
  border-top: 1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  justify-content:space-between;
  color: var(--muted);
  font-size: 14px;
  flex-grow: 1;
}

@media (max-width: 860px) {
  .footer {
    flex-direction: column;
    text-align: center;
    gap: 20px;
    font-size: 16px;
  }
  .footer .links {
    margin-left: 0;
    justify-content: center;
    width: 100%;
  }
}

@media (min-width: 861px) {
  .footer {
    font-size: 18px;
  }
}

.links {
  display:flex;
  flex-wrap:nowrap;
  gap:16px;
  align-items: flex-start;
  margin-left: auto;
}
.link {
  color: var(--text);
  text-decoration:none;
  border-bottom: 1px solid transparent;
  padding-bottom:2px;
  background:none;
  border-top:0;
  border-left:0;
  border-right:0;
  cursor:pointer;
  font:inherit;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
    min-width: 2.75em;
}

.link span {
  font-size: 10px;
  font-family: inherit;
  font-weight: 500;
  text-transform: none;
}

@media (min-width: 861px) {
  .link span {
    font-size: 12px;
  }
}

.link::before {
  line-height: 1;
}

dialog{
  width: min(860px, calc(100% - 24px));
  border: 1px solid var(--line);
  border-radius: 18px;
  background-size: 100% 100%;
  background-position: 0px 0px;
  background-image: var(--gradient);
  color: var(--text);
  box-shadow: var(--shadow);
  padding: 0;
  overflow:hidden;
}
dialog::backdrop{
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(4px);
}

.modal-head{
  padding: 18px 18px 14px 18px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  border-bottom: 1px solid var(--line);
  background: rgba(0,0,0,.02);
}
html[data-theme="dark"] .modal-head{ background: rgba(255,255,255,.05); }

.modal-head h2{
  margin:0;
  font-size: 18px;
  letter-spacing:.2px;
}

.icon-btn{
  border: 1px solid var(--line);
  background: var(--bg-card);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 12px;
  cursor:pointer;
}
html[data-theme="dark"] .icon-btn{ background: rgba(255,255,255,.06); }
.icon-btn:hover{ background: rgba(0,0,0,.04); }
html[data-theme="dark"] .icon-btn:hover{ background: rgba(255,255,255,.10); }

.modal-body{
  padding: 18px;
  line-height: 1.55;
  max-height: min(72vh, 720px);
  overflow:auto;
}
.modal-body h1 {
    line-height: 1.1;
    padding: 0;
    margin: 0;
}
.modal-body h4 {
    margin: 0.5em 0 0;
}
.modal-body h3{
  margin: 16px 0 6px 0;
  font-size: 17px;
  font-stretch: expanded;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.modal-body p{ margin: 0 0 10px 0; }
.modal-body a{ color: var(--text); }

.modal-foot{
  padding: 14px 18px 18px 18px;
  border-top: 1px solid var(--line);
  display:flex;
  justify-content:flex-end;
  background: rgba(0,0,0,.02);
}
html[data-theme="dark"] .modal-foot{ background: rgba(255,255,255,.05); }

.kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  margin-left: 8px;
}

/* Map modal */
.map-dialog{
  width: min(1100px, calc(100% - 24px));
}
.modal-body--nopad{
  padding:0;
}
.modal-body--no-scroll{
  overflow:hidden;
  max-height: none;
}
.map-container{
  position:relative;
  width:100%;
  aspect-ratio: 4 / 3;
  min-height: 360px;
}
.map-iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
@media (max-width: 480px){
  .map-container{
    min-height: 300px;
    aspect-ratio: 3 / 4;
  }
}



.social-share-container {
  z-index: 1030;
}

.fixed-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
}

.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }

.flex-row            { flex-direction: row !important; }
.flex-column         { flex-direction: column !important; }
.flex-row-reverse    { flex-direction: row-reverse !important; }
.flex-column-reverse { flex-direction: column-reverse !important; }

.flex-wrap         { flex-wrap: wrap !important; }
.flex-nowrap       { flex-wrap: nowrap !important; }
.flex-wrap-reverse { flex-wrap: wrap-reverse !important; }

.justify-content-start   { justify-content: flex-start !important; }
.justify-content-end     { justify-content: flex-end !important; }
.justify-content-center  { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around  { justify-content: space-around !important; }
.justify-content-evenly  { justify-content: space-evenly !important; }

.align-items-start    { align-items: flex-start !important; }
.align-items-end      { align-items: flex-end !important; }
.align-items-center   { align-items: center !important; }
.align-items-baseline { align-items: baseline !important; }
.align-items-stretch  { align-items: stretch !important; }

@media (min-width: 576px) {
  .justify-content-sm-start   { justify-content: flex-start !important; }
  .justify-content-sm-end     { justify-content: flex-end !important; }
  .justify-content-sm-center  { justify-content: center !important; }
  .justify-content-sm-between { justify-content: space-between !important; }
  .justify-content-sm-around  { justify-content: space-around !important; }
  .justify-content-sm-evenly  { justify-content: space-evenly !important; }
}

@media (min-width: 768px) {
  .justify-content-md-start   { justify-content: flex-start !important; }
  .justify-content-md-end     { justify-content: flex-end !important; }
  .justify-content-md-center  { justify-content: center !important; }
  .justify-content-md-between { justify-content: space-between !important; }
  .justify-content-md-around  { justify-content: space-around !important; }
  .justify-content-md-evenly  { justify-content: space-evenly !important; }
}

.container-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

/**
 * SOCIAL SHARE
 */
.social-share-container {
  /* top: unset; left: 0; bottom: 0; right: 0; background-color: rgba(255,255,255,1); margin: 0; padding: 0; */
}

@media (max-width: 991.98px) {
  .social-share .facebook,
  .social-share .map {
    display: none !important;
  }
  .social-share-container {
    top: unset;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: var(--social-bg);
    margin: 0;
    padding: 0;
  }
}

.social-share {
    display: flex;
    align-items: center;
    justify-content: center;
  background-size: 100% 100%;
  background-position: 0px 0px;
  background-image: var(--gradient);
  padding: 1em 0 0 0;
  border-radius: 2.88em 2.88em 0 0;
  box-shadow: 0 0 75px 0 rgba(0, 0, 0, 0.35);
  transition: background-color 200ms ease-in-out;
}

.social-share:hover {
  background-color: var(--bg-card);
  filter: brightness(1.05);
}

.social-share a {
  font-size: clamp(1rem, 1rem + 4vw, 2.8rem);
  padding: 0.25em 0.5em 0.5em;
  color: var(--social-icon);
  text-decoration: none;
  transition: color 0.2s ease-in-out;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.social-share a span {
  display: inline-block;
  text-indent: -999em;
  overflow: hidden;
}

.social-share a:before {
  margin-right: 0;
  line-height: 1;
}

.social-share a:hover {
  color: var(--muted);
}

@media (max-width: 991.98px) {
  .social-share {
    width: 100%;
    text-align: center;
    padding: 0.8em 1.25em 1em;
    line-height: 1em;
    border-radius: 0 0 0 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
}




/**
 * FONT AWSOME
 */
/* Font Awesome */
@font-face {
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url('./webfonts/fa-solid-900.woff2') format('woff2'),
       url('./webfonts/fa-solid-900.ttf') format('truetype');
}

@font-face {
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('./webfonts/fa-regular-400.woff2') format('woff2'),
       url('./webfonts/fa-regular-400.ttf') format('truetype');
}

@font-face {
  font-family: 'Font Awesome 6 Brands';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('./webfonts/fa-brands-400.woff2') format('woff2'),
       url('./webfonts/fa-brands-400.ttf') format('truetype');
}

@font-face {
  font-family: 'FontAwesome';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('./webfonts/fa-v4compatibility.woff2') format('woff2'),
       url('./webfonts/fa-v4compatibility.ttf') format('truetype');
}

.fa, .fab, .far, .fas {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
}

.fa {
  font-family: 'FontAwesome', 'Font Awesome 6 Free';
  font-weight: 900;
}

.fab {
  font-family: 'Font Awesome 6 Brands';
  font-weight: 400;
}

.far {
  font-family: 'Font Awesome 6 Free';
  font-weight: 400;
}

.fas {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
}

.fa-home:before { content: '\f015'; }
.fa-user:before { content: '\f007'; }
.fa-search:before { content: '\f002'; }
.fa-envelope:before { content: '\f0e0'; }
.fa-phone:before { content: '\f095'; }
.fa-check:before { content: '\f00c'; }
.fa-times:before { content: '\f00d'; }
.fa-plus:before { content: '\f067'; }
.fa-minus:before { content: '\f068'; }
.fa-star:before { content: '\f005'; }
.fa-heart:before { content: '\f004'; }
.fa-arrow-right:before { content: '\f061'; }
.fa-arrow-left:before { content: '\f060'; }
.fa-arrow-up:before { content: '\f062'; }
.fa-arrow-down:before { content: '\f063'; }
.fa-download:before { content: '\f019'; }
.fa-upload:before { content: '\f093'; }
.fa-print:before { content: '\f02f'; }
.fa-calendar:before { content: '\f073'; }
.fa-clock:before { content: '\f017'; }
.fa-map-marker:before { content: '\f041'; }
.fa-parking:before { content: '\f540'; }
.fa-route:before { content: '\f4d7'; }
.fa-directions:before { content: '\f5eb'; }
.fa-location-arrow:before { content: '\f124'; }
.fa-map-location-dot:before { content: '\f5a0'; }
.fa-external-link:before { content: '\f08e'; }
.fa-bars:before { content: '\f0c9'; }
.fa-cog:before { content: '\f013'; }
.fa-trash:before { content: '\f1f8'; }
.fa-pencil:before { content: '\f303'; }
.fa-info-circle:before { content: '\f05a'; }
.fa-exclamation-triangle:before { content: '\f071'; }
.fa-exclamation-circle:before { content: '\f06a'; }
.fa-question-circle:before { content: '\f059'; }
.fa-eye:before { content: '\f06e'; }
.fa-eye-slash:before { content: '\f070'; }
.fa-lock:before { content: '\f023'; }
.fa-unlock:before { content: '\f09c'; }
.fa-camera:before { content: '\f030'; }
.fa-image:before { content: '\f03e'; }
.fa-video:before { content: '\f03d'; }
.fa-music:before { content: '\f001'; }
.fa-file:before { content: '\f15b'; }
.fa-folder:before { content: '\f07b'; }
.fa-share:before { content: '\f064'; }
.fa-shopping-cart:before { content: '\f07a'; }
.fa-credit-card:before { content: '\f09d'; }
.fa-comment:before { content: '\f075'; }
.fa-comments:before { content: '\f086'; }
.fa-user-plus:before { content: '\f234'; }
.fa-user-minus:before { content: '\f503'; }
.fa-bell:before { content: '\f0f3'; }
.fa-bell-slash:before { content: '\f1f6'; }
.fa-wifi:before { content: '\f1eb'; }
.fa-bluetooth:before { content: '\f293'; }
.fa-battery-full:before { content: '\f240'; }
.fa-globe:before { content: '\f0ac'; }
.fa-briefcase:before { content: '\f0b1'; }
.fa-graduation-cap:before { content: '\f19d'; }
.fa-lightbulb:before { content: '\f0eb'; }
.fa-thumbs-up:before { content: '\f164'; }
.fa-thumbs-down:before { content: '\f165'; }
.fa-scissors:before { content: '\f0c4'; }

.fa-facebook:before { content: '\f09a'; }
.fa-instagram:before { content: '\f16d'; }
.fa-google:before { content: '\f1a0'; }
.fa-whatsapp:before { content: '\f232'; }
.fa-twitter:before { content: '\f099'; }
.fa-linkedin:before { content: '\f08c'; }
.fa-youtube:before { content: '\f167'; }
.fa-xing:before { content: '\f168'; }
.fa-tiktok:before { content: '\f05b1'; }
.fa-pinterest:before { content: '\f0d2'; }
.fa-snapchat:before { content: '\f2ab'; }
.fa-discord:before { content: '\f392'; }
.fa-telegram:before { content: '\f2c6'; }
.fa-vimeo:before { content: '\f194'; }
.fa-github:before { content: '\f09b'; }
.fa-wordpress:before { content: '\f19a'; }
.fa-apple:before { content: '\f179'; }
.fa-android:before { content: '\f17b'; }
.fa-windows:before { content: '\f17a'; }
.fa-amazon:before { content: '\f270'; }
.fa-paypal:before { content: '\f1ed'; }
.fa-stripe:before { content: '\f425'; }
.fa-spotify:before { content: '\f1bc'; }

.fa-ambulance:before { content: '\f0f9'; }
.fa-wheelchair:before { content: '\f193'; }
.fa-hospital:before { content: '\f0f8'; }
.fa-stethoscope:before { content: '\f0f1'; }
.fa-user-md:before { content: '\f0f0'; }
.fa-medkit:before { content: '\f0fa'; }
.fa-first-aid:before { content: '\f479'; }
.fa-heartbeat:before { content: '\f21e'; }
.fa-tooth:before { content: '\f5c9'; }
.fa-syringe:before { content: '\f48e'; }
.fa-pills:before { content: '\f484'; }
.fa-prescription-bottle:before { content: '\f485'; }
.fa-thermometer:before { content: '\f2c7'; }
.fa-flask:before { content: '\f0c3'; }
.fa-vial:before { content: '\f492'; }
.fa-microscope:before { content: '\f610'; }
.fa-phone-alt:before { content: '\f879'; }
.fa-mobile:before { content: '\f10b'; }
.fa-mail-forward:before { content: '\f064'; }

.fa-fw { text-align: center; width: 1.25em; }
.fa-xs { font-size: 0.75em; }
.fa-sm { font-size: 0.875em; }
.fa-lg { font-size: 1.25em; line-height: 1; vertical-align: -0.1em; }
.fa-1x { font-size: 1em; }
.fa-2x { font-size: 2em; }
.fa-3x { font-size: 3em; }
.fa-4x { font-size: 4em; }
.fa-5x { font-size: 5em; }
.fa-6x { font-size: 6em; }
.fa-7x { font-size: 7em; }
.fa-8x { font-size: 8em; }
.fa-9x { font-size: 9em; }
.fa-10x { font-size: 10em; }

.fa-rotate-90 { transform: rotate(90deg); }
.fa-rotate-180 { transform: rotate(180deg); }
.fa-rotate-270 { transform: rotate(270deg); }

.fa-facebook { color: #1877f2; }
.fa-instagram { color: #e4405f; }
.fa-whatsapp { color: #25d366; }
.fa-google { color: #4285f4; }

/* Anfrage-Konfigurator Styles */
.form-floating {
    position: relative;
    margin-bottom: 10px;
}

.form-floating > .btn {
    padding: 20px 12px 6px 12px !important;
    height: auto !important;
    min-height: 54px;
}

.form-floating > label {
    position: absolute;
    top: 0;
    left: 0;
    padding: 16px 12px;
    pointer-events: none;
    transition: all 0.2s ease;
    color: var(--muted);
    font-size: 14px;
}

.form-floating > .btn:focus ~ label,
.form-floating > .btn:not(:placeholder-shown) ~ label,
.form-floating > .btn:valid ~ label {
    transform: translateY(-10px) scale(0.85);
    padding-top: 14px;
    opacity: 0.7;
}

/* Fix für Select Floating Label, wenn ein Wert ausgewählt ist */
.form-floating select.btn:not([value=""]) ~ label {
    transform: translateY(-10px) scale(0.85);
    padding-top: 14px;
    opacity: 0.7;
}

/* Fallback für Date-Inputs, da diese oft einen Default-Placeholder haben */
.form-floating > input[type="date"] ~ label {
    transform: translateY(-10px) scale(0.85);
    padding-top: 14px;
    opacity: 0.7;
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
}

.services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.category h3 {
    margin-bottom: 12px;
}

#charCounter {
    pointer-events: none;
}

/* Pills Selection */
.pill-checkbox {
    cursor: pointer;
}

.pill-btn {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: var(--bg-card);
    color: var(--text);
    font-size: 14px;
    transition: all 0.2s ease;
}

html[data-theme="dark"] .pill-btn {
    background: rgba(255,255,255,.06);
}

.pill-checkbox.active .pill-btn {
    background: var(--text);
    color: var(--bg-page);
    border-color: var(--text);
}

/* Select Styling */
.form-floating select.btn {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235a5a6a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px 10px;
    padding-right: 36px !important;
}

html[data-theme="dark"] .form-floating select.btn {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23b9b9c6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-position: right 12px center;
}
select.btn:hover,
html[data-theme="dark"] select.btn:hover{
    background-position: right 12px center;
    background-size: 14px 10px;
    background-repeat: no-repeat;
}

html[data-theme="dark"] input::-webkit-calendar-picker-indicator {
    background: none;
}
html[data-theme="dark"] input::-webkit-datetime-edit {
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    text-transform: uppercase;
}

/* Textarea Floating Label Fix */
.form-floating textarea.btn {
    padding-top: 24px !important;
}

.form-floating textarea.btn ~ label {
    top: 0;
    padding: 16px 12px;
}

.form-floating textarea.btn:focus ~ label,
.form-floating textarea.btn:not(:placeholder-shown) ~ label {
    transform: translateY(-10px) scale(0.85);
    opacity: 0.7;
}


/* Hide "Close with Esc" on mobile/touch devices or devices without a hover (likely no Esc key) */
@media (any-pointer: coarse), (any-hover: none) {
    .esc-info {
        display: none !important;
    }
}