/* ---------- 1. Fonts einbinden ---------- */
/* Justice League – nur für große Überschriften */
@font-face {
    font-family: "JusticeLeague";
    src: url("/static/fonts/Justice-League.woff2") format("woff2");
    font-display: block;
    font-weight: 400;
    font-style: normal;
}

/* Riposte Regular */
@font-face {
    font-family: "Riposte";
    src: url("/static/fonts/Riposte-Regular.woff2") format("woff2");
    font-display: block;
    font-weight: 400;
    font-style: normal;
}

/* Riposte Light */
@font-face {
    font-family: "Riposte";
    src: url("/static/fonts/Riposte-Light.woff2") format("woff2");
    font-display: block;
    font-weight: 300;
    font-style: normal;
}

/* Riposte Bold */
@font-face {
    font-family: "Riposte";
    src: url("/static/fonts/Riposte-Bold.woff2") format("woff2");
    font-display: block;
    font-weight: 700;
    font-style: normal;
}

html, body { height:100%; }                         /* damit cover funktioniert */


/* ---------- 2. Grund-Typografie ---------- */
html, body {
    font-family: "Riposte", system-ui, sans-serif;
    font-weight: 400;
    color: #ffffff;
    background: #f8f9fa00;
    margin: 0;
    padding: 0;
}

/* h1 – Justice League
h1, h2, h3, h4, h5, h6 {
    color: #000000;
    font-family: "Justice-League", Verdana, Arial, sans-serif;
    font-weight: 400;
    line-height: 1.4;
    text-transform: none;
    font-style:normal
} */
 h1, h2, h3, h4, h5, h6 {
      font-family: "JusticeLeague", Verdana, Arial, sans-serif !important;
      font-weight: 400;
    }
/* Weitere Überschriften – Riposte Bold */
h1{
font-weight: 200;

  /* deutlich größer … */
  font-size: clamp(2.6rem, 3vw + 2.6rem, 5rem);
  line-height: 1.15;
}

/* Leichtgewichtiger Fließtext (optional) */
.small, .hint {
    font-family: "Riposte", sans-serif;
    font-weight: 300;      /* Light */
    font-size: .9rem;
    color: #555;
}

/* ---------- 3. Bestehende Styles beibehalten / leicht anpassen ---------- */
header {
    font-family: "Justice-League", Verdana, Arial, sans-serif;
    color: #fff;
    
}

fieldset {
    border: 1px solid #ccd;
    padding: 1rem;
    margin-bottom: 1rem;
    background: #fff;
}



.rounded-10 { border-radius: 10px !important; }
.rounded-top-10 { border-top-left-radius:10px !important;
                                    border-top-right-radius:10px !important; }

.rounded-20 { border-radius: 10px !important; }
.rounded-top-20 { border-top-left-radius:10px !important;
                                    border-top-right-radius:10px !important; }

/* ──────────────────────────────────────────────────────────────

   Link->Rechts-Animation · Schwarz / Grau · 10-px-Streifen
   ────────────────────────────────────────────────────────────── */
   .progress .progress-bar.progress-bar-striped{
    /* 1) zweifarbiges Stripe-Muster --------------------------- */
    background-image:
        repeating-linear-gradient(
            90deg,           /* horizontal Streifen */
            #111  0 10px,    /* tiefschwarz */
            #333 10px 20px   /* dunkelgrau  */
        );
    background-size: 20px 100%;          /* Stripe-Breite = 20px */
    border-radius: 10px;                 /* wie deine Karte      */

    /* 2) Animation & Gleiten ---------------------------------- */
    animation:
        stripesMove 2s linear infinite;  /* horizontales Wandern */
    transition: width .4s ease-in-out;   /* sanfter Step-Wechsel */
}

/* Hintergrund nach rechts schieben ---------------------------- */
@keyframes stripesMove{
    from { background-position-x: 0; }
    to   { background-position-x: 20px; }  /* = Stripe-Breite    */
}


    button,
    .btn,
    .btn-primary,
    .btn-outline-secondary {
      background-image: url("/static/img/blue.jpeg"); /* dein Hintergrundbild */

       background-size: 450%;          /* weiter reingezoomt */
      background-position: center;     /* zentriert anzeigen          */
      color: #fff !important;          /* weiße Schrift für Kontrast  */
      border: none;                    /* Rahmen entfernen            */
    }

    /* Leichter Abdunkelungs‑Hover‑Effekt */
    button:hover,
    .btn:hover,
    .btn-primary:hover,
    .btn-outline-secondary:hover {
      filter: brightness(0.9);
    }

    
