/*
  FEF_styles.css
  FEF Terminliste with responsive design
*/

:root {
    --fef-green: #65DA58; /* FEF-Grün */
    --fef-blue:  #0071c1; /* FEF-Blau */

    --color-primary: var(--fef-blue);     /* Primärfarbe */
    --color-text: #000;                 /* Textfarbe */
    --color-bg: #ffffff;                   /* Hintergrundfarbe */
    --color-event-future: #e6f9e3;      /* FEF-Grün sehr hell */
    --color-event-past: #eeeeee;        /* Hellgrau für vergangene Termine */
    --font-weight-normal: 500;            /* Normales Schriftgewicht */
    --font-weight-bold: 700;              /* Fettgedruckt */
    --font-size-base: 14px;               /* Basis-Schriftgröße, s.a. Header mit Lauftext */

    /* analog auch in Eventbeschreibung, min 37px, bevorzugt Minimum aus 14%Breite bzw. 14%Höhe, max 60px */
    --header-height: clamp(37px, min(14vw, 14vh), 60px);
}


/*      Containerstruktur
HTML (index.php)
│
├─ #header-container (75px, sticky)
│  └─ iframe (Header mit Lauftext)
│
├─ #termine-container (Hauptcontainer)
│  │
│  ├─ .week-separator (KW 49)
│  |     |
│  |     ├─ .day-header (Montag, 25.11.2025)
│  |     │   |
│  |     │   ├─ .event-item (grün/grau Flex horizontal)
│  │     │   |    ├─ .event-logo-container (80px)
│  │     │   |    │  └─ img oder .event-logo-fallback
│  │     │   |    └─ .event-text (Flex vertikal)
│  │     |   │      ├─ .event-line1 (.event-beginn)
│  │     |   │      ├─ .event-line2 (.event-title)
│  │     |   │      ├─ .event-line3 (.event-ort)
│  │     |   │      └─ .event-line4 (.event-user + .event-plaetze)
│  │     |   │
│  │     |   ├─ .event-item
│  │     |   │  └─ ...
│  │     |
|  |     ├─ .day-header (Dienstag, 26.11.2025)
│  │     │   |
│  |     │   ├─ .event-item ...
|  │     │   └─ ...
|  │
|  ├─ .week-separator (KW 50)
│  |     ├─ .day-header ...
│  |     │   |
│  |
│  └─ #loading (Ladetext, bei Bedarf angezeigt)


Visual Layout:
┌─────────────────────────────────────────────────────────────────┐
│                     #header-container (75px)                    │
│  ┌───────────────────────────────────────────────────────────┐  │
│  │            iframe (Header mit Lauftext)                   │  │
│  └───────────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────────┐
│                   #termine-container                            │
│  ┌─────────────────────────────────────────────────────────────┐│
│  │ .week-separator (KW 49)                                     ││
│  │  ┌─────────────────────────────────────────────────────────┐││
│  │  │ .day-header (Montag, 25.11.2025)                        │││
│  │  │  ┌─────────────────────────────────────────────────────┐│││
│  │  │  │ .event-item (grün) - Flex horizontal                ││││
│  │  │  │ ┌──────────────┬──────────────────────────────────┐ ││││
│  │  │  │ │   Logo       │  .event-text (Flex vertikal)     │ ││││
│  │  │  │ │              │                                  │ ││││
│  │  │  │ │  (80px)      │  ┌───────────────────────────┐   │ ││││
│  │  │  │ │  [IMG/ABC]   │  │ .event-line1 (Beginn)     │   │ ││││
│  │  │  │ │              │  │ Beginn: 09:00             │   │ ││││
│  │  │  │ │              │  ├───────────────────────────┤   │ ││││
│  │  │  │ │              │  │ .event-line2 (Titel)      │   │ ││││
│  │  │  │ │              │  │ Titel des Events          │   │ ││││
│  │  │  │ │              │  ├───────────────────────────┤   │ ││││
│  │  │  │ │              │  │ .event-line3 (Ort)        │   │ ││││
│  │  │  │ │              │  │ Ort                       │   │ ││││
│  │  │  │ │              │  ├───────────────────────────┤   │ ││││
│  │  │  │ │              │  │ .event-line4 (Flex horiz) │   │ ││││
│  │  │  │ │              │  │ User        freie Plätze  │   │ ││││
│  │  │  │ │              │  └───────────────────────────┘   │ ││││
│  │  │  │ └──────────────┴──────────────────────────────────┘ ││││
│  │  │  └─────────────────────────────────────────────────────┘│││
│  │  │  ┌─────────────────────────────────────────────────────┐│││
│  │  │  │ .event-item (grün) - weiteres Event                 ││││
│  │  │  │ ┌──────────────┬──────────────────────────────────┐ ││││
│  │  │  │ │ Logo         │ Text ...                         │ ││││
│  │  │  │ └──────────────┴──────────────────────────────────┘ ││││
│  │  │  └─────────────────────────────────────────────────────┘│││
│  │  └─────────────────────────────────────────────────────────┘││
│  │  ┌─────────────────────────────────────────────────────────┐││
│  │  │ .day-header (Dienstag, 26.11.2025)                      │││
│  │  │  ┌─────────────────────────────────────────────────────┐│││
│  │  │  │ .event-item (grau) - vergangenes Event              ││││
│  │  │  │ ┌──────────────┬──────────────────────────────────┐ ││││
│  │  │  │ │ Logo         │ Text ...                         │ ││││
│  │  │  │ └──────────────┴──────────────────────────────────┘ ││││
│  │  │  └─────────────────────────────────────────────────────┘│││
│  │  └─────────────────────────────────────────────────────────┘││
│  └─────────────────────────────────────────────────────────────┘│
│  ┌─────────────────────────────────────────────────────────────┐│
│  │ .week-separator (KW 50)                                     ││
│  │  ┌─────────────────────────────────────────────────────────┐││
│  │  │ .day-header (...)                                       │││
│  │  │  ┌─────────────────────────────────────────────────────┐│││
│  │  │  │ .event-item ...                                     ││││
│  │  │  └─────────────────────────────────────────────────────┘│││
│  │  └─────────────────────────────────────────────────────────┘││
│  └─────────────────────────────────────────────────────────────┘│
│  ┌─────────────────────────────────────────────────────────────┐│
│  │ #loading (versteckt oder sichtbar)                          ││
│  │ "Lädt Termine..."                                           ││
│  └─────────────────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────────────────┘

*/




