/* „Bootstrap à la Claude" für den nachladen.es-Shop — gleiches Design wie die Erklärbär-Seiten (vanilla.nachladen.es/src/css/claude.css).
   Nur aktiv mit ?design=neu (Cookie, siehe index.php); wird NACH bootstrap.min.css + screen.css geladen und überschreibt nur das Aussehen.
   WICHTIG: Schwebende Bestellbox (.sticky-top) und Handy-Leiste (.mobile-sticky-btn, position:fixed) bleiben unangetastet —
   deshalb um diese beiden herum KEIN overflow:hidden und KEIN transform/animation an den Eltern-Elementen (Spalten, Formular, Container). */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
	--bs-body-font-family:  'Inter', system-ui, -apple-system, sans-serif;
	--bs-body-bg:           #fff;      /* Kästen + Eingabefelder weiß; Seitenhintergrund #f0f5ff steht direkt am body */
	--bs-body-color:        #0f172a;
	--bs-secondary-color:   #64748b;
	--bs-primary:           #1d4ed8;
	--bs-primary-rgb:       29, 78, 216;
	--bs-link-color:        #1d4ed8;
	--bs-link-color-rgb:    29, 78, 216;
	--bs-link-hover-color:  #1e40af;
	--bs-border-radius:     10px;
	--bs-border-color:      #e2e8f0;

	--verlauf:      linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 60%, #3b82f6 100%);
	--orange:       #FF6600;
	--karte-schatten: 0 1px 4px rgba(15,23,42,.07), 0 6px 24px rgba(15,23,42,.06);

	/* Akzentfarbe: Bestell-Knopf, Häkchen am Paket, Warenkorb-Symbol — Standard freundliches Grün (Tom 24.10.) */
	--akzent-hell:    #22c55e;
	--akzent:         #16a34a;
	--akzent-schatten: rgba(22,163,74,.35);
}
/* Markenfarbe je Anbieter (body-Klasse anbieter-<p_laden_name>) — SIMYO in Orange (Tom 24.10.); bewusst nicht für alle (z. B. kein roter Vodafone-Knopf) */
body.anbieter-simyo {
	--akzent-hell:    #ff7a1a;
	--akzent:         #FF6600;
	--akzent-schatten: rgba(255,102,0,.38);
}

body {
	background: #f0f5ff;
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	font-size: .95rem;
	color: #1e293b;
}

/* Fuß bei kurzen Seiten ganz unten (Flex nur am body — Spalten/Formular bleiben unberührt, Box + Leiste schweben weiter) */
body.design-neu { display: flex; flex-direction: column; min-height: 100vh; }
body.design-neu > footer { margin-top: auto !important; }

/* Kopf + Fuß mit Verlauf */
header {
	background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 60%, #2563eb 100%);
	box-shadow: 0 2px 12px rgba(29,78,216,.35);
}
footer {
	background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 100%);
	color: rgba(255,255,255,.92);
	margin-top: 1rem;
}

