/*
 * Sidebar
 */

@media (min-width: 768px) {
  .sidebar .offcanvas-lg {
    position: -webkit-sticky;
    position: sticky;
    top: 48px;
  }
  .navbar-search {
    display: block;
  }
}

.sidebar .nav-link {
  font-size: .875rem;
  font-weight: 500;
}

.sidebar .nav-link.active {
  color: #2470dc;
}

.sidebar-heading {
  font-size: .75rem;
}
/*ERROR*/
.error {
  color: var(--bs-body-color);
  font-size: 7rem;
  position: relative;
  line-height: 1;
  width: 12.5rem;
}

@-webkit-keyframes noise-anim {
  0% {
    clip: rect(49px, 9999px, 40px, 0);
  }
  5% {
    clip: rect(75px, 9999px, 72px, 0);
  }
  10% {
    clip: rect(97px, 9999px, 93px, 0);
  }
  15% {
    clip: rect(15px, 9999px, 9px, 0);
  }
  20% {
    clip: rect(14px, 9999px, 92px, 0);
  }
  25% {
    clip: rect(18px, 9999px, 94px, 0);
  }
  30% {
    clip: rect(17px, 9999px, 20px, 0);
  }
  35% {
    clip: rect(71px, 9999px, 59px, 0);
  }
  40% {
    clip: rect(42px, 9999px, 84px, 0);
  }
  45% {
    clip: rect(56px, 9999px, 25px, 0);
  }
  50% {
    clip: rect(46px, 9999px, 14px, 0);
  }
  55% {
    clip: rect(47px, 9999px, 1px, 0);
  }
  60% {
    clip: rect(64px, 9999px, 58px, 0);
  }
  65% {
    clip: rect(89px, 9999px, 92px, 0);
  }
  70% {
    clip: rect(56px, 9999px, 39px, 0);
  }
  75% {
    clip: rect(80px, 9999px, 71px, 0);
  }
  80% {
    clip: rect(8px, 9999px, 13px, 0);
  }
  85% {
    clip: rect(66px, 9999px, 68px, 0);
  }
  90% {
    clip: rect(68px, 9999px, 4px, 0);
  }
  95% {
    clip: rect(56px, 9999px, 14px, 0);
  }
  100% {
    clip: rect(28px, 9999px, 53px, 0);
  }
}

@keyframes noise-anim {
  0% {
    clip: rect(49px, 9999px, 40px, 0);
  }
  5% {
    clip: rect(75px, 9999px, 72px, 0);
  }
  10% {
    clip: rect(97px, 9999px, 93px, 0);
  }
  15% {
    clip: rect(15px, 9999px, 9px, 0);
  }
  20% {
    clip: rect(14px, 9999px, 92px, 0);
  }
  25% {
    clip: rect(18px, 9999px, 94px, 0);
  }
  30% {
    clip: rect(17px, 9999px, 20px, 0);
  }
  35% {
    clip: rect(71px, 9999px, 59px, 0);
  }
  40% {
    clip: rect(42px, 9999px, 84px, 0);
  }
  45% {
    clip: rect(56px, 9999px, 25px, 0);
  }
  50% {
    clip: rect(46px, 9999px, 14px, 0);
  }
  55% {
    clip: rect(47px, 9999px, 1px, 0);
  }
  60% {
    clip: rect(64px, 9999px, 58px, 0);
  }
  65% {
    clip: rect(89px, 9999px, 92px, 0);
  }
  70% {
    clip: rect(56px, 9999px, 39px, 0);
  }
  75% {
    clip: rect(80px, 9999px, 71px, 0);
  }
  80% {
    clip: rect(8px, 9999px, 13px, 0);
  }
  85% {
    clip: rect(66px, 9999px, 68px, 0);
  }
  90% {
    clip: rect(68px, 9999px, 4px, 0);
  }
  95% {
    clip: rect(56px, 9999px, 14px, 0);
  }
  100% {
    clip: rect(28px, 9999px, 53px, 0);
  }
}

.error:after {
  content: attr(data-text);
  position: absolute;
  left: 2px;
  text-shadow: -1px 0 #e74a3b;
  top: 0;
  color: var(--bs-body-color);
  background: var(--bs-body-bg);
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim 2s infinite linear alternate-reverse;
}

