/* visper fasnacht — startseite: held, programm, beizen, mitmachen, instagram
 *
 * baut auf site.css auf (tokens, knöpfe, karten, auftritte, edit-modus).
 */

/* ————— held ————— */

/* mobil (< 560 px): hochformat-illustration oben, löwe und
   wortmarke auf dem himmel, darunter der inhalt auf einem weissen blatt,
   das leicht über das bild greift. datum und «zum programm» stehen auf
   390 × 844 im ersten bildschirm. */
.held {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  isolation: isolate;
}

.held__bild {
  grid-area: 1 / 1;
  display: block;
  height: clamp(380px, 56svh, 720px);
  overflow: hidden;
  background: var(--rosa);
}
.held__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
/* niedrige telefone (320 × 568): das bild kürzer, damit datum und «Zum
   Programm» in den ersten bildschirm passen */
@media (max-width: 559px) and (max-height: 600px) {
  .held__bild { height: 300px; }
}

.held__marke {
  grid-area: 1 / 1;
  align-self: start;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 2.5vw, 20px);
  padding: clamp(12px, 3.5vw, 36px) var(--rand) 0;
}
.held__loewe { width: clamp(72px, 21vw, 140px); flex: none; }
.held__titel { width: clamp(168px, 50vw, 360px); margin: 0; }
.held__wortmarke { width: 100%; height: auto; }

.held__inhalt {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: -26px;
  padding: 26px max(var(--rand), (100% - 620px) / 2) clamp(40px, 6vw, 64px);
  border-radius: 26px 26px 0 0;
  background: var(--weiss);
}

.held__datum {
  font-family: var(--schrift-titel);
  font-size: clamp(1.8rem, 1.25rem + 2vw, 2.65rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--rot);
  text-wrap: balance;
}

/* countdown-chip: der platz bleibt reserviert, bis site.js ihn füllt (kein
   sprung im ersten bildschirm). «aus» (nach der fasnacht) blendet ihn aus. */
.held__countdown {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  min-height: 2.1rem;
  margin-top: .85rem;
  padding: .3em .95em .3em .75em;
  border-radius: 999px;
  background: var(--rosa);
  color: var(--weinrot);
  font-weight: 700;
  line-height: 1.3;
}
.held__countdown::before {
  content: "";
  width: .55em;
  height: .55em;
  flex: none;
  border-radius: 50%;
  background: var(--rot-text);
}
.held__countdown:empty { visibility: hidden; }
.held__countdown[data-zustand="aus"],
.kein-js .held__countdown { display: none; }
.held__countdown:is([data-zustand="laeuft"], [data-zustand="heute"]) { background: var(--rot-text); color: var(--weiss); }
.held__countdown:is([data-zustand="laeuft"], [data-zustand="heute"])::before { background: var(--weiss); }
.held__countdown a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.held__countdown a:focus-visible { outline-color: var(--weiss); }
@keyframes puls {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(.55); opacity: .55; }
}
/* der punkt heisst «jetzt»: er pulsiert nur während der fasnacht bzw. an
   einem programmtag, und nur zweimal (nichts bewegt sich länger als 5 s) */
@media (prefers-reduced-motion: no-preference) {
  html:not(.kein-js, [data-modus="bearbeiten"]) .held__countdown:is([data-zustand="laeuft"], [data-zustand="heute"])::before { animation: puls 1.8s ease-in-out 2; }
}

.held__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-top: 1.4rem;
}
.held__kalender { margin-top: .35rem; }
/* ohne javascript gibt es keinen .ics-download. keinen auch, wenn site.js den
   start nicht lesen kann (data-saison="fehler") — nie beim blossen fehlen des
   attributs, sonst springt der knopf beim laden */
.kein-js [data-ics],
html[data-saison="fehler"]:not([data-modus="bearbeiten"]) [data-ics] { display: none; }

/* termine in «site › fasnacht» unlesbar: im editor ein hinweis unter dem datum
   (am ungebundenen <p>, der gebundene text bleibt, wie er ist) */
