/* ==== Variablen (anpassen) ==== */
:root{
  --gutter: 20px;
  --blue: #003664;

  --brown: #8b5e3c;
  --brown-10: #a1744d;   /* lighten($brown, 10%) */

  --red: #e00201;
  --red-10: #ff3a39;     /* lighten($red, 10%) */

  --font_size_xxl: 2.25rem;
  --font_size_xl: 1.875rem;
  --font_size_lg: 1.125rem;
  --font_size: 1rem;

  /* Hinweis: CSS-Variablen funktionieren nicht in Media-Queries.
     Für $bp-sm verwende ich Bootstraps sm = 576px. */
}

body {
    background: #e6ebf2;
}

p, .text-blue {
    color: var(--blue);
}

.text-red {
  color: var(--red);
}

.contact-section {
    color: var(--blue);
    background: #f6f7f7;
    border-radius: 0.5rem;
    box-shadow: 0 8px 32px 0 rgba(60,60,70,0.08);
    /*padding: 2.5rem 2rem;*/
}
.contact-title {
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: .8rem;
}
.form-label {
    font-weight: 500;
}

.btn-primary {
    background: #e00201;
    border: none;
    font-weight: 600;
    padding: .6rem 2.5rem;
    border-radius: 2rem;
}

.btn-primary:hover {
    background: #ad0201;
}

.btn.disabled, .btn:disabled, fieldset:disabled .btn {
  color: #ffffff;
  pointer-events: none;
  background-color: #ad020166;
  border-color: #ad020166;
  opacity: 1;
}

input.form-control, select.form-control {
    border: var(--bs-border-width) solid var(--bs-border-color);
}

.form-control:focus {
  outline:  var(--bs-border-width) solid var(--bs-border-color) !important;
  box-shadow:  inherit !important;
  border: var(--bs-border-width) solid var(--bs-border-color); !important;  /* Entfernt den Bootstrap-Glow */
  border-color: var(--bs-border-color) !important; /* Optional: macht den Border "unsichtbar" */
}


input.form-control {
  border-radius: 5px;
}


/* ==== Grundlinien ==== */
.line,
.line_right{
  display:flex;
  flex-shrink:1;
  width:100%;
  justify-content:center;
  align-items:center;
  text-align:center;
  box-sizing:border-box;
}

.line::before,
.line::after{
  box-sizing:border-box;
  content:"";
  border-top:1px solid var(--blue);
  margin:0;
  flex-grow:1;
  flex-basis:20px;
}

.line::before{ margin-right: var(--gutter); }
.line::after{  margin-left:  var(--gutter); }

/* Rechte Linie nach dem Text */
.line_right{ text-align:left; }

.line_right::after{
  box-sizing:border-box;
  content:"";
  border-top:1px solid var(--blue);
  margin:0;
  flex-grow:1;
  flex-basis:20px;
  margin-left: var(--gutter);
}

/* Floating-Labels auf deinen Stil bringen */
.form-floating > .form-control,
.form-floating > textarea.form-control{
  /*border: 1.6px solid #bfd2df;*/
  border-radius: 5px;
  box-shadow: none;
  background-color: #fff;
  color: var(--blue);
}

/* dezenter Fokus */
.form-floating > .form-control:focus{
  border-color: var(--blue);
  box-shadow: 0 0 0 .2rem rgba(0,54,100,.12);
}

.form-floating > textarea.form-control {
  height: 135px; 
  padding-top: 50px !important;
}

/* Label-Optik */
.form-floating > label{
  color: #5f7c93;              /* dezent blau-grau */
  font-weight: 500;
  padding: .6rem .75rem;       /* kompakter */
  top: 7px;
}


.form-floating > textarea.form-control + label{
  white-space: normal
}


@media only screen and (max-width: 991px) {
  .form-floating > textarea + label {
    width: 100%;      
  }

  .form-floating > textarea.form-control:focus, 
  .form-floating > textarea.form-control:not(:placeholder-shown) {
    padding-top: 4rem !important;
  }
}

.form-floating > .form-control-plaintext ~ label, .form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label {
  color: rgba(var(--bs-body-color-rgb),.65);
  transform: scale(.75) translateY(-.7rem) translateX(.15rem);
}

/* wenn aktiv/gefüllt -> Label stärker/blau */
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label{
  color: var(--blue);
  opacity: 1;
}

/* Pflichtstern farbig halten */
.text-red{ color: var(--red); }

/* Textarea-Mindesthöhe (BS verlangt fix/auto) */
textarea.form-control{ min-height: 160px; }

/* Checkboxen inline sauber ausrichten */
.form-check-inline{
  display: inline-flex; align-items: center; gap: .4rem;
}
.form-check-input{ accent-color: var(--blue); }

@media only screen and (max-width: 575px) {
  .main.row {
    margin-left: 0;
    margin-right: 0;
  }

  .form-floating > textarea.form-control:focus, 
  .form-floating > textarea.form-control:not(:placeholder-shown) {
    padding-top: 4rem;
  }
}