/* =====================================================================
   AStA-Theme – Custom CSS (Drupal, Basis-Theme: Olivero)
   ---------------------------------------------------------------------
   Aufbau:
     0. Mögliche Imports, Datenschutz beachten
	 1. Globale Basics (Schrift, Seitenlayout, Farben)
     2. Header & Navigation
     4. Hero-Bereich
     5. Buttons
     6. Karten (Cards)
     7. Suche
     8. Footer
     9. Sonstige Features
   ===================================================================== */


/* =====================================================================
   0. Imports
   Falls gebraucht, Datenschutzprobleme beachten
   DRINGEDES To DO PT SANS lokal hosten
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');



/* =====================================================================
   1. GLOBALE BASIS & SEITENLAYOUT
   ===================================================================== */
   
:root {
  --asta-orange: #f47615;
  --asta-orange-dark: #d95f17;
  --asta-text: #333;
  --asta-border: #ccc;
  --asta-font: 'PT Sans', sans-serif;
  --font-family-base: var(--asta-font) !important;
  --font-family-heading: var(--asta-font) !important;
  --font-sans: var(--asta-font) !important;
  --font-serif: var(--asta-font) !important;
}

/* Schrift erzwingen */
html, body, p, span, a, li,
h1, h2, h3, h4, h5, h6,
button, input, textarea {
  font-family: var(--asta-font) !important;
}

p{
  margin-top: 0;
  margin-bottom: 0.25em; 
}

/* volle Seitenbreite  */
#page-wrapper {
  max-width: 100% !important;
  padding: 0 !important;
}

/* Hauptinhalt auf volle Breite, linksbündig. */
.main-content > .main-content__container {
  display: block;
  width: 100%;
  max-width: 100%;
  text-align: left;
}

/* Seitenleiste komplett ausblenden */
aside > .region--sidebar {
  display: none !important;
}

/* Weil die Seitenleiste weg ist, soll der Hauptbereich
   die ganze Breite nutzen (Olivero-Grid ab 1000px). */
@media (min-width: 62.5rem) {
  .sidebar-grid > .site-main {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-column: 1 / -1;
  }
}

.region--hero.grid-full {
  display: block;       /* Grid abschalten, Block füllt die Breite */
  max-width: none;
  margin: 0;
  padding: 0;
}

.region--hero > * {
  grid-column: 1 / -1;  /* falls Grid doch aktiv bleibt */
  max-width: none;
  margin: 0;
}


/* =====================================================================
   2. HEADER & NAVIGATION
   ===================================================================== */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 !important;
  min-height: 0;
  max-height: fit-content;
  background: #fff;
  border-bottom: 1px solid #ddd;
  position: sticky;
  top: 0;
  z-index: 101;
}

.site-header__inner__container {
  max-width: 100% !important;
}

.site-branding {
  min-height: 0;
  background: #fff;
  padding-top: 0;
  margin: 0;
}

.site-header .site-branding__logo img {
  max-height: 50px;
}

/* Hauptmenü: Liste ohne Punkte (display NICHT überschreiben, sonst
   funktioniert das Ein-/Ausklappen im Burger-Menü nicht mehr) */
.site-header nav ul {
  list-style: none;
}
.site-header nav ul li a {
  text-decoration: none;
  font-weight: 500;
  color: var(--asta-orange);
}
.site-header nav ul li a:hover {
  color: #000;
}

.site-header .search-block-form {
  margin-left: 20px;
}

/* =====================================================================
   SPRACHUMSCHALTER
   ===================================================================== */
#block-asta-theme-languageswitcher {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  margin-right: auto;
}
#block-asta-theme-languageswitcher li {
  list-style-type: none;
}

/* =====================================================================
   DROPDOWN & FLYOUT (nur Desktop)
   ===================================================================== */