html[data-modus="bearbeiten"]:is([data-saison="fehler"], [data-saison-ende="fehler"]) .held__datum::after {
  content: "Termin in «site › fasnacht › start» nicht erkannt – TT.MM.JJJJ";
  display: block;
  width: fit-content;
  margin-top: .5rem;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--weinrot);
  color: var(--weiss);
  font: 700 .75rem/1.6 var(--schrift-text);
  letter-spacing: 0;
}
html[data-modus="bearbeiten"][data-saison-ende="fehler"]:not([data-saison="fehler"]) .held__datum::after {
  content: "Ende in «site › fasnacht › ende» nicht erkannt oder vor dem Start – TT.MM.JJJJ";
}

.held__hinweis {
  margin-top: 1.1rem;
  padding: .15rem 0 .15rem 1rem;
  border-left: 3px solid var(--rot);
  color: var(--weinrot);
  text-wrap: pretty;
}
.held__hinweis p + p { margin-top: .35em; }

@media (max-width: 1199px) {
  /* bis 1199 px füllen die knöpfe die zeile — leichter zu treffen */
  .held__knoepfe { align-self: stretch; }
  .held__knoepfe .knopf { flex: 1 1 14rem; }
}

/* grosse telefone, tablets, kleine bildschirme (560–1199 px): zwei spalten —
   links marke und inhalt, rechts die ganze hochformat-illustration, weich
   ausgeblendet. */
@media (min-width: 560px) and (max-width: 1199px) {
  .held {
    grid-template-columns: minmax(0, 1fr) minmax(0, 44%);
    grid-template-rows: minmax(24px, 1fr) auto auto minmax(24px, 1fr);
    min-height: min(calc(100svh - var(--kopf-h)), 900px);
  }
  /* das bild bestimmt die höhe nicht mit (sonst wächst der held auf das hochformat) */
  .held__bild {
    position: relative;
    grid-area: 1 / 2 / -1 / 3;
    height: auto;
    background: var(--weiss);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%);
    mask-image: linear-gradient(90deg, transparent, #000 22%);
  }
  .held__bild img { position: absolute; inset: 0; object-position: 50% 42%; }
  .held__marke {
    grid-area: 2 / 1;
    justify-content: flex-start;
    padding: 0 0 0 var(--rand-voll);
  }
  .held__loewe { width: clamp(76px, 12vw, 110px); }
  .held__titel { width: clamp(200px, 30vw, 290px); }
  .held__inhalt {
    grid-area: 3 / 1;
    margin: 0;
    padding: clamp(20px, 3vw, 32px) clamp(12px, 3vw, 28px) 0 var(--rand-voll);
    border-radius: 0;
    background: none;
  }
}

/* ab 1200 px: querformat über die ganze fläche. links ist das bild weiss —
   dort stehen löwe, wortmarke und inhalt, weich in die illustration
   übergeblendet. höhe: bildschirm, höchstens 16:9, mindestens 560 px;
   braucht der inhalt mehr, wächst der held mit. */
@media (min-width: 1200px) {
  .held {
    --spalte: clamp(340px, 31vw, 560px);
    grid-template-columns: var(--rand-voll) var(--spalte) minmax(0, 1fr);
    grid-template-rows: minmax(28px, 1fr) auto auto minmax(28px, 1fr);
    min-height: max(560px, min(calc(100svh - var(--kopf-h)), 56.25vw));
  }
  .held__bild {
    position: relative;
    grid-area: 1 / 1 / -1 / -1;
    z-index: -2;
    height: auto;
    background: var(--weiss);
  }
  .held__bild img { position: absolute; inset: 0; object-position: 100% 50%; }
  /* weisser verlauf: der inhalt steht immer auf weiss, die illustration
     läuft weich aus (wie im original) */
  .held::before {
    content: "";
    grid-area: 1 / 1 / -1 / 3;
    z-index: -1;
    margin-right: -11vw;
    background: linear-gradient(90deg, var(--weiss) calc(100% - 11vw), rgb(255 255 255 / .82) calc(100% - 7.5vw), rgb(255 255 255 / .4) calc(100% - 3.5vw), rgb(255 255 255 / 0));
    pointer-events: none;
  }
  /* löwe mittig über der wortmarke, wie im original */
  .held__marke {
    grid-area: 2 / 2;
    justify-self: start;
    flex-direction: column;
    align-items: center;
    gap: clamp(6px, .6vw, 12px);
    padding: 0;
  }
  .held__loewe { width: clamp(84px, 7.6vw, 136px); }
  .held__titel { width: min(100%, clamp(300px, 26vw, 420px)); }
  .held__inhalt {
    grid-area: 3 / 2;
    margin: 0;
    padding: clamp(18px, 1.8vw, 30px) 0 0;
    border-radius: 0;
    background: none;
  }
}

