/*template: mihd*/
/* =======================================================
   GLOBAL RESET
======================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

html {
  overflow-x: clip;
}

/*body {
  overflow-x: hidden;
}*/

/* =======================================================
   DESIGN VARIABLEN
======================================================= */

:root {
  /* =======================
     BRAND / CI FARBEN
  ======================= */
  --color-primary: #E53935;
  --color-primary-hover: #D32F2F;   /* Hover-/Aktiv-Zustand von --color-primary */
  --color-primary-dark: #B71C1C;
  --color-primary-light: #FF6F61;
  --color-secondary: #7A7A7A;
  --color-secondary-dark: #4A4A4A;
  --color-secondary-light: #B5B5B5;

  /* =======================
     NEUTRALE FARBEN
     (für Text & Flächen)
  ======================= */
  --color-neutral-100: #ffffff;  /* hell (weiß) */
  --color-neutral-900: #000000;  /* dunkel (schwarz) */

  /* =======================
     TEXTFARBEN
  ======================= */
  --text-default: #222222;       /* Haupttext */
  --text-muted: #555555;         /* Nebeninfos */
  --text-subtle: #aaaaaa;        /* schwache Trenner/Meta-Infos (z. B. Termin-Trenner) */

  /* =======================
     LINKS (hell / dunkel Kontext)
  ======================= */
  --link-on-light: var(--color-primary);      /* im Content */
  --link-on-dark: var(--color-neutral-100);   /* z. B. Footer */

  /* =======================
     HINTERGRÜNDE
  ======================= */
  --bg-primary: var(--color-primary);         /* Header, Footer */
  --bg-hover: #f2e6e3;                       /* Hover auf hell */
  --bg-surface: var(--color-neutral-100);     /* Karten/Kacheln-Hintergrund */

  /* =======================
     RAHMEN / UI ELEMENTE
  ======================= */
  --border-default: #cccccc;
  --border-light: #dddddd;

  /* =======================
     HINWEIS-POPUP (📌 Notiz, z. B. bei Terminen)
  ======================= */
  --color-note-bg: #fff8a8;
  --color-note-border: #e6d97a;
  --color-note-text: #7a6a00;

  /* =======================
     SCHATTEN
  ======================= */
  --shadow-faint: rgba(0,0,0,0.05);
  --shadow-soft: rgba(0,0,0,0.15);
  --shadow-light: rgba(0,0,0,0.2);
  --shadow-medium-light: rgba(0,0,0,0.25);
  --shadow-medium: rgba(0,0,0,0.35);
  --shadow-strong: rgba(0,0,0,0.4);
  --shadow-heavy: rgba(0,0,0,0.45);
  --shadow-intense: rgba(0,0,0,0.5);

  /* =======================
     WEISSE OVERLAYS (z. B. auf Bildern/dunklem Grund)
  ======================= */
  --overlay-white-subtle: rgba(255,255,255,0.1);
  --overlay-white-light: rgba(255,255,255,0.2);
  --overlay-white-strong: rgba(255,255,255,0.6);
}


/* =======================================================
   BASIS LAYOUT & TYPOGRAFIE
======================================================= */

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;

  font-family: -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-default);
  font-size: 1rem;
}


/* =======================================================
   HAUPTINHALT
======================================================= */

main {
  flex: 1;
  max-width: 1000px;
  margin: 0 auto;
  padding: 1rem 2rem;
  text-align: justify;
  hyphens: auto;
}


/* =======================================================
   HEADER
======================================================= */

.site-header {
  background: var(--color-neutral-100);
  color: var(--color-neutral-100);
  position: relative;
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 1rem 0.5rem;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vw, 3rem);
}

.header-inner img {
  display: block;
}

.wappen,
.wappen-right {
  height: 90px;
  width: auto;
  flex-shrink: 0;
  filter:
    drop-shadow(0 4px 8px var(--shadow-medium))
    drop-shadow(0 0 3px var(--shadow-soft));
}

.silhouette {
  max-height: 90px;
  width: auto;
   filter:
    drop-shadow(0 3px 6px var(--shadow-intense))
    drop-shadow(0 10px 20px var(--shadow-strong));
}


/* =======================================================
   DESKTOP NAVIGATION
======================================================= */

.main-nav {
  margin-top: 0.5rem;
  padding: 0.5rem 1rem;
  padding-top: 1.5rem;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.nav-item {
  position: relative;
  flex: 0 0 auto;
}

.nav-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 6px;        /* Größe der "Brücke" */
}

.main-nav .nav-item > a {
  display: block;
  background: var(--color-neutral-100);
  color: var(--color-primary);

  padding: 0.4rem 1rem;
  border-radius: 20px;
  border: 2px solid var(--color-primary-dark);

  box-shadow: 0 6px 18px var(--shadow-strong);

  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}

.main-nav .nav-item > a:hover {
  background: var(--bg-hover);
}


/* =======================================================
   DESKTOP DROPDOWN
======================================================= */

.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;

  background: var(--color-primary);
  padding: 0.6rem;
  border-radius: 20px;

  min-width: 250px;
  box-shadow: 0 6px 18px var(--shadow-strong);

  display: none;
  flex-direction: column;
  gap: 6px;

  z-index: 1000;
}

.nav-item:hover .submenu {
  display: flex;
}

.submenu a {
  display: block;
  width: 100%;

  background: var(--color-neutral-100);
  color: var(--color-primary);

  padding: 0.4rem 0.8rem;
  border-radius: 20px;
  border: 2px solid var(--color-primary-dark);

  text-decoration: none;
}

