/* Wiederverwendbare Bausteine fuer optisch zuweisbare Seiten-Vorlagen
   (Produkte/Produktgruppen/Content-Seiten/Kontakt) im Theme "genx" - siehe
   Modules/Storefront/resources/views/themes/genx/templates/_partials/.
   Bewusst NICHT in storefront-base.css (theme-uebergreifend) oder theme.css
   (Design-Tokens) - dieses visuelle Muster ist genx-spezifisch (destilliert
   aus den alten section_*.tpl/store_details_*.tpl-Marketingseiten), keine
   allgemeine Storefront-Struktur. Nutzt dieselben --sf-color-*-Tokens wie
   theme.css. */

.sf-tpl-hero {
    display: flex;
    align-items: center;
    gap: 3rem;
    flex-wrap: wrap;
    padding: 3rem 0;
}
.sf-tpl-hero-text { flex: 1 1 360px; }
.sf-tpl-hero-text h1 { font-size: 2rem; margin: 0 0 .75rem; color: var(--sf-color-primary); }
.sf-tpl-hero-subtitle { font-size: 1.1rem; color: var(--sf-color-text-muted); margin: 0 0 1rem; }
.sf-tpl-hero-checklist { list-style: none; padding: 0; margin: 0; }
/* genx' eigene styles.css setzt global "ul li" ein rotes Kreis-Icon als
   background-image (Standard-Aufzaehlungszeichen des Themes) - fuer diese
   Liste bewusst deaktiviert, da bereits ein eigenes <i>-Icon je Zeile
   gerendert wird (siehe hero.blade.php). */
.sf-tpl-hero-checklist li { padding: .3rem 0; background-image: none; }
.sf-tpl-hero-checklist li i { color: var(--sf-color-primary); margin-right: .5rem; }
.sf-tpl-hero-image { flex: 1 1 320px; text-align: center; }
.sf-tpl-hero-image img { max-width: 100%; height: auto; }

.sf-tpl-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}
.sf-tpl-pricing-card {
    border: 1px solid var(--sf-color-border);
    border-radius: var(--sf-radius);
    padding: 1.5rem;
    background: var(--sf-color-bg);
    display: flex;
    flex-direction: column;
}
.sf-tpl-pricing-card--highlighted {
    border-color: var(--sf-color-primary);
    box-shadow: 0 0 0 2px var(--sf-color-primary);
}
.sf-tpl-pricing-card h3 { margin: 0 0 .75rem; }
.sf-tpl-pricing-card-price { font-size: 1.5rem; font-weight: 700; color: var(--sf-color-primary); margin: 0 0 .25rem; }
.sf-tpl-pricing-card-suffix { font-size: .85rem; font-weight: 400; color: var(--sf-color-text-muted); }
.sf-tpl-pricing-card-setup-fee { font-size: .8rem; color: var(--sf-color-text-muted); margin: 0 0 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--sf-color-border); }
.sf-tpl-pricing-card-features { list-style: none; padding: 0; margin: 0 0 1.5rem; flex: 1; }
/* Siehe Kommentar bei .sf-tpl-hero-checklist li weiter oben - dasselbe
   globale genx-Aufzaehlungszeichen wird auch hier deaktiviert. */
.sf-tpl-pricing-card-features li { padding: .3rem 0; background-image: none; border-bottom: 1px solid var(--sf-color-border); font-size: .9rem; }
.sf-tpl-pricing-card-features li:last-child { border-bottom: none; }
.sf-tpl-pricing-card .sf-btn { text-align: center; margin-top: auto; }

.sf-tpl-benefits { padding: 2.5rem 0; }
/* Original-Marketingseiten nutzen fuer die graue Vorteile-Box konsequent
   #d9d9d9 (Bootstrap ".colored-bg"/".office-vorteile", per Live-Abgleich
   www.genx-hosting.de bestaetigt) - bewusst NICHT ueber --sf-color-surface
   (#f7f2f2, kaum sichtbar), da dieser Token auch fuer Karten/Sidebar/
   Switch-Track verwendet wird und dort NICHT dunkler werden soll. */
.sf-tpl-benefits--shaded {
    background: #d9d9d9;
    border-radius: var(--sf-radius);
    padding: 2.5rem 2rem;
}
.sf-tpl-benefits h2 { text-align: center; margin: 0 0 2rem; }
.sf-tpl-benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}
/* Original nutzt fuer die shaded Vorteile-Boxen (Shoutcast/vServer/ET-Chat)
   durchgehend ein festes 2-spaltiges Bootstrap-Raster (col-lg-6), nicht das
   auto-fit-Verhalten der Standard-Vorteile-Boxen (dort weiterhin passend fuer
   3-4 Kacheln, z.B. /seite/domains) - per Live-Abgleich bestaetigt. */