@-webkit-keyframes noise-anim-2 {
  0% {
    clip: rect(16px, 9999px, 10px, 0);
  }
  5% {
    clip: rect(22px, 9999px, 29px, 0);
  }
  10% {
    clip: rect(6px, 9999px, 68px, 0);
  }
  15% {
    clip: rect(85px, 9999px, 95px, 0);
  }
  20% {
    clip: rect(65px, 9999px, 91px, 0);
  }
  25% {
    clip: rect(93px, 9999px, 68px, 0);
  }
  30% {
    clip: rect(10px, 9999px, 27px, 0);
  }
  35% {
    clip: rect(37px, 9999px, 25px, 0);
  }
  40% {
    clip: rect(12px, 9999px, 23px, 0);
  }
  45% {
    clip: rect(40px, 9999px, 18px, 0);
  }
  50% {
    clip: rect(19px, 9999px, 71px, 0);
  }
  55% {
    clip: rect(2px, 9999px, 35px, 0);
  }
  60% {
    clip: rect(16px, 9999px, 69px, 0);
  }
  65% {
    clip: rect(8px, 9999px, 65px, 0);
  }
  70% {
    clip: rect(30px, 9999px, 57px, 0);
  }
  75% {
    clip: rect(14px, 9999px, 4px, 0);
  }
  80% {
    clip: rect(39px, 9999px, 30px, 0);
  }
  85% {
    clip: rect(22px, 9999px, 35px, 0);
  }
  90% {
    clip: rect(58px, 9999px, 71px, 0);
  }
  95% {
    clip: rect(34px, 9999px, 90px, 0);
  }
  100% {
    clip: rect(67px, 9999px, 68px, 0);
  }
}

@keyframes noise-anim-2 {
  0% {
    clip: rect(16px, 9999px, 10px, 0);
  }
  5% {
    clip: rect(22px, 9999px, 29px, 0);
  }
  10% {
    clip: rect(6px, 9999px, 68px, 0);
  }
  15% {
    clip: rect(85px, 9999px, 95px, 0);
  }
  20% {
    clip: rect(65px, 9999px, 91px, 0);
  }
  25% {
    clip: rect(93px, 9999px, 68px, 0);
  }
  30% {
    clip: rect(10px, 9999px, 27px, 0);
  }
  35% {
    clip: rect(37px, 9999px, 25px, 0);
  }
  40% {
    clip: rect(12px, 9999px, 23px, 0);
  }
  45% {
    clip: rect(40px, 9999px, 18px, 0);
  }
  50% {
    clip: rect(19px, 9999px, 71px, 0);
  }
  55% {
    clip: rect(2px, 9999px, 35px, 0);
  }
  60% {
    clip: rect(16px, 9999px, 69px, 0);
  }
  65% {
    clip: rect(8px, 9999px, 65px, 0);
  }
  70% {
    clip: rect(30px, 9999px, 57px, 0);
  }
  75% {
    clip: rect(14px, 9999px, 4px, 0);
  }
  80% {
    clip: rect(39px, 9999px, 30px, 0);
  }
  85% {
    clip: rect(22px, 9999px, 35px, 0);
  }
  90% {
    clip: rect(58px, 9999px, 71px, 0);
  }
  95% {
    clip: rect(34px, 9999px, 90px, 0);
  }
  100% {
    clip: rect(67px, 9999px, 68px, 0);
  }
}

.error:before {
  content: attr(data-text);
  position: absolute;
  left: -2px;
  text-shadow: 1px 0 #4e73df;
  top: 0;
  color: var(--bs-body-color);
  background: var(--bs-body-bg);
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim-2 3s infinite linear alternate-reverse;
}
/* Definiert die Animation: von unsichtbar/unten nach sichtbar/oben */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Diese Klasse triggert die Animation */
.animate-fade-up {
    animation: fadeInUp 0.6s ease-out both;
}

/* Optional: Verzögerung für einzelne Elemente (Stufen-Effekt) */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }

/*
 * Navbar
 */

.navbar-brand {
  padding-top: .75rem;
  padding-bottom: .75rem;width: 180px;
}
/*@media (min-width: 768px) {.navbar-brand {width: 180px;}}
@media (max-width: 768px) {.navbar-brand {width: 80px;}}*/
.navbar .form-control {
  padding: .75rem 1rem;
}
/*body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}*/

html {
  height: -webkit-fill-available;
}

main {
  height: 100vh;
  height: -webkit-fill-available;
  max-height: 100vh;
  overflow-x: auto;
  overflow-y: hidden;
}

