/* Runde 3 – Team T7: eigene Styles (site.css gehoert T6).
   Registrierung, Dashboard, Konto, Tarife & Billing, Upgrade-Banner, Vorschau-Footer.
   Alle Klassen mit Präfix t7- (keine Kollision mit dem Design-System von T6). */

/* ---------- Helpers ---------- */
.t7-offscreen { position: fixed; top: -1000px; left: -1000px; opacity: 0; }
.t7-uppercase { text-transform: uppercase; }
.t7-kicker {
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 700;
}
.t7-textlink {
    padding: 0;
    min-height: 44px;
    color: var(--white-dim);
    text-decoration: underline;
    text-underline-offset: 3px;
    border: 0;
    background: none;
}
.t7-textlink:hover, .t7-textlink:focus-visible { color: var(--accent); }

/* Progress bar with width classes (no inline styles) */
.t7-bar {
    height: 8px;
    border-radius: 4px;
    background: var(--gray-dark);
    overflow: hidden;
    margin: .5rem 0 .75rem;
}
.t7-bar__fill {
    display: block;
    height: 100%;
    width: 0;
    background: var(--accent);
    border-radius: 4px;
    transition: width .3s ease;
}
@media (prefers-reduced-motion: reduce) { .t7-bar__fill { transition: none; } }
.t7-w-0{width:0}.t7-w-1{width:1%}.t7-w-2{width:2%}.t7-w-3{width:3%}.t7-w-4{width:4%}.t7-w-5{width:5%}.t7-w-6{width:6%}.t7-w-7{width:7%}.t7-w-8{width:8%}.t7-w-9{width:9%}
.t7-w-10{width:10%}.t7-w-11{width:11%}.t7-w-12{width:12%}.t7-w-13{width:13%}.t7-w-14{width:14%}.t7-w-15{width:15%}.t7-w-16{width:16%}.t7-w-17{width:17%}.t7-w-18{width:18%}.t7-w-19{width:19%}
.t7-w-20{width:20%}.t7-w-21{width:21%}.t7-w-22{width:22%}.t7-w-23{width:23%}.t7-w-24{width:24%}.t7-w-25{width:25%}.t7-w-26{width:26%}.t7-w-27{width:27%}.t7-w-28{width:28%}.t7-w-29{width:29%}
.t7-w-30{width:30%}.t7-w-31{width:31%}.t7-w-32{width:32%}.t7-w-33{width:33%}.t7-w-34{width:34%}.t7-w-35{width:35%}.t7-w-36{width:36%}.t7-w-37{width:37%}.t7-w-38{width:38%}.t7-w-39{width:39%}
.t7-w-40{width:40%}.t7-w-41{width:41%}.t7-w-42{width:42%}.t7-w-43{width:43%}.t7-w-44{width:44%}.t7-w-45{width:45%}.t7-w-46{width:46%}.t7-w-47{width:47%}.t7-w-48{width:48%}.t7-w-49{width:49%}
.t7-w-50{width:50%}.t7-w-51{width:51%}.t7-w-52{width:52%}.t7-w-53{width:53%}.t7-w-54{width:54%}.t7-w-55{width:55%}.t7-w-56{width:56%}.t7-w-57{width:57%}.t7-w-58{width:58%}.t7-w-59{width:59%}
.t7-w-60{width:60%}.t7-w-61{width:61%}.t7-w-62{width:62%}.t7-w-63{width:63%}.t7-w-64{width:64%}.t7-w-65{width:65%}.t7-w-66{width:66%}.t7-w-67{width:67%}.t7-w-68{width:68%}.t7-w-69{width:69%}
.t7-w-70{width:70%}.t7-w-71{width:71%}.t7-w-72{width:72%}.t7-w-73{width:73%}.t7-w-74{width:74%}.t7-w-75{width:75%}.t7-w-76{width:76%}.t7-w-77{width:77%}.t7-w-78{width:78%}.t7-w-79{width:79%}
.t7-w-80{width:80%}.t7-w-81{width:81%}.t7-w-82{width:82%}.t7-w-83{width:83%}.t7-w-84{width:84%}.t7-w-85{width:85%}.t7-w-86{width:86%}.t7-w-87{width:87%}.t7-w-88{width:88%}.t7-w-89{width:89%}
.t7-w-90{width:90%}.t7-w-91{width:91%}.t7-w-92{width:92%}.t7-w-93{width:93%}.t7-w-94{width:94%}.t7-w-95{width:95%}.t7-w-96{width:96%}.t7-w-97{width:97%}.t7-w-98{width:98%}.t7-w-99{width:99%}
.t7-w-100{width:100%}

