/*
 * legal.css
 * ---------
 * Shared stylesheet for impressum.html and datenschutz.html. These two pages
 * were ~95% identical CSS before this refactor, so this file is the union of
 * both — a couple of classes (h3, .box-row, .box-key, .box-val) are only used
 * on the Impressum page, but leaving them here costs nothing on Datenschutz
 * and keeps both pages on a single source of truth.
 *
 * Requires assets/css/tokens.css to be linked first (for --cream, --ink, etc.
 * and the box-sizing reset).
 */

body{
  background:var(--cream); color:var(--ink);
  font-family:'Work Sans', sans-serif; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--sage-deep);}
.wrap{max-width:760px; margin:0 auto; padding:0 24px;}

/* --- Header --- */
header{border-bottom:1px solid var(--line); padding:20px 0;}
header .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.logo{font-family:'Fraunces', serif; font-size:1.15rem; font-weight:600; display:flex; align-items:center; gap:10px;}
.logo svg{width:20px; height:20px;}
.header-right{display:flex; align-items:center; gap:14px;}
.back-link{font-size:0.88rem; text-decoration:none;}
#langToggle{
  background:none; border:1px solid var(--line); border-radius:100px; padding:7px 14px;
  font-size:0.78rem; font-family:'Work Sans',sans-serif; letter-spacing:0.05em;
  cursor:pointer; color:var(--ink);
}

/* --- Main content --- */
main{padding:56px 0 80px;}
h1{font-size:clamp(1.7rem,4vw,2.2rem); margin-bottom:8px;}
.updated{font-size:0.85rem; color:#7e8f88; margin-bottom:44px;}
h2{font-size:1.15rem; margin-top:38px; margin-bottom:12px; color:var(--ink);}
h3{font-family:'Fraunces', serif; font-weight:450; font-size:1rem; margin-top:22px; margin-bottom:8px; color:var(--clay);}
p, li{color:var(--text); font-size:0.98rem; margin-bottom:12px;}
ul{padding-left:20px; margin-bottom:12px;}

/* --- Reusable content blocks --- */
.box{
  background:var(--paper); border:1px solid var(--line); border-radius:10px;
  padding:18px 20px; margin:16px 0; font-size:0.94rem;
}
.box-row{display:flex; gap:14px; padding:9px 0; border-bottom:1px solid var(--line);}
.box-row:last-child{border-bottom:none;}
.box-key{font-size:0.78rem; font-weight:600; letter-spacing:0.03em; text-transform:uppercase; color:var(--brown); width:130px; flex-shrink:0; padding-top:1px;}
.box-val{font-size:0.94rem; color:var(--ink); line-height:1.6;}
.placeholder{background:rgba(179,194,165,0.25); padding:1px 5px; border-radius:4px; color:var(--ink); font-weight:500;}
.note{
  background:rgba(77,113,137,0.09); border:1px solid rgba(77,113,137,0.3);
  border-radius:10px; padding:16px 20px; font-size:0.9rem; margin-bottom:36px;
}