.submenu a:hover {
  background: var(--bg-hover);
}

/* =======================================================
   Social-Media-Button
======================================================= */

.social-fixed {
  position: fixed;
  top: 15vh;
  right: 0;
  z-index: 9999;

  /* verhindert Layout-Probleme */
  pointer-events: none;
}

.social-box {
  background: var(--color-primary);
  border-radius: 12px 0 0 12px;
  overflow: hidden;
  box-shadow: 0 4px 10px var(--shadow-light);

  pointer-events: auto; /* wieder klickbar */
}

.social-box a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border-bottom: 1px solid var(--overlay-white-light);
}

.social-box a:last-child {
  border-bottom: none;
}

.social-box img {
  width: 26px;
  height: 26px;
}

/* Hover */
.social-box a:hover {
  background: var(--overlay-white-subtle);
}

/* =======================================================
   Kokelhase am Bildschirmrand
======================================================= */

.bunny-fixed {
  position: fixed;
  bottom: 10vh;   /* unteres Drittel */
  right: -8px;
  z-index: 9999;
  cursor: pointer;
  /*pointer-events: none; /* rein dekorativ damit wird die funktion des hasen inaktiv*/
}

.bunny-fixed img {
  height: 150px;
  width: auto;   /* Größe anpassen */
  /*width: 80px;
  height: auto;*/
}

/* =======================================================
   TYPOGRAFIE (CONTENT-BEREICH)
======================================================= */

/* Ueberschriften sollen nie mit Bindestrich umbrochen werden - das
   'hyphens: auto' von 'main' (weiter oben, fuer den Blocksatz im
   Fliesstext gedacht) wuerde sonst auch hier vererbt und fuehrt gerade
   in der schmalen mobilen Ansicht zu haesslich getrennten Woertern in
   Titeln und Zwischenueberschriften. */
main h1, main h2, main h3, main h4, main h5, main h6 {
  hyphens: none;
}

main h1 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 1.6rem 0 1rem;
}

main > h1 {
  text-align: center;
}

main h2 {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--color-primary);
  margin: 1.4rem 0 0.7rem;
}

main h3 {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-primary);

  margin-top: 1.6rem;      /* mehr Abstand davor */
  margin-bottom: 0.25rem;  /* deutlich weniger danach */
}

main h4 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-primary);

  margin-top: 2rem;
  margin-bottom: 0.2rem;
}

/* Text direkt nach Überschrift enger anschließen */
main h1 + p,
main h2 + p,
main h3 + p,
main h4 + p {
  margin-top: 0;
}

main p {
  margin-bottom: 0.4rem;
}

main .center-text {
  text-align: center;
  white-space: pre-line;
}

/* Impressum / Datenschutz lesen sich ohne Blocksatz besser */
main.imprint,
main.privacy {
  text-align: left;
}

main .poem {
  text-align: center;
  font-style: italic;
  margin: 0 auto;
  max-width: 900px;
  line-height: 1.6;
  white-space: pre-line;
}

/* Abstand vor und nach Gedichtblock */
main p + .poem {
  margin-top: 1.2rem;
}

main .poem + p {
  margin-top: 1.2rem;
}

main .poem-author {
  display: block;
  margin-top: 0.6rem;
  font-style: normal;
  font-size: 0.75em;
}

main ul,
main ol {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

/* =======================================================
   TERMINLISTE (Termin-Kacheln)

   Aufbau/Stil angelehnt an WSC28 (partials/termine.html.twig,
   partials/nexttermine.html.twig, Klassen .termine/.datum/.titel/.ort),
   aber in der Farbgebung an das Rot des heiligendorf.de-Corporate-
   Designs angepasst statt an WSC28-Gold. Gilt für die Monatsübersicht
   (#event-list, event-listlocation-notice.html.twig) ebenso wie für
   die Kurzvorschau (event-next.html.twig).
======================================================= */

#event-list {
  max-width: 700px;
  margin: 0 auto;
}

#event-list h3 {
  margin: 2rem 0 0.8rem;

  color: var(--color-primary);
  text-transform: capitalize;
  text-align: left;
}

#event-list h3:first-child {
  margin-top: 0;
}

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

.termine li {
  display: flex;
  align-items: flex-start;
  gap: 16px;

  margin-bottom: 10px;
  padding: 14px 18px;

  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  /* Farbiger Streifen je Kalender (Nutzer-Wunsch 03.09.2026): Basis-/
     Fallback-Farbe hier, ueberschrieben per Inline-Style aus X-CAL-COLOR
     (s. event-listlocation-notice.html.twig) - analog zum farbigen
     Streifen der Terminkacheln im Kalenderdienst-Admin (.tile dort). */
  border-left: 6px solid var(--color-primary);
  border-radius: 12px;
  box-shadow: 0 6px 18px var(--shadow-soft);

  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.termine li:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px var(--shadow-light);
}

.termine .datum {
  display: grid;
  grid-template-columns: 32px 10px 42px 10px 90px;
  gap: 4px;
  align-items: baseline;

  flex-shrink: 0;
  white-space: nowrap;

  color: var(--color-primary);
  font-weight: 700;
}

/* Kurzvorschau (event-next.html.twig) zeigt Tag + Monat statt nur den
   Tag, weil hier - anders als in der nach Monaten gruppierten
   Hauptliste - keine Monatsüberschrift existiert, die diese Info schon
   liefert. Die feste Spaltenbreite der Hauptliste passt für den
   längeren Text nicht, daher bekommt die Kurzvorschau ihre Breite vom
   Inhalt selbst. */