/* Global Styles, gültig für alle Elemente */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;     /* Breite bzw Höhe = Inhalt + Padding + Border, ohne Margin */
}

body {
    font-family: "Berlin Sans FB", sans-serif;
    color: var(--color-text);
    background-color: var(--color-bg);
    max-width: 640px; /* 700px; */
    margin: 10px;
    font-size: var(--font-size-base);				/* Schriftgröße */
    -webkit-text-size-adjust: 100%;  /* iOS Safari: Schriftgröße im Querformat nicht erhöhen */
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /*  border: 1px solid #000; */  /* nur zu Testzwecken */
}

/* Header, separate HTML-Datei mit Lauftext */
#header-container {
    width: 100%;
    /* height: 70px; */
    height: var(--header-height);
    position: sticky;
    top: 0;
    /* padding-top: 3px;                                       /* Abstand oben, s.a. spezieller Abstand oben Android */
    z-index: 100;
    background: var(--color-bg);
    /* border: 1px solid #000;                              /* nur zu Testzwecken */
}

#header-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Terminliste, äusserer Container um die gesamte Terminliste, Positionierung der Kinder */
#termine-container {
    position: relative;
    overflow-x: clip;           /* Clipped überstehende Elemente, ohne Scroll */
}


/* Week and Day Headers, gleicher Hintergrund bei aktuell und Verganhenheit */
.week-separator {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    text-align: left;
    margin: 10px 0 2px;
}

