/* ----------  HERO ---------- */
.hero.is-primary .title { color:#000000; }

/* ----------  FORMULARE ---------- */
.address-row { display:flex; gap:0.75rem; }
.address-row>.field { flex:1; }
.address-row .input { width:100%; }

/* ----------  TYPO ---------- */
p,h1,h2,h3,h4,h5,h6,a,span,div { word-break:keep-all; hyphens:none; }

/* ----------  NAVBAR (Default/Desktop) ---------- */
.navbar{ background:rgb(0,32,91); align-items:stretch; }
.navbar .navbar-item{ color:#fff !important; }
.navbar .navbar-menu{ margin-left:1rem; }
.navbar .navbar-menu .navbar-item{
  height:5.25rem; display:flex; align-items:center;
  padding:0 2.5rem; font-size:1.4rem; position:relative; z-index:1;
  background:transparent !important; transition:background-color .1s;
}
.navbar .navbar-menu .navbar-item:hover,
.navbar .navbar-menu .navbar-item.is-active{
  background:transparent !important; color:rgb(0,32,91) !important;
}
/* Parallelogramm-Hintergrund */
.navbar .navbar-menu .navbar-item::before{
  content:""; position:absolute; inset:0;
  background:#fff; transform:skew(-20deg); z-index:-1; opacity:0;
  transition:opacity .2s;
}
.navbar .navbar-menu .navbar-item:hover::before,
.navbar .navbar-menu .navbar-item.is-active::before{ opacity:1; }
/* Logo */
.navbar .navbar-brand,#navbar-logo{ height:100%; align-items:stretch; }
#navbar-logo{ padding:0 !important; margin:0 !important; display:flex; }
#navbar-logo img{ height:100%; width:auto; object-fit:contain; }

/* ----------  BUTTONS ---------- */
.button.custom-blue{ background:rgb(0,32,91); color:#fff; border:none; }
.button.custom-blue:hover{ background:rgb(0,45,130); }
.hero.is-primary a.navbar-item:hover{ background:rgb(0,32,91); }

/* ----------  FOOTER ---------- */
.footer.custom-footer{
  background:rgb(0,32,91); color:#fff; padding:.75rem; margin-top:auto;
}
.footer.custom-footer .columns{ margin:1rem 1rem 0; }

/* ----------  MISC ---------- */
.mitglied-text{ margin-left:1.75rem; line-height:3; }
.mt-5.mb-6{ margin-bottom:.75rem; }
html,body{ height:100%; margin:0; }
body{ display:flex; flex-direction:column; }
main{ flex:1; }
input[type=radio]:disabled{ opacity:.5; cursor:not-allowed; }
input:invalid{ border:2px solid red; }
input:valid{ border:2px solid green; }
input[type=radio]:disabled+span{ opacity:.5; pointer-events:none; }

/* ============================================================
 *  MOBILE NAVIGATION  (< 1024 px)
 * ============================================================ */
@media screen and (max-width:1023px){

  /* Burger-Icon */
  .navbar-burger{ color:#fff !important; }
  .navbar-burger span{ background:#fff !important; }

  /* --- MENÜ-CONTAINER ------------------------------------ */
  .navbar{ position:relative; }
  .navbar-menu{
    display:none;
    position:absolute; top:5.25rem; left:0; right:0;
    width:100%; background:#fff; box-shadow:0 2px 4px rgba(0,0,0,.08);
    margin:0 !important;
    height:auto !important; align-items:flex-start !important;
  }
  .navbar-menu.is-active{ display:block; }

  /* --- LINKS vertikal, volle Breite ---------------------- */
  .navbar-start{
    display:flex !important; flex-direction:column !important;
    align-items:stretch !important; width:100%;
  }
  .navbar-start .navbar-item{
    width:100%; box-sizing:border-box;
    padding:.75rem 1.25rem !important;
    height:auto !important;
    color:rgb(0,32,91) !important;
    background:transparent !important;
  }
  .navbar-start .navbar-item.is-active{ text-decoration:underline; }

  /* Parallelogramm im Dropdown nicht anzeigen */
  .navbar-start .navbar-item::before{ display:none; }
}

/* ----------  BURGER-ICON FIX (< 660 px) ---------- */
@media screen and (max-width:659px){
  .navbar .navbar-menu{ margin-left:0 !important; }
  .navbar-brand{ flex:1 1 100%; justify-content:space-between; }
  .navbar-burger{ margin-right:0 !important; position:relative; z-index:5; }
}

/* ----------  FOOTER (< 768 px) ---------- */
@media screen and (max-width:767px){
  .footer.custom-footer .columns{
    flex-direction:column !important; align-items:center !important;
  }
  .footer.custom-footer .column{ margin:.5rem 0 !important; }
}

/* ----------  ÜBERSCHRIFTEN & FLIESSTEXT ---------- */
.title,.subtitle{ word-break:normal !important; overflow-wrap:normal !important; hyphens:manual; }
html[lang="de"] p,html[lang="de"] li{ hyphens:none; overflow-wrap:break-word; }

/* ----------  LANDING-PAGE: Welcome-Box (< 768 px) ---------- */
@media screen and (max-width:767px){
  .welcome-media{ flex-direction:column !important; align-items:center; }
  .welcome-media .media-left{ margin-bottom:1rem; }
  .welcome-media .media-left .image img{ max-width:70vw; height:auto; }
  .welcome-media .title{
    text-align:center; word-break:normal !important;
    overflow-wrap:break-word; hyphens:manual;
  }
}

/* ----------------------------------------------------------------
 *  KEINE Silbentrennung in Absätzen und Listenelementen
 * ---------------------------------------------------------------- */
html[lang="de"] p,
html[lang="de"] li {
  hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* ----------  Anmeldung: Zweierreihe Anrede/Titel ---------- */
.field-row.columns{
  margin-left:-0.75rem;      /* Bulma-Default-Gutter */
  margin-right:-0.75rem;
  margin-top:0;
  margin-bottom:.75rem;      /* wie ein normales .field */
}
.field-row .column{
  padding-top:0;
  padding-bottom:0;
  padding-left:.75rem;
  padding-right:.75rem;
}
.field-row .field{ margin-bottom:0; }
.field-row .select,
.field-row .input{ width:100%; }

/* ----------  Anmeldung: Adresse (3er-Reihe) ---------- */
.address-row > .field{
  margin-bottom:0 !important;   /* verhindert Doppelabstand vor "Firma" */
}

/* ============================================================
 *  MOBILE FEINSCHLIFF FÜR LABELS (nur kleine Screens)
 *  → sorgt dafür, dass Felder in einer Zeile bündig bleiben,
 *    selbst wenn ein Label zweizeilig wird
 * ============================================================ */
@media (max-width: 767px){

  /* Anrede + Titel */
  .field-row.columns{ align-items:flex-end; }                  /* Spalten unten bündig */
  .field-row .field{ display:flex; flex-direction:column; }
  .field-row .label{
    display:flex; align-items:flex-end;
    margin-bottom:.25rem;
    min-height:3rem;                                          /* ~2 Zeilen */
  }

  /* Straße / PLZ / Stadt */
  .address-row{ align-items:flex-end; }                        /* Felder unten bündig */
  .address-row .field{ display:flex; flex-direction:column; }
  .address-row .label{
    display:flex; align-items:flex-end;
    margin-bottom:.25rem;
    min-height:3rem;                                          /* gleicht 2-zeiliges Label aus */
  }
}
/* --- Legal-Links: Links enger zusammen, Bulma-Defaults überschreiben --- */
.legal-links .level{
  display: flex !important;
  justify-content: center !important;
  column-gap: .35rem;                 /* Abstand zwischen den Links */
  gap: .35rem;                        /* Fallback für Browser ohne column-gap */
}

.legal-links .level .level-item{
  flex: 0 0 auto !important;          /* NICHT mehr die ganze Breite füllen */
  margin: 0 !important;               /* Bulma-Margins neutralisieren */
  padding: 0 .1rem !important;        /* kleine Seitenluft */
}

.footer.custom-footer { position: relative; }

.footer-easter-egg{
  position: absolute;
  right: .5rem;
  bottom: .35rem;
  color: rgb(0,32,91);              /* identisch zur Footer-Hintergrundfarbe */
  font-size: .85rem;
  line-height: 1;
  user-select: text;                 /* Markieren ermöglichen */
}

/* Beim Markieren gut lesbar machen */
.footer-easter-egg::selection{
  color: #ffffff;                    /* hoher Kontrast auf Auswahl */
  background: rgba(255,255,255,.25); /* dezentes Highlight */
}
.footer-easter-egg::-moz-selection{
  color: #ffffff;
  background: rgba(255,255,255,.25);
}
/* Zwei Boxen in der bisherigen Rückfragen-Spalte */
.two-boxes-within{
  display: grid;
  grid-template-columns: 1fr 1fr;  /* zwei Spalten, je 50 % der alten Rückfragen-Breite */
  gap: 1rem;                        /* Abstand zwischen den Boxen */
}

/* gleiche Höhe für beide .box */
.two-boxes-within > .box{
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Eingabe optisch in Großbuchstaben (Server bekommt Wert unverändert aus dem Feld) */
#anmeldeschluessel{ text-transform: uppercase; }

/* Mobil stapeln (optional, bricht NICHT das übrige Layout) */
@media (max-width: 767px){
  .two-boxes-within{ grid-template-columns: 1fr; }
}
/* =========================================
   Feinjustage: Anmeldeschlüssel/Rückfragen
   ========================================= */

/* Bereich ober-/unterhalb der beiden Boxen */
#support-cards{
  margin-top: .5rem;        /* kleinerer Abstand zur oberen Teilnahme-Box */
  margin-bottom: .5rem;   /* größerer Abstand zum Button-Bereich */
}

/* Nur der unmittelbar folgende Button-Container */
#support-cards + .mt-5.mb-6{
  margin-top: 1.5rem !important;  /* Sicherheitsnetz gg. Bulma .mt-5 */
}

/* (falls noch nicht vorhanden) zweispaltige Anordnung + gleiche Höhe */
.two-boxes-within{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: stretch;
}
.two-boxes-within > .box{
  display: flex;
  flex-direction: column;
}

/* Überschrift dichter am Inhalt */
#support-cards .title.is-4{
  margin-bottom: .35rem;
}

/* Erster Absatz direkt unter der Überschrift näher anrücken */
#support-cards h3.title + p{
  margin-top: .25rem;
}

/* Allgemeine Feldabstände in den Boxen etwas knapper */
#support-cards .field{
  margin-top: .5rem;
}

/* Konkrete Entschärfung der in HTML vorhandenen "mt-3" Klasse */
#support-cards .field.mt-3{
  margin-top: .5rem !important;
}

/* Absätze insgesamt etwas kompakter, Box-Padding leicht reduziert */
#support-cards p{
  margin-top: .25rem;
  margin-bottom: .5rem;
}
#support-cards .box{
  padding-top: .9rem;
  padding-bottom: 1rem;
}