.termine--next .datum {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.termine--next .datum .wd {
    display: inline-block;
    width: 1.6em;
}

.termine--next .datum .tag {
    display: inline-block;
    width: 7.2em;
}

.termine--next .datum .zeit {
    display: inline-block;
    width: 5.5em;
}

.termine--next .datum .sep {
    display: inline-block;
    width: 1em;
    text-align: center;
}

.termine .sep {
  text-align: center;
  color: var(--text-subtle);
}

.termine .tag {
  text-align: center;
}

.termine .wd,
.termine .zeit {
  text-align: left;
}

.termine .titel {
  flex: 1;
  min-width: 0;

  position: relative;
  text-align: left;

  word-break: break-word;
  overflow-wrap: anywhere;
}

.termine .ort {
  margin-top: 4px;

  color: var(--text-muted);
  font-size: 0.9em;

  text-align: left;
}

/* 📌 Icon */

.note-icon {
  cursor: pointer;
  margin-left: 6px;
}

/* 📒 Notiz

   Klappt - wie in WSC28 - als normaler Block INNERHALB der Kachel
   auf (kein frei schwebendes Overlay), damit der Text nicht über
   anderen Inhalt liegt und immer vollständig lesbar bleibt. */

.note-popup {
  display: none;

  margin-top: 8px;
  padding: 10px 12px;

  background: var(--color-note-bg);
  border: 1px solid var(--color-note-border);
  border-radius: 8px;

  font-size: 0.9em;
  line-height: 1.4;
}

.note-popup::before {
  content: "Hinweis";
  display: block;
  font-weight: bold;
  margin-bottom: 6px;
  color: var(--color-note-text);
}

.note-popup.active {
  display: block;
}

/* =======================================================
   KALENDER-TERMIN BUTTONS (nebeneinander)
======================================================= */

.calendar-buttons{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
}


/* =======================================================
   KALENDER ABO BUTTON
======================================================= */

.calendar-nav {
  display: flex;
  justify-content: center;

  margin: 0.5rem 0 1.5rem;
}

.calendar-nav a {
  display: block;

  background: var(--color-neutral-100);
  color: var(--color-primary);

  padding: 0.4rem 1rem;
  border-radius: 20px;
  border: 2px solid var(--color-primary-dark);

  box-shadow: 0 6px 18px var(--shadow-strong);

  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}

.calendar-nav a:hover {
  background: var(--bg-hover);
}


/* =======================================================
   KALENDER ABO POPUP
======================================================= */

.calendar-popup {
  display: none;

  position: fixed;
  inset: 0;

  background: var(--shadow-heavy);

  z-index: 9999;

  align-items: center;
  justify-content: center;

  padding: 20px;
}

.calendar-popup.active {
  display: flex;
}

.calendar-popup-menu {
  display: flex;
  flex-direction: column;

  width: fit-content;

  background: var(--color-primary);

  padding: 0.6rem;
  border-radius: 20px;

  box-shadow: 0 6px 18px var(--shadow-strong);

  gap: 6px;
}

.calendar-popup-link {
  display: block;

  background: var(--color-neutral-100);
  color: var(--color-primary);

  padding: 0.4rem 1rem;

  border-radius: 20px;
  border: 2px solid var(--color-primary-dark);

  text-decoration: none;

  text-align: center;
  font-size: 1.05rem;

  white-space: nowrap;
}

.calendar-popup-link:hover {
  background: var(--bg-hover);
}

/* Hinweis-Link auf weitere Kalender (kalenderdienst.heiligendorf.de) -
   optisch dezent abgesetzt von den eigentlichen Abo-Links darüber. */
.calendar-more-link {
  display: block;

  margin-top: 4px;
  padding: 0.4rem 1rem;

  background: transparent;
  color: var(--color-neutral-100);

  border-radius: 20px;
  border: 1px dashed var(--overlay-white-strong);

  text-decoration: none;

  text-align: center;
  font-size: 0.95rem;

  white-space: nowrap;
}

.calendar-more-link:hover {
  background: var(--overlay-white-subtle);
}

/* =======================================================
   EVENT NEXT POPUP
======================================================= */

.event-next-popup {
  display: none;

  position: fixed;
  inset: 0;

  background: var(--shadow-heavy);

  z-index: 9999;

  align-items: center;
  justify-content: center;

  padding: 20px;
}

.event-next-popup.active {
  display: flex;
}

.event-next-popup-box {
  display: flex;
  flex-direction: column;

  width: fit-content;
  max-width: 90vw;

  background: var(--color-primary);

  padding: 0.7rem;
  border-radius: 20px;

  box-shadow: 0 6px 18px var(--shadow-strong);

  gap: 8px;
}

.event-next-popup-date {
  text-align: center;

  color: var(--color-neutral-100);

  font-size: 2rem;
  font-weight: 700;

  margin-bottom: 0.2rem;
}

.event-next-popup-item {
  display: block;

  background: var(--color-neutral-100);
  color: var(--color-primary);

  padding: 0.4rem 1rem;

  border-radius: 20px;
  border: 2px solid var(--color-primary-dark);

  text-align: center;
  font-size: 1.05rem;

  white-space: nowrap;
}

.event-next-popup-more {
  display: flex;
  flex-direction: column;
  gap: 8px;
}



/* =====================================================
Teilenbutton für Plakate
===================================================== */

.blackboard {
  max-width: 400px;
  margin: 1.5rem auto;
  padding: 0 30px;
}

.poster {
  position: relative;
  margin-bottom: 25px;
}

.poster img {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 8px 22px var(--shadow-soft);
  background: var(--color-neutral-100);
  padding: 6px;
  transition: transform 0.3s ease;
  cursor: pointer; /* Bild ist seit 01.09.2026 selbst antippbar (oeffnet das Teilen-Menu) */
}

.poster img:hover {
  transform: scale(1.02);
}

.share-btn {
  position: absolute;
  top: -12px;   /* 🔥 in die Ecke ziehen */
  right: -12px;

  width: 44px;
  height: 44px;

  border-radius: 50%;
  border: none;

  background: var(--color-primary); /* 🔥 rot */
  color: var(--color-neutral-100);

  box-shadow: 0 6px 14px var(--shadow-medium-light);

  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;

  transition: all 0.2s ease;
}

/* Hover */
.share-btn:hover {
  transform: scale(1.1);
  background: var(--color-primary-hover);
}

/* Klick */
.share-btn:active {
  transform: scale(0.95);
}

/* =======================================================
   POSTER TEILEN-POPUP (Story/Post/Print-Auswahl)
   Bewusst analog zu .calendar-popup/-menu/-link oben aufgebaut, fuer ein
   einheitliches Popup-Erscheinungsbild im gesamten Theme.
======================================================= */

.poster-share-popup {
  display: none;

  position: fixed;
  inset: 0;

  background: var(--shadow-heavy);

  z-index: 9999;

  align-items: center;
  justify-content: center;

  padding: 20px;
}

.poster-share-popup.active {
  display: flex;
}

.poster-share-popup-menu {
  display: flex;
  flex-direction: column;

  width: fit-content;

  background: var(--color-primary);

  padding: 0.6rem;
  border-radius: 20px;

  box-shadow: 0 6px 18px var(--shadow-strong);

  gap: 6px;
}

.poster-share-popup-link {
  display: block;

  background: var(--color-neutral-100);
  color: var(--color-primary);

  padding: 0.4rem 1rem;

  border-radius: 20px;
  border: 2px solid var(--color-primary-dark);

  text-decoration: none;

  text-align: center;
  font-size: 1.05rem;

  white-space: nowrap;
}

.poster-share-popup-link:hover {
  background: var(--bg-hover);
}

.poster-share-popup-link-klammer {
  display: block;

  font-size: 0.7rem;
  font-weight: 400;
  opacity: 0.7;

  margin-top: 2px;

  white-space: normal;
}


/* =======================================================
   PLAKAT-SYMBOL UND -POPUP IN DEN TERMINLISTEN

   Ergaenzung 10.09.2026 (Nutzerwunsch): In der Terminuebersicht
   (event-listlocation-notice.html.twig) und der Kurzvorschau
   (event-next.html.twig) steht neben dem Notiz-Pin 📌 ein Plakat-Symbol 📋,
   sobald fuer einen Termin ein Plakat hinterlegt ist. Ein Klick oeffnet ein
   Popup mit allen vorhandenen Formaten.

   Anders als das Popup des Schwarzen Bretts (.poster-share-popup weiter
   oben) zeigt dieses die Plakate als BILDER: auf dem Schwarzen Brett sieht
   man das Plakat ohnehin schon auf der Seite, dort geht es nur noch um die
   Format-Auswahl zum Teilen - in der Terminliste dagegen ist das Popup die
   einzige Stelle, an der das Plakat ueberhaupt zu sehen ist.
======================================================= */

/* 📋 Symbol - bewusst dieselben Werte wie .note-icon, damit Pin und Plakat
   nebeneinander gleich sitzen. */
.poster-icon {
  cursor: pointer;
  margin-left: 6px;
}

.event-poster-popup {
  display: none;

  position: fixed;
  inset: 0;

  background: var(--shadow-heavy);

  z-index: 9999;

  align-items: center;
  justify-content: center;

  padding: 20px;
}

.event-poster-popup.active {
  display: flex;
}

.event-poster-popup-inner {
  display: flex;
  flex-wrap: wrap;

  gap: 14px;

  justify-content: center;
  align-items: flex-start;

  /* Hohe Story-Formate sollen das Popup nicht ueber den Bildschirm hinaus
     wachsen lassen. */
  max-height: 90vh;
  overflow: auto;

  padding: 14px;

  background: var(--color-neutral-100);

  border-radius: 20px;
  box-shadow: 0 6px 18px var(--shadow-strong);
}

.event-poster-item {
  margin: 0;
  max-width: 220px;

  cursor: pointer;
  text-align: center;
}

.event-poster-item img {
  display: block;

  max-width: 100%;
  max-height: 60vh;

  border-radius: 10px;
}

.event-poster-item figcaption {
  margin-top: 6px;

  font-size: 0.85em;
  line-height: 1.3;
}

.event-poster-item figcaption span {
  display: block;

  font-size: 0.85em;
  opacity: 0.7;
}

/* =======================================================
   FORMULAR – GRUNDLAYOUT
======================================================= */

/* Abstand zwischen Feldern */
.form-field {
    margin-bottom: 22px;
}

/* Labels */
.form-field label {
    font-size: 18px;
    display: block;
    margin-bottom: 6px;
}

/* Eingabefelder */
.form-field input,
.form-field textarea,
.form-field select {
    width: 100%;
    font-size: 18px;
    padding: 12px 15px;
    border: 1px solid var(--border-default);
    border-radius: 6px;
    box-sizing: border-box;
    max-width: 100%;
}

/* Textarea */
.form-field textarea {
    min-height: 180px;
    resize: vertical;
}


/* =======================================================
   FILE UPLOAD
======================================================= */

/* Input selbst */
.form-field input[type="file"] {
    border: none;
    background: none;
    padding: 0;
    width: auto;
    display: inline-block;
}

/* Wrapper entfernen (falls Grav ihn setzt) */
.form-field .form-input-wrapper {
    border: none;
    background: none;
    padding: 0;
}

/* Button */
.form-field input[type="file"]::file-selector-button {
    background: var(--color-primary);
    color: var(--color-neutral-100);
    padding: 10px 25px;
    border-radius: 25px;
    border: none;
    cursor: pointer;
    font-size: 18px;
}

/* Hover */
.form-field input[type="file"]::file-selector-button:hover {
    background: var(--color-primary-dark);
}


/* =======================================================
   CAPTCHA
======================================================= */

.captcha-wrapper{
    margin:1.5rem 0;
}

.captcha-image{
    display:block;
    margin:12px 0;
    border:1px solid var(--border-light);
    border-radius:10px;
    background:var(--color-neutral-100);
}

.captcha-wrapper input[type="number"]{
    max-width:220px;
}


/* =======================================================
   CHECKBOX (DATENSCHUTZ)
======================================================= */

/* Checkbox + Text nebeneinander */
.form-field input[type="checkbox"] {
    width: auto;
    display: inline-block;
    margin-right: 8px;
    vertical-align: middle;
}

/* Label neben Checkbox */
.form-field input[type="checkbox"] + label {
    display: inline;
    vertical-align: middle;
    margin: 0;
}

/* Optional: schöner Abstand nach oben */
.form-field.checkbox {
    margin-top: 10px;
}


/* =======================================================
   LEBENDIGER ADVENTSKALENDER (Schachbrett-Terminformular)
======================================================= */

.form-field.lak-kalender .lak-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    margin: 16px 0 6px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-secondary-dark);
    text-align: center;
}
.form-field.lak-kalender .lak-weekdays .we {
    color: var(--color-primary-dark);
}
.form-field.lak-kalender .form-input-wrapper,
.form-field.lak-kalender .checkboxes {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
}
.form-field.lak-kalender .lak-day {
    position: relative;
    aspect-ratio: 1 / 1;
    border: 2px solid var(--color-primary);
    border-radius: 10px;
    background: var(--color-neutral-100);
    overflow: hidden;
}
.form-field.lak-kalender .lak-day--empty {
    border-color: transparent;
    background: transparent;
}
.form-field.lak-kalender .lak-day:nth-child(7n+6):not(.lak-day--empty),
.form-field.lak-kalender .lak-day:nth-child(7n):not(.lak-day--empty) {
    border-width: 3px;
}
.form-field.lak-kalender .lak-day label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    height: 100%;
    padding: 4px;
    margin: 0;
    text-align: center;
    cursor: pointer;
    border-radius: 8px;
    transition: background .15s ease, transform .1s ease;
}
.form-field.lak-kalender .lak-day-weekday {
    display: none;
}
.form-field.lak-kalender .lak-day-num {
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--color-primary-dark);
}
.form-field.lak-kalender .lak-day-status {
    font-size: .72rem;
    font-weight: 400;
    font-style: italic;
    line-height: 1.25;
    color: var(--color-secondary-dark);
    word-break: break-word;
    white-space: pre-line;
}
.form-field.lak-kalender .lak-day:hover label {
    transform: scale(1.04);
}

