.elementor-121070101 .elementor-element.elementor-element-1c35d13{text-align:center;}.elementor-121070101 .elementor-element.elementor-element-9039882 > .elementor-widget-container > .elementor-heading-title{margin-bottom:20px;}.elementor-121070101 .elementor-element.elementor-element-9039882 .swiper:not(.swiper-initialized) .swiper-wrapper{grid-template-columns:repeat(8, 1fr);}.elementor-121070101 .elementor-element.elementor-element-21fa006 > .elementor-widget-container > .elementor-heading-title{margin-bottom:20px;}.elementor-121070101 .elementor-element.elementor-element-21fa006 .swiper:not(.swiper-initialized) .swiper-wrapper{grid-template-columns:repeat(8, 1fr);}.elementor-121070101 .elementor-element.elementor-element-b43265e > .elementor-widget-container > .elementor-heading-title{margin-bottom:20px;}.elementor-121070101 .elementor-element.elementor-element-b43265e .swiper:not(.swiper-initialized) .swiper-wrapper{grid-template-columns:repeat(8, 1fr);}.elementor-121070101 .elementor-element.elementor-element-9621e35 > .elementor-widget-container > .elementor-heading-title{margin-bottom:20px;}.elementor-121070101 .elementor-element.elementor-element-9621e35 .swiper:not(.swiper-initialized) .swiper-wrapper{grid-template-columns:repeat(8, 1fr);}/* Start custom CSS for html, class: .elementor-element-8054cdd *//* ===== Pillarseite Glastüren – Layout & SEO-UX ===== */
.article-pro { --max: 1200px; --gap: 1.5rem; --radius: 14px; --shade: 0 8px 24px rgba(0,0,0,.06); }
.article-pro { margin-inline: auto; max-width: var(--max); padding: clamp(1rem, 2vw, 2rem); }
.breadcrumb { font-size: .9rem; margin-bottom: 1rem; }
.breadcrumb ol { display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; padding:0; margin:0; }
.breadcrumb a { text-decoration:none; color:#1d4ed8; }
.breadcrumb li::after { content:"/"; margin:0 .5rem; color:#94a3b8; }
.breadcrumb li:last-child::after { content:""; }

#introduction h1 { font-size: clamp(1.8rem, 3vw, 2.4rem); line-height:1.2; margin-bottom:.75rem; }
#introduction p { font-size:1.05rem; color:#334155; }
.img-container { border-radius: var(--radius); background: linear-gradient(135deg,#f8fafc,#eef2ff); min-height: 18px; }

.toc { position: sticky; top: 72px; background:#ffffff; border:1px solid #e5e7eb; padding: .75rem 1rem; border-radius: var(--radius); margin-block: 1rem 2rem; box-shadow: var(--shade); }
.toc ul { margin:0; padding-left:1rem; display:grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap:.25rem .75rem; }
.toc a { color:#0f172a; text-decoration:none; }
.toc a:hover { color:#1d4ed8; text-decoration:underline; }
.visually-hidden { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

section { scroll-margin-top: 90px; }

.three-columns, .two-columns { display:grid; gap: var(--gap); margin-block: 1.25rem 2rem; }
.three-columns { grid-template-columns: repeat(3,1fr); }
.two-columns { grid-template-columns: repeat(2,1fr); }
.columns-1-2 { grid-template-columns: 1fr 1.25fr; }

.column-card { background:#fff; border:1px solid #e5e7eb; border-radius: var(--radius); padding:1rem; box-shadow: var(--shade); display:flex; flex-direction:column; gap:.75rem; }
.column-card .img-container img { width:100%; height:auto; border-radius: 10px; display:block; }
.column-card h3 { margin:.25rem 0 .25rem; font-size:1.15rem; }
.more-link { margin-top: .25rem; font-size:.95rem; }
.more-link a { color:#1d4ed8; text-decoration:none; }
.more-link a:hover { text-decoration:underline; }

.custom-list { margin:.5rem 0 0; padding-left:1.25rem; }
.custom-list li { margin:.25rem 0; }

.info-box { background:#f8fafc; border:1px dashed #cbd5e1; padding: .85rem 1rem; border-radius: 10px; color:#0f172a; }

.rating-container { display:grid; gap: var(--gap); grid-template-columns: 280px 1fr; background:#fff; border:1px solid #e5e7eb; border-radius: var(--radius); padding:1rem; box-shadow: var(--shade); }
.rating-overall { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; }
.rating-score { font-size:2.4rem; font-weight:700; }
.rating-stars { width:120px; height:20px; background:linear-gradient(90deg,#f59e0b 80%,#e5e7eb 20%); mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox=\'0 0 100 20\'><text x=\'0\' y=\'16\' font-size=\'18\'>★★★★★</text></svg>') no-repeat center/contain; -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox=\'0 0 100 20\'><text x=\'0\' y=\'16\' font-size=\'18\'>★★★★★</text></svg>') no-repeat center/contain; }
.rating-details { display:grid; gap:.6rem; }
.rating-item { display:grid; grid-template-columns: 160px 1fr 48px; align-items:center; gap:.5rem; font-size:.95rem; }
.rating-bar-container { background:#e2e8f0; height:8px; border-radius:8px; overflow:hidden; }
.rating-bar { height:100%; background:#10b981; }

.pros-cons { display:grid; gap: var(--gap); grid-template-columns: 1fr 1fr; margin-bottom:1.5rem; }
.pros, .cons { background:#fff; border:1px solid #e5e7eb; border-radius: var(--radius); padding:1rem; box-shadow: var(--shade); }
.pros-title, .cons-title { margin-top:0; }
.pros ul, .cons ul { margin:0; padding-left:1.25rem; }

.table-container { overflow:auto; border-radius: 10px; border:1px solid #e5e7eb; }
.responsive-table { width:100%; border-collapse: collapse; font-size:.96rem; }
.responsive-table thead td { background:#f8fafc; font-weight:600; }
.responsive-table td { border-bottom:1px solid #e5e7eb; padding:.75rem .8rem; vertical-align: top; }
.responsive-table-striped tbody tr:nth-child(odd) td { background:#fbfdff; }
.responsive-table-bordered td { border:1px solid #e5e7eb; }

.gallery { display:grid; gap: var(--gap); grid-template-columns: repeat(4,1fr); margin-bottom:1.5rem; }
.gallery-item { background:#fff; border:1px solid #e5e7eb; border-radius: var(--radius); box-shadow: var(--shade); overflow:hidden; }
.gallery-img img { width:100%; height:auto; display:block; }
.gallery-item figcaption { padding:.6rem .75rem; font-size:.95rem; color:#334155; }

.blockquote { border-left:4px solid #1d4ed8; background:#f8fafc; padding: .9rem 1rem; border-radius: 8px; font-style: italic; color:#0f172a; }
.blockquote-author { display:block; font-style: normal; font-weight:600; margin-top:.4rem; color:#334155; }

.cta-block { background: linear-gradient(180deg,#eef2ff,#ffffff); border:1px solid #e5e7eb; border-radius: var(--radius); padding:1.2rem; box-shadow: var(--shade); text-align:center; }
.cta-block-title { margin:.2rem 0 .25rem; font-size:1.25rem; }
.cta-block-text { margin:.2rem 0 .8rem; color:#334155; }
.cta-actions { display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; }
.cta-btn { display:inline-block; background:#1d4ed8; color:#fff; padding:.65rem 1rem; border-radius:10px; text-decoration:none; font-weight:600; }
.cta-btn:hover { background:#1e40af; }
.cta-link { color:#1d4ed8; text-decoration:none; font-weight:600; }
.cta-link:hover { text-decoration:underline; }

.related-grid { display:grid; gap:.6rem .8rem; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); list-style:none; padding-left:0; margin: .75rem 0 1.5rem; }
.related-grid a { display:block; padding:.7rem .8rem; border:1px solid #e5e7eb; border-radius:10px; background:#fff; text-decoration:none; color:#0f172a; box-shadow: var(--shade); }
.related-grid a:hover { border-color:#1d4ed8; color:#1d4ed8; }

.lead-form .form-container { background:#fff; border:1px solid #e5e7eb; border-radius: var(--radius); padding:1rem; box-shadow: var(--shade); }
.form-row { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--gap); }
.form-group { display:flex; flex-direction:column; gap:.35rem; margin-bottom:.8rem; }
.form-label { font-weight:600; }
.form-input, .form-textarea { border:1px solid #cbd5e1; border-radius:10px; padding:.6rem .7rem; font:inherit; }
.form-input:focus, .form-textarea:focus { outline: none; border-color:#1d4ed8; box-shadow: 0 0 0 3px rgba(29,78,216,.12); }
.form-btn { background:#10b981; color:#fff; border:none; padding:.7rem 1rem; border-radius:10px; font-weight:700; cursor:pointer; }
.form-btn:hover { background:#059669; }

/* Accessibility / Utilities */
a { transition: color .2s ease, border-color .2s ease, background .2s ease; }
img { height:auto; max-width:100%; }

/* Responsive */
@media (max-width: 980px) {
  .three-columns { grid-template-columns: 1fr 1fr; }
  .gallery { grid-template-columns: repeat(2,1fr); }
  .rating-container { grid-template-columns: 1fr; }
  .columns-1-2, .two-columns { grid-template-columns: 1fr; }
  .toc { position: static; }
  .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  #introduction h1 { font-size: 1.6rem; }
  .cta-actions { flex-direction:column; }
}
/* ========== 1) Container-Breathing + Lesezeilen ========== */
.article-pro { max-width: 1180px; }
.article-pro p { line-height: 1.65; }

/* ========== 2) Hero/LCP-Fix: Bildhöhe reservieren (CLS) ========== */
#introduction .img-container {
  min-height: clamp(160px, 28vw, 300px);
  aspect-ratio: 16/9; /* verhindert Springen vor Lazy-Load */
  background-position: center;
  background-size: cover;
}

/* Wenn du ein echtes Hero-Bild nutzt, setz eine Klasse: .hero-img */
.hero-img { aspect-ratio: 16/9; width:100%; height:auto; display:block; }

/* ========== 3) Sticky-TOC smarter (mobile einklappbar) ========== */
.toc { position: sticky; top: 72px; z-index: 10; }
.toc summary { font-weight: 700; cursor: pointer; list-style: none; }
.toc details > ul { margin-top: .5rem; }
@media (max-width: 980px){
  .toc { position: static; padding: .6rem .8rem; }
  .toc ul { grid-template-columns: 1fr; }
}

/* ========== 4) Karten-Raster: gleiche Höhe, ruhige Reihen ========== */
.column-card { display:flex; flex-direction:column; }
.column-card .img-container { aspect-ratio: 4/3; overflow:hidden; }
.column-card .img-container img { width:100%; height:100%; object-fit:cover; }

/* ========== 5) CTA-Buttons: Hit-Target und Kontrast ========== */
.cta-btn { padding:.75rem 1.1rem; border:0; font-weight:700; }
.cta-btn:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }

/* ========== 6) Bewertungsbalken: reduzierte Farbe + ARIA ========== */
.rating-bar { background: linear-gradient(90deg, #22c55e, #10b981); }
.rating-item .rating-name { font-weight:600; }

/* ========== 7) Tabellen: mobile Stack mit Labeln ========== */
@media (max-width: 700px){
  .responsive-table thead { display:none; }
  .responsive-table tr { display:block; border-top:1px solid #e5e7eb; padding:.5rem 0; }
  .responsive-table td { display:grid; grid-template-columns: 140px 1fr; gap:.5rem; border:none; padding:.4rem .2rem; }
  .responsive-table td::before { content: attr(data-label); font-weight:700; color:#334155; }
}

/* ========== 8) Galerie: gleichmäßige Kacheln + Hover ========== */
.gallery { grid-template-columns: repeat(4, minmax(0,1fr)); }
.gallery-item { transition: transform .15s ease, box-shadow .2s ease; }
.gallery-item:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.08); }
.gallery-img { aspect-ratio: 4/3; overflow:hidden; }
.gallery-img img { width:100%; height:100%; object-fit:cover; }

/* ========== 9) Pros/Cons: visuelle Differenzierung ========== */
.pros { border-left: 4px solid #10b981; }
.cons { border-left: 4px solid #ef4444; }

/* ========== 10) Related-Links: kompakter, klickstark ========== */
.related-grid a { padding:.7rem .9rem; display:flex; align-items:center; gap:.5rem; }
.related-grid a::before {
  content:"↗"; font-weight:700; color:#1d4ed8; opacity:.7; transform: translateY(-1px);
}

/* ========== 11) Formular: Spacing + Fehlerzustand ========== */
.form-input:invalid, .form-textarea:invalid { border-color:#f59e0b; }
.lead-form .form-container { scroll-margin-top: 90px; }

/* ========== 12) Feinheiten Typo/Links ========== */
a { text-underline-offset: 2px; }
.blockquote { font-size: 1.02rem; }
/* CTA-Buttons: Text immer weiß – unabhängig von globalen Link-Farben */
.cta-btn,
.cta-btn:visited,
.cta-btn:hover,
.cta-btn:focus {
  color: #fff !important;
}

/* Falls du mal Icons/Spans in Buttons hast */
.cta-btn * {
  color: #fff !important;
  fill: #fff !important;
}/* End custom CSS */