/*
 * Online Pendel – Stylesheet
 * Farben: ausschließlich CSS-Variablen von astroberater.com
 *   --accent:     #C56A78  Primärfarbe / Buttons
 *   --contrast:   #4B3532  Haupttext
 *   --contrast-2: #545454  Sekundärtext
 *   --contrast-3: #bdbdbd  Rahmen / dezent
 *   --base:       #f0f0f0  heller Hintergrund
 *   --base-2:     #fcf9ee  warmes Creme
 *   --base-3:     #fff     weiß
 *   --bg-color-1: #f8f8f8  Seitenhintergrund
 */

/* ============================================================
   1. WRAPPER — transparent, nahtlos in Seite
   ============================================================ */
.online-pendel-wrapper {
	position:    relative;
	width:       100%;
	max-width:   700px;
	margin:      0 auto;
	background:  transparent;
	padding:     0;
	color:       var(--contrast);
	font-family: var(--gp-font--lato, 'Lato', sans-serif);
	font-size:   18px;
	font-weight: 400;
	line-height: 1.55;
	text-align:  center;
}

/* ============================================================
   2. PHASEN-SYSTEM
   ============================================================ */
.pendel-phase {
	display:   none;
	width:     100%;
	animation: phaseIn 0.4s ease backwards;
}

.pendel-phase.is-active  { display: block; }

.pendel-phase--active {
	position:        relative;
	display:         none;
	flex-direction:  column;
	align-items:     center;
	text-align:      center;
	width:           100%;
}

.pendel-phase--active.is-active { display: flex; }

@keyframes phaseIn {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0);   }
}

/* ============================================================
   3. PHASE 1a – SENSOR-PERMISSION
   ============================================================ */
.pendel-permission-inner {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            1.25rem;
	padding:        1rem 0;
}

.pendel-hold-instruction {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            0.5rem;
}

.pendel-hold-svg {
	width:  110px;
	height: auto;
	color:  var(--accent);
}

.pendel-hold-label {
	font-size:      0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color:          var(--accent);
	margin:         0;
	font-weight:    700;
}

.pendel-permission-text {
	font-size:   1rem;
	color:       var(--contrast-2);
	max-width:   360px;
	line-height: 1.6;
	margin:      0;
	font-style:  italic;
}

/* ============================================================
   4a. PHASE 1b – KALIBRIERUNG
   ============================================================ */
.pendel-calibration-inner {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            1rem;
	padding:        1rem 0;
}

.pendel-calibration-title {
	font-family:  var(--gp-font--platypi, 'Platypi', Georgia, serif);
	font-size:    1.25rem;
	font-weight:  600;
	color:        var(--contrast);
	margin:       0;
}

.pendel-live-phone-wrap {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            0.6rem;
}

.pendel-live-phone-svg {
	width:   140px;
	height:  auto;
	display: block;
}

.pendel-calib-status {
	display:       flex;
	align-items:   center;
	gap:           0.5rem;
	padding:       0.4rem 1rem;
	border-radius: 20px;
	background:    var(--base-3);
	border:        1px solid var(--contrast-3);
	transition:    border-color 0.3s ease;
}

