/* ==========================================================================
   TWINK DEATH — dictionary.css
   Nur fuer /dictionary/ und /dictionary/<slug>/. Laedt zusaetzlich zu
   style.css (Tokens, Header, Footer, Buttons kommen von dort) — damit die
   Cache-Version von style.css nicht fuer die ganze Site gebrochen werden muss.
   Generator: tools/build-dictionary.mjs
   ========================================================================== */

/* --------------------------------------------------------------------------
   00. SEITENGERUEST
   -------------------------------------------------------------------------- */
.dict-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 clamp(24px, 5vw, 48px);
}
.dict-page { padding-bottom: 96px; }

/* Anker unter dem fixen Header (~61px) */
[id^="cat-"] { scroll-margin-top: 92px; }

/* --------------------------------------------------------------------------
   01. HUB — HERO / SLIDER
   -------------------------------------------------------------------------- */
.dict-hero {
    position: relative;
    min-height: clamp(420px, 72vh, 720px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
}
.dict-slides {
    position: absolute;
    inset: 0;
}
.dict-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.1s var(--ease-in-out);
}
.dict-slide[data-active="true"] { opacity: 1; }
.dict-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Ohne JS bleibt das erste Motiv stehen (data-active="true" steht im HTML)
   statt einer schwarzen Flaeche; die Dots baut erst dictionary.js. */

.dict-hero-veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right, rgba(5,5,5,0.86) 0%, rgba(5,5,5,0.45) 52%, rgba(5,5,5,0.12) 100%),
        linear-gradient(to bottom, rgba(5,5,5,0.6) 0%, rgba(5,5,5,0.2) 34%, rgba(5,5,5,0.94) 100%),
        radial-gradient(120% 80% at 50% 100%, rgba(240,0,0,0.20) 0%, transparent 60%);
    pointer-events: none;
}
.dict-hero-ui {
    position: relative;
    width: 100%;
    padding: 140px 0 clamp(32px, 6vh, 64px);
}
.dict-eyebrow {
    font-family: var(--f-label);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 14px;
}
/* Die Display-Font der Site ist sehr breit laufend — ein Wort mit zehn
   Zeichen braucht rund 10,5em Breite. Deshalb traegt nur "Dictionary" die
   grosse Stufe, "Twink Death" sitzt als Kicker darueber. */
.dict-hero-title { margin-bottom: 20px; }
.dict-hero-kicker {
    display: block;
    font-family: var(--f-label);
    font-weight: 600;
    font-size: clamp(0.8rem, 2.2vw, 1.05rem);
    letter-spacing: 6px;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 8px;
}
.dict-hero-word {
    display: block;
    font-family: var(--f-display);
    font-size: clamp(1.9rem, 8vw, 6.2rem);
    line-height: 0.92;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}
.dict-claim {
    font-family: var(--f-label);
    font-weight: 500;
    font-size: clamp(0.82rem, 2.4vw, 1rem);
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text);
    max-width: 34ch;
    line-height: 1.7;
}
.dict-claim span { color: var(--red); }

/* Slider-Bedienung */
.dict-hero-controls {
    position: absolute;
    right: clamp(24px, 5vw, 48px);
    bottom: clamp(32px, 6vh, 64px);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 2;
}
.dict-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 1px solid rgba(255,255,255,0.55);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.dict-dot[aria-current="true"] {
    background: var(--red);
    border-color: var(--red);
    transform: scale(1.25);
}
.dict-dot:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   02. HUB — INTRO
   -------------------------------------------------------------------------- */
.dict-intro {
    padding: clamp(48px, 9vh, 88px) 0 clamp(32px, 6vh, 56px);
    border-bottom: 1px solid var(--border);
}
.dict-lead {
    font-size: clamp(1.02rem, 2.2vw, 1.22rem);
    line-height: 1.65;
    color: rgba(255,255,255,0.88);
    max-width: 62ch;
    margin-bottom: 18px;
}
.dict-intro p {
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--muted-mid);
    max-width: 68ch;
    margin-bottom: 12px;
}
.dict-intro p a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.dict-intro p a:hover { color: var(--red); }

