/* ==========================================
   HERMYON PWA — Onboarding & Success Screens
   homegarden.bio Design-System 2026
   (Bone + Grain · Instrument Serif italic · Moos & Gold · JetBrains Mono)
   ------------------------------------------
   Z-index: .screen 9999 · .loading-overlay 10000 (in styles.css)
   ========================================== */

.screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    color: #161a14;
    background:
        radial-gradient(620px 460px at 85% -8%, rgba(201,138,46,.13), transparent 60%),
        radial-gradient(520px 460px at -10% 28%, rgba(74,122,61,.12), transparent 60%),
        radial-gradient(420px 320px at 50% 112%, rgba(201,138,46,.07), transparent 60%),
        #f4efe4;
    animation: screenFadeIn .45s cubic-bezier(.2,.7,.1,1);
}

/* Grain-Textur (wie homegarden.bio body::before) */
.screen::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: .3;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.08  0 0 0 0 0.08  0 0 0 0 0.05  0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

@keyframes screenFadeIn { from { opacity: 0; } to { opacity: 1; } }

.onboarding-container,
.success-container {
    position: relative;
    z-index: 2;
    padding: 40px 30px 40px;
    max-width: 380px;
    width: 90%;
    text-align: center;
}

/* ---- Leaf-Mark ---- */
.ob-mark {
    width: 60px;
    height: 60px;
    margin: 0 auto 22px;
    border-radius: 17px;
    background: #ece6d6;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px rgba(22,26,20,.10), 0 8px 20px rgba(22,26,20,.10);
    animation: markAppear .6s cubic-bezier(.16,1,.3,1);
}
.ob-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }

@keyframes markAppear {
    from { opacity: 0; transform: scale(.85) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ---- Headline (Instrument Serif italic, Gold-Highlight) ---- */
.onboarding-container h1 {
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 2.4rem;
    line-height: .98;
    letter-spacing: -.025em;
    color: #161a14;
}

.onboarding-container h1 b {
    font-style: normal;
    font-weight: 400;
    color: #c98a2e;
}

.subtitle {
    font-family: 'Instrument Sans', sans-serif;
    font-size: .98rem;
    line-height: 1.6;
    color: #2a2e25;
    margin: 16px auto 0;
    max-width: 270px;
}

/* ---- Scan-Karte ---- */
.scan-card {
    margin-top: 34px;
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    padding: 18px;
    background: rgba(255,255,255,.45);
    border: 1px solid rgba(22,26,20,.16);
    border-radius: 16px;
}

.scan-card-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #23381f;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scan-card-text strong {
    display: block;
    font-family: 'Instrument Sans', sans-serif;
    font-size: .92rem;
    font-weight: 600;
    color: #161a14;
}

.scan-card-text span {
    display: block;
    margin-top: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6a6a5e;
}

/* ---- Divider ---- */
.scan-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 14px;
}

.scan-divider::before,
.scan-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(22,26,20,.09);
}

.scan-divider span {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #6a6a5e;
    white-space: nowrap;
}

/* ---- ID-Eingabe ---- */
.id-field {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,.5);
    border: 1px solid rgba(22,26,20,.16);
    border-radius: 12px;
    padding: 4px;
    transition: border-color .25s cubic-bezier(.2,.7,.1,1), box-shadow .25s cubic-bezier(.2,.7,.1,1);
}

.id-field:focus-within {
    border-color: #c98a2e;
    box-shadow: 0 0 0 3px rgba(201,138,46,.13);
}

.device-id-input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    padding: 12px 14px;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 5px;
    color: #161a14;
}

.device-id-input::placeholder {
    color: #a3a094;
    letter-spacing: 5px;
}

.help-text {
    display: block;
    margin-top: 11px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #6a6a5e;
}

/* ---- Primary Button (Moos) ---- */
.primary-button {
    width: 100%;
    margin-top: 24px;
    padding: 16px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    background: #23381f;
    color: #f4efe4;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: .01em;
    transition: background .25s cubic-bezier(.2,.7,.1,1), transform .15s ease;
}

.primary-button:hover { background: #15241c; }
.primary-button:active { transform: translateY(1px); }
.primary-button:disabled { opacity: .5; cursor: not-allowed; }
.primary-button:focus-visible { outline: 2px solid #c98a2e; outline-offset: 2px; }

/* ---- Fehlermeldung ---- */
.error-message {
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: 10px;
    background: rgba(196,105,74,.1);
    border: 1px solid rgba(196,105,74,.28);
    color: #9a4a30;
    font-family: 'Instrument Sans', sans-serif;
    font-size: .85rem;
    animation: errorShake .4s ease;
}

@keyframes errorShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px); }
    40% { transform: translateX(7px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

/* ---- Support-Link ---- */
.support-link-container {
    margin-top: 20px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #6a6a5e;
}

.support-link-container a {
    color: #c98a2e;
    text-decoration: none;
    font-weight: 500;
}

.support-link-container a:hover { color: #a9711f; }
.support-link-container a:focus-visible { outline: 2px solid #c98a2e; outline-offset: 2px; }

/* ---- Install-Button (Outline) ---- */
.onboarding-install-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    padding: 11px 22px;
    border-radius: 999px;
    border: 1px solid rgba(22,26,20,.16);
    background: rgba(255,255,255,.4);
    color: #2a2e25;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}

.onboarding-install-button:hover {
    border-color: rgba(22,26,20,.3);
    background: rgba(255,255,255,.7);
}

.onboarding-install-button svg { color: #2f5028; }

/* ---- Success-Screen ---- */
.success-icon {
    margin-bottom: 20px;
    animation: successPop .55s cubic-bezier(.16,1,.3,1);
}

@keyframes successPop {
    from { opacity: 0; transform: scale(.5); }
    70% { transform: scale(1.08); }
    to { opacity: 1; transform: scale(1); }
}

.success-container h2 {
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 2rem;
    letter-spacing: -.02em;
    color: #161a14;
    margin-bottom: 10px;
}

.success-container p {
    font-family: 'Instrument Sans', sans-serif;
    font-size: .95rem;
    color: #2a2e25;
    margin-bottom: 24px;
}

.success-container strong {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    letter-spacing: .04em;
    color: #23381f;
}

.success-container b { font-style: normal; font-weight: 400; color: #c98a2e; }

/* kleine „Verbunden mit XX-…"-Zeile unter dem Dank */
.welcome-device {
    font-size: .8rem !important;
    color: #6a6a5e !important;
    margin-top: -12px !important;
    margin-bottom: 22px !important;
}
.welcome-device strong { color: #2f5028; }

/* Icon auf dem Welcome-Screen sanft einpoppen */
.success-pop { animation: successPop .55s cubic-bezier(.16,1,.3,1); }

/* ---- Mobile ---- */
@media (max-width: 768px) {
    .onboarding-container,
    .success-container { max-width: 100%; width: 100%; padding: 24px 24px 28px; }
    .ob-mark { width: 56px; height: 56px; margin-bottom: 16px; border-radius: 16px; }
    .onboarding-container h1 { font-size: 2.05rem; }
    .subtitle { font-size: .9rem; margin-top: 13px; }
    .scan-card { margin-top: 26px; padding: 15px; }
    .scan-divider { margin: 18px 0 12px; }
    .device-id-input { font-size: 1.1rem; padding: 11px 12px; }
    .primary-button { margin-top: 20px; padding: 15px; }
    .success-container h2 { font-size: 1.7rem; }
}

/* ---- Accessibility ---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}