/* Cards */
.t7-card {
    background: var(--black-light);
    border: 1px solid var(--gray-dark);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1rem;
}
.t7-card__head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.t7-card__title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    letter-spacing: .03em;
    color: var(--white);
    margin: 0 0 .5rem;
}
.t7-card__head .t7-card__title { margin: 0; }
.t7-card__link { color: var(--white-dim); text-decoration: underline; text-underline-offset: 3px; padding: 12px 4px; }
.t7-card__link:hover, .t7-card__link:focus-visible { color: var(--accent); }

/* Status chips (fallback until the T6 chips a4f-chip--status-* are there) */
.t7-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    min-height: 28px;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .04em;
    text-transform: uppercase;
    border: 1px solid var(--gray);
    background: var(--black-lighter);
    color: var(--white);
    white-space: nowrap;
}
.t7-chip--open { border-color: var(--accent); color: var(--accent); }
.t7-chip--draw { border-color: var(--cyan); color: var(--cyan); }
.t7-chip--sent { border-color: var(--warning); color: var(--warning); }
.t7-chip--confirmed { border-color: var(--success); color: var(--success); }
.t7-chip--past { color: var(--white-dim); }
.t7-chip--plan-basic { border-color: var(--cyan); color: var(--cyan); }
.t7-chip--plan-premium { background: var(--accent); border-color: var(--accent); color: #0a0a0a; }

/* Brand text link (instead of Bootstrap blue .link-primary) */
.t7-link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.t7-link:hover, .t7-link:focus-visible { color: var(--accent-hover); }
.t7-switch__summary .h5 { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: .03em; }

/* ---------- Registration ---------- */
.t7-progress { text-align: center; }
.t7-progress__label { font-size: .8rem; color: var(--white-dim); margin: 0 0 .5rem; }
.t7-progress .t7-progress__steps {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: .5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.t7-progress .t7-progress__step {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    color: var(--white-dim);
}
.t7-progress .t7-progress__step + .t7-progress__step::before {
    content: "";
    width: 24px;
    height: 2px;
    background: var(--gray);
    margin-right: .1rem;
}
.t7-progress__dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--gray-light);
    font-size: .75rem;
    font-weight: 700;
}
.t7-progress__step--current { color: var(--white); }
.t7-progress__step--current .t7-progress__dot { border-color: var(--accent); color: var(--accent); }
.t7-progress__step--done .t7-progress__dot { background: var(--accent); border-color: var(--accent); color: #0a0a0a; }

.t7-auth .form-control { font-size: 1rem; }

.t7-promo { border: 1px dashed var(--gray); border-radius: var(--radius-md); }
.t7-promo__toggle {
    cursor: pointer;
    padding: 12px 14px;
    min-height: 44px;
    color: var(--white-dim);
    list-style: none;
}
.t7-promo__toggle::-webkit-details-marker { display: none; }
.t7-promo__toggle::before { content: "+ "; color: var(--accent); font-weight: 700; }
.t7-promo[open] .t7-promo__toggle::before { content: "– "; }
.t7-promo__toggle:hover, .t7-promo__toggle:focus-visible { color: var(--white); }
.t7-promo__toggle:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.t7-promo__body { padding: 0 14px 14px; }

.t7-password { position: relative; }
.t7-password .form-control { padding-right: 6.5rem; }
.t7-password__toggle {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    min-height: 40px;
    min-width: 44px;
    padding: 0 .75rem;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--white-dim);
    font-size: .85rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.t7-password__toggle:hover, .t7-password__toggle:focus-visible { color: var(--accent); }
.t7-password__toggle:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.t7-free-note {
    margin-top: 1rem;
    padding: .75rem 1rem;
    border-left: 3px solid var(--accent);
    background: var(--black-lighter);
    color: var(--white);
}

/* ---------- Dashboard ---------- */
.t7-hero { border-color: var(--gray); }
.t7-hero__head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.t7-hero__title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    letter-spacing: .02em;
    margin: 0;
    color: var(--white);
    overflow-wrap: anywhere;
}
.t7-hero__meta { color: var(--white-dim); margin: .25rem 0 .75rem; }
.t7-hero__next { font-size: 1.05rem; color: var(--white); margin: .5rem 0; }
.t7-hero__count { font-size: .85rem; color: var(--white-dim); }
.t7-hero__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.t7-hero__actions .btn { min-height: 44px; }
.btn.is-copied { border-color: var(--success); }