/* Mobil einspaltig (unverändert zum bisherigen Verhalten) */
@media (max-width: 767px){
  .two-boxes-within{ grid-template-columns: 1fr; }
}
/* Kontakt-Box optisch an die rechten Boxen angleichen */
#kontakt-box .title.is-4{ margin-bottom: .75rem; }         /* dichter zur ersten Eingabe */
#kontakt-box .field { margin-bottom: .75rem; }             /* kompaktere Felder */
#kontakt-box .field:last-child { margin-bottom: .25rem; }  /* letzter Feldabstand klein */

/* Datenschutzblock außerhalb der Box: etwas Luft nach oben, aber kleiner als vorher */
.datenschutz-field { margin-top: .9rem; }

/* Rechtes Doppel (bereits vorhanden, hier der Vollständigkeit halber):
   – kleiner Abstand nach oben, größer zum Button – */
#support-cards{ margin-top:.5rem; margin-bottom:1.75rem; }

/* Desktop: Linke Kontakt-Box und rechte Doppel-Boxen unten bündig.
   Wir entfernen überflüssige Außenabstände an #kontakt-box. */
@media (min-width: 1024px){
  #kontakt-box { margin-bottom: 0; padding-bottom: .9rem; }
}

/* Falls die Felder sehr viele Hinweise anzeigen, die den Abschluss minimal verschieben:
   Labels & Hilfetexte minimal straffen (nur im Kontaktblock und Support-Bereich). */
