/* Header Styling */
body {
  display: flex;
  flex-direction: column;
  background-color: #F5F5F5;
}

html, body {
  height: 100%;
  margin: 0;
}

main {
  flex: 1 0 auto;
}

footer {
  flex-shrink: 0;
}

footer.site-footer {
  margin-top: 1rem; /* oder denselben Wert wie mt-5 am main */
  padding-bottom: 1.5rem 0; /* optional innen Padding */
  background-color: #DCDCDC;
}

.navbar {
  height: 70px;
}

/* Grundzustand für alle Links in sekundärer Nav */
.nav-item .nav-link {
  position: relative;
  padding: 0.5rem 1rem;
  border: 1px solid transparent; /* unsichtbar */
  border-radius: 4px;
  transition: border-color 0.2s;
/*  text-decoration: bold;
  font-size: 1rem;
*/  
  font-family: 'Impact', sans-serif;
  font-size: 0.8rem;  
  font-weight: bold;
  color: black;        /* Schrift schwarz */
  background: transparent;
  display: inline-flex;   /* wichtig für Dropdown-Link */
  align-items: center;    /* Caret vertikal zentriert */
}

/* Hover-Rahmen für Maus */
.nav-item .nav-link:hover {
  border-color: #ccc;   /* dünner hellgrauer Rahmen */
  text-decoration: none;
  color: black;         /* Schrift beim Hover schwarz */
}

/* Entfernt blauen Browser-Fokus bei Maus/JS-Fokus */
.nav-item .nav-link:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* Outline nur bei Tastatur-Fokus */
.nav-item .nav-link:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
}

/* Entfernt Bootstrap-Fokus-/Active-Farben beim Dropdown-Link */
.nav-item.dropdown .nav-link.show,
.nav-item.dropdown .nav-link.active {
  color: black;
  background: transparent;
  border-color: #ccc;  /* optional: Rahmen sichtbar bei aktivem Dropdown */
  box-shadow: none;
}

/* Nur beim Dropdown-Link „Kategorien“ blauen Standard-Fokus entfernen */
#categoriesDropdown:focus {
  outline: none;
  box-shadow: none;
}



.navbar .container {
  position: relative; /* nur falls noch nicht gesetzt */
}



/* ----------------------------
   Navbar Container
---------------------------- */
.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
}

/* ----------------------------
   Logo Container
---------------------------- */
#brandeffect {
  position: relative;
  font-family: 'Impact', sans-serif;
  text-decoration: none !important;
  color: orangered;
  font-size: clamp(1.2rem, 4vw, 3rem); /* Logo verkleinert auf kleinen Screens */
  font-weight: 300;
  display: inline-block;
  flex-shrink: 0;
  margin-left: 0; /* lieber kein negatives Margin, wir steuern Links/Rechts per Flexbox */
  margin-left: -6rem;
}

/* ----------------------------
   Haupttext „porn United“
---------------------------- */
#brandeffect .main-text {
  display: inline;
}

/* ----------------------------
   Slogan / Hand
---------------------------- */
#brandeffect .hand {
  position: absolute;
  top: 35%;     /* vertikale Position über „d“ von United */
  left: 92%;    /* horizontale Position über „d“ von United */
  font-family: 'Lucida Sans', sans-serif;
  font-size: clamp(0.8rem, 3vw, 1.5rem); /* skaliert kleiner auf kleinen Screens */
  font-weight: bold;
  color: white;
  transform: rotate(-20deg) translate(-50%, -50%);
  text-shadow:
    -1px -1px 0 black,
     1px -1px 0 black,
    -1px 1px 0 black,
     1px 1px 0 black;
  white-space: nowrap;
  z-index: 9999;
}

/* ----------------------------
   Media Queries für kleinere Screens
---------------------------- */
@media (max-width: 768px) {
  #brandeffect {
    font-size: clamp(1rem, 6vw, 2rem); /* Logo schrumpft deutlich */
  }

  #brandeffect .hand {
    font-size: clamp(0.6rem, 4vw, 1.2rem); /* Slogan kleiner */
    top: 55%;
    left: 60%;
  }
}

  /* Suchleiste auf kleineren Screens anpassen */
.navbar form {
  font-family: 'Impact', sans-serif;
  font-size: 0.9rem;  
  font-weight: bold;

  flex: 1;
  max-width: 500px;
  margin: 0 auto; /* zentriert */
  /*transform: translate(1%, 0);*/
}

/* Grundzustand */
#userDropdown {
  background-color: white; /* oder transparent, je nach Wunsch */
  color: black;
  transition: background-color 0.2s, color 0.2s;
  border: 1px solid black; /* optional */
}

/* Hover-Zustand */
#userDropdown:hover {
  background-color: black; /* beliebige Hover-Farbe */
  color: white;                /* Text/Icon-Farbe beim Hover */
}

/* Fokus / Klick: blauer Rahmen entfernen */
#userDropdown:focus,
#userDropdown:focus-visible,
#userDropdown:active {
  outline: none !important;
  box-shadow: none !important;
}

#userDropdown.dropdown-toggle::after {
    display: none;
}

#userDropdown + .dropdown-menu {
    font-family: 'Impact', sans-serif;
    font-size: 0.7rem;  
    font-weight: bold;
    left: 50% !important;
    transform: translate(-30%, -1.5%) !important;
}


/* Breiteres Dropdown */
.dropdown-menu-wide {
  min-width: 600px; /* Breite anpassen */
  padding: 0.5rem;
  transform: translate(-35%, 18%) !important;
}

/* Grid für mehrere Spalten */
.dropdown-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* mehrere Spalten automatisch */
  gap: 0;
  max-height: calc(6 * 2.5rem); /* jetzt 6 Zeilen hoch */
  overflow-y: auto;             /* Scrollbar, wenn mehr als 6 Zeilen */
}

.dropdown-grid .dropdown-item {
  font-family: 'Impact', sans-serif;
  font-size: 0.8rem;  
  font-weight: bold;
  width: auto;           /* Item passt in Spalte */
  white-space: nowrap;    /* Text umbrechen verhindern */
}

/* Platzhalter im Grid */
.video-grid {
  display: grid;
  gap: 0.25rem; 
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}


.video-tile {
    display: flex;
    flex-direction: column; /* Bild oben, Info unten */
    align-items: stretch;   /* Info-Block passt sich Breite des Bildes an */
    border-radius: 2px;
    overflow: hidden;
    background: #6c757d;   /* optional, Hintergrundfarbe wenn Bild fehlt */
}

.video-thumb {
    width: 100%;
    aspect-ratio: 16/9;   /* Screenshot behält sein Seitenverhältnis */
    object-fit: cover;
    display: block;
}

.video-info {
    font-family: 'Impact', sans-serif;
    position: static;      /* kein Overlay mehr */
    width: 100%;
    border-top: 1px solid white; 
    background: rgba(0,0,0,0.8); /* optional, leicht transparent */
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
    text-align: center;
    padding: 0.25rem 0.5rem;
}

.video-info::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0);
  z-index: -1; /* hinter Text */
  border-radius: 2px; /* optional, passend zum Container */
}

.video-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.video-badge {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    background: rgba(0,0,0,0.7);
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    z-index: 10;
}


.container-xl {
  max-width: 1650px; /* vorher 1320px, ~25% breiter */
}