html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Basis-Icon: Zeigt nach rechts (geschlossen) */
[data-bs-toggle="collapse"] .bi-chevron-right {
    transition: transform 0.3s ease;
    display: inline-block;
}

/* Drehung um 90 Grad nach unten (offen / nicht collapsed) */
[data-bs-toggle="collapse"]:not(.collapsed) .bi-chevron-right {
    transform: rotate(90deg);
}

/* Einheitliche Breite für die Einheiten-Labels (cm, €, Min etc.) */
.input-group-text {
    min-width: 65px; /* Ein guter Wert, damit auch "€/h" sauber reinpasst */
    justify-content: center;
    background-color: #f8f9fa; /* Ein ganz leichtes Grau für den "Werkzeug"-Look */
    color: #6c757d;
    font-weight: 500;
}

/* Verhindert das "Springen" der Seite bei Fokus-Effekten */
.form-floating > .form-control:focus {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
}

/* Entfernt die Pfeile in Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Entfernt die Pfeile in Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

/* UX: Eingabefelder beim Fokus leicht hervorheben */
.form-control:focus {
    border-color: #38bdf8;
    box-shadow: 0 0 0 0.25rem rgba(56, 189, 248, 0.1);
}

/* In site.css oder im <style> Block */
html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Mindestens 100% der Viewport-Höhe */
}

main {
    flex: 1 0 auto; /* Lässt den Inhaltsbereich wachsen, um den Footer nach unten zu drücken */
}

footer {
    flex-shrink: 0; /* Verhindert, dass der Footer gestaucht wird */
}

/* Verhindert, dass Popper die Koordinaten in Input-Groups falsch berechnet */
.input-group-text [data-bs-toggle="tooltip"] {
    display: inline-block;
    position: relative;
}

:root {
    /* Ein kräftiges, modernes Cyan/Teal statt dem Standard-Blau */
    --bs-primary: #0ea5e9;
    --bs-primary-rgb: 14, 165, 233;
    /* Optional: Ein dunkleres Grau für die Navbar */
    --bs-dark-rgb: 15, 23, 42;
}

/* Den Button-Hover Effekt etwas smoother machen */
.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: #0284c7;
    --bs-btn-active-bg: #0369a1;
}

/* Den Text-Primary überall anpassen */
.text-primary {
    color: var(--bs-primary) !important;
}

[data-bs-theme="dark"] .card {
    background-color: #1e293b; /* Ein sehr dunkles Blau-Grau statt tiefschwarz */
    border-color: #334155;
}

[data-bs-theme="dark"] .bg-light-subtle {
    background-color: #0f172a !important; /* Etwas dunklerer Hintergrund für Card-Bodys */
}

/* Die Floating Labels im Dark Mode lesbarer machen */
[data-bs-theme="dark"] .form-floating > label {
    color: #94a3b8;
}

/* Spezifische Anpassungen für den Dark Mode */
[data-bs-theme="dark"] .card-header.bg-white {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border-bottom: 1px solid #334155;
}

/* Die Willkommens-Box auf der Index-Seite */
[data-bs-theme="dark"] .hero-box { /* Falls du eine Klasse wie hero-box nutzt, sonst .bg-white anpassen */
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border: 1px solid #334155;
}

/* Die Input-Gruppen-Texte (cm, Min, €) */
[data-bs-theme="dark"] .input-group-text {
    background-color: #334155;
    border-color: #475569;
    color: #cbd5e1;
}

[data-bs-theme="dark"] .bg-light.p-3.rounded-3 {
    background-color: #334155 !important; /* Dunklerer Hintergrund */
    color: #f8fafc;
}

[data-bs-theme="dark"] #res-per-piece {
    color: #0ea5e9; /* Dein Primary-Blau/Teal für den Preis */
}


:root {
    /* Ein sattes, energetisches Laser-Orange (Amber 600) */
    --bs-primary: #ea580c;
    --bs-primary-rgb: 234, 88, 12;
    /* Fokus-Ring (der Schein um Felder beim Klicken) */
    --bs-focus-ring-color: rgba(234, 88, 12, 0.25);
    /* Links */
    --bs-link-color: #ea580c;
    --bs-link-hover-color: #c2410c;
}

/* Im Dark Mode darf das Orange etwas leuchtender sein (Amber 500) */
[data-bs-theme="dark"] {
    --bs-primary: #f59e0b;
    --bs-primary-rgb: 245, 158, 11;
    --bs-link-color: #fbbf24;
    --bs-link-hover-color: #f59e0b;
}

/* Buttons perfekt abstimmen */
.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: #d97706; /* Etwas dunkler beim Drüberfahren */
    --bs-btn-hover-border-color: #b45309;
    --bs-btn-active-bg: #b45309;
    /* Textfarbe auf Orange: Im Light Mode weiß, im Dark Mode oft schwarz besser lesbar */
    --bs-btn-color: #fff;
}

[data-bs-theme="dark"] .btn-primary {
    --bs-btn-color: #000; /* Bester Kontrast auf hellem Orange */
    font-weight: 600;
}

/* Fallback-Farbe im CSS, falls JS extrem langsam ist */
html[data-bs-theme="dark"] {
    background-color: #0f172a; /* Dein dunkler Blauton */
}