#kontakt-box .help,
#support-cards .help { margin-top: .25rem; margin-bottom: 0; }

/* Kontaktbox: Datenschutzfeld in der Box platzieren,
   ohne die Boxhöhe künstlich zu vergrößern (nur Desktop). */
@media (min-width: 1024px){
  #kontakt-box{
    position: relative;
    /* unten Platz für das absolut positionierte Datenschutzfeld schaffen */
    padding-bottom: 4.5rem; /* ggf. in 0.25rem-Schritten feintunen */
  }
  #kontakt-box .datenschutz-field{
    position: absolute;
    left: 1.25rem;           /* orientiert sich am Bulma-.box Padding */
    right: 1.25rem;
    bottom: 1rem;
    margin: 0;               /* kein zusätzlicher Flussabstand */
  }
}

/* Mobil/Tablet: Datenschutzfeld wieder im normalen Fluss belassen */
@media (max-width: 1023px){
  #kontakt-box .datenschutz-field{
    position: static;
    margin-top: .75rem;      /* kleiner, ruhiger Abstand */
  }
}
/* ============================================================
 * AGENDA STYLES
 * ============================================================ */

/* Die Tabelle selbst */
.agenda-table {
  border-collapse: separate; 
  border-spacing: 0;
}

/* Zeit-Spalte: Fett und Corporate Blue */
.agenda-table .agenda-time {
  font-weight: 700;
  color: rgb(0,32,91);
  vertical-align: top;
  white-space: nowrap;
}

