/****************************************************************
   BREAKPOINTS
   ---------------------------------------------------------------
   Das Grundraster in global.css und tx_bdeventregistrationmgr.css
   ist seit dem 10.09.2026 fluide (Prozentbreiten, border-box,
   Flexbox). Diese Datei enthaelt nur noch, was sich an einer
   Schwelle wirklich AENDERN muss.

   1000 px  Aussenraender fallen weg, das Raster fuellt den Schirm
    760 px  Zweispalter, Formulare und Detailseite auf eine Spalte,
            Kopfbereich klappt zusammen, Grundschrift auf 16 px
    520 px  Trefferliste wird zur Karte, Infokaesten stapeln

   Die Schwellen kommen aus der Messung vom 10.09.2026: die
   Anmeldestrecke brach schon bei 768 px, Trefferliste und
   Detailseite bei rund 610 bzw. 520 px.
****************************************************************/


/* ============================================================
   <= 1000 px  --  das Raster fuellt den Schirm
   ============================================================ */
@media only screen and (max-width: 1000px) {

    #wrap {
        padding: 20px;
    }

    #content,
    #form-content,
    #form-register-content {
        margin: 0;
    }

    #keyvisual {
        padding: 0;
    }

    /* Lange URLs im redaktionellen Text sprengten sonst die Spalte -- auf
       /datenschutz/ waren das gemessene 110 px Ueberhang bei 390 px.
       Bewusst auf #content eingeschraenkt: die Startseite haengt unter
       #form-content, und dort liegt ein Textelement in der 1-px-Luecke
       zwischen den drei gefloateten Kategoriekacheln. Eine allgemeine
       Umbruchregel bricht dort jedes Wort in Einzelbuchstaben -- gemessen
       +192 px Seitenhoehe. Unter 760 px stapeln die Kacheln, ab dort gilt
       die Regel deshalb fuer die ganze Seite. */
    #content p, #content li, #content dd, #content td, #content th,
    #content h1, #content h2, #content h3, #content h4, #content h5, #content h6,
    #content a { overflow-wrap: break-word; }

}


/* ============================================================
   <= 760 px  --  eine Spalte
   ============================================================ */
