/* qr64.de — eigenes Design über Bootstrap 5.3.
   Dark Mode automatisch (OS), Orange-Akzent. Schrift: Manrope (modern, geometrisch). */

/* --- Manrope (lokal gehostet, Latin-Subset, CSP-konform) --- */
@font-face { font-family:'Manrope'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/manrope-400.woff2') format('woff2'); }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/manrope-500.woff2') format('woff2'); }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/manrope-600.woff2') format('woff2'); }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/manrope-700.woff2') format('woff2'); }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:800; font-display:swap; src:url('../fonts/manrope-800.woff2') format('woff2'); }

:root {
    --qr-orange: #f59c1a;
    --qr-orange-rgb: 245, 156, 26;
    --qr-orange-600: #dc8c17;
    --qr-orange-700: #c47d15;

    /* Moderne Schrift für die gesamte Oberfläche */
    --bs-body-font-family: 'Manrope', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

body { font-family: var(--bs-body-font-family); }
h1, h2, h3, h4, h5, h6, .navbar-brand, .site-brand, .brand-mark, .hero-headline {
    font-family: var(--bs-body-font-family);
    letter-spacing: -0.02em;
}

/* Bootstrap-Primärfarbe auf Orange mappen */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-primary: var(--qr-orange);
    --bs-primary-rgb: var(--qr-orange-rgb);
    --bs-link-color: var(--qr-orange);
    --bs-link-color-rgb: var(--qr-orange-rgb);
    --bs-link-hover-color: var(--qr-orange-600);
    --bs-link-hover-color-rgb: 220, 140, 23;
}

/* Dark-Mode Feinschliff */
[data-bs-theme="dark"] {
    --bs-body-bg: #121316;
    --bs-body-color: #e6e6e9;
    --bs-tertiary-bg: #1c1e22;
    --bs-secondary-bg: #24272c;
    --bs-border-color: #2c2f35;
}

html {
    scroll-padding-top: 74px; /* sticky Header nicht über Anker-Zielen */
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.btn-primary {
    --bs-btn-bg: var(--qr-orange);
    --bs-btn-border-color: var(--qr-orange);
    --bs-btn-hover-bg: var(--qr-orange-600);
    --bs-btn-hover-border-color: var(--qr-orange-600);
    --bs-btn-active-bg: var(--qr-orange-700);
    --bs-btn-active-border-color: var(--qr-orange-700);
    --bs-btn-disabled-bg: var(--qr-orange);
    --bs-btn-disabled-border-color: var(--qr-orange);
    color: #fff;
}
.btn-primary:hover { color: #fff; }

.btn-outline-primary {
    --bs-btn-color: var(--qr-orange);
    --bs-btn-border-color: var(--qr-orange);
    --bs-btn-hover-bg: var(--qr-orange);
    --bs-btn-hover-border-color: var(--qr-orange);
    --bs-btn-active-bg: var(--qr-orange-600);
    --bs-btn-active-border-color: var(--qr-orange-600);
}

a { text-decoration: none; }
a:hover { text-decoration: underline; }

.text-orange { color: var(--qr-orange) !important; }
.bg-orange { background-color: var(--qr-orange) !important; }

/* Wortmarke */
.brand-mark {
    font-weight: 800;
    letter-spacing: -0.02em;
}
.brand-mark .brand-64 { color: var(--qr-orange); }

/* Themenabhängiges Logo (Wortmarke). Standard/Light: dunkles Logo;
   Dark Mode: helles Logo. Umschaltung rein per CSS über data-bs-theme. */
.brand-logo { display: inline-flex; align-items: center; }
.brand-logo img { height: 28px; width: auto; display: block; }
.brand-logo .logo-dark { display: none; }
[data-bs-theme="dark"] .brand-logo .logo-light { display: none; }
[data-bs-theme="dark"] .brand-logo .logo-dark  { display: block; }
/* Der öffentliche Header ist immer dunkel -> immer das helle Logo. */
.site-brand-logo { height: 29px; width: auto; display: block; }
.brand-logo-lg img { height: 40px; }
/* Auth-Logo über dem Formular */
.brand-logo-auth img { height: 34px; }

/* Handy: Logos kompakter */
@media (max-width: 575.98px) {
    .brand-logo img,
    .site-brand-logo { height: 24px; }
    .brand-logo-lg img { height: 32px; }
    .brand-logo-auth img { height: 30px; }
}

/* Öffentlicher Header (amzly-Stil): durchgehend dunkler, schlanker Balken.
   Unabhängig vom Body-Theme immer dunkel — ein gebrandeter Top-Bar. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: #131417;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.site-header__inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    height: 62px;
}
.site-brand {
    font-weight: 800;
    font-size: 1.4rem;
    letter-spacing: -0.03em;
    color: #fff;
    white-space: nowrap;
}
.site-brand:hover { color: #fff; text-decoration: none; opacity: .95; }
.site-brand .brand-64 { color: var(--qr-orange); }
.site-brand .brand-tld { color: #8a8f98; font-weight: 700; }

.site-nav {
    display: flex;
    align-items: center;
    gap: .15rem;
}
.site-nav a {
    color: #c7cbd1;
    padding: .4rem .85rem;
    border-radius: .5rem;
    font-weight: 500;
    font-size: .95rem;
    line-height: 1.2;
}
.site-nav a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.07);
    text-decoration: none;
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-left: auto;
}
.site-header .theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: .55rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #c7cbd1;
    transition: color .15s, border-color .15s;
}
.site-header .theme-btn:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.32);
}
.site-header .btn-primary {
    font-weight: 600;
    padding: .45rem 1.1rem;
}

/* Öffentliches, zentriertes Ein-Spalten-Layout (Scan/Login/Claim) */
.public-shell {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}
.public-card {
    width: 100%;
    max-width: 34rem;
}

/* Sidebar-Layout (eingeloggter Bereich) */
.app-wrapper { flex: 1; display: flex; width: 100%; }
.app-sidebar {
    width: 260px;
    flex-shrink: 0;
    background: var(--bs-tertiary-bg);
    border-right: 1px solid var(--bs-border-color);
}
.app-sidebar .nav-link {
    color: var(--bs-body-color);
    border-radius: .5rem;
    padding: .55rem .8rem;
    margin-bottom: .15rem;
    display: flex;
    align-items: center;
    gap: .6rem;
}
.app-sidebar .nav-link:hover { background: var(--bs-secondary-bg); text-decoration: none; }
.app-sidebar .nav-link.active {
    background: rgba(var(--qr-orange-rgb), .15);
    color: var(--qr-orange);
    font-weight: 600;
}
.app-main { flex: 1; min-width: 0; padding: 1.5rem; }
@media (min-width: 992px) {
    .app-main { padding: 2rem 2.5rem; }
}

/* Hero — Split-Layout: links dicke Message, rechts Info-Panel */
.hero {
    padding: 4rem 0 3.5rem;
}
.hero-headline {
    font-weight: 800;
    font-size: clamp(2.2rem, 5.5vw, 3.6rem);
    letter-spacing: -0.03em;
    line-height: 1.05;
    text-wrap: balance;
    margin: 0;
}
.hero-headline .accent { color: var(--qr-orange); }
.hero-lead { font-size: 1.15rem; color: var(--bs-secondary-color); }

/* Rechte Hero-Spalte: ohne Hintergrund-Card, schlicht und modern.
   Auf großen Screens dezenter Trenner links für Struktur. */
.hero-info { padding: 0; }
@media (min-width: 992px) {
    .hero-info {
        padding-left: 2.25rem;
        border-left: 1px solid var(--bs-border-color);
    }
}
.hero-info h2 { font-weight: 700; }
.hero-points { list-style: none; padding: 0; margin: 1.1rem 0 0; }
.hero-points li {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    padding: .6rem 0;
}
.hero-points .bi {
    color: var(--qr-orange);
    margin-top: .1rem;
    font-size: 1.15rem;
    flex-shrink: 0;
}

/* Pricing-Cards */
.price-card {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 1.1rem;
    padding: 2rem 1.75rem;
    transition: transform .15s, box-shadow .15s;
}
.price-card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0,0,0,.12); }
.price-card.featured {
    border-color: var(--qr-orange);
    box-shadow: 0 0 0 1px var(--qr-orange), 0 16px 44px rgba(var(--qr-orange-rgb), .14);
}
.price-card.featured:hover { transform: translateY(-6px); }
.price-badge {
    position: absolute;
    top: -.85rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--qr-orange);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: .32rem .9rem;
    border-radius: 2rem;
    white-space: nowrap;
}
.price-name { font-weight: 700; font-size: 1.05rem; margin-bottom: .5rem; }
.price-amount { font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.price-period { color: var(--bs-secondary-color); font-size: .9rem; margin-top: .4rem; min-height: 1.2rem; }
.price-features { list-style: none; padding: 0; margin: 1.4rem 0; flex: 1; }
.price-features li { display: flex; gap: .6rem; padding: .45rem 0; font-size: .95rem; }
.price-features .bi { color: var(--qr-orange); margin-top: .15rem; flex-shrink: 0; }

.feature-icon {
    width: 3rem; height: 3rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: .9rem;
    background: rgba(var(--qr-orange-rgb), .12);
    color: var(--qr-orange);
    font-size: 1.5rem;
}

.category-badge {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .35rem .75rem; border-radius: 2rem;
    background: rgba(var(--qr-orange-rgb), .12);
    color: var(--qr-orange); font-weight: 600;
}

.info-block {
    white-space: normal;
    background: var(--bs-tertiary-bg);
    border-left: 3px solid var(--qr-orange);
    padding: 1rem 1.25rem;
    border-radius: .5rem;
}

.qr-preview { max-width: 220px; border-radius: .75rem; background:#fff; padding:.5rem; }

.footer {
    border-top: 1px solid var(--bs-border-color);
    padding: 1.5rem 0;
    font-size: .9rem;
}

/* Wartungsmodus: drehende Zahnräder */
@keyframes qr-spin      { to { transform: rotate(360deg); } }
@keyframes qr-spin-rev  { to { transform: rotate(-360deg); } }
.gears {
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    color: var(--qr-orange);
    line-height: 1;
    font-size: 4.5rem;
}
.gears .gear-1 { display: inline-block; animation: qr-spin 5s linear infinite; }
.gears .gear-2 {
    display: inline-block;
    font-size: .62em;
    margin-left: -.12em;
    margin-top: .55em;
    opacity: .75;
    animation: qr-spin-rev 3.5s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    .gears .gear-1, .gears .gear-2 { animation: none; }
}

.status-dot { width:.6rem; height:.6rem; border-radius:50%; display:inline-block; margin-right:.35rem; }
.status-active   { background:#22c55e; }
.status-paused   { background:#eab308; }
.status-unclaimed{ background:#64748b; }

/* ============================================================
   Smartphone-Optimierungen (Fokus ab Anmeldung – 90% mobil)
   ============================================================ */

/* Mobile Topbar (Dashboard) klebt oben, damit das Menü immer erreichbar ist */
.navbar.d-lg-none {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--bs-tertiary-bg);
}

@media (max-width: 575.98px) {
    /* Öffentliches Ein-Spalten-Layout: oben ausrichten, Safe-Area beachten */
    .public-shell {
        align-items: flex-start;
        padding: 1.25rem .9rem calc(1.5rem + env(safe-area-inset-bottom));
    }
    .public-card { max-width: 100%; }

    /* Eingeloggter Bereich: mehr Platz nutzen, Safe-Area unten */
    .app-main {
        padding: 1rem;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }

    /* Karten-Innenabstände etwas kompakter */
    .card-body.p-4, .card-body.p-md-5 { padding: 1.25rem !important; }

    /* Komfortable Tap-Ziele (Apple/Google-Richtwert 44px) */
    .btn { min-height: 44px; }
    .btn-sm { min-height: 38px; }

    /* 16px Schriftgröße verhindert automatisches iOS-Zoom beim Fokus */
    .form-control, .form-select { min-height: 46px; font-size: 1rem; }
    .form-control-lg { min-height: 52px; }

    /* Tab-Leisten horizontal scrollbar statt umbrechen */
    .nav-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: .35rem;
    }
    .nav-pills::-webkit-scrollbar { display: none; }
    .nav-pills .nav-link { white-space: nowrap; }

    /* Hero kompakter, Trenner der rechten Spalte entfällt (steht ohnehin unter) */
    .hero { padding: 2.25rem 0 2rem; }
    .site-header__inner { height: 56px; }

    /* Primäre Aktionsbuttons in Formularen füllen die Breite */
    .hero .d-flex .btn-lg { flex: 1 1 auto; }
}

/* Übersicht: Ansicht Tabelle/Kacheln */
[data-view-container="table"] .qr-view-grid { display: none; }
[data-view-container="grid"]  .qr-view-table { display: none; }
.qr-tile { overflow: hidden; transition: transform .15s, box-shadow .15s; border: 1px solid var(--bs-border-color); }
.qr-tile:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.qr-tile-media {
    height: 130px; display: flex; align-items: center; justify-content: center;
    background: var(--bs-tertiary-bg); overflow: hidden;
}
.qr-tile-media img { width: 100%; height: 100%; object-fit: cover; }
.qr-tile-media i { font-size: 2.6rem; color: var(--qr-orange); opacity: .85; }
[data-view-btn].active { background: var(--qr-orange); border-color: var(--qr-orange); color: #fff; }

/* Bewertungen / Social Proof */
.reviews-stars { color: var(--qr-orange); letter-spacing: .1em; font-size: 1.25rem; }
.reviews-stars.small { font-size: .95rem; }
.review-card {
    display: flex; flex-direction: column;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    padding: 1.5rem;
}
.review-card blockquote { font-size: .98rem; line-height: 1.55; margin: 0; }
.review-avatar {
    width: 40px; height: 40px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; font-weight: 700; color: #fff;
    background: var(--qr-orange);
}