.cmplz-hidden {
display: none !important;
}
/* Overlay */
#stm-cart-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,0.4);
z-index: 99998;
opacity: 0;
transition: opacity 0.3s ease;
cursor: pointer;
}
#stm-cart-overlay.stm-active { opacity: 1; }
/* Slide-in Panel – oeffnet von rechts, dynamische Hoehe */
#stm-slide-cart {
position: fixed;
top: 0; right: 0; left: auto;
width: 380px; max-width: 90vw;
max-height: 100vh;
background: #fff;
box-shadow: -4px 0 24px rgba(0,0,0,0.15);
z-index: 99999;
transform: translateX(100%);
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
display: flex !important;
flex-direction: column;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
border-radius: 0 0 0 12px;
}
#stm-slide-cart.stm-active { transform: translateX(0); }
/* Header */
.stm-sc-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 24px;
background: #1B3A8C;
color: #fff;
flex-shrink: 0;
}
.stm-sc-title {
font-size: 1.1rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
}
.stm-sc-icon { font-size: 1.3rem; }
.stm-sc-badge {
background: #C24400;
color: #fff;
font-size: 0.75rem;
font-weight: 700;
width: 22px; height: 22px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.stm-sc-close {
background: none; border: none;
color: #fff; font-size: 1.8rem;
cursor: pointer; padding: 0;
line-height: 1; opacity: 0.8;
transition: opacity 0.2s;
}
.stm-sc-close:hover { opacity: 1; }
/* Erfolgs-Banner */
.stm-sc-added {
background: #ecfdf5;
color: #065f46;
padding: 12px 24px;
font-size: 0.9rem;
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
border-bottom: 1px solid #d1fae5;
}
.stm-sc-check {
background: #10b981;
color: #fff;
width: 20px; height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
flex-shrink: 0;
}
/* Artikel-Liste – dynamisch, scrollbar bei vielen Artikeln */
.stm-sc-items {
flex: 0 1 auto;
overflow-y: auto;
max-height: 50vh;
padding: 16px 24px;
}
.stm-sc-item {
display: flex;
gap: 14px;
padding: 14px 0;
border-bottom: 1px solid #f0f0f0;
align-items: center;
}
.stm-sc-item:last-child { border-bottom: none; }
.stm-sc-item-img {
width: 60px; height: 60px;
object-fit: cover;
border-radius: 8px;
border: 1px solid #eee;
flex-shrink: 0;
}
.stm-sc-item-info { flex: 1; min-width: 0; }
.stm-sc-item-name {
font-size: 0.9rem;
font-weight: 500;
color: #333;
margin: 0 0 4px 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.stm-sc-item-meta {
font-size: 0.8rem;
color: #888;
}
.stm-sc-item-price {
font-weight: 600;
color: #1B3A8C;
font-size: 0.95rem;
white-space: nowrap;
}
.stm-sc-empty {
text-align: center;
padding: 40px 20px;
color: #999;
font-size: 0.95rem;
}
.stm-sc-empty-icon {
font-size: 2.5rem;
margin-bottom: 12px;
display: block;
}
/* Footer */
.stm-sc-footer {
padding: 20px 24px;
background: #f9fafb;
border-top: 2px solid #eee;
flex-shrink: 0;
}
.stm-sc-subtotal {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
font-size: 1rem;
color: #333;
}
.stm-sc-subtotal strong {
color: #1B3A8C;
font-size: 1.15rem;
}
.stm-sc-btn {
display: block;
width: 100%;
padding: 13px 20px;
border-radius: 8px;
text-align: center;
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
transition: all 0.2s ease;
margin-bottom: 8px;
box-sizing: border-box;
cursor: pointer;
border: none;
}
.stm-sc-btn-cart {
background: #fff;
color: #1B3A8C;
border: 2px solid #1B3A8C !important;
}
.stm-sc-btn-cart:hover { background: #f0f4ff; color: #1B3A8C; }
.stm-sc-btn-checkout {
background: #C24400;
color: #fff !important;
}
.stm-sc-btn-checkout:hover { background: #e55a00; }
.stm-sc-continue {
display: block;
width: 100%;
background: none;
border: none;
color: #888;
font-size: 0.85rem;
cursor: pointer;
padding: 8px 0 0 0;
transition: color 0.2s;
}
.stm-sc-continue:hover { color: #555; }
/* Mobile */
@media (max-width: 480px) {
#stm-slide-cart { width: 100vw; max-width: 100vw; }
}
/* Sticky Cart Tab - rechts am Rand */
#stm-sticky-cart {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%) translateX(100%);
z-index: 99990;
display: flex;
align-items: center;
gap: 10px;
background: #1B3A8C;
color: #fff;
padding: 14px 16px 14px 18px;
border-radius: 12px 0 0 12px;
cursor: pointer;
box-shadow: -2px 4px 16px rgba(0,0,0,0.2);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
background 0.2s ease;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
user-select: none;
}
#stm-sticky-cart:hover {
background: #15307a;
}
#stm-sticky-cart.stm-sticky-visible {
transform: translateY(-50%) translateX(0);
}
.stm-sticky-icon {
font-size: 1.4rem;
line-height: 1;
}
.stm-sticky-badge {
position: absolute;
top: -6px;
right: 30px;
background: #C24400;
color: #fff;
font-size: 0.7rem;
font-weight: 700;
min-width: 20px;
height: 20px;
padding: 0 5px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 6px rgba(194,68,0,0.4);
animation: stm-badge-pop 0.3s ease;
}
@keyframes stm-badge-pop {
0% { transform: scale(0.5); }
70% { transform: scale(1.2); }
100% { transform: scale(1); }
}
.stm-sticky-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.stm-sticky-label {
font-size: 0.7rem;
opacity: 0.8;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.stm-sticky-total {
font-size: 0.95rem;
font-weight: 700;
}
/*
* Der Preis erbt wieder das Weiss der Leiste (#fff auf #1B3A8C).
* Eine Farbkorrektur des BFSG-Checkers setzt
* .woocommerce-Price-amount.amount bdi auf ein dunkles Orange; gemessen
* wurde sie an Preisen auf weissem Grund, wo das richtig ist. Hier sitzt
* der Preis auf Dunkelblau, und dort kam er damit auf 2,25:1. Die ID
* gewinnt gegen die Klassen-Regel, ohne sie anderswo zu stoeren.
*/
#stm-sticky-total,
#stm-sticky-total .woocommerce-Price-amount,
#stm-sticky-total .woocommerce-Price-amount.amount bdi {
color: inherit !important;
}
.stm-sticky-arrow {
font-size: 1.2rem;
opacity: 0.6;
transition: transform 0.2s, opacity 0.2s;
}
#stm-sticky-cart:hover .stm-sticky-arrow {
transform: translateX(-3px);
opacity: 1;
}
/* Puls-Animation bei neuem Artikel */
#stm-sticky-cart.stm-pulse {
animation: stm-tab-pulse 0.6s ease;
}
@keyframes stm-tab-pulse {
0% { box-shadow: -2px 4px 16px rgba(0,0,0,0.2); }
50% { box-shadow: -2px 4px 24px rgba(194,68,0,0.5); }
100% { box-shadow: -2px 4px 16px rgba(0,0,0,0.2); }
}
/* Mobile: kompakter */
@media (max-width: 768px) {
#stm-sticky-cart {
padding: 10px 12px 10px 12px;
gap: 6px;
}
.stm-sticky-info { display: none; }
.stm-sticky-arrow { display: none; }
}
/* Ausblenden wenn Slide-in offen ist */
#stm-sticky-cart.stm-hidden {
transform: translateY(-50%) translateX(100%) !important;
}
/* Scroll to Top Button */
.storetown-scroll-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 56px;
height: 56px;
background: linear-gradient(135deg, #001889 0%, #003bb5 100%);
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
box-shadow: 0 4px 20px rgba(0, 24, 137, 0.4);
z-index: 9999;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.storetown-scroll-to-top.visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.storetown-scroll-to-top:hover {
background: linear-gradient(135deg, #C24400 0%, #ff7b2e 100%);
transform: translateY(-5px) scale(1.1);
box-shadow: 0 6px 30px rgba(194, 68, 0, 0.5);
}
.storetown-scroll-to-top:active {
transform: translateY(-2px) scale(1.05);
}
.storetown-scroll-to-top svg {
width: 28px;
height: 28px;
fill: currentColor;
animation: scrollButtonArrow 2s ease-in-out infinite;
}
@keyframes scrollButtonArrow {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-4px);
}
}
.storetown-scroll-to-top::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
border-radius: 50%;
transform: translate(-50%, -50%) scale(0);
opacity: 0;
transition: all 0.4s ease;
}
.storetown-scroll-to-top:hover::before {
transform: translate(-50%, -50%) scale(1.5);
opacity: 1;
}
/* Mobile - Button ausblenden */
@media (max-width: 768px) {
.storetown-scroll-to-top {
width: 48px;
height: 48px;
bottom: 20px;
right: 20px;
}
.storetown-scroll-to-top svg {
width: 24px;
height: 24px;
}
}
@media (max-width: 480px) {
.storetown-scroll-to-top {
width: 44px;
height: 44px;
bottom: 15px;
right: 15px;
}
.storetown-scroll-to-top svg {
width: 22px;
height: 22px;
}
}
@media screen and (min-width:1101px){
/* --- Anker für die Panels: Headerleiste + Sticky-Klon (UL bewusst static, sonst
zentriert das breite Panel am UL statt an der Leiste) --- */
.masthead:not(.side-header) .header-bar{position:relative}
#phantom .ph-wrap{position:relative}
.masthead .header-bar .main-nav,#phantom .main-nav{position:static}
/* --- Top-Level (position mit !important: The7 lädt Teile seines CSS nach diesem Style) --- */
/* align-self (01.10.2026): Zwischen 1101 und 1600 px setzt das Kopf-CSS "Menu einzeilig erzwingen" auf der UL
align-items:center !important - die li schrumpften auf Texthoehe (18 px), der Aktiv-/Hover-Strich (bottom:0)
klebte direkt unter dem Wort statt an der Unterkante der Leiste, und die Panels ragten 26 px in den Kopf.
align-self am li schlaegt align-items der UL: volle Leistenhoehe wie ab 1601 px. */
.masthead .header-bar .main-nav > li.stm-mn-li{position:static!important;display:flex;align-items:stretch;align-self:stretch!important}
.masthead .header-bar .main-nav > li.stm-mn-referenzen,.masthead .header-bar .main-nav > li.stm-mn-extensions,.masthead .header-bar .main-nav > li.stm-mn-magazin{position:relative!important}
.masthead .header-bar .main-nav > li.stm-mn-li > a.stm-mn-top{display:flex;align-items:center;gap:7px;padding:0 17px;color:#262d37;text-decoration:none;position:relative}
.masthead .header-bar .main-nav > li.stm-mn-li > a.stm-mn-top .stm-mn-tt{font:600 15px/1.2 "Inter",Helvetica,Arial,sans-serif;letter-spacing:.012em;color:inherit;white-space:nowrap}
.stm-mn-li > .stm-mn-top .stm-mn-car{color:#98a0ad;transition:transform .22s ease,color .18s ease;flex:0 0 auto;margin-top:1px}
.stm-mn-li.stm-open > .stm-mn-top,.stm-mn-li > .stm-mn-top:hover{color:#c24400}
.stm-mn-li.stm-open > .stm-mn-top .stm-mn-car{transform:rotate(180deg);color:#c24400}
.masthead .header-bar .main-nav > li.stm-mn-li > a.stm-mn-top::after{content:'';position:absolute;left:17px;right:17px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:#c24400;opacity:0;transform:scaleX(.4);transition:opacity .2s ease,transform .25s ease}
.masthead .header-bar .main-nav > li.stm-mn-li.stm-on > a.stm-mn-top::after,.masthead .header-bar .main-nav > li.stm-mn-li.stm-open > a.stm-mn-top::after{opacity:1;transform:scaleX(1)}
.masthead .header-bar .main-nav > li.stm-mn-li.stm-on > a.stm-mn-top{color:#c24400}
/* --- Panel-Grundgerüst --- */
.stm-mn-panel{position:absolute;top:100%;left:0;right:0;margin:0 auto;z-index:9990;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .22s ease,transform .26s cubic-bezier(.22,.9,.3,1),visibility 0s linear .26s;pointer-events:none;background:#fff;border:1px solid rgba(22,30,55,.09);border-radius:0 0 16px 16px;border-top:none;box-shadow:0 30px 70px rgba(15,22,45,.18),0 4px 14px rgba(15,22,45,.06);max-height:calc(100vh - 150px);overflow:auto;text-align:left}
.stm-mn-li.stm-open > .stm-mn-panel,.stm-mn-li:focus-within > .stm-mn-panel{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .22s ease,transform .26s cubic-bezier(.22,.9,.3,1),visibility 0s}
.stm-mn-loesungen .stm-mn-panel{width:min(1280px,calc(100vw - 56px))}
/* Kleine Panels: mittig unter dem jeweiligen Menüpunkt (li ist dort relative);
--stm-mn-shift = Viewport-Klemme, vom JS vor dem Öffnen gesetzt */
.stm-mn-referenzen .stm-mn-panel,.stm-mn-extensions .stm-mn-panel,.stm-mn-magazin .stm-mn-panel{left:50%;right:auto;margin:0;transform:translate(calc(-50% + var(--stm-mn-shift,0px)),12px)}
.stm-mn-referenzen.stm-open > .stm-mn-panel,.stm-mn-referenzen:focus-within > .stm-mn-panel,
.stm-mn-extensions.stm-open > .stm-mn-panel,.stm-mn-extensions:focus-within > .stm-mn-panel,
.stm-mn-magazin.stm-open > .stm-mn-panel,.stm-mn-magazin:focus-within > .stm-mn-panel{transform:translate(calc(-50% + var(--stm-mn-shift,0px)),0)}
.stm-mn-referenzen .stm-mn-panel{width:min(820px,calc(100vw - 40px))}
/* --- Referenzen: Vorschau-Bühne --- */
.stm-mn-gridref{grid-template-columns:322px 1fr;gap:0 26px}
.stm-mn-refcats{border-right:1px solid #eef0f5;padding-right:22px}
.stm-mn-row.stm-cat-on .stm-mn-a{background:#f5f6fa}
.stm-mn-row.stm-cat-on .stm-mn-at{color:#c24400}
.stm-mn-stage{display:none}
.stm-mn-stage.stm-stage-on{display:block}
.stm-mn-refhead{display:block;font:700 11.5px/1 "Inter",Helvetica,Arial,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#8a919e;margin:2px 0 10px 8px}
/* Marktplatz-Nachweis unter einer Produktliste */
.stm-mn-mkpl{display:flex;align-items:center;gap:9px;margin:10px 0 0;padding:8px 10px;border-radius:10px;border:1px solid;text-decoration:none;transition:background .15s ease,border-color .15s ease}
.stm-mn-mkpl.is-adobe{border-color:#f2dad8;background:#fdf6f5;color:#c9130a}
.stm-mn-mkpl.is-adobe:hover{background:#fceceb;border-color:#eec3bf}
.stm-mn-mkpl.is-wp{border-color:#d9e0fb;background:#f6f8fe;color:#2f49c9}
.stm-mn-mkpl.is-wp:hover{background:#eef2fd;border-color:#c3cef7}
.stm-mn-mkpl .stm-mn-ico{width:26px;height:26px;border-radius:7px;background:currentColor;border:0;flex:0 0 auto}
.stm-mn-mkpl .stm-mn-ico svg{width:14px;height:14px;fill:#fff}
.stm-mn-mkpl-tx{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.stm-mn-mkpl-k{font:600 10.5px/1.25 "Inter",Helvetica,Arial,sans-serif;color:#5f6678}
.stm-mn-mkpl-t{font:700 12.5px/1.3 "Inter",Helvetica,Arial,sans-serif;color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stm-mn-mkpl > svg{margin-left:auto;flex:0 0 auto;opacity:.75}
/* Einordnender Satz ueber den Projektkarten */
.stm-mn-refintro{margin:0 0 10px;font:400 12.3px/1.5 "Inter",Helvetica,Arial,sans-serif;color:#6b7285;max-width:52ch}
.stm-mn-refintro a{color:#c94600;text-decoration:none;font-weight:600;white-space:nowrap}
.stm-mn-refintro a svg{margin-left:3px;vertical-align:-1px;opacity:.8}
.stm-mn-refintro a:hover{text-decoration:underline}
.stm-mn-refcard{display:flex;align-items:center;gap:12px;padding:7px 8px;border-radius:10px;text-decoration:none;transition:background .14s ease}
.stm-mn-refcard:hover{background:#f5f6fa}
.stm-mn-ri{display:block;width:96px;height:60px;border-radius:8px;overflow:hidden;background:#eef0f5;border:1px solid #e9ebf1;flex:0 0 auto}
.stm-mn-ri img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.stm-mn-refcard:hover .stm-mn-ri img{transform:scale(1.06)}
.stm-mn-rt{font:600 13px/1.4 "Inter",Helvetica,Arial,sans-serif;color:#1f2635;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .15s ease}
.stm-mn-refcard:hover .stm-mn-rt{color:#c24400}
.stm-mn-refall{display:inline-flex;align-items:center;gap:6px;margin:8px 0 0 8px;font:600 12.5px/1.3 "Inter",Helvetica,Arial,sans-serif;color:#2b3245;text-decoration:none;transition:color .15s ease}
.stm-mn-refall:hover{color:#c24400}
.stm-mn-refall svg{transition:transform .18s ease}
.stm-mn-refall:hover svg{transform:translateX(3px)}
.stm-mn-extensions .stm-mn-panel{width:min(1150px,calc(100vw - 40px))}
.stm-mn-magazin .stm-mn-panel{width:min(995px,calc(100vw - 40px))}
.stm-mn-in{padding:30px 36px 26px}
.stm-mn-referenzen .stm-mn-in{padding:22px 22px 18px}
/* --- Grid & Spalten --- */
.stm-mn-grid{display:grid;gap:6px 34px}
.stm-mn-grid4{grid-template-columns:1.26fr 1.05fr 1.1fr 1fr}
.stm-mn-grid2{grid-template-columns:1fr 1fr}
/* Die Kartenspalte bleibt fest: bei 1fr schrumpft sie auf 315px, und die Zeile
"Online Shop Kostenrechner" hat dort nur 8px Luft - das Neu-Zeichen bricht sonst um. */
.stm-mn-grid3{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 337px}
.stm-mn-gridf{grid-template-columns:330px 1fr 1fr}
/* --- Featured-Beitragskarte (E-Magazin) --- */
.stm-mn-featcol{padding-right:6px;border-right:1px solid #eef0f5;margin-right:-6px}
.stm-mn-feat{display:block;text-decoration:none;padding:0 10px 6px;border-radius:12px}
.stm-mn-feat-img{display:block;border-radius:11px;overflow:hidden;aspect-ratio:16/9;background:#eef0f5;margin-bottom:11px;box-shadow:0 6px 18px rgba(15,22,45,.10)}
.stm-mn-feat-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s cubic-bezier(.22,.9,.3,1)}
.stm-mn-feat:hover .stm-mn-feat-img img{transform:scale(1.045)}
.stm-mn-feat-meta{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.stm-mn-feat-cat{display:inline-block;padding:3px 10px;border-radius:999px;background:#fff3ea;color:#d94b00;font:600 11px/1.4 "Inter",Helvetica,Arial,sans-serif;letter-spacing:.02em}
.stm-mn-feat-t{display:block;font:700 15px/1.4 "Inter",Helvetica,Arial,sans-serif;color:#1f2635;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;transition:color .15s ease}
.stm-mn-feat:hover .stm-mn-feat-t{color:#c24400}
.stm-mn-feat-by{display:block;margin-top:7px;font:400 12px/1.5 "Inter",Helvetica,Arial,sans-serif;color:#7a8194}
.stm-mn-facts{margin-right:auto;font:500 12.5px/1.5 "Inter",Helvetica,Arial,sans-serif;color:#6b7284;display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.stm-mn-ch{display:inline-flex;align-items:center;gap:6px;font:700 11.5px/1 "Inter",Helvetica,Arial,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#8a919e;margin:0 0 12px 10px;text-decoration:none;transition:color .15s ease}
.stm-mn-ch .stm-mn-hvg{opacity:0;transform:translateX(-3px);transition:opacity .15s ease,transform .2s ease}
a.stm-mn-ch:hover{color:#c24400}
a.stm-mn-ch:hover .stm-mn-hvg{opacity:1;transform:none}
.stm-mn-list{list-style:none;margin:0;padding:0}
/* --- Zeilen --- */
.stm-mn-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;margin:0;padding:0}
.stm-mn-a{grid-column:1;display:block;padding:8px 10px;border-radius:10px;text-decoration:none;transition:background .14s ease;min-width:0}
.stm-mn-a:hover{background:#f5f6fa}
.stm-mn-at{display:block;font:600 14px/1.35 "Inter",Helvetica,Arial,sans-serif;color:#1f2635}
.stm-mn-a:hover .stm-mn-at{color:#c24400}
.stm-mn-ad{display:block;font:400 12.3px/1.4 "Inter",Helvetica,Arial,sans-serif;color:#7a8194;margin-top:2px}
/* zweite Textzeile: haengt direkt an der ersten, kein zusaetzlicher Abstand */
.stm-mn-ad2{margin-top:0}
.stm-mn-a[aria-current="page"] .stm-mn-at{color:#c24400}
/* --- System-Icons (Referenzen) --- */
.stm-mn-a.stm-mn-hasico{display:flex;align-items:center;gap:12px}
.stm-mn-ico{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;flex:0 0 auto;background:#f4f5f8;border:1px solid #e9ebf1;background:color-mix(in srgb,currentColor 8%,#fff);border-color:color-mix(in srgb,currentColor 18%,#fff);transition:background .15s ease,transform .15s ease}
.stm-mn-ico svg{width:19px;height:19px;fill:currentColor;display:block}
.stm-mn-a:hover .stm-mn-ico{background:color-mix(in srgb,currentColor 15%,#fff);transform:scale(1.05)}
.stm-mn-tx{display:block;min-width:0}
/* --- Ghost-Zeile: „auch andere Systeme" --- */
.stm-mn-ghost .stm-mn-ico{background:#fff;border-style:dashed;border-color:#c9cdd8}
.stm-mn-ghost .stm-mn-at{color:#5a6172;font-weight:600}
.stm-mn-ghost .stm-mn-ad{color:#8a91a0}
.stm-mn-ghost .stm-mn-a:hover .stm-mn-at{color:#c24400}
.stm-mn-ghost .stm-mn-a:hover .stm-mn-ico{color:#c24400!important;border-color:#c24400;border-style:dashed;background:#fff7f2}
.stm-mn-thumb{display:block;width:48px;height:48px;border-radius:11px;border:1px solid #e9ebf1;background:#fff;overflow:hidden;flex:0 0 auto;box-shadow:0 2px 8px rgba(15,22,45,.07);transition:transform .15s ease,box-shadow .15s ease}
.stm-mn-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.stm-mn-a:hover .stm-mn-thumb{transform:scale(1.05);box-shadow:0 4px 14px rgba(15,22,45,.14)}
.stm-mn-badge{display:inline-block;vertical-align:2px;margin-left:4px;padding:2px 7px 1px;border-radius:5px;background:#c24400;color:#fff;font:700 9.5px/1.2 "Inter",Helvetica,Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.stm-mn-chip{grid-column:2;margin:0 4px 0 2px;padding:3px 9px;border:1px solid #d9dde6;border-radius:999px;font:600 11px/1.4 "Inter",Helvetica,Arial,sans-serif;color:#5a6172;text-decoration:none;transition:all .15s ease;white-space:nowrap}
.stm-mn-chip:hover{border-color:#c24400;color:#c24400;background:#fff7f2}
.stm-mn-mini{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:0 10px 8px;margin-top:-3px}
.stm-mn-row:has(.stm-mn-hasico) .stm-mn-mini{padding-left:58px}
.stm-mn-mini a{font:500 11.5px/1.5 "Inter",Helvetica,Arial,sans-serif;color:#8a91a0;text-decoration:none;border-bottom:1px dotted #c9cdd8;transition:color .15s ease,border-color .15s ease}
.stm-mn-mini a:hover{color:#c24400;border-color:#c24400}
.stm-mn-dot{color:#c3c8d4;font-size:11px}
/* --- Tool-Karte --- */
.stm-mn-card{margin:14px 0 2px 10px;padding:16px 16px 8px;border-radius:13px;background:linear-gradient(135deg,#1b2a8f 0%,#5a24c8 62%,#8224e3 100%);box-shadow:0 10px 26px rgba(60,30,160,.28)}
.stm-mn-cardt{display:block;font:700 10.5px/1 "Inter",Helvetica,Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.75);margin-bottom:8px}
.stm-mn-card a{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:center;padding:8px 8px;margin:0 -6px;border-radius:9px;text-decoration:none;transition:background .15s ease,color .15s ease}
.stm-mn-card a.hat-ico{grid-template-columns:auto minmax(0,1fr) auto;column-gap:10px}
.stm-mn-card a:hover{background:rgba(255,255,255,.12)}
/* Trennlinie zwischen den Eintraegen, dazu mehr Luft - die Zeilen standen zu eng */
.stm-mn-card a{padding:11px 8px}
.stm-mn-card a + a{border-top:1px solid rgba(255,255,255,.16)}
.stm-mn-card .ct{grid-column:1;font:600 13.5px/1.3 "Inter",Helvetica,Arial,sans-serif;color:#fff}
.stm-mn-card .cd{grid-column:1;grid-row:2;font:400 11.5px/1.35 "Inter",Helvetica,Arial,sans-serif;color:rgba(255,255,255,.86)}
.stm-mn-card a.hat-ico .ct{grid-column:2;grid-row:1}
.stm-mn-card a.hat-ico .cd{grid-column:2;grid-row:2}
/* nur das direkte Kind ist der Pfeil - sonst faengt die Regel das Icon-SVG mit ein */
.stm-mn-card > a > svg{grid-column:2;grid-row:1 / span 2;color:rgba(255,255,255,.85)}
.stm-mn-card > a.hat-ico > svg{grid-column:3}
/* Icon-Chip auf dunklem Grund: der helle color-mix-Chip der Listen passt hier nicht */
.stm-mn-card a{color:#fff}
.stm-mn-card .stm-mn-ico{grid-column:1;grid-row:1 / span 2;width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2)}
.stm-mn-card .stm-mn-ico svg{width:17px;height:17px}
.stm-mn-card a:hover{color:#ffd60a}
.stm-mn-card a:hover .stm-mn-ico{background:rgba(255,214,10,.2);border-color:rgba(255,214,10,.45);transform:scale(1.05)}
/* Karte fuellt eine Spalte allein (Extensions-Panel): senkrecht mittig darin */
.stm-mn-colcard{display:flex;flex-direction:column;justify-content:center}
.stm-mn-card.is-solo{margin:0;padding:15px 14px 10px}
/* Gelber Rahmen: heller Doppelring, damit er auf dem Violett frisch wirkt */
.stm-mn-card.is-gelb{border:2px solid #ffd60a;box-shadow:0 0 0 5px rgba(255,214,10,.14),0 12px 30px rgba(60,30,160,.3)}
/* Neu-Zeichen: gelber Punkt mit ruhigem Ring (kein Blitzen - WCAG 2.3.1), Wort steht still */
.stm-mn-cneu{display:inline-flex;align-items:center;gap:4px;vertical-align:2px;margin-left:5px;padding:2px 6px 1px;white-space:nowrap;border-radius:5px;background:#ffd60a;color:#3a2a00;font:700 9.5px/1.2 "Inter",Helvetica,Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;animation:stm-mn-neuring 2.4s ease-out infinite}
.stm-mn-cneu i{width:4px;height:4px;border-radius:50%;background:#3a2a00;animation:stm-mn-puls 2.4s ease-in-out infinite}
/* Ein Ring laeuft nach aussen und verglueht - 0,42 Hz, weit unter den 3 Hz aus WCAG 2.3.1 */
@keyframes stm-mn-neuring{0%{box-shadow:0 0 0 0 rgba(255,214,10,.7)}55%,100%{box-shadow:0 0 0 7px rgba(255,214,10,0)}}
@keyframes stm-mn-puls{0%,70%,100%{opacity:1}35%{opacity:.4}}
@media (prefers-reduced-motion:reduce){.stm-mn-cneu,.stm-mn-cneu i{animation:none}}
.stm-mn-cbadge{display:inline-block;vertical-align:2px;margin-left:5px;padding:2px 7px 1px;border-radius:5px;background:#fff;color:#4a189e;font:700 9.5px/1.2 "Inter",Helvetica,Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase}
/* --- Fußleiste --- */
.stm-mn-foot{display:flex;align-items:center;gap:18px;padding:13px 36px;border-top:1px solid #edeff5;background:#fafbfd;border-radius:0 0 15px 15px}
.stm-mn-referenzen .stm-mn-foot{padding:12px 22px}
.stm-mn-fspace{flex:1 1 auto}
.stm-mn-all{display:inline-flex;align-items:center;gap:7px;font:600 13px/1.3 "Inter",Helvetica,Arial,sans-serif;color:#2b3245;text-decoration:none;transition:color .15s ease}
.stm-mn-all:hover{color:#c24400}
.stm-mn-all svg{transition:transform .18s ease}
.stm-mn-all:hover svg{transform:translateX(3px)}
/* Preis-Link im Fuss: gleiche Groesse wie die Nachbarn, aber mit Rahmen -
er ist ein eigenes Ziel und soll nicht mit „Alle Leistungen" verschmelzen. */
.stm-mn-preise{display:inline-flex;align-items:center;gap:7px;font:600 13px/1.3 "Inter",Helvetica,Arial,sans-serif;
color:#2b3245;text-decoration:none;white-space:nowrap;padding:6px 13px;border:1px solid #dfe3ec;
border-radius:100px;background:#fff;transition:color .15s ease,border-color .15s ease}
.stm-mn-preise:hover{color:#c24400;border-color:#c24400}
.stm-mn-tel{display:inline-flex;align-items:center;gap:7px;font:600 13px/1.3 "Inter",Helvetica,Arial,sans-serif;color:#2b3245;text-decoration:none;white-space:nowrap}
.stm-mn-tel:hover{color:#c24400}
.stm-mn-cta{display:inline-block;padding:9px 18px;border-radius:9px;background:#c24400;color:#fff;font:600 13px/1.2 "Inter",Helvetica,Arial,sans-serif;text-decoration:none;transition:background .15s ease,transform .15s ease;white-space:nowrap}
.stm-mn-cta:hover{background:#00178f;color:#fff;transform:translateY(-1px)}
/* --- Retro-Zeile --- */
.stm-mn-retro{display:flex;align-items:center;gap:8px;margin-top:14px;padding:9px 10px 0;border-top:1px dashed #e6e8f0}
.stm-mn-retro span:first-child{font:500 11.5px/1.4 "Inter",Helvetica,Arial,sans-serif;color:#a0a6b4}
.stm-mn-retro a{font:500 11.5px/1.4 "Inter",Helvetica,Arial,sans-serif;color:#8a91a0;text-decoration:none;border-bottom:1px dotted #c9cdd8}
.stm-mn-retro a:hover{color:#c24400;border-color:#c24400}
/* --- Seiten-Dim beim offenen Panel (eigenes Element, vom JS einmalig angelegt) --- */
.stm-mn-dimel{position:fixed;inset:0;background:rgba(18,23,40,.34);opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:9988}
html.stm-mn-dim .stm-mn-dimel{opacity:1}
html.stm-mn-dim .masthead:not(.side-header){z-index:9989}
html.stm-mn-dim #phantom{z-index:9989}
}
@media screen and (max-width:1100px){
.stm-mn-panel{display:none}
}
.pricing-faktoren{margin:.55rem 0 0;font-size:.82rem;line-height:1.5;color:#6b7689;max-width:34ch}.pricing-card .pricing-faktoren{margin-bottom:0}@media(max-width:768px){.pricing-faktoren{font-size:.8rem}}
.stm-bt{display:flex;align-items:center;gap:10px;flex-basis:100%;width:100%;max-width:560px;margin:14px 0 2px;padding:10px 14px;background:#f5f8ff;border:1px solid #d9e3f6;border-radius:10px;font-size:13px;line-height:1.5;color:#4c5769;box-sizing:border-box}
.stm-bt__badge{flex:0 0 auto;padding:5px 9px;background:#C24400;border-radius:8px;color:#fff;font-weight:800;font-size:13px;line-height:1}
.stm-sc-bundle{margin:12px 0 4px;padding:11px 14px;background:#f5f8ff;border:1px solid #d9e3f6;border-radius:10px;font-size:12.5px;line-height:1.5;color:#4c5769}
.stm-sc-bundle strong{color:#16265c}
.stm-sc-bundle--aktiv{background:#f2fbf5;border-color:#cbe8d4;color:#1a7f37}
.stm-sc-bundle--aktiv strong{color:#1a7f37}
/* ============================================
STM FOOTER v3.0 – Direkt (kein iframe)
Alle Selektoren mit .stm-ft- Prefix
============================================ */
.stm-ft-wrapper {
width: 100%;
background: linear-gradient(135deg, #061B90 0%, #0a2ab8 50%, #061B90 100%);
color: #fff;
position: relative;
overflow: hidden;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
clear: both;
}
.stm-ft-wrapper::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(circle at 20% 80%, rgba(194,68,0,.15) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(194,68,0,.1) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(255,255,255,.05) 0%, transparent 50%);
animation: stmFtGrad 20s ease infinite;
pointer-events: none;
}
@keyframes stmFtGrad {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-20px) rotate(180deg); }
}
.stm-ft-deco {
position: absolute; border-radius: 50%;
background: rgba(194,68,0,.1); filter: blur(60px);
pointer-events: none;
}
.stm-ft-deco-1 { width: 300px; height: 300px; top: -100px; right: -100px; }
.stm-ft-deco-2 { width: 200px; height: 200px; bottom: -50px; left: 10%; }
.stm-ft-container {
position: relative; z-index: 1;
max-width: 1400px; margin: 0 auto;
padding: 60px 30px 30px;
}
.stm-ft-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 40px; margin-bottom: 50px;
}
.stm-ft-col { position: relative; overflow: visible; }
.stm-ft-col h3 {
font-size: 20px; font-weight: 700; margin-bottom: 25px;
color: #fff; position: relative; padding-bottom: 10px;
}
.stm-ft-col h3::after {
content: ''; position: absolute; bottom: 0; left: 0;
width: 40px; height: 3px; background: #FFB38C;
border-radius: 2px; box-shadow: 0 0 10px rgba(255,179,140,.5);
}
.stm-ft-col ul { list-style: none; margin: 0; padding: 0; }
.stm-ft-col ul li {
margin-bottom: 12px; transition: transform .3s; position: relative;
}
.stm-ft-col ul li::before {
content: ''; position: absolute; left: -15px; top: 50%;
transform: translateY(-50%); width: 0; height: 2px;
background: #FFB38C; transition: width .3s; pointer-events: none;
}
.stm-ft-col ul li:hover::before { width: 8px; }
.stm-ft-col ul li:hover { transform: translateX(5px); }
.stm-ft-col a {
color: rgba(255,255,255,.9); text-decoration: none;
font-size: 15px; transition: all .3s;
display: inline-flex; align-items: center; gap: 8px;
}
.stm-ft-col a:hover {
color: #FFB38C; text-shadow: 0 0 15px rgba(255,179,140,.6);
}
/* Logo */
.stm-ft-logo {
display: block; margin-bottom: 25px; padding: 15px 20px;
background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,255,255,.95));
border-radius: 12px; border: 2px solid #FFB38C;
box-shadow: 0 4px 20px rgba(255,179,140,.25); max-width: 320px;
}
.stm-ft-logo img { display: block; width: 100%; height: auto; max-width: 280px; }
.stm-ft-desc {
color: rgba(255,255,255,.85); line-height: 1.7;
font-size: 15px; margin-bottom: 25px;
}
/* Kontakt */
.stm-ft-contact { display: flex; flex-direction: column; gap: 14px; }
.stm-ft-ci {
display: flex; align-items: center; gap: 12px;
color: rgba(255,255,255,.9); font-size: 15px;
}
.stm-ft-ci span:first-child { color: #FFB38C; filter: brightness(1.3); font-size: 18px; }
.stm-ft-ci a { color: rgba(255,255,255,.9); text-decoration: none; transition: color .3s; }
.stm-ft-ci a:hover { color: #FFB38C; }
/* Social */
.stm-ft-social { display: flex; gap: 15px; margin-top: 30px; }
.stm-ft-slink {
width: 44px; height: 44px; border-radius: 50%;
background: rgba(255,255,255,.1); display: flex;
align-items: center; justify-content: center;
transition: all .3s; color: #fff;
}
.stm-ft-slink:hover {
background: #C24400; transform: translateY(-3px);
box-shadow: 0 5px 20px rgba(194,68,0,.4);
color: #061B90;
}
.stm-ft-slink:hover svg,
.stm-ft-slink:hover svg path { fill: #061B90 !important; }
/* Bottom */
.stm-ft-bottom {
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 14px 30px;
padding-top: 30px; border-top: 1px solid rgba(255,255,255,.15);
}
.stm-ft-copy { color: rgba(255,255,255,.7); font-size: 14px; }
/* Rechtslinks: seit 01.09.2026 acht Eintraege (inkl. Erklaerung zur Barrierefreiheit).
Deshalb umbruchfaehig statt starr - bleibt rechtsbuendig und faellt bei Platzmangel
sauber in eine zweite Zeile, statt sich mit dem Copyright zu beruehren. */
.stm-ft-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px 26px; }
.stm-ft-legal a {
color: rgba(255,255,255,.7); text-decoration: none;
font-size: 14px; transition: color .3s; white-space: nowrap;
}
.stm-ft-legal a:hover { color: #FFB38C; }
/* Widerrufsbutton (EU-Widerrufsfunktion, Pflicht seit 19.06.2026):
setzt sich bewusst von den uebrigen Rechtslinks ab. Ziel-Seite und
Beschriftung kommen zur Laufzeit aus dem Germanized-OWB-Paket.
Spezifitaet (0,4,1): schlaegt auch die spaete Kompaktregel
".stm-ft-wrapper .stm-ft-legal a" (padding 3px 2px, font-size 12px). */
.stm-ft-wrapper .stm-ft-legal a.stm-ft-vwd {
border: 1px solid rgba(255,255,255,.55);
border-radius: 999px;
padding: 6px 16px;
color: #fff;
font-size: 13px;
font-weight: 600;
}
.stm-ft-wrapper .stm-ft-legal a.stm-ft-vwd:hover { border-color: #FFB38C; color: #FFB38C; }
/* === RESPONSIVE === */
/* Laptop: Abstaende schrumpfen, damit die Rechtsleiste einzeilig bleibt (statt Schrift zu verkleinern). */
@media (max-width: 1400px) {
.stm-ft-legal { gap: 10px 20px; }
}
@media (max-width: 1024px) {
.stm-ft-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
.stm-ft-col:first-child { grid-column: 1 / -1; }
.stm-ft-logo { margin: 0 auto 25px; }
.stm-ft-desc { text-align: center; }
.stm-ft-contact { align-items: center; }
.stm-ft-social { justify-content: center; }
}
@media (max-width: 768px) {
.stm-ft-container { padding: 40px 20px 25px; }
.stm-ft-grid { grid-template-columns: 1fr; gap: 35px; margin-bottom: 35px; }
.stm-ft-col { text-align: center; }
.stm-ft-col h3 { font-size: 18px; margin-bottom: 20px; }
.stm-ft-col h3::after { left: 50%; transform: translateX(-50%); }
.stm-ft-logo { max-width: 280px; margin: 0 auto 20px; }
.stm-ft-desc { font-size: 14px; padding: 0 10px; }
.stm-ft-contact {
background: rgba(255,255,255,.05); border-radius: 12px;
padding: 20px; margin-top: 15px;
}
.stm-ft-ci { justify-content: center; font-size: 14px; }
.stm-ft-col:nth-child(2) ul,
.stm-ft-col:nth-child(3) ul {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
}
.stm-ft-col:nth-child(2) ul li,
.stm-ft-col:nth-child(3) ul li {
margin-bottom: 0; background: rgba(255,255,255,.05);
border-radius: 8px; text-align: center;
}
.stm-ft-col:nth-child(2) ul li::before,
.stm-ft-col:nth-child(3) ul li::before { display: none; }
.stm-ft-col:nth-child(2) ul li:hover,
.stm-ft-col:nth-child(3) ul li:hover {
transform: none; background: rgba(194,68,0,.15);
}
.stm-ft-col:nth-child(2) a,
.stm-ft-col:nth-child(3) a {
font-size: 13px; padding: 12px 8px;
display: block; width: 100%; line-height: 1.3;
}
.stm-ft-bottom { flex-direction: column; text-align: center; gap: 15px; padding-top: 25px; }
.stm-ft-copy { font-size: 13px; }
.stm-ft-legal { justify-content: center; gap: 20px; }
.stm-ft-legal a { font-size: 13px; }
.stm-ft-deco { display: none; }
}
@media (max-width: 400px) {
.stm-ft-container { padding: 30px 15px 20px; }
.stm-ft-logo { max-width: 250px; padding: 10px 12px; }
.stm-ft-logo img { max-width: 200px; }
.stm-ft-desc { font-size: 13px; }
.stm-ft-contact { padding: 15px; }
.stm-ft-ci { font-size: 13px; flex-direction: column; gap: 4px; }
.stm-ft-col:nth-child(2) ul,
.stm-ft-col:nth-child(3) ul { grid-template-columns: 1fr; }
.stm-ft-col:nth-child(2) a,
.stm-ft-col:nth-child(3) a { padding: 14px 10px; font-size: 14px; }
.stm-ft-legal { flex-direction: column; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
.stm-ft-wrapper::before { animation: none; }
}
@media (max-width: 768px) {
/* ---------- 1) FOOTER .stm-ft-wrapper ---------- */
footer.stm-ft-wrapper::before { animation: none; }
.stm-ft-wrapper .stm-ft-container { padding: 28px 16px 18px; }
.stm-ft-wrapper .stm-ft-grid { gap: 12px; margin-bottom: 18px; }
.stm-ft-wrapper .stm-ft-logo { max-width: 200px; padding: 8px 12px; margin: 0 auto 12px; }
.stm-ft-wrapper .stm-ft-desc { font-size: 13px; line-height: 1.55; margin-bottom: 12px; padding: 0; }
.stm-ft-wrapper .stm-ft-contact { padding: 12px 14px; margin-top: 8px; gap: 8px; }
.stm-ft-wrapper .stm-ft-ci { font-size: 13px; }
.stm-ft-wrapper .stm-ft-social { margin-top: 12px; gap: 12px; }
.stm-ft-wrapper .stm-ft-slink { width: 40px; height: 40px; }
.stm-ft-wrapper.stm-ft-acc .stm-ft-col h3 {
font-size: 15px; font-weight: 600; margin: 0;
padding: 13px 44px 13px 14px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.14);
border-radius: 10px;
text-align: left; cursor: pointer;
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none; user-select: none;
}
.stm-ft-wrapper.stm-ft-acc .stm-ft-col h3:focus-visible { outline: 2px solid #C24400; outline-offset: 2px; }
.stm-ft-wrapper.stm-ft-acc .stm-ft-col h3::after {
content: "+";
position: absolute; top: 50%; bottom: auto; right: 12px; left: auto;
transform: translateY(-50%);
width: 24px; height: 24px; line-height: 24px;
background: rgba(194,68,0,.2); color: #fff;
border-radius: 50%; box-shadow: none;
font-size: 17px; font-weight: 400; text-align: center;
}
.stm-ft-wrapper.stm-ft-acc .stm-ft-col.stm-open h3::after { content: "\2013"; }
.stm-ft-wrapper.stm-ft-acc .stm-ft-col ul { display: none; }
.stm-ft-wrapper.stm-ft-acc .stm-ft-col.stm-open ul {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px;
}
.stm-ft-wrapper.stm-ft-acc .stm-ft-col ul li { margin-bottom: 0; background: rgba(255,255,255,.05); border-radius: 8px; text-align: center; }
.stm-ft-wrapper.stm-ft-acc .stm-ft-col ul li::before { display: none; }
.stm-ft-wrapper.stm-ft-acc .stm-ft-col ul li:hover { transform: none; background: rgba(194,68,0,.15); }
.stm-ft-wrapper.stm-ft-acc .stm-ft-col ul a { display: block; width: 100%; font-size: 13px; line-height: 1.35; padding: 11px 8px; }
.stm-ft-wrapper .stm-ft-bottom { padding-top: 14px; gap: 8px; }
.stm-ft-wrapper .stm-ft-copy { font-size: 12px; }
.stm-ft-wrapper .stm-ft-legal { flex-wrap: wrap; justify-content: center; gap: 6px 14px; }
.stm-ft-wrapper .stm-ft-legal a { font-size: 12px; padding: 3px 2px; }
}
/* STM-KKT-V1: Ueberschrift folgt wieder der Ausrichtung ihrer Sektion */
[class*="-contact-item"] > h3,
[class*="-contact-item"] > h4 {
display: block !important;
}
/* Der Abstand kam vorher aus flex-gap - als Inline-Inhalt braucht das Icon einen Rand */
[class*="-contact-item"] > h3 > i,
[class*="-contact-item"] > h4 > i,
[class*="-contact-item"] > h3 > svg,
[class*="-contact-item"] > h4 > svg {
margin-right: .5rem;
}
/* Gates haengen an JS-vergebenen Klassen -> ohne JS bleibt alles sichtbar */
@media (max-width: 768px) {
.stm-reg-wrap:not(.stm-open) .stm-reg-hm { display: none !important; }
}
@media (min-width: 769px) {
.stm-reg-wrap:not(.stm-open) .stm-reg-hd { display: none !important; }
.stm-reg-wrap .stm-reg-grid { grid-template-columns: repeat(6, 1fr) !important; }
}
/* ---------- STM-MOREBTN-V2: "Alle N anzeigen" elegant (2026-08-15) ----------
Kundenbefund: "sehr eingepresst, steht so weit oben" - der Knopf klebte
mit 12 px unter dem Raster und trug als 480-px-Block die Anmutung eines
Formularfeldes. Neu: zentrierte Pille in Auto-Breite mit Luft nach oben,
Icon-Kreis im Hausverlauf (dieselbe Optik wie .stm-acc-icon). Das
Plus/Minus steckt jetzt im CSS und haengt an aria-expanded, deshalb
traegt das Label kein Zeichen mehr. */
.stm-reg-btn {
display: flex; align-items: center; justify-content: center; gap: .62rem;
width: fit-content; min-width: min(100%, 15rem); max-width: min(100%, 27rem);
margin: clamp(1.9rem, 3.4vw, 2.9rem) auto .4rem;
padding: .8rem 1.35rem .8rem 1.6rem;
border: 1px solid rgba(6,27,144, .2);
border-radius: 999px;
background: #fff;
color: #061b90;
font-family: inherit; font-size: .97rem; font-weight: 600; line-height: 1.25;
text-align: center;
cursor: pointer;
box-shadow: 0 1px 2px rgba(10,22,70,.05), 0 14px 30px -22px rgba(6,27,144, .9);
transition: border-color .25s ease, box-shadow .25s ease, transform .2s ease, background-color .25s ease;
position: relative; z-index: 2;
-webkit-tap-highlight-color: transparent;
}
.stm-reg-btn::after {
content: ""; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
background: linear-gradient(#fff,#fff) center/9px 1.7px no-repeat, linear-gradient(#fff,#fff) center/1.7px 9px no-repeat, linear-gradient(135deg,#C24400,#ff7b2e);
box-shadow: 0 5px 12px -5px rgba(194,68,0,.7);
transition: transform .3s ease;
}
.stm-reg-btn[aria-expanded="true"]::after {
background: linear-gradient(#fff,#fff) center/9px 1.7px no-repeat, linear-gradient(135deg,#C24400,#ff7b2e);
}
.stm-reg-btn:focus-visible { outline: 2px solid #061b90; outline-offset: 3px; }
.stm-reg-btn:active { transform: scale(.985); }
@media (hover: hover) {
.stm-reg-btn:hover { border-color: rgba(6,27,144, .45); background: #fbfcff; box-shadow: 0 2px 4px rgba(10,22,70,.06), 0 20px 34px -22px rgba(6,27,144, 1); transform: translateY(-1px); }
.stm-reg-btn:hover::after { transform: scale(1.09); }
}
/* v1.0.1: Reveal-Fade im Regional-Scope neutralisieren (Ruhe-Linie).
Sichert zugleich per Toggle aufgedeckte und mobil reaktivierte Karten,
deren IntersectionObserver-Reveal sonst timing-abhaengig waere. */
.stm-reg-wrap .scroll-reveal {
opacity: 1 !important;
transform: none !important;
}
/* STM-TTD-V1: keine Hover-Tooltips ohne Mauszeiger */
@media (hover: none), (pointer: coarse), (max-width: 1024px) {
[class*="regional-city"] .tooltip,
[class*="regional-city"] .city-tooltip,
.regional-city .tooltip,
.regional-city .city-tooltip {
display: none !important;
}
/* Link-Vorschauen (tippy.js) */
[data-tippy-root],
.tippy-box {
display: none !important;
}
}
/* ================================================================
STM Website-Familie (E2+E3) — Scope: body.stm-webfam
hub(cms-) wordpress(wordpress-) joomla(joomla-) indiv(website-)
================================================================ */
/* ---------- 1) TYPO-FALLEN-RESET ---------------------------------
Site-Fallen: h2{font:400 24px/31px Cambay!important; margin-top:55px}
h3{font-size:19px!important} h2::first-letter{54px orange}
(font-Shorthand setzt auch das GEWICHT -> ueberall !important) */
body.stm-webfam .cms-section-title,
body.stm-webfam .wordpress-section-title,
body.stm-webfam .joomla-section-title,
body.stm-webfam .website-section-title {
font-family: inherit !important;
font-size: clamp(1.7rem, 5.5vw, 3rem) !important;
line-height: 1.2 !important;
font-weight: 800 !important;
/* v2.2.1: nicht mehr 0 — die 55px-Cambay-Falle ist weg, aber ohne
Luft nach oben wirken die Titel eingequetscht (Kunde 2026-08-13) */
margin-top: 2.5rem !important;
margin-bottom: .75rem !important;
text-wrap: balance;
}
@media (max-width: 768px) {
body.stm-webfam .cms-section-title,
body.stm-webfam .wordpress-section-title,
body.stm-webfam .joomla-section-title,
body.stm-webfam .website-section-title { margin-top: 1.25rem !important; }
}
body.stm-webfam .cms-cta-section h2,
body.stm-webfam .wordpress-cta-section h2,
body.stm-webfam .joomla-cta-section h2,
body.stm-webfam .website-cta-section h2 {
font-family: inherit !important;
font-size: clamp(1.6rem, 5vw, 2.6rem) !important;
line-height: 1.2 !important;
font-weight: 800 !important;
margin-top: 0 !important;
}
body.stm-webfam h2::first-letter {
font: inherit !important;
color: inherit !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
line-height: inherit !important;
-webkit-initial-letter: normal !important;
initial-letter: normal !important;
}
body.stm-webfam section h2 { margin-top: 0 !important; }
body.stm-webfam section h3 {
font-size: 1.15rem !important;
line-height: 1.35 !important;
}
body.stm-webfam .faq-question h3 {
font-size: 1rem !important;
line-height: 1.4 !important;
margin: 0 !important;
}
/* Zahlen-Karten: innerer Count-Span erbt Containergroesse
(.count-number{font-size:1.4rem}-Falle, bekannt aus Shop-Familie) */
body.stm-webfam .stat-number .count-number,
body.stm-webfam .infographic-stat-value .count-number {
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
font-family: inherit !important;
}
/* ---------- 2) RUHE-MODUS (Desktop+Mobil, Kundenlinie 2026-08-13) */
body.stm-webfam *,
body.stm-webfam *::before,
body.stm-webfam *::after { animation-iteration-count: 1 !important; }
/* Unsichtbare/reine Deko-Layer ganz aus (Markup-verifiziert) */
body.stm-webfam #preloader,
body.stm-webfam .preloader,
body.stm-webfam .animated-bg,
body.stm-webfam .floating-icons,
body.stm-webfam .network-line,
body.stm-webfam .cms-network,
body.stm-webfam .wordpress-network,
body.stm-webfam .joomla-network,
body.stm-webfam .website-network,
body.stm-webfam .code-particles,
body.stm-webfam .code-particle { display: none !important; }
/* Teure Milchglas-Effekte aus (Audit-Liste aller 4 Seiten) */
body.stm-webfam .cms-badge,
body.stm-webfam .cms-contact-item,
body.stm-webfam .cms-icon,
body.stm-webfam .cms-modal-overlay,
body.stm-webfam .cms-service-card,
body.stm-webfam .related-service-link,
body.stm-webfam .wordpress-badge,
body.stm-webfam .wordpress-contact-item,
body.stm-webfam .wordpress-icon,
body.stm-webfam .wordpress-modal-overlay,
body.stm-webfam .wordpress-service-card,
body.stm-webfam .stm-wordpress-partner-badge,
body.stm-webfam .joomla-badge,
body.stm-webfam .joomla-contact-item,
body.stm-webfam .joomla-icon,
body.stm-webfam .joomla-modal-overlay,
body.stm-webfam .joomla-service-card,
body.stm-webfam .stm-joomla-partner-badge,
body.stm-webfam .website-contact-item,
body.stm-webfam .website-icon,
body.stm-webfam .website-modal-overlay,
body.stm-webfam .website-service-card,
body.stm-webfam .stm-dev-badge,
body.stm-webfam .tech-badge,
body.stm-webfam .regional-badge,
body.stm-webfam .trust-item {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
@media (prefers-reduced-motion: reduce) {
body.stm-webfam *,
body.stm-webfam *::before,
body.stm-webfam *::after { animation: none !important; }
}
/* ---------- 3) KARTEN-ACCORDIONS (Desktop+Mobil, E3) -------------- */
/* .stm-js-Gate: ohne JS bleiben Listen offen. z-index 2 gegen die
::after-Overlay-Klickfalle der Karten (Lesson Shop-Familie). */
body.stm-webfam.stm-js .stm-acc-list { display: none; }
body.stm-webfam.stm-js .stm-acc-list.stm-acc-open { display: block; }
body.stm-webfam .stm-acc-toggle {
display: flex; align-items: center; gap: .5rem; width: 100%;
background: rgba(194,68,0,.08); color: #061b90;
border: 1px solid rgba(194,68,0,.35); border-radius: 10px;
padding: .65rem 1rem; font: 600 .95rem/1.2 'Inter',sans-serif;
cursor: pointer; text-align: left; margin: 0 0 .25rem;
}
body.stm-webfam .stm-acc-toggle .stm-acc-icon {
width: 22px; height: 22px; border-radius: 50%;
background: linear-gradient(135deg,#C24400,#ff7b2e); color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700; flex: 0 0 22px;
}
body.stm-webfam .stm-acc-toggle,
body.stm-webfam .stm-acc-list.stm-acc-open {
position: relative; z-index: 2;
}
body.stm-webfam.stm-js .pricing-features.stm-acc-list.stm-acc-open {
padding: 1rem 0; margin: .75rem 0;
}
/* ---------- 4) CLIP-PATTERN "erste N + alle anzeigen" ------------- */
/* mobil fuer alle Clips; FAQ (.stm-clip-faq) auch auf Desktop */
@media (max-width: 768px) {
body.stm-webfam.stm-js .stm-clip:not(.stm-open) .stm-clip-hide { display: none !important; }
}
body.stm-webfam.stm-js .stm-clip-faq:not(.stm-open) .stm-clip-hide { display: none !important; }
/* ---------- STM-MOREBTN-V2: "Alle N anzeigen" elegant (2026-08-15) ----------
Kundenbefund: "sehr eingepresst, steht so weit oben" - der Knopf klebte
mit 12 px unter dem Raster und trug als 480-px-Block die Anmutung eines
Formularfeldes. Neu: zentrierte Pille in Auto-Breite mit Luft nach oben,
Icon-Kreis im Hausverlauf (dieselbe Optik wie .stm-acc-icon). Das
Plus/Minus steckt jetzt im CSS und haengt an aria-expanded, deshalb
traegt das Label kein Zeichen mehr. */
body.stm-webfam .stm-morebtn {
display: flex; align-items: center; justify-content: center; gap: .62rem;
width: fit-content; min-width: min(100%, 15rem); max-width: min(100%, 27rem);
margin: clamp(1.9rem, 3.4vw, 2.9rem) auto .4rem;
padding: .8rem 1.35rem .8rem 1.6rem;
border: 1px solid rgba(6,27,144, .2);
border-radius: 999px;
background: #fff;
color: #061b90;
font-family: inherit; font-size: .97rem; font-weight: 600; line-height: 1.25;
text-align: center;
cursor: pointer;
box-shadow: 0 1px 2px rgba(10,22,70,.05), 0 14px 30px -22px rgba(6,27,144, .9);
transition: border-color .25s ease, box-shadow .25s ease, transform .2s ease, background-color .25s ease;
position: relative; z-index: 2;
-webkit-tap-highlight-color: transparent;
}
body.stm-webfam .stm-morebtn::after {
content: ""; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
background: linear-gradient(#fff,#fff) center/9px 1.7px no-repeat, linear-gradient(#fff,#fff) center/1.7px 9px no-repeat, linear-gradient(135deg,#C24400,#ff7b2e);
box-shadow: 0 5px 12px -5px rgba(194,68,0,.7);
transition: transform .3s ease;
}
body.stm-webfam .stm-morebtn[aria-expanded="true"]::after {
background: linear-gradient(#fff,#fff) center/9px 1.7px no-repeat, linear-gradient(135deg,#C24400,#ff7b2e);
}
body.stm-webfam .stm-morebtn:focus-visible { outline: 2px solid #061b90; outline-offset: 3px; }
body.stm-webfam .stm-morebtn:active { transform: scale(.985); }
@media (hover: hover) {
body.stm-webfam .stm-morebtn:hover { border-color: rgba(6,27,144, .45); background: #fbfcff; box-shadow: 0 2px 4px rgba(10,22,70,.06), 0 20px 34px -22px rgba(6,27,144, 1); transform: translateY(-1px); }
body.stm-webfam .stm-morebtn:hover::after { transform: scale(1.09); }
}
@media (min-width: 769px) {
/* v2.4.0 (2026-08-15): Bis hierher war auf dem Desktop nur die FAQ gekappt -
Vorteile (8), Projekte (4) und Referenzen (6 bzw. 9) standen komplett
offen, ihre Knoepfe auf display:none. Jetzt gilt die Kappung fuer ALLE
Clip-Raster, wie in der Shop-Familie seit v2.9.0. */
body.stm-webfam.stm-js .stm-clip:not(.stm-open) .stm-clip-hide { display: none !important; }
body.stm-webfam .stm-clip + .stm-morebtn { display: flex; }
body.stm-webfam .stm-morebtn { display: none; }
body.stm-webfam .stm-clip-faq + .stm-morebtn { display: flex; }
}
/* Reveal-Sicherung: Template-Observer laesst unter-Fold-Elemente auf
opacity:0 stehen — in Clip-/Accordion-Scopes hart sichtbar machen
(Muster stm-regional v1.0.1). */
body.stm-webfam .stm-clip.scroll-reveal,
body.stm-webfam .stm-clip .scroll-reveal,
body.stm-webfam .stm-acc-list .scroll-reveal {
opacity: 1 !important;
transform: none !important;
}
/* ---------- 5) SPRUNGLEISTE (mobil, JS-gebaut) -------------------- */
body.stm-webfam .stm-jumpnav {
display: flex; gap: .5rem; overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding: .6rem 1rem; margin: 0;
position: sticky; top: 0; z-index: 80;
background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.08);
scrollbar-width: none;
}
body.stm-webfam .stm-jumpnav::-webkit-scrollbar { display: none; }
body.stm-webfam .stm-jumpnav a {
flex: 0 0 auto; padding: .4rem .8rem; border-radius: 999px;
background: #f1f3f9; color: #061b90;
font-size: .85rem; font-weight: 600;
text-decoration: none; white-space: nowrap;
}
body.stm-webfam .stm-anchor { scroll-margin-top: 84px; }
@media (min-width: 769px) {
body.stm-webfam .stm-jumpnav { display: none; }
}
/* ---------- 6) PROZESS-SWIPE (mobil) ------------------------------ */
@media (max-width: 768px) {
body.stm-webfam .process-timeline {
display: flex !important;
overflow-x: auto; scroll-snap-type: x mandatory;
gap: 12px; padding: 4px 2px 14px; margin-top: 12px !important;
-webkit-overflow-scrolling: touch; scrollbar-width: none;
}
body.stm-webfam .process-timeline::-webkit-scrollbar { display: none; }
body.stm-webfam .process-step { flex: 0 0 78%; scroll-snap-align: center; }
body.stm-webfam .stm-swipe-hint {
display: flex; align-items: center; justify-content: center; gap: .4rem;
margin: 20px 16px 0; font: 600 .82rem/1.3 'Inter',sans-serif; color: #5a6a85;
}
body.stm-webfam .stm-swipe-dots { display: flex; gap: 6px; justify-content: center; margin-top: 10px; }
body.stm-webfam .stm-swipe-dots i { width: 8px; height: 8px; border-radius: 50%; background: #c9d2e0; transition: .2s; }
body.stm-webfam .stm-swipe-dots i.on { background: #C24400; width: 20px; border-radius: 5px; }
}
@media (min-width: 769px) {
body.stm-webfam .stm-swipe-hint,
body.stm-webfam .stm-swipe-dots { display: none; }
}
/* ---------- 7) FAQ-FIXES (Phantom-Padding + Kompakt) -------------- */
body.stm-webfam .faq-answer { padding-top: 0 !important; padding-bottom: 0 !important; }
body.stm-webfam .faq-item.active .faq-answer {
padding: 0 1.2rem 1.2rem !important;
max-height: 600px;
}
body.stm-webfam .faq-question { padding: .95rem 1.1rem; }
/* ---------- 8) HERO- & ABSTANDS-STRAFFUNG (mobil) ----------------- */
@media (max-width: 768px) {
body.stm-webfam .cms-hero,
body.stm-webfam .wordpress-hero,
body.stm-webfam .joomla-hero,
body.stm-webfam .website-hero {
min-height: 0 !important;
padding: 12px 0 36px !important;
}
body.stm-webfam section[class*="-section"],
body.stm-webfam section[class*="-services"],
body.stm-webfam section[class*="-benefits"],
body.stm-webfam section[class*="-process"],
body.stm-webfam section[class*="-cases"],
body.stm-webfam section[class*="-tech"],
body.stm-webfam section[class*="-portfolio"],
body.stm-webfam section[class*="-pricing"],
body.stm-webfam section[class*="-faq"],
body.stm-webfam section[class*="-testimonials"] { padding-top: 32px !important; padding-bottom: 32px !important; }
body.stm-webfam .cms-service-card,
body.stm-webfam .wordpress-service-card,
body.stm-webfam .joomla-service-card,
body.stm-webfam .website-service-card,
body.stm-webfam .benefit-card,
body.stm-webfam .pricing-card,
body.stm-webfam .process-step,
body.stm-webfam .testimonial-card,
body.stm-webfam .infographic-card { padding: 1.5rem 1.25rem !important; }
body.stm-webfam .pricing-card.featured { transform: none !important; }
body.stm-webfam .tech-grid,
body.stm-webfam .stats-grid,
body.stm-webfam .portfolio-stats {
grid-template-columns: repeat(2, 1fr) !important;
gap: .8rem !important;
}
body.stm-webfam .stat-card { padding: 1.25rem .75rem !important; }
body.stm-webfam .comments-wrapper { padding: 32px 16px !important; }
/* Joomla-Extras: Addons/Garantie/Regional-CTA straffen */
body.stm-webfam .pricing-addons { padding: 1.25rem 1rem !important; margin-top: 1.5rem !important; }
body.stm-webfam .pricing-guarantee { padding: 1.25rem 1rem !important; margin-top: 1.5rem !important; }
body.stm-webfam .regional-cta { padding: 1.25rem 1rem !important; }
}
/* ---------- 8b) DESKTOP-SEKTIONSRHYTHMUS (v2.3.2) ----------------- */
/* Kundenfeedback: Sektionen kleben auf Desktop aneinander (Regional →
CTA ohne Luft). Einheitliche 72px oben/unten auf allen Inhalts-
sektionen — klare, ruhige Grenzen; mobil bleibt die 32px-Kompaktlinie. */
@media (min-width: 769px) {
body.stm-webfam section[class*="-services"],
body.stm-webfam section[class*="-benefits"],
body.stm-webfam section[class*="-process"],
body.stm-webfam section[class*="-cases"],
body.stm-webfam section[class*="-tech"],
body.stm-webfam section[class*="-portfolio"],
body.stm-webfam section[class*="-pricing"],
body.stm-webfam section[class*="-faq"],
body.stm-webfam section[class*="-testimonials"],
body.stm-webfam section[class*="-regional"],
body.stm-webfam section[class*="-cta-section"],
body.stm-webfam section[class*="-infographic-section"],
body.stm-webfam section[class*="-references"] {
padding-top: 72px !important;
padding-bottom: 72px !important;
}
body.stm-webfam .stm-refs { padding: 72px 0 !important; }
body.stm-webfam .stm-reg-btn { margin-top: clamp(1.9rem, 3.4vw, 2.9rem); }
}
/* ---------- 9) REFERENZ-HEADER: Kicker + Projekt-Motive (E4) ------ */
/* case-type als Uppercase-Kicker UEBER grossem Titel (flex-order).
!important gegen den EIGENEN section-h3-Reset aus E2. Alle 4 Seiten
nutzen echte Kategorie-Typen (keine Ergebnis-Saetze). Header sind
gradient-dunkel (var(--stm-white)) -> weisses Wasserzeichen passt. */
body.stm-webfam .case-header { display: flex; flex-direction: column; padding: 2.25rem 2rem 2rem; }
body.stm-webfam .case-header h3 {
order: 2;
font-size: clamp(1.6rem, 2.6vw, 2.1rem) !important;
line-height: 1.15 !important;
font-weight: 800 !important;
letter-spacing: -.01em;
margin: 0 !important;
text-wrap: balance;
}
body.stm-webfam .case-header .case-type {
order: 1;
text-transform: uppercase;
font-size: .78rem !important;
letter-spacing: .12em;
font-weight: 700;
opacity: .85;
margin: 0 0 .6rem;
}
/* Motive: FA6-solid-Wasserzeichen, Text via z-index darueber,
pointer-events:none (Overlay-Lesson) */
body.stm-webfam .case-header h3,
body.stm-webfam .case-header .case-type { position: relative; z-index: 1; }
body.stm-webfam .case-header::before {
font-family: 'Font Awesome 6 Free'; font-weight: 900;
position: absolute; right: 1.1rem; bottom: -0.9rem;
font-size: clamp(4rem, 8vw, 5.5rem); line-height: 1;
color: rgba(255,255,255,.14);
pointer-events: none; z-index: 0;
}
body.stm-webfam .cms-cases .case-card:nth-child(1) .case-header::before { content: '\f6e3'; } /* Handwerk: Hammer */
body.stm-webfam .cms-cases .case-card:nth-child(2) .case-header::before { content: '\f0c0'; } /* Verein: Users */
body.stm-webfam .cms-cases .case-card:nth-child(3) .case-header::before { content: '\f07a'; } /* Shop: Cart */
body.stm-webfam .cms-cases .case-card:nth-child(4) .case-header::before { content: '\f0f1'; } /* Arztpraxis: Stethoskop */
body.stm-webfam .wordpress-cases .case-card:nth-child(1) .case-header::before { content: '\f1ad'; } /* Corporate: Building */
body.stm-webfam .wordpress-cases .case-card:nth-child(2) .case-header::before { content: '\f07a'; } /* WooCommerce: Cart */
body.stm-webfam .wordpress-cases .case-card:nth-child(3) .case-header::before { content: '\f19d'; } /* E-Learning: Absolvent */
body.stm-webfam .wordpress-cases .case-card:nth-child(4) .case-header::before { content: '\f1ea'; } /* News: Zeitung */
body.stm-webfam .joomla-cases .case-card:nth-child(1) .case-header::before { content: '\f1ad'; } /* Corporate: Building */
body.stm-webfam .joomla-cases .case-card:nth-child(2) .case-header::before { content: '\f0c0'; } /* Community: Users */
body.stm-webfam .joomla-cases .case-card:nth-child(3) .case-header::before { content: '\f19d'; } /* E-Learning: Absolvent */
body.stm-webfam .joomla-cases .case-card:nth-child(4) .case-header::before { content: '\f1ea'; } /* News: Zeitung */
body.stm-webfam .website-cases .case-card:nth-child(1) .case-header::before { content: '\f201'; } /* FinTech: Chart */
body.stm-webfam .website-cases .case-card:nth-child(2) .case-header::before { content: '\f21e'; } /* Telemedizin: Herzpuls */
body.stm-webfam .website-cases .case-card:nth-child(3) .case-header::before { content: '\f542'; } /* SaaS/PM: Diagramm */
body.stm-webfam .website-cases .case-card:nth-child(4) .case-header::before { content: '\f19d'; } /* Training: Absolvent */
/* Bekannte-Bugs-Checkliste: fixed-Hero-Hintergruende neutralisieren
(Repaint-Kosten mobil/iPad; hub/wp via background-Shorthand,
joomla explizit — indiv hat keins) */
body.stm-webfam .cms-hero,
body.stm-webfam .wordpress-hero,
body.stm-webfam .joomla-hero,
body.stm-webfam .website-hero { background-attachment: scroll !important; }
/* ---------- 10) SILO: Karten-Links, Entity-Intro, Badges (E5) ----- */
/* Statisches Markup in den Templates; hier nur Styling. z-index 2
ueberall gegen Karten-Overlays (Lesson 11 Shop-Familie). */
body.stm-webfam .stm-svc-link {
display: inline-block; margin-top: .9rem;
color: #C24400 !important; font-weight: 700;
text-decoration: none; position: relative; z-index: 2;
}
body.stm-webfam .stm-svc-link:hover { text-decoration: underline; text-underline-offset: 3px; }
body.stm-webfam .stm-web-intro {
text-align: center; max-width: 900px; margin: 0 auto 2rem;
font-size: 1rem; line-height: 1.7; color: #4a5568; padding: 0 1rem;
position: relative; z-index: 2;
}
body.stm-webfam .stm-web-intro a {
color: #C24400; font-weight: 600;
text-decoration: underline; text-underline-offset: 3px;
}
body.stm-webfam .stm-syscross { max-width: 1100px; margin: 2.5rem auto 0; padding: 0 1rem; }
body.stm-webfam .stm-syscross__intro {
text-align: center; max-width: 860px; margin: 0 auto 1.5rem;
font-size: 1rem; line-height: 1.6; color: #4a5568;
}
body.stm-webfam .stm-syscross__intro a {
color: #C24400; font-weight: 600;
text-decoration: underline; text-underline-offset: 3px;
}
body.stm-webfam .stm-syscross__row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
body.stm-webfam .stm-sysbadge {
display: flex; align-items: center; gap: .9rem;
flex: 0 1 420px; min-width: 280px;
background: #fff; border: 1px solid #e3e7ef; border-radius: 14px;
padding: 1rem 1.1rem; text-decoration: none !important;
box-shadow: 0 6px 18px -12px rgba(6,27,144,.25);
transition: transform .2s ease, box-shadow .2s ease;
position: relative; z-index: 2;
}
body.stm-webfam .stm-sysbadge:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -14px rgba(6,27,144,.35); }
body.stm-webfam .stm-sysbadge__logo {
width: 46px; height: 46px; border-radius: 12px; flex: 0 0 46px;
display: inline-flex; align-items: center; justify-content: center;
color: #fff; font: 800 1.35rem/1 'Space Grotesk','Inter',sans-serif;
}
body.stm-webfam .stm-sysbadge__logo--wp { background: linear-gradient(135deg,#207297,#4698c2); }
body.stm-webfam .stm-sysbadge__logo--joomla { background: linear-gradient(135deg,#c13514,#f75e06); }
body.stm-webfam .stm-sysbadge__logo--dev { background: linear-gradient(135deg,#4d1c9b,#7d53f8); font-size: .85rem; }
body.stm-webfam .stm-sysbadge__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.stm-webfam .stm-sysbadge__kicker {
font-size: .68rem; font-weight: 700; letter-spacing: .1em;
text-transform: uppercase; color: #8a94a6;
}
body.stm-webfam .stm-sysbadge__name { font-size: 1.02rem; font-weight: 800; color: #061b90; line-height: 1.25; }
body.stm-webfam .stm-sysbadge__sub { font-size: .85rem; color: #5a6a85; line-height: 1.35; }
body.stm-webfam .stm-sysbadge__arrow { margin-left: auto; color: #C24400; font-size: 1.25rem; font-weight: 700; flex: 0 0 auto; }
@media (max-width: 768px) {
body.stm-webfam .stm-syscross { margin-top: 1.75rem; }
body.stm-webfam .stm-sysbadge { flex-basis: 100%; }
}
/* ---------- 11) REFERENZEN-SEKTIONEN (Portfolio, E6 2026-08-13) --- */
/* Statisches Markup in den Templates (KI-Crawler lesen kein JS).
Kundenauftrag: aktuellste 15 Referenzen system-passend verteilt. */
body.stm-webfam .stm-refs { padding: 56px 0 64px; background: #f7f9fc; }
body.stm-webfam .stm-refs__wrap { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
body.stm-webfam .stm-refs__kicker {
text-align: center; text-transform: uppercase; letter-spacing: .14em;
font-size: .78rem; font-weight: 700; color: #C24400; margin-bottom: .4rem;
}
body.stm-webfam .stm-refs .cms-section-title,
body.stm-webfam .stm-refs .wordpress-section-title,
body.stm-webfam .stm-refs .joomla-section-title,
body.stm-webfam .stm-refs .website-section-title { text-align: center; margin-top: 0 !important; }
body.stm-webfam .stm-refs__sub {
text-align: center; max-width: 760px; margin: 0 auto 2.25rem;
font-size: 1.02rem; line-height: 1.6; color: #5a6a85;
}
body.stm-webfam .stm-refs__grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 1.5rem; align-items: stretch;
}
body.stm-webfam .stm-refs__grid--single { max-width: 760px; margin: 0 auto; grid-template-columns: 1fr; }
body.stm-webfam .stm-ref-card {
display: flex; flex-direction: column; background: #fff;
border: 1px solid #e5e9f2; border-radius: 16px; overflow: hidden;
box-shadow: 0 8px 24px -16px rgba(6,27,144,.25);
transition: transform .2s ease, box-shadow .2s ease;
}
body.stm-webfam .stm-ref-card:hover { transform: translateY(-4px); box-shadow: 0 18px 34px -18px rgba(6,27,144,.35); }
body.stm-webfam .stm-ref-card__imglink { display: block; aspect-ratio: 16 / 10; overflow: hidden; position: relative; z-index: 2; }
body.stm-webfam .stm-ref-card__imglink img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform .3s ease;
}
body.stm-webfam .stm-ref-card:hover .stm-ref-card__imglink img { transform: scale(1.04); }
body.stm-webfam .stm-ref-card__body { display: flex; flex-direction: column; gap: .55rem; padding: 1.25rem 1.25rem 1.4rem; flex: 1; }
body.stm-webfam .stm-ref-card__chip {
align-self: flex-start; font-size: .68rem; font-weight: 700;
letter-spacing: .09em; text-transform: uppercase;
background: #fdf6f3; color: #c24400;
border: 1px solid rgba(194,68,0,.25); border-radius: 999px;
padding: .28rem .7rem;
}
body.stm-webfam .stm-ref-card__title { font-size: 1.18rem !important; line-height: 1.3 !important; font-weight: 800 !important; color: #061b90; margin: 0 !important; }
body.stm-webfam .stm-ref-card__txt { font-size: .93rem; line-height: 1.62; color: #4a5568; margin: 0; }
body.stm-webfam .stm-ref-card__link {
margin-top: auto; padding-top: .35rem;
color: #C24400 !important; font-weight: 700; text-decoration: none;
position: relative; z-index: 2;
}
body.stm-webfam .stm-ref-card__link:hover { text-decoration: underline; text-underline-offset: 3px; }
body.stm-webfam .stm-refs__all { text-align: center; margin: 2.25rem 0 0; }
body.stm-webfam .stm-refs__all a {
display: inline-block; padding: .8rem 1.6rem;
border: 2px solid #061b90; border-radius: 10px;
color: #061b90; font-weight: 700; text-decoration: none;
position: relative; z-index: 2;
}
body.stm-webfam .stm-refs__all a:hover { background: #061b90; color: #fff; }
@media (max-width: 768px) {
body.stm-webfam .stm-refs { padding: 36px 0 44px; }
body.stm-webfam .stm-refs__grid { grid-template-columns: 1fr; gap: 1rem; }
}
/* ---------- STM-STORY-V1: Referenzen als Fliesstext (2026-08-17) ----------
Kundenwunsch: "Die Referenzbilder in einem Fliesstext integrieren anstelle
wie jetzt einfach nur Bild fuer Bild." Statt eines Kartenrasters jetzt
abwechselnd Bild/Text mit Ausgangslage, Umsetzung, Leistungen und Ergebnis.
Das alte .stm-ref-card-CSS bleibt stehen - /referenzen/ nutzt es weiter. */
body.stm-webfam .stm-stories { display: block; }
body.stm-webfam .stm-story {
display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
gap: clamp(1.8rem, 3vw, 3rem); align-items: center;
padding: clamp(2rem, 3.4vw, 3rem) 0; border-top: 1px solid #e3e8f2;
}
body.stm-webfam .stm-story:first-child { border-top: 0; padding-top: .25rem; }
body.stm-webfam .stm-story:nth-child(even) .stm-story__media { order: 2; }
body.stm-webfam .stm-stories--single .stm-story { max-width: 1000px; margin: 0 auto; }
body.stm-webfam .stm-story__media { margin: 0; min-width: 0; }
body.stm-webfam .stm-story__media a {
display: block; border-radius: 16px; overflow: hidden;
border: 1px solid #e3e8f2; background: #fff;
box-shadow: 0 20px 44px -26px rgba(6,27,144,.55);
position: relative; z-index: 2;
}
body.stm-webfam .stm-story__media img {
width: 100%; height: auto; display: block; aspect-ratio: 16 / 9;
object-fit: cover; object-position: top center; transition: transform .35s ease;
}
@media (hover: hover) {
body.stm-webfam .stm-story__media a:hover img { transform: scale(1.035); }
}
body.stm-webfam .stm-story__cap {
font-size: .82rem; line-height: 1.5; color: #77859b;
margin: .7rem .15rem 0; text-align: left;
}
body.stm-webfam .stm-story__body { display: flex; flex-direction: column; gap: .8rem; min-width: 0; }
body.stm-webfam .stm-story__chip {
align-self: flex-start; font-size: .68rem; font-weight: 700;
letter-spacing: .09em; text-transform: uppercase;
background: #fdf6f3; color: #c24400;
border: 1px solid rgba(194,68,0,.25); border-radius: 999px;
padding: .3rem .75rem;
}
/* Spezifitaet (0,4,1): die Familien-Templates setzen h3 per
'body.stm-agfam .-entwicklung-landingpage h3 {font-size:1.15rem!important}'
= (0,2,2) und haetten den Story-Titel sonst auf 18,4 px gedrueckt. */
body.stm-webfam .stm-refs .stm-stories .stm-story__title {
font-size: clamp(1.35rem, 2.1vw, 1.72rem) !important;
line-height: 1.28 !important; font-weight: 800 !important;
color: #061b90 !important; margin: 0 !important; letter-spacing: -.01em;
}
body.stm-webfam .stm-story__body p { font-size: .99rem; line-height: 1.72; color: #4a5568; margin: 0; }
body.stm-webfam .stm-story__lead { font-size: 1.05rem !important; line-height: 1.68 !important; color: #33405a !important; }
body.stm-webfam .stm-story__facts { list-style: none !important; margin: .2rem 0 0 !important; padding: 0 !important; display: grid; gap: .45rem; }
body.stm-webfam .stm-story__facts li {
position: relative; padding-left: 1.55rem; margin: 0 !important;
font-size: .94rem; line-height: 1.55; color: #4a5568; list-style: none !important;
}
body.stm-webfam .stm-story__facts li::before {
content: ""; position: absolute; left: 0; top: .52em;
width: 9px; height: 9px; border-radius: 50%;
background: linear-gradient(135deg,#C24400,#ff7b2e);
box-shadow: 0 3px 8px -3px rgba(194,68,0,.75);
}
body.stm-webfam .stm-story__result {
border-left: 3px solid #C24400; padding: .1rem 0 .1rem 1rem;
color: #33405a !important; font-size: .99rem !important; margin-top: .15rem !important;
}
body.stm-webfam .stm-story__result strong { color: #061b90; }
body.stm-webfam .stm-story__link {
align-self: flex-start; margin-top: .25rem;
color: #C24400 !important; font-weight: 700; text-decoration: none;
position: relative; z-index: 2;
}
body.stm-webfam .stm-story__link:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
body.stm-webfam .stm-story { grid-template-columns: 1fr; gap: 1.35rem; padding: 1.9rem 0; }
body.stm-webfam .stm-story:nth-child(even) .stm-story__media { order: 0; }
body.stm-webfam .stm-refs .stm-stories .stm-story__title { font-size: 1.28rem !important; }
body.stm-webfam .stm-story__lead { font-size: 1rem !important; }
}
/* Transparenz-Box (Joomla: viel Erfahrung, wenig zeigbare Referenzen) */
body.stm-webfam .stm-refs__note {
max-width: 860px; margin: 2rem auto 0;
background: #fff; border: 1px solid #e5e9f2; border-left: 4px solid #C24400;
border-radius: 14px; padding: 1.6rem 1.75rem;
box-shadow: 0 8px 24px -18px rgba(6,27,144,.25);
}
body.stm-webfam .stm-refs__note-kicker {
font-size: .68rem; font-weight: 700; letter-spacing: .12em;
text-transform: uppercase; color: #c24400; margin-bottom: .4rem;
}
body.stm-webfam .stm-refs__note h3 {
font-size: 1.3rem !important; line-height: 1.3 !important;
font-weight: 800 !important; color: #061b90; margin: 0 0 .6rem !important;
}
body.stm-webfam .stm-refs__note p { font-size: .97rem; line-height: 1.65; color: #4a5568; margin: 0 0 .75rem; }
body.stm-webfam .stm-refs__note p:last-child { margin-bottom: 0; }
body.stm-webfam .stm-refs__note a { color: #C24400; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; position: relative; z-index: 2; }
body.stm-webfam .stm-refs__note-stats { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.1rem 0 1rem; }
body.stm-webfam .stm-refs__note-stat {
flex: 1 1 180px; background: #f7f9fc; border: 1px solid #e5e9f2;
border-radius: 10px; padding: .8rem 1rem; text-align: center;
}
body.stm-webfam .stm-refs__note-stat b { display: block; font-size: 1.35rem; font-weight: 800; color: #061b90; line-height: 1.2; }
body.stm-webfam .stm-refs__note-stat span { font-size: .8rem; color: #5a6a85; line-height: 1.3; display: block; margin-top: .15rem; }
/* ---------- 9) v2.4.0 (2026-08-15): Satzspiegel und Raster ----------------
Kundenwunsch: dasselbe Konzept wie auf den Shop-Seiten. 1180 px ist das
Hausmass von der Startseite (USP-/Prozess-Block). Mit dem schmaleren
Rahmen muessen die Raster neu gesetzt werden, sonst brechen sie krumm um -
das war in der Shop-Familie der teuerste Nebeneffekt. */
@media (min-width:769px){
body.stm-webfam .container,
body.stm-webfam .container-wide,
body.stm-webfam .faq-container{
max-width:1180px !important; margin-left:auto !important; margin-right:auto !important;
}
}
@media (min-width:1025px){
/* Vier Vorteile in EINER Reihe, dazu weniger Innenabstand: bei 40 px
blieben von 256 px Kartenbreite nur 176 px Text. */
body.stm-webfam .benefits-grid{ grid-template-columns:repeat(4,1fr) !important;
padding-left:0 !important; padding-right:0 !important; }
body.stm-webfam .benefit-card{ padding:26px 24px !important; }
body.stm-webfam .benefit-card h3,
body.stm-webfam .benefit-card h4{ font-size:17px !important; line-height:1.35 !important; margin-bottom:8px !important; }
body.stm-webfam .benefit-card p{ font-size:15.5px !important; line-height:1.6 !important; }
/* Sechs Prozess-Schritte gehen als 3x2 glatt auf. */
body.stm-webfam .process-timeline{ grid-template-columns:repeat(3,1fr) !important; }
/* tech-grid stand auf zehn Spalten a 156 px - 92 px Textbreite. Fuenf
Spalten (10 = 2 volle Reihen) und halbierter Innenabstand. */
body.stm-webfam .tech-grid{ grid-template-columns:repeat(5,1fr) !important; }
body.stm-webfam .tech-grid > *{ padding:16px !important; }
/* v2.4.1: Die drei Preis-Karten standen auf zwei Unterseiten in zwei
Spalten (dritte Karte allein). Einheitlich drei - wie in der
Shop-Familie seit v2.9.1. */
body.stm-webfam .pricing-cards{ grid-template-columns:repeat(3,1fr) !important; align-items:start !important; }
/* v2.4.1: Services-Karten hatten 48 px Innenabstand bei 320 px Breite -
nur 224 px Text. */
body.stm-webfam .cms-services-grid > *,
body.stm-webfam .wordpress-services-grid > *,
body.stm-webfam .joomla-services-grid > *,
body.stm-webfam .website-services-grid > *{ padding:28px 26px !important; }
/* v2.4.1: Das Referenzen-Raster lief mit eigener Maximalbreite (1160 px)
aus dem 1120er Satzspiegel heraus und stand seitlich vor. */
body.stm-webfam .stm-refs__grid{ max-width:100% !important; }
}
@media (min-width:769px) and (max-width:1024px){
body.stm-webfam .benefits-grid{ grid-template-columns:repeat(2,1fr) !important; }
body.stm-webfam .process-timeline{ grid-template-columns:repeat(2,1fr) !important; }
}
/* ---------- STM-CARDFOOT-V1: KARTENFUESSE AUF EINE LINIE (2026-08-15) ----------
Kundenwunsch: "Bitte ueberall auf allen Seiten die Buttons auf eine
Linie bringen." Die Karten einer Reihe sind gleich hoch, der Toggle
bzw. das Dauer-Schild rutschte aber mit der Textlaenge nach oben.
Karte = Spalten-Flexbox, Fuss = margin-top:auto. !important ist
Pflicht: die eigene .stm-acc-toggle-Regel traegt (0,2,1) und setzt
margin:0 - ohne !important bleibt der Fuss stehen. */
body.stm-webfam .stm-flexcard { display: flex !important; flex-direction: column !important; height: 100% !important; }
body.stm-webfam .stm-flexcard > .stm-flexcard-foot { margin-top: auto !important; }
body.stm-webfam .stm-flexcard > .stm-flexcard-badge { align-self: flex-start !important; }
/* Preis-Karten: dafuer muss die Reihe erst auf gleiche Hoehe gehen
(stand auf align-items:start). Und die 1,05-Skalierung der Beliebt-
Karte verschoebe deren Knopfzeile systematisch um 5 % - sie faellt
weg, die Hervorhebung tragen Rahmen, Schatten und Banderole. */
body.stm-webfam .pricing-cards { align-items: stretch !important; }
body.stm-webfam .pricing-card.featured { transform: none !important; }
/* ---------- STM-CASEICON-V1: REFERENZ-ICONS IM CI (2026-08-15) ----------------
Kundenbefund: "Die Icons stehen zu nah an dem jeweiligen Wort und
sollen auch im CI orange blau und etwas groesser sein."
Vorher: 24-px-Kreis im seitenweise wechselnden Themen-Verlauf (auf
Joomla sogar drei Farben untereinander), 8 px Luft zum Wort, Label in
einem Blaugruen, das nicht das CI-Blau ist.
Jetzt: 30-px-Kreis im CI-Orange-Verlauf - dasselbe Icon-Vokabular wie
die Plus-Kreise der Knoepfe und Karten-Akkordeons -, 18 px Luft und
Label im CI-Blau. top:-1px setzt den 30-px-Kreis optisch exakt auf die
Mitte der 28-px-Labelzeile (gemessen: Versatz 0). */
body.stm-webfam .case-challenge,
body.stm-webfam .case-solution,
body.stm-webfam .case-result { padding-left: 3rem !important; }
body.stm-webfam .case-challenge::before,
body.stm-webfam .case-solution::before,
body.stm-webfam .case-result::before {
width: 30px !important; height: 30px !important; line-height: 30px !important;
top: -1px !important;
font-size: .82rem !important;
background: linear-gradient(135deg, #C24400, #ff7b2e) !important;
color: #fff !important;
box-shadow: 0 5px 12px -5px rgba(194,68,0,.65) !important;
}
body.stm-webfam .case-label { color: #001889 !important; }
@media (max-width: 768px) {
/* Schmale Karten: Kreis bleibt, die Luft wird eine Spur knapper. */
body.stm-webfam .case-challenge,
body.stm-webfam .case-solution,
body.stm-webfam .case-result { padding-left: 2.75rem !important; }
}
/* ======= Fix: Top-Bar & Header overflow für Dropdown ======= */
.top-bar,
.top-bar .left-widgets,
.top-bar .left-widgets.mini-widgets,
.top-bar .mini-widgets,
.top-bar .top-bar-bg {
overflow: visible !important;
}
/* Top-Bar muss über der Hauptnavigation liegen */
.top-bar {
position: relative;
z-index: 1000002 !important;
}
/* The7: Masthead/Header darf Dropdown nicht clippen */
.masthead,
.dt-header-container,
#masthead {
overflow: visible !important;
}
/* ======= Top-Bar Account Link — Wie Phone/E-Mail ======= */
/* Der Link selbst — gleicher Look wie .mini-contacts */
.stm-tb-account {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0 12px;
font-size: inherit;
line-height: inherit;
color: inherit !important;
text-decoration: none !important;
cursor: pointer;
white-space: nowrap;
vertical-align: middle;
}
.stm-tb-account:hover {
opacity: .8;
}
/* Wenn Dropdown offen: keine Opacity auf Parent, sonst wird Dropdown durchsichtig */
.stm-tb-account[aria-expanded="true"],
.stm-tb-account[aria-expanded="true"]:hover {
opacity: 1 !important;
}
.stm-tb-account .stm-tb-sep {
margin-right: 4px;
opacity: .4;
}
.stm-tb-account .stm-tb-icon {
font-size: 1em;
line-height: 1;
}
.stm-tb-account .stm-tb-caret {
font-size: .65em;
opacity: .6;
transition: transform .2s;
}
.stm-tb-account[aria-expanded="true"] .stm-tb-caret {
transform: rotate(180deg);
}
/* ======= Dropdown (nur eingeloggt) ======= */
.stm-tb-dropdown {
position: absolute;
top: 100%;
left: 0;
margin-top: 8px;
background: #fff;
border-radius: 14px;
box-shadow: 0 20px 50px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.05);
min-width: 260px;
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: all .22s ease;
z-index: 1000001;
overflow: hidden;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.stm-tb-dropdown.stm-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Dropdown Header */
.stm-tb-dd-head {
background: linear-gradient(135deg, #001889 0%, #003bb5 100%);
color: #fff;
padding: 18px 20px;
}
.stm-tb-dd-head strong {
display: block;
font-size: 1rem;
margin-bottom: 2px;
}
.stm-tb-dd-head small {
font-size: .8rem;
opacity: .75;
}
/* Dropdown Links */
.stm-tb-dd-links { padding: 6px 0; }
.stm-tb-dd-link {
display: flex !important;
align-items: center;
gap: 10px;
padding: 11px 20px;
color: #374151 !important;
text-decoration: none !important;
font-size: .9rem;
font-weight: 500;
transition: background .15s, color .15s;
}
.stm-tb-dd-link:hover {
background: #f1f5f9;
color: #001889 !important;
}
.stm-tb-dd-link span:first-child {
font-size: 1.1rem;
width: 22px;
text-align: center;
flex-shrink: 0;
}
.stm-tb-dd-sep {
height: 1px;
background: #f1f5f9;
margin: 4px 16px;
}
.stm-tb-dd-logout {
color: #dc2626 !important;
}
.stm-tb-dd-logout:hover {
background: #fef2f2 !important;
color: #dc2626 !important;
}
/* ======= Mobile: Floating Account Button ======= */
/* Die Top-Bar ist auf Mobile meist ausgeblendet → eigener Button */
.stm-mobile-account {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
z-index: 999999;
width: 50px;
height: 50px;
background: linear-gradient(135deg, #001889 0%, #003bb5 100%);
color: #fff !important;
border-radius: 50%;
align-items: center;
justify-content: center;
font-size: 1.2rem;
text-decoration: none !important;
box-shadow: 0 4px 20px rgba(0,24,137,.4);
transition: transform .2s, box-shadow .2s;
border: none;
cursor: pointer;
display:none !important;
}
.stm-mobile-account:hover {
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(0,24,137,.5);
}
/* Desktop: Top-Bar visible → hide mobile button */
@media (min-width: 1025px) {
.stm-mobile-account { display: none !important; }
}
/* Mobile/Tablet: Top-Bar hidden → show mobile button */
@media (max-width: 1024px) {
.stm-mobile-account { display: flex; }
}
/* ======= Verstecke den Link solange er noch nicht in die Top-Bar gemoved wurde ======= */
#stm-tb-account-source { display: none; }
.stm-opc-faq-section div[style*="rgba(255,255,255,0.10)"]{background:rgba(255,255,255,0.16) !important;border-color:rgba(255,255,255,0.30) !important;}.stm-opc-faq-section div[style*="rgba(255,255,255,0.10)"] p strong{color:#ffffff !important;}.stm-opc-faq-section div[style*="rgba(255,255,255,0.10)"] p span{color:#e2ecfb !important;}
.ilj-link-preview {
width: 360px !important;
min-width: 360px !important;
max-width: 360px !important;
display: grid !important;
grid-template-columns: 100px 1fr !important;
grid-template-rows: auto 1fr !important;
gap: 0 14px !important;
border-radius: 8px !important;
box-shadow: 0 8px 30px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08) !important;
background: #fff !important;
padding: 14px !important;
overflow: hidden !important;
}
.ilj-link-preview .ilj-link-preview-featured-image {
grid-column: 1 !important;
grid-row: 1 / -1 !important;
width: 100px !important;
height: 100px !important;
object-fit: cover !important;
border-radius: 6px !important;
align-self: start !important;
margin: 0 !important;
}
.ilj-link-preview .ilj-link-preview-title {
grid-column: 2 !important;
grid-row: 1 !important;
display: block !important;
font-size: 14px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
color: #1a1a1a !important;
margin: 0 0 6px 0 !important;
}
.ilj-link-preview .ilj-link-preview-excerpt {
grid-column: 2 !important;
grid-row: 2 !important;
font-size: 13px !important;
line-height: 1.5 !important;
color: #555 !important;
text-align: left !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
display: -webkit-box !important;
-webkit-line-clamp: 4 !important;
-webkit-box-orient: vertical !important;
}
/* Die Flaeche waechst nur noch mit ihrem Inhalt. min-height:0 ist noetig, weil ein
Flex-Element sonst nicht unter seine Inhaltsgroesse schrumpfen darf - bei langen
Gespraechen wuerde es sonst das Panel sprengen statt zu rollen. */
#stmJmPanel #stmJmMsgs {
flex: 0 1 auto;
min-height: 0;
}
/* Den frei gewordenen Platz uebernimmt der Chip-Block. Das haelt einerseits die
Eingabezeile am Panelboden und vermeidet andererseits eine sichtbare Kante: Nachrichten
und Chips liegen auf #f7f8fb, das Panel selbst ist weiss - ohne diese Regel endete das
Grau mitten im Fenster. align-content haelt die Chip-Zeilen dabei oben. */
#stmJmPanel #stmJmChips {
flex: 1 1 auto;
align-content: flex-start;
border-top: 0;
padding-top: 4px;
}
/* Ueberschrift ueber den Fragen, in Oles Sprache. Bewusst als ::before am Container:
renderChips() setzt bei jedem Rendern chipsEl.innerHTML = '' - ein echtes Kind waere
sofort wieder weg. :not(:empty) sorgt dafuer, dass die Zeile verschwindet, sobald
keine Fragen mehr offen sind (geklickte Chips werden nicht neu eingehaengt). */
/* Umlaute stehen hier direkt als UTF-8. CSS-Escapes waeren eine Falle: "\00fc\00fcd"
frisst das d, weil es ein gueltiges Hex-Zeichen ist und die Sequenz verlaengert -
auf dem Schirm stand "L�OK" statt "Lueued ok". */
#stmJmPanel #stmJmChips:not(:empty)::before {
content: "Dat fraagt de Lüüd ümmer weer";
flex: 0 0 100%;
margin: 2px 0 8px;
font-size: 12.5px;
font-weight: 600;
color: #7c8794;
line-height: 1.35;
}
/* Der GTranslate-Proxy uebersetzt nur DOM-Text, kein CSS-content. Fuer die englische
Fassung der Seite deshalb eine eigene Zeile - html[lang="en"] setzt der Proxy selbst. */
html[lang="en"] #stmJmPanel #stmJmChips:not(:empty)::before {
content: "Folks round here often ask this";
}
#stmJmSatz{display:none}
@media (max-width:767px), (max-height:480px) and (hover:none){
html body #stmJmBtn{
top:auto!important;left:0!important;right:0!important;margin:0 auto!important;
bottom:var(--stm-ole-unten, calc(15px + env(safe-area-inset-bottom, 0px)))!important;
transform:none!important;width:max-content!important;max-width:calc(100vw - 132px)!important;
height:44px!important;min-height:0!important;box-sizing:border-box!important;
flex-direction:row!important;align-items:center!important;gap:8px!important;
padding:0 14px 0 8px!important;
background:#061B90!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:12px!important;
box-shadow:0 10px 26px -12px rgba(0,12,66,.65)!important;
transition:bottom .2s ease!important;
}
/* unsichtbar, bis das Footer-Skript den Satz eingehaengt hat (sonst Sprung um die halbe Breite) */
html body #stmJmBtn:not(.stm-ole-mobil-bereit){visibility:hidden!important}
html body #stmJmBtn:hover,html body #stmJmBtn:active{transform:none!important}
html body #stmJmBtn .stm-jm-lh{margin:0!important;flex:none}
html body #stmJmBtn .stm-jm-lh svg{width:16px!important;height:22px!important}
html body #stmJmBtn .stm-jm-ava{width:32px!important;height:32px!important;border-width:1.5px!important}
html body #stmJmBtn .stm-jm-ava svg{width:24px!important;height:24px!important}
html body #stmJmBtn .stm-jm-tx,html body #stmJmBtn .stm-jm-dot{display:none!important}
html body #stmJmBtn .stm-jm-satz{display:flex;flex-direction:column;align-items:flex-start;min-width:0;
text-align:left;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
letter-spacing:0;text-transform:none}
html body #stmJmBtn .stm-jm-satz b{display:block;font-size:13px;line-height:16px;font-weight:700;color:#fff;white-space:nowrap}
html body #stmJmBtn .stm-jm-satz span{display:block;max-width:100%;font-size:12px;line-height:15px;font-weight:500;
color:rgba(255,255,255,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Die allgemeine Grussblase entfaellt mobil - der Satz in der Leiste uebernimmt ihre Aufgabe.
Die Ankunftsblase nach einer Push-Mitteilung (stm-ole-push-angebot.php) bleibt: sie traegt
echten Kontext ("Sie folgen meiner Meldung ...") und steht jetzt ueber der Leiste. */
html body #stmJmGreet:not([data-stm-ankunft]){display:none!important}
html body #stmJmGreet[data-stm-ankunft]{top:auto!important;left:16px!important;right:16px!important;
margin:0 auto!important;max-width:360px!important;transform:none!important;border-radius:12px!important;
bottom:calc(var(--stm-ole-unten, calc(15px + env(safe-area-inset-bottom, 0px))) + 54px)!important}
}
@media (max-width:350px){
html body #stmJmBtn .stm-jm-satz span{display:none}
}
.dt-btn:not(.btn-light):not(.light-bg-btn):not(.outline-btn):not(.outline-bg-btn):not(.btn-custom-style), .give-btn.give-btn-reveal, .give-submit.give-btn, .mec-event-footer .mec-booking-button {
background: #f65600;
background: -webkit-linear-gradient();
background: linear-gradient();
display: none;
}
.product .summary.entry-summary .price, .product-category .woo-content-container > a h3, .product-category .woocom-list-content > a h3, #customer_login h2 {
font: var(--the7-h1-font);
text-transform: var(--the7-h4-text-transform);
}
/* ============================================
SELF-HOSTED FONTS – Space Grotesk + Inter
Kein Google Fonts Call, DSGVO-konform
============================================ */
/* Space Grotesk – Überschriften (Variable Font, 500-700) */
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 500 700;
font-display: swap;
src: url('/wp-content/themes/storetown/fonts/space-grotesk-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 500 700;
font-display: swap;
src: url('/wp-content/themes/storetown/fonts/space-grotesk-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter – Fließtext (Variable Font, 400-700) */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('/wp-content/themes/storetown/fonts/inter-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('/wp-content/themes/storetown/fonts/inter-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ============================================
GLOBALE TYPOGRAFIE
!important nötig, da Parent-Theme (Flavor)
und custom.css Cambay mit !important setzen
============================================ */
/* === FONT-FAMILY: Global (ohne Farbe/Größe!) === */
body,
p,
li,
td,
th,
label,
input,
textarea,
select {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}
/* Überschriften: Space Grotesk (global) */
h1, h2, h3, h4, h5, h6,
.entry-title,
.entry_title,
.post-title,
.page-title,
.widget-title,
.storetown-section-title,
.storetown-blog-title a,
.content h1, .content h2, .content h3,
.content h4, .content h5, .content h6,
h1.entry_title, h2.entry_title,
.dt-accordion h2,
.wpb_accordion_header > a,
.entry_title.h2-size,
.h1-size, .h2-size, .h3-size,
.h4-size, .h5-size, .h6-size {
font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
font-weight: 700 !important;
line-height: 1.2 !important;
letter-spacing: -0.02em !important;
}
/* Semi-Bold für H3-H6 */
h3, h4, h5, h6,
.content h3, .content h4, .content h5, .content h6,
.h3-size, .h4-size, .h5-size, .h6-size {
font-weight: 600 !important;
}
/* Navigation & UI: Inter Medium */
nav a,
.menu a,
.main-nav a,
.dt-mobile-menu-icon,
button,
.btn,
.button,
.storetown-blog-link {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
font-weight: 500 !important;
}
/* Fallback font-display */
@font-face { font-display: swap !important; }
/* ============================================
MAGAZIN-STYLE – NUR im Content-Bereich
Betrifft nicht Header, Navigation, Footer
============================================ */
/* === AUSSCHLUSS: Related Posts, Sidebar, Navigation ===
.post-content innerhalb von .single-related-posts NICHT stylen */
/* === BREITERER CONTENT-BEREICH auf Blog-Posts ===
STM-CAPTION-RASTER-V1 (22.09.2026): minmax(0, 1fr) statt 1fr - das ist kein
Schoenheitsfehler, sondern die Absicherung des ganzen Rasters.
Ein blosses 1fr ist implizit minmax(AUTO, 1fr), und dieses auto-Minimum ist die
Mindestbreite des Inhalts. Ein einziges zu breites Element zieht die Textspalte
damit auf, und weil die Sidebar mit festen 320 px danebensteht, wird sie aus dem
Fenster geschoben - sie wird nicht umgebrochen, sondern abgeschnitten.
Genau das ist passiert: WordPress rendert aus [caption width="1200"] ein
. Das mitgelieferte max-width:100%
rettet das NICHT, weil Prozentwerte bei der Mindestbreiten-Rechnung unbestimmt
sind und dort nicht greifen. Gemessen bei 1900 px Fenster: Spur 1240 statt
993 px, rechte Kante der Sidebar bei x=1920 - 20 px ausserhalb des Fensters.
Betroffen war genau 1 von 143 Beitraegen (57605; alle anderen Unterschriften
liegen bei 466-524 px) - die Schwaeche des Rasters galt aber fuer alle.
Mit minmax(0, 1fr) faellt das auto-Minimum weg: die Spalte bleibt bei 993 px,
max-width:100% klemmt die Unterschrift auf die Spaltenbreite, und KEIN Inhalt
(Tabelle, Codeblock, iframe, Bild) kann die Sidebar je wieder hinausschieben.
Geprueft: die schmalen Unterschriften der uebrigen Beitraege bleiben unveraendert
bei 398/524 px - deshalb steht hier bewusst KEINE eigene wp-caption-Regel. */
body.single-post .wf-container-main {
max-width: 1380px !important;
width: 1380px !important;
grid-template-columns: minmax(0, 1fr) 320px !important;
/* STM-MITTE-V1 (22.09.2026): NICHT `margin: 0 auto`. Der Block ist mit
1380 px breiter als der Innenraum seines Elternteils (.wf-wrap:
1400 px minus 2x50 px Innenabstand = 1300 px). Bei negativem Restraum
werden beide auto-Raender zu 0, und die vollen 80 px Differenz landen
rechts - der Inhalt sass dadurch 80 px zu weit rechts (gemessen bei
1900 px: linker Rand 293, rechter 212). Die Prozentangabe rechnet
gegen die Elternbreite: (1300 - 1380) / 2 = -40 px je Seite, also
gleichmaessig verteilt - und bleibt richtig, falls .wf-wrap je
eine andere Breite bekommt. Unter 1461 px passt die Breite wieder
in den Elternteil, dort gilt weiter `auto` (siehe Media Query). */
margin: 0 calc((100% - 1380px) / 2) !important;
}
@media (max-width: 1460px) {
body.single-post .wf-container-main {
max-width: calc(100% - 80px) !important;
width: calc(100% - 80px) !important;
/* Hier passt der Block in den Elternteil - `auto` zentriert korrekt,
der calc-Wert von oben waere falsch. Gilt auch unter 1024 px. */
margin: 0 auto !important;
}
}
@media (max-width: 989px) { /* STM-SPALTE-990-V1: war 1024px, The7-Raster beginnt bei 990 px */
body.single-post .wf-container-main {
grid-template-columns: minmax(0, 1fr) !important;
width: 100% !important;
max-width: 100% !important;
}
}
/* === MAGAZIN: Content-Spalte als "Seite" hervorheben === */
body.single-post .entry-content,
body.single-post article.single-postlike > .post-content {
padding-right: 30px !important;
}
/* Motto/Farewell-Text unter der Autorenbox — eleganter */
body.single-post .premium-author-box + p[style*="italic"],
body.single-post .premium-author-box + p > em {
font-size: 14px !important;
color: #888 !important;
}
/* Post-Navigation (Zurück/Nächstes) ausblenden */
nav.navigation.post-navigation {
display: none !important;
}
/* Fließtext im Content — Magazin-Typografie */
.entry-content,
.entry-content p,
.entry-content li,
.entry-content td,
.entry-content th,
/* ⚠️ Kein nacktes `span` mehr (10.09.2026, Jans Auftrag): `.entry-content span`
traf JEDEN Span im Inhalt - auch den Text in Knoepfen und eingebetteten
Bausteinen. Mit dem !important dieser Regel brach das deren Vererbung;
der Knopftext des SEO-Werkzeugs stand dadurch auf 1,1:1. Spans nur noch
in echten Textelementen: der Fliesstext behaelt seine Typografie, die
Bausteine bekommen ihre eigene Gestaltung zurueck. */
.entry-content p span,
.entry-content li span,
.entry-content td span,
.entry-content th span,
.entry-content h1 span,
.entry-content h2 span,
.entry-content h3 span,
.entry-content h4 span,
.entry-content blockquote span,
article.single-postlike > .post-content,
article.single-postlike > .post-content p,
#content > .content p,
#content > .content li,
#content > .content p span,
#content > .content li span {
color: #2d2d2d !important;
font-size: 18px !important;
line-height: 1.85 !important;
letter-spacing: -0.01em !important;
}
/* Absatzabstand — mehr Luft wie in Print-Magazinen */
.entry-content p,
article.single-postlike > .post-content p,
#content > .content p {
margin-bottom: 1.6em !important;
}
/* Lead / Intro – Erster Absatz größer + leicht abgesetzt */
.entry-content > p:first-of-type,
article.single-postlike > .post-content > p:first-of-type {
font-size: 20px !important;
line-height: 1.75 !important;
color: #1a1a1a !important;
font-weight: 400 !important;
}
/* === DROP CAP — Magazin-Initiale (per JS-Klasse gesetzt) === */
.stm-drop-cap::first-letter {
float: left !important;
font-size: 4.2em !important;
line-height: 0.8 !important;
font-weight: 700 !important;
color: #C24400 !important;
margin: 0.05em 0.12em 0 0 !important;
padding: 0 !important;
font-family: Georgia, 'Times New Roman', serif !important;
}
/* Video/Embed im Content – max. Breite begrenzen */
.entry-content .wp-video,
.entry-content video,
.entry-content .mejs-container,
.entry-content iframe,
.entry-content embed,
.entry-content object {
max-width: 100% !important;
width: 100% !important;
height: auto !important;
}
.entry-content video {
max-width: 100% !important;
height: auto !important;
}
/* Überschriften im Content – Farbe */
.entry-content h1, .entry-content h2,
.entry-content h3, .entry-content h4,
.entry-content h5, .entry-content h6,
#content > .content h1, #content > .content h2,
#content > .content h3, #content > .content h4 {
color: #1a1a1a !important;
}
/* H2 im Content – Premium-Magazin-Überschrift
Keine Trennlinien, keine Striche oben. Sektions-Trennung rein über Weißraum.
Der orange Akzent-Strich ::after unter der H2 bleibt als einziges Designelement. */
.entry-content h2,
article.single-postlike > .post-content h2,
#content > .content h2 {
margin-top: 2.8em !important;
margin-bottom: 0.7em !important;
padding-top: 0 !important;
padding-bottom: 0.4em !important;
border: none !important;
display: block !important;
position: relative !important;
font-size: 1.6em !important;
font-weight: 700 !important;
letter-spacing: -0.02em !important;
color: #1a1a1a !important;
overflow: hidden !important;
}
.entry-content h2::after,
article.single-postlike > .post-content h2::after,
#content > .content h2::after {
content: '' !important;
display: block !important;
width: 50px !important;
height: 3px !important;
background: #C24400 !important;
margin-top: 0.35em !important;
border-radius: 2px !important;
}
/* H3 im Content – blaue Linie links */
.entry-content h3,
article.single-postlike > .post-content h3,
#content > .content h3 {
margin-top: 2em !important;
margin-bottom: 0.6em !important;
padding-left: 14px !important;
border-left: 4px solid #001889 !important;
color: #001889 !important;
}
/* === FAQ-Sektion: Überschriften als Fließtext ohne Akzent-Linien === */
/* H2 in FAQ – kein oranger Strich, weniger Abstand */
[class*="faq-"][class*="-section"] h2 {
margin-top: 0 !important;
margin-bottom: 0.4em !important;
padding-bottom: 0 !important;
border-bottom: none !important;
font-size: 1.4em !important;
}
[class*="faq-"][class*="-section"] h2::after {
display: none !important;
}
/* H3 in FAQ-Items – kein blauer Strich links, kompakter Fließtext-Stil */
[class*="faq-"][class*="-item"] h3 {
margin-top: 0 !important;
margin-bottom: 0.3em !important;
padding-left: 0 !important;
border-left: none !important;
color: #1a1a1a !important;
font-size: 1.1em !important;
font-weight: 600 !important;
}
/* Strong/Bold im Content */
.entry-content strong,
.entry-content b,
article.single-postlike > .post-content strong,
article.single-postlike > .post-content b,
#content > .content strong,
#content > .content b {
font-weight: 650 !important;
color: #1a1a1a !important;
}
/* Links im Content – Magazin-Style (NICHT in Related Posts) */
.entry-content a:not(.btn):not(.button),
article.single-postlike > .post-content a:not(.btn):not(.button),
#content > .content a:not(.btn):not(.button) {
color: #C24400 !important;
text-decoration: underline !important;
text-decoration-color: rgba(194, 68, 0, 0.3) !important;
text-underline-offset: 3px !important;
text-decoration-thickness: 2px !important;
transition: all 0.2s ease !important;
}
.entry-content a:not(.btn):not(.button):hover,
article.single-postlike > .post-content a:not(.btn):not(.button):hover,
#content > .content a:not(.btn):not(.button):hover {
color: #001889 !important;
text-decoration-color: #001889 !important;
}
/* Listen im Content */
.entry-content ul li,
.entry-content ol li,
article.single-postlike > .post-content ul li,
article.single-postlike > .post-content ol li {
margin-bottom: 0.5em !important;
padding-left: 0.3em !important;
}
/* Blockquote – Magazin-Zitat */
.entry-content blockquote,
article.single-postlike > .post-content blockquote {
border-left: 4px solid #C24400 !important;
background: linear-gradient(135deg, rgba(0, 24, 137, 0.03) 0%, rgba(194, 68, 0, 0.03) 100%) !important;
padding: 1.5em 2em !important;
margin: 2em 0 !important;
border-radius: 0 12px 12px 0 !important;
font-size: 18px !important;
font-style: italic !important;
color: #1a1a1a !important;
line-height: 1.7 !important;
}
/* === BILDER IM CONTENT – Magazin-Integration === */
/* Alle Bilder im Content — elegante Magazin-Einbettung */
.entry-content img,
article.single-postlike > .post-content img,
#content > .content img {
border-radius: 10px !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
margin-top: 1.5em !important;
margin-bottom: 0.5em !important;
transition: box-shadow 0.4s ease !important;
}
/* Hover — dezent, kein Verschieben */
.entry-content img:hover,
article.single-postlike > .post-content img:hover,
#content > .content img:hover {
box-shadow: 0 6px 28px rgba(0, 0, 0, 0.12) !important;
}
/* WordPress Bild-Captions (wp-caption / wp-block-image) */
.entry-content .wp-caption,
.entry-content figure.wp-block-image,
.entry-content figure,
article.single-postlike > .post-content .wp-caption,
article.single-postlike > .post-content figure,
#content > .content .wp-caption,
#content > .content figure {
background: linear-gradient(135deg, #f8f9fa 0%, #f0f1f3 100%) !important;
border-radius: 14px !important;
padding: 12px 12px 8px 12px !important;
margin: 2em auto !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
border: 1px solid rgba(0, 24, 137, 0.06) !important;
transition: box-shadow 0.3s ease, transform 0.3s ease !important;
max-width: 100% !important;
}
/* Hover auf Figure-Container */
.entry-content figure:hover,
article.single-postlike > .post-content figure:hover,
#content > .content figure:hover,
.entry-content .wp-caption:hover,
article.single-postlike > .post-content .wp-caption:hover {
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1) !important;
}
/* Bild innerhalb Figure – kein doppelter Shadow */
.entry-content figure img,
.entry-content .wp-caption img,
article.single-postlike > .post-content figure img,
article.single-postlike > .post-content .wp-caption img,
#content > .content figure img,
#content > .content .wp-caption img {
box-shadow: none !important;
border-radius: 8px !important;
margin: 0 !important;
width: 100% !important;
height: auto !important;
display: block !important;
}
/* Bildunterschrift – Caption */
.entry-content figcaption,
.entry-content .wp-caption-text,
article.single-postlike > .post-content figcaption,
article.single-postlike > .post-content .wp-caption-text,
#content > .content figcaption,
#content > .content .wp-caption-text {
font-size: 13px !important;
color: #6b7280 !important;
font-style: italic !important;
text-align: center !important;
padding: 10px 8px 4px 8px !important;
margin: 0 !important;
line-height: 1.5 !important;
letter-spacing: 0 !important;
border-top: 1px solid rgba(0, 24, 137, 0.08) !important;
margin-top: 8px !important;
}
/* === MAGAZIN-FLOAT: Bilder mit Text umfließen === */
/* Bilder ohne Ausrichtung (alignnone) oder in figure –
automatisch links floaten mit Text rechts daneben */
.entry-content .alignnone:not(.wp-block-image.is-style-default),
.entry-content figure.alignnone,
.entry-content .wp-caption.alignnone,
article.single-postlike > .post-content .alignnone,
article.single-postlike > .post-content figure.alignnone,
#content > .content .alignnone,
#content > .content figure.alignnone {
float: left !important;
max-width: 35% !important;
margin: 0.5em 2em 1.5em 0 !important;
clear: left !important;
}
/* Gerade Bilder (2., 4., 6. ...) rechts floaten für Abwechslung */
.entry-content figure.alignnone:nth-of-type(even),
.entry-content .wp-caption.alignnone:nth-of-type(even),
article.single-postlike > .post-content figure.alignnone:nth-of-type(even),
#content > .content figure.alignnone:nth-of-type(even) {
float: right !important;
margin: 0.5em 0 1.5em 2em !important;
clear: right !important;
}
/* Explizit links ausgerichtet */
.entry-content .alignleft,
article.single-postlike > .post-content .alignleft,
#content > .content .alignleft {
float: left !important;
max-width: 35% !important;
margin: 0.5em 2em 1.5em 0 !important;
clear: left !important;
}
/* Explizit rechts ausgerichtet */
.entry-content .alignright,
article.single-postlike > .post-content .alignright,
#content > .content .alignright {
float: right !important;
max-width: 35% !important;
margin: 0.5em 0 1.5em 2em !important;
clear: right !important;
}
/* Zentriert / volle Breite – NICHT floaten */
.entry-content .aligncenter,
.entry-content .alignfull,
.entry-content .alignwide,
.entry-content .wp-block-image.size-full,
article.single-postlike > .post-content .aligncenter,
article.single-postlike > .post-content .alignfull,
#content > .content .aligncenter {
float: none !important;
max-width: 100% !important;
margin: 2em auto !important;
display: block !important;
clear: both !important;
}
/* === Auto-Related Images: Teaser-Karten-Styling === */
.stm-auto-related-image {
background: #fff !important;
border: 1px solid rgba(0, 24, 137, 0.08) !important;
border-radius: 12px !important;
padding: 0 !important;
box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
transition: transform 0.25s ease, box-shadow 0.25s ease !important;
overflow: hidden !important;
}
.stm-auto-related-image:hover {
transform: translateY(-3px) !important;
box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}
.stm-auto-related-image img {
border-radius: 0 !important;
width: 100% !important;
height: auto !important;
margin: 0 !important;
display: block !important;
}
.stm-teaser-body {
padding: 10px 14px 12px !important;
}
.stm-teaser-label {
display: inline-block !important;
font-size: 0.7em !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
color: #C24400 !important;
margin-bottom: 4px !important;
}
.stm-teaser-title {
display: block !important;
font-size: 0.88em !important;
font-weight: 600 !important;
line-height: 1.35 !important;
color: #1a1a1a !important;
}
.stm-auto-related-image:hover .stm-teaser-title {
color: #C24400 !important;
}
/* Clearfix nach Überschriften – NUR wenn Bild NICHT direkt davor steht.
Stattdessen per .clearfix-before Klasse manuell oder via full-width Elemente. */
/* ENTFERNT: clear:both auf h2/h3 – das hat den Float nach Bildern sofort gekillt.
Floats werden jetzt nur am Ende des Contents und bei aligncenter/alignfull aufgehoben. */
/* Clearfix nach dem Content */
.entry-content::after,
article.single-postlike > .post-content::after,
#content > .content::after {
content: '' !important;
display: table !important;
clear: both !important;
}
/* Responsive: Auf Mobile kein Float – volle Breite */
@media (max-width: 768px) {
.entry-content .alignnone,
.entry-content figure.alignnone,
.entry-content .wp-caption.alignnone,
.entry-content .alignleft,
.entry-content .alignright,
article.single-postlike > .post-content .alignnone,
article.single-postlike > .post-content .alignleft,
article.single-postlike > .post-content .alignright,
#content > .content .alignnone,
#content > .content .alignleft,
#content > .content .alignright {
float: none !important;
max-width: 100% !important;
margin: 1.5em 0 !important;
clear: both !important;
}
}
/* WP Gallery – Grid-Ansicht eleganter */
.entry-content .gallery,
article.single-postlike > .post-content .gallery {
gap: 12px !important;
margin: 2em 0 !important;
clear: both !important;
}
.entry-content .gallery-item img,
article.single-postlike > .post-content .gallery-item img {
border-radius: 10px !important;
}
/* === SIDEBAR — Magazin-Stil: zurückgenommen, elegant ===
Abstand und Trennlinie sitzen bewusst NICHT als padding/border an der
Sidebar selbst. The7 schaltet die Sidebar am Seitenende per StickySidebar
auf position:fixed und setzt left dabei auf die Rahmenkante des