/* legal.css - impressum.html und datenschutz.html */

html,body{ margin:0; }

body{
  font-family:var(--font-body);
  background:var(--c-warm-white);
  color:var(--c-steel-blue);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
  word-break:break-word;
}

a{ color:var(--c-steel-blue); }

.page{
  max-width:1440px;
  margin:0 auto;
  padding: clamp(20px, 3vh, 40px) clamp(20px, 5vw, 64px) 0;
}

.site-header{
  display:flex;
  align-items:center;
  padding-bottom: clamp(16px, 3vh, 32px);
}

.site-header a{
  display:inline-flex;
}

.logo{
  height: clamp(38px, 4vw, 52px);
  width:auto;
  display:block;
}

/* Gleicher Seitenrahmen wie .site-header und .site-footer, damit der
   Text linksbündig unter dem Logo beginnt. Die Lesebreite begrenzen
   die direkten Kinder. */
main.legal{
  max-width:1440px;
  margin:0 auto;
  padding: clamp(24px, 5vh, 56px) clamp(20px, 5vw, 64px) clamp(48px, 8vh, 96px);
}

main.legal > *{
  max-width:720px;
}

.back-link{
  display:inline-flex;
  align-items:center;
  gap: var(--sp-2);
  color:var(--c-text-gray);
  text-decoration:none;
  font-size:14px;
  font-weight:500;
  border-bottom:1px solid transparent;
  margin-bottom: var(--sp-7);
  transition: color .18s ease, border-color .18s ease;
}

.back-link:hover,
.back-link:focus-visible{
  color:var(--c-steel-blue);
  border-color:var(--c-steel-blue);
}

.back-link svg{ width:14px; height:14px; }

h1.page-title{
  font-family:var(--font-display);
  font-weight:600;
  color:var(--c-steel-blue);
  font-size: clamp(32px, 4.4vw, 46px);
  line-height:1.1;
  margin: 0 0 var(--sp-3);
}

p.page-lede{
  font-size:18px;
  color:var(--c-text-gray);
  margin: 0 0 var(--sp-8);
  max-width:52ch;
}

section.legal-block{
  margin-bottom: var(--sp-8);
}

section.legal-block h2{
  font-family:var(--font-body);
  font-size:26px;
  font-weight:600;
  letter-spacing:0.01em;
  color:var(--c-steel-blue);
  margin:0 0 var(--sp-4) 0;
  padding-bottom:var(--sp-2);
  border-bottom:2px solid var(--c-primary-blue);
  display:inline-block;
}

section.legal-block h3{
  font-family:var(--font-body);
  font-size:19px;
  font-weight:600;
  color:var(--c-steel-blue);
  margin: var(--sp-5) 0 var(--sp-2);
}

section.legal-block p{
  font-size:18px;
  color:var(--c-text-gray);
  line-height:1.7;
  margin: 0 0 var(--sp-3);
  max-width:64ch;
}

section.legal-block ul.legal-list{
  margin: 0 0 var(--sp-3);
  max-width:64ch;
}

section.legal-block ul.legal-list li{
  position:relative;
  padding-left: var(--sp-5);
  font-size:18px;
  color:var(--c-text-gray);
  line-height:1.7;
  margin-bottom: var(--sp-2);
}

section.legal-block ul.legal-list li::before{
  content:"";
  position:absolute;
  left:2px;
  top:0.7em;
  width:5px;
  height:5px;
  border-radius:1px;
  background:var(--c-gold);
}

section.legal-block p:last-child,
section.legal-block ul.legal-list:last-child{ margin-bottom:0; }

section.legal-block a{
  color:var(--c-steel-blue);
  text-decoration:underline;
  text-decoration-color: rgba(61,90,107,0.35);
  text-underline-offset:2px;
}

section.legal-block a:hover,
section.legal-block a:focus-visible{
  text-decoration-color: var(--c-steel-blue);
}

.placeholder{
  background: var(--c-light-blue);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  color: var(--c-gold-text);
  font-style: italic;
  white-space: nowrap;
}

.placeholder-note{
  display:flex;
  gap: var(--sp-3);
  align-items:flex-start;
  background:var(--c-light-blue);
  border-left:4px solid var(--c-gold);
  border-radius:var(--radius-sm);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-8);
}

.placeholder-note p{
  margin:0;
  font-size:14px;
  color:var(--c-steel-blue);
  line-height:1.6;
}

.site-footer{
  max-width:1440px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap: var(--sp-3);
  padding: clamp(16px, 3vh, 32px) clamp(20px, 5vw, 64px) clamp(20px, 3vh, 32px);
  border-top:1px solid rgba(61,90,107,0.12);
  font-size: clamp(12.5px, 0.85vw, 13.5px);
  color:var(--c-text-gray);
}

.footer-nav a.legal-link,
.footer-nav span.legal-link-current{
  font-size:inherit;
  color:var(--c-text-gray);
  text-decoration:none;
  border-bottom:1px solid transparent;
  padding:2px 0;
}

.footer-nav a.legal-link:hover,
.footer-nav a.legal-link:focus-visible{
  color:var(--c-steel-blue);
  border-color:var(--c-text-gray);
}

.footer-nav span.legal-link-current{
  color:var(--c-steel-blue);
  font-weight:600;
  border-bottom:1px solid var(--c-steel-blue);
}

@media (max-width: 640px){
  p.page-lede,
  section.legal-block p,
  section.legal-block ul.legal-list li{ font-size:16px; }
}

@media (max-width: 520px){
  .site-footer{ flex-direction:column; align-items:flex-start; }
  .footer-nav{ width:100%; justify-content:space-between; }
  .footer-divider{ display:none; }
}

.stand-note{
  font-size:13px;
  color:var(--c-text-gray);
  font-style:italic;
  margin-top: var(--sp-8);
}