/* Checkbox liegt unsichtbar hinter der Kachel: der Klick läuft komplett
   über das Label (for-Attribut), das rein optische Kästchen fällt weg */
.form-field.lak-kalender .lak-day input[type="checkbox"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    z-index: 0;
    pointer-events: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    background: transparent;
}
/* Das eigentlich sichtbare Kaestchen kam gar nicht von der Checkbox, sondern von der
   eingebauten Formular-Plugin-Deko ".checkboxes label:before" (plugins/form/assets/form-styles.css) -
   die wird hier fuer unser Kalenderfeld gezielt abgeschaltet */
.form-field.lak-kalender .checkboxes label {
    padding-left: 0;
    margin-right: 0;
}
.form-field.lak-kalender .checkboxes label::before {
    content: none;
    display: none;
}
.form-field.lak-kalender .lak-day label {
    position: relative;
    z-index: 1;
}

/* Ausgewählt (frei + angeklickt) */
.form-field.lak-kalender .lak-day input[type="checkbox"]:checked + label {
    background: var(--color-primary);
}
.form-field.lak-kalender .lak-day input[type="checkbox"]:checked + label .lak-day-num,
.form-field.lak-kalender .lak-day input[type="checkbox"]:checked + label .lak-day-status {
    color: var(--color-neutral-100);
}

