/* --- Schriften, lokal gehostet. Auf Latin Extended beschnitten.
   Source Serif 4 und Source Sans 3, SIL Open Font License. --- */
@font-face{font-family:"Source Serif 4";src:url("schriften/serif-regular.woff") format("woff");
  font-weight:400;font-style:normal;font-display:optional}
@font-face{font-family:"Source Serif 4";src:url("schriften/serif-semibold.woff") format("woff");
  font-weight:600;font-style:normal;font-display:optional}
@font-face{font-family:"Source Sans 3";src:url("schriften/sans-regular.woff") format("woff");
  font-weight:400;font-style:normal;font-display:optional}
@font-face{font-family:"Source Sans 3";src:url("schriften/sans-semibold.woff") format("woff");
  font-weight:600;font-style:normal;font-display:optional}

/* ============================================================
   Designsystem S6 — Werte aus dem Siegel abgeleitet
   Schriften lokal gehostet, siehe @font-face oben.
   ============================================================ */
:root{
  --papier:#FAF9F7;
  --tinte:#1C1B18;
  --sekundaer:#5A5750;
  --linie-deko:#DCD8D1;   /* 1,35:1 — nur Trennlinien */
  --linie-ui:#96907F;     /* 3,03:1 — Ränder von Bedienelementen */
  --akzent-linie:#C94637; /* 4,52:1 — Links, Fokus */
  --akzent-flaeche:#963529; /* 7,03:1 — Schaltfläche */
  --siegel:#E24F3E;
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:48px; --s6:96px; --s7:160px;
  --haupt:"Source Serif 4",Georgia,"Times New Roman",serif;
  --funktion:"Source Sans 3",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--papier);color:var(--tinte);
  font-family:var(--haupt);font-size:17px;line-height:1.6;
  font-synthesis-weight:none;
}
@media(min-width:760px){body{font-size:18px}}

/* --- Container: Textspalte 67 % (Regel B) --- */
.huelle{max-width:1160px;margin:0 auto;padding:0 20px}
@media(min-width:760px){.huelle{padding:0 48px}}
.spalte{max-width:720px}

/* --- Zugänglichkeit --- */
.springen{
  position:absolute;left:-9999px;top:0;background:var(--tinte);color:var(--papier);
  padding:var(--s3);z-index:10;font-family:var(--funktion);
}
.springen:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--akzent-linie);outline-offset:2px;
}

/* --- Kopf --- */
.kopf{border-bottom:1px solid var(--linie-deko)}
.kopf .huelle{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);
  padding-top:var(--s4);padding-bottom:var(--s4);
}
.wortmarke{
  font-family:var(--haupt);font-size:19px;line-height:1.15;
  text-decoration:none;color:var(--tinte);margin-right:auto;
}
.wortmarke span{display:block;font-family:var(--funktion);font-size:13px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--sekundaer);margin-top:var(--s1)}
.navi{font-family:var(--funktion);font-size:15px}
.navi ul{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s4);margin:0;padding:0}
.navi a{color:var(--tinte);text-decoration:none;padding-bottom:2px;
  border-bottom:1px solid transparent}
.navi a:hover{border-bottom-color:var(--linie-ui)}
.navi a[aria-current="page"]{color:var(--akzent-linie);border-bottom:2px solid var(--akzent-linie)}
.sprachen{font-family:var(--funktion);font-size:15px;display:flex;gap:var(--s2);align-items:center}
.sprachen a{color:var(--tinte);text-decoration:none;border-bottom:1px solid var(--linie-deko)}
.sprachen a:hover{border-bottom-color:var(--akzent-linie);color:var(--akzent-linie)}
.sprachen [aria-current="true"]{color:var(--sekundaer)}
.sprachen .aus{color:var(--sekundaer);text-decoration:line-through;
  text-decoration-thickness:1px}

/* --- Fließtext --- */
main{padding-top:var(--s6);padding-bottom:var(--s7)}
h1{
  font-size:34px;line-height:1.08;font-weight:600;margin:0 0 var(--s4);
  letter-spacing:-.01em;
}
@media(min-width:760px){h1{font-size:56px}}
.vorspann{font-size:19px;line-height:1.45;margin:0 0 var(--s5);color:var(--tinte)}
@media(min-width:760px){.vorspann{font-size:22px}}
h2{
  font-size:25px;line-height:1.15;font-weight:600;
  margin:var(--s6) 0 var(--s4);letter-spacing:-.005em;
}
@media(min-width:760px){h2{font-size:32px}}
p{margin:0 0 var(--s4)}
strong{font-weight:600}

/* --- Eckdaten: die tragende Komponente --- */
.eckdaten{
  margin:0 0 var(--s6);border-top:1px solid var(--tinte);
  max-width:720px;
}
.eckdaten dl{margin:0}
.eckdaten .zeile{
  display:grid;grid-template-columns:1fr;gap:var(--s1);
  padding:var(--s3) 0;border-bottom:1px solid var(--linie-deko);
}
@media(min-width:600px){
  .eckdaten .zeile{grid-template-columns:9rem 1fr;gap:var(--s4);align-items:baseline}
}
.eckdaten dt{
  font-family:var(--funktion);font-size:15px;line-height:1.4;color:var(--sekundaer);
  letter-spacing:.02em;
}
.eckdaten dd{margin:0}
.eckdaten .betont{font-weight:600}
.eckdaten .zusatz{
  font-family:var(--funktion);font-size:15px;color:var(--sekundaer);display:block;
  margin-top:var(--s1);
}