@media (min-width: 992px) {
    .sf-tpl-benefits--shaded .sf-tpl-benefits-grid { grid-template-columns: repeat(2, 1fr); }
}
.sf-tpl-benefit { display: flex; gap: 1rem; align-items: flex-start; }
.sf-tpl-benefit i { font-size: 1.75rem; color: var(--sf-color-primary); flex-shrink: 0; margin-top: .2rem; }
.sf-tpl-benefit h3 { margin: 0 0 .35rem; font-size: 1rem; }
.sf-tpl-benefit p { margin: 0; font-size: .9rem; color: var(--sf-color-text-muted); }

.sf-tpl-faq { padding: 2.5rem 0; }
.sf-tpl-faq h2 { text-align: center; margin: 0 0 1.5rem; }
.sf-tpl-faq-list { max-width: 760px; margin: 0 auto; }
.sf-tpl-faq-item {
    border-bottom: 1px solid var(--sf-color-border);
    padding: .85rem 0;
}
.sf-tpl-faq-item summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}
.sf-tpl-faq-item summary::-webkit-details-marker { display: none; }
.sf-tpl-faq-item summary::after { content: "+"; float: right; color: var(--sf-color-primary); font-weight: 700; }
.sf-tpl-faq-item[open] summary::after { content: "\2212"; }
.sf-tpl-faq-answer { padding-top: .6rem; color: var(--sf-color-text-muted); font-size: .95rem; }

/* CTA-Box fuer Seiten ohne echtes Bestellformular (z.B. "Angebot anfragen"
   statt Bestellbutton bei Platzhalter-/Vorbereitungsseiten). */
.sf-tpl-cta-box {
    background: var(--sf-color-surface);
    border-radius: var(--sf-radius);
    padding: 2rem;
    text-align: center;
    margin: 2rem 0;
}
.sf-tpl-cta-box p { margin: 0 0 1rem; }

/* Pill-Umschalter (z.B. "1 Monat"/"12 Monate" oder "Linux"/"Windows") -
   eigenes, token-basiertes Bauteil statt der alten Bootstrap-".switcher"-
   Klassen aus dem Original. Erwartetes Markup:
   <div class="sf-tpl-switch" data-switch="...">
     <button type="button" class="sf-tpl-switch-option is-active">A</button>
     <button type="button" class="sf-tpl-switch-option">B</button>
   </div> */
.sf-tpl-switches { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0 .5rem; }
.sf-tpl-switch {
    display: inline-flex;
    background: var(--sf-color-surface);
    border-radius: 999px;
    padding: .25rem;
    gap: .25rem;
    margin: .5rem 0 1.5rem;
}
.sf-tpl-switch-option {
    border: none;
    background: transparent;
    color: var(--sf-color-text-muted);
    font: inherit;
    font-weight: 600;
    padding: .5rem 1.1rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.sf-tpl-switch-option.is-active {
    background: var(--sf-color-primary);
    color: #fff;
}

/* Vergleichstabelle (z.B. Webhosting-Tarifvergleich) - horizontal
   scrollbarer Wrapper, damit schmale Viewports die Tabelle nicht sprengen. */
.sf-tpl-table-wrap { overflow-x: auto; margin: 2rem 0; }
.sf-tpl-compare-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.sf-tpl-compare-table th, .sf-tpl-compare-table td {
    padding: .65rem 1rem;
    border-bottom: 1px solid var(--sf-color-border);
    text-align: center;
}
.sf-tpl-compare-table th:first-child, .sf-tpl-compare-table td:first-child { text-align: left; }
.sf-tpl-compare-table thead th {
    background: var(--sf-color-primary);
    color: #fff;
    font-weight: 600;
}
.sf-tpl-compare-table .sf-tpl-compare-price { font-size: 1.15rem; font-weight: 700; color: var(--sf-color-primary); }
.sf-tpl-compare-table i.fa-check { color: var(--sf-color-primary); }
.sf-tpl-compare-table i.fa-xmark { color: var(--sf-color-text-muted); opacity: .5; }
.sf-tpl-compare-caption { font-size: .8rem; color: var(--sf-color-text-muted); margin: -.5rem 0 1.5rem; }

/* Zweispaltiges Bestell-Layout (TS3): links gestapelte Auswahlfelder, rechts
   Logo/Partnerlink/Gesamtpreis/Bestellbutton. */
.sf-tpl-order-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2rem;
    align-items: start;
}
.sf-tpl-order-aside { text-align: center; }
.sf-tpl-order-aside img { max-width: 100%; height: auto; }
.sf-tpl-order-aside .sf-tpl-athp-link { display: block; margin: .75rem 0 1.5rem; font-size: .9rem; }
/* label/select sind ohne explizite Breite Inline-Elemente und wuerden sich
   sonst zeilenweise zu mehreren Feldern pro Reihe umbrechen (Fund
   2026-08-09, per Live-Abgleich) - "gestapelte Auswahlfelder" (siehe
   Kommentar oben) war bisher nur Absicht, nicht tatsaechliches CSS. */