@media (min-width: 75rem) {

  /* Ebene 2: Kasten wächst mit dem Inhalt, Flyout wird nicht abgeschnitten */
  .primary-nav__menu--level-2 {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    bottom: auto !important;
    overflow: visible !important;
    margin-block: 0 !important;
    padding-block: 0.5rem !important;
    min-width: 25vw;
  }

  /* Bezugspunkt für das Flyout */
  .primary-nav__menu-item--level-2 {
    position: relative;
  }

  .primary-nav__menu--level-2 > .primary-nav__menu-item:first-child,
  .primary-nav__menu--level-2 > .primary-nav__menu-item:last-child {
    margin: 0 !important;
  }

  .primary-nav__menu--level-2 > .primary-nav__menu-item > .primary-nav__menu-link {
    padding-block: 0.4rem !important;
    padding-inline: 1.25rem !important;
    line-height: 1.3 !important;
  }

  /* Ebene 3: Flyout-Kasten, standardmäßig versteckt */
  .primary-nav__menu--level-3 {
    position: absolute !important;
    top: -0.5rem;
    left: calc(100% + 0.75rem);
    width: max-content;
    min-width: 14rem;
    max-width: 22rem;
    margin: 0;
    padding: 0.75rem 0 0.5rem;
    background: #fff;
    border-top: 0.5rem solid var(--asta-orange);
    border-radius: 0 0 0.25rem 0.25rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 20;

    display: block !important;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  /* Sichtbar bei Hover oder Tastaturfokus */
  .primary-nav__menu-item--level-2:hover > .primary-nav__menu--level-3,
  .primary-nav__menu-item--level-2:focus-within > .primary-nav__menu--level-3 {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto;
  }

  /* Pfeil, zeigt auf den gehoverten Ebene-2-Punkt */
  .primary-nav__menu--level-3::after {
    content: "";
    position: absolute;
    top: 0.9rem;
    left: -0.6rem;
    border-top: 0.55rem solid transparent;
    border-bottom: 0.55rem solid transparent;
    border-right: 0.6rem solid var(--asta-orange);
  }

  /* Unsichtbare Brücke gegen Hover-Abriss im Spalt */
  .primary-nav__menu--level-3::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -1rem;
    width: 1rem;
  }

  /* Ebene 3: enge Einträge */
  .primary-nav__menu--level-3 li {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
  }
  .primary-nav__menu--level-3 a {
    display: block !important;
    margin: 0 !important;
    padding: 0.4rem 1.25rem !important;
    min-height: 0 !important;
    line-height: 1.3 !important;
    font-size: 1rem !important;
    white-space: normal;
  }
}

/* =====================================================================
   3. HERO-BEREICH (Startseite)
   Das Bild ist fest eingetragen: bei Austausch des Bildes im Drupal-
   Medienbereich bleibt dieser Pfad bestehen, bis er hier geändert wird.
   ===================================================================== */
.asta-hero {
  background-image: url("/sites/default/files/2026-10/HeroImage_1.jpg");
  background-size: cover;
  background-position: center;
  color: #fff;
  min-height: 50vh !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;   /* das frühere "padding: 4.5rem 1rem" war wirkungslos */
  border-radius: 5px;
}

/* Textblock im Hero.*/
.asta-hero__inner {
  max-width: 100%;
  margin: 0 auto;
  padding: 12.5% 0;        /* Prozent = Anteil der Breite -> Höhe wächst mit */
  text-align: center;
  text-shadow: 1px 0 10px #101010;
}
.asta-hero__inner h1 {
  color: #fff;
}

.asta-hero__lead {
  margin-bottom: 1rem;
  opacity: 0.95;
}

/* Orangefarbener Hero-Button */
.asta-hero__inner .btn--primary {
  background: var(--asta-orange);
  border-radius: 0.5rem;
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  padding: 0.5em;
  text-shadow: none;
}

/* Links im Hero: Olivero-Hover (Unterstreichung/Schatten) abschalten. */
.asta-hero__inner a:where(:not(.button)):hover {
  text-decoration: none;
  box-shadow: none;
}


/* =====================================================================
   4. BUTTONS
   ===================================================================== */

/* [RISIKO] ".button" ist Oliveros Standardklasse für ALLE Buttons der
   Seite. Diese Regel macht sie alle klein und flach (line-height 50 %,
   max-height 2rem). Falls Buttons in Formularen/Admin-Bereich komisch
   aussehen, hier suchen. */