/* auftritt beim laden: wortmarke, löwe und datum kommen ab dem ersten paint
   von unten (kein layoutsprung: nur transform/opacity). die illustration
   (lcp) steht sofort. */
@keyframes held-auftritt {
  from { opacity: 0; transform: translateY(18px); }
}
@media (prefers-reduced-motion: no-preference) {
  html:not(.kein-js, [data-modus="bearbeiten"]) :is(.held__marke, .held__datum, .held__countdown, .held__knoepfe) {
    animation: held-auftritt 650ms var(--kurve-raus) both;
  }
  html:not(.kein-js, [data-modus="bearbeiten"]) .held__datum { animation-delay: 120ms; }
  html:not(.kein-js, [data-modus="bearbeiten"]) .held__countdown { animation-delay: 200ms; }
  html:not(.kein-js, [data-modus="bearbeiten"]) .held__knoepfe { animation-delay: 260ms; }
}

/* ————— programm ————— */

/* direkt nach dem held weniger luft — der held hat unten schon genug */
.held + .abschnitt { padding-top: clamp(24px, 1rem + 4vw, 104px); }

.programm__liste {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: clamp(16px, 2.2vw, 28px);
  margin: 0;
  list-style: none;
}
@media (min-width: 820px) {
  .programm__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* platz halten, solange cms.js die karten noch nicht gesetzt hat */
html:not([data-geladen], .kein-js, [data-ohne-cms]) .programm__liste:not(:has(> :not(template))) { min-height: 240px; }

.tag__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: .55rem;
}
.tag__datum {
  color: var(--rot-text);
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .01em;
}
/* h3.kartentitel.tag__titel — ohne automatische trennung: zusammen mit
   balance trennte sie «Quartierfas-nacht», obwohl es in eine zeile passt.
   ein überlanges wort bricht trotzdem um (overflow-wrap der .kartentitel) */
