/* CSS von tmp/page_datenschutz.php — ausgelagert aus dem Inline-<style>-Block.
 * Eingebunden ueber $pageCss in tmp/header.php. */

/* ═══════════════════════════════════════════════════════════════
   Datenschutz — Dark Luxury Enterprise
   ═══════════════════════════════════════════════════════════════ */

.dse-wrap {
    max-width: 860px;
    margin: 0 auto;
    padding: 3.5rem 1.5rem 6rem;
    position: relative;
}

/* ── Background atmosphere ───────────────────────────────────── */
.dse-wrap::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(201,168,76,.035) 0%, transparent 60%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.022'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

/* ── Hero ─────────────────────────────────────────────────────── */
.dse-hero {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    z-index: 1;
    animation: dseFadeUp .8s cubic-bezier(.22,1,.36,1) both;
}

.dse-kicker {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    font-family: system-ui, sans-serif;
    font-size: .6rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: #c9a84c;
    margin-bottom: 1.4rem;
}
.dse-kicker-line      { display:block; width:28px; height:1px; background:linear-gradient(to right,transparent,#c9a84c); }
.dse-kicker-line.rev  { background:linear-gradient(to left,transparent,#c9a84c); }

.dse-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(2.4rem, 5.5vw, 4.2rem);
    font-weight: 300;
    letter-spacing: .14em;
    color: #f2e8d0;
    text-transform: uppercase;
    line-height: 1.05;
    margin: 0 0 .5rem;
}
.dse-title em { font-style:normal; color:#c9a84c; }

.dse-ornament {
    display:flex; align-items:center; justify-content:center;
    gap:.75rem; margin:1.2rem 0 .9rem;
}
.dse-ornament-line     { width:50px; height:1px; background:linear-gradient(to right,transparent,rgba(201,168,76,.45)); }
.dse-ornament-line.rev { background:linear-gradient(to left,transparent,rgba(201,168,76,.45)); }
.dse-ornament svg { color:#c9a84c; opacity:.7; }

.dse-sub {
    font-family: system-ui, sans-serif;
    font-size: .65rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #8a8170;
    margin-bottom: .6rem;
}

.dse-updated-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: system-ui, sans-serif;
    font-size: .6rem;
    letter-spacing: .12em;
    color: #9a9180;
    border: 1px solid rgba(201,168,76,.12);
    border-radius: 20px;
    padding: .3rem .8rem;
    margin-top: .4rem;
}
.dse-updated-badge svg { width:10px; height:10px; color:#c9a84c; opacity:.7; }

/* ── Quick jump nav ───────────────────────────────────────────── */
.dse-nav {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    justify-content: center;
    margin-bottom: 3rem;
    animation: dseFadeUp .7s .1s cubic-bezier(.22,1,.36,1) both;
}

.dse-nav a {
    font-family: system-ui, sans-serif;
    font-size: .58rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #8a8170;
    text-decoration: none;
    border: 1px solid rgba(201,168,76,.1);
    border-radius: 20px;
    padding: .28rem .75rem;
    transition: color .2s, border-color .2s, background .2s;
    white-space: nowrap;
}
.dse-nav a:hover {
    color: #c9a84c;
    border-color: rgba(201,168,76,.3);
    background: rgba(201,168,76,.05);
}

/* ── Group divider ────────────────────────────────────────────── */
.dse-group {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2.5rem 0 1.2rem;
}
.dse-group-text {
    font-family: system-ui, sans-serif;
    font-size: .58rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: #8a8170;
    white-space: nowrap;
}
.dse-group::before,
.dse-group::after { content:''; flex:1; height:1px; background:rgba(201,168,76,.08); }

/* ── Section card ─────────────────────────────────────────────── */
.dse-section {
    position: relative;
    z-index: 1;
    background: linear-gradient(135deg, rgba(22,17,9,.72) 0%, rgba(17,13,7,.55) 100%);
    border: 1px solid rgba(201,168,76,.12);
    border-left: 2px solid rgba(201,168,76,.5);
    border-radius: 0 10px 10px 0;
    padding: 1.75rem 2rem 1.75rem 1.75rem;
    margin-bottom: 1.2rem;
    backdrop-filter: blur(12px);
    transition: border-color .3s, background .3s, box-shadow .3s;
    overflow: hidden;
    scroll-margin-top: 5rem;
}
.dse-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, rgba(201,168,76,.03) 0%, transparent 50%);
    pointer-events: none;
}
.dse-section::after {
    content: attr(data-num);
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Cormorant Garamond', serif;
    font-size: 4.5rem;
    font-weight: 300;
    color: rgba(201,168,76,.045);
    letter-spacing: .05em;
    line-height: 1;
    pointer-events: none;
    user-select: none;
}
.dse-section:hover {
    border-left-color: #c9a84c;
    border-color: rgba(201,168,76,.25);
    background: linear-gradient(135deg, rgba(28,21,11,.82) 0%, rgba(22,17,9,.65) 100%);
    box-shadow: -3px 0 20px -6px rgba(201,168,76,.18), 0 4px 20px -8px rgba(0,0,0,.4);
}

/* ── Section header ───────────────────────────────────────────── */
.dse-head {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.1rem;
}
.dse-icon-box {
    flex-shrink: 0;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(201,168,76,.2);
    border-radius: 8px;
    background: rgba(201,168,76,.055);
    color: #c9a84c;
    transition: background .3s, border-color .3s;
}
.dse-section:hover .dse-icon-box {
    background: rgba(201,168,76,.11);
    border-color: rgba(201,168,76,.38);
}
.dse-icon-box svg { width: 20px; height: 20px; }

.dse-head-meta { flex: 1; min-width: 0; }
.dse-label {
    font-family: system-ui, sans-serif;
    font-size: .58rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #9a9180;
    margin-bottom: .2rem;
}
.dse-title-section {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.2rem;
    font-weight: 500;
    color: #e8d9b8;
    letter-spacing: .04em;
    margin: 0;
    line-height: 1.2;
}

/* ── Body text (large, elegant) ──────────────────────────────── */
.dse-body {
    padding-left: 3.25rem;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.08rem;
    line-height: 1.75;
    color: #b0a898;
}
.dse-body strong {
    color: #e0d4bc;
    font-weight: 600;
    font-size: 1.15rem;
}
.dse-body a { color:#c9a84c; text-decoration:none; border-bottom:1px solid rgba(201,168,76,.28); transition:color .2s,border-color .2s; }
.dse-body a:hover { color:#e8c876; border-bottom-color:rgba(232,200,118,.55); }

/* ── Body text (small, legal) ────────────────────────────────── */
.dse-legal {
    padding-left: 3.25rem;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: .8rem;
    line-height: 1.82;
    color: #9a9180;
}
.dse-legal a { color:#c9a84c; text-decoration:none; border-bottom:1px solid rgba(201,168,76,.25); }
.dse-legal a:hover { color:#e8c876; }

/* ── Art. pill badge ──────────────────────────────────────────── */
.art-pill {
    display: inline-flex;
    align-items: center;
    font-family: system-ui, sans-serif;
    font-size: .55rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #c9a84c;
    background: rgba(201,168,76,.08);
    border: 1px solid rgba(201,168,76,.18);
    border-radius: 10px;
    padding: .18rem .55rem;
    margin-left: .35rem;
    vertical-align: middle;
    white-space: nowrap;
}

/* ── Sub-items inside a card ──────────────────────────────────── */
.dse-subitems {
    padding-left: 3.25rem;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    margin-top: .15rem;
}

.dse-subitem {
    background: rgba(201,168,76,.03);
    border: 1px solid rgba(201,168,76,.08);
    border-left: 1px solid rgba(201,168,76,.22);
    border-radius: 0 6px 6px 0;
    padding: .85rem 1rem .85rem .9rem;
}

.dse-subitem-head {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .35rem;
}
.dse-subitem-icon {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(201,168,76,.15);
    border-radius: 5px;
    background: rgba(201,168,76,.04);
    color: rgba(232,205,128,.8);
    flex-shrink: 0;
}
.dse-subitem-icon svg { width: 14px; height: 14px; }
.dse-subitem-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1rem;
    font-weight: 500;
    color: #c8bfa8;
    margin: 0;
}
.dse-subitem p {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: .77rem;
    line-height: 1.78;
    color: #9a9180;
    margin: 0;
}
.dse-subitem p a { color:#c9a84c; text-decoration:none; border-bottom:1px solid rgba(201,168,76,.22); }
.dse-subitem code {
    font-family: 'Courier New', monospace;
    font-size: .72rem;
    background: rgba(201,168,76,.07);
    border: 1px solid rgba(201,168,76,.12);
    border-radius: 3px;
    padding: .05rem .3rem;
    color: #c9a84c;
}

/* ── Rights grid ──────────────────────────────────────────────── */
.dse-rights-grid {
    padding-left: 3.25rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .7rem;
    margin-top: .15rem;
}

.dse-right-tile {
    background: rgba(201,168,76,.03);
    border: 1px solid rgba(201,168,76,.1);
    border-radius: 8px;
    padding: .9rem .85rem;
    transition: background .25s, border-color .25s;
}
.dse-right-tile:hover {
    background: rgba(201,168,76,.07);
    border-color: rgba(201,168,76,.22);
}
.dse-right-tile-top {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .3rem;
}
.dse-right-tile-icon {
    color: rgba(232,205,128,.8);
    flex-shrink: 0;
}
.dse-right-tile-icon svg { width: 15px; height: 15px; }
.dse-right-tile-name {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: .98rem;
    font-weight: 500;
    color: #c8bfa8;
}
.dse-right-tile-art {
    font-family: system-ui, sans-serif;
    font-size: .56rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(232,205,128,.7);
    margin-bottom: .3rem;
    padding-left: 1.5rem;
}
.dse-right-tile-desc {
    font-family: system-ui, sans-serif;
    font-size: .72rem;
    line-height: 1.6;
    color: #8a8170;
    padding-left: 1.5rem;
}

/* ── Staggered animations ─────────────────────────────────────── */
@keyframes dseFadeUp {
    from { opacity:0; transform:translateY(16px); }
    to   { opacity:1; transform:translateY(0); }
}

.dse-s1  { animation: dseFadeUp .65s .12s cubic-bezier(.22,1,.36,1) both; }
.dse-s2  { animation: dseFadeUp .65s .20s cubic-bezier(.22,1,.36,1) both; }
.dse-s3  { animation: dseFadeUp .65s .28s cubic-bezier(.22,1,.36,1) both; }
.dse-s4  { animation: dseFadeUp .65s .34s cubic-bezier(.22,1,.36,1) both; }
.dse-s5  { animation: dseFadeUp .65s .40s cubic-bezier(.22,1,.36,1) both; }
.dse-s6  { animation: dseFadeUp .65s .46s cubic-bezier(.22,1,.36,1) both; }
.dse-s7  { animation: dseFadeUp .65s .52s cubic-bezier(.22,1,.36,1) both; }
.dse-s8  { animation: dseFadeUp .65s .58s cubic-bezier(.22,1,.36,1) both; }
.dse-s9  { animation: dseFadeUp .65s .64s cubic-bezier(.22,1,.36,1) both; }
.dse-s10 { animation: dseFadeUp .65s .70s cubic-bezier(.22,1,.36,1) both; }
.dse-s11 { animation: dseFadeUp .65s .76s cubic-bezier(.22,1,.36,1) both; }

.dse-group { animation: dseFadeUp .6s cubic-bezier(.22,1,.36,1) both; }
.dse-g1    { animation-delay:.16s; }
.dse-g2    { animation-delay:.36s; }
.dse-g3    { animation-delay:.54s; }
.dse-g4    { animation-delay:.68s; }

/* ── Back link ────────────────────────────────────────────────── */
.dse-back {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    margin-top: 3.5rem;
    animation: dseFadeUp .6s .85s cubic-bezier(.22,1,.36,1) both;
}
.dse-back a {
    display:inline-flex; align-items:center; gap:.6rem;
    font-family:system-ui,sans-serif; font-size:.6rem;
    letter-spacing:.2em; text-transform:uppercase;
    color:#8a8170; text-decoration:none;
    padding:.7rem 1.6rem;
    border:1px solid rgba(201,168,76,.1);
    border-radius:40px;
    transition:color .25s,border-color .25s,background .25s;
}
.dse-back a:hover { color:#c9a84c; border-color:rgba(201,168,76,.32); background:rgba(201,168,76,.05); }
.dse-back a svg { width:13px; height:13px; transition:transform .25s; }
.dse-back a:hover svg { transform:translateX(-3px); }