/* ---------- Steps ohne sichtbaren Rahmen ---------- */
fieldset.step {
    border:           0 !important;   /* Linie weg                     */
    padding:          0;              /* Innenabstand raus             */
    background:       transparent;    /* weißer Hintergrund weg        */
    margin:           0 0 1.5rem 0;   /* unten etwas Luft lassen       */
}

/* wenn du das kleine "fieldset-Label" (legend) ebenfalls loswerden willst */
fieldset.step > legend {
    display: none;
}

/* ---------- Größere Step-Überschriften ---------- */
.step-heading{
    font-family: "JusticeLeague", sans-serif;   /* deine Hausschrift */
    font-weight: 700;                     /* fett             */
    font-size: clamp(1.8rem, 2vw + 1.2rem, 2.4rem); /* responsiv größer */
    line-height: 1.2;
    margin-bottom: 1.25rem !important;    /* etwas Luft unten */
}
.login-heading{
    font-family: "JusticeLeague", sans-serif;   /* deine Hausschrift */
    font-weight: 700;                     /* fett             */
    font-size: clamp(1.8rem, 2vw + 1.2rem, 2.4rem); /* responsiv größer */
    line-height: 1.2;
    margin-bottom: 1.25rem !important;    /* etwas Luft unten */
}
header.navbar { background-color: transparent !important; }

.container-responsive { width:100%; padding-inline:1rem; }
@media (min-width:992px){ .container-responsive{ max-width:960px; margin-inline:auto; } }

.link-dark {
    text-decoration: none !important;
 }
 .divider-hr { width:50px; height:1px; background:#000; !important; }
 .divider-v { width:1px; height:1em; background:#000; }
 .navbar .nav-link { font-weight:700; 
color: #ffffff;}
/* -----------------------------------------------------------
   Karten-Header: Justice-League-Schrift, riesig, ohne Hinter­grund
   ----------------------------------------------------------- */
/* --- Card-Header: XL-Schrift, schmale Ränder ------------------- */
.card-header{
  font-family: "JusticeLeague", Verdana, Arial, sans-serif;
  font-weight: 200;
  border-radius: 5px !important; /* Ecken abrunden */

  /* deutlich größer … */
  font-size: clamp(2.4rem, 3vw + 1.6rem, 4rem);
  line-height: 1.15;

  /* … aber weniger Innenabstand */
  padding: .5rem 1rem;          /* oben/unten 0.5 rem, seitlich 1 rem */

  background: transparent !important;
  color: #000 !important;
  border-bottom: none !important;
  box-shadow: none !important;
    -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
}
 /* Disabled Buttons behalten Stil, aber ohne Hover */
    .btn.disabled,
    .btn:disabled {
      opacity: 1;           /* Bootstrap-Transparenz deaktivieren */
      filter: none;
    }


    .address-label,
    .contact-label { font-size: 1.05rem; }


    /* Nur falls du ganz fein­granular steuern willst: */
@media (max-width: 480px){
  h1{ font-size: 2.5rem; }          /* ~24 px */
  .card-header{ font-size: 2.5rem; } /* ~28 px */
}.container {
  padding-top: 1rem !important;    /* oder 0 */
}

/* -----------------------------------------------------------
   Burger-Icon (drei Linien) – breiter, dicker, ohne BG
   ----------------------------------------------------------- */
/* Nur EINE Version behalten! */
.navbar-toggler {
  background: transparent !important;
  border: none;
  box-shadow: none !important;
}

.navbar-toggler .toggler-line{
  display: block;
  width: 28px;
  height: 3px;
  margin: 4px 0;
  background: #fff; /* weiß, damit sichtbar */
  transition: transform .3s, opacity .3s;
}

.navbar-toggler:not(.collapsed) .toggler-line:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.navbar-toggler:not(.collapsed) .toggler-line:nth-child(2){ opacity: 0; }
.navbar-toggler:not(.collapsed) .toggler-line:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
/* Footer-Trennlinie komplett schwarz anzeigen */
footer hr {
  border-top: 1px solid #000;
  opacity: 1;           /* Bootstrap-Vorgabe (.25) überschreiben */
}
footer {
  z-index: 100;

}header {
  z-index: 100;

}

/* Basis-Reset – bleibt wie gehabt */
html, body { min-height: 100%; }

/* ---------- Fester Seiten-Hintergrund ---------- */
body::before {
  content: "";
  position: fixed;        /* sitzt direkt auf dem Viewport */
  inset: 0;               /* oben/rechts/unten/links = 0 */
  z-index: -1;            /* hinter allem anderen */

  background: 
    linear-gradient(rgba(0, 0, 0, 0.674), rgba(0, 0, 0, 0.5)),  /* Overlay */
    url("/static/img/Background-scaled.jpg") center/cover no-repeat;

  scale: 200%;
}

/* static/css/style.css – ganz unten anhängen */
.avatar-round {
  width: 160px;            /* oder 100 % in Grid-Layouts */
  aspect-ratio: 1 / 1;     /* zwingt quadratisch */
  object-fit: cover;       /* Bild füllt die Form komplett */
  border-radius: 50%;      /* macht den Kreis */
  border: 3px solid #fff;  /* optional: weißer Ring */
  box-shadow: 0 2px 6px rgba(0,0,0,.25);  /* leichter Schatten */
}
/* Wrapper für einen Slot – sorgt für gleichmäßige Breite
   (20 % von 100 % = 5 Stück pro Zeile) */

.profile-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 2px solid #dee2e6;   /* weiter Rahmen */
    border-radius: 50%;          /* Kreisform */
}
.text-muted {
    color: #c8c8c8 !important; /* Bootstrap-Standard */
}
/* ===========================
   Dark + eckig + glassmorphism
   für Bootstrap-Dropdowns & <select>
   =========================== */

/* 1) Bootstrap Dropdown-Menü */
.dropdown-menu{
  /* Glassy Dark */
  background: rgba(12, 12, 16, 0.55) !important;
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);

  /* eckig & rahmenlos */
  border: none !important;
  border-radius: 0 !important;

  /* Tiefe */
  box-shadow: 0 12px 30px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.05) inset !important;

  /* etwas größer & luftiger */
  min-width: 220px;
  padding: 0.4rem 0;
}

