/* Nordseite - Grundlagen: Papier, Typo, Hamburger, Fusszeile, Cookies */

:root{
  --taupe: #968d82;
  --sage: #a7b678;
  --band: #d7dfcb;
  --beige: #ddcba7;
  --pale: #e6e2b0;
  --ink: #251e1c;
  --grau: #606060;
  --grau-2: #333333;
  --papier: #f6f3ec;
  --papier-2: #efeade;
  --weiss: #FFFFFF;
  --breit: 1180px;
  --rand: 22px;
  --schrift: 'Quicksand', 'Trebuchet MS', sans-serif;
  --lauf: 'Noto Sans', system-ui, sans-serif;
  --hand: 'Caveat', cursive;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family: var(--lauf);
  font-size: 15px;
  line-height: 1.95;
  color: var(--grau-2);
  /* zwei sehr flache Verlaeufe statt einer Papier-Textur - spart einen Request */
  background-color: var(--papier);
  background-image:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.75), transparent 42%),
    radial-gradient(circle at 82% 68%, rgba(233,228,214,.6), transparent 48%);
  -webkit-font-smoothing: antialiased;
}
li{list-style:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

h1,h2,h3{font-family:var(--schrift);font-weight:700;line-height:1.5}
.titel{font-size:21px;letter-spacing:4px;color:var(--taupe)}
.hand{font-family:var(--hand);font-size:24px;letter-spacing:1px;color:var(--sage);line-height:1}
.mitte{text-align:center}

.huelle{width:100%;max-width:var(--breit);margin:0 auto;padding-left:var(--rand);padding-right:var(--rand)}
.schmal{max-width:760px}

/* Knoepfe */
.knopf{
  display:inline-block;
  padding: 13px 30px;
  border-radius: 27px;
  background: var(--taupe);
  color: var(--weiss);
  font-family: var(--schrift);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-decoration: none;
  transition: background .25s, color .25s;
}
.knopf:hover{background:var(--ink)}
.knopf--linie{background:transparent;border:1px solid currentColor;border-radius:24px;color:inherit}
.knopf--linie:hover{background:var(--sage);border-color:var(--sage);color:#fff}

/* Navigation: kein Balken oben, nur Burger + Schublade rechts */
.burger{
  position: fixed;
  top: 18px; right: 18px;
  z-index: 70;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  box-shadow: 0 4px 18px rgba(37,30,28,.14);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.burger span{display:block;width:20px;height:2px;background:var(--taupe);border-radius:2px;transition:transform .25s,opacity .2s}
.burger.auf span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.auf span:nth-child(2){opacity:0}
.burger.auf span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.schublade{
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 65;
  width: min(86vw, 340px);
  padding: 92px 30px 40px;
  background: var(--papier-2);
  box-shadow: -14px 0 40px rgba(37,30,28,.12);
  transform: translateX(105%);
  transition: transform .35s ease;
  overflow-y: auto;
}
.schublade.auf{transform:translateX(0)}
.schublade__marke{display:block;margin-bottom:26px;line-height:0}
/* Marke in der Schublade und im Fuss immer schwarz, egal welche Farbe die Datei hat */
.schublade__marke img{width:132px;height:auto;filter:brightness(0)}
.schublade__gruppe{margin-bottom:26px}
.schublade__kopf{font-family:var(--schrift);font-size:11px;font-weight:700;letter-spacing:2.6px;text-transform:uppercase;color:var(--sage);margin-bottom:12px}
.schublade a{display:block;padding:9px 0;border-bottom:1px dotted #cfc7b8;font-size:14.5px;text-decoration:none;color:var(--ink)}
.schublade a:hover{color:var(--taupe)}
.schublade .knopf{margin-top:8px}
.vorhang{position:fixed;inset:0;z-index:60;background:rgba(37,30,28,.3);opacity:0;visibility:hidden;transition:opacity .3s}
.vorhang.auf{opacity:1;visibility:visible}

/* Fusszeile */
.fuss{position:relative;margin-top:70px;padding:56px 0 0;background:var(--papier-2)}
.fuss__gitter{display:grid;grid-template-columns:1fr;gap:30px;max-width:900px;margin:0 auto;padding:0 var(--rand)}
.fuss__marke{width:150px;height:auto;margin-bottom:8px;filter:brightness(0)}
.fuss__unter{font-family:var(--hand);font-size:21px;color:var(--sage);margin-bottom:18px}
.fuss__zeile{margin-bottom:6px;font-size:14.5px}
.fuss__zeile a{text-decoration:none}
.fuss__zeile a:hover{color:var(--taupe)}
.fuss__stern{margin-top:14px;font-size:12.5px;line-height:1.8;color:var(--grau)}
.fuss__links a{display:block;padding:6px 0;font-size:14px;text-decoration:none;color:var(--ink)}
.fuss__links a:hover{color:var(--taupe)}
.fuss__kopf{font-family:var(--schrift);font-size:11px;font-weight:700;letter-spacing:2.4px;text-transform:uppercase;color:var(--sage);margin-bottom:10px}
/* steht in der Fusszeile jeder Seite, gehoert deshalb hierher und nicht in home.css */
.link-nackt{display:block;padding:6px 0;font-size:14px;color:var(--ink)}
.link-nackt:hover{color:var(--taupe)}
.fuss__unten{max-width:900px;margin:34px auto 0;padding:16px var(--rand) 22px;border-top:1px dotted #cfc7b8;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;font-size:12px;color:var(--grau)}
/* gestrichener Streifen ganz unten, wie die gemalte Leiste in der Vorlage */
.fuss__streifen{height:26px;background:repeating-linear-gradient(115deg,var(--sage) 0 10px,#b9c68d 10px 20px,var(--beige) 20px 32px)}

/* die zwei Verlaeufe im body ersetzen die Papiertextur der Vorlage;
   auf dem Handy sieht man sie kaum, auf grossen Schirmen macht es den Unterschied */

/* Cookies */
.kruemel{
  position: fixed;
  left: 14px; right: 14px; bottom: 14px;
  z-index: 80;
  padding: 20px 20px 18px;
  background: var(--weiss);
  border-radius: 20px;
  box-shadow: 0 18px 46px rgba(37,30,28,.2);
}
.kruemel__kopf{font-family:var(--schrift);font-size:12px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;color:var(--taupe);margin-bottom:8px}
.kruemel p{font-size:13.5px;line-height:1.7;color:var(--grau)}
.kruemel a{color:var(--sage);font-weight:600}
.kruemel__tasten{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.kruemel .knopf{padding:11px 22px;font-size:13px}

@media (min-width: 700px){
  body{font-size:15.5px}
  .titel{font-size:24px;letter-spacing:6px}
  .fuss__gitter{grid-template-columns:1.4fr 1fr;gap:50px}
  .kruemel{left:auto;right:26px;bottom:26px;max-width:420px}
}

@media (min-width: 1000px){
  :root{--rand:30px}
  .titel{font-size:26px;letter-spacing:8px}
  .fuss{margin-top:110px;padding-top:70px}
}

/* TODO: Schublade auf sehr kurzen Bildschirmen nochmal ansehen */
/*
.alt-knopf{background:#e5ff14;color:#000;padding:8px 18px}
*/