/* Programmpunkt: Etwas größer */
.agenda-table .agenda-topic {
  vertical-align: top;
  line-height: 1.4;
}

/* Referenten-Text etwas kompakter */
.agenda-table td {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* --- MOBILE RESPONSIVE TABLE (< 768px) --- 
   Transformiert die Tabelle in Karten, damit nichts abgeschnitten wird 
*/
@media screen and (max-width: 767px) {
  .agenda-table thead {
    display: none; /* Kopfzeile ausblenden */
  }
  
  .agenda-table, .agenda-table tbody, .agenda-table tr, .agenda-table td {
    display: block;
    width: 100%;
  }
  
  .agenda-table tr {
    margin-bottom: 1.5rem;
    background: #fff;
    border: 1px solid #dbdbdb;
    border-radius: 4px;
    padding: 0.5rem;
  }
  
  .agenda-table td {
    border: none !important; /* Standard-Tabellenlinien entfernen */
    padding: 0.25rem 0.75rem;
  }
  
  /* Zeit optisch hervorheben im Mobile-Modus */
  .agenda-table .agenda-time {
    color: rgb(0,32,91);
    font-size: 1.1rem;
    border-bottom: 1px solid #f0f0f0 !important;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
  }
  
  /* Einrückung für Topic und Referent entfernen */
  .agenda-table td:empty {
    display: none;
  }
  
  /* Pause-Zeilen anpassen */
  .agenda-table tr.pause-row {
    background-color: #f9f9f9;
  }
}