/* Grundlagen: Reset, Typografie, Raster, Bewegung.
   Satz und Groessen wie auf der Seite "Zugang erhalten". */

*,*::before,*::after{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--kopf) + 16px);
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:16.5px;
  font-weight:400;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;            /* Riegel gegen waagerechtes Scrollen */
}

img,svg,video{ display:block; max-width:100%; height:auto; }
img{ background:var(--bg2); }   /* verhindert Blitzen beim Laden */

/* Outfit traegt den Satz. Cormorant kommt nur im kursiven
   Einschub vor, dort aber gross genug, dass man ihn sieht. */
h1,h2,h3,h4{
  font-family:var(--sans);
  font-weight:600;
  color:var(--ink);
  margin:0;
  text-wrap:balance;
}
h1{ font-size:31px;   line-height:1.14; letter-spacing:-.030em; }
h2{ font-size:26px;   line-height:1.20; letter-spacing:-.026em; }
h3{ font-size:19px;   line-height:1.28; letter-spacing:-.018em; }
h4{ font-size:17.5px; line-height:1.30; letter-spacing:-.016em; }

h1 em,h2 em{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  letter-spacing:-.012em;
}
h1 em{ font-size:1.30em; line-height:.92; }
h2 em{ font-size:1.26em; }

p{ margin:0 0 1.05em; }
p:last-child{ margin-bottom:0; }

a{ color:var(--blau); text-decoration:none; }

ul,ol{ margin:0; padding:0; list-style:none; }

strong,b{ font-weight:600; }

button,input,select,textarea{ font:inherit; color:inherit; }

/* Tastatur sichtbar machen, Maus nicht stoeren. */
:focus{ outline:none; }
:focus-visible{
  outline:2px solid var(--blau);
  outline-offset:3px;
  border-radius:var(--radius);
}
.dunkel :focus-visible{ outline-color:var(--blau2); }

::selection{ background:var(--blau); color:#fff; }

/* ---- Raster ------------------------------------------------------- */

.huelle{
  width:100%;
  max-width:var(--breit);
  margin-inline:auto;
}

.sec{
  position:relative;
  background:var(--bg);
  padding:var(--luft) var(--pad);
  border-top:1px solid var(--linie2);
}
.sec-eng{ padding-block:var(--luft2); }
.sec-creme{ background:var(--creme); }

/* In den breiten Abschnitten duerfen nur Raster und Bilder ausbrechen.
   Lauftext bleibt in der Lesespalte, sonst steht die Ueberschrift auf
   dem grossen Schirm weit links neben ihrem eigenen Absatz. */
.lese,.kopfzeile{ max-width:var(--spalte); margin-inline:auto; }

.dunkel{
  position:relative; overflow:clip;
  background:var(--ink); color:#fff;
}
.dunkel::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 90% 60% at 20% 0%,rgba(27,73,214,.42),transparent 68%);
}
.dunkel > *{ position:relative; z-index:1; }
.dunkel h1,.dunkel h2,.dunkel h3,.dunkel h4{ color:#fff; }
.dunkel p{ color:var(--hell2); }

/* ---- Am Handy weglassen -------------------------------------------
   Fuer Satzteile, die auf dem kleinen Schirm nur Platz kosten. Der Text
   davor muss ohne sie ein vollstaendiger Satz bleiben. */
@media (max-width:639px){
  .ab-tablet{ display:none; }
}

/* ---- Nur fuer Screenreader ---------------------------------------- */
.nur-sr{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.sprung{
  position:absolute; left:var(--pad); top:-100px; z-index:200;
  background:var(--ink); color:#fff;
  padding:.7rem 1.1rem; border-radius:var(--radius);
  font-size:.85rem; font-weight:600;
  transition:top var(--tempo-kurz);
}
.sprung:focus{ top:12px; }

/* ---- Auftritt beim Scrollen. Sehr zurueckhaltend. ----------------- */
.auf{
  opacity:0;
  transform:translateY(10px);
  transition:opacity var(--tempo),transform var(--tempo);
}
.auf.da{ opacity:1; transform:none; }

/* ---- Papierkorn. Nur ein Hauch, damit es nach Druck aussieht. ----- */
.korn::after{
  content:'';
  position:absolute; inset:0;
  pointer-events:none; z-index:0;
  opacity:.03;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.dunkel.korn::after{ mix-blend-mode:screen; opacity:.05; }

/* ---- Groessen wachsen mit dem Schirm ------------------------------ */
@media (min-width:640px){
  h1{ font-size:40px; }
  h2{ font-size:31px; }
}

@media (min-width:1024px){
  h1{ font-size:50px; }
  h2{ font-size:36px; }
  h3{ font-size:20px; }
}

/* ---- Wer keine Bewegung will, bekommt keine. ---------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .auf{ opacity:1; transform:none; }
}