/* Bereits vergeben: dezentes Weihnachtsgruen statt Grau */
.form-field.lak-kalender .lak-day--booked {
    background: #e8f2e9;
    border-color: #74997e;
}
.form-field.lak-kalender .lak-day--booked .lak-day-num,
.form-field.lak-kalender .lak-day--booked .lak-day-status {
    color: #33553d;
}
.form-field.lak-kalender .lak-day--booked label {
    cursor: not-allowed;
}
.form-field.lak-kalender .lak-day--booked:hover label {
    transform: none;
}
.form-field.lak-kalender .lak-day--booked input[type="checkbox"] {
    display: none;
}

.lak-legende {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 14px 0 6px;
    font-size: .95rem;
    color: var(--color-secondary-dark);
}
.lak-legende-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.lak-swatch {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 2px solid var(--color-primary);
}
.lak-swatch.belegt {
    background: #e8f2e9;
    border-color: #74997e;
}

/* Mobil: statt Schachbrett-Raster eine einspaltige Liste, ein Tag pro Zeile
   (Wochentag + Tageszahl + Status), in den gleichen Rot/Gruen-Farben wie
   die Desktop-Ansicht. Eigener Breakpoint (640px statt der sonst im Theme
   verwendeten 900px), weil hier gezielt vom Raster auf eine Liste
   umgeschaltet wird statt nur Abstaende/Groessen anzupassen. */
