/* design_new.css
   Neue, schlanke Basis-Styles — Fokus: Kopfleiste / Header
   - Variablen für Farben und Abstände
   - Flex-basiertes Header-Layout: Logo links, Navigation mittig, Wappen rechts
   - Responsives Burger-Menü (mobile)
   - Leichte, neutrale Typografie
*/
:root {--bg-header: #fff9d6;/* heller Hintergrund wie vorher, anpassbar */
--accent: #2a6fb7;--text: #111;--muted: #666;--gap: 16px;/* fixed header height makes positioning the nav-panel reliable */
--header-height: auto;--max-width: 1200px;}

/* Global reset (klein und gezielt) */
* {box-sizing: border-box}

html,
body {margin: 0;font-family: Inter, "Helvetica Neue", Arial, sans-serif;color: var(--text);background: #fff}

/* KOPFBEREICH */
#kopfbereich {background: var(--bg-header);border-bottom: 2px solid rgba(0, 0, 0, 0.06);height: var(--header-height);display: flex;align-items: center;justify-content: center;/* zentriert den internen container */
   min-height: 64px; /* ensure header is not 0x0 */
}

/* Inner wrapper beschränkt Breite und zentriert Inhalte */
.header-inner {width: 100%;max-width: var(--max-width);display: flex;align-items: center;justify-content: space-between;padding: 0 18px;gap: var(--gap);position: relative;/* needed so absolute-positioned burger can sit inside */}

/* constrain header images to the header height so layout is stable */
.header-inner img,
#kopfbereich img {max-height: calc(var(--header-height) - 10px);height: auto;display: block}

/* linke Spalte (Logo + optional text) */
.header-left {display: flex;align-items: center;gap: 12px;min-width: 0}

.header-left .logo {height: 56px;width: auto;display: block}

.header-left .brand {font-weight: 700;font-size: 1.15rem;color: var(--text);white-space: nowrap}

/* mittlere Spalte: Navigation
   NOTE: navigation is presented via the .nav-panel which is hidden by default
   and shown when the burger toggles the --open state. This keeps burger behavior
   consistent on mobile and desktop (burger opens the same panel).
*/
#main-nav {display: none}

/* Desktop horizontal navigation (shows on large screens) */
#main-nav-desktop { display: none; }
#main-nav-desktop ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; align-items: center; }
#main-nav-desktop { display: none; }
#main-nav-desktop ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; align-items: center; }
#main-nav-desktop a { color: var(--text); text-decoration: none; padding: 8px 10px; border-radius: 6px }
#main-nav-desktop a:hover, #main-nav-desktop a:focus { background: rgba(0,0,0,0.03) }
/* ensure nav area takes available width and aligns center in header */
#main-nav-desktop { display: none; width: 100%; min-height: 40px; align-items: center; }
#main-nav-desktop ul { justify-content: center; }

/* Debug helper: uncomment during local debugging to see nav area boundaries */
/* #main-nav-desktop { outline: 2px dashed rgba(255,0,0,0.45) !important; } */

#main-nav ul {list-style: none;margin: 0;padding: 8px 12px}

#main-nav a {color: var(--text);text-decoration: none;padding: 6px 8px;border-radius: 4px;display: block}

#main-nav.nav-panel.--open {display: block;}

#main-nav a:hover,
#main-nav a:focus {background: rgba(0, 0, 0, 0.03)}

/* rechte Spalte (Wappen) */
.header-right {display: flex;align-items: center;gap: 12px;margin-left: auto}

.header-right img {height: 64px;width: auto;display: block}

/* Burger button (mobile) - oben links über dem Header möglich */
.burger {background: none;border: 0;padding: 10px;display: flex;align-items: center;justify-content: center;cursor: pointer;border-radius: 6px;}

.burger svg {width: 28px;height: 28px;display: block}

/* place the burger on the left edge on small screens */
.burger {position: absolute;left: 12px;top: 50%;transform: translateY(-50%);z-index: 1300}

