/* The legal pages: plain reading pages on the app's tokens and fonts
   (../css/01-tokens.css is loaded first). */
body{min-height:100vh;}
[hidden]{display:none !important;}
.legal{position:relative; z-index:1; max-width:760px; margin:0 auto; padding:28px 20px 60px;}
.legal-top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:26px;}
.legal-top a{font-size:14px; font-weight:600;}
.legal-brand{font-family:'Cinzel',Georgia,serif; font-weight:700; letter-spacing:.06em; color:var(--accent); font-size:15px;}
.legal h1{font-size:34px; text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px;}
.legal .stand{color:var(--text-faint); font-size:13px; margin:0 0 26px;}
.legal h2{font-size:21px; letter-spacing:.03em; margin:30px 0 8px; color:var(--text);}
.legal h3{font-family:'Inter',system-ui,sans-serif; font-size:15px; font-weight:600; letter-spacing:0; margin:18px 0 4px;}
.legal p, .legal li{color:var(--text-dim); font-size:15px; line-height:1.65;}
.legal p{margin:0 0 10px;}
.legal ul, .legal ol{margin:0 0 12px; padding-left:22px;}
.legal address{font-style:normal; color:var(--text); line-height:1.7; margin:0 0 12px;}
.legal .box{background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r2); padding:16px 18px; margin:14px 0;}
.legal-foot{margin-top:40px; padding-top:16px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:6px 14px; font-size:13px;}
.legal-foot a{color:var(--text-faint);}
/* the cancellation form */
.legal form{display:flex; flex-direction:column; gap:14px;}
.legal label{display:flex; flex-direction:column; gap:5px; font-size:14px; font-weight:600; color:var(--text);}
.legal input[type=text], .legal input[type=email], .legal input[type=date], .legal select, .legal textarea{
  font:inherit; font-size:15px; font-weight:400; color:var(--text); background:var(--surface-2);
  border:1px solid var(--line-2); border-radius:var(--r1); padding:10px 12px;
}
.legal textarea{min-height:90px; resize:vertical;}
.legal input:focus, .legal select:focus, .legal textarea:focus{outline:none; border-color:var(--accent);}
.legal .radio{flex-direction:row; align-items:center; gap:9px; font-weight:400; color:var(--text-dim);}
.legal button{
  align-self:flex-start; font:inherit; font-size:16px; font-weight:700; cursor:pointer;
  background:var(--accent); color:var(--on-accent); border:1px solid var(--accent); border-radius:var(--r1); padding:12px 26px;
}
.legal button.ghost{background:transparent; color:var(--text); border-color:var(--line-2); font-weight:600;}
.legal .hint{font-size:13px; color:var(--text-faint); font-weight:400;}
.legal .done{border-color:var(--ok);}
@media print{
  body{background:#fff; color:#000;}
  body::before, .legal-top, .legal-foot, .legal button{display:none !important;}
  .legal p, .legal li, .legal address, .legal h1, .legal h2, .legal h3{color:#000;}
  .legal .box{border-color:#999; background:#fff;}
}
.legal #formError{color:var(--warn); font-size:14px;}
.legal-table{width:100%; border-collapse:collapse; margin:4px 0 14px; font-size:15px;}
.legal-table th, .legal-table td{text-align:left; padding:8px 10px; border-bottom:1px solid var(--line-2); color:var(--text-dim); vertical-align:top;}
.legal-table th{color:var(--text); font-weight:600;}
.legal-lang{display:flex; gap:14px; font-size:14px; margin:-14px 0 22px;}
/* bilingual pages: the second language starts as a clearly separate block */
.legal section[lang] + section[lang]{margin-top:56px; padding-top:30px; border-top:1px solid var(--line-2);}
.legal .lang-label{display:inline-block; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); margin:0 0 6px;}
/* the German half of a bilingual label on the cancellation/withdrawal forms (kuendigen.html,
   widerrufen.html): same weight as the English lead, since German readers rely on it as the
   actual field name, not a footnote translation */
.legal .de{color:inherit; font-weight:inherit;}
.legal label > .de{display:block; font-size:inherit; margin-top:0;}