.tag__titel { hyphens: manual; }
.tag__untertitel {
  margin-top: .4rem;
  font-size: var(--text-gross);
  font-weight: 700;
  line-height: 1.35;
  color: var(--weinrot);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.tag__text { margin-top: 1rem; }

/* «heute» und «vorbei» zeigt site.js über data-zustand */
.tag__heute, .tag__vorbei { display: none; }
.tag[data-zustand="heute"] .tag__heute { display: inline-flex; background: var(--weinrot); color: var(--weiss); }
.tag[data-zustand="vorbei"] .tag__vorbei { display: inline-flex; }
.tag__heute::before {
  content: "";
  width: .5em;
  height: .5em;
  border-radius: 50%;
  background: currentColor;
}
@media (prefers-reduced-motion: no-preference) {
  html:not(.kein-js, [data-modus="bearbeiten"]) .tag__heute::before { animation: puls 1.8s ease-in-out 2; }
}
.tag[data-zustand="heute"] { box-shadow: 0 0 0 4px var(--weiss), 0 0 0 8px var(--rosa-kraeftig), 0 18px 40px -22px rgb(126 2 4 / .55); }
/* vorbei: ruhiger rahmen, gleich gut lesbar */
.tag[data-zustand="vorbei"] { border-color: var(--rosa-kraeftig); }
.tag[data-zustand="vorbei"] .tag__titel { color: var(--rot-text); }
/* während der fasnacht stehen die vergangenen tage zuoberst: nur datum und
   titel, damit «Zum Programm» gleich beim heutigen landet. gestern bleibt
   offen (der abend lief bis in die nacht), nach der fasnacht alles. live —
   im editor sieht man alles */
html:not([data-modus="bearbeiten"]) .programm__liste:has(> [data-zustand="heute"], > [data-zustand="kommend"]) > .tag[data-zustand="vorbei"]:not([data-gestern]) :is(.tag__untertitel, .tag__text, .tag__pdfs) { display: none; }

/* hervorgehoben (checkbox im backend): rote fläche, weisse schrift — nur
   solange der tag nicht vorbei ist (sonst bliebe er die lauteste fläche) */
.tag[data-hervorheben="true"]:not([data-zustand="vorbei"]) { border-color: var(--rot-text); background: var(--rot-text); color: var(--weiss); }
.tag[data-hervorheben="true"]:not([data-zustand="vorbei"]) :is(.tag__datum, .tag__titel, .tag__untertitel, .zeit) { color: var(--weiss); }
.tag[data-hervorheben="true"]:not([data-zustand="vorbei"]) ul.punkte > li::before { background: var(--weiss); }
.tag[data-hervorheben="true"]:not([data-zustand="vorbei"]) ol.punkte > li::before { color: var(--weiss); }
/* abzeichen auf der roten karte: weinrot bzw. weiss, beide mit genug kontrast */
.tag[data-hervorheben="true"]:not([data-zustand="vorbei"]) .abzeichen { background: var(--weinrot); color: var(--weiss); }
.tag[data-hervorheben="true"][data-zustand="heute"] .tag__heute { background: var(--weiss); color: var(--rot-text); }
.tag[data-hervorheben="true"]:not([data-zustand="vorbei"]) :focus-visible { outline-color: var(--weiss); }

/* pdf-knöpfe: icon (maske, farbe = currentColor), name, «PDF» */
.tag__pdfs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 1.4rem;
}
.tag__pdfs:not(:has(a[href])) { display: none; }
.pdf {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  min-height: 48px;
  padding: .45em 1.05em .45em .6em;
  border: 2px solid var(--rosa-kraeftig);
  border-radius: 999px;
  background: var(--rosa);
  color: var(--rot-text);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color var(--schnell) ease, border-color var(--schnell) ease, color var(--schnell) ease;
}
.pdf:hover { background: var(--rot-text); border-color: var(--rot-text); color: var(--weiss); }
.pdf__icon {
  width: 1.9em;
  height: 1.9em;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.pdf__icon--umzug { --icon: url("/assets/img/icons/umzug.svg"); }
.pdf__icon--buehne { --icon: url("/assets/img/icons/buehne.svg"); }
.pdf__typ {
  margin-left: .3em;
  padding: .05em .4em;
  border: 1.5px solid currentColor;
  border-radius: 4px;
  font-size: .72em;
  letter-spacing: .04em;
  vertical-align: .12em;
}
.tag[data-hervorheben="true"]:not([data-zustand="vorbei"]) .pdf { border-color: rgb(255 255 255 / .55); background: transparent; color: var(--weiss); }
.tag[data-hervorheben="true"]:not([data-zustand="vorbei"]) .pdf:hover { background: var(--weiss); border-color: var(--weiss); color: var(--rot-text); }

/* leerzustand: kein eintrag live sichtbar. erst nach dem laden (site.js
   setzt .ist-leer), ohne javascript bzw. ohne cms.js immer */
.leer {
  display: none;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 16px clamp(16px, 3vw, 32px);
  padding: clamp(22px, 1rem + 2vw, 40px);
  border-radius: var(--radius-gross);
  background: var(--rosa);
}
.leer.ist-leer,
.kein-js .leer,
html[data-ohne-cms] .leer { display: grid; }
.leer__icon { width: clamp(52px, 8vw, 84px); height: auto; color: var(--rot); }
.leer__datum {
  margin-top: .2rem;
  font-family: var(--schrift-titel);
  font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.1rem);
  font-weight: 700;
  line-height: 1.12;
  color: var(--rot);
  text-wrap: balance;
}
.leer__text { margin-top: .45rem; font-size: var(--text-gross); }
.leer__knopf { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 820px) {
  .leer { grid-template-columns: auto minmax(0, 1fr) auto; }
  .leer__knopf { grid-column: auto; }
}
/* nach der fasnacht (bis neue termine in «site» stehen): kein «jetzt
   vormerken» mit vergangenem datum, kein kalender-knopf, statt «… 2027 folgt»
   der text ohne jahr (data-wenn-saison). live — der editor zeigt beides */
