/* ════════════════════════════════════════════════════════════════
   legal-document.css — Layout der Rechts-Seiten (impressum-vhc.php,
   datenschutz.php, nutzungsbedingungen.php). #33/B3 (2026-06-16):
   aus main-vhc.css ausgelagert (war seitenspezifisch, gehoert nicht
   ins globale Stylesheet). In den 3 Seiten via <link> eingebunden.
   Enthaelt: .impressum-page, .impressum-modal (+Kontaktformular),
   @keyframes modalFadeIn/modalSlideIn, .datenschutz-page.
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   IMPRESSUM — alle Stile gewrappt, betreffen nur impressum-vhc.php
   ════════════════════════════════════════════════════════════════ */
.impressum-page.document{max-width:1000px;margin:0 auto;position:relative;z-index:1;padding:2rem 1rem 3rem}
.impressum-page .page-header{text-align:center;margin-bottom:2.5rem;padding-bottom:2rem;position:relative}
.impressum-page .page-header::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:200px;height:1px;background:linear-gradient(90deg,transparent,var(--neon1),transparent)}
.impressum-page .page-icon{width:80px;height:80px;object-fit:contain;margin-bottom:1.25rem;filter:drop-shadow(0 0 12px rgba(0,245,255,0.4))}
.impressum-page .eyebrow{font-family:'Orbitron',monospace;font-size:0.65rem;font-weight:400;letter-spacing:0.25em;color:var(--neon1);text-transform:uppercase;margin-bottom:1rem;opacity:0.8}
.impressum-page .page-title{font-family:'Orbitron',monospace;font-size:1.8rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;background:linear-gradient(135deg,var(--neon1) 0%,var(--neon3) 50%,var(--neon2) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:0.75rem;line-height:1.2}
.impressum-page .lede{font-size:0.92rem;color:var(--muted);letter-spacing:0.05em}
.impressum-page .section{background:var(--card);border:1px solid var(--border);border-left:2px solid var(--neon3);border-radius:8px;padding:1.5rem 1.75rem;margin-bottom:1rem;display:grid;grid-template-columns:44px 1fr;gap:1rem;align-items:start;transition:border-color 0.2s}
.impressum-page .section:hover{border-color:var(--neon1);border-left-color:var(--neon1)}
.impressum-page .section-num{font-family:'Orbitron',monospace;font-size:0.9rem;font-weight:700;color:var(--neon1);opacity:0.85;padding-top:0.2rem;letter-spacing:0.05em}
.impressum-page .section h2{font-family:'Orbitron',monospace;font-size:0.75rem;font-weight:700;color:var(--neon1);letter-spacing:0.15em;text-transform:uppercase;margin-bottom:0.9rem;line-height:1.4}
.impressum-page .section p{color:var(--text);font-size:0.9rem;line-height:1.7;margin-bottom:0.85rem;letter-spacing:0.02em}
.impressum-page .section p:last-child{margin-bottom:0}
.impressum-page .section a{color:var(--neon1);text-decoration:none;border-bottom:1px solid rgba(0,245,255,0.3);transition:color 0.2s,border-color 0.2s}
.impressum-page .section a:hover{color:#fff;border-bottom-color:var(--neon1)}
.impressum-page strong{color:#a8c8f0;font-weight:600}
.impressum-page address{font-style:normal;background:rgba(0,245,255,0.04);border-left:2px solid var(--neon4);padding:0.9rem 1.1rem;margin:0.85rem 0;font-size:0.88rem;line-height:1.8;color:var(--text);letter-spacing:0.03em}
@media(max-width:640px){
  .impressum-page.document{padding:1.5rem 0.75rem 2rem}
  .impressum-page .section{grid-template-columns:36px 1fr;gap:0.75rem;padding:1.25rem}
}

/* ─── Kontaktformular im Impressum-Modal ─── */
.impressum-modal{position:fixed;inset:0;background:rgba(0,0,0,0.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:9999;display:flex;align-items:flex-start;justify-content:center;padding:3rem 1rem;overflow-y:auto;animation:modalFadeIn 0.2s ease}
.impressum-modal[hidden]{display:none}
.impressum-modal .modal-box{background:var(--card);border:1px solid var(--neon1);box-shadow:0 0 40px rgba(0,245,255,0.15),0 20px 60px rgba(0,0,0,0.6);padding:2rem 2.25rem;max-width:640px;width:100%;position:relative;animation:modalSlideIn 0.25s ease}
.impressum-modal .modal-close{position:absolute;top:0.7rem;right:0.7rem;background:transparent;border:1px solid var(--border);color:var(--muted);width:2.2rem;height:2.2rem;cursor:pointer;font-size:1.3rem;line-height:1;font-family:inherit;transition:all 0.2s;display:flex;align-items:center;justify-content:center;padding:0}
.impressum-modal .modal-close:hover{color:var(--neon1);border-color:var(--neon1);background:rgba(0,245,255,0.08)}
.impressum-modal .modal-title{font-family:'Orbitron',monospace;font-size:0.95rem;font-weight:700;letter-spacing:0.15em;color:var(--neon1);text-transform:uppercase;margin-bottom:0.6rem;padding-right:2.5rem}
.impressum-modal .modal-sub{color:var(--muted);font-size:0.85rem;line-height:1.6;margin-bottom:0.5rem;letter-spacing:0.02em}
.impressum-modal .contact-form{display:grid;gap:1rem;margin-top:1.25rem}
.impressum-modal .contact-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.impressum-modal .contact-form label{display:flex;flex-direction:column;gap:0.4rem;font-size:0.82rem}
.impressum-modal .contact-form label > span{font-family:'Orbitron',monospace;font-size:0.6rem;font-weight:700;color:var(--neon1);letter-spacing:0.15em;text-transform:uppercase;opacity:0.85}
.impressum-modal .contact-form input,.impressum-modal .contact-form textarea{background:rgba(0,0,0,0.35);border:1px solid var(--border);border-left:2px solid var(--neon3);color:var(--text);font-family:'Exo 2','Segoe UI',sans-serif;font-size:0.9rem;padding:0.7rem 0.9rem;transition:border-color 0.2s,background 0.2s;border-radius:0}
.impressum-modal .contact-form input:focus,.impressum-modal .contact-form textarea:focus{outline:none;border-color:var(--neon1);border-left-color:var(--neon1);background:rgba(0,245,255,0.04)}
.impressum-modal .contact-form textarea{resize:vertical;min-height:120px;font-family:inherit;line-height:1.55}
.impressum-modal .contact-form .captcha-label{max-width:340px}
.impressum-modal .contact-form .captcha-label > span{font-family:'Orbitron',monospace;font-size:0.6rem;font-weight:700;color:var(--neon1);letter-spacing:0.15em;text-transform:uppercase;opacity:0.85}
.impressum-modal .contact-form .captcha-row{display:flex;gap:0.75rem;align-items:stretch}
.impressum-modal .contact-form .captcha-row canvas{background:#080b14;border:1px solid var(--border);border-left:2px solid var(--neon3);height:44px;flex-shrink:0}
.impressum-modal .contact-form .captcha-row input{flex:1;min-width:0;text-align:center;font-family:'Orbitron',monospace;font-weight:700;letter-spacing:0.08em}
.impressum-modal .contact-form button{font-family:'Orbitron',monospace;font-size:0.72rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--neon1);background:transparent;border:1px solid var(--neon1);padding:0.85rem 1.6rem;cursor:pointer;transition:all 0.25s;justify-self:start;margin-top:0.4rem}
.impressum-modal .contact-form button:hover{background:rgba(0,245,255,0.08);box-shadow:0 0 20px rgba(0,245,255,0.25)}
.impressum-modal .contact-form .hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none}
.impressum-page .form-success{background:rgba(0,255,136,0.06);border:1px solid rgba(0,255,136,0.3);border-left:2px solid var(--neon4);padding:1rem 1.25rem;color:#a8f0c8;font-size:0.9rem;margin-top:1.25rem;letter-spacing:0.02em;line-height:1.55}
.impressum-page .form-success strong{color:var(--neon4);display:block;margin-bottom:0.35rem;font-family:'Orbitron',monospace;font-size:0.72rem;letter-spacing:0.18em;text-transform:uppercase;font-weight:700}
.impressum-modal .form-error{background:rgba(255,80,80,0.06);border:1px solid rgba(255,80,80,0.3);border-left:2px solid #ff5050;padding:0.9rem 1.25rem;color:#ff9a9a;font-size:0.85rem;margin-top:1rem;letter-spacing:0.02em;line-height:1.55}
.impressum-modal .form-error > div{padding:0.15rem 0}
@media(max-width:640px){
  .impressum-modal{padding:1rem 0.5rem}
  .impressum-modal .modal-box{padding:1.5rem 1.25rem}
  .impressum-modal .contact-form .form-row{grid-template-columns:1fr}
}
@keyframes modalFadeIn{from{opacity:0}to{opacity:1}}
@keyframes modalSlideIn{from{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}


/* ════════════════════════════════════════════════════════════════
   DATENSCHUTZ — alle Stile gewrappt, betreffen nur datenschutz.php
   ════════════════════════════════════════════════════════════════ */
.datenschutz-page.document{max-width:1000px;margin:0 auto;position:relative;z-index:1;padding:2rem 1rem 3rem}
.datenschutz-page .page-header{text-align:center;margin-bottom:2.5rem;padding-bottom:2rem;position:relative}
.datenschutz-page .page-header::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:200px;height:1px;background:linear-gradient(90deg,transparent,var(--neon1),transparent)}
.datenschutz-page .page-icon{width:80px;height:80px;object-fit:contain;margin-bottom:1.25rem;filter:drop-shadow(0 0 12px rgba(0,245,255,0.4))}
.datenschutz-page .eyebrow{font-family:'Orbitron',monospace;font-size:0.65rem;font-weight:400;letter-spacing:0.25em;color:var(--neon1);text-transform:uppercase;margin-bottom:1rem;opacity:0.8}
.datenschutz-page .page-title{font-family:'Orbitron',monospace;font-size:1.8rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;background:linear-gradient(135deg,var(--neon1) 0%,var(--neon3) 50%,var(--neon2) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:0.75rem;line-height:1.2}
.datenschutz-page .lede{font-size:0.92rem;color:var(--muted);letter-spacing:0.05em}
.datenschutz-page .toc{background:var(--card);border:1px solid var(--border);border-top:2px solid var(--neon1);border-radius:8px;padding:1.5rem 1.75rem;margin-bottom:1.5rem}
.datenschutz-page .toc-label{font-family:'Orbitron',monospace;font-size:0.6rem;font-weight:700;letter-spacing:0.2em;color:var(--neon1);text-transform:uppercase;margin-bottom:1rem}
.datenschutz-page .toc ol{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0.6rem 2rem}
.datenschutz-page .toc li{font-size:0.78rem;padding-left:2rem;position:relative;line-height:1.3;letter-spacing:0.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.datenschutz-page .toc li .n{position:absolute;left:0;font-family:'Orbitron',monospace;font-size:0.85rem;color:var(--neon1);font-weight:700;top:0.05rem;opacity:0.85}
.datenschutz-page .toc a{color:var(--muted);text-decoration:none;border:none !important;box-shadow:none !important;background:none !important;padding:0 !important;transition:color 0.2s}
.datenschutz-page .toc a:hover{color:var(--neon1);border:none !important}
.datenschutz-page .section{background:var(--card);border:1px solid var(--border);border-left:2px solid var(--neon3);border-radius:8px;padding:1.5rem 1.75rem;margin-bottom:1rem;display:grid;grid-template-columns:44px 1fr;gap:1rem;align-items:start;transition:border-color 0.2s}
.datenschutz-page .section:hover{border-color:var(--neon1);border-left-color:var(--neon1)}
.datenschutz-page .section-num{font-family:'Orbitron',monospace;font-size:0.9rem;font-weight:700;color:var(--neon1);opacity:0.85;padding-top:0.2rem;letter-spacing:0.05em}
.datenschutz-page .section h2{font-family:'Orbitron',monospace;font-size:0.75rem;font-weight:700;color:var(--neon1);letter-spacing:0.15em;text-transform:uppercase;margin-bottom:0.9rem;line-height:1.4}
.datenschutz-page .section p{color:var(--text);font-size:0.9rem;line-height:1.7;margin-bottom:0.85rem;letter-spacing:0.02em}
.datenschutz-page .section p:last-child{margin-bottom:0}
.datenschutz-page .section a{color:var(--neon1);text-decoration:none;border-bottom:1px solid rgba(0,245,255,0.3);transition:color 0.2s,border-color 0.2s}
.datenschutz-page .section a:hover{color:#fff;border-bottom-color:var(--neon1)}
.datenschutz-page code{font-family:'Courier New',Consolas,monospace;background:rgba(0,245,255,0.06);color:var(--neon1);border:1px solid rgba(0,245,255,0.2);padding:0.1em 0.5em;border-radius:2px;font-size:0.9em}
.datenschutz-page strong{color:#a8c8f0;font-weight:600}
.datenschutz-page .provider{font-style:normal;background:rgba(0,245,255,0.04);border-left:2px solid var(--neon4);padding:0.9rem 1.1rem;margin:0.85rem 0;font-size:0.88rem;line-height:1.8;color:var(--text);letter-spacing:0.03em}
.datenschutz-page .rights{list-style:none;padding:0;margin:0.75rem 0}
.datenschutz-page .rights li{padding:0.5rem 0 0.5rem 1.5rem;position:relative;border-bottom:1px solid var(--border);font-size:0.9rem;color:var(--text);line-height:1.55;letter-spacing:0.02em}
.datenschutz-page .rights li:last-child{border-bottom:none}
.datenschutz-page .rights li::before{content:'▸';position:absolute;left:0.1rem;color:var(--neon4);font-size:0.85em;top:0.6rem}
.datenschutz-page .lang-notice{background:var(--card);border:1px solid var(--border);border-top:2px solid var(--neon3);padding:1.25rem 1.75rem;margin-top:1rem;font-size:0.85rem}
.datenschutz-page .lang-notice p{color:var(--muted);line-height:1.65;letter-spacing:0.02em}
.datenschutz-page .lang-notice p+p{margin-top:0.75rem;padding-top:0.75rem;border-top:1px solid var(--border);font-style:italic}
@media(max-width:640px){
  .datenschutz-page.document{padding:1.5rem 0.75rem 2rem}
  .datenschutz-page .toc ol{grid-template-columns:1fr}
  .datenschutz-page .section{grid-template-columns:36px 1fr;gap:0.75rem;padding:1.25rem}
}