/* Postkarten (Wand und Einzelkarte): Zusatzteil aus dem Entwurf, 1:1. */
/* Social Wall: Seiten ohne Hero, Kopf immer dunkel */
.ohne-hero main{padding-top:69px}
.wand-kopf{background:var(--schiefer-tief);color:var(--weiss);padding:clamp(48px,6vw,88px) 0 clamp(40px,5vw,64px)}
.wand-kopf .kicker{color:var(--weiss)}
.wand-kopf h1{font-size:clamp(40px,6vw,88px)}
.wand-kopf .lead{margin-top:20px;max-width:30em;color:rgba(255,255,255,.85)}
.wand-leiste{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 32px;margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.18);font-family:var(--ocr);font-stretch:var(--breit-ocr);font-size:15px}
.wand-leiste a{color:var(--weiss);text-decoration:none;border-bottom:2px solid var(--orange)}
.wand-leiste a:hover{color:var(--orange)}
/* Filter nach Kanal: zeigt nur die Grüsse, die auch auf Instagram, Facebook oder LinkedIn erschienen sind */
.wand-leiste .filter{display:flex;flex-wrap:wrap;gap:10px 22px}
.wand-leiste .filter button{font:inherit;color:rgba(255,255,255,.8);background:none;border:0;border-bottom:2px solid transparent;padding:4px 0;cursor:pointer;white-space:nowrap}
.wand-leiste .filter button:hover{color:var(--weiss);border-bottom-color:rgba(255,92,13,.6)}
.wand-leiste .filter button[aria-pressed="true"]{color:var(--weiss);border-bottom-color:var(--orange)}
.wand-leer{font-family:var(--ocr);font-stretch:var(--breit-ocr);font-size:16px;color:var(--schiefer);padding:24px 0}
.wand{background:var(--kalk);padding:clamp(56px,6vw,96px) 0}
.wand-raster{display:flex;gap:clamp(28px,3vw,48px);align-items:flex-start}
.wand-spalte{flex:1;min-width:0;display:flex;flex-direction:column;gap:clamp(36px,3.5vw,56px)}
.wand-raster .post{display:block}
.wand-raster .post:nth-child(n){margin-top:0}
.wand-titel{font-family:var(--display);font-weight:var(--fett);font-stretch:var(--breit-titel);text-transform:uppercase;font-size:19px;line-height:1.3;color:var(--schiefer);margin:0 0 6px}
.event-zeile{font-family:var(--ocr)!important;font-stretch:var(--breit-ocr);font-size:14px!important;line-height:1.4!important;color:var(--schiefer)!important;margin-bottom:6px}
.event-zeile b{display:inline-block;background:var(--orange);color:var(--schwarz);padding:1px 6px;margin-right:6px;font-weight:600}
.abspielen{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:rgba(30,35,38,.72)}
.abspielen::after{content:"";position:absolute;left:23px;top:18px;border-style:solid;border-width:11px 0 11px 17px;border-color:transparent transparent transparent #fff}
.wand-post .post-bild img{aspect-ratio:auto;height:auto}
.post-bild video{display:block;width:100%;height:auto;background:var(--schiefer-tief)}
.mehr-laden{display:flex;justify-content:center;margin-top:16px}
@media (max-width:860px){.ohne-hero main{padding-top:68px}.wand-leiste{flex-direction:column;align-items:flex-start}}

/* Einzelbeitrag */
.beitrag{background:var(--kalk);padding:clamp(40px,5vw,72px) 0 clamp(56px,6vw,96px)}
.beitrag-leiste{display:flex;justify-content:space-between;gap:16px;font-family:var(--ocr);font-stretch:var(--breit-ocr);font-size:15px;margin-bottom:28px}
.beitrag-leiste a{text-decoration:none;border-bottom:2px solid var(--orange)}
.beitrag-karte{--neigung:-.8deg;max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1.1fr 1fr;gap:0;rotate:var(--neigung);padding:16px;
  background:#FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .4 0 0 0 0 .4 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  box-shadow:0 1px 1px rgba(60,40,20,.12),0 14px 34px rgba(60,40,20,.16)}
.beitrag-bild{position:relative;align-self:start}
.beitrag-bild img,.beitrag-bild video{display:block;width:100%;height:auto}
.beitrag-karte--hoch{grid-template-columns:minmax(0,440px) 1fr}
.beitrag-text .event-zeile{margin-bottom:14px}
/* Blättern zwischen den Postkarten */
.beitrag-leiste .nummer{display:flex;gap:18px;align-items:center;white-space:nowrap;flex-shrink:0}
.beitrag-leiste .nummer a{border-bottom:0;font-size:22px;line-height:1;padding:0 4px}
.beitrag-leiste .nummer a:hover{color:var(--orange)}
.beitrag-leiste .nummer [aria-disabled]{opacity:.3;font-size:22px;line-height:1;padding:0 4px}
.blaettern{max-width:1080px;margin:48px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.blaettern a{display:grid;grid-template-columns:80px 1fr;gap:16px;align-items:center;padding:14px;background:var(--weiss);text-decoration:none;box-shadow:0 1px 1px rgba(60,40,20,.1),0 6px 16px rgba(60,40,20,.1);transition:translate .2s,box-shadow .2s}
.blaettern a:hover,.blaettern a:focus-visible{translate:0 -3px;box-shadow:0 2px 2px rgba(60,40,20,.12),0 14px 28px rgba(60,40,20,.18)}
.blaettern .aelter{grid-column:2;grid-template-columns:1fr 80px;text-align:right}
.blaettern .aelter img{order:2}
.blaettern img{width:80px;height:80px;object-fit:cover}
.blaettern small{display:block;font-family:var(--ocr);font-stretch:var(--breit-ocr);font-size:14px;color:var(--schiefer);margin-bottom:4px}
.blaettern b{display:block;font-family:var(--display);font-weight:var(--fett);font-stretch:var(--breit-titel);text-transform:uppercase;font-size:18px;line-height:1.2;color:var(--schiefer)}
.blaettern a:hover b{color:var(--orange)}
.beitrag-text{position:relative;padding:28px 28px 20px 36px;border-left:1px dashed rgba(52,52,52,.3);margin-left:20px}
.beitrag-text .frankatur{position:absolute;right:0;top:0;margin:0}
.beitrag-text h1{font-size:clamp(28px,3vw,42px);line-height:1.1;margin:72px 0 10px;color:var(--schiefer)}
.beitrag-meta{font-family:var(--ocr);font-stretch:var(--breit-ocr);font-size:14px;color:var(--schiefer);margin-bottom:18px}
.beitrag-text .gruss{font-family:"Caveat",cursive;font-size:27px;line-height:1.3;color:#22408C;margin-bottom:14px}
.beitrag-text p.lauf{font-size:17px;line-height:1.55;margin-bottom:12px}
.tags{display:flex;flex-wrap:wrap;gap:6px 10px;margin:16px 0 20px;font-family:var(--ocr);font-stretch:var(--breit-ocr);font-size:14px;color:var(--schiefer)}
.beitrag-text .knopf{margin-top:6px}
.auch-auf{max-width:1080px;margin:56px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px)}
.auch-auf h2,.weitere h2{font-size:24px;margin-bottom:16px}
.auch-auf ul{list-style:none;border-top:2px solid var(--schiefer)}
.auch-auf li a{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--linie);text-decoration:none;font-family:var(--ocr);font-stretch:var(--breit-ocr);font-size:16px}
.auch-auf li a:hover{color:var(--orange)}
.weitere ol{list-style:none;border-top:2px solid var(--schiefer)}
.weitere li a{display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:center;padding:10px 0;border-bottom:1px solid var(--linie);text-decoration:none}
.weitere img{width:64px;height:64px;object-fit:cover}
.weitere b{display:block;font-family:var(--display);font-weight:var(--fett);font-stretch:var(--breit-titel);text-transform:uppercase;font-size:16px}
.weitere span{font-family:var(--ocr);font-stretch:var(--breit-ocr);font-size:13px;color:var(--schiefer)}
@media (max-width:860px){.beitrag-karte,.beitrag-karte--hoch{grid-template-columns:1fr;rotate:0deg}.beitrag-karte--hoch .beitrag-bild{max-width:420px;width:100%;justify-self:center}.blaettern{grid-template-columns:1fr}.blaettern .aelter{grid-column:1}.beitrag-text{border-left:0;margin-left:0;padding:24px 8px 8px}.auch-auf{grid-template-columns:1fr}}

/* Fehlendes Vorschaubild (importierte Beiträge ohne Bild): ruhiger Platzhalter statt Loch, der Text bleibt in seiner Spalte */
.weitere li a:not(:has(img))::before,.blaettern a:not(:has(img))::before{content:"";width:64px;height:64px;box-sizing:border-box;background:rgba(52,52,52,.07);border:1px dashed rgba(52,52,52,.25)}
.blaettern a:not(:has(img))::before{width:80px;height:80px}
.blaettern .aelter:not(:has(img))::before{order:2}

/* Handy: Blättern, «Auch veröffentlicht auf» und «Weitere Beiträge» mit grösseren Bildern und Tippflächen, lange Titel brechen um */
@media (max-width:560px){
  .beitrag-leiste{align-items:center;flex-wrap:wrap;margin-bottom:20px}
  .beitrag-leiste .nummer{gap:4px}
  .beitrag-leiste .nummer a,.beitrag-leiste .nummer [aria-disabled]{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
  .blaettern{margin-top:36px;gap:12px}
  .blaettern a{grid-template-columns:72px minmax(0,1fr);gap:14px;padding:12px}
  .blaettern .aelter{grid-template-columns:minmax(0,1fr) 72px}
  .blaettern img,.blaettern a:not(:has(img))::before{width:72px;height:72px}
  .blaettern b,.weitere b{font-size:17px;overflow-wrap:anywhere;hyphens:auto}
  .auch-auf{margin-top:40px;gap:36px}
  .auch-auf h2,.weitere h2{font-size:22px;margin-bottom:14px}
  .auch-auf li a{min-height:52px;padding:10px 0}
  .weitere li a{grid-template-columns:88px minmax(0,1fr);gap:14px;padding:12px 0}
  .weitere img,.weitere li a:not(:has(img))::before{width:88px;height:88px}
  .weitere li a>div{min-width:0}
  .weitere span{font-size:14px;display:block;margin-top:4px}
}
/* Pre-Launch D3: Die schräg gestellten Karten (rotate) und die Frankatur mit negativem Rand ragen je nach Kartenhöhe
   über die Spalte hinaus; bei hohen oder nachgeladenen Karten reichte das über den Seitenrand und die Seite liess sich
   seitlich schieben. clip schneidet nur den Überhang ab und lässt position:sticky (Filterleiste) intakt. */
.wand,.social{overflow-x:clip}