.dict-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}
.dict-jump a {
    font-family: var(--f-label);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--muted-hi);
    border: 1px solid var(--border-mid);
    padding: 9px 14px;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.dict-jump a:hover { color: var(--red); border-color: var(--red); }

/* --------------------------------------------------------------------------
   03. HUB — KATEGORIEN + KARTEN
   -------------------------------------------------------------------------- */
.dict-cat { padding: clamp(44px, 8vh, 76px) 0 0; }
.dict-cat-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 16px;
    margin-bottom: 10px;
}
.dict-cat-title {
    font-family: var(--f-display);
    font-size: clamp(1.6rem, 4.2vw, 2.6rem);
    line-height: 1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}
.dict-cat-count {
    font-family: var(--f-label);
    font-size: 0.7rem;
    letter-spacing: 3px;
    color: var(--red);
}
.dict-cat-sub {
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--muted-mid);
    max-width: 66ch;
    margin-bottom: 28px;
}
/* Rasterlinien liegen auf den Karten, nicht als Hintergrund unter dem Grid —
   sonst leuchten die leeren Zellen am Ende einer Sektion als graue Bloecke. */
.dict-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0;
    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
}
.dict-card {
    background: var(--bg);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.dict-card a {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    min-height: 132px;
    padding: 18px 18px 16px;
    background: var(--bg);
    transition: background 0.2s ease, transform 0.2s var(--ease-expo);
}
.dict-card a:hover,
.dict-card a:focus-visible {
    background: var(--bg-surface);
}
.dict-term {
    font-family: var(--f-display);
    font-size: clamp(1rem, 1.85vw, 1.2rem);
    line-height: 1.12;
    letter-spacing: 0.01em;
    color: var(--text);
    overflow-wrap: break-word;
    min-width: 0;
}
.dict-card a:hover .dict-term { color: var(--red); }
.dict-card-foot {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-family: var(--f-label);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
}
.dict-card-arrow { color: rgba(255,255,255,0.35); }
.dict-card a:hover .dict-card-arrow { color: var(--red); }
/* Prio-Begriffe: erste Position in der Kategorie, roter Marker, fetter Term */
.dict-card--prio a { background: linear-gradient(180deg, rgba(240,0,0,0.09) 0%, rgba(5,5,5,0) 62%); }
.dict-card--prio .dict-term { font-weight: 700; }
.dict-card--prio .dict-card-foot { color: var(--red); }

/* --------------------------------------------------------------------------
   04. BEGRIFFSSEITE
   -------------------------------------------------------------------------- */
.dict-term-hero {
    position: relative;
    height: clamp(240px, 42vh, 420px);
    overflow: hidden;
}
.dict-term-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.dict-term-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(5,5,5,0.72) 0%, rgba(5,5,5,0.18) 45%, var(--bg) 100%);
}
.dict-term-head {
    position: relative;
    margin-top: -72px;
    z-index: 1;
}
.dict-back {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--f-label);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--muted);
    transition: color 0.2s;
}
.dict-back::before { content: '←'; }
.dict-back:hover { color: var(--red); }
.dict-term-title {
    font-family: var(--f-display);
    font-size: clamp(1.7rem, 5.4vw, 3.6rem);
    line-height: 0.94;
    letter-spacing: -0.01em;
    margin: 16px 0 10px;
    overflow-wrap: break-word;
    hyphens: auto;
}
.dict-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    font-family: var(--f-label);
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    padding-bottom: 22px;
    border-bottom: 1px solid var(--border);
}
.dict-meta a { color: rgba(255,255,255,0.55); }
.dict-meta a:hover { color: var(--red); }
.dict-meta .dict-meta-term { color: var(--red); }

