@font-face{
  font-family:"EB Garamond";
  src:url("eb-garamond-regular.woff") format("woff");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("inter-regular.woff") format("woff");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("inter-semibold.woff") format("woff");
  font-weight:600;font-style:normal;font-display:swap;
}

/* ---------------------------------------------------------
   Abstandsraster: alle Werte sind Vielfache von 8.
   8 - 16 - 24 - 32 - 48 - 64 - 96
   --------------------------------------------------------- */

:root{
  --papier:#F7F3EC;
  --text:#1C1B19;
  --gedaempft:#6B6862;
  --akzent:#3A4A42;
  --linie:#E0D9CD;
  --serif:"EB Garamond",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --spalte:720px;
  --rand:24px;

  --s1:8px;
  --s2:16px;
  --s3:24px;
  --s4:32px;
  --s5:48px;
  --s6:64px;
  --s7:96px;
}

*{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  background:var(--papier);
  color:var(--text);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.7;
  font-weight:400;
}

.huelle{
  max-width:1240px;
  margin:0 auto;
  padding:0 var(--rand);
}

/* ---------- Kopfbereich ---------- */

.kopf{
  padding-top:var(--s4);
  padding-bottom:var(--s6);
}

.kopf-innen{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:var(--s2) var(--s5);
}

.wortmarke{
  font-family:var(--serif);
  font-size:27px;
  line-height:1.2;
  color:var(--text);
  text-decoration:none;
  white-space:nowrap;
}

.burger{
  display:none;
  margin-left:auto;
  padding:10px;
  border:0;
  background:none;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}

.burger span{
  display:block;
  width:22px;height:1px;
  margin:5px 0;
  background:var(--text);
  transition:transform .2s, opacity .2s;
}

.nav{display:block;}

.menue{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:var(--s1) var(--s4);
  margin:0;
  padding:0;
  list-style:none;
}

.menue > li{position:relative;}

.menue a,
.klapper{
  display:inline-block;
  padding:0;
  margin:0;
  border:0;
  background:none;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  color:var(--text);
  text-decoration:none;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}

.menue a:hover{text-decoration:underline;}

.klapper{cursor:default;}
.klapper:hover{text-decoration:none;}

.menue a.aktiv,
.klapper.aktiv{
  text-decoration:underline;
  text-underline-offset:5px;
}

.klapper::after{
  content:"";
  display:inline-block;
  width:6px;height:6px;
  margin-left:8px;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  transform:translateY(-3px) rotate(45deg);
  transition:transform .2s;
}

.hat-untermenue:hover .klapper::after,
.hat-untermenue:focus-within .klapper::after,
.hat-untermenue.offen .klapper::after{
  transform:translateY(1px) rotate(-135deg);
}

.untermenue{
  position:absolute;
  top:100%;
  left:0;
  z-index:10;
  display:none;
  flex-direction:column;
  gap:var(--s1);
  margin:0;
  padding:var(--s2) var(--s3);
  list-style:none;
  background:var(--papier);
  border:1px solid var(--linie);
  border-radius:2px;
  white-space:nowrap;
}

.untermenue a{font-size:16px;}

/* unsichtbare Bruecke, damit die Maus den Weg zur Liste findet */
.hat-untermenue::after{
  content:"";
  position:absolute;
  left:0; right:0; top:100%;
  height:var(--s2);
}

.untermenue{margin-top:var(--s1);}

@media (min-width:761px){
  .hat-untermenue:hover .untermenue,
  .hat-untermenue:focus-within .untermenue,
  .hat-untermenue.offen .untermenue{display:flex;}
}

/* ---------- Inhalt ---------- */

main{padding-bottom:var(--s7);}

.spalte{max-width:var(--spalte);}

.zweispaltig{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s6);
  align-items:flex-start;
}

.zweispaltig .spalte{flex:1 1 420px;min-width:0;}
.zweispaltig .bild{flex:0 0 380px;min-width:0;}


.bild img{display:block;width:100%;height:auto;}

.kleinzeile{
  font-size:17px;
  color:var(--gedaempft);
  margin:0 0 var(--s1);
}

h1{
  font-family:var(--serif);
  font-weight:400;
  font-size:40px;
  line-height:1.2;
  margin:0 0 var(--s3);
}

h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:28px;
  line-height:1.3;
  margin:var(--s6) 0 var(--s2);
}

h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:20px;
  line-height:1.4;
  margin:var(--s5) 0 var(--s1);
}

p{margin:0 0 var(--s3);}

a{color:var(--akzent);}

.block{margin:0 0 var(--s3);}
.block p{margin:0;}
.block strong{font-weight:600;}

.abschnitt{margin-top:var(--s6);}

/* ---------- Knoepfe ---------- */

.knopf{
  display:inline-block;
  margin:var(--s2) 0 0;
  padding:14px var(--s4);
  border:1px solid var(--akzent);
  border-radius:2px;
  background:none;
  color:var(--akzent);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.4;
  text-decoration:none;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}

.knopf:hover{background:var(--akzent);color:var(--papier);}

p .knopf{margin-top:0;}

/* ---------- Formular ---------- */

.formular{max-width:var(--spalte);margin-top:var(--s3);}

.feld{margin:0 0 var(--s3);}

.feld label{
  display:block;
  font-size:16px;
  margin:0 0 var(--s1);
}