/* sanftes Einblenden */
.dropdown-menu.show{
  animation: dropdownGlassIn .16s ease-out both;
}
@keyframes dropdownGlassIn{
  from{ opacity: 0; transform: translateY(-6px) scale(.98); }
  to  { opacity: 1; transform: translateY(0)    scale(1);   }
}

/* Items */
.dropdown-item{
  color: #e7e7ea !important;
  padding: .55rem .9rem;
}
.dropdown-item:hover,
.dropdown-item:focus{
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
}
.dropdown-item.active,
.dropdown-item:active{
  background: rgba(0,123,255,.28) !important;  /* Akzent */
  color: #fff !important;
}

/* Header/Divider im Menü */
.dropdown-header{
  color: rgba(255,255,255,.6);
}
.dropdown-divider{
  border-top-color: rgba(255,255,255,.08);
}

/* Toggle-Button im „glassy“ Stil (optional eigene Klasse nutzen) */
.btn-glass{
  background: rgba(12,12,16,.45) !important;
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  color: #fff !important;
  border: none !important;
  border-radius: 0 !important;         /* eckig */
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.btn-glass:hover{ filter: brightness(.95); }
.btn-glass:active{ transform: translateY(1px); }

/* Pfeil (Caret) etwas klarer */
.dropdown-toggle::after{
  border-top-color: currentColor !important;
  margin-left: .4rem;
  vertical-align: .12em;
}

/* 2) Native <select> (Bootstrap .form-select) im selben Look */
.form-select, select{
  appearance: none;
  background: rgba(12,12,16,.55) !important;
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  color: #fff !important;

  border: none !important;       /* ohne Rahmen */
  border-radius: 0 !important;   /* eckig */
  padding: .6rem 2.25rem .6rem .75rem;

  /* Custom Arrow rechts */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 14px;

  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.form-select:focus, select:focus{
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0,123,255,.35) !important; /* Fokus-Ring */
}
.form-select:disabled, select:disabled{
  opacity: .6;
}

/* Optionen im Dark Mode */
select option{
  background: #0f0f14;
  color: #fff;
}

/* 3) Fallback falls kein backdrop-filter vorhanden */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .dropdown-menu,
  .btn-glass,
  .form-select, select{
    background: rgba(18,18,22,.92) !important;
  }
}

/* Sponsor-Carousel */
.sponsor-strip { 
  background:#fff; 
}

.sponsor-logo-wrap {
  height: 96px; /* Einheitlich für alle */
  width: 100%;
  display: flex;
  align-items: center;     /* vertikal mittig */
  justify-content: center; /* horizontal mittig */
}

.sponsor-logo {
  max-height: 80px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block; /* verhindert kleine Lücken durch inline-img */
}