.button {
  display: inline-flex;
  align-items: center;
  margin-top: 0;
  padding: 0.5rem 1rem;
  line-height: 50%;
  max-height: 2rem;
  border-radius: 1rem;
}

/* Absende-Buttons in Formularen / Webforms im AStA-Orange */
.webform-button--submit,
input[type="submit"].button--primary,
.form-actions .button--primary {
  background: var(--asta-orange) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 5px !important;
  padding: 10px 18px !important;
}


/* =====================================================================
   5. KARTEN (Cards)
   ===================================================================== */

/* Raster: 2 Spalten; ab 1200px so viele wie passen; mobil 1 Spalte */
.cards {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px;
  padding: 40px 0;
}
@media (min-width: 1200px) {
  .cards {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
  }
}
@media (max-width: 768px) {
  .cards {
    grid-template-columns: 1fr !important;
  }
}

/* Einzelne Karte: alle gleich hoch, Inhalt untereinander */
.card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  height: 100%;
  min-height: 320px;
  padding: 25px;
  background: #fff;
  border-radius: 8px;
  border: 2px solid var(--asta-orange);   /* ← NEU: farbiger Rand */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.card h3 {
  margin-bottom: 10px;
}
.card p {
  margin-bottom: 20px;
  color: #555;
}
.card p:last-child {
  margin-top: auto;        /* schiebt den letzten Absatz nach unten */
}
.card button {
  background: var(--asta-orange);
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 18px;
  cursor: pointer;
  margin-bottom: auto;
}
.card button:hover {
  background: var(--asta-orange-dark);
}


/* =====================================================================
   7. SUCHE

   [FIXME] "edit-keys" und "edit-actions" sind Drupal-IDs. #edit-actions
   existiert in fast jedem Formular (Webforms, Kontaktformular ...) –
   die Regeln unten treffen also nicht nur die Suche. Sauberer wäre, sie
   mit ".search-block-form" davor einzuschränken, z. B.
   ".search-block-form #edit-actions.form-actions { ... }".
   Vorher die Suche testen, das Layout ist empfindlich.
   ===================================================================== */

/* Overlay und Wrapper der breiten Suche (Desktop) */
.block-search-wide,
.block-search-narrow {
  background: transparent !important;
}
.block-search-wide__wrapper {
  background: #fff !important;
  border: 1px solid var(--asta-border);
  border-radius: 0.5rem;
}

/* Suche etwas nach unten rücken */
.block-search-narrow__wrapper,
.search-block-form {
  margin-top: 0.75rem !important;
}

/* Eingabefeld (erste Suche auf der Seite) */
#edit-keys.form-search,
input#edit-keys,
input#edit-keys:focus {
  background: #fff !important;
  color: var(--asta-text) !important;
  width: 100%;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border: 1px solid var(--asta-border) !important;
  border-radius: 0.5rem 0 0 0.5rem !important;
  outline: none !important;
}
#edit-keys::placeholder {
  color: black !important;
}

/* Eingabefeld der zweiten Suche (Drupal hängt "--2" an doppelte IDs) */
#edit-keys--2.form-search,
input#edit-keys--2,
input#edit-keys--2:focus {
  background: #fff !important;
  color: var(--asta-text) !important;
}

/* Such-Buttons (Lupe) */
.block-search-wide__button {
  background: var(--asta-orange) !important;
  color: #fff !important;
  align-items: center !important;
  height: 5rem;
  border-radius: 0.5rem;
}
.block-search-narrow__button {
  background: var(--asta-orange) !important;
  color: #fff !important;
  border-radius: 0 0.5rem 0.5rem 0;
}

/* Container um den Button */
#edit-actions.form-actions {
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  min-width: fit-content !important;
  padding: 0 !important;
  background: none !important;
  border-radius: 0 0.5rem 0.5rem 0 !important;
}
#edit-actions.form-actions button,
#edit-actions.form-actions input[type="submit"] {
  display: flex !important;
  align-items: center !important;
  background: var(--asta-orange) !important;
  color: #fff !important;
  border: none !important;
  padding: 0.5rem 0.75rem !important;
  cursor: pointer !important;
}
/* Positionierungs-Hack: 4rem Abstand oben am Button.*/
#edit-actions.form-actions button {
  padding-top: 4rem !important;
  padding-bottom: 0 !important;
}
/* Lupen-Symbol weiß */
#edit-actions.form-actions button svg,
#edit-actions.form-actions button::before {
  fill: #fff !important;
  color: #fff !important;
}


