/* =========================================================================
   TT Portlet Collection – TT Panel
   Bild + Textbox, flexible Anordnung, Hover-Effekte, Verlinkung
   ========================================================================= */
.tt-panel{
    --tt-btn-primary:#2563eb; --tt-btn-primary-h:#1d4ed8;
    --tt-btn-secondary:#6b7280; --tt-btn-secondary-h:#4b5563;
    display:flex; position:relative; overflow:hidden; box-sizing:border-box;
    text-decoration:none; color:inherit; background:#fff;
    box-shadow:0 6px 20px rgba(15,23,42,.10);
    transition:box-shadow .18s ease, transform .18s ease;
    isolation:isolate;
}
a.tt-panel:hover{ text-decoration:none; color:inherit; box-shadow:0 14px 34px rgba(15,23,42,.18); }

/* Bild */
.tt-panel__imgwrap{ position:relative; overflow:hidden; background:#e5e7eb; flex:0 0 auto; }
.tt-panel__imgwrap img,
.tt-panel__imgwrap picture{ width:100%; height:100%; object-fit:cover; display:block; }
.tt-panel__ph{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; color:#94a3b8; font-size:34px; }

/* Textbox */
.tt-panel__box{ box-sizing:border-box; display:flex; flex-direction:column; gap:10px; justify-content:center; }
.tt-panel__title{ margin:0; line-height:1.2; font-weight:700; }
.tt-panel__text{ margin:0; line-height:1.55; }
.tt-panel__text :last-child{ margin-bottom:0; }

/* ---------------- Anordnung ---------------- */
.tt-panel--pos-bottom{ flex-direction:column; }
.tt-panel--pos-top{ flex-direction:column-reverse; }
.tt-panel--pos-right{ flex-direction:row; align-items:stretch; }
.tt-panel--pos-left{ flex-direction:row-reverse; align-items:stretch; }

/* Bildhöhe je Modus */
.tt-panel--pos-top .tt-panel__imgwrap,
.tt-panel--pos-bottom .tt-panel__imgwrap,
.tt-panel--pos-overlay .tt-panel__imgwrap{ height:var(--tt-imgh,260px); width:100%; }
.tt-panel--pos-left .tt-panel__imgwrap,
.tt-panel--pos-right .tt-panel__imgwrap{ flex:1 1 auto; align-self:stretch; min-height:var(--tt-imgh,260px); }

/* Überlagert */
.tt-panel--pos-overlay{ display:block; }
.tt-panel--pos-overlay .tt-panel__box{
    position:absolute; left:0; right:0; bottom:0; z-index:2;
}

/* ---------------- Hover-Effekte ---------------- */
.tt-panel__imgwrap img{ transition:transform .5s ease, filter .4s ease; will-change:transform,filter; }
.tt-panel--fx-zoom:hover .tt-panel__imgwrap img{ transform:scale(1.08); }
.tt-panel--fx-zoomslow:hover .tt-panel__imgwrap img{ transform:scale(1.12); transition-duration:1.2s; }
.tt-panel--fx-zoomrotate:hover .tt-panel__imgwrap img{ transform:scale(1.1) rotate(2deg); }
.tt-panel--fx-blur:hover .tt-panel__imgwrap img{ filter:blur(4px); }
.tt-panel--fx-grayscale:hover .tt-panel__imgwrap img{ filter:grayscale(1); }
.tt-panel--fx-colorize .tt-panel__imgwrap img{ filter:grayscale(1); }
.tt-panel--fx-colorize:hover .tt-panel__imgwrap img{ filter:grayscale(0); }
.tt-panel--fx-bright:hover .tt-panel__imgwrap img{ filter:brightness(1.15); }
.tt-panel--fx-dark:hover .tt-panel__imgwrap img{ filter:brightness(.75); }

/* ---------------- Button ---------------- */
/* Gemeinsame Ausrichtung – gilt für Bootstrap- UND eigene Buttons */
.tt-panel__cta{ align-self:flex-start; }
.tt-panel__box[style*="center"] .tt-panel__cta{ align-self:center; }
.tt-panel__box[style*="right"] .tt-panel__cta{ align-self:flex-end; }
/* Button über die ganze Breite */
.tt-panel__cta--block{ width:100%; align-self:stretch; justify-content:center; text-align:center; }
.tt-panel__cta--block.tt-panel__btnbs{ display:flex; }

/* Bootstrap-Buttons (btn btn-primary …): nur Icon/Text-Ausrichtung ergänzen,
   Farben/Padding kommen aus dem Shop-Theme. */
.tt-panel__btnbs{ display:inline-flex; align-items:center; gap:.5em; }

/* Eigene Button-Konfiguration (Basisgeometrie) */
.tt-panel__btn{
    display:inline-flex; align-items:center; gap:.5em; cursor:pointer;
    text-decoration:none; font-weight:600; line-height:1; border-radius:9px; border:2px solid transparent;
    padding:.6em 1.1em; transition:background-color .12s, border-color .12s, color .12s, transform .12s, box-shadow .12s;
    white-space:nowrap;
}
.tt-panel__btn:hover{ text-decoration:none; transform:translateY(-1px); }

/* Eigene Farben inkl. Hover/Active/Focus (per CSS-Variablen serverseitig gesetzt) */
.tt-panel__btn--custom{
    background:var(--btnc-bg,#2563eb); border-color:var(--btnc-bd,#2563eb); color:var(--btnc-tx,#fff);
}
.tt-panel__btn--custom:hover{
    background:var(--btnc-bg-h,#1d4ed8); border-color:var(--btnc-bd-h,#1d4ed8); color:var(--btnc-tx-h,#fff);
}
.tt-panel__btn--custom:active{
    background:var(--btnc-bg-a,#1e40af); border-color:var(--btnc-bd-a,#1e40af); color:var(--btnc-tx-a,#fff);
}
.tt-panel__btn--custom:focus,
.tt-panel__btn--custom:focus-visible{
    background:var(--btnc-bg-f,#2563eb); border-color:var(--btnc-bd-f,#2563eb); color:var(--btnc-tx-f,#fff);
    outline:none; box-shadow:0 0 0 3px rgba(37,99,235,.35);
}

/* ---------------- Responsiv ---------------- */
@media (max-width:767px){
    .tt-panel--pos-left,
    .tt-panel--pos-right{ flex-direction:column; }
    .tt-panel--pos-left .tt-panel__imgwrap,
    .tt-panel--pos-right .tt-panel__imgwrap{ height:var(--tt-imgh,260px); flex:0 0 auto; }
    .tt-panel--pos-left .tt-panel__box,
    .tt-panel--pos-right .tt-panel__box{ flex:0 0 auto !important; }
}