.t7-rows { list-style: none; margin: 0; padding: 0; }
.t7-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .875rem 0;
    border-top: 1px solid var(--gray-dark);
}
.t7-row:first-child { border-top: 0; }
.t7-row__main { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.t7-row__name { color: var(--white); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
a.t7-row__name:hover, a.t7-row__name:focus-visible { color: var(--accent); text-decoration: underline; }
.t7-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .8rem; color: var(--white-dim); }
.t7-row__next { font-size: .9rem; color: var(--white); }
.t7-row__action { flex-shrink: 0; min-height: 40px; }
.t7-row--plain { flex-direction: column; align-items: flex-start; gap: .1rem; padding: .6rem 0; }
.t7-row__name--plain { font-weight: 400; }

.t7-checklist__head { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; }
.t7-checklist__count { font-size: .85rem; color: var(--white-dim); white-space: nowrap; }
.t7-checklist__steps { list-style: none; padding: 0; margin: .25rem 0 .5rem; }
.t7-step { display: flex; gap: .75rem; padding: .6rem 0; align-items: flex-start; }
.t7-step__mark {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--gray-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .8rem;
    color: var(--white-dim);
}
.t7-step.is-current .t7-step__mark { border-color: var(--accent); color: var(--accent); }
.t7-step.is-done .t7-step__mark { background: var(--success); border-color: var(--success); color: #0a0a0a; }
.t7-step.is-done .t7-step__title { color: var(--white-dim); text-decoration: line-through; text-decoration-color: var(--gray-light); }
.t7-step__body { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding-top: .15rem; }
.t7-step__body--row { flex-direction: row; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; }
.t7-step__title { color: var(--white); }
.t7-step__link { padding: 10px 0; }
.t7-step .btn { min-height: 44px; }
.t7-checklist__optional { font-size: .9rem; border-top: 1px solid var(--gray-dark); padding-top: .75rem; }
.t7-checklist__optional a { padding: 10px 2px; }
.t7-checklist--compact .t7-step { padding: .35rem 0; }

.t7-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
    margin-bottom: 1rem;
}
.t7-tile {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .75rem 1rem;
    background: var(--black-light);
    border: 1px solid var(--gray-dark);
    border-radius: var(--radius-lg);
    color: inherit;
    text-decoration: none;
    min-width: 0;
}
.t7-tile--link:hover, .t7-tile--link:focus-visible { border-color: var(--accent); }
.t7-tile__value { font-family: var(--font-display); font-size: 1.5rem; line-height: 1; color: var(--white); }
.t7-tile__value--text { font-size: 1.1rem; overflow-wrap: anywhere; }
.t7-tile__label { font-size: .75rem; color: var(--white-dim); }
@media (max-width: 767.98px) {
    .t7-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .t7-row { flex-direction: column; align-items: stretch; }
    .t7-row__action { align-self: flex-start; }
    .t7-hero__actions .btn { flex: 1 1 auto; }
}

/* ---------- Account ---------- */
.t7-account { max-width: 760px; }
.t7-account__plan { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.t7-account__status { color: var(--white-dim); }
.t7-account__facts { margin: 0 0 .25rem; }
.t7-account__facts dt { font-size: .8rem; color: var(--white-dim); font-weight: 400; }
.t7-account__facts dd { margin: 0; color: var(--white); }
.t7-account__since { color: var(--white-dim); font-size: .9rem; }
.t7-account .btn { min-height: 44px; }
.t7-account .form-select { font-size: 1rem; min-height: 44px; }
.t7-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.t7-links a { display: inline-block; padding: 12px 2px; color: var(--white-dim); text-decoration: underline; text-underline-offset: 3px; }
.t7-links a:hover, .t7-links a:focus-visible { color: var(--accent); }
.t7-danger { border-color: rgba(239, 68, 68, .45); }
.t7-danger .t7-card__title { color: #f87171; }

.t7-backlink__link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 44px;
    color: var(--white-dim);
    text-decoration: none;
}
.t7-backlink__link:hover, .t7-backlink__link:focus-visible { color: var(--accent); text-decoration: underline; }

/* ---------- Billing ---------- */
.t7-context {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    padding: .9rem 1.1rem;
    border: 1px solid var(--accent);
    border-radius: var(--radius-lg);
    background: rgba(255, 107, 0, .08);
    color: var(--white);
    font-size: 1.02rem;
}
.t7-context__icon { color: var(--accent); font-weight: 700; }
.t7-welcome {
    padding: 1rem 1.25rem;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(255, 107, 0, .22), rgba(255, 107, 0, .05));
    border: 1px solid var(--accent);
}
.t7-welcome__title { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: .02em; color: var(--white); }
.t7-compare { list-style: none; padding: 0; margin: .25rem 0 0; display: grid; gap: .35rem; font-size: .9rem; color: var(--white-dim); }
.t7-compare strong { color: var(--white); }
.t7-facts { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0 0 1rem; }
.t7-facts dt { font-size: .75rem; color: var(--white-dim); font-weight: 400; }
.t7-facts dd { margin: 0; }
.t7-current__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.t7-current__actions .btn { min-height: 44px; }
.t7-upsell { border-top: 1px solid var(--gray-dark); padding-top: .75rem; font-size: .9rem; color: var(--white-dim); }
.t7-upsell strong { color: var(--white); }
.t7-address { font-style: normal; }
.t7-bonus { align-items: flex-start; }
.t7-bonus--reserved { border-color: var(--gray); background: var(--black-lighter); }
.t7-bonus--reserved .bonus-months-banner__title { color: var(--white); }

.t7-switch { border-top: 1px solid var(--gray-dark); padding-top: .5rem; }
.t7-switch__summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    min-height: 44px;
    gap: .5rem;
}
.t7-switch__summary::-webkit-details-marker { display: none; }
.t7-switch__summary::after { content: "▾"; color: var(--accent); transition: transform .15s ease; }
.t7-switch:not([open]) .t7-switch__summary::after { transform: rotate(-90deg); }
.t7-switch__summary:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