/* mobile nav: hidden by default, toggled with --open */
.nav-panel {position: absolute;top: 100%;left: 12px;/*right: 12px;*/
background: #fff;border-radius: 8px;box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);overflow: hidden;opacity: 0;transform: translateY(-6px) scale(.995);pointer-events: none;transition: all .18s ease;z-index: 1200}

.nav-panel.--open {opacity: 1;transform: none;pointer-events: auto;display: block;left: 12px;/*right: 12px;*/z-index: 1200;}


.nav-panel ul {display: flex;flex-direction: column;padding: 8px 12px;gap: 6px}

.nav-panel a {padding: 10px;border-radius: 6px}

/* Responsive behaviour */
/* Mobile first: show burger, hide desktop nav layout */
#main-nav-desktop {display: none}

@media(min-width:900px) {

/* on wide screens show the desktop nav and keep burger available if needed */
.burger {display: block}
.nav-panel {display: block}



/* #main-nav remains hidden by default; the panel is used when opened */
#main-nav ul {display: flex;gap: 20px;align-items: center}}

@media(min-width:1001px) {
/* show horizontal desktop nav */
/* place the desktop nav a bit lower to avoid overlapping the burger/Wappen */
#main-nav-desktop { display: flex;  padding-top: 6px; }
#main-nav-desktop ul { justify-content: center }
.burger { display: none; }
}

/* kleine optische Verbesserungen */
.header-inner .button {background: var(--accent);color: #fff;padding: 8px 12px;border-radius: 6px;text-decoration: none}

.header-inner .button:hover {opacity: .95}

/* Accessibility helpers: limit hiding behavior to the mobile nav panel only */
.nav-panel[aria-hidden="true"] {opacity: 0;transform: translateY(-6px) scale(.995);pointer-events: none}

/* End of header styles */

/* Login popup styles (includes/login_popup.php) - apply on all screen sizes */
.popup-overlay {display: none; position: fixed; inset: 0; z-index: 5000; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.45); padding: 20px;}
.popup-overlay[aria-hidden="false"] {display: flex}
.popup-box {background: #fff; border-radius: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); max-width: 480px; width: 100%; padding: 20px 22px; color: var(--text); position: relative;}
.popup-box h2 { margin: 0 0 12px; font-size: 1.4rem; }
.popup-box .close-btn { position: absolute; right: 10px; top: 8px; cursor: pointer; font-size: 22px; line-height: 1; color: #333; }
.popup-box form { display: flex; flex-direction: column; gap: 10px; }
.popup-box input[type="email"], .popup-box input[type="password"] {padding: 8px 10px; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 6px; font-size: 1rem; width: 100%;}
.popup-box button[type="submit"] {background: var(--accent); color: #fff; border: 0; padding: 10px 12px; border-radius: 6px; cursor: pointer; font-weight: 600;}
.popup-box .erfolgsmeldung { display: block; margin-bottom: 8px; }

/* helper to lock background scrolling while popup is open */
body.popup-open {overflow: hidden}


/* --------------------
 Main content area
 -------------------- */
#inhalt {width: 100%;max-width: var(--max-width);margin: 20px auto;/* Abstand zum Header */
padding: 20px 18px;background: #fff;color: var(--text);line-height: 1.5;}

#inhalt h1 {font-size: 1.6rem;margin: 8px 0 18px;font-weight: 700;text-align: center;}

#inhalt h2 {font-size: 1.15rem;margin: 14px 0 10px;color: var(--accent);}

#inhalt p {margin: 0 0 12px}

/* success message */
.erfolgsmeldung {background: #e6f6ea;border: 1px solid #bfe6c9;color: #0b6b2e;padding: 10px 14px;border-radius: 6px;display: inline-block;margin-bottom: 14px;}

/* small utility link style used in content (social links) */
.kein-stil {color: var(--text);text-decoration: none;display: inline-flex;gap: 8px;align-items: center}

.kein-stil:hover {opacity: 0.95}

.kein-stil .logo {height: 20px;width: auto;display: inline-block}

/* table used for today's courses */
table#unsichtbar {width: 100%;border-collapse: collapse;margin: 8px 0 20px}

table#unsichtbar th,
table#unsichtbar td {padding: 10px 8px;border-bottom: 1px solid rgba(0, 0, 0, 0.06);text-align: left}

table#unsichtbar th {background: transparent;font-weight: 600;color: var(--muted)}

table#unsichtbar tbody tr:hover {background: rgba(0, 0, 0, 0.02)}

/* Make links inside the course table non-blue and without underline by default */
table#unsichtbar a,
table#unsichtbar a:visited {color: inherit;text-decoration: none;}

table#unsichtbar a:hover,
table#unsichtbar a:focus {/* keep table links visually stable on hover/focus */
color: inherit;text-decoration: none;}

/* Zebra rows: alternating backgrounds for odd/even rows */
table#unsichtbar tbody tr:nth-child(odd) td {background: rgba(0, 0, 0, 0.01)}

table#unsichtbar tbody tr:nth-child(even) td {background: rgba(0, 0, 0, 0.03)}

/* Make the 'Kurs' column stand out: bold and accent-colored links */
table#unsichtbar td:nth-child(3),
table#unsichtbar td:nth-child(3) a {font-weight: 700;color: var(--accent);}

/* Hallenplan-specific: leichtes Einrücken der Tabellen für bessere Lesbarkeit */
body#hallenplan-page table#unsichtbar { margin-left: 18px; margin-right: 18px; max-width: calc(100% - 36px); }

/* center small nav-like buttons in content */
#inhalt .center-button {display: inline-block;padding: 6px 10px;border-radius: 6px;border: 1px solid rgba(0, 0, 0, 0.08);background: #fff}

/* spacing tweak for news headline */
#newsHeadline {margin-top: 18px;margin-bottom: 8px}

@media(min-width:720px) {#inhalt {padding: 28px}

#inhalt h1 {font-size: 2rem}}

/* Mobile readability improvements */
@media (max-width: 999px) {

html,
body {font-size: clamp(16px, 2vw, 18px)}

.nav-panel a {font-size: 1.5rem;padding: 12px 14px}

.burger svg {width: 32px;height: 32px}

#inhalt {padding: 18px}

#inhalt h1 {font-size: clamp(1.4rem, 5vw, 3rem);}

#inhalt h2 {font-size: clamp(1.4rem, 3.5vw, 3rem);}


#inhalt p,
#inhalt a {font-size: clamp(1.0rem, 3vw, 3rem);}

table#unsichtbar th,
table#unsichtbar td {font-size: clamp(1.0rem, 2vw, 3rem);padding: 12px 10px;}

table#unsichtbar th a,
table#unsichtbar td a {font-size: 1.1rem;} }

/* ---- News Bildergalerie ---- */
#bildergalerie{width:100%;max-width:var(--max-width);margin:18px auto;display:flex;justify-content:center;align-items:center;position:relative;overflow:visible;}
.gallery-inner{width:100%;background:#fff;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,0.06);overflow:hidden;position:relative;}
#bildergalerie img#bild{width:100%;height:auto;display:block;max-height:480px;transition:opacity .4s ease, transform .35s ease;opacity:1; /* visible by default; JS will still add classes for sizing */}
/* Landscape images should fill the container area */
.gallery-inner img.querformat{width:100%;height:480px;object-fit:cover;display:block;}
/* Portrait images should be contained and centered */
.gallery-inner img.hochformat{width:auto;max-height:480px;object-fit:contain;display:block;margin-left:auto;margin-right:auto;}
.gallery-inner img.visible{ opacity:1 }

/* place caption below the image and center it */
.gallery-caption{position:relative;color:#111;text-align:center;background:transparent;padding:12px 16px;border-radius:6px;max-width:100%;margin-top:8px;}
.gallery-caption h1{margin:0;font-size:1.05rem;font-weight:700}
.gallery-caption h2{margin:6px 0 0;font-size:0.95rem;color:var(--muted)}

.gallery-controls{position:absolute;top:50%;left:8px;right:8px;display:flex;justify-content:space-between;pointer-events:none}
.gallery-controls button{pointer-events:auto;background:rgba(0,0,0,0.5);color:#fff;border:0;padding:8px 12px;border-radius:8px;cursor:pointer}
.gallery-controls button:focus{outline:2px solid var(--accent)}

.gallery-dots{position:relative;left:0;transform:none;bottom:auto;display:flex;gap:8px;margin:10px auto 0;justify-content:center}
.gallery-dots button{width:10px;height:10px;border-radius:50%;border:0;background:rgba(0,0,0,0.18);cursor:pointer}
.gallery-dots button.active{background:var(--accent)}

@media(max-width:719px){#bildergalerie img#bild{ max-height:320px }
.gallery-caption{ font-size:0.95rem; bottom:10px }
.gallery-controls button{ padding:10px }}

/* Hallenplan grid: zwei Spalten auf Desktop, eine Spalte auf Mobil */
.days-grid { display: grid; gap: 18px; margin-top: 12px; }
.day-block { background: transparent; padding: 6px 12px; border-radius: 6px; }
.day-block h2 { color: var(--accent); margin: 0 0 8px; font-size: 1.05rem; }
.day-block table#unsichtbar { margin: 0; }

@media (min-width: 1001px) {
   .days-grid { grid-template-columns: 1fr 1fr; }
   .day-block { padding: 12px 18px; }
}

@media (max-width: 999px) {
   .days-grid { grid-template-columns: 1fr; }
   .logo{width: 80px;height: 80px;}
}
.logo{width: 30px;height: 30px;}
/* Abteilungen: responsive Karten-Grid */
#abteilungen-page .dept-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); margin-top: 16px; }
#abteilungen-page .dept-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 12px; background: #fff; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.04); color: var(--text); text-decoration: none; }
#abteilungen-page .dept-card img { 
   width: 96px; 
   height: 96px; 
   display: block; 
   margin: 0 auto 8px; 
   object-fit: contain; /* preserve aspect ratio, center inside square */
   background: transparent;
}
#abteilungen-page .dept-card span { font-weight: 700; color: var(--accent); }
#abteilungen-page .dept-card:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(0,0,0,0.06); }

/* Interner Bereich: Zugriffskarten */
.zugriff-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-top: 16px; }
.zugriff-card { background: #fff; padding: 14px; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.04); color: var(--text); text-decoration: none; display: block; }
.zugriff-card h3 { margin: 0 0 8px; font-size: 1rem; color: var(--accent); }
.zugriff-card p { margin: 0; color: var(--muted); }
.zugriff-card:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(0,0,0,0.06); }



/* Hallenplan: Tabellen als Karten und Ansprechpartner-Bereich an das Seiten-Design anpassen */
body#hallenplan-page .day-block table#unsichtbar,
body#hallenplan-page #eins table#unsichtbar {
   width: 100%;
   border-collapse: separate; /* allow vertical gaps between rows */
   border-spacing: 0 10px;
}

body#hallenplan-page .day-block table#unsichtbar td,
body#hallenplan-page #eins table#unsichtbar td {
   background: #fff; /* card background */
   padding: 12px 14px;
   border-radius: 8px;
   box-shadow: 0 6px 18px rgba(19,24,28,0.04);
   vertical-align: top;
   border: 0;
}

/* Kopf des Ansprechpartner-Blocks */
body#hallenplan-page #eins { margin: 28px 18px; }
body#hallenplan-page #eins h1 { color: var(--accent); margin-bottom: 12px; font-size: 1.15rem; }

/* Kleine Lesbarkeitsverbesserungen */
body#hallenplan-page .day-block td a { color: inherit; text-decoration: none; }
body#hallenplan-page .day-block td #titel { display: block; margin-top: 6px; font-weight: 700; color: var(--text); }

/* Generic card & data-table styles used across pages (members, admin lists, etc.) */
.card {background: #fff; padding: 14px; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.04); margin: 14px 0;}

/* Constrained card used for course tables to avoid full-width stretching */
.card--constrained { max-width: 900px; margin: 0.5rem auto; }

/* Kurs-Überschrift: ausgelagert in #kurseuber für konsistentes Styling */
#kurseuber { text-align: center; margin: 0.75rem 0 0.5rem; }
#kurseuber h1 { font-size: 1.35rem; margin: 0; color: var(--accent); }

.data-table {width: 100%; border-collapse: separate; border-spacing: 0 10px;}
.data-table th, .data-table td {padding: 10px 12px; text-align: left; vertical-align: middle;}
.data-table thead th {background: transparent; font-weight: 700; color: var(--muted);}

/* Card-like rows: each cell gets a white card background and subtle shadow */
.data-table {border-collapse: separate; border-spacing: 0 10px;}
.data-table tbody tr {background: transparent}
.data-table tbody tr td {background: #fff; padding: 12px 14px; border-radius: 8px; box-shadow: 0 6px 18px rgba(19,24,28,0.04); vertical-align: middle; border: 0}
.data-table.table--striped tbody tr:nth-child(odd) td {background: #fff}
.data-table.table--striped tbody tr:nth-child(even) td {background: #fbfbfb}

.data-table.table--compact th, .data-table.table--compact td {padding: 8px 10px}

/* Buttons used inside tables and controls */
.button {display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; border: 1px solid rgba(0,0,0,0.08); background: #fff; color: var(--text); cursor: pointer}
.button:hover {opacity: .95}
.button--primary {background: var(--accent); color: #fff; border: 0}
.button--danger {background: #fff; color: #b71c1c; border: 1px solid rgba(183,28,28,0.12)}

/* Small helper to align action buttons in table cells */
.data-table td .button {white-space: nowrap}

@media (max-width: 720px) {
   .data-table thead { display: none }
   .data-table tbody tr { display: block; margin-bottom: 10px }
   .data-table tbody tr td { display: flex; justify-content: space-between; padding: 10px; }
   .data-table tbody tr td:first-child { font-weight: 700 }
}

/* Mitgliedschaft: saubere Preis-Tabelle als Reihen mit leichtem Card-Look */
#mitgliedschaft-page .price-table { width: 100%; border-collapse: separate; border-spacing: 0 10px; margin-top: 12px; }
#mitgliedschaft-page .price-table td { background: #fff; padding: 12px 14px; border-radius: 8px; box-shadow: 0 6px 18px rgba(19,24,28,0.04); }
#mitgliedschaft-page .price-table td.label { font-weight: 700; color: var(--accent); width: 28%; }
#mitgliedschaft-page .price-table td.status { width: 56%; }
#mitgliedschaft-page .price-table td.price { text-align: right; width: 16%; font-weight: 700; }

/* Termine: Listendarstellung mit Karten-Optik */
#termine-page table#unsichtbar { width: 100%; border-collapse: separate; border-spacing: 0 10px; }
#termine-page table#unsichtbar td { background: #fff; padding: 12px 14px; border-radius: 8px; box-shadow: 0 6px 18px rgba(19,24,28,0.04); }
#termine-page table#unsichtbar tr[style] td { opacity: 0.7; }


/* Vorstand: Thumbnail and full-width group image styles */
body#vorstand-page .vorstand-bild { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; display: block; }
body#vorstand-page table#unsichtbar td { vertical-align: middle; }
body#vorstand-page #bildquer { margin-top: 18px; text-align: center; }
body#vorstand-page #bildquer img { max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 8px 28px rgba(0,0,0,0.06); }

.eigene-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.eigene-list li {
  display: flex;
  align-items: center;     /* vertikal zentriert (Bild, Bullet, Text) */
  gap: 12px;               /* Abstand Bild <> Text */
  margin: 0.5rem 0;
  position: relative;
}

/* eigenes "Bullet" links neben dem Bild */
.eigene-list li::before {
  content: "";
  width: 10px;
  height: 10px;
  background: #333;       /* Farbe Bullet anpassen */
  border-radius: 50%;
  margin-right: 6px;
  flex: 0 0 auto;
}

/* Bild */
.eigene-bild {
  width: auto;
  height: 150px;
  border-radius: 8px;
  object-fit: cover;
  display: block;
  flex: 0 0 auto;
}

/* Textbereich: Name fett, Adresse/Email kleiner */
.eigene-text { text-align: left; }
.eigene-text .name { font-weight: 700; display: block; }
.eigene-text .email { font-size: 0.95rem; color: #222; display: block; }
.bildertanzen
{
	width: calc(100% - 106px);
	margin-top: 10px;
	margin-left: 106px;
	align-items: center;
	justify-content: center;
	display: flex;
	
}

/* Abteilungen: stack dept-cards on small screens (mobile) */
@media (max-width: 999px) {
   #abteilungen-page .dept-grid {
      grid-template-columns: 1fr !important;
      gap: 12px;
   }
   #abteilungen-page .dept-grid .dept-card {
      width: 100%;
      justify-content: flex-start; /* keep image left if needed */
   }
}

/* Page-with-side layout: small, contained sidebar used for department/course lists */
.page-with-side { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 8px; }
.page-with-side .side-nav { display: none; }
.page-with-side .page-main { width: 100%; }

@media (min-width: 900px) {
  .page-with-side {  grid-template-columns: 240px 1fr; gap: 20px; align-items: start; }
  .page-with-side .side-nav { display: block; }
  .page-with-side .side-nav ul { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
  .page-with-side .side-nav a { display: block; padding: 8px 10px; border-radius: 6px; color: var(--text); text-decoration: none; }
  .page-with-side .side-nav a:hover, .page-with-side .side-nav a:focus { background: rgba(0,0,0,0.03); }
  .page-with-side .side-nav .side-card { background: #fff; padding: 10px; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.04); }
}

/* Below-nav: when a department/course nav should appear below the main content
    (used on pages like tanz.php). Center the card and keep it compact on wide
    screens while allowing full-width on small viewports. */
.below-nav { width: 100%; max-width: var(--max-width); margin: 18px auto; padding: 8px; }
.below-nav .side-card { max-width: 620px; margin: 0 auto; background: #fff; padding: 12px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.below-nav .side-card ul { list-style: none; margin: 0; padding: 6px 4px; display: flex; flex-direction: column; gap: 6px; }
.below-nav .side-card a { display: block; padding: 8px 10px; border-radius: 6px; color: var(--text); text-decoration: none; }
.below-nav .side-card a:hover, .below-nav .side-card a:focus { background: rgba(0,0,0,0.03); }

@media (min-width: 900px) {
   /* On wider screens keep the below-nav centered but don't let it stretch too wide */
   .below-nav .side-card { max-width: 480px; }
}

@media (max-width: 420px) {
   .below-nav .side-card a { padding: 10px 12px; font-size: 1rem; }
}