html[data-saison="danach"]:not([data-modus="bearbeiten"]) :is([data-ics], .leer__kicker, .leer__datum, [data-wenn-saison="nicht-danach"]),
html:not([data-saison="danach"], [data-modus="bearbeiten"]) [data-wenn-saison="danach"] { display: none; }
html[data-modus="bearbeiten"][data-saison="danach"] [data-wenn-saison="nicht-danach"],
html[data-modus="bearbeiten"]:not([data-saison="danach"]) [data-wenn-saison="danach"] {
  position: relative;
  padding: 22px 10px 8px;
  border: 2px dashed var(--weinrot);
  border-radius: var(--radius);
  opacity: .6;
}
html[data-modus="bearbeiten"][data-saison="danach"] [data-wenn-saison="nicht-danach"]::before,
html[data-modus="bearbeiten"]:not([data-saison="danach"]) [data-wenn-saison="danach"]::before {
  content: "Live ausgeblendet (nach der Fasnacht bis zu neuen Daten in «site»)";
  position: absolute;
  top: 2px;
  left: 10px;
  font-size: .75rem;
  font-weight: 700;
}

/* im editor sieht man ihn immer (gedimmt, wenn es live programm gibt) */
html[data-modus="bearbeiten"] .leer { display: grid; }
html[data-modus="bearbeiten"] .leer:not(.ist-leer) { opacity: .55; }
html[data-modus="bearbeiten"] .programm__liste:not(:empty) + .leer { margin-top: clamp(16px, 2.2vw, 28px); }

/* ————— beizen ————— */

/* fläche aus .abschnitt--rot. live nur mit eingeschaltetem schalter und
   sichtbaren einträgen (site.js) */
.beizen { display: none; }
html[data-beizen="an"] .beizen,
html[data-modus="bearbeiten"] .beizen { display: block; }
html[data-modus="bearbeiten"]:not([data-beizen="an"]) .beizen { opacity: .7; }
html[data-modus="bearbeiten"]:not([data-beizen="an"]) .beizen .abschnitt__kopf::after {
  content: "Live ausgeblendet – im Backend unter «home › beizen › zeigen» einschalten";
  justify-self: start;
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--weiss);
  color: var(--weinrot);
  font-size: .8125rem;
  font-weight: 700;
}