/* ---------- Hero (schlank: ohne Foto, Logo links, auch am Handy nebeneinander) ---------- */
.hero-card {
	background: var(--verlauf);
	border-radius: 18px;
	padding: 1.25rem 1.5rem;
	margin-bottom: 1.5rem;
	box-shadow: 0 4px 24px rgba(29,78,216,.35);
}
.hero-inner { display: flex; align-items: center; gap: 1.25rem; }
.hero-logo-box {
	background: #fff;
	border-radius: 12px;
	width: 120px; height: 72px;
	padding: .5rem .75rem;
	flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	perspective: 400px;
	animation: logo-glow 2.5s ease-in-out infinite;
}
.hero-logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
@keyframes logo-glow {
	0%, 100% { box-shadow: 0 0 6px 2px rgba(96,165,250,.45); }
	50%      { box-shadow: 0 0 20px 7px rgba(96,165,250,.9); }
}
.hero-title { color: #fff; font-weight: 800; font-size: 1.4rem; letter-spacing: -.02em; line-height: 1.2; margin: 0 0 .35rem; }
.hero-sub   { color: rgba(255,255,255,.88); font-size: .92rem; line-height: 1.55; }
@media (max-width: 575.98px) {
	.hero-card { padding: .9rem 1rem; border-radius: 14px; margin-bottom: 1rem; }
	.hero-inner { gap: .85rem; align-items: flex-start; }
	.hero-logo-box { width: 76px; height: 50px; padding: .3rem .45rem; border-radius: 10px; }
	.hero-title { font-size: 1.05rem; margin-bottom: .2rem; }
	.hero-sub { font-size: .8rem; line-height: 1.45; }
}

/* Logo-Bewegungen (JS in t_aufladung.html.php wechselt alle 5 s die Klasse la…lj) */
@keyframes la { 0%{transform:rotateY(0deg)} 20%{transform:rotateY(180deg)} 40%{transform:rotateY(360deg)} 100%{transform:rotateY(360deg)} }
@keyframes lb { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
@keyframes lc { 0%,100%{transform:translateY(0) scale(1)} 18%{transform:translateY(-18px) scale(1.1)} 30%{transform:translateY(0) scale(1)} 44%{transform:translateY(-9px) scale(1.05)} 56%{transform:translateY(0) scale(1)} 66%{transform:translateY(-4px) scale(1.02)} 74%{transform:translateY(0) scale(1)} }
@keyframes ld { 0%,100%{transform:rotate(0deg)} 8%{transform:rotate(-9deg)} 18%{transform:rotate(9deg)} 28%{transform:rotate(-7deg)} 38%{transform:rotate(7deg)} 48%{transform:rotate(-4deg)} 58%{transform:rotate(4deg)} 68%{transform:rotate(-2deg)} 78%{transform:rotate(1deg)} 88%{transform:rotate(0deg)} }
@keyframes le { 0%,100%{transform:scale(1)} 14%{transform:scale(1.18)} 28%{transform:scale(1)} 42%{transform:scale(1.12)} 56%{transform:scale(1)} 70%{transform:scale(1.07)} 84%{transform:scale(1)} }
@keyframes lf { 0%,100%{transform:rotate(0deg)} 12%{transform:rotate(-14deg)} 28%{transform:rotate(11deg)} 44%{transform:rotate(-8deg)} 60%{transform:rotate(5deg)} 74%{transform:rotate(-2deg)} 86%{transform:rotate(1deg)} }
@keyframes lg { 0%,100%{transform:scale(1,1)} 18%{transform:scale(1.35,0.68)} 32%{transform:scale(0.78,1.22)} 48%{transform:scale(1.18,0.88)} 62%{transform:scale(0.94,1.06)} 78%{transform:scale(1.04,0.98)} 90%{transform:scale(1,1)} }
@keyframes lh { 0%{transform:rotateX(0deg)} 20%{transform:rotateX(180deg)} 40%{transform:rotateX(360deg)} 100%{transform:rotateX(360deg)} }
@keyframes li { 0%{transform:translateY(0)} 25%{transform:translateY(-11px)} 75%{transform:translateY(-11px)} 100%{transform:translateY(0)} }
@keyframes lj { 0%,100%{transform:scale(1)} 20%{transform:scale(1.35)} 40%{transform:scale(1)} 60%{transform:scale(1.2)} 80%{transform:scale(1)} }
.hero-logo-box img.la { animation: la 5s ease-in-out 1 forwards; transform-style: preserve-3d; }
.hero-logo-box img.lb { animation: lb 5s cubic-bezier(0.4,0,0.2,1) 1 forwards; }
.hero-logo-box img.lc { animation: lc 5s ease-in-out 1 forwards; }
.hero-logo-box img.ld { animation: ld 5s ease-in-out 1 forwards; }
.hero-logo-box img.le { animation: le 5s ease-in-out 1 forwards; }
.hero-logo-box img.lf { animation: lf 5s ease-in-out 1 forwards; }
.hero-logo-box img.lg { animation: lg 5s ease-in-out 1 forwards; }
.hero-logo-box img.lh { animation: lh 5s ease-in-out 1 forwards; transform-style: preserve-3d; }
.hero-logo-box img.li { animation: li 5s ease-in-out 1 forwards; }
.hero-logo-box img.lj { animation: lj 5s ease-in-out 1 forwards; }

/* ---------- Kästen (Bootstrap-Cards) im Step-Card-Stil ---------- */
.card {
	border: 0;
	border-radius: 16px;
	box-shadow: var(--karte-schatten) !important;
	overflow: hidden;   /* nur die Karte selbst — die schwebende Box ist das Eltern-Element (.sticky-top), das bleibt frei */
}
.card-header.bg-primary {
	background: var(--verlauf) !important;
	border-bottom: 0;
	padding: .85rem 1.25rem;
	font-weight: 700;
	font-size: .97rem !important;
	display: flex; align-items: center; gap: .65rem;
}
/* Symbol im Kopf als runder Knopf mit weißem Ring (wie step-num auf den Erklärbär-Seiten) */
.card-header.bg-primary > i.bi:first-child {
	width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
	margin: 0 !important;
	background: linear-gradient(135deg, #1e40af, #2563eb);
	color: #fff; font-size: .9rem;
	display: inline-flex; align-items: center; justify-content: center;
	box-shadow: 0 0 0 3px #fff, 0 2px 8px rgba(15,23,42,.35);
}
.card-body { padding: 1.25rem; }

/* „Ihre Bestellung“: etwas kräftiger hervorgehoben */
.card.border-primary { box-shadow: 0 0 0 2px #bfdbfe, 0 10px 30px rgba(29,78,216,.18) !important; }
.card.border-primary .card-header.bg-primary > i.bi:first-child { background: var(--akzent); }

/* graue Innen-Kästen (AGB, WhatsApp, …) */
.card .bg-light { background: #f8fafc !important; }
.card .border:not(.border-danger):not(.border-warning):not(.border-success) { border-color: #e2e8f0 !important; }

/* Eingabefelder */
.form-control, .form-select { border-color: #cbd5e1; border-radius: 10px; padding: .55rem .8rem; }
.form-control:focus, .form-select:focus { border-color: #60a5fa; box-shadow: 0 0 0 .2rem rgba(59,130,246,.18); }
.form-label { color: #1e293b; }
.form-check-input:checked { background-color: #1d4ed8; border-color: #1d4ed8; }

/* ---------- Paket-Kacheln ---------- */
.btn-outline-primary {
	--bs-btn-color: #1e3a8a;
	--bs-btn-border-color: #dbeafe;
	--bs-btn-hover-color: #1e3a8a;
	--bs-btn-hover-bg: #eff6ff;
	--bs-btn-hover-border-color: #93c5fd;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #1d4ed8;
	--bs-btn-active-border-color: #1d4ed8;
	background: #fff;
	border-width: 2px;
	border-radius: 12px;
	transition: transform .15s, box-shadow .15s, border-color .15s;
}
.btn-outline-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(29,78,216,.15); }
.btn-check:checked + .btn-outline-primary {
	background: var(--verlauf);
	border-color: #1d4ed8;
	color: #fff;
	box-shadow: 0 6px 18px rgba(29,78,216,.35);
}
.opt-check { background: var(--akzent); box-shadow: 0 0 0 2px #fff; }

/* Schieber (LEBARA/SIMYO) in Markenblau */
.opt-label-item.active, .opt-price-item.active { color: #1d4ed8; }
.opt-slider-fill { background: linear-gradient(90deg, #1e40af, #3b82f6); }
.opt-tick.active { background: #1d4ed8; }
.opt-slider-handle { border-color: #1d4ed8; }

/* Tabellen in Kästen (Bestellvorschau, Status …): ruhig, feine Linien, Summenzeile hellblau */
.card .table { --bs-table-striped-bg: #f8fafc; --bs-table-border-color: #eef2f7; margin-bottom: 0; }
.card .table td { padding-top: .7rem; padding-bottom: .7rem; vertical-align: middle; }
.card .table td:first-child { color: #64748b !important; font-weight: 500 !important; }
.card .table tr:last-child td { border-bottom: 0; }
.card .table .table-primary { --bs-table-bg: #eff6ff; --bs-table-striped-bg: #eff6ff; --bs-table-color: #1e3a8a; }
.card .table .table-primary td { color: #1e3a8a !important; font-weight: 800 !important; }

/* Hero mit Symbol statt Logo (Seiten ohne Anbieter) */
.hero-icon-box i { font-size: 2.2rem; color: var(--akzent); line-height: 1; }
.hero-ok .hero-icon-box i { color: #16a34a; font-size: 2.6rem; }
/* Fehler-Hero (Zahlung abgelehnt): Rot statt Blau */
.hero-card.hero-fehler { background: linear-gradient(135deg, #7f1d1d 0%, #b91c1c 60%, #ef4444 100%); box-shadow: 0 4px 24px rgba(185,28,28,.35); }
.hero-fehler .hero-icon-box { animation: logo-glow-rot 2.5s ease-in-out infinite; }
.hero-fehler .hero-icon-box i { color: #dc2626; }
@keyframes logo-glow-rot {
	0%, 100% { box-shadow: 0 0 6px 2px rgba(252,165,165,.45); }
	50%      { box-shadow: 0 0 20px 7px rgba(252,165,165,.9); }
}

/* Kastenköpfe mit fest eingetragenem altem Blau (style="background:#0D6EFD") wie die übrigen */
.card-header[style*="0D6EFD"] { background: var(--verlauf) !important; border-bottom: 0; padding: .85rem 1.25rem; display: flex; align-items: center; gap: .65rem; }
.card-header[style*="0D6EFD"] > i.bi:first-child {
	width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; margin: 0 !important;
	background: linear-gradient(135deg, #1e40af, #2563eb); color: #fff; font-size: .9rem;
	display: inline-flex; align-items: center; justify-content: center;
	box-shadow: 0 0 0 3px #fff, 0 2px 8px rgba(15,23,42,.35);
}

/* Blaue Knöpfe (Weiter zur Bezahlung, Zum Auflade-Status, E-Mail anfordern …) */
.btn-primary {
	background: var(--verlauf); border: 0; border-radius: 2rem; font-weight: 600;
	padding-left: 1.5rem; padding-right: 1.5rem;
	box-shadow: 0 4px 14px rgba(29,78,216,.3);
	transition: transform .15s, box-shadow .15s, filter .15s;
}
.btn-primary:hover, .btn-primary:focus { background: var(--verlauf); filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(29,78,216,.4); }
.btn-outline-primary.btn-sm { border-radius: 2rem; }

/* Hinweis-Kästen wie auf den Erklärbär-Seiten */
.alert-info    { background: #eff6ff; color: #1e40af; border: none; border-left: 4px solid #3b82f6; }
.alert-success { background: #f0fdf4; color: #166534; border: none; border-left: 4px solid #22c55e; }
.alert-warning { background: #fffbeb; color: #92400e; border: none; border-left: 4px solid #f59e0b; }

/* Preise */
.text-primary { color: #1d4ed8 !important; }

/* ---------- Bestell-Knopf in der Akzentfarbe (Grün, bei SIMYO Orange) ---------- */
form .btn-success {
	background: linear-gradient(135deg, var(--akzent-hell), var(--akzent));
	border: 0;
	border-radius: 2rem;
	color: #fff;
	box-shadow: 0 4px 14px var(--akzent-schatten);
	transition: transform .15s, box-shadow .15s, filter .15s;
}
form .btn-success:hover, form .btn-success:focus { background: linear-gradient(135deg, var(--akzent-hell), var(--akzent)); filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 6px 18px var(--akzent-schatten); color: #fff; }

/* ---------- Handy-Leiste unten (bleibt position:fixed aus screen.css) ---------- */
@media (max-width: 991.98px) {
	.mobile-sticky-btn {
		background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 100%);
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
		box-shadow: 0 -6px 20px rgba(15,23,42,.25);
		border-radius: 16px 16px 0 0;
	}
	/* damit der Fuß nicht hinter der Leiste verschwindet */
	body.design-neu:has(.mobile-sticky-btn) { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* Hinweise */
.alert         { border-radius: 12px; }
.alert-danger  { background: #fef2f2; color: #991b1b; border: none; border-left: 4px solid #dc2626; }

/* Eintritts-Animation — NUR für Hero + Kästen, nie für Spalten/Formular (sonst klebt die Handy-Leiste nicht mehr) */
@keyframes riseIn {
	from { opacity: 0; transform: translateY(30px) scale(.98); }
	to   { opacity: 1; transform: none; }
}
.rise, form .col-lg-8 > .card { animation: riseIn .6s ease both; }
form .col-lg-8 > .card:nth-of-type(2) { animation-delay: .1s; }
form .col-lg-8 > .card:nth-of-type(3) { animation-delay: .2s; }
form .col-lg-8 > .card:nth-of-type(4) { animation-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
	.rise, .card, .hero-logo-box, .hero-logo-box img { animation: none !important; }
}

/* ---------- Statusseite: Status-Verlauf als Zeitleiste ---------- */
.zeitleiste { position: relative; padding-left: .25rem; }
.zl-punkt { position: relative; display: flex; gap: 1rem; padding-bottom: 1.25rem; }
.zl-punkt:last-child { padding-bottom: 0; }
.zl-punkt:not(:last-child)::before {   /* Verbindungslinie zum nächsten Punkt */
	content: ''; position: absolute; left: 17px; top: 38px; bottom: 2px; width: 3px; border-radius: 2px; background: #dbeafe;
}
.zl-icon {
	width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; position: relative; z-index: 1;
	display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: #fff;
	box-shadow: 0 0 0 3px #fff, 0 2px 8px rgba(15,23,42,.2);
}
.zl-inhalt { flex: 1; min-width: 0; padding-top: .1rem; }
.zl-datum { font-size: .8rem; font-weight: 600; color: #64748b; letter-spacing: .01em; }
.zl-text { font-weight: 600; color: #1e293b; }
.zl-info { font-size: .88rem; color: #475569; margin-top: .25rem; white-space: pre-line; }
.zl-badge { background: #fef3c7; color: #92400e; font-weight: 600; }
.zl-ok      .zl-icon { background: linear-gradient(135deg, #22c55e, #16a34a); }
.zl-geplant .zl-icon { background: #fff; color: #d97706; box-shadow: 0 0 0 3px #fde68a, 0 2px 8px rgba(15,23,42,.12); }
.zl-geplant .zl-text { color: #475569; }
.zl-warnung .zl-icon { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.zl-fehler  .zl-icon { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.zl-fehler  .zl-text { color: #b91c1c; }
.zl-storno  .zl-icon { background: linear-gradient(135deg, #94a3b8, #475569); }
.zl-storno  .zl-text { color: #475569; text-decoration: line-through; text-decoration-color: rgba(71,85,105,.5); }
/* Kunden-Hinweis (aus order_edit): gelber Kasten */
.zl-hinweis .zl-icon { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.zl-hinweis .zl-inhalt { background: #fffbeb; border-left: 4px solid #f59e0b; border-radius: 10px; padding: .6rem .85rem; }
.zl-hinweis .zl-info { color: #78350f; font-weight: 500; }

/* ---------- Alte Seitenköpfe (Karte mit fest eingetragener Farbe: Start, 404, Rückmeldung, Stripe, FAQ …) automatisch als Hero ---------- */
.card.border-0:has(> .card-body.rounded[style*="background"]) { background: transparent; box-shadow: none !important; overflow: visible; margin-bottom: 1.5rem !important; }
.card.border-0 > .card-body.rounded[style*="background"] {
	background: var(--verlauf) !important;
	border-radius: 18px !important;
	padding: 1.25rem 1.5rem;
	box-shadow: 0 4px 24px rgba(29,78,216,.35);
	animation: riseIn .6s ease both;
}
.card.border-0 > .card-body.rounded[style*="#198754"] { background: linear-gradient(135deg, #14532d 0%, #15803d 60%, #22c55e 100%) !important; box-shadow: 0 4px 24px rgba(21,128,61,.35); }
.card.border-0 > .card-body.rounded[style*="#c0392b"] { background: linear-gradient(135deg, #7f1d1d 0%, #b91c1c 60%, #ef4444 100%) !important; box-shadow: 0 4px 24px rgba(185,28,28,.35); }
.card.border-0 > .card-body.rounded[style*="#6c757d"] { background: linear-gradient(135deg, #334155 0%, #475569 60%, #94a3b8 100%) !important; box-shadow: 0 4px 24px rgba(51,65,85,.3); }
/* weißes Symbol-Kästchen wie das Logo-Kästchen im Hero (leuchtet) */
.card-body.rounded[style*="background"] .bg-white.rounded-3 { width: 120px !important; height: 72px !important; border-radius: 12px !important; animation: logo-glow 2.5s ease-in-out infinite; }
.card-body.rounded[style*="background"] h1 { font-weight: 800 !important; letter-spacing: -.02em; }
.card-body.rounded[style*="background"] .text-white-50 { color: rgba(255,255,255,.88) !important; font-size: .92rem; }
@media (max-width: 575.98px) {
	.card.border-0 > .card-body.rounded[style*="background"] { padding: .9rem 1rem; border-radius: 14px !important; }
	.card-body.rounded[style*="background"] .bg-white.rounded-3 { width: 76px !important; height: 50px !important; }
	.card-body.rounded[style*="background"] .bg-white.rounded-3 i { font-size: 1.6rem !important; }
	.card-body.rounded[style*="background"] h1 { font-size: 1.05rem !important; }
}

/* FAQ-Akkordeon wie auf den Erklärbär-Seiten (hellblau statt Bootstrap-Blau) */
.accordion { --bs-accordion-border-color: #dbeafe; --bs-accordion-border-radius: 12px; --bs-accordion-inner-border-radius: 12px; }
.accordion-button { background: #eff6ff; color: #1e3a8a; font-weight: 600; }
.accordion-button:not(.collapsed) { background: #bfdbfe; color: #1e3a8a; box-shadow: none; }
.accordion-button:not(.collapsed)::after { filter: none; }
.accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(59,130,246,.18); }