@media only screen and (max-width: 760px) {

    /* ---------- Typografie ---------------------------------- */
    /* 12 px sind auf dem Handy an der Grenze des Lesbaren. Am
       Desktop bleibt es bei 12 px, damit der Referenzvergleich
       dort unveraendert bleibt. */
    body { font-size: 16px; }

    /* Ab hier stapeln auch die Kategoriekacheln, die 1-px-Luecke der
       Startseite gibt es nicht mehr -- die Umbruchregel darf jetzt fuer
       die ganze Seite gelten. */
    p, li, dd, td, th, h1, h2, h3, h4, h5, h6, a { overflow-wrap: break-word; }

    h1 { font-size: 22px; }
    h2 { font-size: 19px; }
    h3 { font-size: 17px; }
    h4, h5 { font-size: 16px; }

    /* ---------- Kopfbereich --------------------------------- */
    #header {
        min-height: 0;
        padding: 0 20px;
    }

    #logo {
        float: none;
        width: 80px;
        height: auto;
        margin: 20px 0;
    }

    #logo a { display: block; }
    #logo img { display: block; width: 100%; height: auto; }

    #top-menu {
        float: none;
        position: absolute;
        top: 0;
        right: 20px;
        margin: 0;
        text-align: right;
    }

    #top-menu ul {
        display: block;
        margin: 0;
        padding: 0;
    }

    #top-menu ul li {
        display: block;
        margin: 0;
    }

    #top-menu ul li + li {
        border-left: none;
        margin-left: 0;
        margin-top: 5px;
        padding-left: 0;
    }

    #title {
        position: absolute;
        top: 70px;
        right: 20px;
        bottom: auto;
        text-align: right;
    }

    #title h1 { font-size: 15px; }

    /* Hauptmenue: gestapelte Buttons. Bei zwei Zielen kostet ein
       Burger einen Klick, ohne Platz zu sparen -- und genau diese
       zwei Ziele SIND die Website. */
    #main-menu {
        position: relative;
        right: auto;
        bottom: auto;
    }

    #main-menu ul {
        display: block;
        line-height: 1;
        margin-bottom: 10px;
    }

    #main-menu ul li {
        width: auto;
        line-height: 1;
        margin: 0;
        background: none !important;
    }

    #main-menu ul li + li { margin-top: 6px; }

    #main-menu ul li a {
        background: rgba(255, 255, 255, 0.2) !important;
        border-radius: 10px;
        padding: 12px 0;
    }

    #main-menu ul li a:hover,
    #main-menu ul li a.selected,
    #main-menu ul li a.active {
        background: rgba(255, 255, 255, 0.5) !important;
    }

    /* ---------- Inhaltsspalten ------------------------------ */
    #content.cols { display: block; }

    #content #column-main-w680,
    #content #column-main-w460,
    #content #column-right-w220,
    #content #column-right-w440 {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }

    #content #column-right-w220,
    #content #column-right-w440 {
        border-top: 5px solid rgba(255, 255, 255, 0.5);
        padding-top: 25px;
    }

    /* ---------- Inhaltselemente (fluid_styled_content) ------- */
    .frame-space-before-extra-small { margin-top: 0.5em; }
    .frame-space-before-small { margin-top: 1em; }
    .frame-space-before-medium { margin-top: 1.5em; }
    .frame-space-before-large { margin-top: 2em; }
    .frame-space-before-extra-large { margin-top: 2.5em; }
    .frame-space-after-extra-small { margin-bottom: 0.5em; }
    .frame-space-after-small { margin-bottom: 1em; }
    .frame-space-after-medium { margin-bottom: 1.5em; }
    .frame-space-after-large { margin-bottom: 2em; }
    .frame-space-after-extra-large { margin-bottom: 2.5em; }

    /* Kein Umfluss auf schmalen Schirmen: Bild ueber den Text. */
    .ce-intext.ce-left .ce-gallery,
    .ce-intext.ce-right .ce-gallery {
        float: none;
        margin-left: 0;
        margin-right: 0;
    }

    .ce-intext.ce-nowrap .ce-bodytext {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* ---------- Filterformular ------------------------------ */
    /* 20 px Innenabstand -- damit steht der Text auf gleicher Hoehe wie
       der Inhalt der uebrigen Bloecke (#full-width-w960 hat denselben
       Wert). Der Pfeil vor den Schaltflaechen haengt daran mit. */
    #tx_bdeventregistrationmgr_pi1_filterform {
        padding: 20px;
    }

    /* Der Kopfblock behaelt seinen eigenen Innenabstand (0.5em 1em aus
       tx_bdeventregistrationmgr.css) -- damit stehen die Ueberschriften auf
       derselben Linie wie die Feldbeschriftungen darunter, die ihn ueber
       .ym-fbox-text ebenfalls haben. Die alte responsive.css setzte ihn auf
       0, weil das Formular damals 1em hatte und 2 x 1em bei 12 px Schrift zu
       viel war. */

    #tx_bdeventregistrationmgr_pi1_filterform .ym-fbox-text,
    #tx_bdeventregistrationmgr_pi1_filterform .ym-fbox-select {
        float: none;
        width: 100%;
    }

    #tx_bdeventregistrationmgr_pi1_filterform.ym-columnar .ym-fbox-text label,
    #tx_bdeventregistrationmgr_pi1_filterform.ym-columnar .ym-fbox-select label,
    #tx_bdeventregistrationmgr_pi1_filterform.ym-columnar .ym-fbox-select select,
    #tx_bdeventregistrationmgr_pi1_filterform.ym-columnar .ym-fbox-text input,
    #tx_bdeventregistrationmgr_pi1_filterform.ym-columnar .ym-fbox-text textarea {
        display: block;
        float: none;
        width: 100% !important;
    }

    /* Beide Schaltflaechen gleich breit. Der Zuruecksetzen-Knopf ist ein
       <a>, der Filter-Knopf ein <button> -- vor border-box brauchte das <a>
       einen Abzug von 3em fuer sein Innenpolster, seit border-box nicht mehr.
       Die Ausnahme liess ihn 48 px schmaler aussehen. */
    #tx_bdeventregistrationmgr_pi1_filterform .ym-button {
        display: block;
        margin-left: 0;
        margin-right: 0;
        text-align: center;
        width: 100%;
    }

    #tx_bdeventregistrationmgr_pi1_filterform .show-all {
        float: none;
        margin: 15px 0 0;
        text-align: right;
    }

    /* ---------- Beschriftungen und Felder ------------------- */
    /* Ein Rhythmus fuer beide Formulare: Beschriftung dicht ueber ihrem
       Feld (6 px), 14 px Luft zur naechsten Gruppe, alle Felder gleich
       hoch. 44 px ist das Mindestmass fuer ein Tap-Ziel -- vorher war das
       Textfeld 33 px und das Auswahlfeld 21 px hoch, weil select gar kein
       Innenpolster bekam. */
    #tx_bdeventregistrationmgr_pi1_filterform .ym-fbox-text,
    #tx_bdeventregistrationmgr_pi1_filterform .ym-fbox-select,
    #tx_bdeventregistrationmgr_pi1-registerevent .ym-fbox-text,
    #tx_bdeventregistrationmgr_pi1-registerevent .ym-fbox-select {
        padding-top: 0;
        padding-bottom: 0;
        margin-bottom: 14px;
    }

    #tx_bdeventregistrationmgr_pi1_filterform .ym-fbox-text label,
    #tx_bdeventregistrationmgr_pi1_filterform .ym-fbox-select label,
    #tx_bdeventregistrationmgr_pi1-registerevent .ym-fbox-text label,
    #tx_bdeventregistrationmgr_pi1-registerevent .ym-fbox-select label {
        font-size: 15px;
        font-weight: bold;
        line-height: 1.3;
        margin: 0 0 6px;
    }

    #tx_bdeventregistrationmgr_pi1_filterform .ym-fbox-text input,
    #tx_bdeventregistrationmgr_pi1_filterform .ym-fbox-select select,
    #tx_bdeventregistrationmgr_pi1-registerevent .ym-fbox-text input,
    #tx_bdeventregistrationmgr_pi1-registerevent .ym-fbox-select select {
        /* YAML zieht die Felder mit margin:-2px -3px 0 0 zwei Pixel unter
           ihre Beschriftung -- das machte den Abstand zufaellig. */
        margin: 0;
        min-height: 44px;
        padding: 0 10px;
    }

    #tx_bdeventregistrationmgr_pi1_filterform .ym-fbox-text textarea,
    #tx_bdeventregistrationmgr_pi1-registerevent .ym-fbox-text textarea {
        margin: 0;
        min-height: 88px;
        padding: 10px;
    }

    /* ---------- Kategoriekacheln ---------------------------- */
    .tx_bdeventregistrationmgr_categorymenu_wrap {
        border-radius: 20px;
        float: none;
        overflow: hidden;
        width: 100%;
    }

    .tx_bdeventregistrationmgr_categorymenu_wrap.business,
    .tx_bdeventregistrationmgr_categorymenu_wrap.people {
        margin-right: 0;
        margin-bottom: 30px;
    }

    .tx_bdeventregistrationmgr_categorymenu_wrap img:first-child {
        display: block;
        height: auto;
        width: 100%;
    }

    .tx_bdeventregistrationmgr_categorymenu_wrap img.pic {
        left: auto;
        right: 10px;
        top: 10px;
        transform: none;
    }

    .tx_bdeventregistrationmgr_categorymenu {
        border-radius: 0 !important;
        margin-bottom: 0 !important;
        min-height: 0 !important;
        padding: 20px 15px;
    }

    .tx_bdeventregistrationmgr_categorymenu h2 {
        font-size: 19px;
        margin-bottom: 20px;
        padding: 0;
    }

    /* ---------- Trefferliste: Spalten grosszuegiger ---------- */
    #tx_bdeventregistrationmgr_list .post_openinghours { width: 25%; }
    #tx_bdeventregistrationmgr_list .post_hint { width: 15%; }
    #tx_bdeventregistrationmgr_list .post_content { width: 60%; }

    #tx_bdeventregistrationmgr_list_header #post_title .first { width: 25%; }
    #tx_bdeventregistrationmgr_list_header #post_title .second { width: 15%; }
    #tx_bdeventregistrationmgr_list_header #post_title .last { width: 60%; }

    /* ---------- Detailseite: eine Spalte -------------------- */
    #tx_bdeventregistrationmgr_detail .post_content_left,
    #tx_bdeventregistrationmgr_detail .post_content,
    #tx_bdeventregistrationmgr_detail .post_content_right {
        width: 100%;
        padding: 0;
    }

    #tx_bdeventregistrationmgr_detail .post_content,
    #tx_bdeventregistrationmgr_detail .post_content_right {
        margin-top: 20px;
    }

    #tx_bdeventregistrationmgr_detail .post_thumb_alternate { float: none; }

    /* Drei Ueberschriften, vier Kaesten: nur bei gleicher Spaltenbreite
       steht "Wann? Wo? Wie?" ueber den richtigen Kaesten. Der vierte
       Kasten rutscht in die zweite Zeile -- er hat auch am Desktop
       keine Ueberschrift. */
    #tx_bdeventregistrationmgr_detail #post_box_wrap .box {
        width: 33.333%;
        padding: 0 20px;
    }

    #tx_bdeventregistrationmgr_detail_header #post_title > div { width: 33.333%; }
    #tx_bdeventregistrationmgr_detail_header #post_title h3 { padding: 0 20px; }

    /* Der Hintergrund der Kastenzeile ist eine senkrecht gekachelte Grafik
       mit den Trennlinien des 4-Spalten-Rasters (bg_companies/people/places).
       Sobald die Kaesten stapeln, steht die Linie quer im Bild. */
    #tx_bdeventregistrationmgr_detail_header.company #post_box_wrap,
    #tx_bdeventregistrationmgr_detail_header.people #post_box_wrap,
    #tx_bdeventregistrationmgr_detail_header.places #post_box_wrap {
        background-image: none;
    }

    /* Unten 20 px wie an den Seiten: am Desktop folgt im farbigen Band noch
       die Spaltenueberschrift, unter 520 px ist sie ausgeblendet und die
       55 px hohen Piktogramme endeten sonst genau auf der Bandkante. */
    #tx_bdeventregistrationmgr_detail #post_icon_wrap,
    #tx_bdeventregistrationmgr_list #post_icon_wrap {
        width: 100%;
        margin-left: 0;
        padding: 15px 20px 20px;
        gap: 12px;
    }

    #tx_bdeventregistrationmgr_detail #post_icon_wrap img.active,
    #tx_bdeventregistrationmgr_list #post_icon_wrap img.active {
        margin-right: auto;
    }

    #tx_bdeventregistrationmgr_list #post_path_wrap,
    #tx_bdeventregistrationmgr_detail #post_path_wrap {
        width: 100%;
        margin-bottom: 0;
        padding-bottom: 10px;
    }

    /* ---------- Anmeldestrecke ------------------------------
       Die YAML-Stylesheets der Extension (base.css, gray-theme.css)
       werden vom Plugin selbst nachgeladen und stehen daher HINTER
       dieser Datei. Die Regeln sind deshalb ueber eine ID geschrieben --
       eine ID schlaegt die Klassenselektoren von YAML unabhaengig von der
       Reihenfolge. Die Klasse "linearize-form" im Markup hilft nicht: im
       mitgelieferten YAML gibt es dazu kein CSS.

       WICHTIG: der Anker ist der Wrapper der Anmeldestrecke, NICHT der
       Container #form-content. Die Startseite haengt ebenfalls unter
       #form-content, und "#form-content .ym-form" (1 ID + 1 Klasse) schlaegt
       "#tx_bdeventregistrationmgr_pi1_filterform" (1 ID) -- damit hat die
       Anmeldestrecke dem Filterformular seinen Innenabstand weggenommen und
       der Text klebte am Rand der orangen Box.
       ------------------------------------------------------- */
    #tx_bdeventregistrationmgr_pi1-registerevent {
        padding: 0;
    }

    /* Kein eigener Innenabstand am Formular: die Feldbloecke (.ym-fbox-*)
       bringen aus gray-theme.css bereits 16 px mit. Beides zusammen schob
       die Felder auf 78 px vom Bildschirmrand -- bei 390 px Breite blieben
       dann noch 234 px fuer das Feld selbst. So stehen sie bei 56 px, auf
       derselben Linie wie im Filterformular. */
    #tx_bdeventregistrationmgr_pi1-registerevent .ym-form {
        padding: 0;
    }

    /* Die Abschnittsueberschriften haben 1em bei kleinerer Schrift und
       waeren dadurch 2 px daneben. */
    #tx_bdeventregistrationmgr_pi1-registerevent .ym-form h6 {
        padding-left: 16px;
        padding-right: 16px;
    }

    #tx_bdeventregistrationmgr_pi1-registerevent .ym-form label,
    #tx_bdeventregistrationmgr_pi1-registerevent .ym-columnar .ym-fbox-text label,
    #tx_bdeventregistrationmgr_pi1-registerevent .ym-columnar .ym-fbox-select label {
        display: block;
        float: none;
        width: 100%;
        margin-bottom: 4px;
    }

    #tx_bdeventregistrationmgr_pi1-registerevent .ym-form input,
    #tx_bdeventregistrationmgr_pi1-registerevent .ym-form select,
    #tx_bdeventregistrationmgr_pi1-registerevent .ym-form textarea,
    #tx_bdeventregistrationmgr_pi1-registerevent .ym-columnar .ym-fbox-text input,
    #tx_bdeventregistrationmgr_pi1-registerevent .ym-columnar .ym-fbox-select select,
    #tx_bdeventregistrationmgr_pi1-registerevent .ym-columnar .ym-fbox-text textarea {
        display: block;
        float: none;
        width: 100%;
        margin-right: 0;
        padding: 0.5em;
    }

    /* Kontrollkaestchen und Auswahlknoepfe bleiben klein -- und ihre
       Beschriftung bleibt DANEBEN. Die Blockregel oben faengt sonst auch
       diese Labels ein, dann steht der Knopf ueber seinem Text. */
    #tx_bdeventregistrationmgr_pi1-registerevent .ym-form .ym-fbox-check label {
        display: inline;
        width: auto;
        margin-bottom: 0;
    }

    #tx_bdeventregistrationmgr_pi1-registerevent .ym-form .ym-fbox-check {
        margin-bottom: 6px;
    }

    /* Die Ueberschrift einer Knopfgruppe ist ebenfalls ein <label> und
       gehoert ueber die Gruppe, nicht neben den ersten Knopf. */
    #tx_bdeventregistrationmgr_pi1-registerevent .ym-form .ym-fbox-check .ym-label {
        display: block;
        width: 100%;
        margin-bottom: 4px;
    }

    /* Kontrollkaestchen und Auswahlknoepfe bleiben klein. */
    #tx_bdeventregistrationmgr_pi1-registerevent .ym-form input[type="checkbox"],
    #tx_bdeventregistrationmgr_pi1-registerevent .ym-form input[type="radio"] {
        display: inline;
        width: auto;
        margin-left: 0;
    }

    #tx_bdeventregistrationmgr_pi1-registerevent .ym-columnar .ym-fbox-check input,
    #tx_bdeventregistrationmgr_pi1-registerevent .ym-columnar .ym-error .ym-message {
        margin-left: 0;
    }

    #tx_bdeventregistrationmgr_pi1-registerevent .ym-columnar .ym-fbox-check .ym-label {
        position: static;
    }

    /* Schaltflaechenzeile: YAML rueckt sie um 30 % ein. */
    #tx_bdeventregistrationmgr_pi1-registerevent .ym-columnar fieldset .ym-fbox-button,
    #tx_bdeventregistrationmgr_pi1-registerevent fieldset.ym-columnar .ym-fbox-button,
    #tx_bdeventregistrationmgr_pi1-registerevent .ym-form .ym-fbox-button {
        padding-left: 0;
    }

    #tx_bdeventregistrationmgr_pi1-registerevent .ym-form .ym-fbox-button input,
    #tx_bdeventregistrationmgr_pi1-registerevent .ym-form .ym-button {
        display: block;
        width: 100%;
        text-align: center;
    }

    /* Das YAML-Raster in Schritt 3 (Oeffnungszeiten): ym-g20/g35/g40. */
    #tx_bdeventregistrationmgr_pi1-registerevent .ym-grid > [class*="ym-g"] {
        display: block;
        float: none;
        width: 100%;
        margin: 0;
    }

    #tx_bdeventregistrationmgr_pi1-registerevent .ym-gbox,
    #tx_bdeventregistrationmgr_pi1-registerevent .ym-gbox-left,
    #tx_bdeventregistrationmgr_pi1-registerevent .ym-gbox-right {
        padding: 0;
    }

    /* TinyMCE 3 rendert eine Tabelle mit fester Pixelbreite. */
    #tx_bdeventregistrationmgr_pi1-registerevent .mceLayout,
    #tx_bdeventregistrationmgr_pi1-registerevent .mceLayout iframe {
        width: 100% !important;
        max-width: 100%;
    }

    /* Das Captcha im letzten Schritt darf nicht ueberstehen. */
    #tx_bdeventregistrationmgr_pi1-registerevent img {
        max-width: 100%;
        height: auto;
    }

}