@media (max-width: 640px) {
    .form-field.lak-kalender .lak-weekdays {
        display: none;
    }
    .form-field.lak-kalender .form-input-wrapper,
    .form-field.lak-kalender .checkboxes {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .form-field.lak-kalender .lak-day--empty {
        display: none;
    }
    .form-field.lak-kalender .lak-day {
        aspect-ratio: auto;
        border-radius: 8px;
    }
    .form-field.lak-kalender .lak-day:nth-child(7n+6):not(.lak-day--empty),
    .form-field.lak-kalender .lak-day:nth-child(7n):not(.lak-day--empty) {
        border-width: 2px;
    }
    .form-field.lak-kalender .lak-day label {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        padding: 10px 14px;
        text-align: left;
    }
    .form-field.lak-kalender .lak-day-weekday {
        display: inline-block;
        flex: 0 0 auto;
        width: 2.1em;
        font-size: .8rem;
        font-weight: 700;
        letter-spacing: .03em;
        text-transform: uppercase;
        color: var(--color-primary-dark);
    }
    .form-field.lak-kalender .lak-day--booked .lak-day-weekday {
        color: #4d7358;
    }
    .form-field.lak-kalender .lak-day-num {
        flex: 0 0 auto;
        width: 1.7em;
        font-size: 1.15rem;
        text-align: left;
    }
    .form-field.lak-kalender .lak-day-status {
        flex: 1 1 auto;
        text-align: left;
        font-size: .82rem;
        font-style: normal;
    }
}


/* =======================================================
   BUTTON
======================================================= */

input[type="submit"],
.button {
    background: var(--color-primary);
    color: var(--color-neutral-100);
    padding: 12px 35px;
    border-radius: 25px;
    border: none;
    cursor: pointer;
    font-size: 18px;
}

/* Hover */
input[type="submit"]:hover,
.button:hover {
    background: var(--color-primary-dark);
}

/* Als LINK genutzter Button (z.B. der PDF-Download auf der
   Adventskalender-Seite): die Regeln oben sind fuer <input>/<button>
   gedacht, ein <a> braucht zusaetzlich inline-block (sonst wirkt das
   Innenabstand-Padding nicht) und darf nicht unterstrichen sein. */
a.button {
    display: inline-block;
    text-decoration: none;
    line-height: 1.2;
}
a.button:hover {
    color: var(--color-neutral-100);
    text-decoration: none;
}

/* Download-Zeile unter der Legende des Adventskalenders. */
.lak-plakat-download {
    text-align: center;
    margin: 18px 0 24px;
}
.lak-plakat-hinweis {
    display: block;
    margin-top: 8px;
    font-size: 15px;
    opacity: 0.75;
}


/* =======================================================
   PICTURE SLIDER
======================================================= */

.picture-slider {
  position: relative;
  width: 100%;
}

.picture-slider #picture-slider-container {
  width: 100%;
}

.picture-slider .slide {
  display: none;
  width: 100%;
}

.picture-slider .slide img {
  display: block;
  width: 100%;

  border-radius: 12px;

  border: 4px solid var(--overlay-white-strong);
  box-shadow: 
    0 8px 20px var(--shadow-soft),
    0 0 0 1px var(--shadow-faint);
}

/* =======================================================
   DESKTOP (CAROUSEL mit OVERFLOW sichtbar)
======================================================= */

.picture-slider-wrapper {
  overflow: visible; /* 👉 nichts abschneiden */
}

.picture-slider.carousel {
  position: relative;

  width: min(1200px, 100%);
  margin: 65px auto;

  aspect-ratio: 13 / 2;

  overflow: visible; /* 👉 wichtig für prev/next + Schatten */
}

/* Bühne */
.picture-slider.carousel .carousel-track {
  position: relative;
  height: 100%;
}

/* Slides */
.picture-slider.carousel .carousel-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 75%;

  transform: translate(-50%, -50%) scale(0.85);
  opacity: 0;

  transition:
    transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.8s ease;

  z-index: 1;
}

/* aktiv */
.picture-slider.carousel .carousel-item.active {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  z-index: 3;
}

/* links */
.picture-slider.carousel .carousel-item.prev {
  transform: translate(-95%, -50%) scale(0.9);
  opacity: 0.5;
  z-index: 2;
}

/* rechts */
.picture-slider.carousel .carousel-item.next {
  transform: translate(-5%, -50%) scale(0.9);
  opacity: 0.5;
  z-index: 2;
}

/* Bild */
.picture-slider.carousel .carousel-item img {
  display: block;
  width: 100%;
  height: auto;

  border-radius: 12px;
  border: 4px solid var(--overlay-white-strong);

  box-shadow: 
    0 12px 30px var(--shadow-light),
    0 0 0 1px var(--shadow-faint);
}

/* Fade links */
.picture-slider.carousel .carousel-item.prev img {
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    var(--color-neutral-900) 55%,
    var(--color-neutral-900) 100%
  );
}