/* --- Bild --- */
figure{margin:var(--s6) 0 0}
figure img{width:100%;height:auto;display:block;background:#EDEAE4}
figcaption{
  font-family:var(--funktion);font-size:15px;color:var(--sekundaer);
  margin-top:var(--s2);max-width:560px;
}

/* --- Formular --- */
.anfrage{margin-top:var(--s7);border-top:1px solid var(--tinte);padding-top:var(--s5);
  max-width:560px}
.feld{margin-bottom:var(--s4)}
.feld label{
  display:block;font-family:var(--funktion);font-size:15px;color:var(--sekundaer);
  margin-bottom:var(--s2);
}
.feld input,.feld select,.feld textarea{
  width:100%;font-family:var(--funktion);font-size:17px;color:var(--tinte);
  background:var(--papier);border:1px solid var(--linie-ui);border-radius:2px;
  padding:var(--s2) var(--s3);line-height:1.5;
}
.feld textarea{min-height:8rem;resize:vertical}
.hinweis{font-family:var(--funktion);font-size:15px;color:var(--sekundaer);margin-top:calc(var(--s1)*-1)}
.zustimmung{display:flex;gap:var(--s3);align-items:flex-start;margin-bottom:var(--s5)}
.zustimmung input{width:1.15rem;height:1.15rem;margin-top:.3rem;flex:0 0 auto;
  accent-color:var(--akzent-flaeche)}
.zustimmung label{font-family:var(--funktion);font-size:15px;color:var(--tinte);margin:0}
.falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
button[type=submit]{
  font-family:var(--funktion);font-size:17px;color:var(--papier);
  background:var(--akzent-flaeche);border:1px solid var(--akzent-flaeche);border-radius:2px;
  padding:var(--s3) var(--s4);cursor:pointer;
}
button[type=submit]:hover{background:var(--tinte);border-color:var(--tinte)}

/* --- Fuß --- */
.fuss{border-top:1px solid var(--linie-deko);padding:var(--s5) 0 var(--s6);
  font-family:var(--funktion);font-size:15px;color:var(--sekundaer)}
.fuss .huelle{display:flex;flex-wrap:wrap;gap:var(--s5);align-items:flex-start}
.siegel{width:40px;height:40px;color:var(--siegel);flex:0 0 auto}
.siegel svg{display:block;width:100%;height:100%}
.fuss p{margin:0 0 var(--s2);max-width:22rem}
.fuss a{color:var(--sekundaer)}
.fuss a:hover{color:var(--akzent-linie)}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* --- Galerie: zwei Spalten, Bilder behalten ihr Format (S6, Stand 15.08.) --- */
.galerie{display:grid;grid-template-columns:1fr;gap:var(--s6) var(--s5);
  margin-top:var(--s5)}
@media(min-width:700px){.galerie{grid-template-columns:1fr 1fr}}
.werk figure{margin:0;display:flex;align-items:flex-end;justify-content:center;
  min-height:320px}
@media(min-width:700px){.werk figure{min-height:420px}}
.werk img{width:auto;max-width:100%;max-height:420px;height:auto}
@media(min-width:700px){.werk img{max-height:520px}}
.werk-titel{font-family:var(--funktion);font-size:15px;color:var(--tinte);
  margin:var(--s3) 0 0}
.werk-datum{font-family:var(--funktion);font-size:15px;color:var(--sekundaer);margin:0}

/* --- Weiterführender Verweis am Ende eines Abschnitts --- */
.weiter{margin-top:var(--s5)}
.weiter a{font-family:var(--funktion);font-size:17px;color:var(--akzent-linie);
  text-decoration:none;border-bottom:1px solid var(--akzent-linie);padding-bottom:2px}
.weiter a:hover{color:var(--tinte);border-bottom-color:var(--tinte)}

/* --- Zwischentitel der Galerie, nur bei GALERIE_NACH_STIL = True sichtbar --- */
.galerie-titel{margin-top:var(--s7)}
.galerie-titel:first-of-type{margin-top:var(--s5)}
.galerie-titel + .galerie{margin-top:var(--s4)}

/* --- Nur für Vorleseprogramme, visuell nicht sichtbar --- */
.nur-vorlesen{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}

/* --- Dritte Überschriftenebene, nur auf der Ikebana-Seite --- */
h3{font-size:21px;line-height:1.2;font-weight:600;margin:var(--s5) 0 var(--s3)}
@media(min-width:760px){h3{font-size:24px}}

/* --- Fremdsprachiger Begriff im Fliesstext. Kein Kursivschnitt vorhanden,
       deshalb ueber die Farbe abgesetzt. --- */
.fremd{font-style:normal;color:var(--sekundaer)}

/* --- Auswahl nach Stil über der Galerie --- */
.stilwahl{margin:var(--s5) 0 var(--s4)}
.stilwahl ul{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);
  margin:0;padding:0;font-family:var(--funktion);font-size:17px}
.stilwahl a{color:var(--tinte);text-decoration:none;padding-bottom:3px;
  border-bottom:1px solid var(--linie-ui)}
.stilwahl a:hover{color:var(--akzent-linie);border-bottom-color:var(--akzent-linie)}
.stilwahl [aria-current="page"]{color:var(--akzent-linie);
  border-bottom:2px solid var(--akzent-linie);padding-bottom:2px}