/* Backyard Control: legal pages (Impressum, Datenschutz, Nutzungsbedingungen). Same type, colours
   and accent as the landing (styles.css), no motion, no script. Everything local. */
@font-face{font-family:"Tektur";src:url(fonts/tektur-latin-var.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url(fonts/satoshi-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url(fonts/satoshi-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url(fonts/satoshi-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --bg:#000;--ink:#fff;--soft:#d4d4d4;--muted:#8c8c8c;--line:#232323;--panel:#0c0c0c;--acc:#f0a93b;--bad:#ff8a7a;
  --font:"Satoshi",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"Tektur","Satoshi",system-ui,sans-serif;
  --pad:clamp(20px,4.2vw,64px);
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);color-scheme:dark;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--soft);font-family:var(--font);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:#fff;color:#000}
a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.4);overflow-wrap:anywhere}
a:hover{text-decoration-color:#fff}
:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* header: the landing's lockup, "Anmelden" top right */
.lhead{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:860px;margin:0 auto;
  padding:calc(20px + env(safe-area-inset-top,0px)) var(--pad) 0}
.lockup{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;color:#fff;text-decoration:none}
.lockup .mk{width:28px;height:28px;flex:none}
.lockup .wm{font:700 19px/1 var(--font);letter-spacing:-.03em}
.login{font-size:14px;font-weight:500;color:var(--soft);text-decoration:none;padding:12px 4px}
.login:hover{color:#fff}

/* the text */
.lmain{max-width:860px;margin:0 auto;padding:clamp(40px,7vw,88px) var(--pad) 40px}
.legal-doc{display:flex;flex-direction:column;gap:14px}
.legal-doc h1{font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:.01em;line-height:.95;
  font-size:clamp(34px,6vw,64px);color:#fff;margin:6px 0 10px;transform:skewX(-12deg);transform-origin:left bottom;
  overflow-wrap:anywhere;hyphens:auto}
.legal-doc h2{font:700 clamp(19px,1.6vw,22px)/1.3 var(--font);letter-spacing:-.01em;color:#fff;margin:0;text-wrap:balance}
.legal-doc h3{font:700 17px/1.35 var(--font);color:#fff;margin:10px 0 0}
.legal-doc h4{font:700 15px/1.35 var(--font);color:var(--ink);margin:6px 0 0}
.legal-doc section{display:flex;flex-direction:column;gap:10px;padding-top:26px;margin-top:12px;border-top:1px solid var(--line);scroll-margin-top:24px}
.legal-doc h3[id]{scroll-margin-top:24px}
.legal-doc p{margin:0;max-width:72ch}
.legal-doc ul{margin:0;padding-left:1.2rem;display:flex;flex-direction:column;gap:6px;max-width:72ch}
.legal-doc strong{color:#fff;font-weight:700}
.legal-doc p.legal-lang{font-size:14px;color:var(--muted)}
.legal-doc p.legal-stand{font-size:13px;color:var(--muted)}
.legal-doc p.legal-links{margin-top:18px;font-size:14px;color:var(--muted)}
.legal-doc section:target{border-top-color:var(--acc)}

/* contact form (Impressum): posts to the app server, comes back with #gesendet / #nicht-gesendet */
.legal-doc p.legal-note{display:none;padding:12px 14px;border-radius:14px;border:1px solid rgba(240,169,59,.45);background:rgba(240,169,59,.08);color:#fff}
.legal-doc p.legal-note-err{border-color:rgba(255,138,122,.45);background:rgba(255,138,122,.08);color:var(--bad)}
.legal-doc p.legal-note:target{display:block}
.legal-contact{display:flex;flex-direction:column;gap:14px;margin-top:6px;max-width:560px}
.fld{display:flex;flex-direction:column;gap:6px}
.fld-label{font-size:13px;font-weight:500;color:var(--soft)}
.fld input,.fld textarea{font:inherit;font-size:16px;color:#fff;background:var(--panel);border:1px solid #2e2e2e;border-radius:14px;
  padding:12px 14px;width:100%;transition:border-color .2s}
.fld textarea{resize:vertical;min-height:140px}
.fld input:focus-visible,.fld textarea:focus-visible{outline:none;border-color:#fff}
.fld-hint{font-size:13px;color:var(--muted)}
.legal-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn-primary{align-self:flex-start;height:48px;padding:0 24px;border:0;border-radius:999px;background:#fff;color:#000;
  font:700 15px/1 var(--font);cursor:pointer;touch-action:manipulation;transition:background .2s}
.btn-primary:hover{background:#cfcfcf}
.btn-primary:active{transform:scale(.985)}

.lfoot{max-width:860px;margin:0 auto;padding:0 var(--pad) calc(36px + env(safe-area-inset-bottom,0px))}
.lfoot nav{display:flex;flex-wrap:wrap;gap:10px 22px;border-top:1px solid var(--line);padding-top:18px;font-size:14px}
.lfoot a{color:var(--muted);text-decoration:none}
.lfoot a:hover{color:#fff}