.feld input,.feld textarea{
  width:100%;
  padding:12px;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.5;
  color:var(--text);
  background:#FBF8F3;
  border:1px solid var(--linie);
  border-radius:2px;
  -webkit-appearance:none;
  appearance:none;
}

.feld input:focus,.feld textarea:focus{
  outline:none;
  border-color:var(--akzent);
}

.feld textarea{min-height:112px;resize:vertical;}

.hinweis{
  font-size:15px;
  line-height:1.6;
  color:var(--gedaempft);
  margin:0 0 var(--s3);
}

/* ---------- Fussbereich ---------- */

.fuss{
  border-top:1px solid var(--linie);
  padding:var(--s5) 0 var(--s6);
  font-size:16px;
}

.fuss p{margin:0 0 4px;}
.fuss .gruppe{margin:0 0 var(--s3);}
.fuss a{color:var(--text);}
.fuss .klein{color:var(--gedaempft);font-size:15px;margin:0;}

/* ---------- Schmale Bildschirme ---------- */

/* Aufmacher der Startseite: Text - Bild - Text */
.aufmacher{display:block;}

.aufmacher .bild{margin:var(--s4) 0;}

@media (min-width:761px){
  .aufmacher{
    display:grid;
    grid-template-columns:minmax(0,1fr) 380px;
    column-gap:var(--s6);
    align-items:start;
  }
  .aufmacher .teil-a{grid-column:1;grid-row:1;}
  .aufmacher .teil-b{grid-column:1;grid-row:2;}
  .aufmacher .bild{
    grid-column:2;
    grid-row:1 / span 2;
    margin:6px 0 0;
  }
  .aufmacher .teil-b{margin-top:var(--s3);}
}

/* Pflichtfeld-Stern */
.pflicht{color:var(--akzent);}

@media (max-width:760px){
  :root{--rand:20px;}
  body{font-size:16px;}

  /* Startseite: Foto zuerst */
  .bild-zuerst{flex-direction:column;}
  .bild-zuerst .bild{order:-1;}

  /* Klappmenue */
  .kopf-innen{flex-wrap:nowrap;align-items:center;}

  .burger{display:block;}

  .kopf.offen .burger span:nth-child(1){transform:translateY(6px) rotate(45deg);}
  .kopf.offen .burger span:nth-child(2){opacity:0;}
  .kopf.offen .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

  .nav{
    display:none;
    flex-basis:100%;
    width:100%;
    padding-top:var(--s3);
  }

  .kopf.offen .kopf-innen{flex-wrap:wrap;}
  .kopf.offen .nav{display:block;}

  .menue{
    flex-direction:column;
    align-items:flex-start;
    gap:var(--s3);
  }

  .menue a,.klapper{font-size:19px;}

  .untermenue{
    position:static;
    display:flex;
    padding:var(--s2) 0 0 var(--s2);
    border:0;
    background:none;
    gap:var(--s2);
  }

  .klapper{pointer-events:none;color:var(--gedaempft);}
  .klapper::after{display:none;}
  .untermenue a{font-size:18px;}

  .kopf{padding-top:var(--s3);padding-bottom:var(--s5);}
  .kopf-innen{gap:var(--s2) var(--s3);}
  .wortmarke{
    font-size:clamp(24px, 7.6vw, 30px);
    line-height:1.2;
    white-space:nowrap;
  }
  .menue{gap:var(--s1) var(--s3);}

  h1{font-size:28px;margin-bottom:var(--s2);}
  h2{font-size:22px;margin:var(--s5) 0 var(--s2);}
  h3{font-size:19px;margin:var(--s4) 0 var(--s1);}

  .abschnitt{margin-top:var(--s5);}
  .zweispaltig{gap:var(--s4);}
  main{padding-bottom:var(--s5);}
  .fuss{padding:var(--s4) 0 var(--s5);}
}

/* Bild und Textspalte oben buendig beginnen lassen */
.zweispaltig > * > :first-child{margin-top:0;}
.zweispaltig .bild{margin-top:6px;}

/* Fliesstext, der unter einem Bildblock weiterlaeuft */
.zweispaltig + .spalte{margin-top:var(--s3);}

/* ---------- Satz ---------- */

/* Trennung erlauben - das beruhigt die rechte Kante deutlich */
body{
  -webkit-hyphens:auto;
  hyphens:auto;
  -webkit-hyphenate-limit-before:3;
  -webkit-hyphenate-limit-after:3;
  hyphenate-limit-chars:6 3 3;
  text-wrap:pretty;
}

/* Blocksatz nur dort, wo die Zeile lang genug ist */
@media (min-width:761px){
  .spalte p,
  .spalte li{
    text-align:justify;
    text-justify:inter-word;
  }
  .kleinzeile,
  .hinweis,
  .fehler,
  .block p,
  .schlicht p,
  .spalte p:last-child{text-align:left;}
  .formular p,
  p.hinweis,
  p.fehler,
  .schlicht p{text-align:left !important;}
}

/* Ueberschriften, Menue und Fuss bleiben ungetrennt und linksbuendig */
h1,h2,h3,.wortmarke,.menue,.fuss,.knopf,.feld label{
  -webkit-hyphens:manual;
  hyphens:manual;
  text-align:left;
}

/* Koederfeld gegen Spam - fuer Menschen unsichtbar */
.koeder{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* Fehlermeldung ueber dem Formular */
.fehler{
  margin:0 0 var(--s3);
  padding:var(--s2) var(--s3);
  border:1px solid var(--akzent);
  border-radius:2px;
  font-size:16px;
}