.dict-body { max-width: 74ch; padding-top: 34px; }
.dict-body > p:first-of-type {
    font-size: 1.06rem;
    line-height: 1.72;
    color: rgba(255,255,255,0.88);
}
.dict-body h2 {
    font-family: var(--f-label);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--red);
    margin: 40px 0 12px;
}
.dict-body p {
    font-size: 0.97rem;
    line-height: 1.82;
    color: var(--muted-mid);
    margin-bottom: 14px;
}
.dict-body ul { list-style: none; margin: 0 0 14px; }
.dict-body li {
    font-size: 0.97rem;
    line-height: 1.75;
    color: var(--muted-mid);
    padding: 10px 0 10px 18px;
    border-bottom: 1px solid var(--border);
    position: relative;
}
.dict-body li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20px;
    width: 7px;
    height: 1px;
    background: var(--red);
}
.dict-body a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.dict-body a:hover { color: var(--red); }
.dict-body em { color: rgba(255,255,255,0.82); font-style: italic; }
.dict-body blockquote {
    margin: 22px 0 26px;
    padding: 20px 22px;
    border-left: 2px solid var(--red);
    background: var(--bg-surface);
}
.dict-body blockquote p {
    font-family: var(--f-display);
    font-size: clamp(1.3rem, 3.4vw, 1.9rem);
    line-height: 1.14;
    letter-spacing: 0.01em;
    color: var(--text);
    margin: 0;
}

/* FAQ */
.dict-faq { max-width: 74ch; margin-top: 52px; }
.dict-faq h2 {
    font-family: var(--f-label);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 14px;
}
.dict-faq details {
    border-top: 1px solid var(--border);
}
.dict-faq details:last-of-type { border-bottom: 1px solid var(--border); }
.dict-faq summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 17px 0;
    font-family: var(--f-label);
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text);
}
.dict-faq summary::-webkit-details-marker { display: none; }
.dict-faq summary::after {
    content: '+';
    font-family: var(--f-label);
    color: var(--red);
    flex: none;
}
.dict-faq details[open] summary::after { content: '–'; }
.dict-faq details[open] summary { color: var(--red); }
.dict-faq .dict-faq-a {
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--muted-mid);
    padding: 0 0 18px;
    max-width: 66ch;
}

/* Fuss der Begriffsseite */
.dict-term-foot {
    max-width: 74ch;
    margin-top: 56px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: 12px 26px;
}
.dict-term-foot a {
    font-family: var(--f-label);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--muted);
}
.dict-term-foot a:hover { color: var(--red); }

/* --------------------------------------------------------------------------
   05. KI-HINWEIS (Art. 50 KI-VO — Bildwelt ist generiert)
   -------------------------------------------------------------------------- */
.dict-ai-note {
    margin-top: 64px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    font-family: var(--f-label);
    font-size: 0.68rem;
    line-height: 1.7;
    letter-spacing: 0.6px;
    color: rgba(255,255,255,0.45);
    max-width: 74ch;
}

/* --------------------------------------------------------------------------
   06. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .dict-hero-ui { padding-top: 120px; }
    .dict-hero-controls { bottom: 18px; }
    .dict-card a { min-height: 118px; padding: 16px; }
    .dict-term-head { margin-top: -54px; }
}
/* Unter 700px eine Spalte: nebeneinander passt weder ein zweites Feld noch
   ein zwoelfstelliges Wort in der breiten Display-Font. Begriff oben,
   Kategorie darunter — Karte bleibt flach. */
@media (max-width: 700px) {
    .dict-page { padding-bottom: 120px; } /* Platz fuer die mobile Ticket-CTA */
    .dict-grid { grid-template-columns: 1fr; }
    .dict-card a {
        gap: 8px;
        min-height: 0;
        padding: 14px 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dict-slide { transition: none; }
    .dict-card a { transition: none; }
}