/* =========================================================================
   TT Portlet Collection – TT Banner (Inhalts-Panel-Modell)
   ========================================================================= */
.tt-banner{
    --tt-btn-primary:#2563eb; --tt-btn-primary-h:#1d4ed8;
    --tt-btn-secondary:#6b7280; --tt-btn-secondary-h:#4b5563;
    --tt-shadow:0 8px 24px rgba(15,23,42,.18);
    position:relative; width:100%; max-width:100%; box-sizing:border-box; display:block; overflow:hidden;
    background:#1f2937; isolation:isolate;
}
.tt-banner *{ box-sizing:border-box; }
/* Im OPC-Editor das Banner sicher im Portlet-Rahmen halten (kein Überstand). */
.tt-banner__media, .tt-banner__stage, .tt-banner__panel{ min-width:0; max-width:100%; }

/* Bild deckt den Banner vollständig ab (funktioniert für <img> und <picture>) */
.tt-banner__media{ position:absolute; inset:0; z-index:1; }
.tt-banner__media img,
.tt-banner__media picture{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }

/* Platzhalter im OPC-Editor */
.tt-banner__placeholder{
    position:absolute; inset:0; z-index:1; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:8px; color:#94a3b8;
    background:repeating-linear-gradient(45deg,#f1f5f9,#f1f5f9 12px,#e2e8f0 12px,#e2e8f0 24px);
    font:600 15px/1.2 system-ui,sans-serif;
}
.tt-banner__placeholder i{ font-size:34px; }

/* Abdunklung */
.tt-banner__overlay{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.tt-banner--overlay-dark  .tt-banner__overlay{ background:rgba(0,0,0,.45); }
.tt-banner--overlay-light .tt-banner__overlay{ background:rgba(255,255,255,.35); }

/* Bühne + Inhalts-Panel */
.tt-banner__stage{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.tt-banner__panel{
    position:absolute; transform:translate(-50%,-50%); box-sizing:border-box;
    display:flex; flex-direction:column; pointer-events:auto;
    overflow-wrap:break-word;
}
.tt-banner__panel--left{ align-items:flex-start; }
.tt-banner__panel--center{ align-items:center; }
.tt-banner__panel--right{ align-items:flex-end; }

/* Typografie */
.tt-banner__heading{ margin:0; line-height:1.15; text-shadow:0 2px 12px rgba(0,0,0,.35); letter-spacing:-0.01em; max-width:100%; }
.tt-banner__text{ margin:0; line-height:1.55; font-size:1.05rem; text-shadow:0 1px 8px rgba(0,0,0,.3); max-width:100%; }
.tt-banner__text :last-child{ margin-bottom:0; }

/* Box-Hintergrund für einzelne Elemente (wenn Farbe gesetzt) */
.tt-banner__boxed{ padding:.4em .7em; border-radius:10px; text-shadow:none; }
.tt-banner__heading.tt-banner__boxed{ display:inline-block; }
.tt-banner__btnwrap{ max-width:100%; }

/* Button */
.tt-banner__btn{
    display:inline-flex; align-items:center; gap:.55em; cursor:pointer; text-decoration:none;
    font-weight:600; line-height:1; border-radius:10px; border:2px solid transparent;
    transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease, color .12s ease;
    box-shadow:var(--tt-shadow); white-space:nowrap; max-width:100%;
}
.tt-banner__btn:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.24); text-decoration:none; }
.tt-banner__btn:focus-visible{ outline:3px solid rgba(59,130,246,.6); outline-offset:2px; }
.tt-banner__btn--sm{ padding:.5em .95em; font-size:.875rem; }
.tt-banner__btn--md{ padding:.7em 1.35em; font-size:1rem; }
.tt-banner__btn--lg{ padding:.9em 1.8em; font-size:1.15rem; }
.tt-banner__btn--primary{ background:var(--tt-btn-primary); color:#fff; }
.tt-banner__btn--primary:hover{ background:var(--tt-btn-primary-h); color:#fff; }
.tt-banner__btn--secondary{ background:var(--tt-btn-secondary); color:#fff; }
.tt-banner__btn--secondary:hover{ background:var(--tt-btn-secondary-h); color:#fff; }
.tt-banner__btn--light{ background:#fff; color:#111827; }
.tt-banner__btn--light:hover{ background:#f3f4f6; color:#111827; }
.tt-banner__btn--dark{ background:#111827; color:#fff; }
.tt-banner__btn--dark:hover{ background:#000; color:#fff; }
.tt-banner__btn--outline-light{ background:transparent; color:#fff; border-color:#fff; box-shadow:none; }
.tt-banner__btn--outline-light:hover{ background:#fff; color:#111827; }
.tt-banner__btn--outline-dark{ background:transparent; color:#111827; border-color:#111827; box-shadow:none; }
.tt-banner__btn--outline-dark:hover{ background:#111827; color:#fff; }

/* =========================== Mobile (< 768px) =============================
   Der Border-Radius liegt am .tt-banner (+ overflow:hidden). Dadurch werden
   in JEDER Variante automatisch nur die AUSSEN-Ecken gerundet; die Naht
   zwischen Bild und Text (gestapelt) bleibt gerade.
   ========================================================================= */
@media (max-width:767px){
    .tt-banner__heading{ font-size:1.6rem; }

    /* --- Überlagert (wie Desktop): Bild als Cover, Panel zentriert darüber --- */
    .tt-banner--m-overlay .tt-banner__stage{
        position:relative; display:flex; align-items:center; justify-content:center;
        padding:24px clamp(14px,5vw,28px);
    }
    .tt-banner--m-overlay .tt-banner__panel{
        position:static !important; transform:none !important; left:auto !important; top:auto !important;
        width:auto !important; max-width:100% !important; min-height:0 !important;
        align-items:center; text-align:center;
    }

    /* --- Getrennt gestapelt: Bild und Text als eigene Blöcke --- */
    .tt-banner--m-top,
    .tt-banner--m-bottom{
        display:flex !important; flex-direction:column;
        height:auto !important; min-height:0 !important;
    }
    /* Nur die AUSSEN-Ecken runden: Da der Radius am .tt-banner (+ overflow:hidden)
       liegt, werden automatisch nur die vier Außenecken (Bild-Oberkante +
       Textbox-Unterkante) gerundet; die Naht zwischen Bild und Textbox bleibt
       gerade, weil sie im Inneren liegt. */
    .tt-banner--m-bottom,
    .tt-banner--m-top{ border-radius:var(--tt-radius,0px) !important; }
    /* Text ÜBER dem Bild */
    .tt-banner--m-top{ flex-direction:column-reverse; }

    .tt-banner--m-top .tt-banner__media,
    .tt-banner--m-bottom .tt-banner__media{ position:static; }
    .tt-banner--m-top .tt-banner__media img,
    .tt-banner--m-bottom .tt-banner__media img{ height:auto; }

    /* Overlay-Abdunklung im gestapelten Modus nicht nötig */
    .tt-banner--m-top .tt-banner__overlay,
    .tt-banner--m-bottom .tt-banner__overlay{ display:none; }

    /* Textbereich vollbreit & bündig unter/über dem Bild – kein umlaufender
       Banner-Hintergrund-Streifen, Bild und Textbox wirken als EIN Objekt. */
    .tt-banner--m-top .tt-banner__stage,
    .tt-banner--m-bottom .tt-banner__stage{
        position:static; display:block; padding:0;
    }
    .tt-banner--m-top .tt-banner__panel,
    .tt-banner--m-bottom .tt-banner__panel{
        position:static !important; transform:none !important; left:auto !important; top:auto !important;
        width:100% !important; max-width:100% !important; min-height:0 !important;
        padding:clamp(18px,5vw,28px) !important;
        border-radius:0 !important;   /* Außenrundung kommt vom Banner-Clip, Naht bleibt gerade */
    }
}