.day-header {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    text-align: left;
    margin: 2px 0;
}

/* .event-item - äusserer Block der Events, jetzt direkt Flex-Container
- grün = Zukunft, grau = Vergangenheit
- speziell abgerundete Ecke oben links
- vertikale Abstände
- display: flex (horizontal) mit Logo und Text */
.event-item {
    display: flex;
    align-items: stretch;	                        /* gleiche Höhe für die Kind-Container */
    margin: 2px 0 10px;                              /* Abstand oben, rechts&links, unten */
    line-height: 1.3;                               /* Zeilenabstand innerhalb eines Textelements */
    background-color: var(--color-event-future);
    border-radius: 38% 10px 10px 10px / 6% 10px 10px 10px;          /* spezielle abgerundete Ecke oben links - horizontale / vertikale Radien */

    /* border-radius: 100px 10px 10px / 10px;          /* spezielle abgerundete Ecke oben links */
    /* border: #000 1px solid; /* Rahmen zum Testen */
}
.event-item.past { background-color: var(--color-event-past); }

.event-item.past .event-plaetze {                   /* Plätze in der Vergangenheit nicht anzeigen */
    display: none;
}

.event-logo-container {
    width: 80px;
    /* height: 80px; */                  /* Höhe wird durch flexbox des Elternteils bestimmt */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 8px;
    /* border: 2px solid red; 	/* Test-Rahmen */
}

.event-logo-container img {
    width: 62%;
    /* height: 50%; */                  /* Höhe wird durch flexbox des Elternteils bestimmt */
    object-fit: contain;                /* Bildverhältnis beibehalten */
    border-radius: 8px;
}

/* Fallback-Container, falls kein Bild vorhanden wird aus erstem Buchstaben der Kategorie ein Ersatzbild erstellt */
.event-logo-fallback {
    width: 80px;
    /* height: 40px; */
    border-radius: 8px;
    flex-shrink: 0;
    background-color: #0071C1;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;          /* 50% der Breite */
    font-weight: 700;
}


/* Kategorie-Info in Logo-Container */
.event-logo-container.has-category-info {
    position: relative;
}

.event-logo-container .category-info {
    position: absolute;
    top: -12px;
    right: -5px;
    left: auto;
    transform: none;
    background: #eeeeee;
    color: #000;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

.event-logo-container .category-info::before {
    content: '';
    position: absolute;
    bottom: -5px;
    left: auto;
    right: 8px;
    transform: none;
    border: 4px solid transparent;
    border-top-color: #eeeeee;
}

/* Sichtbar bei Hover/Tap */
.event-logo-container:hover .category-info,
.event-logo-container.category-open .category-info {
    opacity: 1;
    visibility: visible;
}

/* Event-Text Container (rechts neben Logo-Container, enthält alle Textinfos) */
.event-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;	/* Textzeilen vertikal zentriert */
    gap: 2px;					/* Abstand zwischen Textelementen */
}

/* Container der einzelnen Event Text Elements */
.event-line1 {                          /* Beginn + Icons */
    display: flex;
    align-items: center;                /* Beginn vertikal zentriert */
    justify-content: space-between;     /* Beginn links, Icons rechts */
    gap: 0px;
    height: 1.3em;                      /* Feste Höhe = eine Textzeile */
    overflow: visible;                  /* Icons dürfen rausragen */
    position: relative;                 /* Für absolute Positionierung der Icons */
}

.event-icons {
    display: flex;
    align-items: flex-end;              /* Icons nach unten ausgerichtet */
    gap: 8px;                           /* Abstand zwischen den Icons */
    flex-shrink: 0;
    position: absolute;                 /* Icons außerhalb des Zeilenflusses */
    right: 9px;                         /* An rechtem Rand */
    top: -9px;                          /* Über/unter der Zeile hängen  bottom: -5px */
}

