/* RESET & CONTAINER */
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:"Helvetica Neue",system-ui,sans-serif; line-height:1.5; background:#fff; color:#333;   
  background-image: url('/img/logo-back.png');
  background-repeat: no-repeat;
  background-attachment:fixed;
  background-size: 30rem;
   background-color: rgba(255, 255, 255, 0.8);
  background-blend-mode: lighten;
  background-position: left top; }
.container { max-width:1100px; margin:0 auto; padding:0 1rem; }

/* Skip Link */
.skip-link { position:absolute; left:-999px; }
.skip-link:focus { left:1rem; top:1rem; background:#000; color:#fff; padding:0.5rem; z-index:999; }

/* Header Top */
.header-top { display:flex; justify-content:space-between; align-items:flex-start; padding:2rem 1rem 1rem 1rem; }
.logo-text { display:flex; align-items:center; gap:1rem; max-height:120px; }
.logo { display:block; width:85px; height:auto;max-height:100%; margin-left:-93px; border: 3px solid #fff}
.logo-link {
  display: inline-block;
}
.org-name { font-size:0.85rem; line-height:1.2; }

/* Top Links Desktop rechts */
.nav-top ul { display:flex; list-style:none; gap:0.5rem; }
.nav-top a { text-decoration:underline; color:#1d5fa7; font-size:0.9rem; white-space:nowrap; padding:0.55rem 0.5rem; }
.nav-top a:hover, .nav-top a:focus { text-decoration:none; background:#6fa9e9; color:#fff; }
.nav-top li a.first-menu-item { text-decoration:none;background:#00a34c; color:#fff; }
.nav-top li a.first-menu-item:hover, .nav-main li a.first-menu-item:focus { background:#007637; color:#fff; }
.nav-top li a:hover:not(.first-menu-item), .nav-main li a:focus:not(.first-menu-item) { background:#6fa9e9; color:#fff; border-radius:0; }


/* Hamburger */
.nav-toggle { margin-top:0.7rem; margin-right:-0.55rem;display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:0.5rem; }
.nav-toggle span { width:25px; height:3px; background:#000; display:block; }

/* Hauptmenü Desktop */
.nav-main-wrapper { margin-top:1rem; }
.nav-main ul { display:flex; list-style:none; margin-top:0.5rem; max-width:400px; }
.nav-main li a { display:flex; align-items:center; padding:0.85rem 1rem; text-decoration:none; color:#1d5fa7; font-weight:600; font-size:1.1rem; white-space:nowrap; }
.nav-main li a:hover, .nav-main li a:focus { background:#6fa9e9; color:#fff; }
.nav-main a.active {
   background:#1d5fa7; color:#fff;
}

.block-fullwidth {
  width: 100%;
  background-color: #f5f8fb; /* hellblau, Beispiel */
  padding: 2rem 0; /* oben/unten Abstand */
}


.breadcrumbs ul {
  list-style: none;
  display: flex;
  gap: 0rem; /* Abstand zwischen Links */
  padding: 0.75rem 0;
  margin: 0;
}

.breadcrumbs li::after {
  content: ">";
  margin: 0 0.5rem;
  color:#8ab9ec;
}

.breadcrumbs li:last-child::after {
  content: "";
}

.breadcrumbs a { color:#1d5fa7; text-decoration:underline; }
.breadcrumbs a:hover, .breadcrumbs a:focus { color:#6fa9e9; text-decoration:underline; }


/* Blauer Balken */
.blue-bar { display:flex; width:100%; height:12px; margin-top:0; }
.blue-bar .blue-segment { flex:1; }

.blue-bar {
  display: flex;
  width: 100%;
  height: 12px;
  margin-top: 0;
  position: sticky;
  top: 0;               /* bleibt am oberen Bildschirmrand */
  z-index: 100;         /* über dem Content */
}

/* Mobile Overlay Navigation */
.nav-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:#1d5fa7; 
 background-image: url('/img/logo-backnav.png');
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: auto top;
  display:none; flex-direction:column; padding:1rem; overflow-y:auto; z-index:9999; }
.nav-overlay.open { display:flex; }
.nav-overlay ul { list-style:none; margin-top:2.5rem; display:flex; flex-direction:column; gap:0rem; }
.nav-overlay li { border-bottom:1px solid #6fa9e9; }
.nav-overlay li a { display:flex; align-items:center; padding:0.75rem 1rem; text-decoration:none; color:#fff; font-weight:600; text-align:left; white-space:normal; }
.nav-overlay li a:hover, .nav-overlay li a:focus { background:#6fa9e9; color:#fff; border-radius:0; }
.nav-overlay li a.active {
   background:#6fa9e9; color:#fff;
}
.nav-close { position:absolute; top:0.5rem; right:0.5rem; font-size:2.5rem; width:2rem; height:2rem; background:none; border:none; cursor:pointer; color:#fff; }

/* Hero */
.hero {
  width: 100%;
  height: 400px;       /* Höhe nach Bedarf anpassen */
  overflow: hidden;    /* Bild außerhalb des Containers abschneiden */
  position: relative;  /* wichtig für object-fit */
}

@media (max-width: 900px) {
  .hero { height: 250px; }
}

@media (min-width: 1600px) {
  .hero { height: 500px; }
}

.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* Bild proportional füllen und bescheiden */
  object-position: center; /* optional: Fokuspunkt */
}

/* Grid Content */
.block-startgrid { display:grid; grid-template-columns:1fr 1fr 300px; gap:2rem; padding:2rem 0; margin-bottom:1.5rem; align-items:stretch; }
.block-3grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:2rem; padding:2rem 0; margin-bottom:1.5rem; align-items:stretch; }
.block-2grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; padding:2rem 0; margin-bottom:1.5rem; align-items:normal; }

h1 { margin:0.5rem 0 1rem 0; font-size:2.35rem; font-weight:normal; color:#666;}
article, event { padding:0 1rem; display:flex; flex-direction:column; }
article h2 { margin-bottom:0.5rem; font-size:2rem; font-weight:normal; color:#333;}
section p, article p, article ul, article ol { margin-bottom:1.5rem; font-size:1.1rem; }
article ul, article ol { margin-left:2.5rem; font-size:1.1rem; }
article a { color:#1d5fa7; text-decoration:underline; }
article a:hover, article a:focus { color:#6fa9e9; text-decoration:underline; }

/* Rote Box */
.event { background:#c97a7a; color:#fff; padding:1.5rem; text-align:left;   display: flex;
  flex-direction: column;
  justify-content: flex-end; /* <- Text am unteren Rand */}
 .note { background:#dae8f5; padding:1.5rem; text-align:left;   display: flex;
  flex-direction: column;} 
.event time { display:block; font-size:2rem; font-weight:normal; margin-bottom:0.5rem; }

/* Footer */
.footer { padding:2rem 0 3rem 0; color:#666;font-size:0.9rem; }
.footer-inner { display:flex; justify-content:space-between; flex-wrap:wrap; }
.footer-menu { display:flex; list-style:none; gap:1rem; }
.footer a { color:#1d5fa7; text-decoration:underline; }
.footer a:hover, .footer a:focus { color:#6fa9e9; text-decoration:underline; background:none; }

/* Responsive */
@media (max-width:1270px){
  .logo { margin-left:0; }
}
@media (max-width:900px){
  .nav-main, .nav-top { display:none; }
  .nav-toggle { display:flex; }
  .nav-main-wrapper { margin-top:0rem; }
  .container { padding:0 1rem; }

  .block-startgrid, .block-2grid { grid-template-columns:1fr; gap:1.5rem; }

  .block-3grid {
    display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; padding:1.5rem 0; align-items:stretch; 
    margin-bottom:1.5rem;
  }

  article, .event { padding:0; }
  .event {
  background: #c97a7a;  /* roter Hintergrund */
  color: #fff;
  padding: 1.5rem;      /* Text innenabstand */
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-left: calc(-1rem); /* negieren von container padding */
  margin-right: calc(-1rem);
  }
  .first-article { padding-top:1.5rem; }
  .logo { width:auto;max-height:64px; }
  .logo-text { flex-direction:row; align-items:center; gap:0.5rem; padding:0.8rem 0; }
  .org-name { font-size:0.75rem; line-height:1.1; }
  @media (max-width:500px){ .org-name{ display:none; } }

  .event { padding:1rem; }
  .hero img { margin:0 auto; display:block; }

  .nav-toggle { padding:0.5rem; }
  .nav-close { top:0.5rem; right:0.5rem; }
}


@media (max-width: 600px) {
  .block-3grid {
    display:grid; grid-template-columns:1fr; gap:1rem; padding:1rem 0; align-items:stretch; 
    margin-bottom:1.5rem;
  }
}






/* Container */
.login-container {
  max-width: 400px;
  margin: 5rem auto;
  padding: 2rem;
  background-color: #f9f9f9;
  border-radius: 0px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  font-family: Arial, sans-serif;
}

/* Fehler-Meldung */
.login-container .error {
  color: #c00;
  margin-bottom: 1rem;
  font-weight: bold;
}

/* Form & Reihen */
.login-form {
  display: flex;
  flex-direction: column;
}

.form-row {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

/* Labels links, gleiche Breite */
.form-row label {
  flex: 0 0 120px; /* feste Breite */
  margin-right: 1rem;
  text-align: left;
  font-weight: bold;
  color: #333;
}

/* Inputs rechts, volle Breite */
.form-row input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border: 1px solid #ccc;
  border-radius: 2px;
  font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

/* Focus-Style */
.form-row input:focus {
  border-color: #50a9e9; /* blau passend zum Menü */
  box-shadow: 0 0 0 3px rgba(80,169,233,0.2);
  outline: none;
}

/* Button */
.button-row {
  justify-content: flex-end; /* Button rechtsbündig */
}

.button-row button {
  padding: 0.6rem 1.5rem;
  border: none;
  border-radius: 0px;
  background-color: #50a9e9; /* passt zum Hauptmenü */
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

/* Hover / Active */
.button-row button:hover {
  background-color: #3f8adf;
}

.button-row button:active {
  background-color: #3676c0;
}

/* Responsive */
@media (max-width: 480px) {
  .form-row {
    flex-direction: column;
    align-items: stretch;
  }

  .form-row label {
    text-align: left;
    margin-bottom: 0.25rem;
  }

  .button-row {
    justify-content: stretch;
  }
}












/* Liste */
.subpage-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column; /* mobil: vertikal */
  margin:1rem 0 2rem 0;
  border-bottom:1px solid #50a9e9;
}

/* Listenelemente */
.subpage-menu li {
  margin: 0;
}

/* Links */
.subpage-menu li a {
  display: block;
  padding: 0.75rem 1rem;
  text-decoration: none;
  color: #1d5fa7;
  font-weight:600;
  transition: background-color 0.2s, border-bottom-color 0.2s;
}

/* Hover */
.subpage-menu li a:hover, .subpage-menu li a:focus {
  background-color: #e6f0fa;
}

/* Aktive Seite */
.subpage-menu li a.active {
  background-color: #50a9e9; /* blau */
  color: #fff;
}

/* Desktop: horizontal */
@media (min-width: 768px) {
  .subpage-menu ul {
    flex-direction: row;
  }
  .subpage-menu li a {
    border-bottom: 0px solid transparent;
    border-left: none;
  }
  .subpage-menu li a:hover {
    border-bottom-color: #50a9e9;
  }
  .subpage-menu li a.active {
    border-bottom-color: #3676c0;
  }
}

/* Mobile responsive: vertikal */
@media (max-width: 767px) {
  .subpage-menu li a {
    text-align: left;
  }
}





.external::after {
  text-decoration:none!important;
  content: " \2197"; /* Unicode für den Pfeil */
  font-size: 0.8em; /* Optional: Pfeil etwas kleiner */
   /* Abstand zum Linktext */
  opacity: 0.6; /* Optional: leicht transparent */
  white-space: nowrap;

}





.person-card {
  background: #dae8f5;
  padding: 1rem;
}

.vorstand-card {
  background: #1d5fa7;
  background-image: url(/img/logo-backnav.png);
   background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position:center;
  color:#fff;
  padding: 1rem;
}


.person-image {
  float: none;
  width: 175px;   /* halbiert für bessere Proportion */
  height: 225px;
  object-fit: cover;
  margin: 0 1rem 1rem 0;
}

@media (max-width: 600px) {
  .person-image {
    float: right;
    height: auto;
    margin: 0 0 0.5rem 1rem;
    max-width:40%;
  }
}

.person-image-small {
  float: right;
  width: 100px;   /* halbiert für bessere Proportion */
  height: 129px;
  object-fit: cover;
  margin: 0 0rem 1rem 1;
}

@media (max-width: 600px) {
  .person-image-small {
    float: right;
    height: auto;
    margin: 0 0 0.5rem 1rem;
    max-width:30%;
  }
}






/* Grid */
.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

/* Event-Box */
.event-card {
    display: flex;
    background-color: #dae8f5; /* Blau passend zur Seite */
    padding: 1rem;
    align-items: flex-start;
    border-radius: 0; /* keine abgerundeten Ecken */
}

/* Datum links */
.event-date {
    width: 60px;
    text-align: center;
    margin-right: 1rem;
}

.event-date .day {
    font-size: 2rem;
}

.event-date .month {
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: 500;
}

/* Info rechts */
.event-info h3 {
    margin: 0 0 0.25rem 0;
}

.event-meta {
    font-weight: 300; /* dünn */
    margin: 0;
    line-height: 1.2;
}

/* Responsive: untereinander auf Mobil */
@media (max-width: 768px) {
    .event-card {
        flex-direction: row;
        justify-content: flex-start;
    }
}













/* Basis-Tabelle */
.cms-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
}

.cms-table th, .cms-table td {
    border: 1px solid #ccc;
    padding: 0.5rem;
    text-align: left;
}

.cms-table th {
    background-color: #f0f0f0;
}

/* Sichtbarkeitspunkt im Titel */
.cms-table td span {
    vertical-align: middle;
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    border-radius: 50%;
    margin-right: 0.5em;
}

/* Edit/Delete Buttons */
.edit-btn, .delete-btn {
    color: #50a9e9;
    text-decoration: none;
    margin-right: 0.5rem;
}
.edit-btn:hover, .delete-btn:hover {
    text-decoration: underline;
}

/* Mobile Darstellung */
@media (max-width: 768px) {
    /* thead ausblenden */
    .cms-table thead {
        display: none;
    }

    /* Tabelle als Block */
    .cms-table, .cms-table tbody, .cms-table tr, .cms-table td {
        display: block;
        width: 100%;
    }

    .cms-table tr {
        margin-bottom: 1rem;
        border-bottom: 2px solid #eee;
        padding-bottom: 0.5rem;
    }

    .cms-table td {
        padding: 0.25rem 0;
        text-align: left;
        position: relative;
        border: none;
    }

    /* Datum + Uhrzeiten zusammenfassen */
    .cms-table td[data-type="datetime"] {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    /* Aktionen auf eigene Zeile */
    .cms-table td[data-type="actions"] {
        margin-top: 0.5rem;
    }
}









/* CMS-Formular wie Login */
.cms-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 700px;
    margin: 1rem 0;
}

.cms-form label {
    display: flex;
    flex-direction: column;
    font-weight: bold;
    font-size: 0.95rem;
}

.cms-form input[type="text"],
.cms-form input[type="date"],
.cms-form input[type="time"],
.cms-form textarea,
.cms-form select {
    padding: 0.5rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 0; /* passend zum Login */
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.cms-form input:focus,
.cms-form textarea:focus,
.cms-form select:focus {
    border-color: #50a9e9;
    box-shadow: 0 0 3px #50a9e9;
}

/* Button */
.cms-form button {
    padding: 0.5rem 1rem;
    background-color: #50a9e9;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.2s;
}

.cms-form button:hover {
    background-color: #3676c0;
}