/* Fade rechts */
.picture-slider.carousel .carousel-item.next img {
  mask-image: linear-gradient(
    to left,
    transparent 0%,
    var(--color-neutral-900) 55%,
    var(--color-neutral-900) 100%
  );
}


/* =======================================================
   COVER SLIDER
======================================================= */

.cover-slider {
  position: relative;
  max-width: 400px;
  margin: 1.5rem auto;
  padding: 0 30px;
  text-align: center;
}

.cover-slider img {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: 6px;
  box-shadow: 0 6px 18px var(--shadow-medium);
  background: var(--color-neutral-100);
  padding: 6px;
  transition: transform 0.3s ease;
}

.cover-slider img:hover {
  transform: scale(1.03);
}

/* =======================
   NAVIGATION (PFEILE)
======================= */

.cover-slider {
  position: relative;
}

/* Buttons */
.cover-slider button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  display: flex;                 /* Zentrierung */
  align-items: center;
  justify-content: center;

  width: 30px;
  height: 60px;

  background: var(--shadow-soft);  /* transparenter */
  color: var(--color-neutral-100);
  border: none;

  font-size: 1.6rem;
  line-height: 1;

  cursor: pointer;
  border-radius: 10px;

  z-index: 10;

  opacity: 0;
  pointer-events: none;

  transition: background 0.2s ease, opacity 0.2s ease;
}

/* sichtbar bei hover */
.cover-slider:hover button,
.cover-slider button:hover {
  opacity: 1;
  pointer-events: auto;
}

/* exakt am Bildrand */
.cover-slider .cover-prev {
  left: 0px;
}

.cover-slider .cover-next {
  right: 0px;
}

/* Hover */
.cover-slider button:hover {
  background: var(--shadow-medium);
}

/* Klick */
.cover-slider button:active {
  transform: translateY(-50%) scale(0.95);
}

/* =======================
   Blackboard
======================= */

.blackboard {
  max-width: 400px;
  margin: 1.5rem auto;
  text-align: center;
  padding: 0 30px;
}

.blackboard img {
  width: 100%;
  border-radius: 6px;
  box-shadow: 0 6px 18px var(--shadow-medium);
  background: var(--color-neutral-100);
  padding: 6px;
  margin-bottom: 20px;
  transition: transform 0.3s ease;
}

.blackboard img:hover {
  transform: scale(1.03);
}

/* =======================
   Visitenkarten
======================= */

.cards {
  width: 900px;
  max-width: 100%;
  margin: 20px auto;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

/* =======================
   PLAKAT / POSTER-LINK
   (klickbares Plakat mit weißem Rahmen, z. B. Kalender-Abo-Hinweis)
======================= */

.poster-frame {
  display: inline-block;

  max-width: 340px;
  width: 100%;

  padding: 10px;
  margin: 0 auto;

  background: var(--color-neutral-100);
  border-radius: 14px;
  box-shadow: 0 6px 18px var(--shadow-soft);

  text-decoration: none;

  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.poster-frame:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px var(--shadow-light);
}

.poster-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

/* ======================= */

.card {
  background: var(--color-neutral-100);
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 6px 18px var(--shadow-soft);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px var(--shadow-light);
}

.card-inner {
  display: grid;
  grid-template-columns: 1fr 90px;
  gap: 15px;
  align-items: flex-start;
}

.card-text {
  min-width: 0;
  text-align: left;
}

/* gleichmäßige Abstände */
.card-text > * {
  margin-bottom: 6px;
}

/* letzte Zeile sauber */
.card-text > *:last-child {
  margin-bottom: 0;
}

/* =======================
   MEDIA (Foto / Logo)
======================= */

.card-media {
  width: 90px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* PASSFOTO */
.card-media .photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 8px;
}

/* LOGO / WAPPEN */
.card-media .logo {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 0;
}

/* ======================= */

.card-text h3 {
  margin-top: 0;
  margin-bottom: 0.25rem;
}

.opening {
  margin-top: 10px;
  font-size: 0.95em;
  line-height: 1.4;
}

/* --- Öffnungszeiten Layout --- */
.opening-title {
  font-weight: bold;
  margin-bottom: 6px;
}

.opening-row {
  display: grid;
  grid-template-columns: 1fr max-content;
  gap: 10px;
}

.opening-days {
  text-align: left;
}

.opening-times {
  text-align: right;
  white-space: nowrap;
}

/* optional alt */
.opening strong {
  display: block;
  margin-bottom: 4px;
}

.note {
  margin-top: 10px;
  font-size: 0.9em;
  color: var(--text-muted);
}

/* =======================
   Social (eigene Zeile)
======================= */

.social {
  display: block;
  margin-top: 6px;
  line-height: 1;
}

.social a {
  display: inline-block;
  margin-right: 8px;
}

.social img {
  display: block;
  width: 18px;
  height: 18px;

  opacity: 0.8;
  transition: opacity 0.2s ease, transform 0.15s ease;
}

.social img:hover {
  opacity: 1;
  transform: scale(1.1);
}

/* =======================================================
   FOOTER
======================================================= */

.site-footer {
  background: var(--color-secondary);
  color: var(--color-neutral-100);
  padding: 0.5rem 0;
}

.footer-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1.5rem;
  text-align: center;
}

.footer-links {
  margin-top: 0.4rem;
  font-size: 0.9rem;
}

.footer-links a {
  color: var(--color-neutral-100);
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}



/* =======================================================
   BURGER (standardmäßig versteckt)
======================================================= */