.dropdown-toggle { outline: 0; }

.btn-toggle {
  padding: .25rem .5rem;
  font-weight: 600;
  color: var(--bs-emphasis-color);
  background-color: transparent;
}
.btn-toggle:hover,
.btn-toggle:focus {
  color: rgba(var(--bs-emphasis-color-rgb), .85);
  background-color: var(--bs-tertiary-bg-rgb);
}

.btn-toggle::before {
  width: 1.25em;
  line-height: 0;
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
  transition: transform .35s ease;
  transform-origin: .5em 50%;
}

[data-bs-theme="dark"] .btn-toggle::before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28255,255,255,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
}

.btn-toggle[aria-expanded="true"] {
  color: rgba(var(--bs-emphasis-color-rgb), .85);
}
.btn-toggle[aria-expanded="true"]::before {
  transform: rotate(90deg);
}

.btn-toggle-nav a {
  padding: .1875rem .5rem;
  margin-top: .125rem;
  margin-left: 1.25rem;
}
.btn-toggle-nav a:hover,
.btn-toggle-nav a:focus {
  background-color: var(--bs-secondary-bg);
}

.scrollarea {
  overflow-y: auto;
}
.scrollinput{display: none;}
.btn-ss {
--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;
}
.btn-sh {
--bs-btn-padding-y: .1rem; --bs-btn-padding-x: .4rem; --bs-btn-font-size: 1.3rem;
}
/*Logo*/
.brand {fill: var(--bs-highlight-color);text-align: center;}
#brand {
    fill: #DEE2E6;
}
#brand-big {
    fill: var(--bs-highlight-color);
}
/*Unterschriftsfeld*/
.signature-pad-container {
    position: relative;
    background-color: #ffffff;
    /* Logo als Hintergrund */
    background-image: url('/inc/img/Diensta_Logo.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60% auto;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.signature-pad-container::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.88);
    z-index: 1;
    pointer-events: none;
}

/* Das Canvas liegt über dem Logo */
.signature-pad-container canvas {
    position: relative;
    z-index: 2;
    display: block;
    width: 100% !important;
    height: 100% !important;
}
.signature-display-box {
    position: relative;
    width: 100%;
    min-height: 160px;
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 20px;
    
    /* Das Logo direkt vom Server laden */
    background-image: url('/inc/img/Diensta_Logo.svg'); 
    background-repeat: no-repeat;
    background-position: center;
	background-size: 95% auto; 
    filter: grayscale(100%); 
}

.signature-display-box::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(255, 255, 255, 0.97); 
    z-index: 1;
}

.signature-img {
    position: relative;
    z-index: 2;
    max-width: 100%;
    max-height: 140px;
    height: auto;
}

/* Container-Anpassung */
.signature-pad-sep-container {
    position: relative;
    width: 100%;
    /* Berechnet: 100% Höhe minus Platz für Überschrift (80px) und Buttons (100px) */
    height: calc(100vh - 90px); 
    min-height: 250px;
    background-color: #ffffff;
    background-image: url('/inc/img/Diensta_Logo.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70% auto;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    overflow: hidden;
    z-index: 5; /* Unter den Buttons */
}

/* Die halbtransparente Schicht ÜBER dem Logo, aber UNTER dem Canvas */
.signature-pad-sep-container::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.88);
    z-index: 6; 
    pointer-events: none;
}

.signature-pad-sep-container canvas {
    position: absolute; /* Absolut im Container */
    top: 0; left: 0;
    z-index: 7; /* Ganz oben zum Zeichnen */
    width: 100% !important;
    height: 100% !important;
}

/* Die Button-Leiste fixieren */
.sticky-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px;
    z-index: 1000; /* Über allem anderen */
}



/*Border Pulse*/
@keyframes pulse1 {
  0% {
    box-shadow: 0 0 0 0 rgba(77, 187, 202, 0.7); /* Start: kleiner Schatten, fast unsichtbar */
  }
  70% {
    box-shadow: 0 0 0 10px rgba(77, 187, 202, 0); /* Mittel: Schatten wird größer und transparent */
  }
  100% {
    box-shadow: 0 0 0 0 rgba(77, 187, 202, 0); /* Ende: wieder zurücksetzen */
  }
}

.pul {
position: absolute; margin: -25px;
background-color: #4DBBCA;
border-radius: 6px;
animation: pulse1 2s infinite;
color: #000000;
}

