(ohne Klasse "hero-content"), daher griff
die frühere .hero-content-Regel nie und die globale h1-Regel (bis 4.8rem)
blähte die Headline über das ganze Viewport. min(vw, vh) sorgt dafür, dass
die Schrift mit der kleineren von Breite/HÖHE skaliert – so passt der Hero
auch bei kurzer Bildschirmhöhe (kleine Laptops, Windows-Skalierung 125/150%)
komplett ohne Scrollen. */
font-size: clamp(1.6rem, min(3.6vw, 5.5vh), 3rem);
line-height: 1.07;
letter-spacing: -0.5px;
margin-bottom: 10px;
color: var(--blue-deep);
}
/* (Zusammengeführt aus zwei früheren Definitionen.) */
.hero-text {
font-size: clamp(0.9rem, 1.2vh, 1rem);
line-height: 1.5;
max-width: 560px;
color: var(--muted);
margin-bottom: 12px;
}
/* Kicker-Pille über der Hero-Headline (kleiner pulsierender Punkt) */
.kicker {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--turquoise-deep);
background: rgba(0,169,180,0.08);
border: 1px solid rgba(0,169,180,0.25);
padding: 8px 16px;
border-radius: 999px;
font-size: 0.85rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 12px;
}
.kicker .pulse {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--orange);
box-shadow: 0 0 0 0 rgba(245,163,59,0.7);
animation: pulseDot 1.8s infinite;
}
@keyframes pulseDot {
0% { box-shadow: 0 0 0 0 rgba(245,163,59,0.7); }
70% { box-shadow: 0 0 0 12px rgba(245,163,59,0); }
100% { box-shadow: 0 0 0 0 rgba(245,163,59,0); }
}
/* Hero-Badge (alternative, weichere Pille – wird auf Unterseiten genutzt) */
.hero-badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 18px;
margin-bottom: 28px;
border-radius: 999px;
background: rgba(0,169,180,0.08);
color: var(--turquoise-deep);
font-weight: 600;
font-size: 0.92rem;
}
/* Trust-Zeile unter dem Hero-Text (z. B. „DSGVO" • „Aus Deutschland") */
.hero-trust {
display: flex;
gap: 30px;
margin-top: 40px;
font-size: 0.95rem;
color: #6a7885;
}
/* Hero-Bildkarte (alternative Variante mit leichter Rotation, Unterseiten)
------------------------------------------------------------------
aspect-ratio + object-fit verhindern Verzerrung bei
Bildern, die nicht exakt quadratisch geliefert werden. Die
Rotation wird auf Mobile zurückgefahren (siehe Media Query),
damit die Karte nicht seitlich aus dem Viewport ragt.
------------------------------------------------------------------ */
.hero-image-card {
position: relative;
background: white;
border-radius: 32px;
padding: 20px;
box-shadow: 0 30px 80px rgba(16,63,124,0.12);
transform: rotate(-2deg);
max-width: 100%;
}
.hero-image-card img {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
display: block;
border-radius: 22px;
}
.hero-image-card::after {
content: "";
position: absolute;
width: 180px;
height: 180px;
background: rgba(0,169,180,0.15);
filter: blur(70px);
right: -40px;
bottom: -40px;
z-index: -1;
}
/* 3 Säulen unter dem Hero (Icons + Kurzlabel) */
.hero-pillars {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
max-width: 600px;
border-top: 1px solid rgba(0,174,184,0.18);
padding-top: 14px;
margin-top: 4px;
}
.pillar {
text-align: center;
padding: 0 12px;
color: var(--turquoise-deep);
border-right: 1px solid rgba(0,174,184,0.18);
}
.pillar:last-child { border-right: 0; }
.pillar-icon {
width: 54px; height: 54px;
margin: 0 auto 10px;
border-radius: 50%;
background: linear-gradient(135deg, var(--turquoise), var(--turquoise-dark));
color: white;
display: grid; place-items: center;
font-size: 1.5rem;
box-shadow: 0 10px 22px rgba(0,174,184,0.28);
}
.pillar-icon .material-symbols-outlined { font-size: 28px; }
.pillar strong {
display: block;
font-size: 0.78rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.06em;
line-height: 1.3;
}
/* -----------------------------------------------------------------------------
7b. Hero – Produktbühne (rechte Spalte des Hero-Grids)
Schwebendes Gerätebild + radialer Glow + animierte Ringe + Floating-Tags.
----------------------------------------------------------------------------- */
.product-stage {
position: relative;
/* niedriger gehalten, damit die rechte Spalte den Hero nicht über das
Viewport hinaus streckt (Hero soll komplett ohne Scrollen sichtbar sein). */
min-height: 360px;
display: grid;
place-items: center;
}
/* Standardmäßig sind alle Panels unsichtbar */
/* Weicher blauer Hintergrund-Schein hinter dem Gerät */
.blue-glow {
position: absolute;
width: 480px; height: 480px;
border-radius: 50%;
background: radial-gradient(circle,
rgba(185, 231, 249, 0.85),
rgba(255,255,255,0.05) 70%);
animation: floatGlow 7s ease-in-out infinite;
}
@keyframes floatGlow {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.07); }
}
/* Eigentliches Gerätebild – schwebt leicht auf und ab */
.real-device {
position: relative;
z-index: 2;
width: 450px !important;
max-width: 100%;
height: auto;
filter: drop-shadow(0 30px 40px rgba(0,0,0,0.22));
animation: deviceFloat 5s ease-in-out infinite;
}
@keyframes deviceFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-12px); }
}
/* Drei expandierende Ringe um das Gerät */
.ring {
position: absolute;
border: 2px solid rgba(0,169,180,0.5);
border-radius: 50%;
animation: ringExpand 3s linear infinite;
pointer-events: none;
}
.ring.r1 { width: 240px; height: 240px; }
.ring.r2 { width: 240px; height: 240px; animation-delay: 1s; }
.ring.r3 { width: 240px; height: 240px; animation-delay: 2s; }
@keyframes ringExpand {
0% { transform: scale(0.8); opacity: 0.8; }
100% { transform: scale(2.2); opacity: 0; }
}
/* Kleine schwebende Status-Tags am Gerät */
.floating-tag {
position: absolute;
z-index: 3;
background: white;
padding: 12px 18px;
border-radius: 14px;
box-shadow: var(--shadow);
font-size: 0.85rem;
font-weight: 800;
color: var(--blue);
display: flex;
align-items: center;
gap: 10px;
animation: tagFloat 4s ease-in-out infinite;
}
.floating-tag .dot {
width: 10px; height: 10px;
border-radius: 50%;
background: var(--turquoise);
}
.tag-1 { top: 60px; left: -10px; animation-delay: 0.2s; }
.tag-2 { top: 230px; right: -10px; animation-delay: 1.2s; }
.tag-3 { bottom: 60px; left: 30px; animation-delay: 2.2s; }
@keyframes tagFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
/* -----------------------------------------------------------------------------
7c. Hero – vertikaler Rhythmus + Anpassung an die Bildschirmhöhe
-----------------------------------------------------------------------------
Der große .hero (Startseite, Warum-NOA, Partner) ist min-height:100dvh und oben-
bündig. Die Headline ist kurz (1 Zeile), daher bekommt der Hero auf normalen/hohen
Schirmen (Höhe >= 661px, z. B. 1080p @125% ~684px) einen großzügigen, luftigen
Rhythmus, der die Höhe angenehm füllt. Auf niedrigeren Viewports schrumpfen Abstände,
Icons und Produktbild gemeinsam (kein Scrollen); sehr flache Schirme verkleinern
zusätzlich Logo + Kopf-Abstand. Auf min-width:981px begrenzt, damit das gestapelte
Mobile-Layout (<=980px) unberührt bleibt. */
@media (min-width: 981px) {
/* Produktbild + Glow fluide, nie zu groß (alle Desktop-Höhen). */
.hero .real-device { width: clamp(320px, 27vw, 430px) !important; }
.hero .blue-glow { width: clamp(360px, 30vw, 480px); height: clamp(360px, 30vw, 480px); }
}
@media (min-width: 981px) and (min-height: 661px) {
/* Ausgewogener Rhythmus auf normalen/hohen Schirmen. Die H1 hat wieder einen
(mehrzeiligen) Accent, daher moderatere Abstände als bei einzeiliger H1. */
.hero .kicker { margin-bottom: 16px; }
.hero h1 { margin-bottom: 22px; }
.hero .hero-text { margin-bottom: 20px; }
.hero .cta-row { margin-bottom: 32px; }
.hero .micro-trust { margin-top: 12px; margin-bottom: 30px; }
.hero .hero-rating { margin-top: 20px; }
.hero .hero-pillars { padding-top: 24px; margin-top: 0; }
}
@media (min-width: 981px) and (max-height: 660px) {
.hero { padding-top: 92px; padding-bottom: 20px; }
.hero .cta-row { margin-bottom: 22px; }
.hero .micro-trust { margin-top: 4px; margin-bottom: 16px; }
.hero .hero-rating { margin-top: 6px; }
.hero .hero-pillars { padding-top: 10px; margin-top: 0; }
.hero .pillar-icon { width: 48px; height: 48px; margin-bottom: 8px; }
.hero .pillar-icon .material-symbols-outlined { font-size: 25px; }
.hero .product-stage { min-height: 280px; }
.hero .image-stack img { width: 210px; height: auto; }
}
@media (min-width: 981px) and (max-height: 540px) {
.hero { padding-top: 72px; padding-bottom: 8px; }
.logo img { height: 62px; max-height: 62px; }
.hero .kicker { margin-bottom: 6px; }
.hero .cta-row { margin-bottom: 10px; }
.hero .micro-trust { margin-top: 2px; margin-bottom: 8px; }
.hero .btn { min-height: 46px; padding: 11px 22px; }
.hero .hero-pillars .pillar strong { font-size: 0.72rem; }
.hero .pillar-icon { width: 40px; height: 40px; }
.hero .product-stage { min-height: 220px; }
.hero .real-device { width: 300px !important; }
.hero .image-stack img { width: 160px; }
}
/* =============================================================================
8. TRUST-STRIP
-----------------------------------------------------------------------------
Schmaler Vertrauens-Streifen (Icons mit Labels), direkt unter dem Hero.
HTML:
…
============================================================================= */
.trust-strip {
background: white;
border-top: 1px solid rgba(0,174,184,0.15);
border-bottom: 1px solid rgba(0,174,184,0.15);
padding: 22px 0;
}
.trust-strip-inner {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 14px 28px;
color: var(--blue-deep);
font-weight: 800;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.trust-item {
display: inline-flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.trust-item .material-symbols-outlined {
color: var(--turquoise);
font-size: 22px;
font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}
.trust-item .sep {
width: 4px; height: 4px;
border-radius: 50%;
background: rgba(0,174,184,0.4);
}
/* =============================================================================
8b. REALITY / WARUM SICHERHEIT IM ALTER ZÄHLT
-----------------------------------------------------------------------------
Emotionaler Content-Abschnitt zwischen Hero/Trust-Strip und "So funktioniert
NOA". Holt Angehörige + Senioren empathisch ab: reale Sorgen + was NOA
ermöglicht. Eigene interne Media Queries am Ende des Blocks.
HTML: .reality-grid + .reality-pledges + .reality-closing
============================================================================= */
.reality {
background: linear-gradient(180deg, #ffffff 0%, var(--bg-soft) 100%);
position: relative;
overflow: hidden;
}
.reality::before,
.reality::after {
content: "";
position: absolute;
border-radius: 50%;
pointer-events: none;
z-index: 0;
}
.reality::before {
top: -140px; left: -120px;
width: 380px; height: 380px;
background: radial-gradient(circle, rgba(0,169,180,0.10), transparent 70%);
}
.reality::after {
bottom: -160px; right: -120px;
width: 440px; height: 440px;
background: radial-gradient(circle, rgba(245,163,59,0.08), transparent 70%);
}
.reality > .container {
position: relative;
z-index: 1;
}
.reality .section-head {
margin-bottom: 56px;
}
/* 2x2 Grid mit Sorgen / Realitäten */
.reality-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 26px;
}
.reality-card {
background: white;
border-radius: var(--radius);
border: 1px solid rgba(0,174,184,0.16);
box-shadow: var(--shadow);
padding: 34px 32px;
display: grid;
grid-template-columns: 68px 1fr;
gap: 22px;
align-items: flex-start;
transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.reality-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
border-color: rgba(0,174,184,0.32);
}
.reality-card-body { min-width: 0; }
.reality-card h3 {
color: var(--blue-deep);
font-size: 1.2rem;
letter-spacing: -0.015em;
line-height: 1.25;
margin-bottom: 10px;
}
.reality-card p {
color: var(--muted);
font-size: 0.98rem;
line-height: 1.6;
}
/* Icon-Bubble der Cards (3 Farbvarianten passend zur Marke) */
.reality-icon {
width: 68px; height: 68px;
border-radius: 20px;
display: grid; place-items: center;
color: white;
flex-shrink: 0;
}
.reality-icon .material-symbols-outlined {
font-size: 34px;
font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
.reality-icon-turquoise {
background: linear-gradient(135deg, var(--turquoise), var(--turquoise-dark));
box-shadow: 0 12px 24px rgba(0,174,184,0.28);
}
.reality-icon-blue {
background: linear-gradient(135deg, var(--blue), var(--blue-deep));
box-shadow: 0 12px 24px rgba(16,63,124,0.28);
}
.reality-icon-orange {
background: linear-gradient(135deg, var(--orange), #e08920);
box-shadow: 0 12px 24px rgba(245,163,59,0.30);
}
/* "Was NOA ermöglicht" Pledge-Band (3 Spalten) */
.reality-pledges {
margin-top: 36px;
background: white;
border-radius: var(--radius);
border: 1px solid rgba(0,174,184,0.16);
box-shadow: var(--shadow);
padding: 30px 34px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.reality-pledge {
display: flex;
align-items: flex-start;
gap: 16px;
}
.reality-pledge .pledge-icon {
color: var(--turquoise);
font-size: 30px;
font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
flex-shrink: 0;
margin-top: 2px;
}
.reality-pledge .pledge-text {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.reality-pledge .pledge-text strong {
color: var(--blue-deep);
font-weight: 800;
font-size: 1rem;
letter-spacing: -0.005em;
}
.reality-pledge .pledge-text span {
color: var(--muted);
font-size: 0.92rem;
line-height: 1.55;
}
/* Empathischer Closing-Satz */
.reality-closing {
margin-top: 38px;
text-align: center;
color: var(--blue-deep);
font-size: 1.1rem;
line-height: 1.55;
max-width: 760px;
margin-left: auto;
margin-right: auto;
}
.reality-closing strong {
color: var(--turquoise-deep);
font-weight: 800;
}
.reality-closing .material-symbols-outlined {
color: var(--turquoise);
font-size: 26px;
vertical-align: -6px;
margin-right: 8px;
font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
/* Responsive (eigene MQs für isolierte Wartbarkeit) */
@media (max-width: 980px) {
.reality .section-head { margin-bottom: 42px; }
.reality-grid {
grid-template-columns: 1fr;
gap: 18px;
}
.reality-pledges {
grid-template-columns: 1fr;
gap: 22px;
padding: 26px 28px;
margin-top: 28px;
}
.reality-closing {
margin-top: 30px;
font-size: 1rem;
}
}
@media (max-width: 560px) {
.reality-card {
padding: 26px 22px;
grid-template-columns: 56px 1fr;
gap: 18px;
}
.reality-icon { width: 56px; height: 56px; border-radius: 16px; }
.reality-icon .material-symbols-outlined { font-size: 28px; }
.reality-card h3 { font-size: 1.08rem; }
.reality-card p { font-size: 0.94rem; }
.reality-pledges { padding: 22px; }
.reality-pledge .pledge-icon { font-size: 26px; }
.reality-closing {
font-size: 0.96rem;
line-height: 1.55;
}
.reality-closing .material-symbols-outlined {
display: block;
margin: 0 auto 8px;
}
}
/* =============================================================================
9. MISSION / IDEE
-----------------------------------------------------------------------------
Section "Die Idee hinter NOA": Text links, Visual-Card mit Stats rechts.
HTML: …
============================================================================= */
.mission {
background: linear-gradient(180deg, #ffffff, #f3fbfd);
position: relative;
overflow: hidden;
}
.mission::before {
content: "";
position: absolute;
top: -100px; right: -100px;
width: 400px; height: 400px;
border-radius: 50%;
background: radial-gradient(circle, rgba(0,169,180,0.12), transparent 70%);
}
.mission-grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 60px;
align-items: center;
}
/* Textspalte links */
.mission-text h2 {
font-size: clamp(2rem, 4vw, 3.2rem);
color: var(--blue-deep);
letter-spacing: -0.035em;
line-height: 1.05;
margin-bottom: 22px;
font-weight: 900;
}
.mission-text h2 .heart {
display: inline-block;
color: var(--orange);
animation: heartBeat 1.4s ease-in-out infinite;
vertical-align: 0px;
}
.mission-text h2 .heart .material-symbols-outlined { font-size: 0.9em; }
@keyframes heartBeat {
0%, 100% { transform: scale(1); }
25%, 75% { transform: scale(1.15); }
}
.mission-text p {
font-size: 1.15rem;
color: var(--muted);
margin-bottom: 18px;
}
.mission-quote {
margin-top: 26px;
padding: 22px 26px;
border-left: 4px solid var(--turquoise);
background: white;
border-radius: 0 14px 14px 0;
box-shadow: var(--shadow);
color: var(--blue-deep);
font-weight: 700;
font-size: 1.1rem;
}
/* Farbige Visual-Card mit Statistiken (rechte Spalte) */
.visual-card {
background: linear-gradient(135deg, var(--turquoise) 0%, var(--blue) 100%);
border-radius: 28px;
padding: 44px;
color: white;
box-shadow: var(--shadow-lg);
position: relative;
overflow: hidden;
}
.visual-card::before {
content: "";
position: absolute;
bottom: -80px; right: -80px;
width: 280px; height: 280px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%);
}
.visual-card h3 {
font-size: 2rem;
margin-bottom: 16px;
letter-spacing: -0.03em;
}
.visual-card .stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 22px;
margin-top: 32px;
position: relative;
z-index: 2;
}
.stat-num {
font-size: 2.6rem;
font-weight: 900;
letter-spacing: -0.04em;
line-height: 1;
margin-bottom: 6px;
}
.stat-num span { color: var(--orange-soft); }
.stat-label {
font-size: 0.85rem;
opacity: 0.92;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.06em;
}
/* =============================================================================
10. AUDIENCE (Zielgruppen-Tabs)
-----------------------------------------------------------------------------
Vier umschaltbare Panels (Senioren / Angehörige / Pflege / Reisende usw.).
HTML: …
+ …
============================================================================= */
.audience { background: white; }
/* Tab-Leiste oben */
.audience-tabs {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 48px;
background: var(--bg-soft);
padding: 8px;
border-radius: 28px;
/* 1040 statt 880: seit der 4. Tab „Sicherheitszentrale" dazukam, war die
Leiste zu schmal — das lange (umbruchlose) Label wurde abgeschnitten. */
max-width: 1040px;
margin-left: auto;
margin-right: auto;
border: 1px solid rgba(0,174,184,0.15);
}
.audience-tab {
flex: 1 1 calc(25% - 8px);
min-width: 150px;
padding: 13px 14px;
border: 0;
background: transparent;
border-radius: 999px;
cursor: pointer;
font-weight: 900;
font-size: 0.84rem;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.02em;
transition: all .25s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
text-decoration: none;
/* lange Labels (z. B. „Inaktivitäts-Erkennung") dürfen notfalls umbrechen,
statt aus dem Tab zu laufen. */
white-space: normal;
line-height: 1.15;
text-align: center;
}
.audience-tab.active {
background: linear-gradient(135deg, var(--turquoise), var(--turquoise-dark));
color: white;
box-shadow: 0 10px 24px rgba(0,174,184,0.32);
}
.audience-tab .tab-icon {
font-size: 1.3rem;
display: inline-flex;
align-items: center;
}
.audience-tab .tab-icon .material-symbols-outlined { font-size: 22px; }
/* Einzelnes Panel (jeweils nur eines aktiv) */
.audience-panel {
display: none;
animation: fadeUp .5s ease;
}
.audience-panel.active { display: block; }
@keyframes fadeUp {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
/* Standardmäßig sind alle Panels unsichtbar */
/* Inhalt eines aktiven Panels – Grid mit Text links und Szenario rechts */
.audience-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center;
background: linear-gradient(135deg, var(--bg-soft) 0%, white 60%);
border-radius: 32px;
padding: 50px;
border: 1px solid rgba(0,174,184,0.18);
box-shadow: var(--shadow);
}
.audience-content h3 {
font-size: clamp(1.8rem, 3vw, 2.6rem);
color: var(--blue-deep);
letter-spacing: -0.035em;
margin-bottom: 14px;
line-height: 1.1;
}
.audience-content .audience-sub {
color: var(--turquoise-deep);
font-size: 0.95rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 18px;
}
.audience-content p.lead {
color: var(--muted);
font-size: 1.1rem;
margin-bottom: 22px;
}
/* Liste mit Häkchen-Punkten */
.audience-list {
list-style: none;
display: grid;
gap: 14px;
margin-bottom: 26px;
}
.audience-list li {
display: flex;
gap: 14px;
align-items: flex-start;
color: var(--blue-deep);
font-weight: 600;
}
.audience-list .check {
flex-shrink: 0;
width: 26px; height: 26px;
border-radius: 50%;
background: var(--turquoise);
color: white;
display: grid; place-items: center;
font-size: 0.9rem;
font-weight: 900;
margin-top: 2px;
}
.audience-list .check .material-symbols-outlined {
font-size: 18px;
font-variation-settings: 'FILL' 0, 'wght' 700, 'GRAD' 0, 'opsz' 20;
}
/* Szenario-Karte (rechte Spalte) */
.audience-scenario {
background: white;
border: 1px solid rgba(0,174,184,0.2);
border-radius: 22px;
padding: 30px;
box-shadow: var(--shadow);
position: relative;
}
.audience-scenario .scenario-tag {
position: absolute;
top: -14px; left: 24px;
background: var(--orange);
color: white;
padding: 6px 14px;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.audience-scenario h4 {
color: var(--blue-deep);
font-size: 1.15rem;
margin-bottom: 12px;
margin-top: 6px;
}
.audience-scenario p {
color: var(--muted);
margin-bottom: 16px;
}
.audience-steps {
display: grid;
gap: 18px;
}
/* Schritt-für-Schritt-Flow innerhalb des Szenarios */
.scenario-flow {
display: grid;
gap: 12px;
}
.flow-step {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: var(--bg-soft);
border-radius: 12px;
font-size: 0.93rem;
color: var(--blue-deep);
font-weight: 600;
}
.flow-step .num {
flex-shrink: 0;
width: 28px; height: 28px;
border-radius: 50%;
background: var(--turquoise);
color: white;
display: grid; place-items: center;
font-size: 0.85rem;
font-weight: 900;
}
/* =============================================================================
11. HOW IT WORKS (Flow Cards)
-----------------------------------------------------------------------------
"So funktioniert NOA" – vier nummerierte Karten in einer Reihe.
HTML:
============================================================================= */
.how {
background: linear-gradient(180deg, #f3fbfd 0%, #ffffff 100%);
position: relative;
}
/* Grid (zusammengeführt aus zwei früheren Definitionen: Reset + 4-Spalten-Grid) */
.flow-grid {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
position: relative;
}
.flow-card {
background: white;
border-radius: var(--radius);
padding: 30px 26px;
border: 1px solid rgba(0,174,184,0.18);
box-shadow: var(--shadow);
position: relative;
transition: transform .25s ease, box-shadow .25s ease;
}
.flow-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
}
.flow-card .step-num {
position: absolute;
top: -16px; left: 26px;
width: 38px; height: 38px;
border-radius: 50%;
background: var(--orange);
color: white;
display: grid; place-items: center;
font-weight: 900;
box-shadow: 0 8px 18px rgba(245,163,59,0.4);
}
.flow-card .icon-big {
width: 64px; height: 64px;
border-radius: 18px;
background: linear-gradient(135deg, var(--turquoise), var(--turquoise-dark));
color: white;
display: grid; place-items: center;
font-size: 1.8rem;
margin: 14px 0 18px;
box-shadow: 0 12px 24px rgba(0,174,184,0.25);
}
.flow-card .icon-big .material-symbols-outlined { font-size: 32px; }
.flow-card h3 {
color: var(--blue-deep);
font-size: 1.15rem;
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.flow-card p {
color: var(--muted);
font-size: 0.95rem;
}
/* =============================================================================
12. ESCALATION
-----------------------------------------------------------------------------
"Was passiert, wenn niemand abnimmt?" – Liste von Eskalationsstufen +
Honesty-Box rechts.
HTML: …
============================================================================= */
.escalation {
background: linear-gradient(180deg, #ffffff 0%, #f3fbfd 100%);
}
.escalation-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.escalation-stages {
display: grid;
gap: 14px;
}
/* Eine einzelne Eskalationsstufe (Nr. + Titel + Beschreibung) */
.stage-card {
background: white;
border: 1px solid rgba(0,174,184,0.2);
border-radius: 18px;
padding: 22px 24px;
box-shadow: var(--shadow);
display: grid;
grid-template-columns: 56px 1fr;
gap: 18px;
align-items: flex-start;
}
.stage-num {
width: 48px; height: 48px;
border-radius: 14px;
background: linear-gradient(135deg, var(--turquoise), var(--turquoise-dark));
color: white;
display: grid; place-items: center;
font-weight: 900;
font-size: 1.2rem;
box-shadow: 0 8px 18px rgba(0,174,184,0.28);
}
.stage-card h4 {
color: var(--blue-deep);
font-size: 1.1rem;
margin-bottom: 6px;
letter-spacing: -0.01em;
}
.stage-card p {
color: var(--muted);
font-size: 0.95rem;
}
/* Variante: optionale Stufe (orange Akzentfarbe) */
.stage-card.optional {
border-color: var(--orange);
background: linear-gradient(180deg, #fff8ec 0%, white 80%);
}
.stage-card.optional .stage-num {
background: linear-gradient(135deg, var(--orange), #e08920);
}
.stage-tag {
display: inline-block;
background: var(--orange);
color: white;
font-size: 0.7rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 3px 10px;
border-radius: 999px;
margin-bottom: 6px;
}
/* =============================================================================
13. HONESTY BOX
-----------------------------------------------------------------------------
Karte mit Hinweis "Was NOA NICHT kann" (im Escalation-Grid auf der rechten
Seite eingebettet).
============================================================================= */
.honesty-box {
background: white;
border: 1px solid rgba(0,174,184,0.2);
border-left: 4px solid var(--turquoise);
border-radius: 0 18px 18px 0;
padding: 26px 28px;
box-shadow: var(--shadow);
}
.honesty-box h3 {
color: var(--blue-deep);
font-size: 1.3rem;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 10px;
}
.honesty-box h3 .material-symbols-outlined {
color: var(--turquoise);
font-size: 28px;
}
.honesty-box p {
color: var(--muted);
margin-bottom: 12px;
font-size: 1rem;
}
.honesty-box p:last-child { margin-bottom: 0; }
.honesty-box strong { color: var(--blue-deep); }
/* =============================================================================
14. COMPARE-TABELLE
-----------------------------------------------------------------------------
Vergleichstabelle "NOA vs. andere Lösungen". Eigene Spalte für NOA wird mit
.col-noa hervorgehoben. Auf Mobile horizontal scrollbar.
HTML:
============================================================================= */
.compare { background: white; }
.compare-wrapper {
max-width: 980px;
margin: 0 auto;
background: white;
border: 1px solid rgba(0,174,184,0.2);
border-radius: 24px;
box-shadow: var(--shadow);
overflow-x: auto;
}
.compare-table {
min-width: 760px;
width: 100%;
border-collapse: collapse;
}
.compare-table thead th {
background: var(--bg-soft);
color: var(--blue-deep);
padding: 22px 24px;
text-align: left;
font-size: 1rem;
font-weight: 900;
letter-spacing: 0.02em;
border-bottom: 1px solid rgba(0,174,184,0.18);
}
.compare-table thead th.col-noa {
background: linear-gradient(135deg, var(--turquoise), var(--turquoise-dark));
color: white;
}
.compare-table tbody td {
padding: 18px 24px;
border-bottom: 1px solid rgba(0,174,184,0.12);
font-size: 0.97rem;
color: var(--blue-deep);
vertical-align: top;
}
.compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table tbody td:first-child {
font-weight: 700;
color: var(--blue-deep);
width: 32%;
}
/* Zellen mit "ja" / "nein"-Status (Icon + Farbe) */
.compare-table .yes,
.compare-table .no {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 700;
}
.compare-table .yes { color: var(--turquoise-deep); }
.compare-table .no { color: #b04848; }
.compare-table .yes .material-symbols-outlined,
.compare-table .no .material-symbols-outlined {
font-size: 22px;
font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 24;
}
/* =============================================================================
15. APP-SECTION (Setup-App für Bezugsperson)
-----------------------------------------------------------------------------
Smartphone-Mockup links, Feature-Liste + Bonus-Hinweis rechts.
HTML: …
============================================================================= */
.app-section {
background: linear-gradient(180deg, #ffffff 0%, var(--bg-soft) 100%);
position: relative;
overflow: hidden;
}
.app-section::before {
content: "";
position: absolute;
top: -120px; right: -120px;
width: 380px; height: 380px;
border-radius: 50%;
background: radial-gradient(circle, rgba(0,169,180,0.12), transparent 70%);
pointer-events: none;
}
.app-grid {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: 60px;
align-items: center;
position: relative;
z-index: 1;
}
/* Phone-Mockup (linke Spalte) */
.app-phone-stage {
display: grid;
place-items: center;
position: relative;
}
.app-phone-frame {
position: relative;
width: 290px;
max-width: 100%;
padding: 14px 14px 18px;
background: #1d2939;
border-radius: 44px;
box-shadow:
0 35px 70px rgba(16,63,124,0.28),
0 0 0 2px rgba(0,174,184,0.18);
}
.app-phone-frame::before {
/* Notch oberhalb des Screenshots */
content: "";
position: absolute;
top: 18px; left: 50%;
transform: translateX(-50%);
width: 80px; height: 16px;
background: #1d2939;
border-radius: 0 0 14px 14px;
z-index: 2;
}
.app-phone-frame img {
display: block;
width: 100%;
height: auto;
border-radius: 32px;
background: white;
}
.app-phone-glow {
position: absolute;
width: 460px; height: 460px;
border-radius: 50%;
background: radial-gradient(circle, rgba(185,231,249,0.55), transparent 70%);
animation: floatGlow 7s ease-in-out infinite;
pointer-events: none;
z-index: 0;
}
/* Text-Spalte rechts (Headline + Features + Bonus) */
.app-text .section-eyebrow { margin-bottom: 12px; }
.app-text h2 {
font-size: clamp(1.9rem, 3.6vw, 2.8rem);
color: var(--blue-deep);
letter-spacing: -0.035em;
line-height: 1.1;
margin-bottom: 16px;
font-weight: 900;
}
.app-text h2 .accent {
background: linear-gradient(120deg, var(--turquoise), var(--turquoise-dark));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.app-text p.lead {
color: var(--muted);
font-size: 1.1rem;
margin-bottom: 28px;
}
/* Kleine Feature-Karten (2-Spalten-Grid) */
.app-features {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-bottom: 28px;
}
.app-feature {
background: white;
border: 1px solid rgba(0,174,184,0.16);
border-radius: 16px;
padding: 18px 20px;
box-shadow: 0 8px 22px rgba(16,63,124,0.06);
transition: .2s;
}
.app-feature:hover {
transform: translateY(-3px);
border-color: var(--turquoise);
box-shadow: var(--shadow);
}
.app-feature .af-icon {
width: 40px; height: 40px;
border-radius: 12px;
background: linear-gradient(135deg, var(--turquoise), var(--turquoise-dark));
color: white;
display: grid; place-items: center;
margin-bottom: 12px;
box-shadow: 0 6px 14px rgba(0,174,184,0.28);
}
.app-feature .af-icon .material-symbols-outlined { font-size: 22px; color: white; }
.app-feature h4 {
color: var(--blue-deep);
font-size: 1rem;
margin-bottom: 4px;
letter-spacing: -0.01em;
}
.app-feature p {
color: var(--muted);
font-size: 0.88rem;
line-height: 1.45;
}
/* Bonus-Hinweis (orange Akzent) */
.app-bonus {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 20px;
background: linear-gradient(135deg, rgba(245,163,59,0.12), rgba(245,163,59,0.04));
border: 1px solid rgba(245,163,59,0.35);
border-radius: 16px;
margin-bottom: 22px;
}
.app-bonus-badge {
flex-shrink: 0;
width: 54px; height: 54px;
border-radius: 14px;
background: linear-gradient(135deg, var(--orange), #e08920);
color: white;
display: grid; place-items: center;
font-weight: 900;
font-size: 0.95rem;
line-height: 1;
text-align: center;
box-shadow: 0 8px 18px rgba(245,163,59,0.32);
}
.app-bonus-badge span { display: block; font-size: 1.1rem; }
.app-bonus-text strong {
display: block;
color: var(--blue-deep);
font-size: 1rem;
margin-bottom: 2px;
}
.app-bonus-text span {
color: var(--muted);
font-size: 0.9rem;
}
/* Kleiner Info-Kasten am Ende der Section */
.app-note {
display: flex;
gap: 10px;
align-items: flex-start;
color: var(--turquoise-deep);
font-size: 0.92rem;
font-weight: 700;
padding: 12px 16px;
background: rgba(0,169,180,0.08);
border-radius: 12px;
border: 1px solid rgba(0,169,180,0.18);
}
.app-note .material-symbols-outlined { font-size: 20px; }
/* =============================================================================
16. SIM-DETAIL
-----------------------------------------------------------------------------
Section "SIM-Karte / Multi-Netz". Text links, SIM-Visualisierung rechts.
HTML: …
============================================================================= */
.sim-section {
position: relative;
padding: 100px 0;
background: linear-gradient(180deg, #ffffff 0%, #f4fafb 100%);
overflow: hidden;
}
.sim-section::before {
content: "";
position: absolute;
top: -120px; right: -120px;
width: 420px; height: 420px;
border-radius: 50%;
background: radial-gradient(circle, rgba(0,169,180,0.10), transparent 70%);
pointer-events: none;
}
.sim-section::after {
content: "";
position: absolute;
bottom: -140px; left: -120px;
width: 380px; height: 380px;
border-radius: 50%;
background: radial-gradient(circle, rgba(245,163,59,0.08), transparent 70%);
pointer-events: none;
}
.sim-grid {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 60px;
align-items: center;
position: relative;
z-index: 1;
}
/* Text-Spalte */
.sim-text .section-eyebrow { margin-bottom: 12px; }
.sim-text h2 {
font-size: clamp(1.9rem, 3.6vw, 2.8rem);
color: var(--blue-deep);
letter-spacing: -0.035em;
line-height: 1.1;
margin-bottom: 16px;
font-weight: 900;
}
.sim-text h2 .accent {
background: linear-gradient(120deg, var(--turquoise), var(--turquoise-dark));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.sim-text p.lead {
color: var(--muted);
font-size: 1.1rem;
margin-bottom: 28px;
}
/* Kleine Feature-Karten (2-Spalten-Grid) */
.sim-features {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-bottom: 22px;
}
.sim-feature {
background: white;
border: 1px solid rgba(0,174,184,0.16);
border-radius: 16px;
padding: 18px 20px;
box-shadow: 0 8px 22px rgba(16,63,124,0.06);
transition: .2s;
}
.sim-feature:hover {
transform: translateY(-3px);
border-color: var(--turquoise);
box-shadow: var(--shadow);
}
.sim-feature .sf-icon {
width: 40px; height: 40px;
border-radius: 12px;
background: linear-gradient(135deg, var(--turquoise), var(--turquoise-dark));
color: white;
display: grid; place-items: center;
margin-bottom: 12px;
box-shadow: 0 6px 14px rgba(0,174,184,0.28);
}
.sim-feature .sf-icon .material-symbols-outlined { font-size: 22px; color: white; }
.sim-feature h4 {
color: var(--blue-deep);
font-size: 1rem;
margin-bottom: 4px;
letter-spacing: -0.01em;
}
.sim-feature p {
color: var(--muted);
font-size: 0.88rem;
line-height: 1.45;
}
/* SIM-Visual rechts: Karte mit Chip + pulsierende Ringe + Netzwerk-Chips */
.sim-visual {
position: relative;
display: grid;
place-items: center;
}
.sim-visual-glow {
position: absolute;
width: 440px; height: 440px;
border-radius: 50%;
background: radial-gradient(circle, rgba(0,169,180,0.22), transparent 70%);
animation: floatGlow 7s ease-in-out infinite;
pointer-events: none;
z-index: 0;
}
.sim-card-frame {
position: relative;
width: 100%;
max-width: 340px;
aspect-ratio: 1 / 1.1;
border-radius: 28px;
background: linear-gradient(135deg, #ffffff 0%, #ecf7f8 100%);
border: 1px solid rgba(0,174,184,0.22);
box-shadow:
0 30px 60px rgba(16,63,124,0.18),
0 0 0 2px rgba(0,174,184,0.10);
overflow: hidden;
z-index: 1;
}
.sim-card-frame img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 28px;
z-index: 2;
}
.sim-card-placeholder {
position: absolute;
inset: 0;
display: grid;
place-items: center;
align-content: center;
gap: 12px;
text-align: center;
padding: 24px;
z-index: 1;
}
.sim-chip {
width: 110px; height: 110px;
border-radius: 24px;
background: linear-gradient(135deg, var(--turquoise), var(--turquoise-dark));
display: grid; place-items: center;
box-shadow:
0 18px 36px rgba(0,174,184,0.32),
inset 0 -4px 12px rgba(0,0,0,0.10);
position: relative;
}
.sim-chip::after {
content: "";
position: absolute;
inset: 12px;
border-radius: 16px;
border: 1.5px dashed rgba(255,255,255,0.55);
}
.sim-chip .material-symbols-outlined {
font-size: 56px;
color: white;
z-index: 1;
}
.sim-card-label {
color: var(--turquoise-deep);
font-weight: 800;
font-size: 0.92rem;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.sim-card-sub {
color: var(--muted);
font-size: 0.82rem;
font-weight: 600;
}
/* Pulsierende Kreise hinter dem Chip */
.sim-pulse {
position: absolute;
border-radius: 50%;
border: 1.5px solid rgba(0,174,184,0.35);
top: 50%; left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 0;
}
.sim-pulse-1 { width: 70%; height: 70%; animation: simPulse 3.4s ease-out infinite; }
.sim-pulse-2 { width: 90%; height: 90%; animation: simPulse 3.4s ease-out infinite 1.1s; }
.sim-pulse-3 { width: 110%; height: 110%; animation: simPulse 3.4s ease-out infinite 2.2s; }
@keyframes simPulse {
0% { opacity: 0.65; transform: translate(-50%, -50%) scale(0.85); }
100% { opacity: 0; transform: translate(-50%, -50%) scale(1.15); }
}
/* Netzwerk-Chips (z. B. "Vodafone", "Telekom", "+ mehr") unter der SIM */
.sim-networks {
margin-top: 22px;
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
position: relative;
z-index: 1;
}
.sim-network-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: white;
border: 1px solid rgba(0,174,184,0.22);
border-radius: 999px;
font-size: 0.85rem;
font-weight: 700;
color: var(--blue-deep);
box-shadow: 0 6px 14px rgba(16,63,124,0.06);
}
.sim-network-chip .dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--turquoise);
box-shadow: 0 0 0 3px rgba(0,169,180,0.18);
}
.sim-network-chip.more {
background: linear-gradient(135deg, rgba(245,163,59,0.12), rgba(245,163,59,0.04));
border-color: rgba(245,163,59,0.40);
color: #b46a14;
}
.sim-network-chip.more .dot { display: none; }
/* =============================================================================
17. TECH-DETAIL
-----------------------------------------------------------------------------
Dunkler Bereich mit 3 Glass-Cards (LTE, GPS, Akku o. ä.).
HTML:
============================================================================= */
.tech {
background: var(--blue);
color: white;
position: relative;
overflow: hidden;
}
.tech::before {
content: "";
position: absolute;
top: -200px; left: -200px;
width: 600px; height: 600px;
border-radius: 50%;
background: radial-gradient(circle, rgba(0,169,180,0.18), transparent 70%);
}
.tech::after {
content: "";
position: absolute;
bottom: -200px; right: -200px;
width: 600px; height: 600px;
border-radius: 50%;
background: radial-gradient(circle, rgba(245,163,59,0.1), transparent 70%);
}
/* Section-Head innerhalb .tech bekommt helle Schrift */
.tech .section-head h2 { color: white; }
.tech .section-head p { color: rgba(255,255,255,0.78); }
.tech .section-eyebrow { color: var(--orange-soft); }
.tech-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 22px;
position: relative;
z-index: 2;
}
.tech-card {
background: rgba(255,255,255,0.06);
backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 22px;
padding: 32px 28px;
transition: all .25s;
}
.tech-card:hover {
background: rgba(255,255,255,0.1);
transform: translateY(-4px);
border-color: rgba(0,169,180,0.4);
}
.tech-icon {
width: 56px; height: 56px;
border-radius: 14px;
background: linear-gradient(135deg, var(--turquoise), var(--turquoise-dark));
color: white;
display: grid; place-items: center;
font-size: 1.5rem;
margin-bottom: 18px;
}
.tech-icon .material-symbols-outlined { font-size: 28px; color: white; }
.tech-card h3 {
font-size: 1.2rem;
margin-bottom: 10px;
letter-spacing: -0.01em;
}
.tech-card p {
color: rgba(255,255,255,0.78);
font-size: 0.95rem;
margin-bottom: 14px;
}
.tech-card ul {
list-style: none;
display: grid;
gap: 8px;
}
.tech-card li {
font-size: 0.9rem;
color: rgba(255,255,255,0.85);
padding-left: 22px;
position: relative;
}
.tech-card li::before {
content: "▸";
position: absolute;
left: 0;
color: var(--orange);
font-weight: 900;
}
/* =============================================================================
18. DETAIL-FLOW (3 Anrufe + SMS)
-----------------------------------------------------------------------------
Section mit zwei Karten nebeneinander: links Anrufkette, rechts SMS-Mockup.
HTML:
…
============================================================================= */
.detail-flow { background: white; }
.detail-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: stretch;
}
.detail-card {
background: linear-gradient(135deg, var(--bg-soft), white);
border: 1px solid rgba(0,174,184,0.2);
border-radius: 28px;
padding: 42px;
box-shadow: var(--shadow);
position: relative;
overflow: hidden;
}
.detail-card::before {
content: "";
position: absolute;
top: 0; right: 0;
width: 180px; height: 180px;
border-radius: 50%;
background: radial-gradient(circle, rgba(0,169,180,0.12), transparent 70%);
}
.detail-card h3 {
font-size: 1.7rem;
color: var(--blue-deep);
margin-bottom: 12px;
letter-spacing: -0.025em;
}
.detail-card .lead-sub {
color: var(--turquoise-deep);
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 0.85rem;
margin-bottom: 8px;
}
.detail-card p {
color: var(--muted);
margin-bottom: 24px;
font-size: 1.05rem;
}
/* Anrufkette (linke Karte) */
.phone-chain {
display: grid;
gap: 16px;
position: relative;
}
.phone-item {
display: grid;
grid-template-columns: 50px 1fr auto;
align-items: center;
gap: 16px;
padding: 16px 18px;
background: white;
border-radius: 16px;
border: 1px solid rgba(0,174,184,0.2);
position: relative;
}
.phone-num {
width: 42px; height: 42px;
border-radius: 50%;
background: var(--turquoise);
color: white;
display: grid; place-items: center;
font-weight: 900;
font-size: 1.1rem;
}
.phone-info strong {
display: block;
color: var(--blue-deep);
font-size: 1rem;
margin-bottom: 2px;
}
.phone-info span {
color: var(--muted);
font-size: 0.85rem;
}
.phone-status {
font-size: 0.78rem;
font-weight: 800;
padding: 5px 12px;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.status-call { background: rgba(245,163,59,0.18); color: #b46f10; }
.status-ok { background: rgba(0,169,180,0.18); color: var(--turquoise-deep); }
.status-wait { background: rgba(90,122,172,0.15); color: var(--muted); }
/* SMS-Mockup (rechte Karte) */
.sms-mockup {
background: #1d2939;
border-radius: 22px;
padding: 26px 22px;
color: white;
position: relative;
}
.sms-mockup-header {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.78rem;
color: rgba(255,255,255,0.6);
letter-spacing: 0.05em;
margin-bottom: 14px;
font-weight: 700;
text-transform: uppercase;
}
.sms-mockup-header .material-symbols-outlined { font-size: 18px; }
.sms-bubble {
background: linear-gradient(135deg, var(--turquoise), var(--turquoise-dark));
padding: 18px 20px;
border-radius: 18px 18px 18px 4px;
font-size: 0.95rem;
line-height: 1.5;
box-shadow: 0 8px 22px rgba(0,169,180,0.35);
}
.sms-bubble strong {
display: block;
margin-bottom: 6px;
font-size: 1rem;
}
.sms-bubble a {
display: inline-block;
margin-top: 10px;
padding: 6px 12px;
background: rgba(255,255,255,0.18);
border-radius: 8px;
font-size: 0.85rem;
font-weight: 700;
backdrop-filter: blur(6px);
}
.sms-time {
text-align: center;
color: rgba(255,255,255,0.5);
font-size: 0.75rem;
margin-top: 12px;
}
/* =============================================================================
19. FEATURES ("Warum NOA")
-----------------------------------------------------------------------------
3 Vorteils-Karten in einer Reihe.
HTML: …
============================================================================= */
.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
/* Symmetrische Karten-Grids fuer Abschnitte mit fester Kartenzahl
(TTS-Anruf = 2 Karten, Tragevarianten = 4 Karten) – verhindert das
asymmetrische 2-in-3 bzw. 3+1 des 3-spaltigen Standard-Grids. */
.evencards { display: grid; gap: 22px; }
.evencards.cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.evencards.cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .evencards.cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .evencards.cards-2, .evencards.cards-4 { grid-template-columns: 1fr; } }
/* Tragevarianten: zentriertes Flex-Layout – bricht jede Kartenzahl (auch 5)
sauber um; eine unvollstaendige letzte Reihe wird zentriert statt links. */
.wear-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.wear-grid > .feature-card { flex: 1 1 220px; max-width: 300px; }
@media (max-width: 640px) { .wear-grid > .feature-card { max-width: none; flex-basis: 100%; } }
.feature-card {
background: white;
border-radius: var(--radius);
padding: 30px;
border: 1px solid rgba(0,174,184,0.16);
box-shadow: 0 12px 28px rgba(18,63,124,0.07);
transition: .25s;
}
.feature-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
border-color: var(--turquoise);
}
.feature-icon {
width: 54px; height: 54px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(0,169,180,0.15), rgba(0,169,180,0.06));
color: var(--turquoise-deep);
display: grid; place-items: center;
font-size: 1.6rem;
margin-bottom: 18px;
}
.feature-icon .material-symbols-outlined {
font-size: 28px;
color: var(--turquoise-deep);
}
.feature-card h3 {
color: var(--blue-deep);
font-size: 1.15rem;
margin-bottom: 10px;
letter-spacing: -0.01em;
}
.feature-card p {
color: var(--muted);
font-size: 0.95rem;
}
/* =============================================================================
20. PRICING
-----------------------------------------------------------------------------
Zwei Preis-Karten nebeneinander (Basis / Highlight-Variante).
HTML:
============================================================================= */
.price-section { background: linear-gradient(180deg, #ffffff, var(--bg-soft)); }
.price-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
max-width: 920px;
margin: 0 auto;
}
.price-card {
background: white;
border: 2px solid rgba(0,174,184,0.2);
border-radius: 24px;
padding: 40px 36px;
box-shadow: var(--shadow);
position: relative;
transition: .25s;
}
.price-card:hover { transform: translateY(-4px); }
.price-card.highlight {
border-color: var(--turquoise);
background: linear-gradient(180deg, white 0%, var(--bg-soft) 100%);
box-shadow: var(--shadow-lg);
}
.price-tag {
position: absolute;
top: -16px; left: 50%;
transform: translateX(-50%);
background: var(--orange);
color: white;
padding: 8px 18px;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.06em;
white-space: nowrap;
}
.price-card h3 {
color: var(--turquoise-deep);
font-size: 1.1rem;
text-transform: uppercase;
font-weight: 900;
letter-spacing: 0.04em;
margin-bottom: 12px;
}
.price-amount {
font-size: clamp(3rem, 6vw, 4.4rem);
color: var(--blue-deep);
font-weight: 900;
letter-spacing: 0em;
line-height: 1;
margin-bottom: 6px;
}
.price-amount small {
font-size: 1rem;
color: var(--muted);
font-weight: 700;
margin-left: 4px;
}
.price-sub {
color: var(--muted);
margin-bottom: 22px;
font-size: 0.95rem;
}
.price-list {
list-style: none;
display: grid; gap: 12px;
margin-bottom: 26px;
}
.price-list li {
display: flex;
gap: 12px;
align-items: flex-start;
color: var(--blue-deep);
font-weight: 600;
font-size: 0.95rem;
}
.price-list li::before {
content: "✓";
flex-shrink: 0;
width: 22px; height: 22px;
border-radius: 50%;
background: var(--turquoise);
color: white;
display: grid; place-items: center;
font-size: 0.8rem;
font-weight: 900;
margin-top: 1px;
}
/* =============================================================================
21. FAQ
-----------------------------------------------------------------------------
-Akkordeon mit Suchfeld darüber. Geöffnete bekommen
weißen Hintergrund und türkisen Rand.
============================================================================= */
.faq { background: white; }
/* Einzelne Frage (öffnet sich per /) — scoped auf .faq,
damit andere -Komponenten (Lang-Switch-Dropdown etc.)
nicht das "+"-Akkordeon-Verhalten erben. */
.faq details {
max-width: 880px;
margin: 0 auto 14px;
background: var(--bg-soft);
border: 1px solid rgba(0,174,184,0.18);
border-radius: 16px;
padding: 22px 26px;
transition: .2s;
}
.faq details[open] {
background: white;
border-color: var(--turquoise);
box-shadow: var(--shadow);
}
.faq summary {
cursor: pointer;
color: var(--blue-deep);
font-weight: 800;
font-size: 1.05rem;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: "+";
font-size: 1.6rem;
color: var(--turquoise);
transition: transform .2s;
font-weight: 400;
line-height: 1;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p {
margin-top: 14px;
color: var(--muted);
line-height: 1.65;
}
/* "Mehr Fragen" – CTA-Container unter den FAQs */
.faq-more {
display: flex;
justify-content: center;
margin-top: 36px;
}
/* FAQ-Suche (Eingabefeld + Lupen-Icon + Clear-Button) */
.faq-search {
max-width: 880px;
margin: 0 auto 24px;
position: relative;
display: flex;
align-items: center;
}
.faq-search-icon {
position: absolute;
left: 20px;
color: var(--turquoise);
pointer-events: none;
font-size: 22px;
}
.faq-search-input {
width: 100%;
font: inherit;
font-size: 1.05rem;
color: var(--text);
background: var(--white);
border: 1px solid rgb(0, 0, 0);
border-radius: 16px;
padding: 18px 56px 18px 54px;
outline: none;
transition: border-color .2s, box-shadow .2s, background .2s;
-webkit-appearance: none;
appearance: none;
}
.faq-search-input::placeholder { color: rgba(16,63,124,0.55); }
.faq-search-input:focus {
border-color: var(--turquoise);
background: white;
box-shadow: 0 0 0 4px rgba(0,174,184,0.12);
}
.faq-search-input::-webkit-search-cancel-button,
.faq-search-input::-webkit-search-decoration {
-webkit-appearance: none;
appearance: none;
}
.faq-search-clear {
position: absolute;
right: 10px;
width: 36px;
height: 36px;
border: none;
background: transparent;
color: var(--text);
border-radius: 10px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .15s;
}
.faq-search-clear:hover { background: rgba(0,174,184,0.12); }
.faq-search-clear .material-symbols-outlined { font-size: 20px; }
/* Hinweis, wenn die Suche keine Treffer liefert */
.faq-empty {
max-width: 880px;
margin: 0 auto;
text-align: center;
padding: 28px 20px;
color: var(--muted);
background: var(--bg-soft);
border: 1px dashed rgba(0,174,184,0.32);
border-radius: 16px;
}
/* =============================================================================
22. CONTACT
-----------------------------------------------------------------------------
Große Kontakt-Box mit Verlauf, 2 CTAs darunter.
HTML:
============================================================================= */
.contact { padding: 100px 0 0; }
.contact-box {
background: linear-gradient(135deg, var(--turquoise) 0%, var(--blue) 100%);
color: white;
text-align: center;
padding: 76px 36px;
border-radius: 32px 32px 0 0;
box-shadow: var(--shadow-lg);
position: relative;
overflow: hidden;
}
.contact-box::before {
content: "";
position: absolute;
top: -100px; right: -100px;
width: 320px; height: 320px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%);
}
.contact-box h2 {
font-size: clamp(2rem, 5vw, 3.6rem);
line-height: 1.05;
letter-spacing: -0.04em;
margin-bottom: 18px;
position: relative;
z-index: 2;
}
.contact-box p {
max-width: 660px;
margin: 0 auto 32px;
color: rgba(255,255,255,0.88);
font-size: 1.15rem;
position: relative;
z-index: 2;
}
.contact-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
justify-content: center;
position: relative;
z-index: 2;
}
/* Sekundär-Button auf dunkler Verlaufs-Fläche: weiß statt türkis */
.contact-actions .btn-secondary {
background: white;
color: var(--blue);
border-color: white;
}
.contact-actions .btn-secondary:hover { background: var(--bg-soft); }
/* =============================================================================
23. FOOTER
-----------------------------------------------------------------------------
Dunkelblauer Footer mit Brand-Name, Links, Copyright.
============================================================================= */
footer {
background: var(--blue-deep);
color: white;
padding: 38px 0 32px;
text-align: center;
font-weight: 800;
}
.footer-brand {
font-size: 1.6rem;
letter-spacing: -0.02em;
margin-bottom: 14px;
color: var(--turquoise);
}
.footer-small {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 22px;
font-size: 0.92rem;
font-weight: 600;
opacity: 0.85;
margin-bottom: 8px;
}
.footer-small a:hover { color: var(--turquoise); }
.footer-tag {
font-size: 0.85rem;
opacity: 0.6;
font-weight: 500;
margin-top: 12px;
}
/* =============================================================================
24. SUBPAGE-HERO
-----------------------------------------------------------------------------
Vereinfachter Hero für Unterseiten (faq.html, aktive.html, iridium.html).
Zentrierter Text, kleinere Headline.
Hinweis: Diese Definition fasst zwei frühere Regelblöcke für .subpage-hero
zusammen – der zweite überschrieb den ersten (padding, background); die
Eigenschaften des ersten (position, overflow) bleiben erhalten.
============================================================================= */
.subpage-hero {
position: relative;
overflow: hidden;
padding: 120px 0 60px;
background:
radial-gradient(circle at 85% 50%, rgba(0, 169, 180, 0.18), transparent 35%),
radial-gradient(circle at 10% 110%, rgba(245, 163, 59, 0.08), transparent 40%),
linear-gradient(180deg, #ffffff 0%, #f3fbfd 100%);
border-bottom: 1px solid rgba(0,169,180,0.15);
text-align: center;
}
.subpage-hero h1 {
font-size: clamp(2.2rem, 5vw, 3.6rem);
margin-bottom: 18px;
}
.subpage-hero p {
max-width: 720px;
margin: 0 auto;
color: var(--muted);
font-size: 1.1rem;
}
/* Dezenter Rausch-Overlay (für strukturierten Hintergrund) */
.hero-bg {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)),
none /* removed: file missing */;
opacity: 0.4;
pointer-events: none;
}
/* Zurück-Link über der Headline */
.back-link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 18px;
color: var(--turquoise-deep);
font-weight: 800;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.back-link:hover { color: var(--turquoise); }
.back-link .material-symbols-outlined { font-size: 18px; }
/* Hero-CTA-Reihe (zwei Buttons unter der Headline, zentriert) */
.hero-cta {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
}
/* =============================================================================
25. MOBILE STICKY CTA
-----------------------------------------------------------------------------
Floating-Leiste am unteren Bildschirmrand auf Mobile (Preis links, Button
rechts). Wird per Media-Query bei <=720px sichtbar.
============================================================================= */
.mobile-sticky-cta {
display: none;
position: fixed;
left: 12px; right: 12px; bottom: 12px;
z-index: 60;
background: white;
border-radius: 16px;
box-shadow: 0 14px 36px rgba(16,63,124,0.18);
border: 1px solid rgba(0,174,184,0.18);
padding: 10px 14px 10px 16px;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.mobile-sticky-cta .price-info {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.mobile-sticky-cta .price-info .label {
font-size: 0.7rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--turquoise-deep);
}
.mobile-sticky-cta .price-info .price {
font-size: 1rem;
font-weight: 900;
color: var(--blue-deep);
}
.mobile-sticky-cta .price-info .price small {
font-size: 0.75rem;
font-weight: 700;
color: var(--muted);
}
.mobile-sticky-cta .btn-primary {
min-height: 44px;
padding: 12px 20px;
font-size: 0.85rem;
letter-spacing: 0.04em;
}
/* =============================================================================
28. RESPONSIVE (Media Queries)
-----------------------------------------------------------------------------
Breakpoints (von groß → klein):
• <= 980 px : Tablet / kleines Desktop. Hauptlayout wechselt auf eine Spalte,
Burger-Menü erscheint, Konfigurator & Partner brechen um.
• <= 900 px : SIM-Detail-Section bricht um (eigener Breakpoint).
• <= 720 px : Großer Mobile-Range. Hero kompakter, Sticky-CTA wird sichtbar.
• <= 560 px : Mobile. Kompaktere Cards, Padding und Schriftgrößen.
• <= 400 px : Sehr kleine Geräte (iPhone SE & Co.).
============================================================================= */
/* --- Breakpoint: <= 980 px ------------------------------------------------- */
@media (max-width: 980px) {
/* Subpage-Hero / Hero-Spalte umbrechen */
.hero-grid {
grid-template-columns: 1fr;
text-align: center;
}
.hero-text { margin-inline: auto; }
.hero-trust {
justify-content: center;
flex-wrap: wrap;
}
.hero-image-card {
max-width: 520px;
margin: auto;
}
/* Navigation: Burger statt horizontaler Links */
.nav-links {
display: none;
position: absolute;
left: 18px; right: 18px;
top: calc(100% + 8px);
flex-direction: column;
align-items: flex-start;
background: white;
padding: 22px;
border-radius: 18px;
box-shadow: var(--shadow);
border: 1px solid rgba(0,174,184,0.18);
}
.nav-links.open { display: flex; }
.menu-btn { display: block; }
/* Mehrspaltige Grids auf eine Spalte */
.hero-grid,
.mission-grid,
.audience-content,
.detail-grid {
grid-template-columns: 1fr;
}
/* Hero auf Mobile: Produktbild kommt zuerst */
.hero-grid { display: flex; flex-direction: column; }
.hero-grid .product-stage { order: -1; }
.product-stage { min-height: 440px; }
.real-device { width: 280px; }
.blue-glow { width: 360px; height: 360px; }
/* Weitere mehrspaltige Grids reduzieren */
.flow-grid { grid-template-columns: repeat(2, 1fr); }
.tech-grid { grid-template-columns: 1fr; }
.features-grid { grid-template-columns: 1fr; }
.price-grid { grid-template-columns: 1fr; }
/* Audience-Inhalt kompakter */
.audience-content { padding: 32px; }
section { padding: 70px 0; }
.audience-tab {
flex: 1 1 calc(50% - 8px);
min-width: 140px;
padding: 13px 14px;
font-size: 0.85rem;
}
/* Escalation & Compare-Tabelle */
.escalation-grid { grid-template-columns: 1fr; }
.compare-table thead th,
.compare-table tbody td {
padding: 14px 14px;
font-size: 0.9rem;
}
/* App-Section umbrechen */
.app-grid { grid-template-columns: 1fr; gap: 40px; }
.app-phone-frame { width: 240px; }
.app-phone-glow { width: 360px; height: 360px; }
/* Kaufen-Seite Konfigurator umbrechen */
.config-grid { grid-template-columns: 1fr; }
.config-summary { position: static; }
.testi-grid { grid-template-columns: 1fr; }
.trust-row { grid-template-columns: repeat(2, 1fr); }
/* Partner-Seite Layout umbrechen */
.what-grid { grid-template-columns: 1fr; }
body.page-partner .benefits { grid-template-columns: 1fr; }
.target-list { grid-template-columns: repeat(2, 1fr); }
.what-noa,
.form-card,
.target-partners { padding: 30px; }
.coming-soon-card { padding: 50px 30px; }
}
/* --- Breakpoint: <= 900 px (SIM-Detail-Section) ---------------------------- */
@media (max-width: 900px) {
.sim-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.sim-features {
grid-template-columns: 1fr;
}
.sim-visual { order: -1; }
}
/* --- Breakpoint: <= 720 px ------------------------------------------------- */
@media (max-width: 720px) {
/* Sticky-CTA aktivieren und Body-Padding einplanen */
.mobile-sticky-cta { display: flex; }
body { padding-bottom: 80px; }
/* Hero kompakter für Mobile-Übergang */
.hero { padding: 104px 0 64px; }
.hero-grid { gap: 32px; }
h1 {
font-size: clamp(2.1rem, 7vw, 2.8rem);
line-height: 1.06;
}
.hero-text { font-size: 1.05rem; }
/* Section Padding kompakter */
section { padding: 64px 0; }
.section-head { margin-bottom: 44px; }
/* Product Stage kompakter */
.product-stage { min-height: 380px; }
.real-device { width: 250px; }
.blue-glow { width: 320px; height: 320px; }
.ring.r1, .ring.r2, .ring.r3 { width: 210px; height: 210px; }
/* Container leicht angepasst */
.container { width: min(1220px, calc(100% - 32px)); }
/* Karten-Paddings kompakter */
.detail-card { padding: 32px; }
.detail-grid { gap: 28px; }
.tech-card { padding: 28px 26px; }
.feature-card { padding: 26px; }
.mission-grid { gap: 36px; }
.app-grid { gap: 32px; }
.app-phone-frame { width: 230px; }
/* Trust strip mobile-freundlich */
.trust-strip { padding: 18px 0; }
.trust-strip-inner { gap: 12px 22px; font-size: 0.8rem; }
.trust-item .material-symbols-outlined { font-size: 20px; }
/* Subpage-Hero kompakter */
.subpage-hero { padding: 100px 0 48px; }
/* Kaufen-Seite kompakter */
body.page-kaufen .page-head { padding: 84px 0 28px; }
body.page-kaufen .page-head h1 {
font-size: clamp(2rem, 7vw, 2.8rem);
line-height: 1.06;
}
body.page-kaufen .page-head p { font-size: 1rem; }
.configurator { padding: 36px 0 70px; }
.config-main { padding: 32px; }
.config-summary { padding: 32px; }
.specs { padding: 60px 0; }
.testimonials { padding: 60px 0; }
.step-head h2 { font-size: 1.2rem; }
.step-head .step-sub { font-size: 0.86rem; }
.specs-table.active { grid-template-columns: 1fr; }
.spec-row:not(:last-child) { border-bottom: 1px solid rgba(0,174,184,0.16); }
/* ----------------------------------------------------------------
Mobile-Fixes für Bilder & Sprach-Dropdown
---------------------------------------------------------------- */
/* Hero-Bildkarte: Rotation reduzieren, damit nichts seitlich
aus dem Viewport ragt, und Größe beschränken. */
.hero-image-card {
max-width: 420px;
transform: rotate(-1deg);
}
.hero-image-card::after {
width: 120px;
height: 120px;
right: -20px;
bottom: -20px;
}
/* Image-Stack (über-uns Hero): zwei Bilder responsiv, max. 240px */
.image-stack img { max-width: 240px; }
/* Sprach-Dropdown: öffnet auf Mobile nach OBEN, damit es nicht
außerhalb der Topbar abgeschnitten wird. Außerdem fix rechts
anker, damit es nicht aus dem Viewport rutscht. */
.lang-switch-menu {
bottom: calc(100% + 6px);
top: auto;
right: 0;
min-width: 160px;
}
}
/* --- Breakpoint: <= 560 px ------------------------------------------------- */
@media (max-width: 560px) {
/* Hero-CTA: Buttons über die volle Breite */
.hero-cta .btn { width: 100%; }
/* Logo, Listen & Kompaktanzeigen */
.logo img { height: 58px; }
.flow-grid { grid-template-columns: 1fr; }
.app-phone-frame { width: 240px; }
.audience-tabs {
flex-direction: column;
border-radius: 18px;
padding: 6px;
}
.audience-tab {
min-width: unset;
width: 100%;
flex: 1 1 100%;
}
.visual-card { padding: 28px 24px; }
.floating-tag { display: none; }
/* Hero-Pillars: 3 Spalten kompakt statt vertikal */
.hero-pillars {
grid-template-columns: repeat(3, 1fr);
gap: 0;
padding-top: 18px;
max-width: 100%;
}
.pillar {
border-right: 1px solid rgba(0,174,184,0.18);
border-bottom: 0;
padding: 0 6px 0 6px;
}
.pillar:last-child {
border-right: 0;
border-bottom: 0;
padding-bottom: 0;
}
.pillar-icon {
width: 42px; height: 42px;
margin-bottom: 6px;
box-shadow: 0 6px 14px rgba(0,174,184,0.22);
}
.pillar-icon .material-symbols-outlined { font-size: 22px; }
.pillar strong { font-size: 0.68rem; letter-spacing: 0.04em; }
/* Visual-Card Stats: 2x2 statt 1 Spalte */
.visual-card .stats {
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}
.visual-card h3 { font-size: 1.45rem; line-height: 1.2; }
.stat-num { font-size: 2rem; }
.stat-label { font-size: 0.74rem; }
/* App-Features: 2 Spalten kompakt */
.app-features { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.app-feature { padding: 14px 14px; }
.app-feature h4 { font-size: 0.92rem; }
.app-feature p { font-size: 0.82rem; line-height: 1.45; }
.app-feature .af-icon {
width: 36px; height: 36px;
margin-bottom: 8px;
box-shadow: 0 5px 12px rgba(0,174,184,0.22);
}
.app-feature .af-icon .material-symbols-outlined { font-size: 20px; }
/* App-Bonus kompakter */
.app-bonus { padding: 14px 16px; gap: 12px; }
.app-bonus-badge { width: 50px; height: 50px; font-size: 0.85rem; }
.app-bonus-badge span { font-size: 1rem; }
.app-bonus-text strong { font-size: 0.95rem; }
.app-bonus-text span { font-size: 0.85rem; line-height: 1.4; }
.app-note { font-size: 0.85rem; padding: 10px 14px; }
/* Hero deutlich kompakter */
.hero { padding: 100px 0 40px; }
.hero-grid { gap: 24px; }
h1 {
font-size: clamp(1.85rem, 8vw, 2.3rem);
line-height: 1.08;
margin-bottom: 16px;
}
.hero-text {
font-size: 1rem;
margin-bottom: 22px;
line-height: 1.55;
}
.kicker {
font-size: 0.74rem;
padding: 6px 14px;
margin-bottom: 16px;
}
/* Buttons für Mobile besser dimensioniert */
.cta-row { gap: 10px; margin-bottom: 28px; }
.cta-row .btn {
width: 100%;
min-height: 50px;
padding: 14px 20px;
font-size: 0.88rem;
letter-spacing: 0.03em;
}
.btn {
min-height: 50px;
padding: 14px 22px;
font-size: 0.9rem;
}
/* Real-Device noch kleiner */
.real-device { width: 220px; }
.product-stage { min-height: 300px; }
.blue-glow { width: 280px; height: 280px; }
.ring.r1, .ring.r2, .ring.r3 { width: 190px; height: 190px; }
/* Container etwas mehr Atemraum */
.container { width: min(1220px, calc(100% - 28px)); }
/* Section Padding & Section-Head */
section { padding: 56px 0; }
.section-head { margin-bottom: 36px; }
.section-head h2 { font-size: clamp(1.6rem, 6vw, 2.2rem); }
.section-head p { font-size: 1rem; line-height: 1.55; }
/* Mission */
.mission-text h2 { font-size: clamp(1.6rem, 6vw, 2.2rem); }
.mission-text p { font-size: 1rem; }
.mission-quote {
padding: 16px 20px;
font-size: 0.95rem;
margin-top: 22px;
line-height: 1.5;
}
.mission-grid { gap: 28px; }
/* Trust-Strip mobil: zentriert, kompakt */
.trust-strip { padding: 16px 0; }
.trust-strip-inner { gap: 10px 16px; font-size: 0.78rem; letter-spacing: 0.04em; }
.trust-item .material-symbols-outlined { font-size: 18px; }
.trust-item .sep { display: none; }
.trust-strip-inner .sep { display: none; }
/* Compare-Tabelle mobil: bleibt eine echte Tabelle.
Wrapper hat overflow-x: auto, daher scrollt sie horizontal,
wenn der Bildschirm zu schmal ist. Padding/Schrift kompakter.
Sanfter Schatten am rechten Rand zeigt: hier kann gescrollt werden. */
.compare-wrapper {
border-radius: 18px;
background:
linear-gradient(to right, white 30%, rgba(255,255,255,0)),
linear-gradient(to right, rgba(255,255,255,0), white 70%) 100% 0,
radial-gradient(farthest-side at 0 50%, rgba(16,63,124,0.12), rgba(16,63,124,0)),
radial-gradient(farthest-side at 100% 50%, rgba(16,63,124,0.12), rgba(16,63,124,0)) 100% 0;
background-repeat: no-repeat;
background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
background-attachment: local, local, scroll, scroll;
}
.compare-table { min-width: 520px; }
.compare-table thead th,
.compare-table tbody td {
padding: 12px 14px;
font-size: 0.82rem;
}
.compare-table tbody td:first-child { width: 34%; }
.compare-table .yes,
.compare-table .no { gap: 6px; align-items: flex-start; }
.compare-table .yes .material-symbols-outlined,
.compare-table .no .material-symbols-outlined { font-size: 18px; }
/* Stage-Cards mobil */
.stage-card { grid-template-columns: 44px 1fr; gap: 14px; padding: 18px 18px; }
.stage-num { width: 40px; height: 40px; font-size: 1rem; }
.stage-card h4 { font-size: 1rem; }
.stage-card p { font-size: 0.9rem; line-height: 1.5; }
/* Honesty box */
.honesty-box { padding: 22px 22px; }
.honesty-box h3 { font-size: 1.1rem; }
.honesty-box p { font-size: 0.95rem; }
/* Detail Cards kompakter */
.detail-card { padding: 28px 22px; }
.detail-card h3 { font-size: 1.4rem; line-height: 1.2; }
.detail-card p { font-size: 0.98rem; }
.detail-grid { gap: 24px; }
/* Phone Chain kompakt */
.phone-item { grid-template-columns: 36px 1fr auto; gap: 12px; padding: 12px 14px; }
.phone-num { width: 36px; height: 36px; font-size: 0.95rem; }
.phone-info strong { font-size: 0.92rem; }
.phone-info span { font-size: 0.78rem; }
.phone-status { padding: 4px 9px; font-size: 0.7rem; }
/* SMS Mockup kompakt */
.sms-mockup { padding: 22px 18px; }
.sms-bubble { padding: 14px 16px; font-size: 0.9rem; }
/* Tech Cards kompakt */
.tech-card { padding: 26px 24px; }
.tech-card h3 { font-size: 1.1rem; }
.tech-card p { font-size: 0.92rem; }
.tech-card li { font-size: 0.86rem; }
/* Feature Cards kompakt */
.feature-card { padding: 24px 22px; }
.feature-card h3 { font-size: 1.05rem; }
.feature-card p { font-size: 0.9rem; }
/* Price Cards */
.price-card { padding: 32px 26px; }
.price-card h3 { font-size: 1rem; }
.price-amount { font-size: clamp(2.4rem, 9vw, 3.2rem); }
.price-list li { font-size: 0.92rem; }
/* Audience Content & Scenario */
.audience-content { padding: 26px 22px; }
.audience-content h3 { font-size: 1.3rem; line-height: 1.2; }
.audience-content p.lead { font-size: 0.98rem; }
.audience-list li { font-size: 0.92rem; }
.audience-scenario { padding: 22px 20px; }
.audience-scenario h4 { font-size: 1.05rem; }
.scenario-tag { font-size: 0.7rem; padding: 5px 12px; }
.flow-step { font-size: 0.88rem; padding: 10px 12px; }
/* App Section */
.app-grid { gap: 28px; }
.app-text h2 { font-size: clamp(1.55rem, 6vw, 2rem); }
.app-text p.lead { font-size: 0.98rem; }
.app-phone-frame { width: 230px; }
.app-phone-glow { width: 320px; height: 320px; }
/* Flow Cards */
.flow-card { padding: 26px 22px; }
.flow-card h3 { font-size: 1.05rem; line-height: 1.25; }
.flow-card p { font-size: 0.92rem; }
.flow-card .icon-big { width: 56px; height: 56px; font-size: 1.5rem; }
.flow-card .icon-big .material-symbols-outlined { font-size: 28px; }
/* FAQ */
details { padding: 16px 20px; margin-bottom: 12px; border-radius: 14px; }
summary { font-size: 0.95rem; line-height: 1.35; }
summary::after { font-size: 1.4rem; }
details p { font-size: 0.93rem; line-height: 1.6; }
/* Contact */
.contact-box { padding: 50px 26px; border-radius: 24px 24px 0 0; }
.contact-box h2 { font-size: clamp(1.6rem, 6vw, 2.3rem); line-height: 1.1; }
.contact-box p { font-size: 0.98rem; }
.contact-actions {
gap: 10px;
flex-direction: column;
align-items: stretch;
}
/* Footer */
footer { padding: 32px 0 24px; }
.footer-brand { font-size: 1.4rem; margin-bottom: 12px; }
.footer-small { gap: 10px 18px; font-size: 0.83rem; }
.footer-tag { font-size: 0.78rem; }
/* Mobile Sticky CTA optimieren */
.mobile-sticky-cta { padding: 8px 12px 8px 14px; }
.mobile-sticky-cta .price-info .price { font-size: 0.92rem; }
.mobile-sticky-cta .price-info .price small {
font-size: 0.7rem;
display: block;
font-weight: 600;
}
.mobile-sticky-cta .btn-primary {
padding: 11px 18px;
font-size: 0.78rem;
min-height: 42px;
letter-spacing: 0.02em;
}
/* Body-Padding für Sticky CTA */
body { padding-bottom: 76px; }
/* Kaufen-Seite: Konfigurator und Specs kompakter */
/* !important nötig, weil kaufen.css danach geladen wird und
.variant-grid { grid-template-columns: 1fr 1fr; } setzt (ohne Media Query) */
.variant-grid, .plan-grid { grid-template-columns: 1fr !important; }
.acc-grid { grid-template-columns: 1fr; }
.specs-tabs { flex-wrap: wrap; }
.config-main, .config-summary { padding: 22px 20px; }
body.page-kaufen .page-head { padding: 76px 0 22px; }
body.page-kaufen .page-head h1 {
font-size: clamp(1.8rem, 8vw, 2.3rem);
line-height: 1.08;
margin-bottom: 14px;
}
body.page-kaufen .page-head p { font-size: 0.98rem; line-height: 1.55; }
body.page-kaufen .breadcrumb { font-size: 0.78rem; margin-bottom: 14px; }
.configurator { padding: 28px 0 52px; }
.specs { padding: 48px 0; }
.testimonials { padding: 48px 0; }
.config-step { margin-bottom: 30px; }
.step-head { gap: 12px; margin-bottom: 16px; }
.step-badge { width: 32px; height: 32px; font-size: 0.92rem; }
.step-head h2 { font-size: 1.15rem; }
.step-head .step-sub { font-size: 0.84rem; }
.variant-card { padding: 22px 18px; }
.variant-visual { height: 210px; padding: 16px; font-size: 3rem; }
.variant-card h3 { font-size: 1.1rem; }
.variant-card p { font-size: 0.86rem; }
.variant-card ul li { font-size: 0.82rem; }
.plan-card { padding: 22px 18px; }
.plan-card h3 { font-size: 1.05rem; }
.plan-price span { font-size: 1.5rem; }
.plan-card p { font-size: 0.86rem; }
.acc-card { padding: 18px 16px; }
.acc-card strong { font-size: 0.95rem; }
.acc-card span { font-size: 0.8rem; }
.qty-row {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.qty-control { justify-content: center; }
.qty-hint { font-size: 0.86rem; text-align: center; }
.summary-title { font-size: 0.85rem; }
.summary-product h3 { font-size: 1.2rem; }
.summary-product span { font-size: 0.84rem; }
.summary-line { font-size: 0.92rem; padding: 10px 0; }
.summary-savings { font-size: 0.85rem; padding: 12px 14px; }
.summary-total .label { font-size: 0.8rem; }
.summary-total small { font-size: 0.75rem; }
.total-price { font-size: 1.6rem; }
.summary-trust { font-size: 0.84rem; gap: 8px; }
.trust-row { grid-template-columns: 1fr; gap: 10px; }
.trust-row .trust-item { font-size: 0.86rem; }
.trust-row .trust-item .ti-big { font-size: 1.4rem; }
.specs-head h2 { font-size: clamp(1.5rem, 6vw, 2rem); }
.specs-head .eyebrow { font-size: 0.8rem; }
.spec-tab { padding: 10px 14px; font-size: 0.85rem; }
.spec-row { padding: 12px 14px; font-size: 0.88rem; }
.spec-row strong { font-size: 0.86rem; }
.spec-row span { font-size: 0.86rem; }
.testi-head h2 { font-size: clamp(1.6rem, 6vw, 2.2rem); }
.testi-head .eyebrow { font-size: 0.8rem; }
.testi-head p { font-size: 0.96rem; }
.testi-card { padding: 26px 22px; }
.testi-text { font-size: 0.95rem; line-height: 1.55; }
.testi-author strong { font-size: 0.92rem; }
.testi-author span { font-size: 0.82rem; }
/* Partner-Seite mobil */
.form-grid { grid-template-columns: 1fr; }
.switch-wrap {
flex-direction: column;
padding: 6px;
}
.switch-btn { padding: 14px 18px; }
.switch-btn .sb-icon { font-size: 1.05rem; }
.target-list { grid-template-columns: 1fr; }
/* Partner-Kontaktbereich: Telefon/Mail/Adresse untereinander, damit nichts
ueberlappt oder abgeschnitten wird (Phone-Portrait Range). */
.contact-list {
flex-direction: column;
align-items: center;
gap: 14px;
text-align: center;
}
.contact-direct { padding: 50px 0 70px; }
/* Partner-Login-Card + Sidebar: gleiche Padding-Reduktion wie andere Cards. */
.what-noa,
.form-card,
.auth-card.partner-auth-card { padding: 22px; }
/* Bilder bei sehr schmalen Displays: Rotation aus */
.hero-image-card {
transform: none;
max-width: 360px;
padding: 14px;
}
.hero-image-card::after { display: none; }
.image-stack img { max-width: 220px; }
}
/* --- Breakpoint: <= 400 px (iPhone SE & ähnliche) -------------------------- */
@media (max-width: 400px) {
/* Hauptkomponenten weiter verkleinern */
.container { width: min(1220px, calc(100% - 24px)); }
.hero { padding: 98px 0 32px; }
h1 { font-size: 1.7rem; line-height: 1.1; }
.hero-text { font-size: 0.95rem; }
.kicker { font-size: 0.7rem; padding: 5px 12px; }
/* Hero-Pillars */
.pillar-icon { width: 38px; height: 38px; }
.pillar-icon .material-symbols-outlined { font-size: 20px; }
.pillar strong { font-size: 0.62rem; }
.pillar { padding: 0 4px; }
/* Visual-Card Stats */
.visual-card .stats { grid-template-columns: 1fr; gap: 14px; }
.stat-num { font-size: 1.85rem; }
/* App-Features einspaltig */
.app-features { grid-template-columns: 1fr; }
/* Section-Padding nochmal kompakter */
section { padding: 44px 0; }
.section-head { margin-bottom: 28px; }
.section-head h2 { font-size: 1.6rem; }
/* Hero-Visual nochmal kompakter */
.real-device { width: 200px; }
.product-stage { min-height: 270px; }
.blue-glow { width: 250px; height: 250px; }
/* Card-Paddings nochmal kleiner */
.price-card { padding: 28px 22px; }
.detail-card { padding: 24px 20px; }
.audience-content { padding: 22px 18px; }
.audience-scenario { padding: 20px 18px; }
.tech-card { padding: 24px 20px; }
.feature-card { padding: 22px 20px; }
.contact-box { padding: 44px 22px; }
.stage-card { padding: 16px 14px; }
/* Kaufen-Seite weiter kompakter */
.config-main, .config-summary { padding: 20px 16px; }
body.page-kaufen .page-head { padding: 70px 0 18px; }
body.page-kaufen .page-head h1 { font-size: 1.65rem; }
.variant-card { padding: 20px 16px; }
.variant-visual { height: 180px; padding: 14px; font-size: 2.6rem; }
.plan-card { padding: 20px 16px; }
.acc-card { padding: 16px 14px; }
.testi-card { padding: 22px 18px; }
.total-price { font-size: 1.45rem; }
}
/* ============================================================
PRODUKTBILD-PLATZHALTER (variant cards auf kaufen.html)
------------------------------------------------------------
Die Box .variant-visual stellt das Produktbild zentriert,
proportional und mit Atemraum dar. Bild- und Fallback-
Element teilen sich denselben Container, dürfen aber nicht
ineinander rutschen — daher absoluter Stack.
============================================================ */
.variant-visual {
position: relative;
}
.variant-visual img,
.variant-visual .variant-img {
max-width: 100%;
max-height: 100%;
display: block;
object-fit: contain;
margin: auto;
object-position: center;
border-radius: 10px;
/* leichte Hover-Animation: Bild wirkt lebendig statt statisch */
transition: transform .3s ease;
}
.variant-card:hover .variant-visual .variant-img {
transform: scale(1.03);
}
.variant-visual .variant-fallback {
position: absolute;
inset: 0;
display: none;
place-items: center;
font-size: 5rem;
color: var(--turquoise-deep);
line-height: 1;
}
/* ============================================================
WARENKORB-SEITE (warenkorb.html) + CHECKOUT-SEITE (checkout.html)
============================================================ */
body.page-warenkorb .page-head,
body.page-checkout .page-head {
padding: 100px 0 40px;
text-align: center;
background:
radial-gradient(circle at 50% 0%, rgba(0, 169, 180, 0.16), transparent 50%),
linear-gradient(180deg, #ffffff 0%, var(--bg-soft) 100%);
}
body.page-warenkorb .page-head h1,
body.page-checkout .page-head h1 {
font-size: clamp(2.2rem, 5vw, 3.8rem);
color: var(--blue-deep);
letter-spacing: -0.04em;
line-height: 1.05;
margin-bottom: 16px;
font-weight: 900;
}
body.page-warenkorb .page-head h1 .accent,
body.page-checkout .page-head h1 .accent {
background: linear-gradient(120deg, var(--turquoise), var(--turquoise-dark));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
body.page-warenkorb .page-head p,
body.page-checkout .page-head p {
color: var(--muted);
font-size: 1.1rem;
max-width: 640px;
margin: 0 auto;
}
/* --- Warenkorb Layout --- */
.cart-section { padding: 50px 0 80px; }
.cart-grid {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 32px;
align-items: start;
}
.cart-main {
background: white;
border-radius: 24px;
padding: 32px;
box-shadow: var(--shadow);
border: 1px solid rgba(0,174,184,0.16);
}
.cart-main-head {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgba(0,174,184,0.18);
padding-bottom: 16px;
margin-bottom: 22px;
}
.cart-main-head h2 {
font-size: 1.4rem;
color: var(--blue-deep);
letter-spacing: -0.01em;
}
.cart-count {
background: var(--bg-soft);
color: var(--turquoise-deep);
font-weight: 800;
padding: 6px 14px;
border-radius: 999px;
font-size: 0.85rem;
}
.cart-list { display: grid; gap: 18px; }
.cart-item {
display: grid;
grid-template-columns: 110px 1fr auto;
gap: 20px;
align-items: center;
padding: 18px;
border: 1px solid rgba(0,174,184,0.18);
border-radius: 18px;
background: linear-gradient(180deg, #ffffff, var(--bg-soft));
transition: border-color .2s ease;
}
.cart-item:hover { border-color: var(--turquoise); }
.cart-item-img {
width: 110px;
height: 110px;
border-radius: 14px;
background: linear-gradient(135deg, var(--bg-soft), #ffffff);
border: 1px solid rgba(0,174,184,0.16);
display: grid;
place-items: center;
font-size: 2.4rem;
color: var(--turquoise-deep);
overflow: hidden;
}
.cart-item-img {
padding: 10px;
}
.cart-item-img img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.cart-item-img > span {
font-size: 2.4rem;
line-height: 1;
}
.cart-item-info h3 {
font-size: 1.05rem;
color: var(--blue-deep);
margin-bottom: 4px;
letter-spacing: -0.01em;
}
.cart-item-info p {
color: var(--muted);
font-size: 0.88rem;
margin-bottom: 10px;
line-height: 1.45;
}
.cart-item-controls {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.cart-qty {
display: inline-flex;
align-items: center;
background: white;
border: 1.5px solid rgba(0,174,184,0.32);
border-radius: 999px;
overflow: hidden;
}
.cart-qty button {
width: 34px;
height: 34px;
border: 0;
background: transparent;
color: var(--turquoise-deep);
font-weight: 900;
font-size: 1.05rem;
cursor: pointer;
transition: background .15s ease;
}
.cart-qty button:hover { background: var(--bg-soft); }
.cart-qty input {
width: 38px;
height: 34px;
border: 0;
text-align: center;
font-weight: 800;
color: var(--blue-deep);
background: transparent;
-moz-appearance: textfield;
}
.cart-qty input::-webkit-outer-spin-button,
.cart-qty input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.cart-item-remove {
border: 0;
background: transparent;
color: var(--muted);
font-size: 0.85rem;
font-weight: 700;
cursor: pointer;
text-decoration: underline;
padding: 4px 6px;
border-radius: 8px;
transition: color .15s ease;
}
.cart-item-remove:hover { color: var(--orange); }
.cart-item-price {
display: grid;
gap: 4px;
text-align: right;
}
.cart-item-price .price-line {
font-weight: 900;
color: var(--blue-deep);
font-size: 1.05rem;
letter-spacing: -0.01em;
}
.cart-item-price small { color: var(--muted); font-size: 0.78rem; }
.cart-empty {
text-align: center;
padding: 50px 20px;
color: var(--muted);
}
.cart-empty h3 {
color: var(--blue-deep);
font-size: 1.4rem;
margin-bottom: 10px;
}
.cart-empty p { margin-bottom: 22px; }
.cart-summary {
background: white;
border-radius: 24px;
padding: 28px;
box-shadow: var(--shadow);
border: 1px solid rgba(0,174,184,0.18);
position: sticky;
top: 24px;
}
.cart-summary h2 {
font-size: 1.2rem;
color: var(--blue-deep);
margin-bottom: 18px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(0,174,184,0.16);
}
.cart-summary-line {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
color: var(--blue-deep);
font-size: 0.95rem;
}
.cart-summary-line.muted { color: var(--muted); font-size: 0.88rem; }
.cart-summary-line strong { font-weight: 800; }
.cart-summary-divider {
height: 1px;
background: rgba(0,174,184,0.18);
margin: 10px 0 6px;
}
.cart-summary-total {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 14px 0 4px;
border-top: 2px solid rgba(0,174,184,0.18);
margin-top: 10px;
}
.cart-summary-total .label {
font-weight: 900;
font-size: 1.05rem;
color: var(--blue-deep);
}
.cart-summary-total .total-price {
font-size: 1.7rem;
font-weight: 900;
letter-spacing: -0.02em;
color: var(--turquoise-deep);
}
.cart-summary-period {
color: var(--muted);
font-size: 0.82rem;
margin-bottom: 18px;
text-align: right;
}
.cart-summary .btn { width: 100%; margin-top: 8px; }
.cart-summary .btn + .btn { margin-top: 10px; }
.cart-summary-trust {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid rgba(0,174,184,0.18);
display: grid;
gap: 8px;
font-size: 0.85rem;
color: var(--muted);
}
.cart-summary-trust div { display: flex; align-items: center; gap: 8px; }
.cart-summary-trust .ti { color: var(--turquoise); font-weight: 900; }
/* ─── Billing-Split (Heute / Bei Auslieferung / Gesamt) ──────────────────
Wiederverwendbar in /kaufen, /warenkorb, /checkout. Eine klare,
dreistufige Aufschlüsselung statt Klein-Fußnote. */
.billing-split {
margin-top: 18px;
padding-top: 18px;
border-top: 2px solid var(--turquoise);
display: flex;
flex-direction: column;
gap: 14px;
}
.billing-split-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
}
.billing-split-label {
flex: 1 1 auto;
min-width: 0;
}
.billing-split-label strong {
display: block;
color: var(--blue-deep);
font-size: 0.96rem;
font-weight: 800;
letter-spacing: 0.01em;
}
.billing-split-label small {
display: block;
color: var(--muted);
font-size: 0.78rem;
font-weight: 500;
margin-top: 2px;
line-height: 1.35;
}
.billing-split-amount {
flex: 0 0 auto;
color: var(--blue-deep);
font-size: 1.15rem;
font-weight: 800;
text-align: right;
white-space: nowrap;
}
.billing-split-row.billing-split-total {
padding-top: 14px;
border-top: 1px solid rgba(0,174,184,0.22);
}
.billing-split-amount-total {
font-size: 1.5rem;
letter-spacing: -0.02em;
color: var(--turquoise-deep);
}
.billing-split-shipping {
display: flex;
align-items: center;
gap: 8px;
margin-top: 6px;
padding: 10px 14px;
background: rgba(0,174,184,0.08);
border-radius: 10px;
color: var(--blue-deep);
font-size: 0.86rem;
font-weight: 600;
}
.billing-split-shipping .material-symbols-outlined {
font-size: 1.15rem;
color: var(--turquoise-deep);
}
@media (max-width: 480px) {
.billing-split-amount { font-size: 1.05rem; }
.billing-split-amount-total { font-size: 1.3rem; }
.billing-split-label small { font-size: 0.74rem; }
}
@media (max-width: 980px) {
.cart-grid { grid-template-columns: 1fr; }
.cart-summary { position: static; }
}
@media (max-width: 720px) {
body.page-warenkorb .page-head,
body.page-checkout .page-head { padding: 110px 0 32px; }
.cart-main, .cart-summary { padding: 22px; }
.cart-item {
grid-template-columns: 80px 1fr;
grid-template-areas:
"img info"
"ctrl ctrl"
"price price";
gap: 14px;
}
.cart-item-img { width: 80px; height: 80px; grid-area: img; }
.cart-item-info { grid-area: info; }
.cart-item-controls { grid-area: ctrl; }
.cart-item-price { grid-area: price; text-align: left; }
}
/* --- Checkout Layout --- */
.checkout-steps {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin-bottom: 36px;
flex-wrap: wrap;
}
.checkout-step-dot {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--muted);
font-weight: 800;
font-size: 0.9rem;
}
.checkout-step-dot .dot {
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(0,174,184,0.12);
color: var(--turquoise-deep);
display: grid;
place-items: center;
font-weight: 900;
font-size: 0.9rem;
transition: all .25s ease;
}
.checkout-step-dot.active { color: var(--blue-deep); }
.checkout-step-dot.active .dot {
background: var(--turquoise);
color: white;
box-shadow: 0 8px 18px rgba(0,174,184,0.32);
}
.checkout-step-dot.done .dot {
background: var(--turquoise-deep);
color: white;
}
.checkout-step-line {
width: 50px;
height: 2px;
background: rgba(0,174,184,0.2);
border-radius: 2px;
}
/* -----------------------------------------------------------------------------
CHECKOUT-TRUSTBAR
----------------------------------------------------------------------------
Ersetzt die irreführende 3-Schritt-Timeline. Vermittelt in einer kompakten
Bar Vertrauen und Sicherheit — Tarif-Hinweis inklusive.
----------------------------------------------------------------------------- */
.checkout-trustbar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 20px;
background: white;
border: 1px solid rgba(0,174,184,0.18);
border-radius: 18px;
padding: 16px 22px;
margin-bottom: 28px;
box-shadow: 0 12px 28px rgba(16,63,124,0.06);
}
.checkout-trustbar-lead {
display: flex;
align-items: center;
gap: 14px;
}
.checkout-trustbar-icon {
width: 46px;
height: 46px;
border-radius: 14px;
background: linear-gradient(135deg, var(--turquoise), var(--turquoise-dark));
color: white;
display: grid;
place-items: center;
box-shadow: 0 8px 20px rgba(0,174,184,0.30);
flex-shrink: 0;
}
.checkout-trustbar-icon .material-symbols-outlined { font-size: 24px; }
.checkout-trustbar-lead strong {
display: block;
color: var(--blue-deep);
font-size: 1.02rem;
letter-spacing: -0.01em;
}
.checkout-trustbar-lead span {
color: var(--muted);
font-size: 0.84rem;
font-weight: 600;
}
.checkout-trustbar-points {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 10px 18px;
margin: 0;
padding: 0;
}
.checkout-trustbar-points li {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--blue-deep);
font-weight: 700;
font-size: 0.84rem;
}
.checkout-trustbar-points .material-symbols-outlined {
font-size: 18px;
color: var(--turquoise-deep);
}
@media (max-width: 720px) {
.checkout-trustbar {
padding: 14px 16px;
gap: 14px;
}
.checkout-trustbar-points { gap: 8px 14px; }
.checkout-trustbar-points li { font-size: 0.78rem; }
}
.checkout-section { padding: 30px 0 80px; }
.checkout-grid {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 32px;
align-items: start;
}
.checkout-main {
background: white;
border-radius: 24px;
padding: 36px;
box-shadow: var(--shadow);
border: 1px solid rgba(0,174,184,0.16);
/* Grid-Item: ohne min-width:0 behält die Spalte ihre min-content-Breite und
schrumpft auf dem Handy nicht unter den Viewport → horizontales Scrollen.
(min-width:0 hebt das grid/flex-Default min-width:auto auf.) */
min-width: 0;
}
.checkout-block { margin-bottom: 36px; }
.checkout-block:last-child { margin-bottom: 0; }
.checkout-block-head {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 22px;
}
.checkout-block-head .step-badge {
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, var(--turquoise), var(--turquoise-dark));
color: white;
display: grid;
place-items: center;
font-weight: 900;
font-size: 1rem;
flex-shrink: 0;
}
.checkout-block-head h2 {
font-size: 1.3rem;
color: var(--blue-deep);
letter-spacing: -0.01em;
}
.checkout-block-head .sub {
display: block;
color: var(--muted);
font-size: 0.88rem;
font-weight: 500;
margin-top: 2px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 14px;
}
.form-row.single { grid-template-columns: 1fr; }
/* Konto-Anlage im Checkout: beide Passwortfelder als gleich hohes Paar (Policy-
Liste + Match-Hinweis liegen voll-breit darunter, nicht in den Spalten). */
.create-account-fields .form-row { align-items: start; }
.create-account-fields .pw-match-msg { margin-top: 6px; }
.form-group { display: grid; gap: 6px; }
.form-group label {
font-size: 0.85rem;
font-weight: 800;
color: var(--blue-deep);
letter-spacing: 0.01em;
}
.form-group label .required { color: var(--orange); }
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 13px 16px;
border: 1.5px solid rgba(0,174,184,0.28);
border-radius: 12px;
font-family: inherit;
font-size: 0.95rem;
color: var(--blue-deep);
background: white;
transition: border-color .15s ease, box-shadow .15s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--turquoise);
box-shadow: 0 0 0 4px rgba(0,174,184,0.12);
}
.form-group input.error,
.form-group select.error {
border-color: var(--orange);
background: rgba(245,163,59,0.06);
}
.form-error-msg {
font-size: 0.78rem;
color: var(--orange);
font-weight: 700;
display: none;
}
.form-group.has-error .form-error-msg { display: block; }
.payment-options { display: grid; gap: 12px; }
.payment-option {
display: flex;
align-items: center;
gap: 16px;
padding: 18px 20px;
border: 2px solid rgba(0,174,184,0.22);
border-radius: 16px;
cursor: pointer;
transition: all .2s ease;
background: white;
}
.payment-option:hover { border-color: var(--turquoise); transform: translateY(-2px); }
.payment-option input[type="radio"] {
width: 20px;
height: 20px;
accent-color: var(--turquoise);
cursor: pointer;
}
.payment-option .pay-icon {
width: 42px;
height: 42px;
border-radius: 10px;
background: var(--bg-soft);
color: var(--turquoise-deep);
display: grid;
place-items: center;
font-size: 1.4rem;
flex-shrink: 0;
}
.payment-option .pay-info { flex: 1; min-width: 0; } /* darf schrumpfen/umbrechen (wie .ship-info) — sonst Overflow auf schmalen Screens */
.payment-option .pay-info strong {
display: block;
color: var(--blue-deep);
font-size: 0.98rem;
margin-bottom: 2px;
}
.payment-option .pay-info span {
color: var(--muted);
font-size: 0.82rem;
}
.payment-option.selected {
border-color: var(--turquoise);
background: linear-gradient(180deg, white, var(--bg-soft));
box-shadow: 0 12px 24px rgba(0,174,184,0.18);
}
/* ─────────────────────────────────────────────────────────────────────────
2026-05-24 — Lieferung & Versand (Block 3 im Checkout)
Strukturell an .payment-option angelehnt. Aktuell nur eine Option, daher
immer .selected. Erweiterung um Express o. Ä. ist trivial möglich.
───────────────────────────────────────────────────────────────────────── */
.shipping-options { display: grid; gap: 12px; }
.shipping-option {
display: flex;
align-items: center;
gap: 16px;
padding: 18px 20px;
border: 2px solid rgba(0,174,184,0.22);
border-radius: 16px;
cursor: pointer;
transition: all .2s ease;
background: white;
position: relative;
}
.shipping-option:hover { border-color: var(--turquoise); transform: translateY(-2px); }
.shipping-option input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
width: 0;
height: 0;
}
.shipping-option .ship-icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--bg-soft);
color: var(--turquoise-deep);
display: grid;
place-items: center;
flex-shrink: 0;
}
.shipping-option .ship-icon .material-symbols-outlined { font-size: 24px; }
.shipping-option .ship-info { flex: 1; min-width: 0; }
.shipping-option .ship-info strong {
display: block;
color: var(--blue-deep);
font-size: 1rem;
margin-bottom: 2px;
}
.shipping-option .ship-info span {
color: var(--muted);
font-size: 0.86rem;
line-height: 1.4;
}
.shipping-option .ship-price {
flex-shrink: 0;
background: rgba(0,169,180,0.12);
color: var(--turquoise-deep);
border: 1px solid rgba(0,169,180,0.28);
padding: 6px 12px;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.02em;
white-space: nowrap;
}
.shipping-option.selected {
border-color: var(--turquoise);
background: linear-gradient(180deg, white, var(--bg-soft));
box-shadow: 0 12px 24px rgba(0,174,184,0.18);
}
@media (max-width: 540px) {
.shipping-option {
flex-wrap: wrap;
gap: 12px;
}
.shipping-option .ship-price {
margin-left: 56px; /* = ship-icon width + gap */
}
}
/* Aufmerksamkeit-Feld */
.form-group-discovery {
margin: 22px 0 4px;
}
.form-group-discovery textarea {
width: 100%;
padding: 12px 14px;
border: 1px solid rgba(0,174,184,0.25);
border-radius: 10px;
font-family: inherit;
font-size: 0.92rem;
resize: vertical;
min-height: 60px;
}
.form-group-discovery textarea:focus {
outline: none;
border-color: var(--turquoise);
box-shadow: 0 0 0 3px rgba(0,174,184,0.12);
}
.form-group-discovery .form-hint {
display: block;
color: var(--muted);
font-size: 0.78rem;
margin-top: 4px;
}
.checkout-consent {
margin-top: 20px;
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 0.88rem;
color: var(--blue-deep);
line-height: 1.5;
}
.checkout-consent input[type="checkbox"] {
margin-top: 3px;
width: 18px;
height: 18px;
accent-color: var(--turquoise);
flex-shrink: 0;
cursor: pointer;
}
.checkout-consent a {
color: var(--turquoise-deep);
font-weight: 800;
text-decoration: underline;
}
.checkout-actions {
display: flex;
gap: 14px;
margin-top: 28px;
flex-wrap: wrap;
}
.checkout-actions .btn { flex: 1; min-width: 200px; }
.checkout-summary {
background: white;
border-radius: 24px;
padding: 28px;
box-shadow: var(--shadow);
border: 1px solid rgba(0,174,184,0.18);
position: sticky;
top: 24px;
/* s. .checkout-main: Grid-Item muss unter den Viewport schrumpfen dürfen. */
min-width: 0;
}
.checkout-summary h2 {
font-size: 1.2rem;
color: var(--blue-deep);
margin-bottom: 18px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(0,174,184,0.16);
}
.checkout-summary-product {
display: flex;
gap: 14px;
align-items: center;
padding: 12px 0 18px;
border-bottom: 1px solid rgba(0,174,184,0.16);
margin-bottom: 6px;
}
.checkout-summary-product .sp-img {
width: 76px;
height: 76px;
padding: 8px;
border-radius: 14px;
background: linear-gradient(135deg, var(--bg-soft), #ffffff);
border: 1px solid rgba(0,174,184,0.16);
display: grid;
place-items: center;
font-size: 1.6rem;
color: var(--turquoise-deep);
flex-shrink: 0;
overflow: hidden;
}
.checkout-summary-product .sp-img img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.checkout-summary-product .sp-info strong {
display: block;
color: var(--blue-deep);
font-size: 0.98rem;
margin-bottom: 2px;
}
.checkout-summary-product .sp-info span {
color: var(--muted);
font-size: 0.82rem;
}
.checkout-summary-line {
display: flex;
justify-content: space-between;
padding: 8px 0;
color: var(--blue-deep);
font-size: 0.92rem;
}
.checkout-summary-line.muted { color: var(--muted); font-size: 0.85rem; }
.checkout-summary-total {
display: flex;
justify-content: space-between;
align-items: baseline;
padding-top: 14px;
margin-top: 8px;
border-top: 2px solid rgba(0,174,184,0.18);
}
.checkout-summary-total .label {
font-weight: 900;
color: var(--blue-deep);
font-size: 1rem;
}
.checkout-summary-total .total-price {
font-size: 1.5rem;
font-weight: 900;
letter-spacing: -0.02em;
color: var(--turquoise-deep);
}
.checkout-summary-period {
color: var(--muted);
font-size: 0.78rem;
margin-top: 2px;
margin-bottom: 14px;
text-align: right;
}
.checkout-trust {
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid rgba(0,174,184,0.18);
display: grid;
gap: 8px;
font-size: 0.83rem;
color: var(--muted);
}
.checkout-trust div { display: flex; align-items: center; gap: 8px; }
.checkout-trust .ti { color: var(--turquoise); font-weight: 900; }
.checkout-secure-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(0,174,184,0.1);
color: var(--turquoise-deep);
padding: 8px 14px;
border-radius: 999px;
font-weight: 800;
font-size: 0.82rem;
margin-bottom: 14px;
}
.checkout-success {
background: linear-gradient(135deg, var(--turquoise) 0%, var(--blue) 100%);
color: white;
border-radius: 24px;
padding: 56px 32px;
text-align: center;
box-shadow: var(--shadow-lg);
display: none;
}
.checkout-success.visible { display: block; }
.checkout-success .check-icon {
width: 80px;
height: 80px;
margin: 0 auto 22px;
border-radius: 50%;
background: rgba(255,255,255,0.18);
display: grid;
place-items: center;
font-size: 2.4rem;
font-weight: 900;
}
.checkout-success h2 {
font-size: clamp(1.8rem, 4vw, 2.6rem);
margin-bottom: 14px;
letter-spacing: -0.02em;
}
.checkout-success p {
font-size: 1.05rem;
max-width: 560px;
margin: 0 auto 28px;
color: rgba(255,255,255,0.9);
}
@media (max-width: 980px) {
.checkout-grid { grid-template-columns: 1fr; }
.checkout-summary { position: static; }
}
@media (max-width: 720px) {
.checkout-main { padding: 26px; }
.form-row { grid-template-columns: 1fr; }
.checkout-step-line { width: 22px; }
.checkout-step-dot .label { display: none; }
.checkout-actions .btn { width: 100%; min-width: 0; }
}
/* ============================================================
ACCOUNT-SYSTEM — Shared Components
(Checkout, account.html, admin.html)
============================================================ */
/* --- Button-Size-Variante --- */
.btn.btn-sm {
min-height: 40px;
padding: 10px 18px;
font-size: 0.78rem;
}
/* --- Status-Badges (geteilt zwischen Account & Admin) --- */
.status-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
border-radius: 999px;
font-weight: 800;
font-size: 0.78rem;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.status-badge .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
display: inline-block;
}
.status-badge.ok { background: rgba(0,174,184,0.12); color: var(--turquoise-deep); }
.status-badge.warn { background: rgba(245,163,59,0.14); color: #b1670a; }
.status-badge.err { background: rgba(220,38,38,0.12); color: #b91c1c; }
.status-badge.muted { background: rgba(90,122,172,0.12); color: var(--muted); }
/* --- Form-Error inline --- */
.form-inline-error {
background: rgba(220,38,38,0.06);
color: #b91c1c;
border-left: 3px solid #b91c1c;
padding: 10px 14px;
border-radius: 8px;
font-size: 0.88rem;
font-weight: 700;
margin: 8px 0;
}
/* ============================================================
CHECKOUT — Account-Mode-Block (Konto erstellen / Gast / Login)
============================================================ */
.account-mode-block {
background: linear-gradient(180deg, var(--bg-soft), #ffffff);
border: 1px solid rgba(0,174,184,0.18);
border-radius: 18px;
padding: 26px;
margin-bottom: 32px;
}
.account-mode-tabs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 18px;
background: white;
padding: 6px;
border-radius: 14px;
border: 1px solid rgba(0,174,184,0.18);
}
.account-tab {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 14px;
border: 0;
background: transparent;
border-radius: 10px;
cursor: pointer;
font-family: inherit;
font-weight: 800;
font-size: 0.88rem;
color: var(--muted);
transition: all .2s ease;
text-align: center;
}
.account-tab .material-symbols-outlined { font-size: 19px; }
.account-tab:hover { color: var(--turquoise-deep); }
.account-tab.active {
background: linear-gradient(135deg, var(--turquoise), var(--turquoise-dark));
color: white;
box-shadow: 0 8px 18px rgba(0,174,184,0.28);
}
.account-mode-panel .panel-intro {
color: var(--muted);
font-size: 0.92rem;
margin: 4px 2px 0;
}
.account-mode-panel .login-actions {
display: flex;
align-items: center;
gap: 16px;
margin-top: 4px;
flex-wrap: wrap;
}
.login-helper {
font-size: 0.85rem;
color: var(--turquoise-deep);
font-weight: 700;
text-decoration: underline;
}
/* --- Logged-in-Banner im Checkout --- */
.logged-in-banner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
background: linear-gradient(135deg, var(--turquoise) 0%, var(--blue) 100%);
color: white;
padding: 18px 22px;
border-radius: 14px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.logged-in-banner .logged-in-info strong {
display: block;
font-size: 1rem;
}
.logged-in-banner .logged-in-info span {
font-size: 0.85rem;
opacity: 0.85;
}
.logged-in-banner .logged-in-actions {
display: flex;
gap: 8px;
}
.logged-in-banner .btn-secondary {
background: rgba(255,255,255,0.12);
border-color: rgba(255,255,255,0.25);
color: white;
}
.logged-in-banner .btn-secondary:hover { background: rgba(255,255,255,0.22); }
/* --- Signup-Felder im Checkout --- */
#signup-fields .signup-hint {
display: flex;
align-items: flex-start;
gap: 8px;
background: var(--bg-soft);
border: 1px solid rgba(0,174,184,0.18);
padding: 10px 14px;
border-radius: 10px;
font-size: 0.85rem;
color: var(--blue-deep);
margin: 0 0 14px;
}
.pw-match-msg {
font-size: 0.78rem;
font-weight: 700;
min-height: 1.1em;
}
.pw-match-msg.ok { color: var(--turquoise-deep); }
.pw-match-msg.err { color: #b91c1c; }
/* --- Newsletter-Opt-in (Checkout + Signup) --- */
.newsletter-consent {
background: var(--bg-soft);
border: 1px solid rgba(0,174,184,0.18);
padding: 14px 16px;
border-radius: 12px;
margin-top: 12px;
}
.newsletter-consent label { font-weight: 600; }
.consent-hint {
display: block;
color: var(--muted);
font-size: 0.82rem;
font-weight: 500;
margin-top: 4px;
line-height: 1.5;
}
.consent-hint a { color: var(--turquoise-deep); font-weight: 800; text-decoration: underline; }
/* ============================================================
ACCOUNT-PAGE
============================================================ */
body.page-account .page-head {
padding: 100px 0 40px;
text-align: center;
background:
radial-gradient(circle at 50% 0%, rgba(0, 169, 180, 0.16), transparent 50%),
linear-gradient(180deg, #ffffff 0%, var(--bg-soft) 100%);
}
body.page-account .page-head h1 {
font-size: clamp(2.2rem, 5vw, 3.8rem);
color: var(--blue-deep);
letter-spacing: -0.04em;
line-height: 1.05;
margin-bottom: 16px;
font-weight: 900;
}
body.page-account .page-head h1 .accent {
background: linear-gradient(120deg, var(--turquoise), var(--turquoise-dark));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
body.page-account .page-head p {
color: var(--muted);
font-size: 1.1rem;
max-width: 640px;
margin: 0 auto;
}
.account-section { padding: 40px 0 70px; }
/* --- Auth-Card (Login + Signup) --- */
.auth-card {
max-width: 560px;
margin: 0 auto;
background: white;
border-radius: 24px;
padding: 36px;
box-shadow: var(--shadow);
border: 1px solid rgba(0,174,184,0.18);
}
.auth-tabs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
margin-bottom: 24px;
background: var(--bg-soft);
padding: 6px;
border-radius: 12px;
}
.auth-tab {
border: 0;
background: transparent;
padding: 12px 14px;
font-weight: 800;
font-size: 0.9rem;
color: var(--muted);
font-family: inherit;
cursor: pointer;
border-radius: 8px;
transition: all .2s ease;
}
.auth-tab.active {
background: white;
color: var(--blue-deep);
box-shadow: 0 4px 12px rgba(16,63,124,0.08);
}
.auth-helper {
text-align: center;
margin-top: 14px;
font-size: 0.88rem;
color: var(--muted);
}
.auth-helper a, .auth-switch {
color: var(--turquoise-deep);
font-weight: 800;
text-decoration: underline;
cursor: pointer;
}
.auth-trust {
max-width: 560px;
margin: 22px auto 0;
display: flex;
flex-wrap: wrap;
gap: 18px;
justify-content: center;
color: var(--muted);
font-size: 0.82rem;
}
.auth-trust div { display: inline-flex; align-items: center; gap: 6px; }
.auth-trust .material-symbols-outlined { color: var(--turquoise); font-size: 18px; }
/* --- Account-Dashboard --- */
.account-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 16px;
margin-bottom: 22px;
flex-wrap: wrap;
}
.account-header h2 {
font-size: clamp(1.8rem, 4vw, 2.4rem);
color: var(--blue-deep);
letter-spacing: -0.02em;
}
.account-eyebrow {
font-size: 0.78rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--turquoise-deep);
margin-bottom: 4px;
}
.account-header-right {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
/* --- Verify-Note --- */
.acc-verify-note {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
background: rgba(245,163,59,0.1);
border: 1px solid rgba(245,163,59,0.4);
padding: 16px 20px;
border-radius: 14px;
margin-bottom: 24px;
flex-wrap: wrap;
}
.acc-verify-note strong { color: var(--blue-deep); }
.acc-verify-note span { color: var(--muted); font-size: 0.88rem; }
/* --- Stats-Cards --- */
.acc-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
margin-bottom: 32px;
}
.acc-stat {
background: white;
border: 1px solid rgba(0,174,184,0.18);
border-radius: 16px;
padding: 20px;
box-shadow: var(--shadow);
}
.acc-stat-label {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--muted);
font-weight: 800;
margin-bottom: 8px;
}
.acc-stat-value {
font-size: 1.6rem;
font-weight: 900;
color: var(--blue-deep);
letter-spacing: -0.02em;
}
/* --- Tabs --- */
.acc-tabs {
display: flex;
gap: 4px;
flex-wrap: wrap;
background: white;
border: 1px solid rgba(0,174,184,0.18);
border-radius: 14px;
padding: 6px;
margin-bottom: 24px;
}
.acc-tab {
border: 0;
background: transparent;
padding: 12px 18px;
font-family: inherit;
font-weight: 800;
font-size: 0.88rem;
color: var(--muted);
cursor: pointer;
border-radius: 10px;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all .2s ease;
flex: 1 1 auto;
justify-content: center;
}
.acc-tab .material-symbols-outlined { font-size: 19px; }
.acc-tab:hover { color: var(--turquoise-deep); }
.acc-tab.active {
background: linear-gradient(135deg, var(--turquoise), var(--turquoise-dark));
color: white;
}
/* --- Panels --- */
.acc-panel {
background: white;
border: 1px solid rgba(0,174,184,0.18);
border-radius: 20px;
padding: 32px;
box-shadow: var(--shadow);
}
.acc-panel-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 22px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(0,174,184,0.16);
flex-wrap: wrap;
gap: 10px;
}
.acc-panel-head h3 {
font-size: 1.2rem;
color: var(--blue-deep);
letter-spacing: -0.01em;
}
.acc-block { margin-bottom: 32px; }
.acc-block:last-child { margin-bottom: 0; }
.acc-block h4 {
font-size: 1rem;
color: var(--blue-deep);
margin-bottom: 4px;
}
.acc-block-sub {
color: var(--muted);
font-size: 0.88rem;
margin-bottom: 14px;
}
/* ─── Newsletter-Toggle (Konto-Tab "Newsletter") ───────────────────────── */
.newsletter-pref {
background: linear-gradient(180deg, var(--bg-soft), white);
border: 1px solid rgba(0,174,184,0.18);
border-radius: 16px;
padding: 22px 24px;
}
.newsletter-pref-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
flex-wrap: wrap;
}
.newsletter-pref-text {
flex: 1 1 280px;
min-width: 0;
}
.newsletter-pref-text strong {
display: block;
color: var(--blue-deep);
font-size: 1.05rem;
margin-bottom: 6px;
}
.newsletter-pref-desc {
color: var(--muted);
font-size: 0.92rem;
line-height: 1.5;
margin: 0;
}
.newsletter-email {
display: inline-block;
margin-top: 6px;
background: rgba(0,174,184,0.08);
border-radius: 6px;
padding: 2px 8px;
font-family: 'SF Mono', Menlo, Consolas, monospace;
font-size: 0.85rem;
color: var(--blue-deep);
word-break: break-all;
}
.newsletter-toggle {
position: relative;
display: inline-flex;
align-items: center;
cursor: pointer;
flex: 0 0 auto;
}
.newsletter-toggle input[type="checkbox"] {
position: absolute;
opacity: 0;
pointer-events: none;
width: 0;
height: 0;
}
.newsletter-toggle-track {
position: relative;
display: inline-block;
width: 56px;
height: 32px;
background: rgba(120, 130, 140, 0.32);
border-radius: 999px;
transition: background-color .18s ease;
}
.newsletter-toggle-thumb {
position: absolute;
top: 3px;
left: 3px;
width: 26px;
height: 26px;
background: white;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0,0,0,0.18);
transition: transform .18s ease;
}
.newsletter-toggle input[type="checkbox"]:checked + .newsletter-toggle-track {
background: var(--turquoise);
}
.newsletter-toggle input[type="checkbox"]:checked + .newsletter-toggle-track .newsletter-toggle-thumb {
transform: translateX(24px);
}
.newsletter-toggle input[type="checkbox"]:focus-visible + .newsletter-toggle-track {
box-shadow: 0 0 0 3px rgba(0,174,184,0.28);
}
.newsletter-toggle input[type="checkbox"]:disabled + .newsletter-toggle-track {
opacity: 0.6;
cursor: not-allowed;
}
.newsletter-pref-status {
min-height: 1.4em;
margin: 14px 0 0;
font-size: 0.88rem;
color: var(--muted);
transition: color .18s ease;
}
.newsletter-pref-status.is-ok { color: var(--turquoise-deep); }
.newsletter-pref-status.is-error { color: #c0392b; }
.newsletter-pref-status.is-pending { color: var(--muted); }
@media (max-width: 480px) {
.newsletter-pref { padding: 18px; }
.newsletter-pref-row { gap: 16px; }
}
/* ─── Adressen-CRUD (Konto-Tab "Adressen") ─────────────────────────────── */
.addr-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 18px;
margin-bottom: 20px;
}
.addr-loading {
grid-column: 1 / -1;
color: var(--muted);
font-size: 0.92rem;
text-align: center;
padding: 20px 0;
}
.addr-loading-error { color: #c0392b; }
.addr-empty {
background: var(--bg-soft);
border: 1px dashed rgba(0,174,184,0.32);
border-radius: 12px;
padding: 22px;
color: var(--muted);
font-size: 0.92rem;
margin-bottom: 20px;
}
.addr-card {
display: flex;
flex-direction: column;
background: white;
border: 1px solid rgba(0,174,184,0.18);
border-radius: 14px;
padding: 18px;
gap: 12px;
}
.addr-card-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.addr-card-type {
display: inline-block;
background: rgba(0,174,184,0.10);
color: var(--turquoise-deep);
padding: 3px 10px;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.02em;
}
.addr-card-type-billing {
background: rgba(245, 163, 59, 0.12);
color: #b76f12;
}
.addr-card-default-badge {
background: var(--turquoise);
color: white;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 999px;
}
.addr-card-body {
color: var(--blue-deep);
font-size: 0.95rem;
line-height: 1.5;
}
.addr-card-body strong { display: block; margin-bottom: 4px; }
.addr-card-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: auto;
padding-top: 6px;
border-top: 1px solid rgba(0,174,184,0.12);
}
.addr-card-delete {
color: #c0392b;
margin-left: auto;
}
.addr-form {
background: var(--bg-soft);
border: 1px solid rgba(0,174,184,0.18);
border-radius: 14px;
padding: 22px;
margin-bottom: 16px;
}
.addr-form-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px 18px;
}
.addr-form-grid .form-group-full { grid-column: 1 / -1; }
.addr-form-grid label {
display: block;
font-size: 0.86rem;
color: var(--blue-deep);
margin-bottom: 4px;
font-weight: 600;
}
.addr-form-grid input,
.addr-form-grid select {
width: 100%;
padding: 9px 12px;
border: 1px solid rgba(0,174,184,0.25);
border-radius: 8px;
font-size: 0.95rem;
font-family: inherit;
background: white;
}
.addr-form-grid input:focus,
.addr-form-grid select:focus {
outline: none;
border-color: var(--turquoise);
box-shadow: 0 0 0 3px rgba(0,174,184,0.15);
}
.addr-checkbox {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.92rem;
color: var(--blue-deep);
cursor: pointer;
}
.addr-form-error {
margin: 14px 0 0;
padding: 10px 12px;
background: rgba(192, 57, 43, 0.08);
color: #c0392b;
border-radius: 8px;
font-size: 0.9rem;
}
.addr-form-actions {
display: flex;
gap: 10px;
margin-top: 18px;
flex-wrap: wrap;
}
@media (max-width: 560px) {
.addr-form-grid { grid-template-columns: 1fr; }
}
/* ─── Downloads-Tab Tabellen-Action (Herunterladen-Button) ─────────────── */
.dl-row-title strong { display: block; }
.dl-row-filename {
display: block;
color: var(--muted);
font-size: 0.78rem;
font-family: 'SF Mono', Menlo, Consolas, monospace;
margin-top: 2px;
}
.dl-row-action { white-space: nowrap; text-align: right; }
.dl-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
font-size: 0.85rem;
font-weight: 700;
line-height: 1;
border-radius: 8px;
text-decoration: none;
}
.dl-btn .material-symbols-outlined { font-size: 1.05rem; }
@media (max-width: 560px) {
.dl-row-action .dl-btn span:not(.material-symbols-outlined) { display: none; }
.dl-btn { padding: 8px 10px; }
}
/* ─── Marketing-Material-Grid (Partner-Tab) — gleiches dl-card-Schema ──── */
.dl-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 18px;
}
.dl-grid > .acc-empty-inline,
.dl-grid > .acc-empty {
grid-column: 1 / -1;
background: var(--bg-soft);
border: 1px dashed rgba(0,174,184,0.32);
border-radius: 12px;
padding: 22px;
color: var(--muted);
font-size: 0.92rem;
}
.acc-hint {
color: var(--muted);
font-size: 0.82rem;
margin: 8px 0 12px;
}
.acc-form-actions {
margin-top: 20px;
display: flex;
gap: 12px;
justify-content: flex-end;
}
/* --- Toast --- */
.acc-toast {
display: none;
margin-top: 16px;
padding: 12px 16px;
background: rgba(0,174,184,0.12);
color: var(--turquoise-deep);
border-radius: 10px;
font-weight: 800;
font-size: 0.88rem;
}
.acc-toast.visible { display: block; animation: fadeIn .3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
/* === Support / Tickets-Tab (Phase 1) ================================ */
.status-badge.muted { background: #f3f4f6; color: #6b7280; }
.ticket-loading, .ticket-error { color: var(--muted, #6b7280); font-size: 0.9rem; padding: 8px 0; }
.ticket-error { color: #b91c1c; }
.ticket-list { display: grid; gap: 10px; }
.ticket-row {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
width: 100%; text-align: left;
background: #fff; border: 1px solid var(--border, #e5e7eb); border-radius: 12px;
padding: 14px 16px; cursor: pointer; font: inherit; color: inherit;
transition: border-color .15s ease, box-shadow .15s ease;
}
.ticket-row:hover { border-color: var(--turquoise, #00aeb8); box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.ticket-row-main { display: grid; gap: 3px; min-width: 0; }
.ticket-row-subject { font-weight: 700; color: var(--blue-deep, #103f7c); }
.ticket-row-meta { font-size: 0.8rem; color: var(--muted, #6b7280); }
.ticket-empty { text-align: center; color: var(--muted, #6b7280); padding: 40px 16px; }
.ticket-empty .material-symbols-outlined { font-size: 42px; color: #cbd5e1; display: block; margin: 0 auto 10px; }
.ticket-form-error { color: #b91c1c; font-size: 0.85rem; font-weight: 700; margin: 0 0 6px; }
.ticket-detail-head { margin: 6px 0 14px; }
.ticket-detail-head h3 { margin: 0 0 6px; }
.ticket-detail-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 0.82rem; color: var(--muted, #6b7280); }
.ticket-back { margin-bottom: 8px; }
.ticket-thread { display: grid; gap: 12px; max-height: 420px; overflow-y: auto; padding: 4px; margin-bottom: 16px; }
.ticket-msg { border-radius: 12px; padding: 10px 14px; max-width: 85%; }
.ticket-msg-support { background: #f1f5f9; justify-self: start; border: 1px solid #e5e7eb; }
.ticket-msg-customer { background: rgba(0,174,184,0.10); justify-self: end; border: 1px solid rgba(0,174,184,0.25); }
.ticket-msg-head { display: flex; gap: 10px; justify-content: space-between; font-size: 0.75rem; color: var(--muted, #6b7280); margin-bottom: 4px; }
.ticket-msg-author { font-weight: 700; color: var(--blue-deep, #103f7c); }
.ticket-msg-body { font-size: 0.92rem; line-height: 1.5; color: #1f2937; overflow-wrap: anywhere; }
.ticket-closed-note { background: #f3f4f6; color: #6b7280; border-radius: 10px; padding: 12px 16px; font-size: 0.88rem; }
@media (max-width: 600px) { .ticket-msg { max-width: 100%; } }
/* --- Orders-List --- */
.orders-list { display: grid; gap: 14px; }
.order-card {
background: linear-gradient(180deg, #ffffff, var(--bg-soft));
border: 1px solid rgba(0,174,184,0.18);
border-radius: 14px;
padding: 18px 20px;
transition: border-color .2s ease;
}
.order-card:hover { border-color: var(--turquoise); }
.order-card-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.order-card-head strong {
color: var(--blue-deep);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.85rem;
letter-spacing: -0.01em;
}
.order-meta {
display: block;
font-size: 0.78rem;
color: var(--muted);
margin-top: 2px;
}
.order-card-body {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.order-products { color: var(--blue-deep); font-weight: 700; }
.order-price {
font-weight: 900;
color: var(--turquoise-deep);
font-size: 1.1rem;
letter-spacing: -0.02em;
}
/* ── „Meine Bestellungen" — client-gerenderte, aufklappbare Bestellkarten ───────── */
.acc-orders-list { display: flex; flex-direction: column; gap: 12px; }
.acc-orders-empty {
text-align: center;
padding: 36px 20px;
color: var(--muted);
background: var(--bg-soft);
border: 1px dashed rgba(0,174,184,0.30);
border-radius: 14px;
}
.acc-orders-empty .material-symbols-outlined { font-size: 40px; color: var(--turquoise-deep); opacity: 0.7; }
.acc-orders-empty p { margin: 10px 0 16px; font-weight: 600; }
details.order-card { padding: 0; overflow: hidden; }
details.order-card > summary.order-card-head {
margin: 0;
padding: 16px 20px;
cursor: pointer;
list-style: none;
align-items: center;
}
details.order-card > summary.order-card-head::-webkit-details-marker { display: none; }
details.order-card[open] > summary.order-card-head { border-bottom: 1px solid rgba(0,174,184,0.18); }
.order-card-id { flex: 1 1 auto; min-width: 0; }
.order-card-total {
font-weight: 900;
color: var(--turquoise-deep);
font-size: 1.05rem;
letter-spacing: -0.02em;
white-space: nowrap;
}
.order-card-detail { padding: 6px 20px 16px; display: flex; flex-direction: column; gap: 6px; }
.order-detail-row {
display: flex;
justify-content: space-between;
gap: 16px;
font-size: 0.9rem;
padding: 4px 0;
border-bottom: 1px dashed rgba(0,0,0,0.06);
}
.order-detail-row:last-child { border-bottom: none; }
.order-detail-row > span:first-child { color: var(--muted); }
.order-detail-row > span:last-child { color: var(--blue-deep); font-weight: 700; text-align: right; }
/* ── AP1.2 · Status-Stepper im Bestelldetail ───────────────────────────────── */
.order-steps { list-style: none; display: flex; gap: 4px; margin: 2px 0 12px; padding: 0; }
.order-steps-ended { display: block; margin: 2px 0 12px; }
.order-step { flex: 1 1 0; position: relative; text-align: center; min-width: 0; }
.order-step::before {
content: ""; position: absolute; top: 6px; left: -50%; width: 100%; height: 2px;
background: rgba(0,0,0,0.12); z-index: 0;
}
.order-step:first-child::before { display: none; }
.order-step-dot {
display: block; position: relative; z-index: 1; width: 14px; height: 14px;
margin: 0 auto 6px; border-radius: 50%; background: #fff; border: 2px solid rgba(0,0,0,0.18);
}
.order-step-label { display: block; font-size: 0.72rem; color: var(--muted); line-height: 1.2; }
.order-step-label small { display: block; font-size: 0.66rem; opacity: 0.8; }
.order-step.done .order-step-dot { background: var(--turquoise); border-color: var(--turquoise); }
.order-step.done::before { background: var(--turquoise); }
.order-step.done .order-step-label { color: var(--blue-deep); font-weight: 700; }
.order-step.current .order-step-dot { box-shadow: 0 0 0 4px rgba(0,174,184,0.18); }
/* ── AP1.1 · Widerruf-Button + Inline-Formular ─────────────────────────────── */
.order-withdraw { margin-top: 10px; }
.order-withdrawal-note {
margin-top: 10px; padding: 8px 12px; border-radius: 10px;
background: rgba(245,163,59,0.12); color: #8a5a12; font-size: 0.85rem; font-weight: 700;
}
.order-withdraw-toggle {
background: none; border: 1.5px solid rgba(0,0,0,0.14); color: var(--blue-deep);
font-weight: 700; font-size: 0.82rem; padding: 7px 14px; border-radius: 999px; cursor: pointer;
}
.order-withdraw-toggle:hover { border-color: var(--turquoise); color: var(--turquoise-deep); }
.order-withdraw-form { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.order-withdraw-label { font-size: 0.8rem; color: var(--muted); font-weight: 600; }
.order-withdraw-reason {
width: 100%; border: 1px solid rgba(0,0,0,0.16); border-radius: 10px; padding: 8px 10px;
font: inherit; font-size: 0.88rem; resize: vertical;
}
.order-withdraw-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.order-withdraw-submit {
background: var(--turquoise); color: #fff; border: none; font-weight: 800;
font-size: 0.82rem; padding: 8px 16px; border-radius: 999px; cursor: pointer;
}
.order-withdraw-submit:disabled { opacity: 0.6; cursor: default; }
.order-withdraw-msg { font-size: 0.82rem; color: var(--muted); }
/* ── AP5 · QR-Onboarding (start.php) ────────────────────────────────────────── */
.qr-onboard-wrap { display: grid; gap: 24px; grid-template-columns: 1fr 1fr; align-items: start; margin: 32px auto 64px; }
@media (max-width: 860px) { .qr-onboard-wrap { grid-template-columns: 1fr; } }
.qr-onboard-card, .qr-share-card {
background: #fff; border: 1px solid rgba(0,174,184,0.18); border-radius: 16px;
padding: 28px; box-shadow: 0 6px 24px rgba(16,63,124,0.06);
}
.qr-onboard-detected { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px;
background: rgba(0,174,184,0.06); border-radius: 12px; margin-bottom: 18px; }
.qr-onboard-detected > .material-symbols-outlined { color: var(--turquoise-deep); font-size: 28px; }
.qr-onboard-list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 8px; }
.qr-onboard-list li { display: flex; gap: 8px; align-items: center; font-size: 0.95rem; }
.qr-onboard-list .material-symbols-outlined { font-size: 20px; color: var(--turquoise-deep); }
.qr-onboard-intro { font-size: 1rem; color: var(--blue-deep); margin: 0 0 20px; }
.qr-onboard-actions { display: flex; flex-direction: column; gap: 10px; }
.qr-onboard-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.qr-share-card h2 { display: flex; align-items: center; gap: 8px; font-size: 1.2rem; margin: 0 0 8px; }
.qr-share-label { display: block; font-weight: 700; font-size: 0.85rem; color: var(--muted); margin: 14px 0 6px; }
.qr-share-row { display: flex; gap: 8px; flex-wrap: wrap; }
.qr-share-input { flex: 1 1 220px; padding: 10px 12px; border: 1px solid rgba(0,0,0,0.16); border-radius: 10px; font: inherit; }
.qr-share-canvas { margin-top: 18px; min-height: 40px; display: flex; justify-content: center; }
.qr-share-canvas img { width: 200px; height: 200px; image-rendering: pixelated; border: 8px solid #fff; border-radius: 8px; }
.qr-share-fallback { margin-top: 12px; font-size: 0.9rem; color: var(--muted); word-break: break-all; }
/* ── Abo-Verwaltung — übersichtliche, gruppierte Karte ──────────────────────── */
.sub-state-card {
text-align: center;
padding: 32px 24px;
background: var(--bg-soft);
border: 1px solid rgba(0,174,184,0.18);
border-radius: 16px;
}
.sub-state-icon { font-size: 44px; color: var(--turquoise-deep); opacity: 0.85; }
.sub-state-card h3 { margin: 12px 0 6px; color: var(--blue-deep); }
.sub-state-card p { color: var(--muted); margin: 0 auto 18px; max-width: 44ch; }
.sub-gates { list-style: none; padding: 0; margin: 18px auto 0; max-width: 380px; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.sub-gates li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #fff; border: 1px solid rgba(0,0,0,0.07); border-radius: 10px; }
.sub-gates li .material-symbols-outlined { color: var(--turquoise-deep); }
.sub-gate-label { flex: 1 1 auto; color: var(--muted); font-size: 0.9rem; }
.sub-active-card {
background: linear-gradient(180deg, #ffffff, var(--bg-soft));
border: 1px solid rgba(0,174,184,0.18);
border-radius: 16px;
padding: 22px 24px;
}
.sub-active-head {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
flex-wrap: wrap; margin-bottom: 18px; padding-bottom: 14px;
border-bottom: 1px solid rgba(0,174,184,0.15);
}
.sub-active-head .acc-eyebrow { font-weight: 800; color: var(--blue-deep); font-size: 1.05rem; letter-spacing: -0.01em; }
.sub-group-title {
font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
color: var(--muted); font-weight: 800; margin: 18px 0 8px;
}
.sub-active-card .sub-group-title:first-of-type { margin-top: 0; }
.sub-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; margin: 0; }
.sub-field { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px dashed rgba(0,0,0,0.06); }
.sub-field dt { font-size: 0.78rem; color: var(--muted); font-weight: 600; }
.sub-field dd { margin: 0; font-weight: 700; color: var(--blue-deep); }
.sub-actions {
display: flex; flex-wrap: wrap; gap: 10px;
margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(0,174,184,0.15);
}
.sub-cancelled-notice {
display: flex; align-items: center; gap: 8px; margin-top: 16px;
padding: 12px 14px; background: rgba(245,163,59,0.12); border-radius: 10px;
color: var(--blue-deep); font-size: 0.9rem;
}
@media (max-width: 560px) { .sub-fields { grid-template-columns: 1fr; } }
.acc-empty {
text-align: center;
padding: 40px 20px;
color: var(--muted);
}
.acc-empty p { margin-bottom: 8px; }
.acc-empty p strong { color: var(--blue-deep); }
.acc-empty .btn { margin-top: 12px; }
/* --- Newsletter-Toggle --- */
.newsletter-toggle-card {
display: flex;
align-items: center;
gap: 18px;
background: var(--bg-soft);
border: 1px solid rgba(0,174,184,0.18);
padding: 22px;
border-radius: 14px;
}
.newsletter-toggle {
position: relative;
display: inline-block;
width: 56px;
height: 32px;
flex-shrink: 0;
}
.newsletter-toggle input { opacity: 0; width: 0; height: 0; }
.newsletter-toggle-slider {
position: absolute;
inset: 0;
background: #c5d4e8;
border-radius: 999px;
cursor: pointer;
transition: background .2s ease;
}
.newsletter-toggle-slider::before {
content: "";
position: absolute;
width: 24px;
height: 24px;
background: white;
border-radius: 50%;
top: 4px;
left: 4px;
box-shadow: 0 2px 6px rgba(0,0,0,0.18);
transition: transform .2s ease;
}
.newsletter-toggle input:checked + .newsletter-toggle-slider { background: var(--turquoise); }
.newsletter-toggle input:checked + .newsletter-toggle-slider::before { transform: translateX(24px); }
.newsletter-toggle-card strong {
color: var(--blue-deep);
font-size: 1rem;
display: block;
margin-bottom: 4px;
}
.newsletter-toggle-card p {
color: var(--muted);
font-size: 0.88rem;
margin: 0;
line-height: 1.5;
}
/* --- Account Responsive --- */
@media (max-width: 980px) {
.acc-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
body.page-account .page-head { padding: 110px 0 32px; }
.acc-panel { padding: 22px; }
.acc-stats { grid-template-columns: 1fr 1fr; }
.acc-stat { padding: 16px; }
.acc-stat-value { font-size: 1.3rem; }
.auth-card { padding: 24px; }
.acc-tab { padding: 10px 12px; font-size: 0.82rem; }
.acc-tab .material-symbols-outlined { display: none; }
}
@media (max-width: 560px) {
.acc-stats { grid-template-columns: 1fr; }
}
/* ============================================================
CHECKOUT V2 — Logged-in Block + Quick-Login + Create-Account
============================================================ */
/* --- Logged-in Block (oben im Checkout, wenn eingeloggt) --- */
.logged-in-block {
background: linear-gradient(180deg, var(--bg-soft), #ffffff);
border: 1px solid rgba(0,174,184,0.22);
border-radius: 18px;
padding: 24px;
margin-bottom: 28px;
}
.logged-in-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 18px;
padding-bottom: 18px;
border-bottom: 1px solid rgba(0,174,184,0.18);
}
.logged-in-info {
display: flex;
align-items: center;
gap: 14px;
}
.logged-in-info .logged-in-avatar {
width: 46px;
height: 46px;
border-radius: 50%;
background: linear-gradient(135deg, var(--turquoise), var(--turquoise-dark));
color: white;
display: grid;
place-items: center;
font-weight: 900;
font-size: 1rem;
letter-spacing: 0.02em;
flex-shrink: 0;
}
.logged-in-info strong {
display: block;
color: var(--blue-deep);
font-size: 1rem;
}
.logged-in-info span {
display: block;
color: var(--muted);
font-size: 0.85rem;
}
.logged-in-header .btn { flex-shrink: 0; }
.logged-in-header .btn .material-symbols-outlined { font-size: 18px; }
.logged-in-options {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.li-option {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px;
border: 2px solid rgba(0,174,184,0.22);
border-radius: 14px;
background: white;
cursor: pointer;
transition: all .2s ease;
}
.li-option:hover { border-color: var(--turquoise); transform: translateY(-2px); }
.li-option input[type="radio"] {
margin-top: 3px;
width: 18px;
height: 18px;
accent-color: var(--turquoise);
cursor: pointer;
flex-shrink: 0;
}
.li-option strong {
display: block;
color: var(--blue-deep);
font-size: 0.95rem;
margin-bottom: 2px;
}
.li-option span {
display: block;
color: var(--muted);
font-size: 0.82rem;
line-height: 1.45;
}
.li-option.selected {
border-color: var(--turquoise);
background: linear-gradient(180deg, white, var(--bg-soft));
box-shadow: 0 12px 24px rgba(0,174,184,0.18);
}
/* --- Quick-Login Block (oben im Checkout, wenn NICHT eingeloggt) --- */
.quick-login-block {
background: white;
border: 1px solid rgba(0,174,184,0.22);
border-radius: 18px;
padding: 20px 24px;
margin-bottom: 28px;
transition: box-shadow .2s ease;
}
.quick-login-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.quick-login-head h3 {
font-size: 1.05rem;
color: var(--blue-deep);
letter-spacing: -0.01em;
margin-bottom: 2px;
}
.quick-login-head p {
color: var(--muted);
font-size: 0.88rem;
margin: 0;
}
.quick-login-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
border: 1.5px solid rgba(0,174,184,0.32);
background: var(--bg-soft);
color: var(--turquoise-deep);
font-family: inherit;
font-weight: 800;
font-size: 0.88rem;
border-radius: 999px;
cursor: pointer;
transition: all .2s ease;
}
.quick-login-toggle:hover {
border-color: var(--turquoise);
background: white;
transform: translateY(-1px);
}
.quick-login-toggle.is-open {
background: var(--turquoise);
border-color: var(--turquoise);
color: white;
}
.quick-login-toggle .material-symbols-outlined { font-size: 18px; }
.quick-login-toggle .chevron { transition: transform .2s ease; }
.quick-login-toggle.is-open .chevron { transform: rotate(180deg); }
.quick-login-body {
padding-top: 20px;
margin-top: 20px;
border-top: 1px solid rgba(0,174,184,0.18);
}
.quick-login-actions {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
margin-top: 4px;
}
.quick-login-actions .btn .material-symbols-outlined { font-size: 18px; }
.login-helper {
font-size: 0.85rem;
color: var(--turquoise-deep);
font-weight: 700;
text-decoration: underline;
}
/* --- Create-Account-Wrap (Step 3) --- */
.create-account-wrap { margin-bottom: 14px; }
.create-account-consent {
background: linear-gradient(180deg, var(--bg-soft), #ffffff);
border: 1.5px solid rgba(0,174,184,0.32);
}
.create-account-fields {
margin-top: 14px;
padding: 18px 18px 4px;
background: var(--bg-soft);
border: 1px solid rgba(0,174,184,0.18);
border-radius: 14px;
animation: slideDown .25s ease;
}
.create-account-fields[hidden] { display: none; }
@keyframes slideDown {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.signup-hint {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 0.85rem;
color: var(--blue-deep);
margin: 4px 0 8px;
}
.signup-hint .material-symbols-outlined {
font-size: 18px;
color: var(--turquoise-deep);
}
/* --- Success-Account-Card (nach erfolgreichem Bestellabschluss
MIT Konto-Erstellung) --- */
.success-account-card {
display: flex;
gap: 16px;
align-items: flex-start;
background: rgba(255,255,255,0.14);
border: 1px solid rgba(255,255,255,0.28);
border-radius: 14px;
padding: 20px;
max-width: 560px;
margin: 4px auto 24px;
text-align: left;
}
.success-account-icon {
width: 42px;
height: 42px;
border-radius: 50%;
background: rgba(255,255,255,0.22);
display: grid;
place-items: center;
flex-shrink: 0;
}
.success-account-icon .material-symbols-outlined {
color: white;
font-size: 24px;
}
.success-account-text strong {
display: block;
color: white;
font-size: 1rem;
margin-bottom: 6px;
}
.success-account-text p {
color: rgba(255,255,255,0.9);
font-size: 0.92rem;
line-height: 1.55;
margin: 0;
}
.success-account-text a { color: white; text-decoration: underline; }
.success-actions {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
.success-actions .btn-secondary {
background: rgba(255,255,255,0.14);
border-color: rgba(255,255,255,0.32);
color: white;
}
.success-actions .btn-secondary:hover { background: rgba(255,255,255,0.24); }
@media (max-width: 720px) {
.logged-in-options { grid-template-columns: 1fr; }
.quick-login-head { flex-direction: column; align-items: flex-start; }
.quick-login-toggle { align-self: stretch; justify-content: center; }
}
/* ============================================================
ACCOUNT V2 — Aboverwaltung + Adressbuch + Notice
============================================================ */
/* --- Info-Notice (App-Aktivierungs-Hinweis) --- */
.info-notice {
display: flex;
gap: 16px;
align-items: flex-start;
padding: 22px 24px;
border-radius: 16px;
margin-bottom: 26px;
}
.info-notice-app {
background: linear-gradient(135deg, rgba(0,174,184,0.10), rgba(16,63,124,0.08));
border: 1px solid rgba(0,174,184,0.28);
}
.info-notice-icon {
width: 46px;
height: 46px;
border-radius: 14px;
background: linear-gradient(135deg, var(--turquoise), var(--turquoise-dark));
color: white;
display: grid;
place-items: center;
flex-shrink: 0;
}
.info-notice-icon .material-symbols-outlined { font-size: 24px; }
.info-notice-text strong {
display: block;
color: var(--blue-deep);
font-size: 1rem;
margin-bottom: 6px;
letter-spacing: -0.01em;
}
.info-notice-text p {
color: var(--muted);
font-size: 0.9rem;
line-height: 1.6;
margin: 0;
}
.info-notice-text em { color: var(--turquoise-deep); font-style: normal; font-weight: 700; }
/* --- Subscription-Card (aktuelles Abo) --- */
.sub-card {
background: linear-gradient(135deg, var(--turquoise) 0%, var(--blue) 100%);
color: white;
border-radius: 18px;
padding: 26px 28px;
margin-bottom: 26px;
box-shadow: var(--shadow);
position: relative;
overflow: hidden;
}
.sub-card::before {
content: "";
position: absolute;
top: -80px;
right: -80px;
width: 220px;
height: 220px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,0.16), transparent 70%);
pointer-events: none;
}
.sub-card-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: wrap;
position: relative;
z-index: 2;
}
.sub-card-product {
display: flex;
align-items: center;
gap: 14px;
}
.sub-card-icon {
width: 50px;
height: 50px;
border-radius: 14px;
background: rgba(255,255,255,0.18);
display: grid;
place-items: center;
color: white;
flex-shrink: 0;
}
.sub-card-icon .material-symbols-outlined { font-size: 26px; }
.sub-card-product strong {
display: block;
font-size: 1.2rem;
letter-spacing: -0.01em;
}
.sub-card-product span {
display: block;
font-size: 0.88rem;
color: rgba(255,255,255,0.85);
margin-top: 2px;
}
.sub-card-price {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
}
.sub-card-price > span:first-child {
font-size: 1.1rem;
font-weight: 900;
letter-spacing: -0.01em;
}
.sub-card-price .status-badge {
background: rgba(255,255,255,0.18);
color: white;
}
.sub-card-meta {
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid rgba(255,255,255,0.18);
font-size: 0.88rem;
color: rgba(255,255,255,0.85);
position: relative;
z-index: 2;
}
/* --- Plan-Switch (Monat/Jahr) --- */
.plan-switch {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-top: 14px;
}
.plan-switch-btn {
position: relative;
background: white;
border: 2px solid rgba(0,174,184,0.22);
border-radius: 16px;
padding: 20px 18px;
font-family: inherit;
cursor: pointer;
text-align: left;
transition: all .2s ease;
display: flex;
flex-direction: column;
gap: 4px;
}
.plan-switch-btn:hover { border-color: var(--turquoise); transform: translateY(-2px); }
.plan-switch-btn.active {
border-color: var(--turquoise);
background: linear-gradient(180deg, white, var(--bg-soft));
box-shadow: 0 14px 28px rgba(0,174,184,0.22);
}
.plan-switch-btn.active::after {
content: "✓";
position: absolute;
top: 12px;
right: 14px;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--turquoise);
color: white;
display: grid;
place-items: center;
font-size: 0.78rem;
font-weight: 900;
}
.plan-switch-btn .ps-tag {
position: absolute;
top: -10px;
left: 16px;
background: var(--orange);
color: white;
font-size: 0.7rem;
font-weight: 900;
letter-spacing: 0.04em;
padding: 3px 9px;
border-radius: 999px;
text-transform: uppercase;
}
.plan-switch-btn .ps-title {
color: var(--blue-deep);
font-weight: 900;
font-size: 1rem;
}
.plan-switch-btn .ps-price {
color: var(--muted);
font-size: 0.88rem;
font-weight: 700;
}
/* --- Sub-Meta-Row (Zahlungsmethode, Rechnungsadresse) --- */
.sub-meta-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
background: var(--bg-soft);
border: 1px solid rgba(0,174,184,0.18);
padding: 16px 18px;
border-radius: 14px;
flex-wrap: wrap;
}
.sub-meta-info strong {
display: block;
color: var(--blue-deep);
font-size: 0.98rem;
margin-bottom: 2px;
}
.sub-meta-info span {
display: block;
color: var(--muted);
font-size: 0.85rem;
}
.sub-meta-row .btn .material-symbols-outlined { font-size: 16px; }
/* --- Adressbuch --- */
.addr-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-bottom: 20px;
}
.addr-card {
background: white;
border: 1px solid rgba(0,174,184,0.22);
border-radius: 14px;
padding: 18px 20px;
display: flex;
flex-direction: column;
gap: 10px;
transition: border-color .2s ease;
}
.addr-card:hover { border-color: var(--turquoise); }
.addr-card.primary {
background: linear-gradient(180deg, white, var(--bg-soft));
border-color: var(--turquoise);
}
.addr-card-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.addr-card-head strong {
color: var(--blue-deep);
font-size: 0.98rem;
}
.addr-card-body {
display: flex;
flex-direction: column;
gap: 2px;
}
.addr-card-body .addr-name {
color: var(--blue-deep);
font-weight: 700;
font-size: 0.92rem;
}
.addr-card-body .addr-line {
color: var(--muted);
font-size: 0.88rem;
line-height: 1.5;
}
.addr-card-hint {
font-size: 0.78rem;
color: var(--muted);
font-style: italic;
}
.addr-card-actions { margin-top: 4px; }
.btn-link {
border: 0;
background: transparent;
color: var(--muted);
font-family: inherit;
font-weight: 700;
font-size: 0.85rem;
text-decoration: underline;
cursor: pointer;
padding: 0;
transition: color .15s ease;
}
.btn-link:hover { color: var(--orange); }
/* --- Updated acc-stats: 4 columns include the new "Aktuelles Abo" --- */
.acc-stats .acc-stat-value {
font-size: 1.3rem; /* slightly smaller so "Monats-Abo" fits */
line-height: 1.3;
}
@media (max-width: 720px) {
.sub-card { padding: 22px; }
.sub-card-head { flex-direction: column; align-items: flex-start; }
.sub-card-price { align-items: flex-start; }
.plan-switch { grid-template-columns: 1fr; }
.addr-list { grid-template-columns: 1fr; }
.info-notice { padding: 18px; }
.sub-meta-row { flex-direction: column; align-items: flex-start; }
}
/* Utility: kleines Inline-Icon vor Text (z. B. SMS-Mockup) */
.inline-icon {
font-size: 18px;
vertical-align: -3px;
margin-right: 4px;
}
/* =============================================================================
29. SEITE: BLOG / MAGAZIN (body.page-blog)
-----------------------------------------------------------------------------
Komponenten für:
- blog.html (Übersichts-/Listing-Seite)
- blog-post.html (Artikel-Template)
- /blog/.html (echte Artikel)
Architektur:
A. Listing
29.1 Hero (.blog-hero, .blog-search)
29.2 Filter (.blog-filter-bar, .blog-chips)
29.3 Featured Card (.blog-featured)
29.4 Card-Grid (.blog-grid, .blog-card)
29.5 Pagination (.blog-pagination)
29.6 Newsletter (.blog-newsletter)
B. Article
29.7 Article Head (.blog-post-head, .blog-breadcrumb)
29.8 Article Body Typography (.blog-post-body)
29.9 Inline-Komponenten (Quote, Figure, Inline-CTA, Tags, Share)
29.10 End-CTA (.blog-end-cta)
29.11 Related Articles (.blog-related)
C. Responsive
29.12 Media Queries
============================================================================= */
/* ----- A. LISTING ---------------------------------------------------------- */
/* 29.1 Hero · Magazin-Titel + Suche --------------------------------------- */
.blog-hero { padding-bottom: 30px; }
.blog-search {
position: relative;
max-width: 640px;
margin: 36px auto 0;
}
.blog-search-input {
width: 100%;
padding: 18px 22px 18px 56px;
border: 1px solid rgba(0,174,184,0.28);
border-radius: 999px;
background: white;
font: inherit;
font-size: 1rem;
color: var(--text);
box-shadow: 0 14px 32px rgba(16,63,124,0.08);
transition: border-color .2s, box-shadow .2s;
}
.blog-search-input:focus {
outline: none;
border-color: var(--turquoise);
box-shadow: 0 18px 38px rgba(0,169,180,0.18);
}
.blog-search-input:disabled {
background: var(--bg-soft);
cursor: not-allowed;
color: var(--muted);
}
.blog-search-icon {
position: absolute;
left: 22px;
top: 50%;
transform: translateY(-50%);
color: var(--turquoise-deep);
font-size: 22px;
}
.blog-search-hint {
position: absolute;
right: 22px;
top: 50%;
transform: translateY(-50%);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--muted);
background: var(--bg-soft);
padding: 4px 10px;
border-radius: 999px;
}
/* 29.2 Filter-Bar · Kategorie-Chips --------------------------------------- */
.blog-filter-bar {
background: white;
border-bottom: 1px solid rgba(0,174,184,0.14);
padding: 18px 0;
position: sticky;
top: 0;
z-index: 20;
backdrop-filter: saturate(140%) blur(10px);
}
.blog-filter-row {
display: flex;
align-items: center;
gap: 18px;
}
.blog-filter-label {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.78rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--turquoise-deep);
white-space: nowrap;
}
.blog-filter-label .material-symbols-outlined { font-size: 18px; }
.blog-chips {
display: flex;
gap: 10px;
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: thin;
padding: 4px 2px;
}
.blog-chips::-webkit-scrollbar { height: 6px; }
.blog-chips::-webkit-scrollbar-thumb {
background: rgba(0,174,184,0.25);
border-radius: 999px;
}
.blog-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 16px;
border-radius: 999px;
border: 1px solid rgba(16,63,124,0.12);
background: white;
color: var(--text);
font-weight: 700;
font-size: 0.88rem;
white-space: nowrap;
transition: background .18s, border-color .18s, color .18s, transform .12s;
}
.blog-chip .material-symbols-outlined { font-size: 16px; }
.blog-chip:hover {
background: var(--blue-soft);
border-color: rgba(0,174,184,0.4);
transform: translateY(-1px);
}
.blog-chip.active {
background: var(--turquoise);
color: white;
border-color: var(--turquoise);
}
/* 29.3 Featured Card · Hervorgehobener Top-Artikel ----------------------- */
.blog-featured { padding: 60px 0 30px; }
.blog-featured-card {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 0;
background: white;
border-radius: var(--radius);
border: 1px solid rgba(0,174,184,0.16);
box-shadow: var(--shadow);
overflow: hidden;
transition: transform .22s, box-shadow .22s, border-color .22s;
}
.blog-featured-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--turquoise);
}
.blog-featured-media {
position: relative;
display: block;
background: var(--bg-soft);
min-height: 320px;
overflow: hidden;
}
.blog-featured-media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s ease;
}
.blog-featured-card:hover .blog-featured-media img { transform: scale(1.04); }
.blog-featured-badge {
position: absolute;
top: 18px;
left: 18px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: 999px;
background: var(--orange);
color: white;
font-size: 0.78rem;
font-weight: 900;
letter-spacing: 0.04em;
text-transform: uppercase;
box-shadow: 0 8px 20px rgba(245,163,59,0.35);
}
.blog-featured-badge .material-symbols-outlined { font-size: 16px; }
.blog-featured-body {
padding: 44px 44px 44px;
display: flex;
flex-direction: column;
justify-content: center;
}
.blog-featured-title {
margin: 14px 0 14px;
font-size: clamp(1.4rem, 2.4vw, 2rem);
line-height: 1.18;
color: var(--blue-deep);
letter-spacing: -0.02em;
font-weight: 900;
}
.blog-featured-title a { color: inherit; }
.blog-featured-title a:hover { color: var(--turquoise-deep); }
.blog-featured-excerpt {
color: var(--muted);
font-size: 1.02rem;
margin-bottom: 22px;
}
/* 29.4 Card-Grid · Article Listing --------------------------------------- */
.blog-list { padding: 40px 0 90px; }
.blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.blog-grid-3 { grid-template-columns: repeat(3, 1fr); }
.blog-card {
display: flex;
flex-direction: column;
background: white;
border-radius: var(--radius);
border: 1px solid rgba(0,174,184,0.16);
box-shadow: 0 12px 28px rgba(18,63,124,0.07);
overflow: hidden;
transition: transform .22s, box-shadow .22s, border-color .22s;
}
.blog-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
border-color: var(--turquoise);
}
.blog-card-media {
display: block;
aspect-ratio: 16 / 10;
background: var(--bg-soft);
overflow: hidden;
}
.blog-card-media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s ease;
}
.blog-card:hover .blog-card-media img { transform: scale(1.05); }
.blog-card-body {
padding: 24px 24px 26px;
display: flex;
flex-direction: column;
gap: 12px;
flex-grow: 1;
}
.blog-card-meta {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
font-size: 0.82rem;
color: var(--muted);
}
.blog-card-meta time { font-weight: 600; }
.blog-card-meta-divider { color: rgba(16,63,124,0.3); }
.blog-card-category {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 999px;
background: rgba(0,169,180,0.1);
color: var(--turquoise-deep);
font-weight: 900;
font-size: 0.72rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.blog-card-category:hover { background: rgba(0,169,180,0.18); }
.blog-card-readtime {
display: inline-flex;
align-items: center;
gap: 4px;
}
.blog-card-readtime .material-symbols-outlined { font-size: 16px; }
.blog-card-title {
font-size: 1.18rem;
font-weight: 900;
line-height: 1.22;
color: var(--blue-deep);
letter-spacing: -0.01em;
margin: 0;
}
.blog-card-title a { color: inherit; }
.blog-card-title a:hover { color: var(--turquoise-deep); }
.blog-card-excerpt {
color: var(--muted);
font-size: 0.95rem;
line-height: 1.55;
margin: 0;
flex-grow: 1;
}
.blog-read-more {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 900;
color: var(--turquoise-deep);
font-size: 0.92rem;
letter-spacing: 0.01em;
margin-top: 4px;
align-self: flex-start;
transition: gap .15s, color .15s;
}
.blog-read-more:hover { color: var(--turquoise); gap: 10px; }
.blog-read-more .material-symbols-outlined { font-size: 18px; }
/* 29.5 Pagination ---------------------------------------------------------- */
.blog-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-top: 60px;
padding-top: 30px;
border-top: 1px solid rgba(0,174,184,0.14);
}
.blog-page-btn {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 10px 16px;
border-radius: 999px;
border: 1px solid rgba(16,63,124,0.14);
background: white;
color: var(--text);
font-weight: 800;
font-size: 0.88rem;
transition: background .15s, border-color .15s, color .15s;
}
.blog-page-btn:hover {
background: var(--blue-soft);
border-color: var(--turquoise);
color: var(--turquoise-deep);
}
.blog-page-btn.is-disabled {
opacity: 0.4;
pointer-events: none;
}
.blog-page-numbers {
display: flex;
align-items: center;
gap: 6px;
list-style: none;
margin: 0 8px;
padding: 0;
}
.blog-page-num {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 10px;
border-radius: 12px;
font-weight: 800;
font-size: 0.92rem;
color: var(--text);
border: 1px solid transparent;
transition: background .15s, border-color .15s, color .15s;
}
.blog-page-num:hover {
background: var(--blue-soft);
color: var(--turquoise-deep);
}
.blog-page-num.active {
background: var(--turquoise);
color: white;
border-color: var(--turquoise);
}
.blog-page-ellipsis {
color: var(--muted);
display: inline-flex;
align-items: center;
}
/* 29.6 Newsletter Box ------------------------------------------------------ */
.blog-newsletter { padding: 50px 0 60px; }
.blog-newsletter-box {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center;
padding: 50px;
border-radius: 28px;
background:
radial-gradient(circle at 85% 30%, rgba(0,169,180,0.12), transparent 55%),
radial-gradient(circle at 10% 110%, rgba(245,163,59,0.10), transparent 55%),
linear-gradient(180deg, #ffffff 0%, var(--bg-soft) 100%);
border: 1px solid rgba(0,174,184,0.18);
box-shadow: var(--shadow);
}
.blog-newsletter-text h2 {
font-size: clamp(1.4rem, 2.5vw, 1.9rem);
color: var(--blue-deep);
letter-spacing: -0.02em;
font-weight: 900;
line-height: 1.18;
margin: 8px 0 12px;
}
.blog-newsletter-text p {
color: var(--muted);
font-size: 1rem;
}
.blog-newsletter-form {
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
align-items: center;
}
.blog-newsletter-form input[type="email"] {
grid-column: 1 / -1;
width: 100%;
padding: 16px 22px;
border: 1px solid rgba(0,174,184,0.28);
border-radius: 999px;
background: white;
font: inherit;
font-size: 1rem;
color: var(--text);
}
.blog-newsletter-form input[type="email"]:focus {
outline: none;
border-color: var(--turquoise);
}
.blog-newsletter-form .btn { justify-self: stretch; }
.blog-newsletter-legal {
grid-column: 1 / -1;
font-size: 0.75rem;
color: var(--muted);
line-height: 1.4;
}
/* Accessibility: visuell versteckt, für Screenreader sichtbar */
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
/* ----- B. ARTICLE ---------------------------------------------------------- */
/* 29.7 Article Head -------------------------------------------------------- */
.blog-post { padding: 0; }
.blog-post-head {
padding: 104px 0 40px;
background:
radial-gradient(circle at 85% 50%, rgba(0,169,180,0.16), transparent 35%),
radial-gradient(circle at 10% 110%, rgba(245,163,59,0.08), transparent 40%),
linear-gradient(180deg, #ffffff 0%, #f3fbfd 100%);
border-bottom: 1px solid rgba(0,169,180,0.12);
}
.blog-post-head-inner {
max-width: 820px;
}
.blog-post-head h1 {
font-size: clamp(2rem, 4.5vw, 3.2rem);
letter-spacing: -0.035em;
line-height: 1.08;
margin: 18px 0 22px;
}
.blog-breadcrumb {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.82rem;
color: var(--muted);
font-weight: 700;
margin-bottom: 18px;
}
.blog-breadcrumb a { color: var(--turquoise-deep); }
.blog-breadcrumb a:hover { color: var(--turquoise); }
.blog-breadcrumb .material-symbols-outlined { font-size: 16px; opacity: 0.6; }
.blog-post-category {
display: inline-flex;
align-items: center;
padding: 6px 14px;
border-radius: 999px;
background: var(--turquoise);
color: white;
font-weight: 900;
font-size: 0.76rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.blog-post-category:hover {
background: var(--turquoise-dark);
color: white;
}
.blog-post-lead {
font-size: 1.18rem;
line-height: 1.55;
color: var(--text);
margin-bottom: 26px;
}
.blog-post-meta {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
font-size: 0.92rem;
color: var(--muted);
}
.blog-post-meta > span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.blog-post-meta .material-symbols-outlined {
font-size: 18px;
color: var(--turquoise-deep);
}
.blog-post-meta-sep {
width: 4px; height: 4px;
border-radius: 50%;
background: rgba(16,63,124,0.25);
}
.blog-post-hero-figure {
margin: 50px auto 0;
border-radius: 24px;
overflow: hidden;
background: var(--bg-soft);
box-shadow: var(--shadow);
}
.blog-post-hero-figure img {
width: 100%;
height: auto;
display: block;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.blog-post-hero-figure figcaption {
padding: 12px 18px;
font-size: 0.85rem;
color: var(--muted);
text-align: center;
background: white;
border-top: 1px solid rgba(0,174,184,0.12);
}
/* 29.8 Article Body Typography --------------------------------------------- */
.blog-post-body {
max-width: 760px;
padding: 60px 18px 40px;
color: var(--text);
}
.blog-post-body p,
.blog-post-body ul,
.blog-post-body ol,
.blog-post-body blockquote,
.blog-post-body figure {
font-size: 1.08rem;
line-height: 1.75;
margin-bottom: 22px;
}
.blog-post-intro {
font-size: 1.22rem !important;
line-height: 1.6 !important;
color: var(--blue-deep);
font-weight: 500;
padding-left: 18px;
border-left: 3px solid var(--turquoise);
margin-bottom: 36px !important;
}
.blog-post-body h2 {
font-size: clamp(1.5rem, 3vw, 2rem);
color: var(--blue-deep);
letter-spacing: -0.02em;
font-weight: 900;
line-height: 1.18;
margin: 48px 0 18px;
}
.blog-post-body h3 {
font-size: clamp(1.2rem, 2.2vw, 1.4rem);
color: var(--blue-deep);
font-weight: 800;
line-height: 1.25;
margin: 36px 0 14px;
}
.blog-post-body a {
color: var(--turquoise-deep);
font-weight: 700;
text-decoration: underline;
text-decoration-color: rgba(0,169,180,0.4);
text-underline-offset: 3px;
transition: color .15s, text-decoration-color .15s;
}
.blog-post-body a:hover {
color: var(--turquoise);
text-decoration-color: var(--turquoise);
}
.blog-post-body strong { color: var(--blue-deep); }
.blog-post-body code {
background: var(--bg-soft);
border-radius: 6px;
padding: 2px 6px;
font-size: 0.92em;
color: var(--turquoise-deep);
}
.blog-post-list {
padding-left: 22px;
}
.blog-post-list li { margin-bottom: 8px; }
.blog-post-list-ordered { list-style: decimal; }
/* 29.9 Inline-Komponenten -------------------------------------------------- */
/* Zitat / Highlight */
.blog-post-quote {
position: relative;
padding: 26px 28px 26px 36px;
margin: 36px 0 !important;
background:
linear-gradient(180deg, rgba(0,169,180,0.06), rgba(0,169,180,0.02));
border-left: 4px solid var(--turquoise);
border-radius: 0 16px 16px 0;
font-size: 1.18rem !important;
line-height: 1.5 !important;
color: var(--blue-deep);
font-style: italic;
}
.blog-post-quote cite {
display: block;
font-size: 0.88rem;
font-style: normal;
font-weight: 700;
color: var(--turquoise-deep);
margin-top: 12px;
}
/* Inline-Figure */
.blog-post-inline-figure {
margin: 36px 0 !important;
border-radius: 18px;
overflow: hidden;
background: var(--bg-soft);
}
.blog-post-inline-figure img {
width: 100%;
height: auto;
display: block;
}
.blog-post-inline-figure figcaption {
padding: 12px 18px;
font-size: 0.86rem;
color: var(--muted);
text-align: center;
background: white;
border-top: 1px solid rgba(0,174,184,0.1);
}
/* Inline-CTA mitten im Artikel */
.blog-post-inline-cta {
display: flex;
align-items: flex-start;
gap: 18px;
padding: 22px 24px;
margin: 36px 0;
background:
linear-gradient(135deg, rgba(0,169,180,0.08), rgba(245,163,59,0.05));
border: 1px solid rgba(0,174,184,0.18);
border-radius: 18px;
}
.blog-post-inline-cta-icon {
flex-shrink: 0;
width: 44px; height: 44px;
border-radius: 12px;
background: var(--turquoise);
color: white;
display: grid;
place-items: center;
}
.blog-post-inline-cta-icon .material-symbols-outlined { font-size: 24px; }
.blog-post-inline-cta-text {
font-size: 1rem;
line-height: 1.55;
color: var(--text);
}
.blog-post-inline-cta-text strong { color: var(--blue-deep); }
.blog-post-inline-cta-text a {
color: var(--turquoise-deep);
font-weight: 800;
text-decoration: none;
border-bottom: 2px solid rgba(0,169,180,0.3);
transition: border-color .15s;
}
.blog-post-inline-cta-text a:hover { border-color: var(--turquoise); }
/* Tags */
.blog-post-tags {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin: 50px 0 22px;
padding-top: 28px;
border-top: 1px solid rgba(0,174,184,0.16);
}
.blog-post-tags-label {
font-size: 0.8rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
margin-right: 4px;
}
.blog-post-tag {
display: inline-flex;
align-items: center;
padding: 6px 14px;
border-radius: 999px;
background: var(--bg-soft);
color: var(--turquoise-deep);
font-weight: 700;
font-size: 0.85rem;
border: 1px solid rgba(0,174,184,0.18);
transition: background .15s, border-color .15s;
}
.blog-post-tag:hover {
background: rgba(0,169,180,0.12);
border-color: var(--turquoise);
}
/* Share */
.blog-post-share {
margin-top: 22px;
padding: 18px 0 6px;
}
.blog-post-share-label {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.8rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 12px;
}
.blog-post-share-label .material-symbols-outlined { font-size: 16px; }
.blog-post-share ul {
display: flex;
gap: 10px;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 0;
}
.blog-post-share ul li a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: 999px;
background: white;
border: 1px solid rgba(16,63,124,0.14);
font-weight: 700;
font-size: 0.85rem;
color: var(--text);
transition: background .15s, border-color .15s, color .15s;
}
.blog-post-share ul li a:hover {
background: var(--blue-soft);
border-color: var(--turquoise);
color: var(--turquoise-deep);
}
.blog-post-share ul li a .material-symbols-outlined { font-size: 18px; }
/* 29.10 End-CTA ------------------------------------------------------------ */
.blog-end-cta { padding: 60px 0; }
.blog-end-cta-box {
display: grid;
grid-template-columns: 90px 1fr;
gap: 30px;
align-items: start;
padding: 50px 50px;
border-radius: 28px;
background:
radial-gradient(circle at 100% 0%, rgba(0,169,180,0.16), transparent 50%),
linear-gradient(160deg, #ffffff 0%, var(--bg-soft) 100%);
border: 1px solid rgba(0,174,184,0.22);
box-shadow: var(--shadow);
}
.blog-end-cta-icon {
width: 80px; height: 80px;
border-radius: 22px;
background: linear-gradient(135deg, var(--turquoise) 0%, var(--blue) 100%);
display: grid;
place-items: center;
color: white;
box-shadow: 0 14px 28px rgba(0,169,180,0.32);
}
.blog-end-cta-icon .material-symbols-outlined { font-size: 38px; }
.blog-end-cta-content h2 {
font-size: clamp(1.6rem, 3vw, 2.4rem);
color: var(--blue-deep);
letter-spacing: -0.03em;
font-weight: 900;
line-height: 1.1;
margin: 8px 0 16px;
}
.blog-end-cta-content h2 .accent {
background: linear-gradient(120deg, var(--turquoise), var(--turquoise-dark));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.blog-end-cta-content p {
color: var(--muted);
font-size: 1.05rem;
margin-bottom: 20px;
}
.blog-end-cta-checks {
display: flex;
gap: 18px;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 0 0 24px;
}
.blog-end-cta-checks li {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 700;
font-size: 0.92rem;
color: var(--blue-deep);
}
.blog-end-cta-checks li .material-symbols-outlined {
font-size: 18px;
color: var(--turquoise);
}
.blog-end-cta-actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.blog-end-cta-legal {
display: block;
font-size: 0.78rem;
color: var(--muted);
font-style: italic;
}
/* 29.11 Related Articles --------------------------------------------------- */
.blog-related {
padding: 40px 0 90px;
background: linear-gradient(180deg, #ffffff 0%, var(--bg-soft) 100%);
border-top: 1px solid rgba(0,174,184,0.12);
}
.blog-back-row {
text-align: center;
margin-top: 48px;
}
.blog-back-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 22px;
border-radius: 999px;
border: 1px solid rgba(0,174,184,0.3);
background: white;
color: var(--turquoise-deep);
font-weight: 800;
font-size: 0.92rem;
transition: background .15s, border-color .15s;
}
.blog-back-link:hover {
background: var(--blue-soft);
border-color: var(--turquoise);
}
.blog-back-link .material-symbols-outlined { font-size: 18px; }
/* ----- C. RESPONSIVE ------------------------------------------------------ */
/* 29.12 Media Queries ------------------------------------------------------ */
@media (max-width: 980px) {
.blog-featured-card { grid-template-columns: 1fr; }
.blog-featured-media { min-height: 260px; aspect-ratio: 16 / 9; }
.blog-featured-body { padding: 32px; }
.blog-grid,
.blog-grid-3 { grid-template-columns: repeat(2, 1fr); }
.blog-newsletter-box {
grid-template-columns: 1fr;
gap: 24px;
padding: 36px;
}
.blog-end-cta-box {
grid-template-columns: 1fr;
padding: 40px 32px;
text-align: left;
}
.blog-end-cta-icon { margin-bottom: 4px; }
}
@media (max-width: 720px) {
/* Hero & Search */
.blog-hero { padding-top: 100px; padding-bottom: 24px; }
.blog-search { margin-top: 28px; }
.blog-search-input { padding: 14px 18px 14px 50px; font-size: 0.95rem; }
.blog-search-hint { display: none; }
.blog-search-icon { left: 18px; font-size: 20px; }
/* Filter bar */
.blog-filter-bar { padding: 14px 0; }
.blog-filter-row { gap: 12px; }
.blog-filter-label { display: none; }
/* Featured */
.blog-featured { padding: 40px 0 20px; }
.blog-featured-body { padding: 26px; }
.blog-featured-title { font-size: 1.4rem; }
/* Card grid */
.blog-list { padding: 24px 0 60px; }
.blog-grid,
.blog-grid-3 { grid-template-columns: 1fr; gap: 22px; }
.blog-card-body { padding: 20px 22px 22px; }
.blog-card-title { font-size: 1.1rem; }
/* Pagination */
.blog-pagination { gap: 6px; margin-top: 40px; }
.blog-page-btn { padding: 8px 12px; font-size: 0.82rem; }
.blog-page-num { min-width: 36px; height: 36px; font-size: 0.85rem; }
/* Newsletter */
.blog-newsletter-box { padding: 28px 22px; }
.blog-newsletter-form { grid-template-columns: 1fr; }
.blog-newsletter-form .btn { width: 100%; }
/* Article Head */
.blog-post-head { padding: 110px 0 30px; }
.blog-post-head h1 { font-size: clamp(1.7rem, 6vw, 2.3rem); }
.blog-post-lead { font-size: 1.05rem; }
.blog-post-meta { gap: 10px 14px; font-size: 0.85rem; }
.blog-post-hero-figure { margin-top: 34px; border-radius: 18px; }
/* Article Body */
.blog-post-body { padding: 40px 4px 20px; }
.blog-post-body p,
.blog-post-body ul,
.blog-post-body ol,
.blog-post-body blockquote,
.blog-post-body figure { font-size: 1rem; line-height: 1.7; }
.blog-post-intro { font-size: 1.08rem !important; }
.blog-post-body h2 { font-size: 1.4rem; margin: 36px 0 14px; }
.blog-post-body h3 { font-size: 1.15rem; margin: 26px 0 10px; }
/* Inline-CTA */
.blog-post-inline-cta { flex-direction: column; gap: 12px; padding: 20px; }
/* Quote */
.blog-post-quote { font-size: 1.05rem !important; padding: 22px 22px 22px 26px; }
/* End-CTA */
.blog-end-cta { padding: 40px 0; }
.blog-end-cta-box { padding: 30px 24px; }
.blog-end-cta-icon { width: 64px; height: 64px; border-radius: 18px; }
.blog-end-cta-icon .material-symbols-outlined { font-size: 30px; }
.blog-end-cta-actions .btn { flex: 1 1 100%; }
/* Related */
.blog-related { padding: 30px 0 60px; }
}
@media (max-width: 480px) {
.blog-card-meta { font-size: 0.78rem; }
.blog-featured-badge { font-size: 0.7rem; padding: 6px 10px; }
.blog-post-share ul { gap: 6px; }
.blog-post-share ul li a { padding: 6px 12px; font-size: 0.8rem; }
}
/* =============================================================================
30. BLOG ADMIN / EDITOR (body.page-blog-admin, body.page-blog-list)
-----------------------------------------------------------------------------
Styles, die NUR vom dynamischen Blog-System genutzt werden:
30.1 Admin-CTA-Banner (auf blog.html, nur für Admins sichtbar)
30.2 Empty-State (wenn keine dynamischen Posts vorhanden)
30.3 Card-Delete-Button (Admin-only Overlay auf den Cards)
30.4 Access-Gates (Login / Role-Hinweise auf blog-admin.html)
30.5 Editor-Layout (Form + Sidebar)
30.6 Form-Felder (Inputs, Textarea, Select, Image-Uploader)
30.7 Feedback-Boxen (Error / Success)
30.8 Responsive
============================================================================= */
/* 30.1 Admin-CTA-Banner (oben auf blog.html) ------------------------------- */
.blog-admin-cta {
padding: 24px 0 0;
}
.blog-admin-cta-box {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 18px 26px;
border-radius: 18px;
background:
linear-gradient(135deg, rgba(245,163,59,0.12), rgba(0,169,180,0.10));
border: 1px dashed rgba(245,163,59,0.45);
}
.blog-admin-cta-text {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
}
.blog-admin-cta-icon {
font-size: 30px;
color: var(--orange);
flex-shrink: 0;
}
.blog-admin-cta-text strong {
display: block;
color: var(--blue-deep);
font-size: 1rem;
margin-bottom: 2px;
}
.blog-admin-cta-text span {
color: var(--muted);
font-size: 0.92rem;
}
.blog-admin-cta-box .btn { flex-shrink: 0; }
/* 30.2 Empty-State -------------------------------------------------------- */
.blog-empty {
text-align: center;
max-width: 620px;
margin: 30px auto 0;
padding: 40px 28px;
border-radius: 22px;
background: var(--bg-soft);
border: 1px dashed rgba(0,174,184,0.32);
}
.blog-empty .material-symbols-outlined {
font-size: 42px;
color: var(--turquoise-deep);
margin-bottom: 10px;
}
.blog-empty h3 {
color: var(--blue-deep);
font-size: 1.25rem;
margin-bottom: 10px;
font-weight: 900;
letter-spacing: -0.01em;
}
.blog-empty p {
color: var(--muted);
font-size: 0.98rem;
margin: 0;
}
/* 30.3 Card-Delete-Overlay (Admin-only) ----------------------------------- */
.blog-card { position: relative; }
.blog-card-delete {
position: absolute;
top: 10px;
right: 10px;
z-index: 5;
width: 36px;
height: 36px;
border: 0;
border-radius: 50%;
background: rgba(10, 44, 90, 0.75);
color: white;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(4px);
opacity: 0;
transition: opacity .18s, background .18s, transform .12s;
}
.blog-card:hover .blog-card-delete { opacity: 1; }
.blog-card-delete:hover {
background: #c1424c;
transform: scale(1.05);
}
.blog-card-delete .material-symbols-outlined { font-size: 20px; }
/* 30.4 Access-Gates (blog-admin.html, blog-view.html) --------------------- */
.admin-gate {
padding: 116px 0 90px;
background:
radial-gradient(circle at 85% 50%, rgba(0,169,180,0.16), transparent 35%),
linear-gradient(180deg, #ffffff 0%, #f3fbfd 100%);
min-height: 60vh;
}
.admin-gate-card {
max-width: 560px;
margin: 0 auto;
text-align: center;
padding: 50px 36px;
background: white;
border-radius: 24px;
border: 1px solid rgba(0,174,184,0.18);
box-shadow: var(--shadow);
}
.admin-gate-icon {
font-size: 56px !important;
color: var(--turquoise-deep);
margin-bottom: 18px;
display: inline-block;
}
.admin-gate-card h1 {
font-size: clamp(1.6rem, 3.5vw, 2.2rem);
color: var(--blue-deep);
letter-spacing: -0.03em;
margin-bottom: 14px;
}
.admin-gate-card p {
color: var(--muted);
font-size: 1.02rem;
margin-bottom: 28px;
}
.admin-gate-actions {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
/* 30.5 Editor-Layout ------------------------------------------------------ */
.admin-editor-section {
padding: 104px 0 80px;
background:
radial-gradient(circle at 10% 0%, rgba(0,169,180,0.10), transparent 45%),
linear-gradient(180deg, #ffffff 0%, var(--bg-soft) 100%);
min-height: 80vh;
}
.admin-editor-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
margin-bottom: 36px;
padding-bottom: 24px;
border-bottom: 1px solid rgba(0,174,184,0.16);
}
.admin-editor-head h1 {
font-size: clamp(1.8rem, 3.5vw, 2.4rem);
color: var(--blue-deep);
letter-spacing: -0.03em;
margin: 8px 0 6px;
}
.admin-editor-sub {
color: var(--muted);
font-size: 0.98rem;
}
.admin-editor-sub strong { color: var(--blue-deep); }
.admin-editor-grid {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 36px;
align-items: start;
}
/* 30.6 Form-Felder -------------------------------------------------------- */
.admin-post-form {
background: white;
padding: 36px;
border-radius: 22px;
border: 1px solid rgba(0,174,184,0.18);
box-shadow: var(--shadow);
}
.apf-field {
margin-bottom: 24px;
}
.apf-field label {
display: block;
font-weight: 800;
color: var(--blue-deep);
margin-bottom: 8px;
font-size: 0.95rem;
}
.apf-required {
color: var(--orange);
margin-left: 2px;
}
.apf-field input[type="text"],
.apf-field input[type="email"],
.apf-field textarea,
.apf-field select {
width: 100%;
padding: 14px 16px;
border: 1px solid rgba(0,174,184,0.28);
border-radius: 14px;
background: white;
font: inherit;
font-size: 1rem;
color: var(--text);
transition: border-color .15s, box-shadow .15s;
}
.apf-field input[type="text"]:focus,
.apf-field input[type="email"]:focus,
.apf-field textarea:focus,
.apf-field select:focus {
outline: none;
border-color: var(--turquoise);
box-shadow: 0 0 0 4px rgba(0,169,180,0.12);
}
.apf-field textarea {
resize: vertical;
min-height: 90px;
line-height: 1.55;
font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
}
.apf-field select {
appearance: none;
background-image:
url("data:image/svg+xml;utf8, spec-tab links ─────────────── */
/* Bundle B chose to reuse existing .acc-tabs styling (); the
.acc-tabs-nav class from Bundle A's plan ended up unused. Keeping just
the .is-active rule because the new spec-tab links
rely on it for the active-underline (the legacy buttons used .active). */
.acc-tab.is-active { color: var(--noa-primary, #0a2540); border-bottom-color: var(--noa-primary, #0a2540); font-weight: 600; }
/* ─── Mobile Order-Summary Toggle─────────────────────────────── */
.checkout-summary-mobile-toggle {
display: none; /* nur sichtbar via Media-Query unten (Mobile) */
width: 100%;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.75rem 1rem;
background: var(--noa-primary, #0a2540);
color: #fff;
border: 0;
border-radius: 8px;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
margin-bottom: 0.5rem;
}
.checkout-summary-mobile-toggle:hover { opacity: 0.95; }
.checkout-summary-mobile-toggle-label { display: inline-flex; align-items: center; gap: 0.5rem; }
.checkout-summary-mobile-toggle-total { margin-left: auto; font-size: 1rem; }
.checkout-summary-toggle-chevron { transition: transform 0.2s ease; }
.checkout-summary-mobile-toggle[aria-expanded="true"] .checkout-summary-toggle-chevron { transform: rotate(180deg); }
@media (max-width: 900px) {
.checkout-summary-mobile-toggle { display: flex; }
.checkout-summary-mobile-toggle[hidden] { display: none; }
.checkout-summary-body { display: none; }
.checkout-summary-mobile-toggle[aria-expanded="true"] + .checkout-summary-body { display: block; }
}
@media (min-width: 901px) {
.checkout-summary-mobile-toggle { display: none !important; }
.checkout-summary-body { display: block; }
}
/* ─── Fieldset reset for checkout address group (A11y) ──────────── */
.checkout-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.checkout-fieldset-legend {
font-size: 0.9rem;
color: var(--muted, #6b7280);
font-weight: 700;
letter-spacing: 0.02em;
margin-bottom: 8px;
padding: 0;
}
/* ============================================================================
Account · Zahlungsdaten (Security-Tab)
----------------------------------------------------------------------------
Liste der gespeicherten Methoden + Modal-Flow für Add/Re-Auth/Delete.
============================================================================ */
.pm-list { margin: 1rem 0; display: flex; flex-direction: column; gap: 0.5rem; }
.pm-list-loading { color: #6b7280; font-size: 0.9rem; padding: 0.5rem 0; }
.pm-list-empty {
padding: 1.25rem;
background: #f9fafb;
border: 1px dashed #e5e7eb;
border-radius: 8px;
color: #6b7280;
font-size: 0.9rem;
text-align: center;
}
.pm-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.85rem 1rem;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 10px;
transition: border-color 0.15s ease;
}
.pm-card.is-default { border-color: #00aeb8; box-shadow: 0 0 0 1px rgba(0,174,184,0.12); }
.pm-card-info { display: flex; align-items: center; gap: 0.85rem; min-width: 0; flex: 1; }
.pm-card-icon {
width: 38px; height: 38px;
border-radius: 8px;
background: #eef6f7;
color: #008189;
display: inline-grid; place-items: center;
flex-shrink: 0;
}
.pm-card-icon .material-symbols-outlined { font-size: 22px; }
.pm-card-text { min-width: 0; }
.pm-card-label { font-weight: 600; color: #1a1a1a; }
.pm-card-meta {
display: flex; flex-wrap: wrap; gap: 0.5rem;
font-size: 0.8125rem; color: #6b7280;
margin-top: 0.15rem;
}
.pm-card-meta-default {
background: #d6f4f6; color: #065054;
padding: 0.1rem 0.5rem; border-radius: 4px; font-weight: 600;
}
.pm-card-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }
.pm-card-btn {
background: transparent; border: 1px solid #e5e7eb; border-radius: 6px;
padding: 0.4rem 0.6rem; font-size: 0.85rem; cursor: pointer;
color: #4b5563; display: inline-flex; align-items: center; gap: 0.3rem;
min-height: 36px;
}
.pm-card-btn:hover { background: #f9fafb; color: #1a1a1a; }
.pm-card-btn-danger { color: #b91c1c; border-color: #fecaca; }
.pm-card-btn-danger:hover { background: #fee2e2; color: #7f1d1d; }
.pm-card-btn .material-symbols-outlined { font-size: 16px; }
.pm-actions { margin-top: 0.5rem; }
/* Modal */
.pm-modal {
position: fixed; inset: 0;
z-index: 200;
display: flex; align-items: center; justify-content: center;
padding: 1rem;
}
.pm-modal[hidden] { display: none; }
.pm-modal-backdrop {
position: absolute; inset: 0;
background: rgba(10, 37, 64, 0.55);
backdrop-filter: blur(2px);
}
.pm-modal-card {
position: relative;
background: #fff;
border-radius: 12px;
padding: 1.75rem 1.75rem 1.5rem;
max-width: 460px;
width: 100%;
box-shadow: 0 20px 60px rgba(10, 37, 64, 0.25);
max-height: 90vh;
overflow-y: auto;
}
.pm-modal-card h3 { font-size: 1.125rem; font-weight: 600; margin: 0 0 0.5rem; color: #0a2540; }
.pm-modal-sub { color: #6b7280; font-size: 0.875rem; margin: 0 0 1rem; line-height: 1.5; }
.pm-modal-close {
position: absolute; top: 0.6rem; right: 0.85rem;
background: transparent; border: 0;
font-size: 1.5rem; line-height: 1;
color: #6b7280; cursor: pointer;
padding: 0.25rem 0.5rem;
}
.pm-modal-close:hover { color: #0a2540; }
.pm-modal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }
.pm-modal-actions .btn { min-width: 110px; }
.pm-step[hidden] { display: none; }
@media (max-width: 540px) {
.pm-card { flex-direction: column; align-items: stretch; }
.pm-card-actions { justify-content: flex-end; }
.pm-modal-card { padding: 1.25rem; }
.pm-modal-actions { flex-direction: column-reverse; }
.pm-modal-actions .btn { width: 100%; }
}
/* Passwort-Policy Live-Liste (Phase 1 Bugfix-Sprint) */
.pw-policy-list {
list-style: none;
padding: 0;
margin: 0.5rem 0 0;
display: grid;
gap: 0.25rem;
font-size: 0.875rem;
}
.pw-rule {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--text-muted, #6b7280);
transition: color 0.15s ease;
}
.pw-rule-icon {
font-size: 18px;
line-height: 1;
}
.pw-rule-pending .pw-rule-icon { color: #cbd5e1; }
.pw-rule-ok { color: var(--success, #16a34a); }
.pw-rule-ok .pw-rule-icon { color: var(--success, #16a34a); }