/* Plan cards: brand buttons, calm current plan, highlight, "in every plan" strip */
.plan-card .btn-primary { background: var(--accent); border-color: var(--accent); color: #0a0a0a; }
.plan-card .btn-primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.plan-card .btn:disabled,
.plan-card .t7-current-plan {
    background: transparent !important;
    border: 1px solid var(--gray) !important;
    color: var(--white-dim) !important;
    opacity: 1;
    box-shadow: none;
}
.plan-card .btn { min-height: 44px; }
.t7-plan-card--highlight {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2px var(--accent), 0 0 32px var(--accent-glow);
    scroll-margin-top: 90px;
}
.plan-card[id^="plan-"] { scroll-margin-top: 90px; }
.t7-every-plan {
    margin: 1rem 0 .25rem;
    padding: .75rem 1rem;
    border: 1px dashed var(--gray);
    border-radius: var(--radius-md);
    font-size: .875rem;
    color: var(--white-dim);
}
.t7-every-plan strong { color: var(--white); }

/* Phones, billing for Free users: Premium (recommended) first, then Basic, Free compact */
@media (max-width: 767.98px) {
    .t7-plan-cards--upsell .plan-cards__grid { display: flex; flex-direction: column; }
    .t7-plan-cards--upsell .plan-card--premium { order: 1; }
    .t7-plan-cards--upsell .plan-card--basic { order: 2; }
    .t7-plan-cards--upsell .plan-card--free { order: 3; padding: .75rem 1rem; }
    .t7-plan-cards--upsell .plan-card--free .plan-card__features { display: none; }
}

/* Cancel dialog (own <dialog>, real data instead of confirm()) */
.t7-dialog {
    width: min(520px, calc(100vw - 2rem));
    max-height: 85dvh;
    padding: 1.25rem 1.25rem 1rem;
    border: 1px solid var(--gray);
    border-radius: var(--radius-lg);
    background: var(--black-light);
    color: var(--white);
}
.t7-dialog::backdrop { background: rgba(0, 0, 0, .7); }
.t7-dialog__list { padding-left: 1.2rem; margin: 0 0 .75rem; }
.t7-dialog__list li { margin-bottom: .3rem; }
.t7-dialog__actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.t7-dialog__actions .btn { min-height: 44px; }
@media (max-width: 575.98px) {
    .t7-dialog__actions { flex-direction: column-reverse; }
    .t7-dialog__actions .btn, .t7-dialog__actions form { width: 100%; }
}

/* Feature preview footer: "Später" + buy button with price */
.t7-preview-footer { gap: .5rem; flex-wrap: wrap; }
.t7-preview-footer .btn-primary { background: var(--accent); border-color: var(--accent); color: #0a0a0a; min-height: 44px; }
.t7-preview-footer .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.t7-custom-mock { border-left: 3px solid var(--accent); }
.t7-custom-mock__kicker { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.t7-custom-mock__reward { padding: .6rem .75rem; border-radius: var(--radius-md); background: var(--black); }
.t7-custom-mock__tag { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--white-dim); }

/* Upgrade banner: close button (POST form, no JS) */
.t7-banner { position: relative; padding-right: 3rem; }
.t7-banner__close-form { position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); margin: 0; }
.t7-banner__close {
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.4rem;
    line-height: 1;
    opacity: .8;
}
.t7-banner__close:hover, .t7-banner__close:focus-visible { opacity: 1; }
.t7-banner__close:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }