/* ─── Reset & Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg:         #0d0d0d;
    --surface:    #191919;
    --surface-2:  #212121;
    --accent:     #c9a96e;
    --accent-dim: rgba(201, 169, 110, .12);
    --text:       #e2dcd4;
    --text-dim:   #7a7670;
    --border:     rgba(255, 255, 255, .07);
    --radius:     10px;
    --max-w:      520px;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    background:  var(--bg);
    color:       var(--text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    line-height: 1.65;
    min-height:  100vh;
    padding:     0 1rem 4rem;
}

img { display: block; max-width: 100%; }

a { color: inherit; }

/* ─── Page wrapper ──────────────────────────────────────────────────────────── */
.page {
    max-width: var(--max-w);
    margin:    0 auto;
}

/* ─── Header ────────────────────────────────────────────────────────────────── */
.site-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         1.4rem 0 1.8rem;
    border-bottom:   1px solid var(--border);
    margin-bottom:   2rem;
}

.logo {
    display:         inline-flex;
    align-items:     center;
    gap:             .55rem;
    font-size:       .9rem;
    font-weight:     700;
    letter-spacing:  .05em;
    color:           var(--accent);
    text-decoration: none;
    text-transform:  lowercase;
}
.logo svg {
    color:       var(--accent);
    flex-shrink: 0;
    transition:  opacity .15s;
}
.logo:hover svg { opacity: .75; }

.badge-18 {
    font-size:      .68rem;
    font-weight:    700;
    letter-spacing: .06em;
    color:          var(--text-dim);
    border:         1px solid var(--border);
    border-radius:  4px;
    padding:        .18em .55em;
}

/* ─── Back link ─────────────────────────────────────────────────────────────── */
.back-link {
    display:         inline-flex;
    align-items:     center;
    gap:             .35rem;
    color:           var(--text-dim);
    font-size:       .84rem;
    text-decoration: none;
    margin-bottom:   2rem;
    transition:      color .15s;
}
.back-link:hover { color: var(--text); }

/* ─── Hero ──────────────────────────────────────────────────────────────────── */
.hero {
    margin-bottom: 2.5rem;
}

.hero h1 {
    font-size:     1.55rem;
    font-weight:   700;
    line-height:   1.3;
    margin-bottom: .7rem;
    color:         var(--text);
}

.hero p {
    font-size: .92rem;
    color:     var(--text-dim);
    max-width: 38ch;
}

/* ─── Funnel Cards (index) ──────────────────────────────────────────────────── */
.funnel-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   .85rem;
}

.funnel-card {
    display:         block;
    background:      var(--surface);
    border:          1px solid var(--border);
    border-radius:   var(--radius);
    padding:         1.4rem 1.4rem 1.2rem;
    text-decoration: none;
    transition:      background .15s, border-color .15s;
}
.funnel-card:hover {
    background:    var(--surface-2);
    border-color:  rgba(201, 169, 110, .28);
}

.fc-emoji {
    font-size:     1.5rem;
    margin-bottom: .55rem;
    display:       block;
    line-height:   1;
}

.fc-title {
    font-size:     1rem;
    font-weight:   600;
    color:         var(--text);
    margin-bottom: .3rem;
}

.fc-desc {
    font-size:   .87rem;
    color:       var(--text-dim);
    line-height: 1.55;
}

.fc-arrow {
    display:     inline-block;
    margin-top:  .8rem;
    font-size:   .83rem;
    color:       var(--accent);
    font-weight: 600;
}

/* ─── Model Cards ───────────────────────────────────────────────────────────── */
.model-list {
    display:        flex;
    flex-direction: column;
    gap:            1.1rem;
}

.model-card {
    display:       flex;
    gap:           0;
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    overflow:      hidden;
}

.mc-img {
    width:      105px;
    min-width:  105px;
    height:     150px;
    object-fit: cover;
    background: var(--surface-2);
    flex-shrink: 0;
}

.mc-body {
    flex:           1;
    padding:        1rem;
    display:        flex;
    flex-direction: column;
    gap:            .35rem;
    min-width:      0; /* Prevent text overflow */
}

.mc-name {
    font-size:   .97rem;
    font-weight: 600;
    color:       var(--text);
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}

.mc-meta {
    font-size: .78rem;
    color:     var(--text-dim);
}

.mc-desc {
    font-size:   .84rem;
    color:       var(--text-dim);
    line-height: 1.5;
    flex:        1;
    /* clamp to 3 lines */
    display:            -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow:           hidden;
}

/* Live indicator */
.mc-live {
    display:     inline-flex;
    align-items: center;
    gap:         .3rem;
    font-size:   .75rem;
    color:       #5cb85c;
    font-weight: 600;
}
.mc-live::before {
    content:       '';
    display:       block;
    width:         7px;
    height:        7px;
    background:    #5cb85c;
    border-radius: 50%;
    animation:     livepulse 1.8s ease-in-out infinite;
}

@keyframes livepulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .3; }
}

/* CTA button */
.mc-btn {
    display:         block;
    margin-top:      auto;
    padding-top:     .6rem;
    background:      var(--accent);
    color:           #0d0d0d;
    font-size:       .8rem;
    font-weight:     700;
    letter-spacing:  .04em;
    text-decoration: none;
    padding:         .55em 1em;
    border-radius:   6px;
    text-align:      center;
    transition:      opacity .15s;
    flex-shrink:     0;
}
.mc-btn:hover { opacity: .82; }

/* ─── Empty state ────────────────────────────────────────────────────────────── */
.empty-state {
    text-align:    center;
    color:         var(--text-dim);
    font-size:     .9rem;
    padding:       3.5rem 1rem;
    border:        1px dashed var(--border);
    border-radius: var(--radius);
}

/* ─── Footer ─────────────────────────────────────────────────────────────────── */
.site-footer {
    margin-top:    3rem;
    padding-top:   1.4rem;
    border-top:    1px solid var(--border);
    font-size:     .73rem;
    color:         var(--text-dim);
    text-align:    center;
    line-height:   2.1;
}
.site-footer a {
    color:           var(--text-dim);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.site-footer a:hover { color: var(--text); }

/* ─── Quiz ───────────────────────────────────────────────────────────────────── */
.quiz-wrap {
    margin-bottom: 2.5rem;
}

/* Fortschrittsbalken */
.quiz-progress {
    display:       flex;
    gap:           .5rem;
    margin-bottom: 2rem;
}
.quiz-progress-dot {
    flex:          1;
    height:        4px;
    border-radius: 2px;
    background:    var(--border);
    transition:    background .3s;
}
.quiz-progress-dot.done   { background: var(--accent); }
.quiz-progress-dot.active { background: rgba(201,169,110,.45); }

/* Schritt-Anzeige */
.quiz-step-info {
    font-size:      .73rem;
    color:          var(--text-dim);
    margin-bottom:  .55rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Frage */
.quiz-question {
    font-size:     1.3rem;
    font-weight:   700;
    line-height:   1.3;
    margin-bottom: 1.4rem;
    color:         var(--text);
}

/* Antwort-Karten — gleicher visueller Stil wie .funnel-card */
.quiz-options {
    display:        flex;
    flex-direction: column;
    gap:            .85rem;
}

.quiz-option {
    display:         flex;
    align-items:     center;
    gap:             1rem;
    background:      var(--surface);
    border:          1px solid var(--border);
    border-radius:   var(--radius);
    padding:         1.1rem 1.3rem;
    text-decoration: none;
    transition:      background .15s, border-color .15s, transform .12s;
}
.quiz-option:hover {
    background:   var(--surface-2);
    border-color: rgba(201,169,110,.3);
    transform:    translateX(5px);
}
.quiz-option:active { transform: translateX(8px); }

.qo-emoji {
    font-size:   1.5rem;
    line-height: 1;
    flex-shrink: 0;
    width:       2rem;
    text-align:  center;
}

.qo-label {
    flex:        1;
    font-size:   .97rem;
    font-weight: 600;
    color:       var(--text);
}

.qo-arrow {
    font-size:   1rem;
    color:       var(--accent);
    flex-shrink: 0;
    opacity:     .6;
    transition:  transform .15s, opacity .15s;
}
.quiz-option:hover .qo-arrow {
    transform: translateX(3px);
    opacity:   1;
}

/* Bisherige Antworten als Pills */
.quiz-breadcrumb {
    display:       flex;
    flex-wrap:     wrap;
    gap:           .4rem;
    margin-bottom: 1.3rem;
}
.quiz-crumb {
    display:       inline-flex;
    align-items:   center;
    gap:           .3rem;
    font-size:     .75rem;
    color:         var(--text-dim);
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: 20px;
    padding:       .25em .8em;
}
.qc-emoji { font-size: .85rem; }
.quiz-crumb a {
    color:           var(--text-dim);
    text-decoration: none;
    margin-left:     .15em;
    opacity:         .5;
    font-size:       .7rem;
    transition:      opacity .15s;
}
.quiz-crumb a:hover { opacity: 1; }

/* ─── Profil-Preview Grid (index SEO-Section) ───────────────────────────────── */
.pg-section {
    margin-top: 2.5rem;
}

.pg-heading {
    font-size:      .72rem;
    font-weight:    600;
    color:          var(--text-dim);
    letter-spacing: .09em;
    text-transform: uppercase;
    margin-bottom:  .85rem;
}

.pg-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   .65rem;
}

.pg-card {
    display:        block;
    background:     var(--surface);
    border:         1px solid var(--border);
    border-radius:  var(--radius);
    overflow:       hidden;
    text-decoration: none;
    transition:     border-color .15s;
}
.pg-card:hover { border-color: rgba(201, 169, 110, .28); }

.pg-img {
    width:        100%;
    aspect-ratio: 3/4;
    object-fit:   cover;
    background:   var(--surface-2);
    display:      block;
}

.pg-body {
    padding: .5rem .6rem .55rem;
}

.pg-name {
    font-size:     .82rem;
    font-weight:   600;
    color:         var(--text);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

.pg-meta {
    font-size:  .7rem;
    color:      var(--text-dim);
    margin-top: .12rem;
}

.pg-live {
    font-size:   .67rem;
    color:       var(--accent);
    font-weight: 600;
    margin-top:  .18rem;
}

/* ─── Mobile tweaks ──────────────────────────────────────────────────────────── */
@media (max-width: 520px) {
    .pg-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 380px) {
    .mc-img       { width: 85px; min-width: 85px; height: 130px; }
    .hero h1      { font-size: 1.35rem; }
    .funnel-card  { padding: 1.1rem; }
    .funnel-grid  { grid-template-columns: 1fr; }
}

/* ─── Profil-Detail-Seite ────────────────────────────────────────────────────── */
.profil-wrap {
    display:        flex;
    flex-direction: column;
    gap:            1.4rem;
    padding-bottom: 2.5rem;
}

.profil-img-wrap {
    position:      relative;
    border-radius: var(--radius);
    overflow:      hidden;
    background:    var(--surface);
    aspect-ratio:  3/4;
    max-height:    340px;
}

.profil-img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

.profil-live-badge {
    position:      absolute;
    top:           .65rem;
    left:          .65rem;
    background:    rgba(76, 175, 80, .88);
    color:         #fff;
    font-size:     .72rem;
    font-weight:   700;
    padding:       .18em .6em;
    border-radius: 2rem;
    letter-spacing: .04em;
}

.profil-name {
    font-size:   1.45rem;
    font-weight: 700;
    color:       var(--text);
    line-height: 1.2;
}
.profil-name span {
    font-size:   1.05rem;
    font-weight: 400;
    color:       var(--text-dim);
}

.profil-meta {
    font-size:  .85rem;
    color:      var(--text-dim);
    margin-top: .1rem;
}

.profil-section-label {
    font-size:      .7rem;
    font-weight:    600;
    color:          var(--text-dim);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom:  .55rem;
}

/* Tag-Chips */
.tag-chips {
    display:   flex;
    flex-wrap: wrap;
    gap:       .4rem;
}

.tag-chip {
    background:    var(--surface-2);
    border:        1px solid var(--border);
    border-radius: 2rem;
    padding:       .22em .75em;
    font-size:     .8rem;
    color:         var(--text-dim);
    white-space:   nowrap;
}
.tag-chip.match {
    border-color: rgba(201, 169, 110, .45);
    color:        var(--accent);
}

/* Quiz-Kontext */
.profil-match {
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    padding:       .85rem 1rem;
}

.pm-answers {
    display:   flex;
    flex-wrap: wrap;
    gap:       .35rem;
    margin-top:.45rem;
}

.pm-chip {
    font-size:     .78rem;
    color:         var(--text-dim);
    background:    var(--surface-2);
    border-radius: 2rem;
    padding:       .2em .65em;
}

/* CTA Button */
.profil-cta {
    display:         block;
    width:           100%;
    padding:         .9rem 1rem;
    background:      var(--accent);
    color:           #0e0e12;
    font-size:       1rem;
    font-weight:     700;
    text-align:      center;
    text-decoration: none;
    border-radius:   var(--radius);
    transition:      opacity .15s;
    box-sizing:      border-box;
}
.profil-cta:hover { opacity: .88; }

.profil-back {
    display:     block;
    text-align:  center;
    font-size:   .82rem;
    color:       var(--text-dim);
    text-decoration: none;
}
.profil-back:hover { color: var(--text); }

/* ─── Ähnliche Profile (Profil-Detail) ──────────────────────────────────────── */
.related-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   .6rem;
}

.related-card {
    display:         block;
    background:      var(--surface);
    border:          1px solid var(--border);
    border-radius:   var(--radius);
    overflow:        hidden;
    text-decoration: none;
    transition:      border-color .15s;
}
.related-card:hover { border-color: rgba(201, 169, 110, .28); }

.related-img {
    width:        100%;
    aspect-ratio: 3/4;
    object-fit:   cover;
    background:   var(--surface-2);
    display:      block;
}

.related-name {
    font-size:     .78rem;
    font-weight:   600;
    color:         var(--text);
    padding:       .4rem .5rem .1rem;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

.related-meta {
    font-size: .68rem;
    color:     var(--text-dim);
    padding:   0 .5rem .35rem;
}

.related-live {
    font-size:   .66rem;
    color:       var(--accent);
    font-weight: 600;
    padding:     0 .5rem .35rem;
}

/* ─── Static Pages (Impressum / Datenschutz) ────────────────────────────────── */
.static-content {
    padding: 2rem 0 3rem;
    max-width: 680px;
}
.static-content h1 {
    font-size: 1.6rem;
    color: var(--accent);
    margin-bottom: 1.8rem;
}
.static-content h2 {
    font-size: 1.05rem;
    color: var(--text);
    margin: 2rem 0 .5rem;
    padding-bottom: .3rem;
    border-bottom: 1px solid var(--surface);
}
.static-content h3 {
    font-size: .92rem;
    color: var(--accent);
    margin: 1.2rem 0 .35rem;
}
.static-content p,
.static-content ul {
    font-size: .88rem;
    color: var(--text-dim);
    line-height: 1.7;
    margin-bottom: .7rem;
}
.static-content ul {
    padding-left: 1.4rem;
}
.static-content a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.static-content a:hover {
    color: var(--text);
}