/* HERMESS – Customizer Plus v1.7.0 */

/* Globale Variablen anwenden */
section { padding-top: var(--hm-section-pad, 70px); padding-bottom: var(--hm-section-pad, 70px); }
.btn-primary, .btn-secondary, .cart-btn, .pw-btn, .btn-checkout { border-radius: var(--hm-btn-radius, 980px) !important; }
.cart-btn { display: inline-flex; align-items: center; }
.h-grp-card, .h-loc-card, .h-ref, .cta-banner, .hero-image { border-radius: var(--hm-radius, 18px) !important; }

/* Produktwelten */
.pw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
.pw-card { border-radius: var(--hm-radius, 18px); overflow: hidden; border: 1px solid var(--gray-border); background: #fff; display: flex; flex-direction: column; }
.pw-head { background: var(--brand-dark); padding: 32px 28px; color: #fff; }
.pw-card-2 .pw-head { background: linear-gradient(135deg, var(--brand-mid) 0%, var(--brand-accent) 100%); }
.pw-badge { display: inline-block; background: rgba(255,255,255,.18); color: #fff; padding: 5px 12px; border-radius: var(--hm-btn-radius, 980px); font-size: 12px; font-weight: 500; margin-bottom: 14px; }
.pw-head h3 { font-size: 20px; font-weight: 600; margin: 0 0 8px; color: #fff; letter-spacing: -.3px; }
.pw-head p { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.85); margin: 0; }
.pw-img { padding: 24px 28px; background: var(--gray-bg); }
.pw-img img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--hm-radius-sm, 12px); }
.pw-body { padding: 24px 28px; flex: 1; display: flex; flex-direction: column; }
.pw-specs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; font-size: 14px; }
.pw-specs div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--gray-border); padding-bottom: 8px; }
.pw-specs div:last-child { border-bottom: 0; }
.pw-specs span { color: var(--gray-text); }
.pw-specs strong { font-weight: 500; color: var(--brand-dark); text-align: right; }
.pw-btn { display: block; text-align: center; background: var(--brand-mid); color: #fff; padding: 14px 24px; font-size: 14px; font-weight: 500; margin-top: auto; }
.pw-btn:hover { text-decoration: none; background: var(--brand-cta-hover); }
.pw-btn-ghost { background: #fff; color: var(--brand-dark); border: 1px solid var(--gray-border); }
.pw-btn-ghost:hover { background: var(--gray-bg); }

/* ===== Einsatzbereiche: Kacheln ===== */
.tiles { display: grid; grid-template-columns: var(--tile-cols); gap: var(--tile-gap); margin-top: 40px; }
.tile { position: relative; display: flex; flex-direction: column; min-height: var(--tile-min-h); padding: var(--tile-pad); border-radius: var(--tile-radius); text-decoration: none !important; color: inherit; transition: transform .2s, box-shadow .2s, border-color .2s; overflow: hidden; }
.tile h3 { font-size: 16px; font-weight: 600; color: var(--brand-dark); margin-bottom: 6px; }
.tile p { font-size: 14px; color: var(--gray-text); line-height: 1.5; margin: 0; }
.tile-icon { width: var(--tile-icon); height: var(--tile-icon); display: flex; align-items: center; justify-content: center; font-size: calc(var(--tile-icon) * .5); margin-bottom: 18px; background: var(--brand-pastel); border-radius: calc(var(--tile-icon) * .25); flex: 0 0 auto; }
.tiles-icon-square .tile-icon { border-radius: 0; }
.tiles-icon-circle .tile-icon { border-radius: 50%; }
.tiles-icon-none .tile-icon { background: none; width: auto; height: auto; font-size: calc(var(--tile-icon) * .6); }
.tiles-noicon .tile-icon { display: none; }
.tiles-nodesc .tile p { display: none; }
.tiles-align-center .tile { align-items: center; text-align: center; }

/* Stile */
.tiles-card .tile    { background: #fff; border: 1px solid var(--gray-border); }
.tiles-outline .tile { background: transparent; border: 1.5px solid var(--brand-dark); }
.tiles-filled .tile  { background: var(--brand-pastel); border: 0; }
.tiles-filled .tile-icon { background: #fff; }
.tiles-minimal .tile { background: transparent; border: 0; padding-left: 0; padding-right: 0; }
.tiles-dark .tile    { background: var(--brand-dark); border: 0; }
.tiles-dark .tile h3 { color: #fff; }
.tiles-dark .tile p  { color: rgba(255,255,255,.7); }
.tiles-dark .tile-icon { background: rgba(255,255,255,.1); }
.tiles-image .tile   { background: var(--brand-dark) center/cover no-repeat; border: 0; justify-content: flex-end; min-height: max(var(--tile-min-h), 220px); }
.tiles-image .tile::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,40,80,.05) 20%, rgba(20,40,80,.85) 100%); transition: opacity .3s; }
.tiles-image .tile > * { position: relative; z-index: 1; }
.tiles-image .tile h3 { color: #fff; font-size: 18px; }
.tiles-image .tile p  { color: rgba(255,255,255,.85); }
.tiles-image .tile-icon { background: rgba(255,255,255,.18); backdrop-filter: blur(6px); }

/* Hover */
.tiles-hover-lift .tile:hover   { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,.1); }
.tiles-hover-border .tile:hover { border-color: var(--brand-mid) !important; box-shadow: inset 0 0 0 1px var(--brand-mid); }
.tiles-hover-zoom .tile:hover   { transform: scale(1.03); }
.tiles-image.tiles-hover-zoom .tile { background-size: 110%; transition: background-size .4s, transform .2s; }
.tiles-image.tiles-hover-zoom .tile:hover { background-size: 120%; transform: none; }

@media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .tiles { grid-template-columns: 1fr; } .pw-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px){ section { padding-top: min(var(--hm-section-pad,70px),44px); padding-bottom: min(var(--hm-section-pad,70px),44px);} }

/* iOS-Safari-Fix: Klicks auf Nicht-Buttons (Delegation) nur mit cursor:pointer */
[data-cart-open], [data-cart-close], [data-add], [data-add-to-cart], [data-product], [data-pkg], [data-qty],
.pkg-btn, .add-to-cart, .btn-add, .btn-checkout, .cart-overlay, .cart-item button, [onclick] {
  cursor: pointer; -webkit-tap-highlight-color: rgba(60,100,160,.15); touch-action: manipulation;
}
.cart-overlay { -webkit-overflow-scrolling: touch; }

/* Pro-Bereich-Abstand (Customizer): überschreibt globalen Wert nur wenn gesetzt */
.hm-sec > section { padding-top: var(--hm-sec-pad, var(--hm-section-pad, 52px)); padding-bottom: var(--hm-sec-pad, var(--hm-section-pad, 52px)); }
@media (max-width: 900px){
  .hm-sec > section { padding-top: min(var(--hm-sec-pad, var(--hm-section-pad,52px)),34px); padding-bottom: min(var(--hm-sec-pad, var(--hm-section-pad,52px)),34px);}
}

/* ---- Einsatzbereiche als fertige Bild-Kacheln (Stil 'photo') ---- */
.tiles-photo{ grid-template-columns:repeat(4,1fr) !important; gap:20px !important; margin-top:34px; }
.tile-photo{ padding:0 !important; border:0 !important; background:none !important;
  border-radius:16px; overflow:hidden; box-shadow:0 10px 30px rgba(30,45,92,.08);
  transition:transform .18s, box-shadow .18s; aspect-ratio:900/726; }
.tile-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.tile-photo:hover{ transform:translateY(-3px); box-shadow:0 18px 44px rgba(30,45,92,.16); }
.tile-photo .tile-icon, .tile-photo .tile-text{ display:none !important; }

@media (max-width:900px){
  .tiles-photo{ grid-template-columns:repeat(2,1fr) !important; gap:12px !important; }
}
@media (max-width:420px){
  .tiles-photo{ gap:10px !important; }
}