/* Kunstdünger – Gestaltung (aus dem Design-System „Kunstdünger“, Claude Design).
   Inhalte stehen in inhalte/*.json, nicht hier. */
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:300;font-display:swap;src:url(schrift/source-sans-3-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;src:url(schrift/source-sans-3-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:500;font-display:swap;src:url(schrift/source-sans-3-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;src:url(schrift/source-sans-3-latin-600-normal.woff2) format("woff2")}

:root{
  --grund:#ECEAE6; --flaeche:#F7F6F3; --flaeche-tief:#E2DFD9;
  --sonne:#F4C430; --sonne-hell:#FBE7A6;
  --tinte:#2B2A28; --tinte-leise:#5C5953; --linie:#8A8578;
  --rand:40px; --luft:104px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;background:var(--grund);color:var(--tinte);font-family:"Source Sans 3","Segoe UI",Arial,sans-serif;font-weight:300;font-size:18px;line-height:28px;-webkit-text-size-adjust:100%}
img{max-width:100%;display:block}
a{color:var(--tinte)}
h1,h2,h3,p,ul{margin:0}
:focus-visible{outline:2px solid var(--tinte);outline-offset:3px}
.sprung{position:absolute;left:-9999px}
.sprung:focus{left:16px;top:16px;z-index:10;background:var(--sonne);padding:8px 16px}

.rand{max-width:1200px;margin:0 auto;padding-left:var(--rand);padding-right:var(--rand)}
.abschnitt{padding-top:var(--luft)}
/* Sprung aus dem Menü: Überschrift direkt unter die Kopfleiste, ohne den Abschnitts-Abstand darüber */
.abschnitt[id]{scroll-margin-top:calc(8px - var(--luft))}
#ferien{scroll-margin-top:32px}
#newsletter{scroll-margin-top:96px}
#ueber,#kontakt{scroll-margin-top:-64px}
.hell{background:var(--flaeche)}
.tief{background:var(--flaeche-tief)}
.marke-klein{font-size:13px;line-height:16px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.kopfzeile{display:flex;flex-direction:column;gap:8px;margin-bottom:40px}
h2{font-size:40px;line-height:46px;font-weight:400}
h2.klein{font-size:28px;line-height:34px;font-weight:500}
h3{font-size:20px;line-height:26px;font-weight:500}
.leise{color:var(--tinte-leise)}
.text{max-width:36em}
.gross-text{font-size:21px;line-height:32px}
/* Schriftgrößen-Stufen: Fließtext 18/28 (body) · Zusatzangaben 16/24 · Kleingedrucktes 14/20 · Rubrik 13 */
.klein-text{font-size:16px;line-height:24px}
.quadrat{display:inline-block;width:10px;height:10px;background:var(--sonne);flex:none}

/* Kopf: bleibt beim Scrollen oben; am Handy rutscht die Wortmarke weg, nur die Menü-Knöpfe bleiben (kopf.js) */
.kopfleiste{position:sticky;top:var(--kopf-versatz,0px);z-index:5;background:var(--grund);border-bottom:1px solid var(--flaeche-tief)}
.kopf{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:18px;padding-bottom:18px}
.wortmarke{display:flex;flex-direction:column;flex:none;gap:0;font-size:21px;line-height:28px;text-decoration:none}
.wortmarke b{font-weight:600;letter-spacing:.08em}
/* Neben dem Menü zweizeilig („KUNSTDÜNGER“ / „Atelier für kreatives Wachsen“); passt das Menü nicht daneben, steht es
   darunter und die Wortmarke wird eine Zeile mit Strich (Johann 2026-10-08). kopf.js setzt dafür .gestapelt, ohne
   JavaScript gilt die Grenze 820 px. */
.strich{display:none}
.kopf.gestapelt{flex-direction:column;align-items:flex-start;gap:16px}
.kopf.gestapelt .wortmarke{display:block;font-size:clamp(16px,calc((100vw - 34px) / 20),21px)}   /* am Handy so klein, dass es in eine Zeile passt */
.kopf.gestapelt .strich{display:inline}
.kopf.gestapelt .unter{white-space:nowrap}
.kopf.gestapelt .menue{justify-content:flex-start}
/* Menüpunkte als Knöpfe erkennbar (Jutta 2026-10-08: sahen aus wie Text), Schrift nicht fett (Johann 2026-10-08) */
.menue{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;font-size:16px;font-weight:400}
.menue a{display:inline-flex;align-items:center;min-height:40px;padding:0 13px;text-decoration:none;border:1px solid var(--tinte);background:var(--flaeche);transition:background-color .2s}
.menue a:focus-visible,.menue a.hier{background:var(--sonne)}
/* Hover nur mit echter Maus: am Handy bliebe der angetippte Punkt sonst gelb, obwohl man weitergescrollt ist */
@media (hover:hover){.menue a:hover{background:var(--sonne)}}

/* Knöpfe */
.knopf,.knopf2{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;font:inherit;font-size:17px;font-weight:500;text-decoration:none;color:var(--tinte);cursor:pointer;transition:background-color .2s}
.knopf{background:var(--sonne);border:none}
.knopf:hover{background:var(--tinte);color:var(--flaeche)}
.knopf2{border:1px solid var(--tinte);background:transparent}
.knopf2:hover{background:var(--sonne-hell)}
.knoepfe{display:flex;flex-wrap:wrap;gap:16px}

/* Start: Quadrat-Mosaik */
.mosaik{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding-top:24px}
.q{aspect-ratio:1/1;min-width:0;overflow:hidden}
.q img{width:100%;height:100%;object-fit:cover}
.q.gross{grid-column:span 2;grid-row:span 2;background:var(--flaeche);padding:48px;display:flex;flex-direction:column;justify-content:flex-end;gap:24px}
.q.gross h1{display:flex;flex-direction:column;gap:20px;font-weight:300}
.leitsatz{font-size:48px;line-height:54px;letter-spacing:-.01em;text-wrap:balance}
.q.gross h1 span:last-child{font-size:21px;line-height:32px}
.q.sonne{background:var(--sonne);padding:28px;display:flex;align-items:flex-end;font-size:24px;line-height:30px;font-weight:400}
.atelier{display:flex;flex-direction:column;gap:20px;padding-top:56px}

/* Drei Punkte */
.punkte{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center;padding-top:80px;padding-bottom:80px}
.punkte-liste{display:flex;flex-direction:column;gap:40px}
.punkt{display:flex;flex-direction:column;gap:8px}
.punkt .quadrat{width:12px;height:12px}
.versetzt{position:relative;padding:0 24px 24px 0}
.versetzt::before{content:"";position:absolute;right:0;bottom:0;width:calc(100% - 24px);height:calc(100% - 24px);background:var(--sonne)}
.versetzt img{position:relative;width:100%;aspect-ratio:1/1;object-fit:cover}

/* Kacheln */
.kacheln{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.kachel{position:relative;display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:1/1;overflow:hidden;text-decoration:none;border:1px solid var(--linie);background:var(--flaeche)}
.kachel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kachel span.t{position:relative;display:flex;align-items:center;gap:8px;padding:16px;background:var(--flaeche);font-size:20px;line-height:26px;font-weight:500;transition:background-color .2s}
.kachel:hover span.t{background:var(--sonne)}

/* Termine */
.zwei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:40px}
.termine{list-style:none;padding:0}
.termin{display:grid;grid-template-columns:170px minmax(0,1fr);gap:24px;padding:24px 0;border-top:1px solid var(--linie)}
.termin:last-child{border-bottom:1px solid var(--linie)}
.termin .datum{font-size:24px;line-height:30px;font-weight:500;font-variant-numeric:tabular-nums}
.termin .wann{display:flex;flex-direction:column;gap:4px}
/* Zeitangabe in Teilen: in einer Zeile mit Punkt dazwischen, bricht ein Teil um, steht er ohne Punkt am Zeilenanfang
   (der Punkt sitzt im linken Rand jedes Teils, der Rand am Zeilenanfang wird abgeschnitten) */
.zeitzeile{display:block;overflow:hidden}
.zeit{display:flex;flex-wrap:wrap;margin-left:-1.3em}
.zeit>span{position:relative;margin-left:1.3em}   /* ein zu langes Teil ("abweichend vier Abende") bricht in sich um */
.zeit>span::before{content:"·";position:absolute;left:-1.3em;width:1.3em;text-align:center}
/* Halbjahr unter den Überschriften: „Zweites Halbjahr“, darunter der Zeitraum */
.halbjahr{display:flex;flex-direction:column}
.halbjahr span:first-child{font-weight:500}
.zwei.nur-rechts>*{grid-column:2}
.termin h3{margin-bottom:4px}
.termin .preis{margin-top:6px;font-size:16px;line-height:24px;color:var(--tinte-leise)}
.termin ul{margin-top:8px;padding-left:20px}
/* Hervorhebung „hinweis“ (z. B. Ausgebucht) – Inhalt, per Telegram-Bot setzbar */
.schild{display:inline-block;padding:2px 10px;background:var(--sonne);color:var(--tinte);font-size:17px;line-height:24px;font-weight:600;letter-spacing:.02em}
.termin .preis .schild{margin-left:4px}
.termin .preis.nur .schild{margin-left:0}
.termin.vorbei h3,.termin.vorbei p,.termin.vorbei .datum,.termin.vorbei .zeitzeile{color:var(--tinte-leise)}
.termin .vorbei-marke{align-self:flex-start;margin-top:4px;padding:1px 8px;border:1px solid var(--linie);font-size:14px;line-height:20px;color:var(--tinte-leise)}
strong{font-weight:500}

/* Kurse */
.fakten{list-style:none;padding:0;display:flex;flex-direction:column;gap:6px}
.fakten li{display:flex;gap:12px;align-items:baseline}
.fakten .quadrat{transform:translateY(-1px)}
.termin .alter{font-size:16px;line-height:24px;color:var(--tinte-leise);margin-bottom:8px}
.termin.kurs .preis.nur{margin:0 0 8px}
.unterteil{margin-top:56px}
.unterteil h3.zwischen{font-size:24px;line-height:30px;font-weight:500;margin-bottom:16px}
.bald{margin-top:16px}
.hinweis{margin-top:24px;font-size:16px;line-height:24px;color:var(--tinte-leise)}

/* Feiern & Gruppen */
.feiern{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.feier{display:flex;flex-direction:column;gap:16px}
.feier .q{border:1px solid var(--linie)}

/* Über mich */
.ueber{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start;padding-top:80px;padding-bottom:80px}
.ueber .bild img{width:100%;aspect-ratio:4/5;object-fit:cover}
/* Rahmen des Porträts (seite.ueber.foto_rahmen): Seite, Breite, Höhe neben dem Text */
.ueber.bild-schmal{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.ueber.bild-breit{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.ueber.bild-rechts{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.ueber.bild-rechts.bild-schmal{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
.ueber.bild-rechts.bild-breit{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.ueber.bild-rechts .bild{order:2}
.ueber.bild-oben{grid-template-columns:minmax(0,1fr);gap:48px}
.ueber.bild-oben.bild-schmal .bild{width:66%;justify-self:center}
.ueber.bild-oben .bild img{max-height:640px}
.ueber .bild.lage-mitte{align-self:center}
.ueber .bild.lage-unten{align-self:end}
.ueber .inhalt{display:flex;flex-direction:column;gap:20px}
.zitat{margin:0;padding-left:20px;border-left:4px solid var(--sonne);font-size:24px;line-height:34px;font-weight:300}
.ueber .titel{font-size:13px;line-height:16px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-top:12px}
.eckpunkte{list-style:none;padding:0;display:flex;flex-direction:column;gap:6px}
.eckpunkte li{display:flex;gap:12px;align-items:baseline}

/* Galerie */
.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.galerie a{display:block;aspect-ratio:1/1;overflow:hidden;background:var(--flaeche-tief)}
.galerie img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.galerie a:hover img{transform:scale(1.03)}
.leuchte{border:none;padding:0;background:transparent;max-width:min(96vw,1600px);max-height:96vh;max-height:96dvh;overflow:hidden}
.leuchte::backdrop{background:rgba(43,42,40,.9)}
/* Großansicht passt immer ganz auf den Bildschirm: Leiste (≈ 60 px) + Bild ≤ 96 % der Höhe */
.leuchte img{touch-action:pan-y;-webkit-user-select:none;user-select:none;max-width:min(96vw,1600px);max-height:calc(96vh - 64px);max-height:calc(96dvh - 64px);width:auto;height:auto;margin:0 auto}
.leuchte .leiste{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:8px 0;color:var(--flaeche);font-size:16px}
.leuchte button{min-height:44px;min-width:44px;padding:0 14px;background:var(--flaeche);color:var(--tinte);border:none;font:inherit;font-size:16px;font-weight:500;cursor:pointer}
.leuchte button:hover{background:var(--sonne)}

/* Wissenswertes */
details{border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);padding:16px 0}
summary{cursor:pointer;font-size:20px;line-height:26px;font-weight:500}
details[open] summary{margin-bottom:16px}
details p{font-size:16px;line-height:24px;margin-bottom:12px;max-width:48em}

/* Kontakt */
.kontakt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:64px;row-gap:32px;padding-top:80px;padding-bottom:80px}
.kontakt .formular{grid-column:2;grid-row:1 / span 2;align-self:start}
.kontakt .links{grid-column:1;grid-row:1}
.kontakt .links{display:flex;flex-direction:column;gap:24px}
address{font-style:normal;display:flex;flex-direction:column;gap:4px}
address strong{font-weight:500}
.formular{display:flex;flex-direction:column;gap:16px;background:var(--flaeche);padding:32px;border:1px solid var(--linie)}
.formular label{display:flex;flex-direction:column;gap:4px;font-size:16px;line-height:24px;font-weight:500}
.feld{min-height:44px;padding:8px 12px;border:1px solid var(--linie);background:#fff;font:inherit;font-size:18px;font-weight:300;color:var(--tinte);width:100%}
textarea.feld{resize:vertical}
.formular .klein{font-size:14px;line-height:20px;color:var(--tinte-leise)}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.spruch{grid-column:1;grid-row:2;align-self:end;font-size:22px;line-height:30px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.nachweis{margin-top:12px;font-size:14px;line-height:20px;color:var(--tinte-leise)}
.nachweis a{color:var(--tinte-leise)}
/* Stimmen von Teilnehmenden (über der Galerie) */
.stimmen{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:32px 40px;margin-bottom:48px}
.stimme{margin:0;padding-left:20px;border-left:4px solid var(--sonne);display:flex;flex-direction:column;gap:8px}
.stimme blockquote{margin:0;font-size:20px;line-height:30px;font-weight:300}
.stimme figcaption{font-size:16px;line-height:24px;color:var(--tinte-leise)}
/* Aktuell: Instagram-Beiträge als wischbare Reihe (Computer: 4 Karten + Pfeile, Handy: Karten wischen) */
.ig-oben{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:40px}
.ig-oben .kopfzeile{margin-bottom:0}
.ig-pfeile{display:flex;gap:8px;flex:none}
.ig-pfeile[hidden]{display:none}
.ig-pfeile button{width:48px;height:48px;border:1px solid var(--tinte);background:transparent;color:var(--tinte);font:inherit;font-size:20px;font-weight:500;cursor:pointer;transition:background-color .2s}
.ig-pfeile button:hover:not(:disabled){background:var(--sonne)}
.ig-pfeile button:disabled{opacity:.35;cursor:default}
/* Karte: Bild links, Datum und Text rechts daneben (Jutta 2026-10-08); am Computer zwei Karten nebeneinander */
.ig-reihe{list-style:none;padding:0 0 12px;margin:0;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 32px) / 2);gap:32px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--linie) transparent}
.ig-karte{scroll-snap-align:start;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start;min-width:0}
.ig-bild{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:var(--flaeche-tief)}
.ig-bild img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.ig-bild:hover img{transform:scale(1.03)}
.ig-video,.ig-anzahl{position:absolute;left:8px;top:8px;padding:2px 8px;background:var(--flaeche);font-size:13px;line-height:18px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.ig-anzahl{left:auto;right:8px}
.ig-abstand{margin-top:var(--luft)}
.ig-inhalt{display:flex;flex-direction:column;gap:6px;min-width:0}
.ig-datum{font-size:14px;line-height:20px;color:var(--tinte-leise)}
.ig-text{font-size:16px;line-height:24px;white-space:pre-line;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:9;line-clamp:9;overflow:hidden}
.ig-mehr{margin-top:28px}
/* Großansicht: Bild passt immer ganz auf den Bildschirm (Höhe und Breite); der Text nimmt den ganzen Platz rechts
   daneben, bei viel Platz in Spalten – so muss man möglichst nicht scrollen (Johann 2026-10-08) */
.ig-leuchte{width:96vw;max-width:96vw;max-height:96vh;max-height:96dvh}
.ig-gross{display:flex;background:var(--flaeche);width:100%}
.ig-bildfeld{position:relative;flex:none;display:flex;align-items:center;justify-content:center;background:var(--tinte);touch-action:pan-y}
.ig-gross img{flex:none;width:auto;height:auto;max-width:calc(96vw - 340px);max-height:calc(96vh - 64px);max-height:calc(96dvh - 64px);margin:0;object-fit:contain}
.ig-gross-text{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:12px;align-items:flex-start;padding:24px 32px;max-height:calc(96vh - 64px);max-height:calc(96dvh - 64px);overflow-y:auto}
.ig-gross-text .ig-voll{white-space:pre-line;overflow-wrap:anywhere;align-self:stretch}
.ig-gross-text .ig-voll.spalten{column-width:16em;column-gap:40px}   /* nur bei langem Text (aktuell.js) */
/* Weitere Bilder eines Albums: Pfeile auf dem Bild, Punkte darunter (Tasten ←/→ und Wischen in aktuell.js) */
.ig-b-zurueck,.ig-b-vor{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:none;border-radius:50%;background:rgba(247,246,243,.85);color:var(--tinte);font:inherit;font-size:28px;line-height:1;cursor:pointer}
.ig-b-zurueck{left:12px}
.ig-b-vor{right:12px}
.ig-b-zurueck:hover,.ig-b-vor:hover{background:var(--sonne)}
.ig-b-zurueck[hidden],.ig-b-vor[hidden]{display:none}
.ig-punkte{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:6px}
.ig-punkte i{width:8px;height:8px;border-radius:50%;background:rgba(247,246,243,.5)}
.ig-punkte i.an{background:var(--flaeche)}
/* Newsletter im Kontakt: nur E-Mail-Adresse */
.newsletter{display:flex;flex-direction:column;gap:8px}
.newsletter>label{font-size:16px;line-height:24px;font-weight:500}
.newsletter-zeile{display:flex;flex-wrap:wrap;gap:8px}
.newsletter-zeile .feld{flex:1 1 220px;width:auto;min-height:48px}

/* Knopf „nach oben“ (erscheint nach dem ersten Bildschirm, kopf.js) */
.nach-oben{position:fixed;right:24px;bottom:24px;z-index:6;width:52px;height:52px;display:flex;align-items:center;justify-content:center;background:var(--sonne);color:var(--tinte);box-shadow:0 2px 10px rgba(43,42,40,.18);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility .2s,background-color .2s}
.nach-oben.sichtbar{opacity:1;visibility:visible;transform:none}
.nach-oben:hover{background:var(--tinte);color:var(--flaeche)}
.nach-oben svg{width:24px;height:24px}

/* Fuß */
.fuss{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding-top:24px;padding-bottom:40px;font-size:14px;line-height:20px;color:var(--tinte-leise)}
.fuss a{color:var(--tinte-leise)}
.fuss span{display:flex;flex-wrap:wrap;gap:8px 24px}
.fuss .nachweise{flex-direction:column;flex-wrap:nowrap;gap:0}

/* Unterseiten (Impressum, Datenschutz) */
.unterseite{padding-top:40px;padding-bottom:80px;max-width:820px}
.unterseite h1{font-size:40px;line-height:46px;font-weight:400;margin-bottom:32px}
.unterseite h2{font-size:24px;line-height:30px;font-weight:500;margin:32px 0 8px}
.unterseite p{margin-bottom:12px}
.unterseite ul{margin-bottom:12px;padding-left:22px}

/* Fotoübersicht (nur Vorschau, fotos.html) */
.uebersicht{padding-top:40px;padding-bottom:80px}
.uebersicht h1{font-size:40px;line-height:46px;font-weight:400;margin-bottom:12px}
.uebersicht h2{font-size:24px;line-height:30px;font-weight:500;margin:48px 0 16px}
.uebersicht ol{padding-left:24px}
.foto-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
.foto-karte{margin:0;display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:19px}
.foto-karte b{display:block;font-weight:600}
.foto-karte span{color:var(--tinte-leise)}

@media (min-width:821px) and (max-width:1180px){
  .menue{gap:6px;font-size:15px}
  .menue a{padding:0 9px}
}
@media (max-width:980px){
  .feiern{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  :root{--rand:16px;--luft:72px}
  h2{font-size:32px;line-height:38px}
  .kopf{flex-direction:column;align-items:flex-start;gap:16px}
  .wortmarke{display:block;font-size:clamp(16px,calc((100vw - 34px) / 20),21px)}
  .strich{display:inline}
  .unter{white-space:nowrap}
  .menue{justify-content:flex-start;gap:6px}
  .menue a{min-height:42px;padding:0 11px}
  .mosaik{grid-template-columns:repeat(2,minmax(0,1fr))}
  .q.gross{grid-column:1 / -1;grid-row:auto;aspect-ratio:auto;padding:24px}
  .leitsatz{font-size:34px;line-height:40px}
  .q.sonne{font-size:20px;line-height:26px;padding:16px}
  .punkte,.zwei,.ueber,.kontakt{grid-template-columns:1fr;gap:40px}
  .unterteil.zwei{gap:8px}
  .zwei.nur-rechts>*{grid-column:auto}
  .ueber[class*=bild-][class]{grid-template-columns:1fr}.ueber.bild-rechts .bild{order:0}.ueber.bild-oben.bild-schmal .bild{width:100%}
  .kontakt .links,.kontakt .formular,.spruch{grid-column:1;grid-row:auto}
  .kopf{padding-top:12px;padding-bottom:8px}
  .kacheln{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .kachel span.t{font-size:17px;line-height:22px;padding:12px}
  .termin{grid-template-columns:1fr;gap:8px}
  .formular{padding:20px}
  .nach-oben{right:16px;bottom:16px;width:48px;height:48px}
  .galerie{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
  .ig-pfeile{display:none}
  .ig-oben{margin-bottom:32px}
  .ig-reihe{grid-auto-columns:88%;gap:16px;margin-right:calc(-1 * var(--rand));padding-right:var(--rand);scroll-padding-left:0}
  .ig-karte{gap:14px}
  .ig-text{-webkit-line-clamp:7;line-clamp:7}
}
@media (max-width:600px){
  /* Handy hochkant: neben dem Bild wäre es zu eng – Text darunter, Bild bleibt groß */
  .ig-reihe{grid-auto-columns:80%}
  .ig-karte{grid-template-columns:1fr;gap:10px}
  .ig-text{-webkit-line-clamp:3;line-clamp:3}
}
@media (max-width:700px),(max-aspect-ratio:1/1){
  /* Großansicht hochkant: Text unter dem Bild, Bild trotzdem ganz sichtbar */
  .ig-gross{flex-direction:column;max-height:calc(96vh - 64px);max-height:calc(96dvh - 64px);overflow-y:auto}
  .ig-bildfeld{align-self:stretch}
  .ig-gross img{max-width:96vw;max-height:58vh;max-height:58dvh}
  .ig-gross-text{flex:none;max-height:none;padding:16px}
}
@media (max-width:560px){
  .feiern{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html,.ig-reihe{scroll-behavior:auto}
  *{transition:none !important}
}