/* ==========================================================================
   4T6W Glass — Linkseite

   Übernimmt zwei Ideen aus dem Entwurf, die dem Shop-Glas objektiv voraus
   waren:

     1. Das Hintergrundlogo ist weichgezeichnet. Es wirkt dadurch als Tiefe
        statt als Muster, und der Text darüber bleibt lesbar, ohne dass die
        Deckkraft heruntergedreht werden muss.

     2. Eine innere Lichtkante oben am Panel — inset 0 1px 0 —, der Reflex,
        der Glas erst wie Glas aussehen lässt. Ohne ihn wirkt eine
        durchscheinende Fläche flach.

   Beides wandert von hier aus auch in die Shop-Karten.
   ========================================================================== */

.linkpage {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(28px, var(--safe-t)) 20px calc(28px + var(--safe-b));
    overflow-x: hidden;

    /*
     * Eigener Grund, nur auf dieser Seite. --scene ist im Hellmodus reines
     * Weiß — und eine weiße Glasscheibe auf weißem Grund hat nichts, wogegen
     * sie sich abheben könnte. Im Dunkelmodus funktioniert dieselbe Karte
     * sofort, weil dort Schwarz dahinterliegt. Ein leicht grauer Grund gibt
     * dem Glas im Hellen dasselbe zurück: eine Kante, einen Reflex und einen
     * Ring, den man sieht.
     */
    --scene: #edeff2;
}

/* --------------------------------------------------------------------------
   Hintergrund
   -------------------------------------------------------------------------- */

.lp-scene {
    position: fixed;
    inset: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: var(--scene);
}

/*
 * Das Bildschirmlogo entfällt. Es hing an der Bildschirmmitte, das Panel aber
 * nicht — dadurch stand der Ring nie über dem Logo der Karte, sondern schnitt
 * irgendwo daneben durch. Statt dessen: ein Ring, der am Logo hängt. Siehe
 * .lp::before weiter unten.
 */
.lp-scene img {
    display: none;
}

/* --------------------------------------------------------------------------
   Panel
   -------------------------------------------------------------------------- */

.lp {
    position: relative;
    z-index: 1;
    width: 100%;
    /* Schmaler als der Kreis dahinter — sonst deckt die Karte ihn zu. */
    max-width: 248px;

    /*
     * Mitte des Logos, von der Oberkante der Karte aus gerechnet:
     * Rahmen 1px + Polster 30px + halbe Logohöhe 30px = 61px.
     * Ändert sich das Polster oder die Logogröße, muss dieser Wert mit —
     * deshalb steht er hier als Variable und nicht verstreut in den Regeln.
     */
    --lp-kreis: min(94vw, 380px);
}

/*
 * Das Logo als Kreis hinter der Karte — an der KARTE zentriert, nicht am
 * Bildschirm. Das war der eigentliche Fehler der alten Fassung: es hing an
 * der Bildschirmmitte, die Karte aber nicht, und der Kreis schnitt daneben
 * durch statt rundherum zu laufen.
 *
 * Damit man ihn sieht, muss die Karte schmaler sein als der Kreis. Beide
 * Werte hängen deshalb zusammen und stehen direkt untereinander.
 */
.lp::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--lp-kreis);
    height: var(--lp-kreis);
    transform: translate(-50%, -50%);
    background: var(--lp-mark) center / contain no-repeat;
    opacity: 0.5;
    filter: blur(2px);
    pointer-events: none;
    z-index: 0;
}

/*
 * position ohne z-index. Mit z-index würde die Karte einen eigenen
 * Stapelkontext aufmachen — und die Linkzeilen darin fänden für ihren
 * Weichzeichner nur noch den Kartenhintergrund statt der Seite. Im
 * Dunkelmodus wurden sie dadurch hellgrau. Ohne z-index reicht die
 * Dokumentreihenfolge: der Kreis steht vorher, die Karte danach.
 */
