/* ========================================================================
bphone — main.css
----------------------------------------------------------------------
Brand "BOLD & DIRECT – STRONG TYPO"
- Schriftart: Roboto, lokal aus ../fonts/ (DSGVO-konform)
======================================================================== */
/* ---- Brand-Tokens ---- */
:root {
--bp-primary: #E30613;
--bp-primary-dk: #B7050F;
--bp-dark: #111111;
--bp-gray: #333333;
--bp-gray-2: #6B6B6B;
--bp-light: #F2F2F2;
--bp-white: #FFFFFF;
--bp-border: #E5E5E5;
--bp-container: 1280px;
--bp-radius: 12px;
--bp-radius-lg: 16px;
--bp-shadow-sm: 0 2px 8px rgba(17,17,17,0.06);
--bp-shadow-md: 0 8px 24px rgba(17,17,17,0.08);
}
/* ---- Roboto (selbst gehostet) ---- */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/roboto-400.woff2') format('woff2');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/roboto-500.woff2') format('woff2');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/roboto-700.woff2') format('woff2');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url('../fonts/roboto-900.woff2') format('woff2');
}
/* ---- Reset / Base ---- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
/* Höhere Spezifität, damit Visual-Composer/Legacy-CSS uns nicht überschreibt */
html body,
html body input,
html body button,
html body select,
html body textarea {
font-family: 'Roboto', system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}
body {
margin: 0;
font-size: 17px;
line-height: 1.6;
color: var(--bp-dark);
background: var(--bp-white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img,
svg,
video {
max-width: 100%;
height: auto;
display: block;
}
a {
color: var(--bp-primary);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
ul, ol {
margin: 0;
padding: 0;
}
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6 {
margin: 0 0 .5em;
font-family: 'Roboto', system-ui, sans-serif;
font-weight: 900;
letter-spacing: -.02em;
line-height: 1.1;
color: var(--bp-dark);
}
p {
margin: 0 0 1em;
}
button {
font-family: inherit;
cursor: pointer;
}
.screen-reader-text {
position: absolute !important;
clip: rect(1px,1px,1px,1px);
width: 1px;
height: 1px;
overflow: hidden;
}
.skip-link:focus {
position: fixed;
top: 1rem;
left: 1rem;
width: auto;
height: auto;
clip: auto;
z-index: 9999;
background: var(--bp-dark);
color: var(--bp-white);
padding: .5rem 1rem;
border-radius: var(--bp-radius);
}
/* ---- Layout ---- */
.container {
width: 100%;
max-width: var(--bp-container);
margin: 0 auto;
padding: 0 24px;
}
.container-narrow {
max-width: 760px;
}
.section {
padding: 96px 0;
}
html body .section-title {
font-size: clamp(28px, 3vw, 40px) !important;
margin: 0 0 48px !important;
text-align: center !important;
font-weight: 900 !important;
color: var(--bp-dark) !important;
text-transform: uppercase;
letter-spacing: -.02em;
}
/* ---- Buttons ---- */
html body .btn {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: .5em;
padding: 16px 28px !important;
font-weight: 700 !important;
font-size: 16px;
border-radius: var(--bp-radius) !important;
border: 1px solid transparent !important;
text-decoration: none !important;
transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
line-height: 1;
cursor: pointer;
}
html body .btn:active {
transform: translateY(1px);
}
html body .btn-primary {
background: var(--bp-primary) !important;
color: var(--bp-white) !important;
border-color: var(--bp-primary) !important;
}
html body .btn-primary:hover {
background: var(--bp-primary-dk) !important;
border-color: var(--bp-primary-dk) !important;
color: var(--bp-white) !important;
}
html body .btn-secondary {
background: var(--bp-white) !important;
color: var(--bp-dark) !important;
border-color: var(--bp-border) !important;
}
html body .btn-secondary:hover {
border-color: var(--bp-dark) !important;
color: var(--bp-dark) !important;
}
html body .btn-sm {
padding: 10px 18px !important;
font-size: 14px;
}
/* ---- Site-Header ---- */
html body .site-header {
position: sticky !important;
top: 0;
z-index: 100;
background: rgba(255,255,255,0.96) !important;
backdrop-filter: saturate(180%) blur(8px);
border-bottom: 1px solid var(--bp-border) !important;
}
/* Eingeloggte Admins: Sticky-Header unter die WP-Admin-Bar verschieben */
html body.admin-bar .site-header {
top: 32px !important;
}
@media screen and (max-width: 782px) {
html body.admin-bar .site-header {
top: 46px !important;
}
}
html body .header-inner {
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 32px;
height: 88px;
}
html body .site-logo {
display: inline-flex !important;
align-items: baseline;
gap: 1px;
font-size: 32px !important;
font-weight: 900 !important;
text-decoration: none !important;
color: var(--bp-dark) !important;
letter-spacing: -.04em;
line-height: 1;
}
html body .site-logo .logo-mark {
color: var(--bp-primary) !important;
}
html body .site-logo--light {
color: var(--bp-white) !important;
}
.primary-nav {
flex: 1;
display: flex;
justify-content: center;
}
html body .primary-menu {
display: flex !important;
gap: 32px;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
html body .primary-menu li {
list-style: none !important;
margin: 0;
}
html body .primary-menu a {
color: var(--bp-dark) !important;
font-weight: 500 !important;
font-size: 15px;
text-decoration: none !important;
padding: 8px 0;
border-bottom: 2px solid transparent;
transition: color .15s, border-color .15s;
}
html body .primary-menu a:hover,
html body .primary-menu .current-menu-item > a {
color: var(--bp-primary) !important;
border-bottom-color: var(--bp-primary) !important;
}
html body .header-actions {
display: flex !important;
align-items: center;
gap: 16px;
}
html body .header-login {
color: var(--bp-dark) !important;
font-weight: 500;
font-size: 15px;
text-decoration: none !important;
}
html body .header-login:hover {
color: var(--bp-primary) !important;
}
/* Mobile-Nav-Toggle */
.nav-toggle {
display: none;
width: 40px;
height: 40px;
background: transparent;
border: 0;
padding: 8px;
flex-direction: column;
justify-content: space-between;
}
.nav-toggle span {
display: block;
width: 100%;
height: 2px;
background: var(--bp-dark);
transition: transform .2s, opacity .2s;
}
/* ---- Hero ---- */
.section-hero {
padding: 40px 0 48px;
}
.hero-grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 64px;
align-items: center;
}
html body .hero-title {
font-family: 'Roboto', system-ui, sans-serif;
font-size: clamp(48px, 6.5vw, 92px);
font-weight: 900;
line-height: .92;
margin: 0 0 24px;
letter-spacing: -.04em;
color: var(--bp-dark);
text-transform: none;
}
html body .hero-title .accent {
color: var(--bp-primary) !important;
}
.hero-lead {
font-size: 18px;
color: var(--bp-gray);
max-width: 480px;
margin: 0 0 32px;
}
html body .hero-checks {
display: grid !important;
grid-template-columns: repeat(2, max-content);
gap: 12px 32px;
list-style: none !important;
margin: 0 0 40px !important;
padding: 0 !important;
}
html body .hero-checks li {
display: inline-flex !important;
align-items: center;
gap: 10px;
font-size: 15px;
font-weight: 500;
list-style: none !important;
color: var(--bp-dark) !important;
}
html body .hero-checks .check {
width: 22px;
height: 22px;
display: inline-flex !important;
align-items: center;
justify-content: center;
background: var(--bp-primary) !important;
color: var(--bp-white) !important;
border-radius: 50%;
flex-shrink: 0;
padding: 4px;
}
html body .hero-checks .check svg {
width: 100%;
height: 100%;
}
.hero-buttons {
display: flex;
flex-wrap: wrap;
gap: 14px;
}
.hero-visual {
display: flex;
align-items: center;
justify-content: center;
}
.swiss-map {
width: 100%;
max-width: 460px;
height: auto;
display: block;
}
.swiss-map circle {
fill: var(--bp-primary);
}
/* ---- Trust-Bar (4 Items mit Icon + Headline + Beschreibung) ---- */
html body .section-trust {
padding: 28px 0 !important;
background: var(--bp-light) !important;
}
html body .trust-grid {
display: flex !important;
justify-content: space-between;
align-items: flex-start;
gap: 24px;
flex-wrap: nowrap;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
html body .trust-item {
flex: 0 1 auto;
max-width: 290px;
}
html body .trust-item {
display: flex !important;
align-items: flex-start;
justify-content: flex-start;
gap: 16px;
list-style: none !important;
text-align: left;
}
html body .trust-icon {
flex-shrink: 0;
width: 36px;
height: 36px;
color: var(--bp-primary) !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
}
html body .trust-icon svg {
width: 100%;
height: 100%;
}
html body .trust-text {
display: flex;
flex-direction: column;
gap: 4px;
}
html body .trust-text strong {
display: block;
font-size: 16px;
font-weight: 700;
color: var(--bp-dark) !important;
line-height: 1.2;
}
html body .trust-text span {
font-size: 13px;
color: var(--bp-gray-2) !important;
line-height: 1.4;
}
/* ---- Tarif-Highlight-Section ---- */
html body .section-tariff {
padding: 32px 0 !important;
background: var(--bp-light) !important;
border-top: 1px solid var(--bp-border);
border-bottom: 0;
}
html body .tariff-grid {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 0;
align-items: center;
}
html body .tariff-grid > .tariff-item:first-child {
border-right: 1px solid var(--bp-border);
}
html body .tariff-item {
display: flex !important;
align-items: center;
justify-content: center;
gap: 24px;
padding: 16px 24px;
}
html body .tariff-icon {
flex-shrink: 0;
width: 64px;
height: 64px;
color: var(--bp-primary) !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
}
html body .tariff-icon svg {
width: 100%;
height: 100%;
}
html body .tariff-body {
display: flex;
flex-direction: column;
}
html body .tariff-amount {
margin: 0 !important;
display: flex !important;
align-items: baseline;
gap: 6px;
color: var(--bp-primary) !important;
font-weight: 900;
line-height: 1;
}
html body .tariff-amount .value {
font-size: clamp(40px, 5vw, 72px);
letter-spacing: -.03em;
}
html body .tariff-amount .currency {
font-size: clamp(18px, 1.6vw, 26px);
font-weight: 700;
color: var(--bp-gray) !important;
}
html body .tariff-label {
margin: 4px 0 0 !important;
font-size: 14px;
font-weight: 700;
color: var(--bp-dark) !important;
text-transform: uppercase;
letter-spacing: .04em;
}
/* ---- Competitor-Vergleich ---- */
html body .section-competitor {
padding: 8px 0 !important;
background: var(--bp-white) !important;
}
html body .competitor-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr);
gap: 0;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
html body .competitor-card {
display: flex !important;
align-items: center;
justify-content: center;
gap: 24px;
padding: 24px;
border-right: 1px solid var(--bp-border);
list-style: none !important;
}
html body .competitor-card:first-child {
padding-left: 0;
}
html body .competitor-card:last-child {
padding-right: 0;
border-right: 0;
}
html body .competitor-card:last-child {
border-right: 0;
}
html body .competitor-card.is-us {
background: transparent;
}
html body .competitor-brand {
display: flex !important;
align-items: center;
justify-content: flex-start;
gap: 10px;
min-width: 130px;
text-align: left;
}
html body .brand-mark--circle {
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(17,17,17,.06);
color: var(--bp-gray-2) !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
}
html body .brand-mark--circle svg {
width: 18px;
height: 18px;
}
html body .brand-logo-img {
width: 32px;
height: 32px;
object-fit: contain;
flex-shrink: 0;
}
html body .brand-name {
font-weight: 600;
font-size: 15px;
color: var(--bp-dark) !important;
}
html body .brand-peoplefone .brand-name,
html body .brand-swisscom .brand-name {
color: var(--bp-dark) !important;
font-weight: 700;
font-size: 18px;
}
html body .brand-bphone {
font-weight: 900;
font-size: 22px;
letter-spacing: -.04em;
color: var(--bp-dark) !important;
}
html body .brand-bphone .logo-mark {
color: var(--bp-primary) !important;
}
html body .competitor-rates {
display: flex !important;
gap: 24px;
}
html body .competitor-rates .rate {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
text-align: center;
}
html body .competitor-rates .rate-value {
font-size: clamp(16px, 1.5vw, 22px);
font-weight: 900;
color: var(--bp-dark) !important;
line-height: 1.1;
letter-spacing: -.02em;
}
html body .competitor-card.is-us .rate-value {
color: var(--bp-primary) !important;
}
html body .competitor-rates .rate-label {
font-size: 11px;
color: var(--bp-gray-2) !important;
text-transform: uppercase;
letter-spacing: .04em;
}
/* ---- Pricing-Grid ---- */
html body .pricing-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
list-style: none;
padding: 0;
margin: 0;
}
html body .pricing-card {
position: relative;
padding: 32px !important;
border: 1px solid var(--bp-border) !important;
border-radius: var(--bp-radius-lg) !important;
background: var(--bp-white) !important;
transition: border-color .15s, box-shadow .15s, transform .15s;
}
html body .pricing-card:hover {
border-color: var(--bp-primary) !important;
box-shadow: var(--bp-shadow-md);
transform: translateY(-2px);
}
html body .pricing-title {
font-size: 18px;
font-weight: 700;
margin: 0 0 24px !important;
color: var(--bp-gray) !important;
letter-spacing: 0;
}
html body .pricing-price {
display: flex !important;
align-items: baseline;
gap: 8px;
margin-bottom: 6px;
}
html body .pricing-price .ab {
font-size: 14px;
color: var(--bp-gray-2) !important;
font-weight: 500;
}
html body .pricing-price .amount {
font-size: 40px;
font-weight: 900;
color: var(--bp-primary) !important;
letter-spacing: -.03em;
line-height: 1;
}
html body .pricing-unit {
color: var(--bp-gray-2) !important;
font-size: 14px;
margin: 0;
}
html body .pricing-link {
position: absolute;
bottom: 28px;
right: 28px;
width: 36px;
height: 36px;
display: inline-flex !important;
align-items: center;
justify-content: center;
color: var(--bp-primary) !important;
font-size: 22px;
text-decoration: none !important;
}
html body .pricing-link:hover {
transform: translateX(2px);
}
/* ---- Compare-Banner ---- */
html body .section-compare {
padding: 0 !important;
background: var(--bp-primary) !important;
color: var(--bp-white) !important;
}
html body .compare-grid {
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 40px;
flex-wrap: wrap;
padding: 40px 24px !important;
}
.compare-claim {
flex: 0 0 auto;
}
html body .compare-headline {
margin: 0;
font-size: clamp(22px, 2.5vw, 32px);
font-weight: 700;
color: var(--bp-white) !important;
}
html body .compare-headline strong {
font-weight: 900;
font-size: 1.25em;
color: var(--bp-white) !important;
}
html body .compare-sub {
margin: 0;
font-size: 18px;
opacity: .85;
font-weight: 500;
color: var(--bp-white) !important;
}
html body .compare-logos {
display: flex !important;
flex-wrap: wrap;
align-items: center;
gap: 32px 48px;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
html body .compare-logos li {
list-style: none !important;
}
html body .competitor-logo {
color: var(--bp-white) !important;
font-weight: 700;
font-size: 22px;
opacity: .92;
letter-spacing: -.02em;
}
/* ---- "Warum bphone?" ---- */
.section-why {
padding: 96px 0;
}
html body .why-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
html body .why-item {
text-align: center;
list-style: none !important;
}
html body .why-icon {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
color: var(--bp-primary) !important;
background: transparent !important;
margin-bottom: 16px;
}
html body .why-icon svg {
width: 100%;
height: 100%;
}
html body .why-title {
font-size: 18px !important;
font-weight: 700 !important;
margin: 0 0 8px !important;
color: var(--bp-dark) !important;
}
html body .why-text {
margin: 0;
color: var(--bp-gray-2) !important;
font-size: 15px;
}
/* ---- Site-Footer ---- */
html body .site-footer {
background: var(--bp-dark) !important;
color: var(--bp-white) !important;
padding: 80px 0 0 !important;
margin-top: 0;
}
html body .site-footer * {
color: inherit;
}
html body .footer-grid {
display: grid !important;
grid-template-columns: 1.4fr 1fr;
gap: 48px;
align-items: start;
}
html body .footer-brand .footer-tagline {
margin: 16px 0 24px;
color: rgba(255,255,255,.7) !important;
font-size: 15px;
}
html body .footer-social {
display: flex !important;
gap: 12px;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
html body .footer-social li {
list-style: none !important;
}
html body .footer-social a {
display: inline-flex !important;
width: 36px;
height: 36px;
align-items: center;
justify-content: center;
background: rgba(255,255,255,.08) !important;
color: var(--bp-white) !important;
border-radius: 50% !important;
text-decoration: none !important;
font-size: 14px;
font-weight: 700;
transition: background-color .15s;
}
html body .footer-social a:hover {
background: var(--bp-primary) !important;
}
html body .footer-col h4 {
color: var(--bp-white) !important;
font-size: 15px;
text-transform: uppercase;
letter-spacing: .05em;
margin: 0 0 16px !important;
font-weight: 700;
}
html body .footer-col ul {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
html body .footer-col li {
margin-bottom: 10px;
list-style: none !important;
}
html body .footer-col a {
color: rgba(255,255,255,.75) !important;
text-decoration: none !important;
font-size: 15px;
transition: color .15s;
}
html body .footer-col a:hover {
color: var(--bp-white) !important;
}
html body .footer-contact .footer-address {
color: rgba(255,255,255,.75) !important;
font-size: 14px;
margin-top: 12px;
line-height: 1.6;
}
html body .footer-contact {
text-align: right;
}
html body .footer-contact ul {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
html body .footer-contact li {
list-style: none !important;
margin: 0 0 10px;
text-align: right;
}
html body .footer-contact a {
display: inline-flex !important;
align-items: center;
gap: 10px;
color: var(--bp-white) !important;
text-decoration: none !important;
font-size: 15px;
font-weight: 500;
}
html body .footer-contact a:hover {
color: var(--bp-primary) !important;
}
html body .footer-contact .footer-ico {
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--bp-primary) !important;
font-weight: 700;
flex-shrink: 0;
}
html body .footer-contact .footer-ico svg {
width: 100%;
height: 100%;
}
html body .footer-contact .footer-address strong {
color: var(--bp-white) !important;
display: block;
margin-bottom: 2px;
font-weight: 700;
font-size: 15px;
}
html body .footer-bottom {
margin-top: 64px;
padding: 24px 0 !important;
border-top: 1px solid rgba(255,255,255,.1) !important;
}
html body .footer-bottom-inner {
display: flex !important;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}
html body .footer-bottom p {
margin: 0 !important;
color: rgba(255,255,255,.6) !important;
font-size: 14px;
}
html body .footer-legal {
display: flex !important;
gap: 24px;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
html body .footer-legal li {
list-style: none !important;
}
html body .footer-legal a {
color: rgba(255,255,255,.6) !important;
font-size: 14px;
text-decoration: none !important;
}
html body .footer-legal a:hover {
color: var(--bp-white) !important;
}
html body .footer-credit-link {
color: var(--bp-primary) !important;
text-decoration: none !important;
font-weight: 600;
}
html body .footer-credit-link:hover {
text-decoration: underline !important;
}
/* Brand-Name "bphone" mit rotem b — überall im Fliesstext */
html body .bp-brand {
font-weight: inherit;
white-space: nowrap;
}
html body .bp-brand .bp-brand-b {
color: var(--bp-primary) !important;
font-weight: 900;
}
/* ---- Page-Hero (Subseiten) ---- */
.section-page-hero {
padding: 80px 0 32px;
background: var(--bp-light);
text-align: center;
}
.section-page-hero .page-title {
font-size: clamp(36px, 4vw, 56px);
margin: 0 0 16px;
}
.section-page-hero .page-lead {
color: var(--bp-gray);
font-size: 18px;
max-width: 640px;
margin: 0 auto;
}
/* ---- Vergleichs-Tabelle ---- */
.compare-table {
width: 100%;
border-collapse: collapse;
margin-top: 24px;
}
.compare-table th,
.compare-table td {
padding: 16px 20px;
text-align: left;
border-bottom: 1px solid var(--bp-border);
}
.compare-table thead th {
background: var(--bp-light);
font-weight: 700;
}
.compare-table th.col-bphone,
.compare-table td.col-bphone {
color: var(--bp-primary);
font-weight: 700;
text-align: center;
}
.compare-table tbody td:not(:first-child) {
text-align: center;
}
/* ---- Kontakt ---- */
.contact-grid {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 56px;
align-items: start;
}
.contact-form label {
display: block;
margin-bottom: 16px;
}
.contact-form span {
display: block;
font-size: 14px;
font-weight: 500;
margin-bottom: 6px;
}
.contact-form input,
.contact-form textarea {
width: 100%;
padding: 12px 16px;
border: 1px solid var(--bp-border);
border-radius: var(--bp-radius);
font-family: inherit;
font-size: 16px;
}
.contact-form input:focus,
.contact-form textarea:focus {
outline: none;
border-color: var(--bp-primary);
}
.contact-info h3 {
margin-top: 0;
}
.contact-list {
list-style: none;
padding: 0;
margin: 0 0 32px;
}
.contact-list li {
margin-bottom: 12px;
line-height: 1.5;
}
.contact-list a {
color: var(--bp-dark);
}
.contact-list a:hover {
color: var(--bp-primary);
}
.contact-map iframe {
border-radius: var(--bp-radius);
}
.map-link {
display: inline-block;
margin-top: 8px;
font-size: 14px;
}
/* ---- Tarif-Tabellen (Grundgebühren, Flatrates, Minutentarife, Rufnummern) ---- */
html body .tariff-section {
padding: 64px 0;
}
html body .tariff-section + .tariff-section {
padding-top: 32px;
}
html body .tariff-section h2 {
font-size: clamp(24px, 2.5vw, 34px) !important;
text-align: center;
margin: 0 0 12px !important;
color: var(--bp-dark) !important;
font-weight: 900;
text-transform: uppercase;
letter-spacing: -.01em;
}
html body .tariff-section .tariff-lead {
text-align: center;
color: var(--bp-gray-2) !important;
max-width: 640px;
margin: 0 auto 36px;
font-size: 16px;
}
html body .tariff-table {
width: 100%;
border-collapse: collapse;
background: var(--bp-white);
border: 1px solid var(--bp-border);
border-radius: var(--bp-radius-lg) !important;
overflow: hidden;
margin: 0 0 16px;
font-size: 15px;
}
html body .tariff-table th,
html body .tariff-table td {
padding: 14px 20px;
text-align: left;
border-bottom: 1px solid var(--bp-border);
vertical-align: middle;
}
html body .tariff-table thead th {
background: var(--bp-light);
font-weight: 700;
color: var(--bp-dark);
font-size: 13px;
text-transform: uppercase;
letter-spacing: .04em;
}
html body .tariff-table tbody tr:last-child td {
border-bottom: 0;
}
html body .tariff-table .col-num {
text-align: right;
font-variant-numeric: tabular-nums;
color: var(--bp-primary) !important;
font-weight: 700;
white-space: nowrap;
}
html body .tariff-table .col-num--neutral {
color: var(--bp-dark) !important;
font-weight: 600;
}
html body .tariff-table .col-num--muted {
color: var(--bp-gray-2) !important;
font-weight: 500;
}
html body .tariff-table small {
color: var(--bp-gray-2);
font-weight: 400;
margin-left: 4px;
}
html body .tariff-footnote {
color: var(--bp-gray-2) !important;
font-size: 13px;
line-height: 1.6;
text-align: center;
margin: 16px auto 0;
max-width: 760px;
}
html body .tariff-footnote small {
display: block;
margin-top: 4px;
}
/* ---- AZ-Index für Minutentarife ---- */
html body .az-index {
position: sticky;
top: 88px;
z-index: 50;
display: flex;
flex-wrap: wrap;
gap: 4px;
background: var(--bp-white);
padding: 12px 0;
margin: 0 0 16px;
border-bottom: 1px solid var(--bp-border);
list-style: none !important;
justify-content: center;
}
html body.admin-bar .az-index {
top: 120px;
}
html body .az-index li {
list-style: none !important;
}
html body .az-index a {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 8px;
color: var(--bp-gray-2) !important;
font-weight: 700;
font-size: 14px;
text-decoration: none !important;
transition: background-color .15s, color .15s;
}
html body .az-index a:hover,
html body .az-index a:focus {
background: var(--bp-light) !important;
color: var(--bp-dark) !important;
}
html body .az-index .is-empty {
color: var(--bp-border) !important;
pointer-events: none;
cursor: default;
}
html body .country-row {
scroll-margin-top: 140px;
}
html body.admin-bar .country-row {
scroll-margin-top: 172px;
}
html body .country-row.is-letter-anchor {
background: rgba(227,6,19,.04);
}
html body .country-row .country-letter-tag {
display: inline-block;
width: 22px;
height: 22px;
line-height: 22px;
text-align: center;
background: var(--bp-primary);
color: var(--bp-white);
border-radius: 6px;
font-size: 11px;
font-weight: 700;
margin-right: 8px;
}
/* ---- Info-Box-Grid (Portierung-Page) ---- */
html body .info-box-grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin: 0 0 48px;
padding: 0;
list-style: none;
}
html body .info-box {
background: var(--bp-light) !important;
padding: 28px;
border-radius: var(--bp-radius-lg);
border: 1px solid var(--bp-border);
list-style: none;
}
html body .info-box h3 {
font-size: 18px !important;
font-weight: 700 !important;
color: var(--bp-dark) !important;
margin: 0 0 8px !important;
text-transform: none;
letter-spacing: 0;
}
html body .info-box p {
margin: 0;
color: var(--bp-gray) !important;
font-size: 15px;
line-height: 1.55;
}
@media (max-width: 720px) {
html body .info-box-grid {
grid-template-columns: 1fr;
}
html body .tariff-table {
font-size: 13px;
}
html body .tariff-table th,
html body .tariff-table td {
padding: 10px 12px;
}
html body .az-index {
gap: 2px;
}
html body .az-index a {
width: 28px;
height: 28px;
font-size: 12px;
}
}
/* ========================================================================
Konfigurator (page-preise.php)
======================================================================== */
html body .konfig-hero {
text-align: left;
padding: 64px 0 32px !important;
}
html body .konfig-hero .konfig-hero-grid {
display: grid !important;
grid-template-columns: 1.2fr 1fr;
gap: 48px;
align-items: center;
}
html body .konfig-hero-eyebrow {
display: inline-block;
text-transform: uppercase;
letter-spacing: .12em;
font-size: 13px;
font-weight: 700;
color: var(--bp-primary) !important;
margin-bottom: 12px;
}
html body .konfig-hero .page-title {
text-align: left !important;
margin: 0 0 16px !important;
font-size: clamp(40px, 5vw, 64px) !important;
}
html body .konfig-hero .page-lead {
text-align: left !important;
margin: 0 !important;
color: var(--bp-gray) !important;
max-width: 560px;
}
html body .konfig-hero-visual .swiss-map {
max-width: 360px;
margin-left: auto;
}
html body .section-konfig {
padding: 48px 0 96px !important;
background: var(--bp-light);
}
html body .konfig-grid {
display: grid !important;
grid-template-columns: 1fr 360px;
gap: 32px;
align-items: start;
}
html body .konfig-form {
display: flex !important;
flex-direction: column;
gap: 20px;
margin: 0;
padding: 0;
border: 0;
}
/* ---- Step (Fieldset) ---- */
html body .konfig-step {
background: var(--bp-white) !important;
border: 1px solid var(--bp-border);
border-radius: var(--bp-radius-lg);
padding: 28px 32px 24px !important;
margin: 0;
}
html body .konfig-step legend {
display: inline-flex;
align-items: center;
gap: 14px;
margin-bottom: 18px;
padding: 0;
font-weight: 700;
color: var(--bp-dark) !important;
}
html body .konfig-step-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: var(--bp-dark);
color: var(--bp-white) !important;
border-radius: 8px;
font-size: 14px;
font-weight: 900;
letter-spacing: -.02em;
}
html body .konfig-step-title {
font-size: 17px;
text-transform: uppercase;
letter-spacing: .04em;
}
/* ---- Options (Auswahl-Karten) ---- */
html body .konfig-options {
display: grid !important;
gap: 14px;
}
html body .konfig-options--2 { grid-template-columns: repeat(2, 1fr); }
html body .konfig-options--3 { grid-template-columns: repeat(3, 1fr); transition: grid-template-columns .25s ease; }
html body .konfig-options--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) {
html body .konfig-options--5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
html body .konfig-options--5 { grid-template-columns: 1fr; }
}
/* Wenn Hosted-3CX aktiv: Karte deutlich breiter, andere schmaler */
html body .konfig-options--3:has(.konfig-option--solution[data-id="hosted3cx"] > input[name="loesung"]:checked) {
grid-template-columns: 0.85fr 2.1fr 0.85fr;
}
html body .konfig-options--4 { grid-template-columns: repeat(2, 1fr); }
html body .konfig-option {
position: relative;
display: flex !important;
align-items: flex-start;
gap: 14px;
padding: 16px 18px;
background: var(--bp-white) !important;
border: 1.5px solid var(--bp-border);
border-radius: var(--bp-radius);
cursor: pointer;
transition: border-color .15s, box-shadow .15s, background-color .15s;
}
html body .konfig-option input[type="radio"],
html body .konfig-option input[type="checkbox"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
html body .konfig-option:hover {
border-color: var(--bp-gray-2);
}
html body .konfig-option:has(> input[type="radio"]:checked),
html body .konfig-option:has(> input[type="checkbox"]:checked) {
border-color: var(--bp-primary) !important;
background: rgba(227,6,19,.04) !important;
}
html body .konfig-option--solution {
display: flex !important;
flex-direction: column;
padding: 0 !important;
gap: 0;
overflow: hidden;
}
html body .konfig-option--solution[hidden] {
display: none !important;
}
html body .konfig-solution-handle {
display: flex !important;
flex-direction: column;
align-items: center;
text-align: center;
padding: 28px 20px 24px;
gap: 8px;
cursor: pointer;
position: relative;
flex: 1 1 auto; /* Label füllt die volle Card-Höhe (klickbar überall) */
}
/* Outer Radio versteckt; Inner-Inputs (License, SC, Self-Host) bleiben sichtbar */
html body .konfig-option--solution > input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
width: 1px;
height: 1px;
}
/* 3CX Detail-Panel: standardmässig versteckt, sichtbar wenn Card aktiv */
html body .konfig-option--solution .konfig-3cx-detail {
display: none;
border-top: 1px solid var(--bp-border);
padding: 18px 22px 22px;
background: var(--bp-light);
text-align: left;
}
html body .konfig-option--solution:has(> input[type="radio"]:checked) .konfig-3cx-detail {
display: block;
}
html body .konfig-3cx-row-label {
display: flex !important;
align-items: center;
gap: 8px;
margin-bottom: 10px;
font-size: 11px;
color: var(--bp-gray-2);
text-transform: uppercase;
letter-spacing: .06em;
font-weight: 700;
}
html body .konfig-info-icon {
color: var(--bp-gray-2);
cursor: help;
font-size: 14px;
}
html body .konfig-3cx-row {
display: grid !important;
grid-template-columns: 1.2fr 1fr 1fr 1fr;
gap: 10px;
align-items: stretch;
margin-bottom: 14px;
}
html body .konfig-3cx-sc {
appearance: none;
-webkit-appearance: none;
background: var(--bp-white);
border: 1.5px solid var(--bp-border);
border-radius: var(--bp-radius);
padding: 10px 32px 10px 14px;
font-family: inherit;
font-size: 14px;
font-weight: 700;
color: var(--bp-dark);
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
}
html body .konfig-3cx-license,
html body .konfig-3cx-hosting {
display: flex !important;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 2px;
padding: 8px 12px;
border: 1.5px solid var(--bp-border);
border-radius: var(--bp-radius);
background: var(--bp-white);
cursor: pointer;
transition: border-color .15s, color .15s;
}
html body .konfig-3cx-license input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
html body .konfig-3cx-license-label {
font-size: 10px;
color: var(--bp-gray-2);
text-transform: uppercase;
letter-spacing: .06em;
font-weight: 700;
}
html body .konfig-3cx-license-price {
font-size: 18px;
font-weight: 900;
color: var(--bp-dark);
letter-spacing: -.02em;
}
html body .konfig-3cx-license:has(input:checked) {
border-color: var(--bp-primary);
background: rgba(227,6,19,.04);
}
html body .konfig-3cx-license:has(input:checked) .konfig-3cx-license-price {
color: var(--bp-primary);
}
html body .konfig-3cx-hosting {
cursor: default;
border-color: var(--bp-primary);
}
html body .konfig-3cx-hosting .konfig-3cx-license-price {
color: var(--bp-primary);
}
html body .konfig-3cx-hosting.is-disabled {
border-color: var(--bp-border);
opacity: .55;
}
html body .konfig-3cx-hosting.is-disabled .konfig-3cx-license-price {
color: var(--bp-gray-2);
text-decoration: line-through;
}
html body .konfig-3cx-selfhost {
display: flex !important;
align-items: flex-start;
gap: 12px;
padding: 10px 12px;
background: var(--bp-white);
border: 1.5px solid var(--bp-border);
border-radius: var(--bp-radius);
cursor: pointer;
}
html body .konfig-3cx-selfhost input[type="checkbox"] {
position: relative;
width: 18px;
height: 18px;
margin-top: 2px;
accent-color: var(--bp-primary);
flex-shrink: 0;
opacity: 1;
pointer-events: auto;
}
html body .konfig-3cx-selfhost-body {
display: flex;
flex-direction: column;
gap: 2px;
}
html body .konfig-3cx-selfhost-body strong {
font-size: 13px;
color: var(--bp-dark);
font-weight: 700;
}
html body .konfig-3cx-selfhost-body small {
font-size: 12px;
color: var(--bp-gray-2);
line-height: 1.4;
}
html body .konfig-3cx-selfhost:has(input:checked) {
border-color: var(--bp-primary);
background: rgba(227,6,19,.04);
}
@media (max-width: 600px) {
html body .konfig-3cx-row {
grid-template-columns: 1fr 1fr;
}
}
html body .konfig-solution-icon {
width: 36px;
height: 36px;
color: var(--bp-primary) !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
margin-bottom: 4px;
}
html body .konfig-solution-icon svg {
width: 100%;
height: 100%;
}
html body .konfig-solution-title {
font-size: 17px;
font-weight: 900;
color: var(--bp-dark) !important;
line-height: 1.15;
}
html body .konfig-solution-sub {
font-size: 12px;
color: var(--bp-gray-2) !important;
text-transform: uppercase;
letter-spacing: .04em;
}
html body .konfig-solution-desc {
font-size: 13px;
color: var(--bp-gray-2) !important;
line-height: 1.5;
margin: 6px 0 12px;
}
html body .konfig-solution-price {
font-size: 26px;
font-weight: 900;
color: var(--bp-primary) !important;
letter-spacing: -.02em;
line-height: 1;
}
html body .konfig-solution-unit {
font-size: 12px;
color: var(--bp-gray-2) !important;
text-transform: uppercase;
letter-spacing: .04em;
}
html body .konfig-solution-unit--note {
color: var(--bp-primary) !important;
font-weight: 700;
margin-top: 8px;
}
html body .konfig-solution-note {
font-size: 11px;
color: var(--bp-gray-2) !important;
text-transform: uppercase;
letter-spacing: .04em;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid var(--bp-border);
width: 100%;
}
/* Tick-Marker oben rechts auf selektierten Cards */
html body .konfig-option-tick {
position: absolute;
top: 12px;
right: 12px;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--bp-primary);
color: var(--bp-white) !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
opacity: 0;
transform: scale(.7);
transition: opacity .15s, transform .15s;
pointer-events: none;
}
html body .konfig-option-tick svg {
width: 14px;
height: 14px;
}
html body .konfig-option:has(> input[type="radio"]:checked) .konfig-option-tick,
html body .konfig-option:has(> input[type="checkbox"]:checked) .konfig-option-tick {
opacity: 1;
transform: scale(1);
}
html body .konfig-option.is-disabled {
opacity: .45;
cursor: not-allowed;
}
/* Step-Hint (Empfehlung / Info-Zeile unter einer Stufe) */
html body .konfig-step-hint {
display: flex !important;
align-items: flex-start;
gap: 10px;
margin: 16px 0 0;
padding: 12px 14px;
background: var(--bp-light);
border-radius: var(--bp-radius);
font-size: 13px;
color: var(--bp-gray) !important;
line-height: 1.45;
}
html body .konfig-step-hint .konfig-hint-icon {
flex-shrink: 0;
color: var(--bp-primary);
font-weight: 700;
font-size: 16px;
}
html body .konfig-step-hint span {
color: var(--bp-dark) !important;
font-weight: 700;
}
html body .konfig-step-hint[data-recommendation-hint] {
border-left: 3px solid var(--bp-primary);
display: none !important;
}
html body .konfig-step-hint[data-recommendation-hint].is-active {
display: flex !important;
}
html body .konfig-step-hint-inline {
color: var(--bp-gray-2) !important;
font-size: 12px;
font-weight: 500;
text-transform: none;
letter-spacing: 0;
margin-left: 6px;
}
/* Stufe 03 Größe-Konfigurieren Layout */
html body .konfig-size-grid {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 24px;
align-items: stretch;
}
html body .konfig-size-stepper {
display: flex !important;
flex-direction: column;
gap: 14px;
}
html body .konfig-size-stepper .konfig-stepper-label {
font-size: 14px;
font-weight: 700;
color: var(--bp-dark);
}
html body .konfig-stepper--lg .konfig-stepper-controls {
border-radius: var(--bp-radius);
}
html body .konfig-stepper--lg .konfig-stepper-btn {
width: 44px;
height: 44px;
font-size: 22px;
}
html body .konfig-stepper--lg input[type="number"] {
width: 70px;
height: 44px;
font-size: 18px;
font-weight: 900;
}
html body .konfig-size-perunit {
margin: 0;
font-size: 13px;
color: var(--bp-dark) !important;
font-weight: 700;
}
html body .konfig-size-perunit span {
color: var(--bp-gray-2) !important;
font-weight: 500;
text-transform: uppercase;
letter-spacing: .04em;
}
html body .konfig-size-summary {
background: var(--bp-light);
border-radius: var(--bp-radius);
padding: 18px 22px;
display: grid !important;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
gap: 4px 16px;
align-items: center;
}
html body .konfig-size-summary-label {
grid-column: 1 / -1;
font-size: 11px;
color: var(--bp-gray-2) !important;
text-transform: uppercase;
letter-spacing: .04em;
font-weight: 700;
}
html body .konfig-size-summary-value {
display: flex;
align-items: baseline;
gap: 8px;
}
html body .konfig-size-summary-value strong {
font-size: 24px;
color: var(--bp-dark) !important;
font-weight: 900;
}
html body .konfig-size-summary-value span {
font-size: 13px;
color: var(--bp-gray-2) !important;
text-transform: uppercase;
letter-spacing: .04em;
}
html body .konfig-size-summary-amount {
font-size: 26px;
color: var(--bp-primary) !important;
font-weight: 900;
letter-spacing: -.02em;
text-align: right;
}
html body .konfig-size-summary-unit {
grid-column: 2;
font-size: 11px;
color: var(--bp-gray-2) !important;
text-transform: uppercase;
letter-spacing: .04em;
text-align: right;
}
/* Stufe 03 — Karten-Variante (SIP Trunk / Hosted 3CX) */
html body .konfig-size-cards {
display: grid;
grid-template-columns: 1fr;
gap: 18px;
}
/* hidden-Attribut muss !important-Display der Varianten schlagen */
html body [data-size-variant][hidden] {
display: none !important;
}
html body .konfig-size-options {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
@media (max-width: 720px) {
html body .konfig-size-options { grid-template-columns: 1fr; }
}
html body .konfig-option--size {
position: relative;
display: flex;
flex-direction: column;
gap: 12px;
padding: 22px 22px 20px;
cursor: pointer;
}
html body .konfig-option--size > input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
html body .konfig-size-card-handle {
display: flex;
flex-direction: column;
gap: 4px;
cursor: pointer;
}
html body .konfig-size-card-title {
font-size: 18px;
font-weight: 800;
color: var(--bp-dark) !important;
letter-spacing: -.01em;
}
html body .konfig-size-card-sub {
font-size: 13px;
color: var(--bp-gray-2) !important;
}
html body .konfig-size-card-stepper {
margin-top: 4px;
}
html body .konfig-size-card-price {
font-size: 22px;
font-weight: 900;
color: var(--bp-primary) !important;
letter-spacing: -.02em;
}
html body .konfig-stepper--md .konfig-stepper-controls {
display: inline-flex;
align-items: center;
gap: 4px;
}
html body .konfig-stepper--md .konfig-stepper-btn {
width: 36px;
height: 36px;
font-size: 18px;
border: 1px solid var(--bp-border);
background: #fff;
border-radius: var(--bp-radius);
cursor: pointer;
}
html body .konfig-stepper--md input[type="number"] {
width: 64px;
height: 36px;
text-align: center;
font-size: 18px;
font-weight: 700;
border: 1px solid var(--bp-border);
border-radius: var(--bp-radius);
-moz-appearance: textfield;
}
html body .konfig-stepper--md input[type="number"]::-webkit-outer-spin-button,
html body .konfig-stepper--md input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Stufe 04 Toggle */
html body .konfig-toggle-group {
display: inline-flex !important;
background: var(--bp-light);
border: 1px solid var(--bp-border);
border-radius: 999px;
padding: 4px;
margin-bottom: 18px;
}
html body .konfig-toggle {
cursor: pointer;
}
html body .konfig-toggle input {
position: absolute;
opacity: 0;
pointer-events: none;
}
html body .konfig-toggle span {
display: inline-flex;
align-items: center;
padding: 8px 16px;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
color: var(--bp-gray-2);
transition: background-color .15s, color .15s;
}
html body .konfig-toggle:has(input:checked) span {
background: var(--bp-primary);
color: var(--bp-white) !important;
}
html body .konfig-rufnummern-grid {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 24px;
align-items: center;
}
html body .konfig-stepper--inline {
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 16px;
}
/* Feature-List mit roten Häkchen */
html body .konfig-feature-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: grid;
gap: 8px;
}
html body .konfig-feature-list li {
display: flex !important;
align-items: center;
gap: 10px;
list-style: none !important;
font-size: 13px;
color: var(--bp-dark);
}
html body .konfig-feature-tick {
flex-shrink: 0;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--bp-primary);
color: var(--bp-white) !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
}
html body .konfig-feature-tick svg {
width: 12px;
height: 12px;
}
html body .konfig-feature-list li.is-not-available {
color: var(--bp-gray-2);
}
html body .konfig-feature-list li.is-not-available .konfig-feature-tick {
background: var(--bp-gray-2);
}
/* Stufe 05 Flatrate-Cards (Vertikal) */
html body .konfig-options--4 {
grid-template-columns: repeat(4, 1fr);
}
html body .konfig-option--flat {
flex-direction: column;
align-items: flex-start;
text-align: left;
padding: 18px 20px 20px;
gap: 4px;
}
html body .konfig-flat-icon {
width: 32px;
height: 32px;
color: var(--bp-primary) !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
margin-bottom: 8px;
}
html body .konfig-option--flat[data-id="eu_fix"] .konfig-flat-icon,
html body .konfig-option--flat[data-id="eu_fixmobile"] .konfig-flat-icon {
color: #003399 !important;
}
html body .konfig-flat-icon svg {
width: 100%;
height: 100%;
}
html body .konfig-flat-title {
font-size: 14px;
font-weight: 900;
color: var(--bp-dark) !important;
text-transform: uppercase;
letter-spacing: .02em;
}
html body .konfig-flat-desc {
font-size: 12px;
color: var(--bp-gray-2) !important;
line-height: 1.45;
margin-bottom: 8px;
}
html body .konfig-flat-price {
font-size: 20px;
font-weight: 900;
color: var(--bp-primary) !important;
letter-spacing: -.02em;
}
html body .konfig-flat-unit {
font-size: 11px;
color: var(--bp-gray-2) !important;
text-transform: uppercase;
letter-spacing: .04em;
}
/* Sidebar Block-Struktur */
html body .konfig-summary-blocks {
display: flex !important;
flex-direction: column;
gap: 14px;
margin-bottom: 22px;
padding-bottom: 22px;
border-bottom: 1px solid var(--bp-border);
}
html body .konfig-summary-block {
display: flex !important;
flex-direction: column;
gap: 4px;
}
html body .konfig-summary-block[hidden] {
display: none !important;
}
html body .konfig-summary-block-label {
font-size: 10px;
color: var(--bp-gray-2) !important;
text-transform: uppercase;
letter-spacing: .08em;
font-weight: 700;
}
html body .konfig-summary-block-row {
display: flex !important;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
html body .konfig-summary-block-icon {
flex-shrink: 0;
width: 22px;
height: 22px;
color: var(--bp-primary) !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
font-weight: 700;
}
html body .konfig-summary-block-icon svg {
width: 100%;
height: 100%;
}
html body .konfig-summary-block-text {
font-size: 14px;
font-weight: 700;
color: var(--bp-dark) !important;
flex: 1 1 auto;
min-width: 0;
}
html body .konfig-summary-block-amount {
font-size: 13px;
font-weight: 700;
color: var(--bp-dark) !important;
white-space: nowrap;
}
html body .konfig-summary-block-sub {
font-size: 11px;
color: var(--bp-gray-2) !important;
margin-left: 32px;
}
html body .konfig-summary-flat-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: grid;
gap: 4px;
}
html body .konfig-summary-flat-list li {
display: flex !important;
justify-content: space-between;
gap: 12px;
list-style: none !important;
font-size: 13px;
color: var(--bp-dark);
}
html body .konfig-summary-flat-list li span:last-child {
font-weight: 700;
color: var(--bp-dark) !important;
white-space: nowrap;
}
/* Total-Anzeige groß rot */
html body .konfig-total {
display: grid !important;
grid-template-columns: 1fr;
gap: 4px;
margin-bottom: 18px;
}
html body .konfig-total-label {
font-size: 11px;
color: var(--bp-gray-2) !important;
text-transform: uppercase;
letter-spacing: .08em;
font-weight: 700;
}
html body .konfig-total-amount {
font-size: 40px;
color: var(--bp-primary) !important;
font-weight: 900;
letter-spacing: -.03em;
line-height: 1;
}
html body .konfig-total-unit {
font-size: 13px;
color: var(--bp-gray-2) !important;
text-transform: uppercase;
letter-spacing: .04em;
}
html body .konfig-total-note {
font-size: 11px;
color: var(--bp-gray-2) !important;
margin-top: 4px;
}
html body .konfig-total-yearly {
display: block;
font-size: 12px;
color: var(--bp-gray-2) !important;
margin-top: 6px;
padding-top: 6px;
border-top: 1px dashed var(--bp-border);
font-weight: 500;
}
html body .konfig-total-yearly[hidden] {
display: none !important;
}
/* USP Bullet-Liste */
html body .konfig-usp {
list-style: none !important;
padding: 0 !important;
margin: 0 0 22px !important;
display: grid;
gap: 8px;
}
html body .konfig-usp li {
display: flex !important;
align-items: center;
gap: 10px;
list-style: none !important;
font-size: 13px;
color: var(--bp-dark);
}
/* Persönliche Beratung erweitert */
html body .konfig-help-hours {
display: block;
margin-top: 4px;
font-size: 12px;
color: var(--bp-gray-2) !important;
}
html body .konfig-option-icon {
flex-shrink: 0;
width: 32px;
height: 32px;
color: var(--bp-primary) !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
}
html body .konfig-option-icon svg {
width: 100%;
height: 100%;
}
html body .konfig-option-body {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1 1 auto;
min-width: 0;
}
html body .konfig-option-title {
font-size: 15px;
font-weight: 700;
color: var(--bp-dark) !important;
}
html body .konfig-option-sub {
font-size: 12px;
color: var(--bp-gray-2) !important;
text-transform: uppercase;
letter-spacing: .04em;
}
html body .konfig-option-desc {
font-size: 13px;
color: var(--bp-gray-2) !important;
line-height: 1.45;
}
html body .konfig-option-price {
display: flex;
flex-direction: column;
text-align: right;
margin-top: 12px;
}
html body .konfig-option-price strong {
font-size: 18px;
color: var(--bp-primary) !important;
font-weight: 900;
letter-spacing: -.02em;
}
html body .konfig-option-price small {
font-size: 11px;
color: var(--bp-gray-2) !important;
text-transform: uppercase;
letter-spacing: .04em;
}
/* ---- Stepper (Zahl mit +/-) ---- */
html body .konfig-stepper-row {
display: grid !important;
grid-template-columns: 1fr auto;
gap: 24px;
align-items: center;
}
html body .konfig-stepper {
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 16px;
}
html body .konfig-stepper-label {
font-size: 14px;
font-weight: 600;
color: var(--bp-dark) !important;
}
html body .konfig-stepper-controls {
position: relative;
display: inline-flex !important;
align-items: center;
border: 1px solid var(--bp-border);
border-radius: 999px;
overflow: hidden;
background: var(--bp-white);
}
html body .konfig-stepper-unlimited {
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 36px;
right: 36px;
align-items: center;
justify-content: center;
background: var(--bp-white);
color: var(--bp-primary) !important;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
pointer-events: none;
white-space: nowrap;
}
html body .konfig-stepper.is-unlimited .konfig-stepper-unlimited {
display: flex !important;
}
html body .konfig-stepper-btn {
width: 36px;
height: 36px;
border: 0;
background: var(--bp-white);
color: var(--bp-dark);
font-size: 20px;
font-weight: 700;
cursor: pointer;
}
html body .konfig-stepper-btn:hover {
background: var(--bp-light);
color: var(--bp-primary);
}
html body .konfig-stepper input[type="number"] {
width: 56px;
height: 36px;
border: 0;
text-align: center;
font-weight: 700;
color: var(--bp-dark);
background: transparent;
-moz-appearance: textfield;
}
html body .konfig-stepper input[type="number"]::-webkit-outer-spin-button,
html body .konfig-stepper input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
html body .konfig-line-total {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
}
html body .konfig-line-label {
font-size: 11px;
color: var(--bp-gray-2) !important;
text-transform: uppercase;
letter-spacing: .04em;
}
html body .konfig-line-amount {
font-size: 22px;
font-weight: 900;
color: var(--bp-primary) !important;
letter-spacing: -.02em;
}
/* ---- Sidebar (Summary) ---- */
html body .konfig-sidebar {
position: sticky;
top: 110px;
display: flex !important;
flex-direction: column;
gap: 16px;
}
html body.admin-bar .konfig-sidebar {
top: 142px;
}
html body .konfig-summary-card {
background: var(--bp-white) !important;
border-radius: var(--bp-radius-lg);
padding: 24px;
box-shadow: var(--bp-shadow-md);
border: 1px solid var(--bp-border);
}
html body .konfig-summary-card h3 {
font-size: 14px !important;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--bp-gray-2) !important;
margin: 0 0 16px !important;
font-weight: 700;
}
html body .konfig-summary-list {
list-style: none !important;
padding: 0 !important;
margin: 0 0 16px !important;
border-bottom: 1px solid var(--bp-border);
padding-bottom: 14px !important;
}
html body .konfig-summary-row {
display: flex !important;
justify-content: space-between;
align-items: baseline;
gap: 12px;
padding: 6px 0;
list-style: none !important;
font-size: 14px;
}
html body .konfig-summary-row[hidden] {
display: none !important;
}
html body .konfig-summary-label {
color: var(--bp-dark) !important;
flex: 1 1 auto;
min-width: 0;
}
html body .konfig-summary-amount {
font-weight: 700;
color: var(--bp-dark) !important;
white-space: nowrap;
}
html body .konfig-actions {
display: flex !important;
flex-direction: column;
gap: 8px;
}
html body .konfig-actions .btn {
width: 100%;
justify-content: center;
}
html body .konfig-help-card {
display: flex !important;
gap: 14px;
padding: 20px;
background: var(--bp-white) !important;
border-radius: var(--bp-radius-lg);
border: 1px solid var(--bp-border);
}
html body .konfig-help-icon {
flex-shrink: 0;
width: 32px;
height: 32px;
color: var(--bp-primary) !important;
}
html body .konfig-help-icon svg {
width: 100%;
height: 100%;
}
html body .konfig-help-card strong {
display: block;
font-size: 14px;
color: var(--bp-dark) !important;
margin-bottom: 4px;
}
html body .konfig-help-card p {
margin: 0 0 10px;
font-size: 13px;
color: var(--bp-gray-2) !important;
line-height: 1.4;
}
html body .konfig-help-phone {
font-size: 16px;
font-weight: 700;
color: var(--bp-primary) !important;
text-decoration: none !important;
}
@media (max-width: 1024px) {
html body .konfig-grid {
grid-template-columns: 1fr;
}
html body .konfig-sidebar {
position: static;
}
html body .konfig-options--3 {
grid-template-columns: 1fr;
}
html body .konfig-hero .konfig-hero-grid {
grid-template-columns: 1fr;
}
html body .konfig-hero-visual {
display: none;
}
}
@media (max-width: 600px) {
html body .konfig-options--2,
html body .konfig-options--4 {
grid-template-columns: 1fr;
}
html body .konfig-stepper-row {
grid-template-columns: 1fr;
gap: 12px;
}
html body .konfig-line-total {
align-items: flex-start;
}
html body .konfig-step {
padding: 22px 20px !important;
}
}
/* ---- 404 ---- */
.section-404 {
text-align: center;
padding: 120px 0;
}
.error-code {
font-size: 144px;
color: var(--bp-primary);
line-height: 1;
margin: 0 0 16px;
letter-spacing: -.05em;
}
.error-text {
font-size: 20px;
margin-bottom: 32px;
}
/* ---- Blog ---- */
.post-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
margin-bottom: 48px;
}
.post-card {
background: var(--bp-white);
border: 1px solid var(--bp-border);
border-radius: var(--bp-radius-lg);
padding: 24px;
}
.post-card .post-title {
font-size: 20px;
margin: 16px 0 8px;
}
.post-card .post-title a {
color: var(--bp-dark);
text-decoration: none;
}
.post-card .post-title a:hover {
color: var(--bp-primary);
}
.post-card .post-thumb img {
border-radius: var(--bp-radius);
}
.post-more {
font-weight: 600;
font-size: 14px;
}
.no-results {
text-align: center;
color: var(--bp-gray-2);
}
/* ---- Produkte-Page: Hero ---- */
.section-product-hero {
padding: 56px 0 0;
}
html body .section-product-hero .hero-grid {
align-items: center;
gap: 48px;
}
html body .hero-eyebrow {
margin: 0 0 16px !important;
color: var(--bp-primary) !important;
font-size: 14px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
}
.section-product-hero .hero-lead {
max-width: 520px;
margin: 0;
}
.hero-map {
position: relative;
width: 100%;
max-width: 460px;
}
html body .hero-map-badge {
position: absolute;
top: -8px;
right: -8px;
z-index: 2;
background: var(--bp-dark) !important;
color: var(--bp-white) !important;
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
padding: 6px 12px;
border-radius: 999px;
text-transform: uppercase;
}
html body .section-product-trust {
padding: 0 !important;
}
html body .product-trust-grid {
margin: 0 !important;
padding: 28px 0 !important;
border-bottom: 1px solid var(--bp-border);
}
/* ---- Produkte-Page: Produkt-Liste ---- */
html body .section-product-list {
padding: 48px 0 64px !important;
}
html body .product-list {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column;
gap: 16px;
}
html body .product-list li {
list-style: none !important;
margin: 0;
}
html body .product-row-link {
display: grid !important;
grid-template-columns: 64px 1fr auto 24px;
align-items: center;
gap: 24px;
padding: 24px 28px !important;
background: var(--bp-white) !important;
border: 1px solid var(--bp-border) !important;
border-radius: var(--bp-radius-lg) !important;
text-decoration: none !important;
color: var(--bp-dark) !important;
transition: border-color .15s, box-shadow .15s, transform .15s;
}
html body .product-row-link:hover {
border-color: var(--bp-primary) !important;
box-shadow: var(--bp-shadow-md);
transform: translateY(-1px);
text-decoration: none !important;
}
html body .product-icon {
width: 48px;
height: 48px;
color: var(--bp-primary) !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
html body .product-icon svg {
width: 100%;
height: 100%;
}
html body .product-title {
font-size: 22px !important;
font-weight: 900 !important;
margin: 0 0 6px !important;
color: var(--bp-dark) !important;
text-transform: uppercase;
letter-spacing: -.01em;
}
html body .product-text {
margin: 0 !important;
color: var(--bp-gray-2) !important;
font-size: 15px;
line-height: 1.5;
}
html body .product-price {
display: grid !important;
grid-template-columns: auto auto;
grid-template-rows: auto auto auto;
column-gap: 6px;
row-gap: 0;
align-items: baseline;
text-align: right;
min-width: 130px;
}
html body .product-price .ab {
grid-column: 1;
grid-row: 1;
font-size: 13px;
color: var(--bp-gray-2) !important;
font-weight: 500;
text-align: right;
}
html body .product-price .amount {
grid-column: 2;
grid-row: 1;
font-size: 28px;
font-weight: 900;
color: var(--bp-primary) !important;
letter-spacing: -.02em;
line-height: 1;
}
html body .product-price .unit {
grid-column: 1 / -1;
grid-row: 2;
font-size: 13px;
color: var(--bp-gray-2) !important;
text-align: right;
margin-top: 2px;
}
html body .product-price .note {
grid-column: 1 / -1;
grid-row: 3;
font-size: 12px;
color: var(--bp-gray-2) !important;
text-align: right;
margin-top: 2px;
}
html body .product-arrow {
color: var(--bp-primary) !important;
font-size: 20px;
font-weight: 700;
line-height: 1;
transition: transform .15s;
}
html body .product-row-link:hover .product-arrow {
transform: translateX(4px);
}
/* ---- Produkte-Page: Lösungen ---- */
html body .section-solutions {
padding: 96px 0 !important;
background: var(--bp-light) !important;
}
html body .section-solutions .section-lead {
text-align: center !important;
color: var(--bp-gray-2) !important;
max-width: 640px;
margin: -32px auto 56px !important;
font-size: 16px;
}
html body .solutions-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
list-style: none !important;
margin: 0 0 48px !important;
padding: 0 !important;
}
html body .solution-card {
list-style: none !important;
background: var(--bp-white) !important;
border: 1px solid var(--bp-border);
border-radius: var(--bp-radius-lg);
padding: 32px 24px;
text-align: center;
}
html body .solution-icon {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
color: var(--bp-primary) !important;
margin-bottom: 16px;
}
html body .solution-icon svg {
width: 100%;
height: 100%;
}
html body .solution-title {
font-size: 17px !important;
font-weight: 700 !important;
margin: 0 0 8px !important;
color: var(--bp-dark) !important;
text-transform: none;
letter-spacing: 0;
}
html body .solution-text {
margin: 0;
color: var(--bp-gray-2) !important;
font-size: 14px;
line-height: 1.5;
}
html body .solutions-cta {
text-align: center;
}
/* ---- Produkte-Page: Detail-Content (optionaler WP-Content) ---- */
.section-products-detail {
padding: 64px 0;
}
/* ========================================================================
Bestell-Wizard (page-bestellen.php)
======================================================================== */
html body .section-bestellen {
padding: 56px 0 96px !important;
background: var(--bp-bg, #fafafa) !important;
}
/* ---- Stepper ---- */
html body .bestellen-stepper {
list-style: none !important;
margin: 0 auto 56px !important;
padding: 0 !important;
display: grid;
grid-template-columns: repeat(4, 1fr);
align-items: start;
gap: 0;
max-width: 720px;
position: relative;
}
html body .bestellen-step {
display: flex !important;
flex-direction: column;
align-items: center;
gap: 10px;
position: relative;
text-align: center;
z-index: 1;
}
html body .bestellen-step:not(:last-child)::after {
content: '';
position: absolute;
top: 22px;
left: calc(50% + 26px);
right: calc(-50% + 26px);
height: 2px;
background: var(--bp-border, #e5e5e5);
z-index: -1;
}
html body .bestellen-step.is-done:not(:last-child)::after,
html body .bestellen-step.is-current:not(:last-child)::after {
background: var(--bp-primary, #E30613);
}
html body .bestellen-step-link {
display: flex !important;
flex-direction: column;
align-items: center;
gap: 10px;
text-decoration: none !important;
color: inherit !important;
}
html body .bestellen-step-link:hover .bestellen-step-circle {
border-color: var(--bp-primary, #E30613);
}
html body .bestellen-step-link:hover .bestellen-step-label {
color: var(--bp-primary, #E30613);
}
html body .bestellen-step-circle {
width: 44px;
height: 44px;
border-radius: 50%;
background: #fff;
border: 2px solid var(--bp-border, #e5e5e5);
color: #999;
display: inline-flex;
align-items: center;
justify-content: center;
}
html body .bestellen-step-circle svg { width: 20px; height: 20px; }
html body .bestellen-step.is-done .bestellen-step-circle,
html body .bestellen-step.is-current .bestellen-step-circle {
background: var(--bp-primary, #E30613);
border-color: var(--bp-primary, #E30613);
color: #fff;
}
html body .bestellen-step-label {
font-size: 13px;
font-weight: 500;
color: #999;
letter-spacing: 0.02em;
}
html body .bestellen-step.is-current .bestellen-step-label {
color: var(--bp-primary, #E30613);
font-weight: 700;
}
html body .bestellen-step.is-done .bestellen-step-label {
color: #555;
}
/* ---- Grid: Main + Aside ---- */
html body .bestellen-grid {
display: grid;
grid-template-columns: 1fr 340px;
gap: 32px;
align-items: start;
}
/* ---- Main ---- */
html body .bestellen-head {
margin-bottom: 24px;
}
html body .bestellen-title {
font-size: clamp(24px, 2.5vw, 32px) !important;
margin: 0 0 6px !important;
line-height: 1.15;
}
html body .bestellen-sub {
color: #666;
margin: 0 !important;
}
html body .bestellen-recap {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
background: #fff;
border: 1px solid var(--bp-border, #e5e5e5);
border-radius: 12px;
padding: 18px 24px;
margin-bottom: 32px;
}
html body .bestellen-recap-item {
padding: 4px 16px;
border-right: 1px solid var(--bp-border, #e5e5e5);
}
html body .bestellen-recap-item:last-child { border-right: 0; }
html body .bestellen-recap-item:first-child { padding-left: 0; }
html body .bestellen-recap-item:last-child { padding-right: 0; }
html body .bestellen-recap-label {
display: block;
font-size: 11px;
font-weight: 600;
color: #999;
letter-spacing: 0.08em;
margin-bottom: 6px;
}
html body .bestellen-recap-body {
display: flex;
align-items: center;
gap: 12px;
}
html body .bestellen-recap-icon {
color: var(--bp-primary, #E30613);
flex: 0 0 auto;
}
html body .bestellen-recap-icon svg { width: 22px; height: 22px; }
html body .bestellen-recap-body strong { display: block; font-size: 15px; }
html body .bestellen-recap-body small { display: block; color: #666; font-size: 13px; margin-top: 2px; }
/* ---- Section + Tabelle ---- */
html body .bestellen-section { margin-bottom: 32px; }
html body .bestellen-section-title {
font-size: 18px !important;
margin: 0 0 16px !important;
font-weight: 600;
}
html body .bestellen-table {
background: #fff;
border: 1px solid var(--bp-border, #e5e5e5);
border-radius: 12px;
padding: 8px 16px 16px;
}
html body .bestellen-table-head,
html body .bestellen-table-row {
display: grid;
grid-template-columns: 56px 1fr 1.4fr 1.2fr 56px;
gap: 12px;
align-items: center;
}
html body .bestellen-table-head {
padding: 12px 0 8px;
font-size: 12px;
font-weight: 600;
color: #999;
letter-spacing: 0.05em;
border-bottom: 1px solid var(--bp-border, #e5e5e5);
}
html body .bestellen-table-row {
padding: 10px 0;
border-bottom: 1px solid #f0f0f0;
}
html body .bestellen-table-row:last-child { border-bottom: 0; }
html body .bestellen-table-row .col-num {
color: #888;
font-size: 14px;
text-align: left;
}
html body .bestellen-table-row select,
html body .bestellen-table-row input[type="text"] {
width: 100%;
border: 1px solid var(--bp-border, #e5e5e5) !important;
border-radius: 8px !important;
padding: 9px 12px !important;
font-size: 14px !important;
background: #fff !important;
font-family: inherit !important;
}
html body .col-nummer { position: relative; }
html body .col-nummer-hint {
display: none;
color: #999;
font-size: 13px;
font-style: italic;
padding: 9px 12px;
}
html body .bestellen-table-row[data-typ="neu"] .col-nummer input { display: none; }
html body .bestellen-table-row[data-typ="neu"] .col-nummer-hint { display: block; }
html body .bestellen-table-row select:focus,
html body .bestellen-table-row input[type="text"]:focus {
outline: 2px solid var(--bp-primary, #E30613);
outline-offset: -1px;
border-color: var(--bp-primary, #E30613) !important;
}
html body .bestellen-row-remove {
background: transparent;
border: 0;
color: var(--bp-primary, #E30613);
cursor: pointer;
padding: 6px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
}
html body .bestellen-row-remove:hover { background: #fff0f1; }
html body .bestellen-row-remove svg { width: 18px; height: 18px; }
html body .bestellen-row-add {
width: 100%;
margin-top: 12px;
padding: 14px;
background: #fff;
border: 1px dashed var(--bp-primary, #E30613) !important;
color: var(--bp-primary, #E30613);
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
html body .bestellen-row-add:hover { background: #fff7f7; }
html body .bestellen-row-add-icon { display: inline-flex; }
html body .bestellen-row-add-icon svg { width: 16px; height: 16px; }
/* ---- Footer (Zurück / Weiter) ---- */
html body .bestellen-foot {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 32px;
}
html body .bestellen-back {
color: var(--bp-primary, #E30613);
text-decoration: none;
font-size: 14px;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 6px;
}
html body .bestellen-back:hover { text-decoration: underline; }
html body .bestellen-next { padding: 12px 28px !important; }
/* ---- Sidebar (Aside) ---- */
html body .bestellen-aside { position: sticky; top: 24px; }
html body .bestellen-summary {
background: #fff;
border: 1px solid var(--bp-border, #e5e5e5);
border-radius: 12px;
padding: 24px;
}
html body .bestellen-summary-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
html body .bestellen-summary-head h2 {
font-size: 18px !important;
margin: 0 !important;
font-weight: 600;
}
html body .bestellen-toggle {
display: inline-flex;
background: var(--bp-bg, #f5f5f5);
border-radius: 999px;
padding: 3px;
}
html body .bestellen-toggle-btn {
background: transparent;
border: 0;
padding: 6px 14px;
font-size: 12px;
font-weight: 500;
color: #666;
border-radius: 999px;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
html body .bestellen-toggle-btn.is-active {
background: #1a1a1a;
color: #fff;
}
html body .bestellen-summary-section {
color: var(--bp-primary, #E30613);
font-size: 14px !important;
font-weight: 700;
margin: 4px 0 12px !important;
padding-top: 4px;
border-top: 1px solid var(--bp-border, #e5e5e5);
}
html body .bestellen-summary-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid #f3f3f3;
}
html body .bestellen-summary-row:last-of-type { border-bottom: 0; }
html body .bestellen-summary-label strong { display: block; font-size: 14px; font-weight: 600; }
html body .bestellen-summary-label small { display: block; font-size: 12px; color: #666; margin-top: 2px; }
html body .bestellen-summary-amount { font-weight: 600; font-size: 14px; white-space: nowrap; }
html body .bestellen-summary-total {
display: flex;
align-items: baseline;
gap: 6px;
flex-wrap: wrap;
margin: 16px 0 4px;
padding-top: 12px;
border-top: 1px solid var(--bp-border, #e5e5e5);
}
html body .bestellen-summary-total-label {
flex: 1;
color: var(--bp-primary, #E30613);
font-weight: 700;
font-size: 14px;
}
html body .bestellen-summary-total-amount {
font-size: 28px !important;
font-weight: 800;
color: #1a1a1a;
line-height: 1;
}
html body .bestellen-summary-total-unit { color: #666; font-size: 13px; }
html body .bestellen-summary-note {
font-size: 11px;
color: #999;
margin: 0 0 16px !important;
}
html body .bestellen-summary-info {
background: #fafafa;
border-radius: 8px;
padding: 10px 12px;
display: flex;
gap: 10px;
align-items: flex-start;
font-size: 12px;
color: #555;
line-height: 1.45;
margin-bottom: 16px;
}
html body .bestellen-summary-info-icon { color: #888; flex: 0 0 auto; }
html body .bestellen-summary-info-icon svg { width: 16px; height: 16px; }
html body .bestellen-summary-cta {
width: 100%;
text-align: center;
padding: 14px !important;
font-size: 15px !important;
font-weight: 600 !important;
border: 0 !important;
cursor: pointer;
}
html body .bestellen-summary-secure {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
font-size: 12px;
color: #999;
margin: 16px 0 0 !important;
}
html body .bestellen-summary-secure-icon svg { width: 14px; height: 14px; }
html body .bestellen-placeholder {
background: #fff;
border: 1px dashed var(--bp-border, #e5e5e5);
border-radius: 12px;
padding: 48px 24px;
text-align: center;
color: #888;
}
/* ---- Step 3: Privat/Firma-Toggle ---- */
html body .bestellen-typetoggle {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 32px;
}
html body .bestellen-typetoggle-btn {
text-decoration: none !important;
text-align: center;
padding: 14px 20px;
border-radius: 10px;
font-weight: 600;
font-size: 15px;
background: #fff;
color: #1a1a1a;
border: 1px solid var(--bp-border, #e5e5e5);
transition: background 0.15s, color 0.15s;
}
html body .bestellen-typetoggle-btn.is-active {
background: #1a1a1a !important;
color: #fff !important;
border-color: #1a1a1a !important;
}
/* ---- Step 3: Form-Layout ---- */
html body .bestellen-form { margin: 0; }
html body .bestellen-formgroup {
border: 0 !important;
margin: 0 0 32px !important;
padding: 0 !important;
}
html body .bestellen-formgroup legend {
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 0.08em;
color: #1a1a1a;
padding: 0 !important;
margin: 0 0 12px !important;
width: 100%;
border-bottom: 1px solid var(--bp-border, #e5e5e5);
padding-bottom: 10px !important;
}
html body .bestellen-formrow {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
margin-bottom: 14px;
}
html body .bestellen-formrow--2 {
grid-template-columns: 1fr 1fr;
}
html body .bestellen-formrow--3 {
grid-template-columns: 1fr 1fr 1fr;
}
html body .bestellen-formrow--strasse {
grid-template-columns: 2fr 1fr 2fr;
}
html body .bestellen-form label > span:first-child {
display: block;
font-size: 13px;
color: #555;
margin-bottom: 6px;
}
html body .bestellen-form input[type="text"],
html body .bestellen-form input[type="tel"],
html body .bestellen-form input[type="email"],
html body .bestellen-form select {
width: 100%;
padding: 11px 14px !important;
font-size: 14px !important;
border: 1px solid var(--bp-border, #e5e5e5) !important;
border-radius: 8px !important;
background: #fff !important;
font-family: inherit !important;
color: #1a1a1a;
box-sizing: border-box;
}
html body .bestellen-form input:focus,
html body .bestellen-form select:focus {
outline: 2px solid var(--bp-primary, #E30613);
outline-offset: -1px;
border-color: var(--bp-primary, #E30613) !important;
}
html body .bestellen-formhint {
font-size: 12px;
color: #888;
margin: 6px 0 14px !important;
}
html body .bestellen-checkrow {
display: flex !important;
align-items: center;
gap: 10px;
padding: 8px 0;
font-size: 14px;
color: #1a1a1a;
cursor: pointer;
}
html body .bestellen-checkrow input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--bp-primary, #E30613);
cursor: pointer;
}
/* ---- Step 3: Pill-Group (Rechnungszustellung/-Intervall) ---- */
html body .bestellen-pillgroup {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 6px;
}
html body .bestellen-pillgroup:has(.bestellen-pill:only-child) {
grid-template-columns: 1fr;
}
html body .bestellen-pill {
display: flex !important;
flex-direction: column;
align-items: center;
text-align: center;
padding: 16px 18px;
border-radius: 10px;
border: 1px solid var(--bp-border, #e5e5e5);
background: #fff;
color: #1a1a1a;
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
line-height: 1.4;
}
html body .bestellen-pill input[type="radio"] { display: none; }
html body .bestellen-pill strong { font-size: 14px; font-weight: 600; }
html body .bestellen-pill small { font-size: 12px; color: #777; margin-top: 4px; }
html body .bestellen-pill:has(input:checked),
html body .bestellen-pill.is-active {
background: #1a1a1a;
color: #fff;
border-color: #1a1a1a;
}
html body .bestellen-pill:has(input:checked) small,
html body .bestellen-pill.is-active small { color: #ccc; }
/* ---- Sidebar: Konfiguration speichern ---- */
html body .bestellen-summary-save {
width: 100%;
margin-top: 10px;
padding: 13px !important;
font-size: 14px !important;
font-weight: 600 !important;
background: #fff !important;
color: #1a1a1a !important;
border: 1px solid var(--bp-border, #e5e5e5) !important;
border-radius: 8px;
cursor: pointer;
}
html body .bestellen-summary-save:hover {
border-color: #999 !important;
}
@media (max-width: 768px) {
html body .bestellen-formrow--2,
html body .bestellen-formrow--3,
html body .bestellen-formrow--strasse,
html body .bestellen-pillgroup {
grid-template-columns: 1fr;
}
}
@media (max-width: 1024px) {
html body .bestellen-grid { grid-template-columns: 1fr; }
html body .bestellen-aside { position: static; }
}
@media (max-width: 768px) {
html body .bestellen-recap { grid-template-columns: 1fr; }
html body .bestellen-recap-item {
border-right: 0;
border-bottom: 1px solid var(--bp-border, #e5e5e5);
padding: 12px 0;
}
html body .bestellen-recap-item:last-child { border-bottom: 0; }
html body .bestellen-table-head { display: none; }
html body .bestellen-table-row {
grid-template-columns: 1fr 56px;
grid-template-areas:
"num remove"
"typ typ"
"vw vw"
"nr nr";
padding: 14px 0;
}
html body .bestellen-table-row .col-num { grid-area: num; }
html body .bestellen-table-row .col-typ { grid-area: typ; }
html body .bestellen-table-row .col-vorwahl{ grid-area: vw; }
html body .bestellen-table-row .col-nummer { grid-area: nr; }
html body .bestellen-row-remove { grid-area: remove; align-self: start; justify-self: end; }
}
/* ========================================================================
Responsive
======================================================================== */
@media (max-width: 1024px) {
.footer-grid {
grid-template-columns: 1fr 1fr 1fr;
}
.footer-brand {
grid-column: 1 / -1;
}
html body .why-grid,
html body .pricing-grid,
html body .trust-grid,
html body .solutions-grid,
html body .competitor-grid {
grid-template-columns: repeat(2, 1fr);
}
html body .competitor-card:nth-child(odd) {
border-right: 1px solid var(--bp-border);
}
html body .competitor-card:nth-child(even) {
border-right: 0;
}
.post-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 800px) {
.section {
padding: 64px 0;
}
.section-hero {
padding: 48px 0 64px;
}
.header-inner {
height: 72px;
}
.primary-nav,
.header-actions .header-login {
display: none;
}
.nav-toggle {
display: flex;
}
.site-header.is-open .primary-nav {
display: block;
position: absolute;
top: 72px;
left: 0;
right: 0;
background: var(--bp-white);
border-bottom: 1px solid var(--bp-border);
padding: 16px 24px;
}
.site-header.is-open .primary-menu {
flex-direction: column;
gap: 12px;
}
.hero-grid,
.contact-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.compare-grid {
flex-direction: column;
text-align: center;
padding: 32px 24px;
}
.compare-logos {
justify-content: center;
gap: 16px 24px;
}
.competitor-logo {
font-size: 18px;
}
}
@media (max-width: 800px) {
html body .tariff-grid {
grid-template-columns: 1fr;
}
html body .tariff-grid > .tariff-item:first-child {
border-right: 0;
border-bottom: 1px solid var(--bp-border);
}
html body .competitor-grid {
grid-template-columns: 1fr;
}
html body .competitor-card,
html body .competitor-card:nth-child(odd) {
border-right: 0 !important;
}
}
@media (max-width: 800px) {
html body .product-row-link {
grid-template-columns: 48px 1fr;
grid-template-rows: auto auto;
gap: 16px;
padding: 20px !important;
}
html body .product-icon {
width: 40px;
height: 40px;
grid-row: 1;
grid-column: 1;
}
html body .product-body {
grid-row: 1;
grid-column: 2;
}
html body .product-price {
grid-row: 2;
grid-column: 1 / -1;
grid-template-columns: auto auto 1fr auto;
text-align: left;
min-width: 0;
padding-top: 12px;
border-top: 1px solid var(--bp-border);
}
html body .product-price .ab,
html body .product-price .amount,
html body .product-price .unit {
grid-row: 1;
}
html body .product-price .ab { grid-column: 1; text-align: left; }
html body .product-price .amount { grid-column: 2; }
html body .product-price .unit { grid-column: 3; text-align: left; align-self: center; margin-top: 0; }
html body .product-price .note { grid-column: 1 / -1; grid-row: 2; text-align: left; }
html body .product-arrow { display: none; }
}
@media (max-width: 560px) {
html body .pricing-grid,
html body .why-grid,
html body .trust-grid,
html body .solutions-grid,
html body .footer-grid,
html body .post-grid {
grid-template-columns: 1fr;
}
.footer-bottom-inner {
flex-direction: column;
text-align: center;
}
html body .hero-checks {
grid-template-columns: 1fr;
}
html body .competitor-card {
flex-direction: column;
text-align: center;
}
html body .competitor-rates {
justify-content: center;
}
}
/* ========================================================================
3CX-Hosting-Konfigurator (page-3cx-hosting.php)
======================================================================== */
html body .konfig-3cx-section {
padding: 32px 0 96px !important;
background: var(--bp-light);
}
html body .konfig-3cx-header {
margin: 24px 0 28px;
}
html body .konfig-3cx-title {
font-size: clamp(28px, 3.6vw, 40px) !important;
margin: 0 0 8px !important;
color: var(--bp-dark) !important;
line-height: 1.15;
}
html body .konfig-3cx-lead {
margin: 0 !important;
color: var(--bp-gray) !important;
font-size: 16px;
max-width: 640px;
}
/* ---- Editions (BASIC / PRO / AI) ---- */
html body .konfig-3cx-editions {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
html body .konfig-3cx-edition {
position: relative;
display: flex;
flex-direction: column;
gap: 6px;
background: var(--bp-white);
border: 1px solid var(--bp-border);
border-radius: 12px;
padding: 20px 18px 18px;
cursor: pointer;
transition: border-color .15s, box-shadow .15s;
}
html body .konfig-3cx-edition:hover {
border-color: var(--bp-dark);
box-shadow: 0 4px 14px rgba(0,0,0,.05);
}
html body .konfig-3cx-edition > input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
html body .konfig-3cx-edition:has(> input[type="radio"]:checked) {
border-color: var(--bp-primary);
box-shadow: 0 0 0 2px var(--bp-primary) inset;
}
html body .konfig-3cx-edition.is-recommended {
border-color: var(--bp-dark);
}
html body .konfig-3cx-edition-badge {
position: absolute;
top: -10px;
right: 14px;
background: var(--bp-dark);
color: var(--bp-white);
font-size: 11px;
font-weight: 700;
padding: 4px 10px;
border-radius: 999px;
letter-spacing: .04em;
text-transform: uppercase;
}
html body .konfig-3cx-edition-label {
font-size: 20px;
font-weight: 800;
color: var(--bp-dark);
letter-spacing: .02em;
}
html body .konfig-3cx-edition-desc {
font-size: 13px;
color: var(--bp-gray-2);
line-height: 1.45;
}
/* ---- Pricing-Tabelle (SC × Editions × Hosting) ---- */
html body .konfig-3cx-table-lead {
margin: 0 0 14px !important;
color: var(--bp-gray-2);
font-size: 13px;
}
html body .konfig-3cx-table-wrap {
overflow-x: auto;
border: 1px solid var(--bp-border);
border-radius: 12px;
}
html body .konfig-3cx-pricing {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
html body .konfig-3cx-pricing thead th {
background: var(--bp-light);
color: var(--bp-dark);
font-weight: 700;
padding: 12px 14px;
text-align: right;
border-bottom: 1px solid var(--bp-border);
font-size: 12px;
text-transform: uppercase;
letter-spacing: .04em;
white-space: nowrap;
}
html body .konfig-3cx-pricing thead th.col-sc,
html body .konfig-3cx-pricing thead th.col-nbst {
text-align: left;
}
html body .konfig-3cx-pricing tbody td {
padding: 10px 14px;
text-align: right;
border-bottom: 1px solid #f3f3f3;
color: var(--bp-gray);
white-space: nowrap;
}
html body .konfig-3cx-pricing tbody tr:last-child td { border-bottom: 0; }
html body .konfig-3cx-pricing tbody tr {
cursor: pointer;
transition: background .12s;
}
html body .konfig-3cx-pricing tbody tr:hover {
background: #fafafa;
}
html body .konfig-3cx-pricing tbody tr.is-selected {
background: rgba(227,6,19,.04);
}
html body .konfig-3cx-pricing tbody tr.is-selected td {
color: var(--bp-dark);
font-weight: 600;
}
html body .konfig-3cx-pricing .col-sc { text-align: left; }
html body .konfig-3cx-pricing .col-nbst { text-align: left; color: var(--bp-gray-2); }
html body .konfig-3cx-sc-pick {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
user-select: none;
}
html body .konfig-3cx-sc-pick input[type="radio"] {
appearance: none;
width: 16px;
height: 16px;
border: 1.5px solid var(--bp-border);
border-radius: 50%;
cursor: pointer;
position: relative;
flex: 0 0 auto;
}
html body .konfig-3cx-sc-pick input[type="radio"]:checked {
border-color: var(--bp-primary);
}
html body .konfig-3cx-sc-pick input[type="radio"]:checked::after {
content: '';
position: absolute;
inset: 3px;
background: var(--bp-primary);
border-radius: 50%;
}
html body .konfig-3cx-sc-pick span {
font-weight: 600;
color: var(--bp-dark);
}
/* Aktive Edition-Spalte (rot hervorgehoben) */
html body .konfig-3cx-pricing thead th.is-active,
html body .konfig-3cx-pricing tbody td.is-active {
color: var(--bp-primary);
background: rgba(227,6,19,.04);
}
html body .konfig-3cx-pricing thead th.is-active {
color: var(--bp-primary);
font-weight: 800;
}
html body .konfig-3cx-pricing tbody tr.is-selected td.is-active {
background: rgba(227,6,19,.10);
font-weight: 800;
}
html body .konfig-3cx-pricing .col-hosting {
border-left: 1px dashed var(--bp-border);
}
html body .konfig-3cx-pricing thead .col-hosting {
border-left: 1px solid var(--bp-border);
}
/* ---- Hosting-Toggle (CH-Schweizer-Hosting) ---- */
html body .konfig-3cx-hosting-toggle {
display: flex;
align-items: center;
gap: 16px;
background: var(--bp-light);
border: 1px solid var(--bp-border);
border-radius: 12px;
padding: 18px 20px;
cursor: pointer;
transition: border-color .15s, background .15s;
}
html body .konfig-3cx-hosting-toggle:has(> input[type="checkbox"]:checked) {
border-color: var(--bp-primary);
background: rgba(227,6,19,.04);
}
html body .konfig-3cx-hosting-toggle > input[type="checkbox"] {
appearance: none;
width: 22px;
height: 22px;
border: 1.5px solid var(--bp-border);
border-radius: 6px;
background: var(--bp-white);
cursor: pointer;
position: relative;
flex: 0 0 auto;
}
html body .konfig-3cx-hosting-toggle > input[type="checkbox"]:checked {
background: var(--bp-primary);
border-color: var(--bp-primary);
}
html body .konfig-3cx-hosting-toggle > input[type="checkbox"]:checked::after {
content: '';
position: absolute;
left: 6px;
top: 2px;
width: 6px;
height: 12px;
border: solid var(--bp-white);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
html body .konfig-3cx-hosting-body {
flex: 1;
}
html body .konfig-3cx-hosting-body strong {
display: block;
font-size: 15px;
color: var(--bp-dark);
margin-bottom: 4px;
}
html body .konfig-3cx-hosting-body small {
display: block;
font-size: 13px;
color: var(--bp-gray-2);
line-height: 1.45;
}
html body .konfig-3cx-hosting-price {
text-align: right;
font-size: 18px;
font-weight: 800;
color: var(--bp-primary);
white-space: nowrap;
}
html body .konfig-3cx-hosting-price small {
display: block;
color: var(--bp-gray-2);
font-size: 11px;
font-weight: 500;
margin-top: 2px;
}
/* ---- Zusätzliche Optionen ---- */
html body .konfig-3cx-options {
display: flex;
flex-direction: column;
gap: 0;
}
html body .konfig-3cx-option-row {
display: flex;
align-items: center;
gap: 16px;
padding: 14px 4px;
border-bottom: 1px solid var(--bp-border);
}
html body .konfig-3cx-option-row:last-child { border-bottom: 0; }
html body .konfig-3cx-option-text {
flex: 1;
min-width: 0;
}
html body .konfig-3cx-option-text strong {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--bp-dark);
}
html body .konfig-3cx-option-text small {
display: block;
font-size: 12px;
color: var(--bp-gray-2);
margin-top: 2px;
line-height: 1.4;
}
html body .konfig-3cx-option-control select {
appearance: none;
background: var(--bp-white) url("data:image/svg+xml;utf8,") no-repeat right 12px center;
border: 1px solid var(--bp-border);
border-radius: 8px;
padding: 10px 32px 10px 14px;
font-size: 13px;
font-weight: 500;
color: var(--bp-dark);
min-width: 240px;
cursor: pointer;
}
html body .konfig-3cx-option-control .konfig-stepper {
align-self: center;
}
html body .konfig-3cx-addon {
cursor: pointer;
}
html body .konfig-3cx-addon input[type="checkbox"] {
appearance: none;
width: 22px;
height: 22px;
border: 1px solid var(--bp-border);
border-radius: 6px;
background: var(--bp-white);
cursor: pointer;
position: relative;
flex: 0 0 auto;
transition: background .15s, border-color .15s;
}
html body .konfig-3cx-addon input[type="checkbox"]:checked {
background: var(--bp-primary);
border-color: var(--bp-primary);
}
html body .konfig-3cx-addon input[type="checkbox"]:checked::after {
content: '';
position: absolute;
left: 6px;
top: 2px;
width: 6px;
height: 12px;
border: solid var(--bp-white);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
html body .konfig-3cx-option-price {
text-align: right;
font-size: 14px;
font-weight: 700;
color: var(--bp-dark);
white-space: nowrap;
}
html body .konfig-3cx-option-price small {
display: block;
color: var(--bp-gray-2);
font-size: 11px;
font-weight: 500;
margin-top: 2px;
}
/* ---- Standort & Map ---- */
html body .konfig-3cx-standort {
display: grid;
grid-template-columns: minmax(280px, 1fr) minmax(0, 1.4fr);
gap: 24px;
align-items: stretch;
}
html body .konfig-3cx-standort-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
html body .konfig-3cx-standort-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 14px;
background: var(--bp-light);
border-radius: 10px;
border-left: 4px solid var(--bp-primary);
}
html body .konfig-3cx-standort-item.is-backup {
border-left-color: var(--bp-dark);
}
html body .konfig-3cx-standort-item.is-planned {
border-left-color: var(--bp-gray-2);
border-left-style: dashed;
opacity: .85;
}
html body .konfig-3cx-standort-marker {
width: 28px;
height: 28px;
border-radius: 8px;
background: var(--bp-primary);
color: var(--bp-white);
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
}
html body .konfig-3cx-standort-marker svg {
width: 16px;
height: 16px;
}
html body .konfig-3cx-standort-item.is-backup .konfig-3cx-standort-marker {
background: var(--bp-dark);
}
html body .konfig-3cx-standort-item.is-planned .konfig-3cx-standort-marker {
background: var(--bp-gray-2);
}
html body .konfig-3cx-standort-body strong {
display: block;
color: var(--bp-dark);
font-size: 14px;
margin-bottom: 2px;
}
html body .konfig-3cx-standort-body small {
display: block;
font-size: 12px;
color: var(--bp-gray-2);
line-height: 1.4;
}
html body .konfig-3cx-standort-map {
display: flex;
align-items: center;
justify-content: center;
background: var(--bp-light);
border-radius: 12px;
padding: 12px;
min-height: 100%;
}
html body .konfig-3cx-locations-map {
width: 100%;
height: auto;
max-width: 560px;
display: block;
border-radius: 8px;
}
/* ---- 3CX-Domain ---- */
html body .konfig-3cx-domain-lead {
margin: 0 0 14px !important;
color: var(--bp-gray-2);
font-size: 14px;
}
html body .konfig-3cx-domain-field {
display: flex;
align-items: stretch;
border: 1px solid var(--bp-border);
border-radius: 10px;
overflow: hidden;
max-width: 480px;
background: var(--bp-white);
}
html body .konfig-3cx-domain-field:focus-within {
border-color: var(--bp-primary);
box-shadow: 0 0 0 3px rgba(227,6,19,.12);
}
html body .konfig-3cx-domain-field input {
flex: 1;
border: 0;
background: transparent;
padding: 12px 14px;
font-size: 15px;
font-weight: 600;
color: var(--bp-dark);
outline: none;
min-width: 0;
}
html body .konfig-3cx-domain-suffix {
display: inline-flex;
align-items: center;
padding: 0 14px;
background: var(--bp-light);
color: var(--bp-gray);
font-size: 14px;
font-weight: 600;
border-left: 1px solid var(--bp-border);
}
/* ---- Sidebar-Anpassungen für 3CX ---- */
html body .konfig-3cx-summary-setup {
font-size: 11px;
font-weight: 700;
color: var(--bp-primary);
text-transform: uppercase;
letter-spacing: .04em;
background: rgba(227,6,19,.08);
padding: 4px 8px;
border-radius: 999px;
}
html body .bestellen-summary-addons {
list-style: none;
margin: 0;
padding: 0;
}
/* ---- Responsive ---- */
@media (max-width: 880px) {
html body .konfig-3cx-standort {
grid-template-columns: 1fr;
}
html body .konfig-3cx-option-row {
flex-wrap: wrap;
}
html body .konfig-3cx-option-control select {
min-width: 180px;
width: 100%;
}
html body .konfig-3cx-hosting-toggle {
flex-wrap: wrap;
}
html body .konfig-3cx-hosting-price {
text-align: left;
}
}
@media (max-width: 720px) {
html body .konfig-3cx-pricing {
font-size: 12px;
}
html body .konfig-3cx-pricing thead th,
html body .konfig-3cx-pricing tbody td {
padding: 8px 10px;
}
}
@media (max-width: 560px) {
html body .konfig-3cx-editions {
grid-template-columns: 1fr;
}
html body .konfig-3cx-title {
font-size: 26px !important;
}
html body .konfig-3cx-domain-field {
flex-direction: column;
}
html body .konfig-3cx-domain-suffix {
border-left: 0;
border-top: 1px solid var(--bp-border);
padding: 10px 14px;
}
}
/* ========================================================================
Step 4: Abschluss — Recap, Verify, AGB, Submit
======================================================================== */
html body .bestellen-abschluss {
display: flex;
flex-direction: column;
gap: 20px;
}
/* ---- Recap-Card ---- */
html body .bestellen-recap-card {
background: var(--bp-white);
border: 1px solid var(--bp-border);
border-radius: 12px;
padding: 20px 24px;
}
html body .bestellen-recap-card h3 {
margin: 0 0 14px !important;
font-size: 16px !important;
font-weight: 700;
color: var(--bp-dark);
}
html body .bestellen-recap-grid {
display: grid;
grid-template-columns: minmax(180px, max-content) 1fr;
gap: 6px 18px;
margin: 0;
}
html body .bestellen-recap-grid dt {
color: var(--bp-gray-2);
font-size: 13px;
}
html body .bestellen-recap-grid dd {
margin: 0;
color: var(--bp-dark);
font-weight: 600;
font-size: 14px;
}
html body .bestellen-recap-edit {
margin: 12px 0 0 !important;
font-size: 13px;
}
html body .bestellen-recap-edit a {
color: var(--bp-primary);
text-decoration: none;
font-weight: 500;
}
html body .bestellen-recap-edit a:hover { text-decoration: underline; }
/* ---- Verify Init + Input ---- */
html body .bestellen-verify-init,
html body .bestellen-verify-input {
background: var(--bp-white);
border: 1px solid var(--bp-border);
border-radius: 12px;
padding: 20px 24px;
}
html body .bestellen-verify-init h3,
html body .bestellen-verify-input h3 {
margin: 0 0 10px !important;
font-size: 16px !important;
font-weight: 700;
color: var(--bp-dark);
}
html body .bestellen-verify-lead,
html body .bestellen-verify-status {
margin: 0 0 16px !important;
color: var(--bp-gray);
font-size: 14px;
}
html body .bestellen-verify-status strong {
color: var(--bp-dark);
}
html body .bestellen-verify-expiry {
display: inline-block;
margin-left: 12px;
color: var(--bp-gray-2);
font-size: 13px;
}
html body .bestellen-verify-expiry strong {
color: var(--bp-primary);
}
html body .bestellen-verify-fields {
display: flex;
gap: 18px;
flex-wrap: wrap;
margin-bottom: 14px;
}
html body .bestellen-verify-field {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 180px;
}
html body .bestellen-verify-field > span {
font-size: 12px;
font-weight: 600;
color: var(--bp-gray);
text-transform: uppercase;
letter-spacing: .04em;
}
html body .bestellen-verify-field input {
font-family: inherit;
font-size: 22px;
font-weight: 700;
letter-spacing: .35em;
padding: 10px 14px;
border: 1.5px solid var(--bp-border);
border-radius: 8px;
width: 200px;
text-align: center;
color: var(--bp-dark);
background: var(--bp-white);
}
html body .bestellen-verify-field input:focus {
outline: none;
border-color: var(--bp-primary);
box-shadow: 0 0 0 3px rgba(227,6,19,.12);
}
html body .bestellen-verify-fielderr {
color: var(--bp-primary);
font-size: 14px;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 6px;
}
html body .bestellen-verify-fielderr::before {
content: '⚠';
font-size: 16px;
line-height: 1;
}
html body .bestellen-verify-resend {
font-size: 13px;
}
/* ---- AGB ---- */
html body .bestellen-agb {
background: var(--bp-white);
border: 1px solid var(--bp-border);
border-radius: 12px;
padding: 16px 24px;
}
html body .bestellen-agb .bestellen-checkrow {
margin: 0;
font-size: 14px;
color: var(--bp-dark);
align-items: center;
}
html body .bestellen-agb a {
color: var(--bp-primary);
text-decoration: underline;
}
html body .bestellen-agb.is-locked {
opacity: 0.6;
background: var(--bp-bg);
}
html body .bestellen-agb.is-locked .bestellen-checkrow {
cursor: not-allowed;
}
html body .bestellen-agb.is-locked .bestellen-checkrow input[type="checkbox"] {
cursor: not-allowed;
}
html body .bestellen-agb.is-error {
border-color: var(--bp-primary);
background: rgba(227,6,19,.06);
animation: bphone-agb-shake 0.4s ease-in-out;
}
html body .bestellen-verify-init-error {
background: rgba(227,6,19,.08);
border: 1px solid rgba(227,6,19,.3);
color: var(--bp-primary);
padding: 12px 14px;
border-radius: 8px;
font-size: 14px;
line-height: 1.4;
margin: 0 0 12px;
}
@keyframes bphone-agb-shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-6px); }
75% { transform: translateX(6px); }
}
/* ---- Submit ---- */
html body .bestellen-submit-row {
display: flex;
flex-direction: column;
gap: 10px;
}
html body .btn-large {
width: 100%;
padding: 16px 24px !important;
font-size: 17px !important;
font-weight: 700 !important;
border: 0 !important;
cursor: pointer;
}
html body .btn-large:disabled {
opacity: .4;
cursor: not-allowed;
}
html body .btn-large small {
font-size: 13px;
font-weight: 500;
opacity: .85;
margin-left: 4px;
}
html body .bestellen-submit-error {
background: rgba(227,6,19,.08);
border: 1px solid rgba(227,6,19,.3);
color: var(--bp-primary);
padding: 12px 14px;
border-radius: 8px;
font-size: 13px;
line-height: 1.4;
}
/* ---- Success ---- */
html body .bestellen-submit-success {
background: #f0fdf4;
border: 1.5px solid #10b981;
border-radius: 14px;
padding: 48px 32px;
text-align: center;
max-width: 640px;
margin: 40px auto;
box-shadow: 0 4px 20px rgba(16,185,129,.12);
}
html body .bestellen-submit-success strong {
display: inline-block !important;
font-size: 18px !important;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
background: var(--bp-white) !important;
color: #047857 !important;
padding: 6px 14px !important;
border: 1px solid #6ee7b7 !important;
border-radius: 6px;
margin-top: 6px;
letter-spacing: .03em;
}
html body .bestellen-submit-success-icon {
display: inline-flex;
width: 56px;
height: 56px;
background: #10b981;
color: var(--bp-white);
border-radius: 50%;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
}
html body .bestellen-submit-success-icon svg {
width: 28px;
height: 28px;
}
html body .bestellen-submit-success h3 {
margin: 0 0 12px !important;
font-size: 22px !important;
font-weight: 700;
color: var(--bp-dark);
}
html body .bestellen-submit-success p {
margin: 8px 0 !important;
color: var(--bp-gray);
font-size: 15px;
}
html body .bestellen-submit-success strong {
color: var(--bp-dark);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 16px;
padding: 2px 8px;
background: var(--bp-light);
border-radius: 4px;
}
html body .bestellen-submit-success-info {
color: var(--bp-gray-2) !important;
font-size: 13px !important;
max-width: 480px;
margin: 16px auto !important;
}
@media (max-width: 560px) {
html body .bestellen-recap-grid {
grid-template-columns: 1fr;
gap: 2px 0;
}
html body .bestellen-recap-grid dt {
margin-top: 8px;
}
html body .bestellen-verify-field input {
width: 100%;
}
}
/* ========================================================================
Adress-Picker (Step 3, GWR-Quelle)
======================================================================== */
html body .bestellen-addr-picker {
grid-template-columns: 1fr;
position: relative;
}
html body .bestellen-addr-search {
position: relative;
display: block;
}
html body .bestellen-addr-search > span {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--bp-gray);
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: .04em;
}
html body .bestellen-addr-search input {
width: 100%;
padding: 12px 40px 12px 14px;
border: 1.5px solid var(--bp-border);
border-radius: 10px;
font-size: 15px;
font-family: inherit;
color: var(--bp-dark);
background: var(--bp-white);
outline: none;
transition: border-color .15s, box-shadow .15s;
}
html body .bestellen-addr-search input:focus {
border-color: var(--bp-primary);
box-shadow: 0 0 0 3px rgba(227,6,19,.12);
}
html body .bestellen-addr-spinner {
position: absolute;
right: 12px;
top: 38px;
width: 18px;
height: 18px;
pointer-events: none;
opacity: 0;
transition: opacity .15s;
}
html body .bestellen-addr-spinner.is-active {
opacity: 1;
}
html body .bestellen-addr-spinner::after {
content: '';
display: block;
width: 18px;
height: 18px;
border: 2px solid var(--bp-border);
border-top-color: var(--bp-primary);
border-radius: 50%;
animation: bphone-spin .8s linear infinite;
}
@keyframes bphone-spin {
to { transform: rotate(360deg); }
}
html body .bestellen-addr-suggestions {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
z-index: 30;
background: var(--bp-white);
border: 1px solid var(--bp-border);
border-radius: 10px;
box-shadow: 0 8px 24px rgba(0,0,0,.08);
max-height: 320px;
overflow-y: auto;
padding: 4px 0;
}
html body .bestellen-addr-item {
padding: 10px 14px;
font-size: 14px;
color: var(--bp-dark);
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
border: 0;
background: transparent;
line-height: 1.3;
}
html body .bestellen-addr-item:hover,
html body .bestellen-addr-item.is-active {
background: rgba(227,6,19,.06);
color: var(--bp-primary);
}
html body .bestellen-addr-tag {
font-size: 11px;
padding: 2px 7px;
border-radius: 999px;
background: var(--bp-light);
color: var(--bp-gray-2);
font-weight: 500;
text-transform: uppercase;
letter-spacing: .04em;
flex: 0 0 auto;
}
html body .bestellen-addr-empty {
padding: 14px 18px;
font-size: 13px;
color: var(--bp-dark);
text-align: center;
font-weight: 500;
background: #fff5e6;
border-top: 2px solid #f59e0b;
}
html body .bestellen-addr-empty::before {
content: '⚠ ';
color: #d97706;
margin-right: 4px;
}
/* ---- Selected-Card (nach Auswahl) ---- */
html body .bestellen-addr-selected[hidden] { display: none !important; }
html body .bestellen-addr-selected {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
margin-top: 8px;
border: 1.5px solid var(--bp-border);
border-left: 4px solid var(--bp-primary);
border-radius: 10px;
background: var(--bp-white);
}
html body .bestellen-addr-selected-body {
flex: 1;
min-width: 0;
}
html body .bestellen-addr-selected-body strong {
display: block;
font-size: 15px;
font-weight: 700;
color: var(--bp-dark);
}
html body .bestellen-addr-selected-body small {
display: block;
font-size: 13px;
color: var(--bp-gray-2);
margin-top: 2px;
}
html body .bestellen-addr-change {
border: 1px solid var(--bp-border);
background: var(--bp-white);
padding: 8px 14px;
border-radius: 8px;
cursor: pointer;
font-size: 13px;
font-weight: 600;
color: var(--bp-dark);
transition: background .15s, border-color .15s;
flex: 0 0 auto;
}
html body .bestellen-addr-change:hover {
background: var(--bp-light);
border-color: var(--bp-dark);
}
/* ========================================================================
UID-/Firma-Picker (Step 3, BFS UID-Register)
======================================================================== */
html body .bestellen-uid-picker { position: relative; }
html body .bestellen-uid-search {
position: relative;
display: block;
}
html body .bestellen-uid-search > span {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--bp-gray);
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: .04em;
}
html body .bestellen-uid-search input {
width: 100%;
padding: 12px 40px 12px 14px;
border: 1.5px solid var(--bp-border);
border-radius: 10px;
font-size: 15px;
font-family: inherit;
color: var(--bp-dark);
background: var(--bp-white);
outline: none;
transition: border-color .15s, box-shadow .15s;
}
html body .bestellen-uid-search input:focus {
border-color: var(--bp-primary);
box-shadow: 0 0 0 3px rgba(227,6,19,.12);
}
html body .bestellen-uid-spinner {
position: absolute;
right: 12px;
top: 38px;
width: 18px;
height: 18px;
pointer-events: none;
opacity: 0;
transition: opacity .15s;
}
html body .bestellen-uid-spinner.is-active { opacity: 1; }
html body .bestellen-uid-spinner::after {
content: '';
display: block;
width: 18px;
height: 18px;
border: 2px solid var(--bp-border);
border-top-color: var(--bp-primary);
border-radius: 50%;
animation: bphone-spin .8s linear infinite;
}
html body .bestellen-uid-suggestions {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
z-index: 30;
background: var(--bp-white);
border: 1px solid var(--bp-border);
border-radius: 10px;
box-shadow: 0 8px 24px rgba(0,0,0,.08);
max-height: 360px;
overflow-y: auto;
padding: 4px 0;
}
html body .bestellen-uid-item {
padding: 10px 14px;
cursor: pointer;
border: 0;
background: transparent;
display: flex;
flex-direction: column;
gap: 2px;
line-height: 1.35;
}
html body .bestellen-uid-item:hover,
html body .bestellen-uid-item.is-active {
background: rgba(227,6,19,.06);
}
html body .bestellen-uid-item strong {
font-size: 14px;
color: var(--bp-dark);
font-weight: 600;
}
html body .bestellen-uid-item small {
font-size: 12px;
color: var(--bp-gray-2);
}
html body .bestellen-uid-empty {
padding: 14px 18px;
font-size: 13px;
color: var(--bp-dark);
text-align: center;
font-weight: 500;
background: #fff5e6;
border-top: 2px solid #f59e0b;
}
html body .bestellen-uid-empty::before {
content: '⚠ ';
color: #d97706;
margin-right: 4px;
}
/* Selected-Card */
html body .bestellen-uid-selected[hidden] { display: none !important; }
html body .bestellen-uid-selected {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
margin-top: 8px;
border: 1.5px solid var(--bp-border);
border-left: 4px solid var(--bp-primary);
border-radius: 10px;
background: var(--bp-white);
}
html body .bestellen-uid-selected-body {
flex: 1;
min-width: 0;
}
html body .bestellen-uid-selected-body strong {
display: block;
font-size: 15px;
font-weight: 700;
color: var(--bp-dark);
}
html body .bestellen-uid-selected-body small {
display: block;
font-size: 13px;
color: var(--bp-gray-2);
margin-top: 2px;
}
html body .bestellen-uid-selected-address[hidden] { display: none !important; }
html body .bestellen-uid-selected-address {
color: var(--bp-dark) !important;
font-weight: 500;
margin-top: 4px !important;
}
html body .bestellen-uid-selected-address::before {
content: '📍';
margin-right: 6px;
opacity: .7;
}
html body .bestellen-uid-change {
border: 1px solid var(--bp-border);
background: var(--bp-white);
padding: 8px 14px;
border-radius: 8px;
cursor: pointer;
font-size: 13px;
font-weight: 600;
color: var(--bp-dark);
transition: background .15s, border-color .15s;
flex: 0 0 auto;
}
html body .bestellen-uid-change:hover {
background: var(--bp-light);
border-color: var(--bp-dark);
}
/* Read-only-Felder im Firmen-Block — visuell zurückgenommen */
html body .bestellen-form input[readonly] {
background: var(--bp-light);
color: var(--bp-gray);
cursor: not-allowed;
}
html body .bestellen-form input[readonly]:focus {
border-color: var(--bp-border);
box-shadow: none;
}
/* Adresse-aus-UID-Card */
html body .bestellen-addr-from-uid { margin-top: 4px; }
/* ========================================================================
Honeypot (Bot-Schutz) — versteckt für Menschen, Bots füllen es aus
======================================================================== */
html body .bestellen-honeypot {
position: absolute !important;
left: -9999px !important;
top: -9999px !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
visibility: hidden;
}
html body .bestellen-honeypot input {
autocomplete: off;
}
/* Field-Level Error-Hint */
html body .bestellen-fielderr {
display: block;
color: var(--bp-primary);
font-size: 12px;
margin-top: 4px;
}
html body .bestellen-fielderr[hidden] { display: none; }
html body .bestellen-angaben input.is-invalid {
border-color: var(--bp-primary) !important;
box-shadow: 0 0 0 3px rgba(227,6,19,.12);
}
/* ========================================================================
Verify-Stages (Step 4): Email → SMS, sequentiell mit Lock-State
======================================================================== */
html body .bestellen-verify-stage {
border: 1.5px solid var(--bp-border);
border-radius: 10px;
padding: 14px 18px;
margin-bottom: 12px;
background: var(--bp-white);
transition: border-color .15s, background .15s, opacity .15s;
}
html body .bestellen-verify-stage.is-locked {
opacity: .55;
background: var(--bp-light);
}
html body .bestellen-verify-stage.is-verified {
border-color: #10b981;
background: #f0fdf4;
}
html body .bestellen-verify-stage-head {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 8px;
}
html body .bestellen-verify-stage-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px; height: 24px;
border-radius: 50%;
background: var(--bp-dark);
color: var(--bp-white);
font-size: 12px;
font-weight: 700;
flex: 0 0 auto;
}
html body .bestellen-verify-stage.is-verified .bestellen-verify-stage-num {
background: #10b981;
}
html body .bestellen-verify-stage-head strong {
font-size: 14px;
color: var(--bp-dark);
font-weight: 700;
}
html body .bestellen-verify-stage-head small {
color: var(--bp-gray-2);
font-size: 12px;
}
html body .bestellen-verify-stage-check {
margin-left: auto;
color: #10b981;
display: inline-flex;
}
html body .bestellen-verify-stage-check[hidden] { display: none !important; }
html body .bestellen-verify-stage-check svg {
width: 20px; height: 20px;
}
html body .bestellen-verify-stage-status {
margin-left: auto;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
padding: 3px 9px;
border-radius: 999px;
line-height: 1.4;
}
html body .bestellen-verify-stage-status--sent {
background: #eff6ff;
color: #1d4ed8;
border: 1px solid #bfdbfe;
}
html body .bestellen-verify-stage-status[hidden] { display: none !important; }
html body .bestellen-verify-stage-body {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
html body .bestellen-verify-stage-body input {
font-family: inherit;
font-size: 22px;
font-weight: 700;
letter-spacing: .35em;
padding: 10px 14px;
border: 1.5px solid var(--bp-border);
border-radius: 8px;
width: 200px;
text-align: center;
color: var(--bp-dark);
background: var(--bp-white);
}
html body .bestellen-verify-stage-body input:focus {
outline: none;
border-color: var(--bp-primary);
box-shadow: 0 0 0 3px rgba(227,6,19,.12);
}
html body .bestellen-verify-stage-body input:disabled {
background: var(--bp-light);
color: var(--bp-gray-2);
cursor: not-allowed;
}
html body .bestellen-verify-stage-spinner {
width: 18px; height: 18px;
}
html body .bestellen-verify-stage-spinner::after {
content: '';
display: block;
width: 18px; height: 18px;
border: 2px solid var(--bp-border);
border-top-color: var(--bp-primary);
border-radius: 50%;
animation: bphone-spin .8s linear infinite;
}
html body .bestellen-verify-expiry-line[hidden] { display: none !important; }
html body .bestellen-verify-expiry-line {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 12px 0 0 !important;
font-size: 12px;
color: var(--bp-gray-2);
}
html body .bestellen-verify-resend {
border: 0;
background: transparent;
color: var(--bp-primary);
font-size: 12px;
cursor: pointer;
padding: 4px 8px;
border-radius: 6px;
}
html body .bestellen-verify-resend:disabled {
color: var(--bp-gray-2);
cursor: not-allowed;
}
/* ========================================================================
Payment-Block (Step 4, nur PRIVATE) — CHF 25 Vorauszahlung via Wallee
======================================================================== */
html body .bestellen-payment[hidden] { display: none !important; }
html body .bestellen-payment {
background: var(--bp-white);
border: 1.5px solid var(--bp-border);
border-radius: 12px;
padding: 18px 22px;
margin-bottom: 14px;
}
html body .bestellen-payment[data-payment-state="success"] {
border-color: #10b981;
background: #f0fdf4;
}
html body .bestellen-payment[data-payment-state="failed"] {
border-color: var(--bp-primary);
background: #fef2f2;
}
html body .bestellen-payment h3 {
margin: 0 0 8px !important;
font-size: 16px !important;
font-weight: 700;
color: var(--bp-dark);
display: flex;
align-items: center;
gap: 10px;
}
html body .bestellen-payment-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px; height: 24px;
border-radius: 50%;
background: var(--bp-dark);
color: var(--bp-white);
font-size: 12px;
font-weight: 700;
}
html body .bestellen-payment[data-payment-state="success"] .bestellen-payment-num {
background: #10b981;
}
html body .bestellen-payment-check {
margin-left: auto;
color: #10b981;
display: inline-flex;
}
html body .bestellen-payment-check[hidden] { display: none !important; }
html body .bestellen-payment-check svg { width: 22px; height: 22px; }
html body .bestellen-payment-lead {
margin: 0 0 14px !important;
color: var(--bp-gray);
font-size: 13px;
line-height: 1.45;
}
html body .bestellen-payment-state > div[hidden] {
display: none !important;
}
html body .bestellen-payment-state > div {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
html body .bestellen-payment-state small {
color: var(--bp-gray-2);
font-size: 12px;
}
html body .bestellen-payment-state strong {
color: var(--bp-dark);
font-weight: 600;
}
html body .bestellen-payment-spinner {
width: 20px; height: 20px;
display: inline-block;
}
html body .bestellen-payment-spinner::after {
content: '';
display: block;
width: 20px; height: 20px;
border: 2.5px solid var(--bp-border);
border-top-color: var(--bp-primary);
border-radius: 50%;
animation: bphone-spin .8s linear infinite;
}
html body .bestellen-payment-icon-success {
display: inline-flex;
width: 28px; height: 28px;
background: #10b981;
color: var(--bp-white);
border-radius: 50%;
align-items: center;
justify-content: center;
}
html body .bestellen-payment-icon-success svg { width: 16px; height: 16px; }
html body .bestellen-payment-icon-failed {
display: inline-flex;
width: 28px; height: 28px;
background: var(--bp-primary);
color: var(--bp-white);
border-radius: 50%;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 16px;
}
html body .bestellen-payment-retry {
margin-left: auto;
}
/* ========================================================================
Step 4 — Self-Service-Portal Passwort
======================================================================== */
html body .bestellen-password[hidden] { display: none !important; }
html body .bestellen-password {
background: var(--bp-white);
border: 1.5px solid var(--bp-border);
border-radius: 12px;
padding: 18px 22px;
margin-bottom: 14px;
}
html body .bestellen-password.is-valid {
border-color: #10b981;
background: #f0fdf4;
}
html body .bestellen-password h3 {
margin: 0 0 8px !important;
font-size: 16px !important;
font-weight: 700;
color: var(--bp-dark);
display: flex;
align-items: center;
gap: 10px;
}
html body .bestellen-password-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px; height: 24px;
border-radius: 50%;
background: var(--bp-dark);
color: var(--bp-white);
font-size: 12px;
font-weight: 700;
flex: 0 0 auto;
}
html body .bestellen-password.is-valid .bestellen-password-num {
background: #10b981;
}
html body .bestellen-password-check {
margin-left: auto;
color: #10b981;
display: inline-flex;
}
html body .bestellen-password-check[hidden] { display: none !important; }
html body .bestellen-password-check svg { width: 22px; height: 22px; }
html body .bestellen-password-lead {
margin: 0 0 14px !important;
color: var(--bp-gray);
font-size: 13px;
line-height: 1.45;
}
html body .bestellen-password-fields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
html body .bestellen-password-fields label {
display: block;
}
html body .bestellen-password-fields label > span {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--bp-gray);
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: .04em;
}
html body .bestellen-password-fields input {
width: 100%;
padding: 10px 14px;
border: 1.5px solid var(--bp-border);
border-radius: 8px;
font-size: 14px;
font-family: inherit;
color: var(--bp-dark);
background: var(--bp-white);
}
html body .bestellen-password-fields input:focus {
outline: none;
border-color: var(--bp-primary);
box-shadow: 0 0 0 3px rgba(227,6,19,.12);
}
@media (max-width: 560px) {
html body .bestellen-password-fields {
grid-template-columns: 1fr;
}
}
/* Success-Card: Warning-Hinweis ─────────────────────────────── */
html body .bestellen-submit-success-warnings[hidden] { display: none !important; }
html body .bestellen-submit-success-warnings {
margin: 20px auto 0;
max-width: 540px;
padding: 14px 18px;
background: #fef9c3;
border: 1px solid #fde047;
border-radius: 8px;
text-align: left;
font-size: 13px;
color: #713f12;
line-height: 1.5;
}
html body .bestellen-submit-success-warnings strong {
display: block !important;
margin-bottom: 6px;
color: #713f12 !important;
background: transparent !important;
border: 0 !important;
padding: 0 !important;
font-family: inherit !important;
font-size: 13px !important;
}
html body .bestellen-submit-success-warnings p {
margin: 0 !important;
color: #713f12 !important;
}
/* ============================================================================
Partnerseite (/partner)
========================================================================== */
html body .partner-hero {
background: var(--bp-bg, #f7f7f8);
padding: 72px 0 56px;
border-bottom: 1px solid var(--bp-border, #e5e5e8);
}
html body .partner-eyebrow {
text-transform: uppercase; letter-spacing: .12em; font-weight: 700;
font-size: .8rem; color: var(--bp-primary, #E30613); margin: 0 0 12px;
}
html body .partner-hero-title {
font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.05; font-weight: 800;
margin: 0 0 16px; letter-spacing: -.02em;
}
html body .partner-hero-title span { color: var(--bp-primary, #E30613); }
html body .partner-hero-sub { font-size: 1.15rem; max-width: 640px; margin: 0 0 28px; color: #333; }
html body .partner-section-title {
font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -.01em;
margin: 0 0 32px; text-align: center;
}
html body .partner-models { padding: 64px 0; }
html body .partner-model-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px;
}
html body .partner-model-card {
background: #fff; border: 1px solid var(--bp-border, #e5e5e8); border-radius: 14px;
padding: 28px 24px; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s;
display: flex; flex-direction: column;
}
html body .partner-model-card:hover { border-color: var(--bp-primary, #E30613); box-shadow: 0 8px 30px rgba(0,0,0,.07); transform: translateY(-2px); }
html body .partner-model-card--featured { border-color: var(--bp-primary, #E30613); box-shadow: 0 8px 30px rgba(227,6,19,.08); }
html body .partner-model-card h3 { font-size: 1.3rem; font-weight: 800; margin: 0 0 6px; }
html body .partner-model-lead { color: var(--bp-primary, #E30613); font-weight: 600; margin: 0 0 16px; }
html body .partner-model-card ul { list-style: none; padding: 0; margin: 0 0 20px; flex: 1; }
html body .partner-model-card li { padding: 6px 0 6px 24px; position: relative; }
html body .partner-model-card li::before { content: "✓"; color: var(--bp-primary, #E30613); position: absolute; left: 0; font-weight: 700; }
html body .partner-model-pick { font-weight: 700; color: var(--bp-primary, #E30613); }
html body .partner-benefits { padding: 64px 0; background: var(--bp-bg, #f7f7f8); }
html body .partner-benefit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
html body .partner-benefit { display: flex; gap: 14px; align-items: flex-start; }
html body .partner-benefit-check { flex: 0 0 auto; width: 26px; height: 26px; color: var(--bp-primary, #E30613); }
html body .partner-benefit-check svg { width: 26px; height: 26px; }
html body .partner-benefit strong { display: block; margin-bottom: 2px; }
html body .partner-benefit p { margin: 0; color: #555; font-size: .95rem; }
html body .partner-steps { padding: 64px 0; }
html body .partner-step-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
html body .partner-step-list li { text-align: center; }
html body .partner-step-num {
display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
border-radius: 50%; background: var(--bp-primary, #E30613); color: #fff; font-weight: 800; font-size: 1.3rem; margin-bottom: 14px;
}
html body .partner-step-list strong { display: block; margin-bottom: 6px; font-size: 1.1rem; }
html body .partner-step-list p { margin: 0; color: #555; }
html body .partner-faq { padding: 64px 0; background: var(--bp-bg, #f7f7f8); max-width: 820px; margin: 0 auto; }
html body .partner-faq-item { background: #fff; border: 1px solid var(--bp-border, #e5e5e8); border-radius: 10px; margin-bottom: 12px; padding: 4px 18px; }
html body .partner-faq-item summary { cursor: pointer; font-weight: 700; padding: 14px 0; list-style: none; }
html body .partner-faq-item summary::-webkit-details-marker { display: none; }
html body .partner-faq-item[open] summary { color: var(--bp-primary, #E30613); }
html body .partner-faq-item p { margin: 0 0 14px; color: #444; }
html body .partner-contact { padding: 72px 0; }
html body .partner-contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; align-items: start; }
html body .partner-contact-person h2 { font-size: 1.8rem; font-weight: 800; margin: 0 0 12px; }
html body .partner-contact-direct { list-style: none; padding: 0; margin: 20px 0 0; }
html body .partner-contact-direct li { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-weight: 600; }
html body .partner-contact-direct svg { width: 20px; height: 20px; color: var(--bp-primary, #E30613); }
html body .partner-contact-direct a { color: inherit; text-decoration: none; }
html body .partner-form { background: #fff; border: 1px solid var(--bp-border, #e5e5e8); border-radius: 16px; padding: 32px; }
html body .partner-form-row { margin-bottom: 18px; }
html body .partner-form-row--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
html body .partner-form label > span { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
html body .partner-form input, html body .partner-form select, html body .partner-form textarea {
width: 100%; padding: 11px 13px; border: 1px solid var(--bp-border, #d9d9de); border-radius: 9px;
font: inherit; background: #fff; box-sizing: border-box;
}
html body .partner-form input:focus, html body .partner-form select:focus, html body .partner-form textarea:focus {
outline: none; border-color: var(--bp-primary, #E30613); box-shadow: 0 0 0 3px rgba(227,6,19,.12);
}
html body .partner-form-full { display: block; margin-bottom: 18px; }
html body .partner-form-consent { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 22px; font-size: .92rem; }
html body .partner-form-consent input { width: auto; margin-top: 3px; }
html body .partner-form-status { padding: 12px 16px; border-radius: 9px; margin-bottom: 18px; font-weight: 600; }
html body .partner-form-status.is-success { background: #e8f7ee; color: #1a7a3c; }
html body .partner-form-status.is-error { background: #fdecec; color: #b3140f; }
html body .partner-form-status.is-loading { background: var(--bp-bg, #f1f1f3); color: #555; }
@media (max-width: 860px) {
html body .partner-contact-grid { grid-template-columns: 1fr; gap: 28px; }
html body .partner-form-row--2 { grid-template-columns: 1fr; }
html body .partner-form { padding: 22px; }
}
/* Bonitäts-Schritt (COMPANY = Schritt 3, vor dem Passwort) */
html body .bestellen-bonitaet {
background: var(--bp-white);
border: 1.5px solid var(--bp-border);
border-radius: 12px;
padding: 18px 22px;
margin-bottom: 14px;
}
html body .bestellen-bonitaet-head {
margin: 0 0 8px !important;
font-size: 16px !important;
font-weight: 700;
color: var(--bp-dark);
display: flex;
align-items: center;
gap: 10px;
}
html body .bestellen-bonitaet-row:not([hidden]) {
display: flex;
align-items: center;
gap: 10px;
font-size: 15px;
color: var(--bp-dark);
padding: 4px 0;
}
html body .bestellen-bonitaet--ok { color: #0a7a4b; }
html body .bestellen-bonitaet--prepaid,
html body .bestellen-bonitaet--failed { color: var(--bp-primary); }