/* =====================================================================
   8. FOOTER
   ===================================================================== */
.site-footer {
  width: 100%;
  color: #fff;
  font-weight: bold;
}
.site-footer__inner {
  padding-top: 2rem;
  padding-bottom: 0;
}
.site-footer ul li {
  display: inline-block;
  margin-right: 2rem;
}
.footer-title {
  color: #fff !important;
}

/* Vier Spalten. */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  max-width: 100%;
  margin: 0 auto;
  text-align: left;
}
/* Auf kleineren Bildschirmen weniger Spalten, sonst wird es eng */
@media (max-width: 62.5rem) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 40rem) {
  .footer-grid { grid-template-columns: 1fr; }
}

.footer-col {
  font-size: 1rem;
  font-weight: bold;
  text-align: left;
}

/* Footer-Links in Orange.
   Repariert: Früher stand "text-decoration: none !important" im Normal-
   zustand – dadurch konnte die Unterstreichung beim Hover nie greifen;
   sichtbar war nur das Größerwerden der Schrift (font-size 1.1rem),
   was den Text springen ließ. Jetzt: Unterstreichung beim Hover. */
.footer-col a {
  color: var(--asta-orange) !important;
  text-decoration: none !important;
}
.footer-col a:hover {
  text-decoration: underline !important;
}


/* =====================================================================
   WEIRDER Mobile-Ansicht FIX
   ===================================================================== */
@media (max-width: 74.99rem) {

  /* Gemeinsame Zeile für alle Header-Elemente */
  .site-header__inner__container {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-block: 0.5rem;
  }

  /* Alle direkten Kinder: keine Eigenabstände, die die Linie stören */
  .site-header__inner__container > * {
    margin-block: 0 !important;
    padding-block: 0 !important;
    align-self: center;
  }

  /* Logo */
  .site-branding {
    display: flex;
    align-items: center;
  }
  .site-header .site-branding__logo img {
    display: block;      /* entfernt den Baseline-Abstand unter Bildern */
    max-height: 40px;
  }

  /* Sprachumschalter */
  #block-asta-theme-languageswitcher,
  #block-asta-theme-languageswitcher ul {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
  }

  /* Burger-Button */
  .mobile-nav-button {
    position: static;    /* falls Olivero ihn absolut positioniert */
    margin: 0;
    align-self: center;
  }

  /* Suche in der Mobilansicht nicht mehr nach unten schieben */
  .block-search-narrow__wrapper,
  .search-block-form {
    margin-top: 0 !important;
  }
}

@media (max-width: 74.99rem) {

  /* Block selbst bleibt in der Header-Zeile mittig */
  #block-asta-theme-languageswitcher {
    display: flex;
    align-items: center;
  }

  /* Liste: Einträge untereinander */
  #block-asta-theme-languageswitcher ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  #block-asta-theme-languageswitcher li {
    margin: 0;
    padding: 0;
    line-height: 1.2;
  }

  /* Kleinere Schrift, damit zwei Zeilen in die Header-Höhe passen */
  #block-asta-theme-languageswitcher a {
    font-size: 0.9rem;
  }
  @media (max-width: 74.99rem) {
     /* Ebene 2: etwas größer */
  .primary-nav__menu-link--level-2 {
    font-size: 1.125rem;   /* ca. 18px */
    font-weight: 400;
    line-height: 1.4;
  }

  /* Ebene 3: kleiner als Ebene 2 */
  .primary-nav__menu-link--level-3 {
    font-size: 1rem;       /* ca. 16px */
    font-weight: 400;
    line-height: 1.4;
  }

  /* Einrückung für die Hierarchie */
  .primary-nav__menu--level-3 {
    padding-left: 1rem;
    margin: 0;
  }
}