.nav-toggle {
  display: none;
}

.burger {
  display: none;
}


/* =======================================================
   MOBILE VERSION
======================================================= */

@media (max-width: 900px) {

  /* Termin-Kacheln: Datum/Uhrzeit auf eine eigene Zeile über dem
     Titel stellen (statt links daneben), damit auf schmalen
     Bildschirmen nicht jedes Wort des Titels einzeln umbricht. */
  .termine li {
    flex-direction: column;
    gap: 6px;
  }

  .termine .datum {
    width: auto;
  }
	
  .termine.termine--next .datum {
    width: 600px;
  }
  
  /* Header */
  .header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
  }

  .header-inner::after {
    content: "Heiligendorf";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-primary);
    white-space: nowrap;
  }

  .wappen { height: 70px; }

  .header-inner .silhouette,
  .header-inner .wappen-right {
    display: none;
  }

  /* Burger */
  .burger {
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    z-index: 3000;
  }

  .burger span {
    width: 28px;
    height: 3px;
    background: var(--color-primary-dark);
    border-radius: 3px;
    transition: all 0.3s ease;
  }

  .nav-toggle:checked + .header-inner .burger span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .nav-toggle:checked + .header-inner .burger span:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle:checked + .header-inner .burger span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }

  /* ================= MOBILE NAV ================= */

  .main-nav {
    position: fixed;
    inset: 0;
    background: var(--color-primary);

    display: block;          /* ← WICHTIG: KEIN FLEX mehr */
    padding: 6rem 2rem 3rem;
    overflow-y: auto;
    overflow-x: hidden;

    transform: translateX(100%);
    transition: transform 0.35s ease;

    z-index: 2000;
  }

  .nav-toggle:checked ~ .main-nav {
    transform: translateX(0);
  }

  /* Jeder Menüpunkt untereinander */
  .nav-item {
    display: block;
    width: 100%;
    margin-bottom: 1.4rem;
  }

  .nav-item:hover .submenu {
    display: block;
  }

  /* Hauptpunkte */
  .nav-item > a {
    display: block;
    background: transparent;
    border: none;
    color: var(--color-neutral-100);
    font-size: 1.6rem;
    font-weight: 700;
    padding: 0;
  }

  /* Submenu */
  .submenu {
    position: static;
    display: block;
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin-top: 0.6rem;
    margin-left: 1.2rem;
  }

  .submenu a {
    display: block;
    background: transparent;
    border: none;
    color: var(--bg-hover);
    font-size: 1.05rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
    padding: 0;
  }

  .social-fixed {
    transform: scale(0.75);
    transform-origin: right center; /* bleibt sauber am Rand */
    z-index: 2000;
  }

  .bunny-fixed {
    transform: scale(0.75);
    transform-origin: right center;
    z-index: 1500;
  }

/* =======================================================
   MOBILE Carousel (ohne Prev&Next-Bilder)
======================================================= */

  .picture-slider.carousel {
    width: 100%;
    margin: 40px 0;
    aspect-ratio: auto;

    overflow: visible; /* 👉 GANZ WICHTIG */
  }

  .picture-slider.carousel .carousel-track {
    height: auto;
  }

  .picture-slider.carousel .carousel-item {
    position: relative;
    top: auto;
    left: auto;

    transform: none !important;
    opacity: 1 !important;

    width: 100%;
    display: none;
  }

  /* nur aktives Bild */
  .picture-slider.carousel .carousel-item.active {
    display: block;
  }

  .picture-slider.carousel .carousel-item img {
    width: 100%;
    height: auto;

    mask-image: none;
  }

  /* ================= MOBILE Content ================= */  
  main {
    max-width: 100%;
    padding: 1rem clamp(1rem, 4vw, 2rem);
  }

  main img {
    max-width: 100%;
  }
	
  .cover-slider {
    max-width: 90%;
  }

  .cover-slider button {
    font-size: 1.5rem;
    padding: 0.2rem 0.5rem;
  }

  /* =======================
     Mobile Karten
  ======================= */

  .cards {
    width: 90vw;
    margin-left: calc(50% - 45vw);
    grid-template-columns: 1fr !important;
  }

  /* h3 in Cards ohne Top-Abstand */
  .card-text h3 {
    margin-top: 0;
    margin-bottom: 0.25rem;
  }

  /* =======================
     Standard (Foto rechts)
  ======================= */

  .card-inner {
    display: grid;
    grid-template-columns: 1fr 90px;
  }

  /* =======================
     LOGO Layout (1 Spalte)
  ======================= */

  .card-inner.has-logo {
    grid-template-columns: 1fr;
  }

  /* Logo oben mittig */
  .card-inner.has-logo .card-media {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    margin-bottom: 10px;
  }

  /* Text darunter */
  .card-inner.has-logo .card-text {
    grid-row: 2;
    text-align: center;              /* 🔥 alles zentriert */
  }

  /* Logo Größe */
  .card-inner.has-logo .logo {
    max-width: 80px;
  }

  /* =======================
     Zentrierung Feinschliff
  ======================= */

  /* Links sauber mittig */
  .card-inner.has-logo .card-text a {
    display: inline-block;
  }

  /* Öffnungszeiten einspaltig + zentriert */
  .card-inner.has-logo .opening-row {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .card-inner.has-logo .opening-days,
  .card-inner.has-logo .opening-times {
    text-align: center;
  }

  /* Social Icons mittig */
  .card-inner.has-logo .social {
    text-align: center;
  }

  .card-inner.has-logo .social a {
    margin: 0 4px;
  }
}