.sri {
border-radius: 3%;
border: 3px solid #4DBBCA;
}
/* Light Mode (Standard) */
.driverjs-theme {
  background-color: #fff;
  color: #212529;
}

/* Dark Mode Integration */
[data-bs-theme="dark"] .driverjs-theme {
  background-color: #2b3035 !important; /* Bootstrap Dark Grey */
  color: #dee2e6 !important;
  border: 1px solid #495057;
}

/* Den Pfeil des Popovers auch anpassen */
[data-bs-theme="dark"] .driver-popover-arrow {
  border-bottom-color: #2b3035 !important;
}
/* Zentriert den Pfeil horizontal bei Top/Bottom Platzierung */
.driver-popover-arrow-side-top,
.driver-popover-arrow-side-bottom {
    left: 50% !important;
    transform: translateX(-50%);
}

/* Zentriert den Pfeil vertikal bei Left/Right Platzierung */
.driver-popover-arrow-side-left,
.driver-popover-arrow-side-right {
    top: 50% !important;
    transform: translateY(-50%);
}
.driver-popover-next-btn, .driver-popover-done-btn {
    background-color: #0d6efd !important; /* Dein Bootstrap Primary */
    color: #fff !important;
    border: none !important;
    text-shadow: none !important;
    border-radius: 4px !important;
}

.driver-popover-next-btn:hover, .driver-popover-done-btn:hover {
    background-color: #0b5ed7 !important;
}

.driver-popover-prev-btn {
    color: #6c757d !important;
}
/* Das Popover selbst ein Stück nach rechts rücken */
.driverjs-theme {
    margin-left: 35px !important; /* Schiebt die ganze Box nach rechts */
    overflow: visible !important; /* Wichtig, damit der Avatar nicht abgeschnitten wird */
}

.driverjs-theme .ava {
    background-image: url(https://diensta.de/inc/img/ava.jpg);
    border-radius: 50% !important;
    background-size: cover;
    background-position: center;
    width: 60px;
    height: 60px;
    position: absolute;
    top: 0;
    left: 0;
    margin-top: -30px;
    margin-left: -30px; /* Jetzt hat er Platz, weil die Box nach rechts gerückt ist */
    border: 3px solid #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    z-index: 10000;
}
.avatar {
    background-image: url(https://diensta.de/inc/img/ava.jpg);
    border-radius: 50% !important;
    background-size: cover;
    background-position: center;
    width: 60px;
    height: 60px;
    margin-top: -30px;
    margin-left: -30px; /* Jetzt hat er Platz, weil die Box nach rechts gerückt ist */
    border: 3px solid #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    z-index: 10000;
}
/* Speziell für schmale Handy-Bildschirme */
@media (max-width: 576px) {
    .driverjs-theme {
        margin-left: 25px !important; 
        margin-right: 10px !important;
    }
    .driverjs-theme .ava {
        width: 50px;
        height: 50px;
        margin-top: -25px;
        margin-left: -25px;
    }
    /* Text im Popover ein bisschen einrücken, damit er nicht unter dem Avatar klebt */
    .driver-popover-description {
        padding-top: 10px;
    }
}

/* Dark Mode Rand-Anpassung */
[data-bs-theme="dark"] .driverjs-theme .ava, .avatar {
    border-color: #2b3035;
}

/* Verhindert, dass das Modal-Backdrop das Tutorial überlagert */
.modal-backdrop {
    z-index: 1040 !important;
}
.modal {
    z-index: 1050 !important;
}


/* Damit der Text nicht vom Avatar überlagert wird */
.driver-popover-description {
    padding-top: 15px !important;
}

.bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }
      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
      .b-example-divider {
        width: 100%;
        height: 3rem;
        background-color: #0000001a;
        border: solid rgba(0, 0, 0, 0.15);
        border-width: 1px 0;
        box-shadow:
          inset 0 0.5em 1.5em #0000001a,
          inset 0 0.125em 0.5em #00000026;
      }
      .b-example-vr {
        flex-shrink: 0;
        width: 1.5rem;
        height: 100vh;
      }
      .bi {
        vertical-align: -0.125em;
        fill: currentColor;
      }
      .nav-scroller {
        position: relative;
        z-index: 2;
        height: 2.75rem;
        overflow-y: hidden;
      }
      .nav-scroller .nav {
        display: flex;
        flex-wrap: nowrap;
        padding-bottom: 1rem;
        margin-top: -1px;
        overflow-x: auto;
        text-align: center;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
      }
      .btn-bd-primary {
        --bd-violet-bg: #712cf9;
        --bd-violet-rgb: 112.520718, 44.062154, 249.437846;
        --bs-btn-font-weight: 600;
        --bs-btn-color: var(--bs-white);
        --bs-btn-bg: var(--bd-violet-bg);
        --bs-btn-border-color: var(--bd-violet-bg);
        --bs-btn-hover-color: var(--bs-white);
        --bs-btn-hover-bg: #6528e0;
        --bs-btn-hover-border-color: #6528e0;
        --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
        --bs-btn-active-color: var(--bs-btn-hover-color);
        --bs-btn-active-bg: #5a23c8;
        --bs-btn-active-border-color: #5a23c8;
      }
      .bd-mode-toggle {
        z-index: 1500;
      }
      .bd-mode-toggle .bi {
        width: 1em;
        height: 1em;
      }
      .bd-mode-toggle .dropdown-menu .active .bi {
        display: block !important;
      }
    .progress-alert {
        position: relative;
        overflow: hidden; /* Wichtig, damit der Balken nicht übersteht */
    }
.alert-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    /* Weiß-transparent sorgt auf JEDER Alert-Farbe für Kontrast */
    background: rgba(255, 255, 255, 0.5); 
    width: 100%;
    animation: alert-timeout 4000ms linear forwards;
    /* Optional: Ein leichter Schein macht es edler */
    box-shadow: 0 -1px 4px rgba(255, 255, 255, 0.5);
}
    @keyframes alert-timeout {
        from { width: 100%; }
        to { width: 0%; }
    }