.lp-panel {
    position: relative;
    padding: 20px 14px 14px;
    /*
     * Kein border. Ein gleichmäßiger Strich rundherum sieht gezeichnet aus —
     * Glas hat oben eine Lichtkante und unten Schatten, nicht überall dasselbe.
     * Die Kontur kommt deshalb als inset-Schatten mit sehr wenig Deckkraft,
     * der Reflex als zweiter inset oben.
     */
    border: 0;
    border-radius: 24px;
    /* Kräftiger als die Shop-Karten: hier steht das Panel allein auf einer
       großen Fläche und muss sich selbst tragen. */
    background: rgba(255, 255, 255, 0.42);
    box-shadow:
        inset 0 0 0 1px rgba(17, 17, 17, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        /* Unterkante als leichte Lippe — oben Licht, unten Schatten */
        inset 0 -1px 0 rgba(17, 17, 17, 0.05),
        0 24px 60px rgba(17, 17, 17, 0.13),
        0 3px 10px rgba(17, 17, 17, 0.07);
    -webkit-backdrop-filter: blur(9px) saturate(180%);
    backdrop-filter: blur(9px) saturate(180%);
    text-align: center;
}

.lp-logo {
    width: 46px;
    height: 46px;
    margin: 0 auto 9px;
}

.lp-intro {
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--txt);
    margin: 0;
    text-wrap: pretty;
}

.lp-rule {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 16px 0;
}

/* --------------------------------------------------------------------------
   Zeilen
   -------------------------------------------------------------------------- */

.lp-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lp-row {
    display: flex;
    align-items: center;
    gap: 14px;
    /* Fingerziel, nicht nur Textzeile */
    min-height: var(--tap);
    padding: 12px 14px;
    /*
     * Auch hier kein border. Erst fehlte den Knöpfen jede Kante, weil sie das
     * Shop-Token benutzten — weiß auf weißer Karte. Ein harter grauer Strich
     * als Ersatz sah dann gezeichnet aus. Die Kante entsteht jetzt aus drei
     * Dingen: hauchfeine Kontur, Lichtkante oben, weicher Schatten darunter.
     * Das ist es, was einen Knopf natürlich vom Untergrund abhebt.
     */
    border: 0;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow:
        inset 0 0 0 1px rgba(17, 17, 17, 0.045),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 1px 2px rgba(17, 17, 17, 0.05),
        0 6px 14px rgba(17, 17, 17, 0.055);
    color: var(--txt);
    text-decoration: none;
    /*
     * Kein eigener backdrop-filter. Die Zeile sitzt in einem Panel, das selbst
     * einen hat — verschachtelt greifen die Browser dann nicht auf die Karte
     * zu, sondern auf die Seite dahinter. Solange das Panel mit 44px stark
     * weichzeichnete, fiel das nicht auf; bei 14px wurden die Zeilen im
     * Dunkelmodus hellgrau. In der Seite nachgestellt und wieder abgestellt.
     */
    transition: background var(--t) ease, transform var(--t) ease;
}

@media (hover: hover) and (pointer: fine) {
    .lp-row:hover {
        background: rgba(242, 242, 242, 0.85);
        transform: translateY(-1px);
    }

    
}

.lp-row:active { transform: scale(0.99); }

.lp-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--card-sm);
    color: var(--txt);
}

/*
 * Markenkachel: das SVG bringt seinen eigenen Hintergrund mit, die graue
 * Glasfläche darunter muss also weg — sonst säße Vinteds Türkis auf einem
 * hellen Rahmen. Der weiche Schatten hebt die Kachel minimal von der
 * Zeile ab, so wie bei einem App-Symbol.
 */
.lp-icon.is-brand {
    background: none;
    box-shadow: 0 1px 3px rgba(17, 17, 17, 0.16);
}

/* svg = eigene Zeichnung, img = deine hinterlegte Logodatei */
.lp-icon.is-brand svg,
.lp-icon.is-brand img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.lp-label {
    flex: 1;
    min-width: 0;
    text-align: left;
    font-size: var(--fs-body);
    font-weight: 600;
    line-height: 1.3;
}

.lp-label em {
    display: block;
    font-size: var(--fs-xs);
    font-style: normal;
    font-weight: 500;
    color: var(--txt2);
    margin-top: 1px;
}

.lp-chev {
    flex: 0 0 auto;
    color: var(--txt3);
    font-size: 17px;
    line-height: 1;
}

.lp-empty {
    margin-top: 16px;
    font-size: var(--fs-xs);
    line-height: 1.6;
    color: var(--txt2);
}

/*
 * Die Pflichtangaben stehen UNTER der Karte, nicht darin. Als dritte Zeile
 * zwischen Vinted und Instagram wären sie ein Fremdkörper; als graue
 * Fußzeile sind sie da, wo jeder sie sucht, und stören die Optik nicht.
 */
