/* Shared styles for the legal pages (Impressum / Datenschutz), EN + DE.
   Rewritten 25 Aug 2026 to the dark calm language of the main page: same
   tokens, serif at 400, one copy size, cards opened out onto hairlines,
   quiet underlined links. The class names are unchanged, so the four HTML
   pages carry no styling of their own. */
:root{
  --bg:#131417;--bg2:#1A1C20;--card:#191B1F;--brd:#2C2F34;
  --tx:#F2F0ED;--tm:#CFD3D8;--td:#A5ABB3;
  --em:#EDB9A8;--em-dark:#F6D3C7;--em-bg:rgba(237,185,168,.10);
  --radius:6px;--shadow:none;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;color:var(--tm);background:var(--bg);line-height:1.78;font-size:16px;-webkit-font-smoothing:antialiased}
.container{max-width:1024px;margin:0 auto;padding:0 32px}
a{color:var(--em);text-decoration:none;transition:color .2s,border-color .2s;padding-bottom:1px;border-bottom:1px solid rgba(237,185,168,.45)}
a:hover{color:var(--em-dark);border-bottom-color:var(--em-dark)}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--em);color:#131417;padding:10px 18px;border-radius:0 0 8px 0;z-index:200;font-size:15px;border-bottom:none}
.skip-link:focus{left:0;color:#131417}
:focus-visible{outline:2px solid var(--em);outline-offset:3px;border-radius:4px}

/* NAV — one dark bar, the name alone, as on the main page. */
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(19,20,23,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--brd);box-shadow:none}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:62px}
.nav-name{font-family:'Cormorant Garamond',Georgia,serif;font-size:22px;font-weight:500;color:#EDB9A8;letter-spacing:0;border-bottom:none}
.nav-name:hover{color:var(--tx)}
.nav-name img{display:none}
.nav-name span{display:none}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{font-size:14.5px;font-weight:400;color:var(--tm);border-bottom:none}
.nav-links a:hover{color:var(--em-dark)}
.btn-nav{padding:0 0 2px;background:none;color:var(--em)!important;border-radius:0;font-size:14.5px;font-weight:400;border-bottom:1px solid rgba(237,185,168,.45)!important}
.btn-nav:hover{background:none;color:var(--em-dark)!important;border-bottom-color:var(--em-dark)!important;transform:none}
.lang-switch{font-size:14px!important;font-weight:400!important;padding:4px 10px;border:1px solid var(--brd);border-radius:5px;color:var(--td)!important;border-bottom:1px solid var(--brd)!important}
.lang-switch:hover{border-color:var(--em)!important;color:var(--em)!important}
.hamburger{display:none;background:none;border:none;cursor:pointer;padding:4px}
.hamburger span{display:block;width:22px;height:2px;background:var(--tx);margin:5px 0;transition:all .3s}

/* HEADER */
.legal-header{padding:150px 0 44px;border-bottom:1px solid var(--brd)}
.s-label{font-size:13px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--td);margin-bottom:14px}
.s-title{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(27px,3.2vw,37px);font-weight:400;letter-spacing:0;margin-bottom:14px;line-height:1.2;color:var(--tx)}
.s-sub{font-size:16px;color:var(--tm);line-height:1.7;max-width:640px}

/* PROSE */
.legal-body{padding:56px 0 104px}
.prose{max-width:720px}
.prose h2{font-family:'Cormorant Garamond',Georgia,serif;font-size:24px;font-weight:400;margin:48px 0 14px;line-height:1.3;letter-spacing:0;color:var(--tx)}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:16px;font-weight:600;margin:24px 0 6px;color:var(--tx)}
.prose p{font-size:16px;color:var(--tm);margin-bottom:14px}
.prose ul{list-style:none;margin:0 0 16px}
.prose li{font-size:16px;color:var(--tm);padding:4px 0 4px 18px;position:relative}
.prose li::before{content:'';position:absolute;left:0;top:16px;width:5px;height:5px;border-radius:50%;background:var(--em)}
.prose strong{color:var(--tx);font-weight:600}
.prose address{font-style:normal;color:var(--tm);font-size:16px;margin-bottom:14px}

/* The data blocks open out: one hairline above, no card, no fill. */
.datablock{background:none;border:none;border-top:1px solid var(--brd);border-radius:0;padding:20px 0 6px;margin-bottom:20px}
.datablock dl{display:grid;grid-template-columns:200px 1fr;gap:8px 24px;font-size:16px}
.datablock dt{color:var(--td);font-weight:400}
.datablock dd{color:var(--tx)}

.note{background:none;border:none;border-left:2px solid var(--em);border-radius:0;padding:4px 0 4px 20px;margin:22px 0;font-size:15.5px;color:var(--td)}

/* Placeholders stay loud on purpose: they mark what still has to be filled
   in, and must not fade into the calm around them. */
.updated{font-size:14px;color:var(--td);margin-top:48px;padding-top:20px;border-top:1px solid var(--brd)}

/* FOOTER */
footer{padding:32px 0;border-top:1px solid var(--brd);background:var(--bg)}
.footer-in{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.footer-in p{font-size:14px;color:var(--td)}
.footer-links{display:flex;gap:20px;flex-wrap:wrap}
.footer-links a{font-size:14px;color:var(--td);border-bottom:none}
.footer-links a:hover{color:var(--em-dark)}

@media(max-width:768px){
  .nav-links{display:none;position:absolute;top:62px;left:0;right:0;background:#15171B;border-bottom:1px solid var(--brd);flex-direction:column;padding:20px 28px;gap:16px}
  .nav-links.open{display:flex}
  .hamburger{display:block}
  .datablock dl{grid-template-columns:1fr;gap:2px}
  .datablock dt{margin-top:10px}
  .footer-in{flex-direction:column;text-align:center}
  .legal-header{padding:130px 0 36px}
}