/* Standardmäßig: Pad verstecken, Hinweis zeigen */
.signature-pad-container {
    display: none;
}
#signature-phonepad {
    display: block;
}
.signature-pad-container canvas {
    width: 100%;
    height: 100%;
    touch-action: none; /* Verhindert Scrollen beim Unterschreiben */
}

/* Nur im Querformat (Landscape) auf mobilen Geräten/kleinen Screens */
@media (orientation: landscape) {
    .signature-pad-container {
        display: block;
    }
    #signature-phonepad {
        display: none;
    }
}

/* Optional: Auf dem Desktop (großer Monitor) soll es immer sichtbar sein */
@media (min-width: 1024px) {
    .signature-pad-container {
        display: block;
    }
    #signature-phonepad {
        display: none;
    }
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
#small-row {margin: -2rem;}
#table-n {display: none;}
#table-m {display: block;}
/*#signature-pad {display: none;}
#signature-modal {display: none;}
#signature-modal-2 {display: flex;}
#signature-phonepad {display: block;}*/
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
#small-row {margin: -2rem;}
#table-n {display: block;}
#table-m {display: none;}
/*#signature-pad {display: block;}
#signature-modal {display: flex;}
#signature-modal-2 {display: none;}
#signature-phonepad {display: none;}*/
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
#small-row {margin: -2rem;}
#table-n {display: block;}
#table-m {display: none;}
/*#signature-pad {display: block;}
#signature-modal {display: flex;}
#signature-modal-2 {display: none;}
#signature-phonepad {display: none;}*/
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
#table-n {display: block;}
#table-m {display: none;}
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
#table-n {display: block;}
#table-m {display: none;}
}

@media print {
    /* 1. Alle Accordion-Inhalte erzwingen */
    .accordion-collapse {
        display: block !important;
        visibility: visible !important;
        height: auto !important;
    }

    /* 2. Accordion-Header (Buttons) optisch für den Druck anpassen */
    .accordion-button {
        display: block !important;
        background-color: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
    }

    /* 3. Icons und unnötige UI-Elemente (Pfeile) ausblenden */
    .accordion-button::after {
        display: none !important;
    }

    /* 4. Schatten und unnötige Abstände entfernen */
    .accordion-item {
        border: none !important;
        border-bottom: 1px solid #eee !important;
        margin-bottom: 1rem !important;
        box-shadow: none !important;
    }

    /* 5. Den Drucken-Button selbst beim Drucken verstecken */
    .btn, button, .mt-5 {
        display: none !important;
    }
    
    /* 6. Textfarbe auf echtes Schwarz für bessere Lesbarkeit */
    .text-muted {
        color: #000 !important;
    }
}

