/* /style.css  — AKTUELL, inkl. Versalien + Motion-Reduce + X-Spin  */

/* ========== FONTS ========== */
@font-face{font-family:"N27-Bold";src:url("/font/n27-bold-webfont.woff2") format("woff2"),url("/font/n27-bold-webfont.woff") format("woff"),url("/font/n27-bold-webfont.eot?#iefix") format("embedded-opentype"),url("/font/n27-bold-webfont.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"N27-Regular";src:url("/font/n27-regular-webfont.woff2") format("woff2"),url("/font/n27-regular-webfont.woff") format("woff"),url("/font/n27-regular-webfont.eot?#iefix") format("embedded-opentype"),url("/font/n27-regular-webfont.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}

/* ========== TOKENS ========== */
:root{
  --edge:50px;
  --mo:#00C2C7; --di:#1EC971; --mi:#FFD600; --do:#FF6B00; --fr:#E6007E; --sa:#7E2CE0; --so:#0B43FF;
  --text:#FFFFFF; --hover:#C5D33E;
  --legal-top-desktop:175px; --legal-top-tablet:150px;
  /* Offsets X */
  --d-x-offset-x:25%; --d-x-offset-y:-20%;
  --t-l-x-offset-x:0;  --t-l-x-offset-y:0;
  --t-p-x-offset-x:0;  --t-p-x-offset-y:270px;
  --m-x-offset-x:-30%; --m-x-offset-y:12%;
  /* Mobile Tuning */
  --m-headline-top:clamp(50px,12vh,120px);
  --m-clock-gap:12px; --m-clock-top-adjust:-35px; --m-hero-top:8px; --m-cta-top:25%;
  --m-footer-space:26vh; --m-x-width:min(118vw,900px);
  /* Spin-Speed (Propeller) */
  --spin-speed:0.4s;
}

/* ========== BASE ========== */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:#000;color:var(--text);font-family:"N27-Bold",system-ui,Arial,Helvetica,sans-serif;text-transform:uppercase}
.wrap{min-height:100%;display:flex;flex-direction:column;position:relative;overflow:hidden;background:var(--so);transition:background-color .4s ease}

/* ========== HEADER ========== */
.top{position:absolute;top:var(--edge);left:var(--edge);right:var(--edge);display:flex;justify-content:space-between;align-items:center;z-index:2}
.top .brand{width:clamp(220px,26vw,350px);height:auto;display:block}
.legal{display:flex;gap:26px;align-items:center;text-align:right}
.legal a{color:var(--text);text-decoration:none;font-size:clamp(10.7px,1.2vw,16px);line-height:1;letter-spacing:.02em;font-weight:700;text-transform:uppercase}
.legal a:hover{color:var(--hover)}

/* ========== MAIN (Desktop Default) ========== */
main{flex:1;position:relative;z-index:1;width:100%;padding-bottom:8vh}
.headline{position:relative;display:block;left:calc(var(--edge) - 7px);margin-top:max(100px,20vh);width:80vw;max-height:65vh;height:auto;object-fit:contain}

/* Uhr (Desktop/Tablet) — doppelte Größe */
#clock{font-size:clamp(28px,2.2vw,38px);font-weight:700;line-height:1.4;margin-top:18px}

.x-shape{position:absolute;left:50%;transform:translate(var(--d-x-offset-x),var(--d-x-offset-y));width:min(56vw,900px);height:auto;z-index:0;opacity:.95;pointer-events:none}
.x-mark{position:absolute;right:45px;bottom:16.5vh;z-index:2;width:70px;height:auto}
.cta{position:absolute;right:140px;bottom:16.5vh;z-index:2;font-size:clamp(18px,1.5vw,20px);line-height:1.8;letter-spacing:.02em;text-align:right}
.cta a{color:var(--text);text-decoration:none}
.cta a:hover{color:var(--hover)}

/* Footer/Social */
footer{position:absolute;left:var(--edge);bottom:50px;z-index:2}
.social{display:flex;gap:14px;align-items:center}
.social a img{width:28px;height:28px;display:block;filter:brightness(0) invert(1);transition:filter .25s ease,transform .12s ease}
.social a img:hover{filter:invert(78%) sepia(42%) saturate(702%) hue-rotate(36deg) brightness(94%) contrast(90%);transform:translateY(-1px)}

/* ========== LEGAL PAGES ========== */
body.legal-page{font-family:"N27-Regular",system-ui,Arial,Helvetica,sans-serif;text-transform:none}
body.legal-page .wrap{background:var(--so)}
body.legal-page .top{position:absolute;top:var(--edge);left:var(--edge);right:var(--edge)}
.legal-content{margin-left:var(--edge);margin-right:var(--edge);padding-right:clamp(24px,6vw,80px);width:auto;max-width:none;padding-top:175px;padding-bottom:40px}
.legal-content p,.legal-content li{overflow-wrap:anywhere;word-wrap:break-word;hyphens:auto}
.legal-content h1,.legal-content h2{font-family:"N27-Bold",system-ui,Arial,Helvetica,sans-serif;text-transform:uppercase;letter-spacing:.01em;line-height:1.15;margin:0 0 22px 0;font-weight:700}
.legal-content h1{font-size:clamp(28px,3.2vw,42px)}
.legal-content h2{font-size:clamp(22px,2.4vw,30px);margin-top:44px}
/* Text + Links = weiß */
.legal-content p,.legal-content li{font-family:"N27-Regular",system-ui,Arial,Helvetica,sans-serif;font-size:clamp(14px,1.2vw,18px);line-height:1.6;margin:0 0 16px 0;text-transform:none;color:var(--text)}
.legal-content a,.legal-content a:link,.legal-content a:visited{color:var(--text)!important;text-decoration:underline}
.legal-content a:hover{color:var(--hover)!important}
.legal-block{margin-bottom:34px}
body.legal-page footer{display:none}
/* Aktiver Link */
body.legal-page.impressum .legal a[href*="impressum"],
body.legal-page.datenschutz .legal a[href*="datenschutz"]{pointer-events:none;color:var(--text)!important;text-decoration:underline;opacity:1}

/* ========== TABLET LANDSCAPE ≤900px ========== */
@media (max-width:900px) and (orientation:landscape){
  .x-shape{transform:translate(var(--t-l-x-offset-x),var(--t-l-x-offset-y));width:min(60vw,800px)}
}

/* ========== TABLET PORTRAIT ≤900px ========== */
@media (max-width:900px) and (orientation:portrait){
  .x-shape{transform:translate(var(--t-p-x-offset-x),var(--t-p-x-offset-y));width:min(70vw,900px)}
  /* Logo 25% größer im Portrait */
  body:not(.legal-page) .top .brand{width:calc(clamp(220px,26vw,350px) * 1.25)}
}

/* ========== MOBILE ≤540px ========== */
@media (max-width:540px){
  main{position:relative;min-height:100vh;padding-bottom:var(--m-footer-space);display:grid;grid-template-areas:"headline" "clock" "hero";grid-auto-rows:auto;justify-items:center;align-items:start}
  body:not(.legal-page) .top{position:relative;top:36px;left:0;right:0;width:100%;padding:0 24px;display:flex;justify-content:flex-start;align-items:center}
  body:not(.legal-page) .top .brand{width:min(92vw,520px);height:auto;margin:0}
  body:not(.legal-page) .headline{grid-area:headline;margin-top:var(--m-headline-top);width:calc(100% - 48px);max-width:none;z-index:1;left:auto}
  body:not(.legal-page) #clock{grid-area:clock;margin-top:var(--m-clock-gap)!important;width:calc(100% - 48px);text-align:left!important;margin-left:10px;font-size:16px!important;font-weight:700!important;position:relative;top:var(--m-clock-top-adjust);z-index:2!important}
  .hero-art{grid-area:hero;width:100%;margin-top:var(--m-hero-top);position:relative;display:block;min-height:28vh}
  body:not(.legal-page) .x-shape{position:absolute;left:50%;transform:translateX(var(--m-x-offset-x));bottom:var(--m-x-offset-y);width:var(--m-x-width);height:auto;z-index:0;opacity:.95;pointer-events:none}
  body:not(.legal-page) .cta{position:absolute;left:50%;top:var(--m-cta-top);transform:translate(-50%,-50%);margin:0;width:calc(100% - 48px);text-align:left;font-size:clamp(14px,3.8vw,16px);line-height:1.7;z-index:2}
  body:not(.legal-page) .x-mark{display:none!important}
  body:not(.legal-page) footer{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(56px + env(safe-area-inset-bottom));width:90vw;z-index:3;display:flex;justify-content:center;align-items:center;text-align:center}
  body:not(.legal-page) .social{justify-content:center;gap:16px}
  body:not(.legal-page) .social a img{width:28px;height:28px}
  body:not(.legal-page) .legal{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom));z-index:3;gap:22px;text-align:center}
  body:not(.legal-page) .legal a{font-weight:700;text-transform:uppercase;font-size:13px;line-height:1}
}

/* ========== TEXT-AUSWAHL ========== */
::-moz-selection{background:#C5D33E;color:#2D3941;text-shadow:none}
::selection{background:#C5D33E;color:#2D3941;text-shadow:none}

/* ========== X-Mark: Propeller auf E-Mail-Hover (nur Desktop) ========== */
@media (hover:hover) and (pointer:fine){
  main:has(.cta a:hover) .x-mark,
  main:has(.cta a:focus) .x-mark{animation:spinX var(--spin-speed) linear infinite}
  .x-mark{transition:transform .25s ease-out}
}
@keyframes spinX{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* Bewegungs-Reduktion (A11y) */
@media (prefers-reduced-motion: reduce){
  .x-mark{animation:none !important;transition:none !important}
}