.lp-legal {
    margin: 18px 0 0;
    text-align: center;
    font-size: 12px;
    line-height: 1.6;
    color: var(--txt3);
}

.lp-legal a {
    color: var(--txt3);
    text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
    text-underline-offset: 2px;
}

.lp-warn {
    padding: 9px 12px;
    border-left: 3px solid var(--warn);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--warn) 14%, transparent);
    text-align: left;
    color: var(--txt);
}

/* --------------------------------------------------------------------------
   Größere Schirme
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
    .lp {
        max-width: 328px;
        --lp-kreis: min(64vw, 560px);
    }

    .lp-panel {
        padding: 30px 26px 22px;
        /* Auf großen Schirmen wirkt weniger Deckkraft edler, weil mehr
           Hintergrund sichtbar bleibt. */
        background: rgba(255, 255, 255, 0.3);
        -webkit-backdrop-filter: blur(8px) saturate(180%);
        backdrop-filter: blur(8px) saturate(180%);
    }

    

    .lp-logo { width: 60px; height: 60px; margin-bottom: 14px; }
    .lp-intro { font-size: 1rem; }
    .lp-row { padding: 17px 19px; }
    .lp-icon { width: 44px; height: 44px; border-radius: 13px; }
    .lp-label { font-size: 1rem; }
}

/* Ohne backdrop-filter bliebe bei 42 % Deckkraft zu viel durchscheinend */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .lp-panel { background: rgba(255, 255, 255, 0.93); }
    .lp-row { background: rgba(255, 255, 255, 0.9); }

    @media (prefers-color-scheme: dark) {
        .lp-panel { background: rgba(20, 20, 24, 0.95); }
        .lp-row { background: rgba(255, 255, 255, 0.1); }
    }
}

/* --------------------------------------------------------------------------
   Dunkelmodus — folgt der Systemeinstellung des Geräts.

   Kein Umschalter, keine Klasse, kein localStorage. Stellt jemand sein
   iPhone oder Samsung auf Dunkel, zieht die Seite mit; stellt er zurück,
   auch. Das ist der Grund, warum diese Regeln in einer Medienabfrage
   stehen und nicht hinter .dark.
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
    /*
     * Grund zurück auf Schwarz. Die Regel oben setzt --scene auf .linkpage,
     * und das ist spezifischer als das :root aus tokens.css — ohne diese
     * Zeile bliebe die Seite auch im Dunkelmodus hellgrau.
     */
    .linkpage {
        --scene: #000000;
    }

    /* Das Logo ist schwarz gezeichnet — auf dunklem Grund muss es umgekehrt
       werden, sonst ist der Kreis unsichtbar. */
    .lp::before {
        filter: blur(2px) invert(1);
        opacity: 0.32;
    }

    /* Gleiches Prinzip wie im Hellmodus, nur umgedreht: die Kontur wird hell
       statt dunkel, der Schatten tiefer. */
    .lp-panel {
        background: rgba(24, 24, 28, 0.55);
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.09),
            inset 0 1px 0 rgba(255, 255, 255, 0.16),
            0 24px 60px rgba(0, 0, 0, 0.55),
            0 3px 10px rgba(0, 0, 0, 0.35);
    }

    .lp-logo {
    filter: invert(1);
    }

    /*
     * Deckend statt 7 % Weiß. Der Kreis hinter der Karte wird im Dunkelmodus
     * invertiert, ist also hell — bei 7 % waren die Zeilen praktisch Fenster
     * und das helle Logo schien voll durch. Sie sollen Knöpfe sein, keine
     * Ausschnitte. Der Schimmer bleibt dort, wo er hingehört: im Panel.
     */
    .lp-row {
        background: rgba(30, 30, 35, 0.78);
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.10),
            inset 0 1px 0 rgba(255, 255, 255, 0.13),
            0 1px 2px rgba(0, 0, 0, 0.35),
            0 6px 14px rgba(0, 0, 0, 0.30);
    }

    .lp-icon.is-brand {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    }

}


@media (hover: hover) and (pointer: fine) and (prefers-color-scheme: dark) {
    .lp-row:hover {
    background: rgba(255, 255, 255, 0.12);
    }

}

@media (min-width: 1024px) and (prefers-color-scheme: dark) {
    .lp-panel {
    background: rgba(24, 24, 28, 0.45);
    }

}