.event-icon-item {                      /* Einzelnes Icon */
    width: 23px;
    height: 23px;
    flex-shrink: 0;
    position: relative;
    cursor: pointer;
}

.event-icon-item img {                  /* Icon-Bild */
    width: 100%;
    height: 100%;
    object-fit: contain;                /* Verhältnis beibehalten */
}

/* Inline-Expansion für Icon-Infos */
.icon-info-expansion {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #eeeeee;
    color: #000;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Pfeil nach oben */
.icon-info-expansion::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: rgba(0, 0, 0, 0.9);
}

/* Sichtbar wenn geöffnet */
.event-icon-item.info-open .icon-info-expansion {
    opacity: 1;
    visibility: visible;
}


/* ===========================
   Menü-Dropdown (menue.php)
   =========================== */

#menue-details {
    position: relative;                  /* Basis für absolut positioniertes Dropdown */
}

#menue-details > summary {
    list-style: none;                    /* Standard-Dreieck ausblenden */
    cursor: pointer;
    display: flex;
    align-items: center;
}

#menue-details > summary::-webkit-details-marker {
    display: none;                       /* Webkit-Browser: Dreieck ausblenden */
}

#menue-details > summary img {
    height: 23px;
    width: auto;
}

#menue-nav {
    position: fixed;                     /* fixed: unabhängig von overflow:hidden der Eltern */
    top: 43px;                           /* body-margin(10px) + header-height(30px) + header-margin-bottom(3px) */
    right: 10px;                         /* body-margin */
    background: var(--color-bg);
    border: 1px solid var(--fef-blue);
    border-radius: 10px 4px 10px 10px;  /* FEF-typisch: Ecke oben rechts abweichend */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    min-width: 180px;
    overflow: hidden;                    /* border-radius gilt auch für Links */
}

#menue-nav a {
    padding: 10px 16px;
    text-decoration: none;
    color: var(--color-text);
    font-family: "Berlin Sans FB", sans-serif;
    font-size: var(--font-size-base);
    border-bottom: 1px solid #eee;
    white-space: nowrap;
}

#menue-nav a:last-child {
    border-bottom: none;
}

#menue-nav a:hover,
#menue-nav a:active {
    background: var(--color-event-future); /* FEF-Grün sehr hell */
    color: var(--fef-blue);
}



.event-line2 { display: block; }        /* Titel */
.event-line3 { display: block; }        /* Ort */
.event-line4 {                          /* User links, Plätze rechts */
    display: flex;
    justify-content: space-between;
    align-items: center;                /* User und Plätze vertikal zentriert */
}

/* Event Text Elements */
.event-beginn {
    font-weight: var(--font-weight-normal);
    text-align: left;
}

.event-title {
    color: var(--color-primary);
    text-decoration: none;                  /* kein Unterstrich im Link*/
    font-weight: var(--font-weight-normal);
}

.event-title:hover {
    text-decoration: underline;
}

.event-ort {
    font-weight: var(--font-weight-normal);
    text-align: left;
}

.event-user {
    color: var(--color-primary);
    text-decoration: none;                   /* kein Unterstrich im Link*/
    font-weight: var(--font-weight-normal);
    text-align: left;
}

.event-user:hover {
    text-decoration: underline;
}

.event-plaetze {
    font-weight: var(--font-weight-normal);
    text-align: right;
    white-space: nowrap;
    padding-right: 5px;                     /* Abstand zum rechten Rand wegen abgerundeter Ecke */
}

.event-link {
    color: var(--color-primary);
    text-decoration: none;
}

.event-link:hover {
    color: var(--color-primary);
    text-decoration: underline;
}


/* Ladetext für JS, Anzeige während des Ladens */
#loading {
    text-align: center;
    padding: 20px;
    color: #666;
}