/* Entfernt den weißen/blauen Fokus-Rahmen bei den Tab-Buttons */
.nav-pills .nav-link:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Optional: Wenn du den btn-outline-primary Look nutzt, 
   verhindert das das "Aufblitzen" des Standard-Rahmens */
.nav-link.active {
    outline: none !important;
}
.nav-pills .nav-link.active {
    box-shadow: 0 0 10px rgba(13, 110, 253, 0.2) !important; /* Sehr dezenter blauer Glow */
}
/* 1. Den Standard-Focus-Ring von Bootstrap & Browser hart unterbinden */
.nav-pills .nav-link, 
.nav-pills .nav-link:focus, 
.nav-pills .nav-link:active {
    outline: 0 !important;
    box-shadow: none !important;
}

/* 2. Speziell für den Dark-Mode-Effekt bei Buttons */
button:focus:not(:focus-visible) {
    outline: 0 !important;
    box-shadow: none !important;
}

/* 3. Falls das 'tabindex="0"' im Tab-Content den Rand erzeugt: */
.tab-pane:focus {
    outline: 0 !important;
    box-shadow: none !important;
}
/* Animation für das Einblenden */
#pwaInstallCard {
    animation: pwaSlideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pwaSlideUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Verhindert, dass der Content am unteren Rand unter dem Banner klebt */
body.pwa-visible {
    padding-bottom: 80px; 
}
/* Auf großen Bildschirmen den Footer-Link immer zeigen (optional) */
@media (min-width: 992px) {
    #footerPwaLink {
        display: block !important;
    }
}

/* Sanfter Puls-Effekt für den Footer-Link */
@keyframes pwa-subtle-pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; filter: drop-shadow(0 0 2px var(--bs-primary)); }
    100% { transform: scale(1); opacity: 1; }
}

.pwa-pulse {
    animation: pwa-subtle-pulse 3s infinite ease-in-out;
}

/* Optimierung für das Banner-Icon */
.pwa-icon-box {
    width: 45px;
    height: 45px;
    border-radius: 8px;
    background-image: url('/inc/img/icon-192.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
#successalert {
    backdrop-filter: blur(8px); /* Macht den Alert leicht transparent-gläsern */
}



.timeline {
    position: relative;
    padding-left: 80px;
}

.timeline::before {
    content: "";
    position: absolute;
    left: 40px;
    top: 0;
    width: 4px;
    height: 100%;
    border-radius: 10px;
    background: linear-gradient(
        to bottom,
        rgba(220,53,69,0.9),
        rgba(255,193,7,0.9) 50%,
        rgba(25,135,84,0.9)
    );
    opacity: 0.6;
}

/* WICHTIG */
.timeline-item {
    position: relative;
    padding: 10px 15px;
}

/* DOT */
.timeline-dot {
    position: absolute;
    left: -38px;              /* relativ zum Item */
    top: 4px;
    transform: translateX(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(0,0,0,0.15);
    z-index: 2;
    transition: transform 0.3s ease;
    box-sizing: border-box;
}
/* Farbvarianten */
.dot-problem {
    background: linear-gradient(135deg, #dc3545, #b02a37);
}

.dot-idea {
    background: linear-gradient(135deg, #ffc107, #d39e00);
    color: #212529;
}

.dot-solution {
    background: linear-gradient(135deg, #198754, #146c43);
}

/* ===== Glass Effect Cards ===== */
.card {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

/* Hover leicht anheben */
.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08);
}
[data-bs-theme="dark"] .card {
    background: rgba(30, 30, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
}
/* ===== Timeline Hover Effect ===== */

.timeline-content {
    transition: all 0.3s ease;
    padding: 10px 15px;
    border-radius: 12px;
}

.timeline-content:hover {
    background: rgba(0, 0, 0, 0.03);
    transform: translateX(6px);
}

[data-bs-theme="dark"] .timeline-content:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Dark Mode Anpassung */
[data-bs-theme="dark"] .timeline-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Dot beim Hover leicht skalieren */
.timeline-item:hover .timeline-dot {
    transform: translateX(-50%) scale(1.2);
}
/* ===== Page Load Animation ===== */

.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-up.show {
    opacity: 1;
    transform: translateY(0);
}

.clickable-row { cursor: pointer; transition: background 0.15s; }
    .clickable-row:hover { background-color: rgba(0,0,0,0.03) !important; }