/* ============================================================
   TOLEVIA — Raster, Kopf, Fuß, Abschnitte
   ============================================================ */

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- Kopf ---------- */

.site-head{
  position:sticky;
  top:0;
  z-index:20;
  padding-block:clamp(1rem, 2vw, 1.35rem);
  background:color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease;
}
.site-head.is-scrolled{border-bottom-color:var(--line)}
.site-head .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem 2rem;
}
.brand{
  font-size:1rem;
  font-weight:640;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-decoration:none;
}
/* Auf der Startseite erscheint die kleine Marke erst,
   wenn die große Wortmarke aus dem Bild gescrollt ist */
.js body.home .site-head .brand{
  opacity:0;
  transform:translateY(6px);
  pointer-events:none;
  transition:opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.js body.home.brand-in .site-head .brand{
  opacity:1;
  transform:none;
  pointer-events:auto;
}

.site-nav{
  display:flex;
  gap:clamp(1.1rem, 3vw, 2rem);
  font-size:.75rem;
  font-weight:560;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.site-nav a{padding-block:.6rem}
/* Auf schmalen Geräten rückt die Navigation in eine eigene Zeile,
   statt am Rand abgeschnitten zu werden. */
@media (max-width: 34em){
  .site-head .wrap{flex-wrap:wrap;row-gap:.35rem}
  .site-nav{flex-basis:100%;gap:1rem;font-size:.6875rem;letter-spacing:.1em}
  .site-nav a{padding-block:.35rem}
  .brand{font-size:.9375rem}
}

/* ---------- Abschnitte ---------- */

.section{padding-block:clamp(4.5rem, 10vw, 8.5rem)}
.section--line{border-top:1px solid var(--line)}
.section--tight{padding-block:clamp(3rem, 6vw, 4.5rem)}

.side-grid{
  display:grid;
  grid-template-columns:minmax(0, 4fr) minmax(0, 8fr);
  gap:clamp(2rem, 5vw, 6rem);
  align-items:start;
}
@media (max-width: 56em){
  .side-grid{grid-template-columns:1fr;gap:2rem}
}

/* ---------- Kopf einer Unterseite ---------- */

.page-head{padding-block:clamp(3rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3rem)}
.page-head .eyebrow{display:block;margin-bottom:1rem}
.page-title{
  font-size:clamp(2.25rem, 6vw, 4.5rem);
  font-weight:570;
  letter-spacing:-.024em;
  line-height:1.04;
  text-wrap:balance;
  /* Lange deutsche Wörter wie „Datenschutzerklärung" passen sonst
     auf schmalen Geräten nicht in eine Zeile. */
  overflow-wrap:break-word;
  -webkit-hyphens:auto;
  hyphens:auto;
}
.page-head p{
  margin-top:1.25rem;
  color:var(--ink-soft);
  max-width:38rem;
}

/* ---------- Fuß ---------- */

.site-foot{
  border-top:1px solid var(--line);
  padding-block:clamp(2.75rem, 6vw, 4rem) clamp(1.5rem, 3vw, 2.25rem);
  margin-top:clamp(3rem, 7vw, 6rem);
}
.foot-top{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1.25rem 2rem;
  flex-wrap:wrap;
  margin-bottom:clamp(2rem, 4vw, 3rem);
}
.foot-nav{
  display:flex;
  gap:clamp(1.1rem, 3vw, 2rem);
  flex-wrap:wrap;
  font-size:.75rem;
  font-weight:560;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.foot-nav a{padding-block:.6rem}
.foot-legal{
  font-size:.8125rem;
  line-height:1.7;
  color:var(--mut);
}
.foot-legal p + p{margin-top:.35rem}
.foot-legal a{text-underline-offset:2px}
/* Der Hinweis zu Cookies und Tracking gehört ans Seitenende */
.foot-note{
  padding-bottom:1.1rem;
  margin-bottom:1.1rem;
  border-bottom:1px solid var(--line);
  color:var(--ink-soft);
}