/* ============================================================
   <= 520 px  --  Trefferliste als Karte
   ============================================================ */
@media only screen and (max-width: 520px) {

    /* Die Spaltenueberschrift traegt ohne Spalten nichts mehr. */
    #tx_bdeventregistrationmgr_list_header #post_title { display: none; }

    /* Karte: Titel oben, darunter Zeit und Hinweis-Symbole in einer
       Zeile, dann der Kurztext. display:contents loest .post_content
       auf, damit Titel und Text sich getrennt einsortieren lassen. */
    /* Die Karte laeuft bis an den Rand von #content -- genau wie das
       farbige Kopfband darueber. Mit 20 px Innenabstand steht ihr Text
       dann auf derselben Linie wie dessen Text. */
    #tx_bdeventregistrationmgr_list .post {
        background: rgba(255, 255, 255, 0.4);
        border-radius: 10px;
        border-bottom: none !important;
        margin: 0 -20px 14px;
        padding: 16px 20px;
    }

    #tx_bdeventregistrationmgr_list .post_content {
        display: contents;
    }

    #tx_bdeventregistrationmgr_list .post_content_header {
        order: 1;
        width: 100%;
    }

    #tx_bdeventregistrationmgr_list .post_openinghours {
        order: 2;
        width: auto;
        padding-right: 16px;
    }

    #tx_bdeventregistrationmgr_list .post_hint {
        order: 3;
        top: 0;
        width: auto;
        padding-right: 0;
    }

    #tx_bdeventregistrationmgr_list .post_content > p {
        order: 4;
        width: 100%;
        margin-top: 8px;
    }

    #tx_bdeventregistrationmgr_list .post_openinghours p {
        padding-bottom: 4px;
    }

    #tx_bdeventregistrationmgr_list .post_content_header h3 {
        float: none;
        margin-bottom: 4px;
    }

    /* ---------- Detailseite -------------------------------- */
    /* Einspaltig kann die separate Ueberschriftenzeile nicht mehr ueber
       den Kaesten stehen. Sie entfaellt, die drei Worte wandern als
       Beschriftung an die Kaesten selbst -- gleiche Zuordnung wie am
       Desktop, der vierte Kasten bleibt wie dort unbeschriftet. */
    #tx_bdeventregistrationmgr_detail #post_box_wrap .box {
        width: 100%;
        padding: 0 20px 10px;
    }

    #tx_bdeventregistrationmgr_detail_header #post_title { display: none; }

    #tx_bdeventregistrationmgr_detail #post_box_wrap .box::before {
        display: block;
        font-size: 17px;
        font-weight: normal;
        padding: 10px 0 4px;
    }

    #tx_bdeventregistrationmgr_detail #post_box_wrap .box:nth-of-type(1)::before { content: "Wann?"; }
    #tx_bdeventregistrationmgr_detail #post_box_wrap .box:nth-of-type(2)::before { content: "Wo?"; }
    #tx_bdeventregistrationmgr_detail #post_box_wrap .box:nth-of-type(3)::before { content: "Wie?"; }

    /* ---------- Kopfbereich enger -------------------------- */
    #title { top: 62px; }
    #title h1 { font-size: 13px; }

    #footer-left,
    #footer-right {
        float: none;
        margin: 5px 20px;
    }

}