/* ==========================================================================
   Kultuerchen - Ergaenzungen
   1) Stile fuer die neu strukturierten Elemente (Desktop, wie bisher)
   2) Handy-/Tablet-Layout (ab max. 800px Breite)
   ========================================================================== */

/* ---------- 1) Desktop ---------- */
.page_head img { float: right; }
.powered-by { font-size: 10px; position: absolute; top: 44px; right: 292px; z-index: 1000000; opacity: .7; }
.admin-link { position: absolute; top: 23px; right: 7px; z-index: 1000000; opacity: .3; }
.admin-link:hover { opacity: 1; }

.kalenderhead img { width: 210px; height: auto; }
.counter { margin: 6px 0; }
/* Einheitliche Spaltenbreite: Kalender, Kaesten und Button sind exakt gleich breit */
.kal-block, .info-block { width: 210px; margin-left: auto; margin-right: auto; }
#datepicker { width: 100%; }
#datepicker .ui-datepicker { width: 100%; box-sizing: border-box; }
.navigation { height: auto; bottom: 8px; overflow-y: auto; scrollbar-width: thin; }

/* Kaesten mit Ueberschrift im Stil des Kalenders (gleiche jQuery-UI-Klassen) */
.side-box { margin-top: 20px; padding: .2em; box-sizing: border-box; text-align: left; scroll-margin-top: 12px; }
.side-box-head { position: relative; padding: .2em 0; line-height: 1.8em; text-align: center; }
.box-scroll {
    font-size: 11px; font-weight: bold; text-align: right; padding: 4px;
    overflow-y: auto; height: auto; max-height: 200px; word-wrap: break-word; scrollbar-width: thin;
}
.quick-nav { display: none; }
/* Vorschlags-Button im Look der Kaesten: feine Aussenlinie, graue Flaeche mit Abstand */
.suggest-link { display: block; text-decoration: none; cursor: pointer; }
.suggest-link:hover, .suggest-link:focus { background: #dcdcdc; }

.btn, .btn:link, .btn:visited {
    display: inline-block; padding: 3px 8px; border: 1px solid #767676; border-radius: 3px;
    background: #efefef; color: #000; cursor: pointer; font-size: 12px; text-decoration: none;
}

.content-spacer { height: 65px; }
.content-end { height: 70vh; }

.event::after { content: ""; display: block; clear: both; }
/* Trennlinie zwischen Events = Link "nach oben" (Dreieck links am Linienanfang) */
.sep { display: block; position: relative; height: 30px; margin: 6px 0 4px; text-decoration: none; cursor: pointer; }
.sep::before { content: ""; position: absolute; left: 0; right: 0; top: 15px; border-top: 2px dotted #bbb; }
.sep-day::before { border-top: 3px solid lightgrey; }
.sep::after {
    content: ""; position: absolute; left: 0; top: 9px; width: 0; height: 0;
    border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid #bbb;
}
.sep:hover::before, .sep:focus::before { border-top-color: #4D1B0D; }
.sep:hover::after,  .sep:focus::after  { border-bottom-color: #4D1B0D; }
.sep-first { cursor: default; }
.sep-end { display: none; }   /* nur am Handy, siehe unten */
.sep-first::after { display: none; }
.ev-date  { font-size: 13px; font-weight: bolder; clear: both; }
.ev-time  { font-size: 12px; }
.ev-title { font-size: 16px; font-weight: bolder; }
.toggle-trigger { float: right; cursor: pointer; border-radius: 8px; }
.ev-addr  { margin-top: 12px; }
.ev-table { margin-top: 12px; border-collapse: collapse; }
.ev-table td { padding: 1px 6px 1px 0; vertical-align: top; }

/* Admin: Besitzer-Hinweis links, die drei gleichen Buttons rechtsbuendig in einer Reihe */
.admin-actions { margin: 10px 0 4px; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
.admin-actions .owner-label { margin-right: auto; }
.admin-actions form { display: inline-flex; margin: 0; }
.admin-actions .btn { font: inherit; font-size: 12px; line-height: 1.4; box-sizing: border-box; }
.admin-page .navigation { height: auto; bottom: 10px; overflow-y: auto; }
.admin-nav { margin-top: 20px; }
.admin-nav p { margin: 0 0 8px; }
.admin-page .info-block textarea {
    width: 210px; box-sizing: border-box; background: #ccc; font-weight: bold; text-align: right;
}
.edit-form .f { margin: 0 0 12px; }
.flash { background: #e8f4e8; border: 1px solid #9c9; border-radius: 3px; padding: 6px 10px; }
.stats div { margin: 2px 0; }
.stats span { float: right; width: 90px; text-align: right; }
.stats .total { margin-top: 8px; font-weight: bold; }

/* Login-Seite */
body.login-page {
    margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: #f4f1ee; font-family: Verdana, Arial, Helvetica, sans-serif; color: #4D1B0D; font-size: 15px;
}
.login-box {
    background: #fff; padding: 24px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,.15);
    width: min(92vw, 360px); box-sizing: border-box;
}
.login-box img { max-width: 100%; height: auto; }
.login-box h1 { font-size: 18px; margin: 12px 0; }
.login-box label { display: block; margin: 0 0 12px; font-weight: bold; }
.login-box input[type=text], .login-box input[type=password] {
    width: 100%; box-sizing: border-box; padding: 10px; font-size: 16px; margin-top: 4px;
}
.login-box input[type=submit] { width: 100%; padding: 11px; font-size: 16px; cursor: pointer; }
.login-box .error { color: #a00; font-weight: bold; }

/* Desktop: engere Abstaende in der Seitenleiste, damit auch bei niedrigen Fenstern alles sichtbar bleibt */
@media (min-width: 801px) {
    .info-block .side-box { margin-top: 10px; }            /* zwischen Empfehlungen, Tickets und Vorschlags-Button (vorher 20px) */
    .info-block #box-hot  { margin-top: 13px; }            /* Besucherzahl -> Empfehlungen (vorher 20px) */
}

/* ---------- 2) Handy / Tablet ---------- */
@media (max-width: 800px) {
    body { font-size: 15px; line-height: 1.45; -webkit-text-size-adjust: 100%; }

    .page_container { display: flex; flex-direction: column; width: auto; height: auto; padding: 0 12px 24px; }

    .page_head {
        position: relative; top: auto; right: auto; width: auto; height: auto;
        padding: 10px 0 6px; text-align: center; background: none; order: 0;
    }
    .page_head img { float: none; display: inline-block; max-width: 100%; height: auto; }
    .powered-by { top: 6px; right: 48px; }
    .admin-link { top: 0; right: 0; padding: 10px 14px; font-size: 16px; }

    /* Sidebar aufloesen: Kalender oben, Events in der Mitte, Teaser/Tickets unten */
    .navigation { display: contents; }
    .kal-block  { order: 1; text-align: center; }
    .content    { order: 2; position: static; margin: 0; width: auto; float: none; }
    .info-block { order: 3; margin-top: 8px; }
    .sep.sep-end { display: block; margin-top: 0; }

    .kalenderhead img { width: 100%; max-width: 300px; display: block; margin: 0 auto 8px; }
    #datepicker .ui-datepicker { width: 100%; box-sizing: border-box; }
    #datepicker .ui-datepicker td a, #datepicker .ui-datepicker td span { padding: .65em .2em; font-size: 1.05em; }
    .counter { text-align: center; margin: 10px 0 4px; }
    .kal-block, .info-block { width: auto; margin-left: 0; margin-right: 0; }
    .navigation { overflow: visible; }
    .quick-nav { display: block; margin-top: 10px; }
    .quick-nav .btn, .quick-nav .btn:link, .quick-nav .btn:visited {
        display: block; width: 100%; box-sizing: border-box; padding: 11px 6px;
        font-size: 14px; font-weight: bold; text-align: center;
    }

    .box-scroll { height: auto; max-height: 240px; text-align: left; font-size: 14px; }
    .side-box { scroll-margin-top: 8px; }

    /* Kalender bleibt beim Scrollen oben stehen - nur die Eintraege scrollen darunter (oeffentliche Seite) */
    body.sticky-cal .kal-block { display: contents; }
    body.sticky-cal .kal-block > * { order: 1; }
    body.sticky-cal .cal-sticky {
        position: sticky; top: 0; z-index: 50; background: #fff; padding: 4px 0 6px;
        box-shadow: 0 4px 6px -4px rgba(0,0,0,.35);
    }
    body.sticky-cal #datepicker .ui-datepicker td a,
    body.sticky-cal #datepicker .ui-datepicker td span { padding: .4em .2em; font-size: 1em; }

    .content-spacer { display: none; }
    .content-end { height: 20px; }
    .kultuer_head { margin-top: 18px; font-size: 18px; }

    /* kompakter: Abstaende rund um die Trennlinien ca. ein Drittel kleiner */
    .sep { height: 30px; margin: 0; }
    .sep::before { top: 16px; }
    .sep::after { top: 6px; border-left-width: 5px; border-right-width: 5px; border-bottom-width: 10px; }
    .ev-date  { font-size: 14px; }
    .ev-title { font-size: 18px; margin-top: 2px; }
    /* "mehr" -> kleiner Button mit Pfeil nach unten (aufgeklappt: Pfeil nach oben) */
    .toggle-trigger {
        position: relative; width: 40px; height: 28px; padding: 0; margin: 2px 0 0 10px;
        font-size: 0; line-height: 0; color: transparent;
    }
    .toggle-trigger::after {
        content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px;
        border-right: 2px solid #333; border-bottom: 2px solid #333;
        transform: translate(-50%, -75%) rotate(45deg); transition: transform .2s;
    }
    .toggle-trigger.open::after { transform: translate(-50%, -25%) rotate(-135deg); }
    .toggle-container { clear: both; }
    .ev-table { width: 100%; }
    .ev-table td { word-break: break-word; overflow-wrap: anywhere; }

    /* Admin */
    .admin-nav { margin-top: 12px; }
    .admin-page .navigation { overflow: visible; }
    .admin-page .info-block textarea { width: 100%; }
    .admin-actions { gap: 6px; }
    .admin-actions .owner-label { flex: 0 0 100%; margin-right: 0; }
    .admin-actions .btn { padding: 10px 7px; font-size: 12px; white-space: nowrap; }
    .edit-form input[type=text], .edit-form textarea, .edit-form select { max-width: 100%; box-sizing: border-box; font-size: 16px; }
    .edit-form input[type=text], .edit-form textarea { width: 100%; }
    .edit-form select { padding: 6px; }
    .edit-form input[name=plz] { width: 28%; }
    .edit-form input[name=ort]  { width: 68%; }
}