.pendel-calib-status[data-state="ok"]   { border-color: #3a8a5a; }
.pendel-calib-status[data-state="warn"] { border-color: #c08030; }
.pendel-calib-status[data-state="err"]  { border-color: #b05050; }

.pendel-calib-dot {
	width:         8px;
	height:        8px;
	border-radius: 50%;
	background:    var(--contrast-3);
	flex-shrink:   0;
	transition:    background 0.3s ease;
}

.pendel-calib-status[data-state="ok"]   .pendel-calib-dot { background: #3a8a5a; }
.pendel-calib-status[data-state="warn"] .pendel-calib-dot { background: #c08030; }
.pendel-calib-status[data-state="err"]  .pendel-calib-dot { background: #b05050; }

.pendel-calib-label {
	font-size:  0.85rem;
	color:      var(--contrast-2);
	transition: color 0.3s ease;
}

.pendel-calib-status[data-state="ok"] .pendel-calib-label { color: #3a8a5a; }

.pendel-calib-ring { width: 44px; height: 44px; }

.pendel-calib-ring circle:last-child { transition: stroke-dashoffset 0.1s linear; }

.pendel-calib-hint {
	font-size:  1rem;
	color:      var(--contrast-2);
	max-width:  320px;
	margin:     0;
	font-style: italic;
}

/* ============================================================
   5. BUTTONS — exakt wie astroberater.com
   ============================================================ */
.pendel-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	border:          none;
	border-radius:   5px;
	cursor:          pointer;
	font-family:     var(--gp-font--lato, 'Lato', sans-serif);
	font-size:       18px;
	font-weight:     400;
	text-decoration: none;
	transition:      background 0.3s ease, opacity 0.3s ease;
	padding:         10px 20px;
}

.pendel-btn--primary {
	background: var(--accent);
	color:      var(--base-3);
}

.pendel-btn--primary:hover,
.pendel-btn--primary:focus-visible {
	opacity: 0.88;
}

.pendel-btn--ghost {
	background: transparent;
	color:      var(--contrast-2);
	border:     0.8px solid var(--contrast-3);
	font-size:  16px;
}

.pendel-btn--ghost:hover,
.pendel-btn--ghost:focus-visible {
	border-color: var(--accent);
	color:        var(--accent);
}

.pendel-btn--cta {
	background: var(--accent);
	color:      var(--base-3);
	padding:    12px 16px;
	font-size:  18px;
	width:      100%;
}

.pendel-btn--cta:hover,
.pendel-btn--cta:focus-visible {
	opacity: 0.88;
}

.pendel-btn:focus-visible {
	outline:        2px solid var(--accent);
	outline-offset: 3px;
}

/* ============================================================
   6. PHASE 2 – PENDEL-ANIMATION
   ============================================================ */

/* SVG-Farben über CSS-Custom-Properties */
.online-pendel-wrapper {
	--pendel-mount:    #7a5a40;
	--pendel-gold:     #b89568;
	--pendel-aura:     var(--accent);
}

.pendel-canvas-wrapper {
	width:      100%;
	max-width:  320px;
	margin:     0 auto;
	flex-shrink: 0;
}

.pendel-svg {
	width:        100%;
	height:       auto;
	display:      block;
	touch-action: none;
}

.pendel-arm  { transition: none; }
.pendel-aura { transition: opacity 0.2s ease, rx 0.3s ease; }

.pendel-progress-wrap {
	width:      100%;
	text-align: center;
	margin-top: 1rem;
}

.pendel-progress-bar {
	width:         100%;
	height:        3px;
	background:    var(--base);
	border-radius: 2px;
	overflow:      hidden;
}

.pendel-progress-fill {
	height:        100%;
	width:         0%;
	background:    var(--accent);
	border-radius: 2px;
	transition:    width 0.5s ease;
}

.pendel-progress-label {
	display:    block;
	margin-top: 0.5rem;
	font-size:  0.9rem;
	color:      var(--contrast-2);
	font-style: italic;
}

.pendel-fallback-hint {
	font-size:  0.9rem;
	color:      var(--contrast-2);
	margin-top: 0.5rem;
	min-height: 1.2em;
}

/* ============================================================
   7. PHASE 3 – ERGEBNIS
   ============================================================ */
.pendel-result-inner {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            1.25rem;
	padding:        1rem 0;
}


.online-pendel-wrapper .pendel-result-badge,
.online-pendel-wrapper .pendel-result-badge * {
	font-family:  var(--gp-font--platypi, 'Platypi', Georgia, serif) !important;
	font-size:    3rem !important;
	font-weight:  600 !important;
	line-height:  1.1 !important;
	animation:    badgeIn 0.4s 0.15s ease both;
}

.pendel-result-badge--yes     { color: #3a8a5a; }
.pendel-result-badge--no      { color: #b05050; }
.pendel-result-badge--unclear { color: var(--accent); }

@keyframes badgeIn {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0);   }
}

.pendel-result-text {
	font-size:   1rem;
	color:       var(--contrast-2);
	line-height: 1.65;
	max-width:   380px;
	margin:      0;
}

.pendel-cta-box {
	width:          100%;
	background:     var(--base-3);
	border:         0.8px solid var(--contrast-3);
	border-radius:  5px;
	padding:        1.5rem;
	display:        flex;
	flex-direction: column;
	gap:            1rem;
	animation:      ctaIn 0.5s 0.3s ease backwards;
	max-width:      480px;
}

@keyframes ctaIn {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0);    }
}

.pendel-cta-headline {
	font-family:  var(--gp-font--platypi, 'Platypi', Georgia, serif);
	font-size:    1rem;
	color:        var(--contrast);
	line-height:  1.6;
	margin:       0;
	font-weight:  400;
	font-style:   italic;
}

.pendel-restart-btn {
	font-size:  0.9rem;
	padding:    8px 16px;
	opacity:    0.65;
	margin-top: 0.25rem;
}

.pendel-restart-btn:hover { opacity: 1; }

/* ============================================================
   8. QR-CODE PHASE
   ============================================================ */
.pendel-qr-inner {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            1.25rem;
	padding:        1rem 0;
}

.pendel-qr-icon {
	width:   48px;
	height:  48px;
	color:   var(--accent);
	opacity: 0.65;
}

.pendel-qr-icon svg { width: 100%; height: 100%; }

.pendel-qr-title {
	font-family:  var(--gp-font--platypi, 'Platypi', Georgia, serif);
	font-size:    clamp(1.1rem, 3vw, 1.4rem);
	font-weight:  600;
	color:        var(--contrast);
	margin:       0;
}

.pendel-qr-description {
	font-size:   1rem;
	color:       var(--contrast-2);
	line-height: 1.65;
	max-width:   380px;
	margin:      0;
	font-style:  italic;
}

.pendel-qr-code-wrap {
	background:    var(--base-3);
	border:        0.8px solid var(--contrast-3);
	border-radius: 5px;
	padding:       1.25rem;
}

.pendel-qr-container {
	min-width:       160px;
	min-height:      160px;
	display:         flex;
	align-items:     center;
	justify-content: center;
}

.pendel-qr-container canvas,
.pendel-qr-container img {
	border-radius: 4px;
	display:       block;
}

.pendel-qr-loading {
	font-size:  0.9rem;
	color:      var(--contrast-2);
	font-style: italic;
}

.pendel-qr-url {
	font-size:  0.72rem;
	color:      var(--contrast-3);
	margin:     0;
	word-break: break-all;
	max-width:  320px;
}

.pendel-qr-fallback-link {
	color:           var(--accent);
	text-decoration: underline;
}

/* ============================================================
   9. RESPONSIVE
   ============================================================ */
@media (max-width: 600px) {
	.online-pendel-wrapper { font-size: 16px; }
	.pendel-btn            { font-size: 16px; }
}

/* ============================================================
  10. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.pendel-phase,
	.pendel-result-icon,
	.pendel-result-badge,
	.pendel-cta-box { animation: none; }
}