/* TT Teaser – responsive freie Leinwand (frei positionierte Elemente je Breakpoint) */

/* Bezugsrahmen der Container-Queries: die Anordnung richtet sich nach der Breite
   DES TEASERS, nicht nach der des Browserfensters. Dadurch zeigt die Vorschau im
   OnPage Composer (die den Teaser auf eine Gerätebreite begrenzt, ohne das Fenster
   zu ändern) genau dasselbe Layout wie der Editor und wie das echte Endgerät. */
.tt-teaser__cq{
    container-type:inline-size;
    container-name:tt-teaser;
    width:100%;
}

.tt-teaser{
    position:relative;
    width:100%;
    box-sizing:border-box;
    overflow:hidden;
}

/* Hintergrund-Bereiche (farbige Spalten, Breiten zusammen 100 %) */
.tt-teaser__regions{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
}
.tt-teaser__region{
    position:absolute;
    top:0;
    bottom:0;
    box-sizing:border-box;
}

/* Element-Ebene */
.tt-teaser__els{
    position:absolute;
    inset:0;
    z-index:1;
}
/* Im OPC-Editor dürfen Bilder über den Rahmen hinausragen (Ausschnittwahl) */
.tt-teaser[data-tt-edit]{ overflow:visible !important; }
.tt-teaser[data-tt-edit] .tt-teaser__els{ overflow:visible; }
/* Position/Größe/Sichtbarkeit werden je Instanz + Breakpoint per
   responsiveCss() gesetzt (.tt-teaser--<uid> .tt-teaser__el--<key>).
   Bilder erhalten dort zusätzlich eine Höhe (height:%). */
.tt-teaser__el{
    position:absolute;
    box-sizing:border-box;
    transform:translate(-50%,-50%);
    max-width:100%;
}

/* Bild-Element: füllt die per Editor gesetzte Breite × Höhe.
   WICHTIG: Bilder dürfen über die Boxbreite hinausragen (Ausschnittwahl /
   volle Boxbreite). Das allgemeine max-width:100% der .tt-teaser__el würde ein
   auf >100 % gezogenes Bild auf Boxbreite kappen und – bei außermittiger
   Position – rechts einen Spalt hinterlassen. Für Bilder daher aufheben; der
   Überstand wird durch overflow:hidden der .tt-teaser sauber abgeschnitten. */
.tt-teaser__el--img{
    overflow:hidden;
    max-width:none;
}
.tt-teaser__imgwrap{
    position:relative;
    width:100%;
    height:100%;
    overflow:hidden;
    line-height:0;
}
.tt-teaser__img{
    display:block;
    width:100%;
    height:100%;
}
.tt-teaser__img--cover{ object-fit:cover; }      /* füllt den Bereich, schneidet Ränder ab */
.tt-teaser__img--contain{ object-fit:contain; }  /* zeigt das ganze Bild */

/* SVG: über background-size zuverlässig in den Bereich einpassen/füllen */
.tt-teaser__svg{
    display:block;
    width:100%;
    height:100%;
    background-repeat:no-repeat;
    background-position:center;
}
.tt-teaser__svg.tt-teaser__img--cover{ background-size:cover; }
.tt-teaser__svg.tt-teaser__img--contain{ background-size:contain; }

/* Text-Elemente – einheitliches Padding in PX (nicht em!), damit Überschrift,
   Text und Button trotz unterschiedlicher Schriftgröße linksbündig exakt
   deckungsgleich untereinander stehen (gleicher absoluter Innenabstand). */
.tt-teaser__heading{ line-height:1.2; padding:8px 12px; margin:0; }
.tt-teaser__text{ line-height:1.55; padding:8px 12px; }
.tt-teaser__text :first-child{ margin-top:0; }
.tt-teaser__text :last-child{ margin-bottom:0; }
.tt-teaser__el--button{ align-items:center; padding:8px 12px; box-sizing:border-box; }