.beizen__liste {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(14px, 1.6vw, 20px);
  margin: 0;
  list-style: none;
}
@media (min-width: 600px) { .beizen__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .beizen__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .beizen__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* keine hover-bewegung: die karte selbst ist kein link */
.beiz {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.beiz__motto {
  order: -1; /* im dom nach dem namen (erstes feld im «+ eintrag»-dialog), zu sehen darüber */
  margin-bottom: .7rem;
  padding: .2em .75em;
  border-radius: 999px;
  background: var(--rosa);
  color: var(--rot-text);
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.beiz__name {
  font-family: var(--schrift-titel);
  font-size: clamp(1.2rem, 1.05rem + .45vw, 1.4rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--rot-text);
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}
.beiz__text { margin-top: .6rem; text-wrap: pretty; }
.beiz__text .text-formatiert > * + * { margin-top: .5em; }
.beiz__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
  margin-top: auto;
  padding-top: .9rem;
}
.beiz__links:not(:has(a[href])) { display: none; }
.beiz__tel:not(:has(a[href])) { display: none; }
/* .linie mit icon und grösserer trefferfläche */
.beiz__link {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  min-height: 44px;
  font-size: .9375rem;
}
.beiz__icon { width: 1.15em; height: 1.15em; flex: none; }
.beiz :focus-visible { outline-color: var(--weinrot); }

/* ————— mitmachen ————— */

.mitmachen { background: var(--rosa); }
.mitmachen__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 8px clamp(24px, 5vw, 72px);
}
@media (min-width: 800px) {
  .mitmachen__raster { grid-template-columns: minmax(160px, 300px) minmax(0, 1fr); }
}
.mitmachen__trompete { width: clamp(120px, 32vw, 300px); justify-self: start; }
@media (min-width: 800px) {
  .mitmachen__trompete { justify-self: center; }
}
.mitmachen__inhalt { display: grid; gap: 1rem; justify-items: start; max-width: 40rem; }
.mitmachen__offen, .mitmachen__zu { display: grid; gap: 1.2rem; justify-items: start; }
.mitmachen__text { font-size: var(--text-gross); line-height: 1.5; text-wrap: pretty; }
.mitmachen__text p + p { margin-top: .6em; }
.mitmachen__kontakt { color: var(--weinrot); }

/* ————— instagram ————— */

.instagram__folgen { margin-top: .6rem; }

/* fassade: ohne klick nur eine ruhige karte — konto, hinweis, knopf. nach dem
   klick ersetzt das widget die fassade. */
.fassade {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 16px 22px;
  max-width: 50rem;
  margin-inline: auto;
  padding: clamp(20px, 1rem + 1.6vw, 34px);
  border-radius: var(--radius-gross);
  background: var(--rosa);
}
@media (max-width: 719px) {
  .fassade { align-items: start; }
}
.fassade__marke {
  display: grid;
  place-items: center;
  width: clamp(56px, 7vw, 72px);
  aspect-ratio: 1;
  border-radius: 30%;
  background: var(--rot-text);
  color: var(--weiss);
}
.fassade__marke svg { width: 52%; height: auto; }
.fassade__konto {
  font-family: var(--schrift-titel);
  font-size: clamp(1.25rem, 1.05rem + .7vw, 1.6rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--rot-text);
  overflow-wrap: anywhere;
}
.fassade__hinweis { margin-top: .35rem; font-size: var(--text-klein); line-height: 1.5; text-wrap: pretty; }
.fassade__hinweis .linie { display: inline-block; margin-top: .2em; }
.fassade__knopf { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 720px) {
  .fassade { grid-template-columns: auto minmax(0, 1fr) auto; }
  .fassade__knopf { grid-column: auto; }
}
/* ohne javascript lädt der knopf nichts — dann nur «folge uns» */
.kein-js .fassade { display: none; }

/* html[data-instagram] (site.js): laedt → an, oder fehler. das ziel hält
   platz, solange es lädt bzw. das widget zeigt; bei fehler bleibt es ohne
   höhe im layout (kommt elfsight doch noch, hat es eine breite) */
.instagram__feed { display: none; margin-top: 8px; }
html[data-instagram="fehler"] .instagram__feed { display: block; }
html:is([data-instagram="laedt"], [data-instagram="an"]) .instagram__feed { display: grid; min-height: 420px; }
html[data-instagram="laedt"] .instagram__feed > [class^="elfsight-app-"]:empty { display: none; }
.instagram__feed:focus { outline: none; }
html:is([data-instagram="laedt"], [data-instagram="an"]) .fassade { display: none; }
.instagram__status { display: none; margin-top: .75rem; text-align: center; color: var(--weinrot); }
html[data-instagram="laedt"] .instagram__status--laedt { display: block; align-self: center; margin: 0; }
html[data-instagram="fehler"] .instagram__status--fehler { display: block; }
.instagram__status:focus { outline: none; }
.instagram__vergessen { display: none; margin-top: .75rem; text-align: center; }
html[data-instagram="an"] .instagram__vergessen { display: block; }
/* im editor: hinweise und «nicht mehr anzeigen» gedimmt sichtbar (bearbeitbar) */
html[data-modus="bearbeiten"] .instagram__feed { display: block; min-height: 0; }
html[data-modus="bearbeiten"] :is(.instagram__status, .instagram__vergessen) {
  position: relative;
  display: block;
  max-width: 50rem;
  margin: .75rem auto 0;
  padding: 26px 14px 14px;
  border: 2px dashed var(--weinrot);
  border-radius: var(--radius);
  opacity: .6;
}
html[data-modus="bearbeiten"] :is(.instagram__status, .instagram__vergessen)::before {
  position: absolute;
  top: 4px;
  left: 12px;
  font-size: .75rem;
  font-weight: 700;
}
html[data-modus="bearbeiten"] .instagram__status--laedt::before { content: "Live nach dem Klick, solange die Beiträge laden"; }
html[data-modus="bearbeiten"] .instagram__status--fehler::before { content: "Live, wenn die Beiträge nicht laden"; }
html[data-modus="bearbeiten"] .instagram__vergessen::before { content: "Live, sobald die Beiträge da sind"; }