.sf-tpl-order-layout .sf-price-select-form label { display: block; margin-top: 1rem; font-weight: 600; }
.sf-tpl-order-layout .sf-price-select-form label:first-child { margin-top: 0; }
.sf-tpl-order-layout .sf-price-select-form select,
.sf-tpl-order-layout .sf-price-select-form input[type="number"] {
    display: block;
    width: 100%;
    max-width: 420px;
    padding: .5rem .6rem;
    border: 1px solid var(--sf-color-border, #e5e7eb);
    border-radius: var(--sf-radius, 6px);
    font-size: 1rem;
    margin-top: .35rem;
}

@media (max-width: 767.98px) {
    .sf-tpl-hero { flex-direction: column; text-align: center; }
    .sf-tpl-order-layout { grid-template-columns: 1fr; }
}

/* Bestell-Box fuer die generische Einzelprodukt-Seite (product.blade.php,
   liegt bewusst NICHT unter templates/ - siehe Kommentar oben zum
   Datei-Scope, aber hier trotzdem sinnvoll aufgehoben, da templates.css auf
   jeder genx-Seite geladen wird). Nachgebaut nach dem Original-Bestell-
   formular (per Live-Abgleich www.genx-hosting.de/office365-mail-office.html):
   graue Box, linksbuendige Labels/rechtsbuendige Werte statt der vorherigen,
   nicht ausgerichteten Stapel-Liste. */
.sf-tpl-order-box {
    background: var(--sf-color-surface);
    border-radius: var(--sf-radius);
    padding: 1.5rem 1.75rem;
}
.sf-tpl-order-number { font-size: .85rem; color: var(--sf-color-text-muted); margin: -.5rem 0 1.25rem; }
.sf-tpl-order-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .4rem 0; }
.sf-tpl-order-row label { font-weight: 600; margin: 0; }
.sf-tpl-order-value { font-weight: 600; }
/* Label+Select/Input-Paare aus dem geteilten _variation-selects-Partial (und
   den beiden davor stehenden Variante-/Menge-Feldern) kommen als flache
   Geschwister-Folge ohne eigenen Zeilen-Wrapper - ein 2-spaltiges Grid mit
   automatischer Zeilen-Platzierung ordnet sie ohne Partial-Aenderung (das
   Partial wird auch von TS3-Server/Streamserver/Kaspersky genutzt, deren
   Layout unangetastet bleiben soll). */
.sf-tpl-order-fields { display: grid; grid-template-columns: 1fr auto; align-items: center; row-gap: .85rem; column-gap: 1rem; margin: 1.25rem 0; }
.sf-tpl-order-fields label { font-weight: 600; margin: 0; }
.sf-tpl-order-fields select,
.sf-tpl-order-fields input[type="number"] {
    padding: .45rem .6rem;
    border: 1px solid var(--sf-color-border);
    border-radius: var(--sf-radius);
    background: var(--sf-color-bg);
    text-align: right;
    max-width: 220px;
    justify-self: end;
}
.sf-tpl-order-totals { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--sf-color-border); display: flex; flex-direction: column; gap: .15rem; }
.sf-tpl-order-totals .sf-tpl-order-row:first-child { font-weight: 700; }
.sf-tpl-order-totals .sf-tpl-order-row:first-child label,
.sf-tpl-order-totals .sf-tpl-order-row:first-child .sf-tpl-order-value { font-weight: 700; }
.sf-tpl-order-total-note { font-size: .8rem; color: var(--sf-color-text-muted); margin: -.1rem 0 0; }
.sf-tpl-order-actions { margin-top: 1.25rem; }
/* Die geteilte .sf-tpl-compare-table hat min-width:640px (fuer breite
   Mehrspalten-Vergleiche wie den Kaspersky-Editionsvergleich gedacht) - in
   dieser schmalen, max. 560px breiten Box lief der Tabellenkopf dadurch
   sichtbar am rechten Rand ab statt sauber umzubrechen. Nur hier lokal
   aufgehoben, da diese Mengenstaffel-Tabelle bewusst nur 2 schmale Spalten
   braucht. */
.sf-tpl-order-tiers .sf-tpl-compare-table { min-width: 0; width: 100%; }