/* Gemeinsame Gestaltung von Impressum und Datenschutz.
   Wie die Startseite, aber ohne Bewegung: dieselben Schriften, dieselbe
   Bannerform, das Hintergrundbild steht still im Gruen vom Seitenende.
   Die Startseite bindet diese Datei NICHT ein, sie hat ihr CSS inline. */
@font-face{ font-family:"Source Serif 4"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/source-serif-4-400.woff2") format("woff2") }
@font-face{ font-family:"Source Serif 4"; font-style:normal; font-weight:700; font-display:swap;
  src:url("fonts/source-serif-4-700.woff2") format("woff2") }
@font-face{ font-family:"Source Serif 4"; font-style:italic; font-weight:400; font-display:swap;
  src:url("fonts/source-serif-4-400-italic.woff2") format("woff2") }
@font-face{ font-family:"Fredericka the Great"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/fredericka-the-great-400.woff2") format("woff2") }

:root{
  --paper: 250 248 243;
  --orange: #f39c02;
  --tinte: #060706;
  --schatten: #275328;
  --pad: clamp(1.25rem, 4vw, 3.5rem);
}

*{box-sizing:border-box}
body{
  margin:0;
  padding:0 1.75rem;                   /* wie auf der Startseite: Platz fuer die Versatzschatten */
  font:400 1.0625rem/1.7 "Source Serif 4", Georgia, "Times New Roman", serif;
  color:var(--tinte);
  background:var(--schatten);
  text-rendering:optimizeLegibility;
}

.bg{ position:fixed; inset:0; z-index:-1; overflow:hidden; background:rgb(var(--paper)) }
.bg::before{
  content:""; position:absolute; inset:0;
  background:url("lzw_hintergruende_03_langer_weg_blanko_4x_RL_sw.jpg") repeat-x center / auto 100%;
  background-image:image-set(url("lzw_hintergruende_03_langer_weg_blanko_4x_RL_sw.avif") type("image/avif"),
                             url("lzw_hintergruende_03_langer_weg_blanko_4x_RL_sw.webp") type("image/webp"));
}
.bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(233deg, #4c7636, #3f6934, #325e2e, var(--schatten));
  mix-blend-mode:multiply;
}

/* Bannerform der Startseite: schiefes Trapez mit hartem Versatzschatten.
   Die Varianten unten stehen als element.banner, sonst gewaenne .banner mit
   seinen Voreinstellungen fuer --kerbe und --versatz. */
.banner{
  position:relative; isolation:isolate;
  --kerbe:5%; --saum:0px; --versatz:.5rem;
}
.banner::before, .banner::after{
  content:""; position:absolute;
  clip-path:polygon(0 var(--kerbe), 100% 0, 100% calc(100% - var(--kerbe)), 0 100%);
}
.banner::before{ inset:0; background:var(--flaeche); z-index:-1 }
.banner::after{
  inset:calc(-1 * var(--saum)); background:var(--saumfarbe); z-index:-2;
  transform:translate(var(--versatz), var(--versatz));
}

header{ text-align:center; margin:5vh auto 6vh; padding:0 1rem }
header a.banner{
  display:inline-block; max-width:100%;
  padding:.14em .42em .2em;
  font:400 clamp(1.6rem, 6vw, 3.4rem)/1.05 "Fredericka the Great", cursive;
  color:#fefefe; text-decoration:none;
  --flaeche:var(--tinte); --saumfarbe:var(--orange);
  --kerbe:7%; --versatz:.13em;
  transform:rotate(-1.2deg);
}
header a:focus-visible{ outline:2px solid var(--orange); outline-offset:6px }

main.banner{
  max-width:calc(62ch + 2 * var(--pad));
  margin:0 auto 6vh;
  padding:var(--pad);
  --flaeche:rgb(var(--paper)); --saumfarbe:var(--tinte);
  --kerbe:.6%; --saum:3px; --versatz:.75rem;
}
h1, h2{ font-family:"Fredericka the Great", cursive; font-weight:400; line-height:1.15 }
h1{ margin:0 0 .8em; font-size:clamp(1.8rem, 5vw, 2.6rem) }
h2{ margin:2em 0 .5em; font-size:clamp(1.3rem, 3.4vw, 1.6rem) }
h3{ margin:1.5em 0 .3em; font-size:1em; font-weight:700 }
p, ul{ margin:0 0 1em; hyphens:auto }
ul{ padding-left:1.2em }
li{ margin-bottom:.3em }
address{ font-style:normal; margin:0 0 1em }
a{ color:var(--schatten); text-underline-offset:.2em }
a:focus-visible{ outline:2px solid var(--orange); outline-offset:2px }
.stand{ margin-top:2.5em; font-style:italic }

/* Der Widerspruchskasten kommt von Matomo und bringt nur Text und eine
   Checkbox mit. Hier bekommt er einen Rahmen, damit man ihn findet. */
#matomo-opt-out{
  margin:1.2em 0 0; padding:1em 1.2em;
  border:2px solid var(--tinte);
  background:#fff;
}
#matomo-opt-out p:last-child{ margin-bottom:0 }
#matomo-opt-out input{ width:1.15em; height:1.15em; margin:0 .5em 0 0; vertical-align:-.15em; accent-color:var(--schatten) }
#matomo-opt-out label{ font-weight:700; cursor:pointer }

footer.banner{
  width:fit-content; max-width:100%;
  margin:0 auto 4vh;
  display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem 1.5rem;
  padding:.55rem 1.2rem .65rem;
  color:#fefefe;
  --flaeche:var(--tinte); --saumfarbe:var(--orange);
  --kerbe:6%; --versatz:.4rem;
  transform:rotate(.8deg);
  font-size:.9rem;
}
footer a{ color:#fff; text-decoration-color:rgb(255 255 255 / .45) }
footer a:hover{ text-decoration-color:#fff }
footer a:focus-visible{ outline:2px solid var(--orange); outline-offset:3px }