/* deutscher-trachtenverband.de: Responsive (Auftrag tk 05.11.2026). Über 1300 px wirkt nur der Teil vor den Medienabfragen, der Desktop bleibt wie alt.
   Alt gab es feste Breiten (.page-wrapper-oben 1300 px, #bild 1500 px, #inhalt 1030 px) und nur Teilregeln in resp.css. */

/* Karussell wie alt: bis zum Start verborgen, je Bild 200 x 150 */
.dtv-karussell-aussen { display: none; }
.dtv-karussell .jcarousel-item { width: 200px; height: 150px; }
#nach_oben img { display: block; }
/* B1: alt Inline-Regel des Plugins (#c343/#c345 900 x 150) */
.tx-imagecarousel-pi1 .jcarousel-container-horizontal, .tx-imagecarousel-pi1 .jcarousel-clip-horizontal { width: 900px; height: 150px; }
/* M1: Pfeil-Knöpfe nur im Mobil-Menü */
.dtv-auf { display: none; }
img[usemap] { max-width: 100%; height: auto; }

@media only screen and (max-width: 1300px) {
    .page-wrapper-oben { width: 100%; max-width: 1300px; box-sizing: border-box; }
    #bild { left: 0; margin: 0 auto; width: 100%; }
    #logo { margin-left: 20px; }
    .mainMenu { margin-left: 10px; }
    #funktion { margin-left: 0; right: 20px; }
}

@media only screen and (max-width: 1060px) {
    .tx-imagecarousel-pi1 .jcarousel-container-horizontal { width: auto; max-width: 100%; height: 190px; box-sizing: border-box; }
    .tx-imagecarousel-pi1 .jcarousel-clip-horizontal { width: 100%; }
}

@media only screen and (max-width: 1100px) {
    /* M6: Überschrift Startseite (content.css: width 100 % plus padding-left) */
    #seite1 .page-wrapper-inhalt-ss h2 { box-sizing: border-box; padding-left: 0; float: none; }
    #inhalt { width: 100%; box-sizing: border-box; padding: 0 16px; }
    #content { width: 100%; margin: 0; }
    #copy { width: 100%; }

    /* Kopf */
    .page-wrapper-oben { height: auto; }
    header { margin: 0; padding: 10px 16px; min-height: 96px; }
    header::after { content: ""; display: block; clear: both; }
    #logo { position: static; float: left; width: auto; height: auto; margin: 0; max-width: 60%; }
    #logo img { max-height: 80px; width: auto; }
    #logo2 { float: right; margin: 0; max-width: 30%; }
    #logo2 img { max-height: 80px; width: auto; }
    #funktion { position: static; float: none; clear: both; width: 100%; margin: 6px 0 0; padding: 0; border: 0; }
    #funktion ul { display: flex; flex-wrap: wrap; justify-content: flex-end; }
    #funktion ul li { float: none; font-size: 0.75em; }

    /* Menü */
    #menuTrigger { display: block; float: none; clear: both; line-height: 44px; font-size: 1.1em; text-transform: uppercase; color: #fff; background: #c51315; text-align: center; margin: 8px 0 0; }
    #menuTrigger a { color: #fff; display: block; }
    .mainMenu { position: static; display: none; margin: 0; font-size: 1em; width: 100%; }
    .mainMenu.offen { display: block; }
    ul.dropdown { background: #fff; }
    ul.dropdown li, ul.dropdown ul li { float: none; position: relative; }
    ul.dropdown ul, ul.dropdown ul ul { position: static; visibility: visible !important; display: none !important; width: auto !important; border: 0; background: #f2f2f1; margin: 0; padding: 0; }
    ul.dropdown li.aufgeklappt > ul { display: block !important; }
    ul.dropdown li#ebene1 a { padding: 12px 52px 12px 12px; border-bottom: 1px solid #ddd; }
    ul.dropdown li#ebene2 { font-size: 1em; }
    ul.dropdown li#ebene2 a { float: none; width: auto; padding: 10px 52px 10px 28px; }
    ul.dropdown li#ebene3 a { margin: 0; padding: 8px 12px 8px 44px; min-height: 0; }
    .dtv-auf { display: block; position: absolute; right: 0; top: 0; width: 48px; height: 44px; border: 0; background: transparent; cursor: pointer; }
    .dtv-auf::before { content: "▾"; font-size: 22px; color: #575756; display: block; transition: transform .2s; }
    li.aufgeklappt > .dtv-auf::before { transform: rotate(180deg); }

    /* Bilder */
    .csc-textpic-imagewrap img { max-width: 100%; height: auto; }
    .page-wrapper-inhalt { background-size: auto; }
    .flex-control-nav { display: none; }
    .flex-direction-nav { display: none; }
}

/* M4: Knopf „Mehr“ steht unter 861 px im Fluss und erzeugt einen Streifen unter dem Slider */
@media only screen and (max-width: 860px) {
    .tx-ws-flexslider .caption-wrapper { display: none; }
}

/* B3: resp.css Z. 139 setzt unter 801 px #444 auf Rot */
@media only screen and (max-width: 800px) {
    #content .tx-powermail { color: #ece9e9; width: 100%; box-sizing: border-box; }
}

@media only screen and (max-width: 700px) {
    #nach_oben { right: 8px; bottom: 8px; }
    #nach_oben img { width: 48px; height: auto; }
    /* B2: Inline-height aus dem RTE wirkt, sobald Zellen Blöcke sind */
    table.contenttable tr, table.contenttable td { height: auto !important; }
    /* M2/M3: lange URLs und  -Ketten */
    #content p, #content td, #content li { overflow-wrap: anywhere; }
    /* B3: Legende schiebt das Feld sonst nach rechts */
    .tx-powermail fieldset { min-width: 0; }
    #content .tx-powermail legend { font-size: 1.05em; line-height: 1.3; max-width: 100%; white-space: normal; overflow-wrap: anywhere; float: none; }
    .page-wrapper-inhalt-us, .page-wrapper-inhalt-ss { font-size: 1.15em; }
    .page-wrapper-copy { padding-bottom: 6em; }
    .c50l, .c50r { float: none !important; width: 100% !important; }
    .subcl, .subcr { padding: 0 !important; }
    .csc-textpic-intext-left .csc-textpic-imagewrap, .csc-textpic-intext-right .csc-textpic-imagewrap,
    .csc-textpic-intext-left-nowrap .csc-textpic-imagewrap, .csc-textpic-intext-right-nowrap .csc-textpic-imagewrap { float: none !important; margin: 0 0 10px !important; max-width: 100%; }
    .csc-textpic-imagecolumn { margin-right: 10px; }
    .csc-textpic-text { margin-left: 0 !important; margin-right: 0 !important; }
    table.contenttable, table.contenttable tbody, table.contenttable tr, table.contenttable td { display: block; width: 100% !important; text-align: left !important; }
    #content h2, #mitte h2 { overflow-wrap: anywhere; }
    span[style*="font-size: 30pt"] { font-size: 20pt !important; }
    span[style*="font-size: 18pt"] { font-size: 14pt !important; }
    /* Fuß: Bänder im Hintergrundbild hängen an festen Höhen, hier einfacher Block */
    .page-wrapper-copy { background: #fff; padding-top: 1.5em; }
    #c195 img { display: none; }
    .csc-frame-indent3366, .csc-frame-indent { margin-left: 0 !important; margin-right: 0 !important; width: auto !important; }
    #copy .csc-frame-indent3366 { text-align: center; }
}