/* article.css — Detailseiten für News & Marktgeschichten */

.article-hero{
  position:relative;
  background:var(--verlauf);
  color:#fff;
  padding:clamp(78px,11vw,150px) 0 clamp(34px,5vw,56px);
  overflow:hidden;
}
.article-hero.has-img{background-size:cover;background-position:center}
.ah-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(10,80,14,.32) 0%, rgba(10,80,14,.20) 40%, rgba(7,58,9,.80) 100%),
    linear-gradient(105deg, rgba(7,58,9,.42) 0%, rgba(7,58,9,.08) 60%, transparent 100%);
}
.article-hero .ah-inner{position:relative;z-index:1;max-width:880px}
/* Zentrales Raster je Seitentyp. Vorschau und Editor rendern dieselben Dateien
   und übernehmen diese Werte deshalb automatisch. */
.page-market-detail .article-hero .ah-inner,.page-market-detail .article-body>.wrap{max-width:var(--wm-market-max)}
.page-vendor-profile .article-hero .ah-inner,.page-vendor-profile .article-body>.wrap{max-width:var(--wm-profile-max)}
.page-news-article .article-hero .ah-inner,.page-news-article .article-body>.wrap,
.page-story-article .article-hero .ah-inner,.page-story-article .article-body>.wrap{max-width:var(--wm-article-max)}
.page-info-detail .article-hero .ah-inner,.page-info-detail .article-body>.wrap{max-width:var(--wm-info-max)}
.page-market-detail .article-hero h1,.page-vendor-profile .article-hero h1,
.page-news-article .article-hero h1,.page-story-article .article-hero h1,.page-info-detail .article-hero h1{max-width:100%}
.page-market-detail .article-media:not(.ab-media),.page-market-detail .article-media.single:not(.ab-media),
.page-vendor-profile .article-media:not(.ab-media),.page-vendor-profile .article-media.single:not(.ab-media){max-width:100%}
.page-market-detail .info-cards,.page-market-detail .vm-grid,.page-market-detail .vendor-gallery,
.page-vendor-profile .vendor-top,.page-vendor-profile .vm-grid,.page-vendor-profile .vendor-gallery{width:100%}
.article-body img{max-width:100%;height:auto}

.article-hero .crumb{font-size:.84rem;color:rgba(255,255,255,.72);margin-bottom:20px}
.article-hero .crumb a{color:rgba(255,255,255,.72)}
.article-hero .crumb a:hover{color:#fff}
.ah-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px;font-size:.9rem}
.ah-kick{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);padding:5px 13px;border-radius:100px;font-weight:700;letter-spacing:.02em}
.ah-date,.ah-from{color:rgba(255,255,255,.82);font-weight:600}
.ah-sep{color:rgba(255,255,255,.6);font-weight:600}
.article-hero h1{font-size:clamp(2.1rem,5vw,3.6rem);line-height:1.05;max-width:880px}

.article-body{padding:clamp(38px,6vw,64px) 0 clamp(50px,8vw,90px)}
.article-body .wrap{max-width:var(--wm-readable-max)}
.article-body .lead{font-size:clamp(1.15rem,1.8vw,1.4rem);font-weight:600;color:var(--tinte);line-height:1.5;margin-bottom:24px}
.article-body .pb-h{clear:both;font-size:clamp(1.5rem,3vw,2rem);font-weight:800;letter-spacing:-.02em;margin:28px 0 14px}
.article-body p{font-size:1.08rem;line-height:1.75;color:var(--tinte-2);margin-bottom:20px;max-width:var(--wm-reading-max)}
/* Marktseiten verwenden das breite gemeinsame Raster, halten längere Texte
   aber bewusst auf angenehmer Lesebreite. Die rechte Fläche wird nicht leer
   gelassen, sondern durch die kompakte Faktenkarte sinnvoll genutzt. */
.page-market-detail .article-media:not(.ab-media),.page-market-detail .article-media.single:not(.ab-media){max-width:100%}

/* Fotos im Textblock — Layout automatisch nach Anzahl
   ---------------------------------------------------
   Redaktioneller Ansatz: Bilder laufen auf Textbreite (780px, wie die
   Absätze darüber) und sind flach (2:1). Das hält die Bildhöhe niedrig
   und die linke Kante bündig mit dem Fließtext.
   Bei mehreren Bildern bleibt das Format flach — nur die Spaltenzahl
   ändert sich. So wirkt eine Bilderstrecke ruhig statt wuchtig. */
.article-media:not(.ab-media){display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:12px;margin:20px 0 30px;max-width:var(--wm-reading-max)}
.article-media.ab-media{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:12px}
.article-media.single.ab-media{display:block}
.article-media.single:not(.ab-media){display:block;max-width:var(--wm-reading-max);margin-left:0;margin-right:0}
.article-media.single:not(.ab-media) .am-img{aspect-ratio:2/1}
.article-media .am-img{display:block;width:100%;padding:0;margin:0;border:1px solid var(--linie);border-radius:14px;overflow:hidden;background:var(--papier-2);cursor:zoom-in;transition:transform .35s var(--takt),box-shadow .35s var(--takt)}
.article-media .am-img img{display:block;width:100%}
.article-media .am-img:hover{transform:translateY(var(--lift-control));box-shadow:0 14px 30px rgba(12,80,14,.14)}
/* Mehrere Bilder: ebenfalls flach (16:10 gleicht die schmalere Spalte aus).
   :not(.ab-media) — im Artikel-Baukasten wählt die Redaktion das Format
   selbst (ab-ratio-*), das darf hier nicht überschrieben werden. */
.article-media:not(.single):not(.ab-media) .am-img{aspect-ratio:16/10}
.article-media:not(.single) .am-img img{height:100%;object-fit:cover}
/* Ausgewogene Raster: 2 oder 4 Bilder -> 2 Spalten (kein einsames Bild in der letzten Reihe) */
@supports selector(:has(*)){
  @media(min-width:761px){
    .article-media:has(> :nth-child(2):last-child),
    .article-media:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}
  }
}
.article-media.single .am-img img{height:100%;object-fit:cover}
/* Mobil: gestapelt, volle Breite — zwei Spalten wären hier zu kleinteilig. */
@media(max-width:600px){
  .article-media{grid-template-columns:1fr;gap:10px}
  .article-media:not(.ab-media) .am-img{aspect-ratio:16/10}
}
.article-body .back{clear:both}
/* Überschriften aus dem Editor (# und ##) */
.article-body .ab-h{margin:34px 0 10px;line-height:1.2;letter-spacing:-.02em;color:var(--tinte)}
.article-body h3.ab-h{font-size:clamp(1.4rem,2.6vw,1.7rem);font-weight:800}
.article-body h4.ab-h{font-size:clamp(1.15rem,2vw,1.32rem);font-weight:800}
.article-body .ab-h:first-child{margin-top:0}
.article-body .ab-h + p,.article-body .ab-h + .article-media{margin-top:0}

.article-body .back{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  font-weight:700;color:var(--gruen-d);border:1.5px solid var(--linie);
  padding:11px 20px;border-radius:100px;transition:transform .3s var(--takt),opacity .3s var(--takt),background-color .3s var(--takt),border-color .3s var(--takt),color .3s var(--takt),box-shadow .3s var(--takt)}
.article-body .back:hover{background:var(--papier-3);transform:translateY(var(--lift-control))}

/* Beschicker-Seite: „Hier findest du uns" */
.vm-head{clear:both;font-size:1.4rem;font-weight:800;letter-spacing:-.02em;margin:30px 0 16px}
.vm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:26px}
.vm-card{display:block;background:var(--papier-2);border:1px solid var(--linie);border-radius:16px;padding:18px 20px;transition:transform .3s var(--takt),opacity .3s var(--takt),background-color .3s var(--takt),border-color .3s var(--takt),color .3s var(--takt),box-shadow .3s var(--takt)}
.vm-card:hover{border-color:var(--gruen);transform:translateY(var(--lift-control));box-shadow:var(--sh-s)}
.vm-card b{display:block;font-size:1.05rem;margin-bottom:4px}
.vm-card span{display:block;color:var(--gruen-d);font-weight:700;font-size:.9rem}
.vm-card small{display:block;color:var(--grau);margin-top:4px}

/* Markt-Seite: ÖPNV / Parken Infokarten */
.info-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;clear:both;margin:6px 0 26px}
.info-card{background:var(--papier-2);border:1px solid var(--linie);border-radius:16px;padding:20px 22px}
.info-card h3{display:flex;align-items:center;gap:9px;font-size:1.05rem;font-weight:800;margin-bottom:8px}
.info-card h3 svg{width:20px;height:20px;color:var(--gruen-d)}
.info-card p{font-size:.96rem;line-height:1.6;color:var(--tinte-2);margin-bottom:8px}


/* ============================================================
   Markt-Detailseiten — ruhige, klar getrennte Inhaltsabschnitte
   ============================================================ */
.page-market-detail .market-body{padding:clamp(34px,5vw,58px) 0 clamp(60px,8vw,96px)}
.page-market-detail .markt-alert{margin-bottom:clamp(34px,5vw,54px)}
.market-intro{padding:0 0 clamp(44px,6vw,72px)}
.market-intro-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(250px,.72fr);gap:clamp(34px,6vw,78px);align-items:start}
.market-intro-copy{min-width:0}
.market-eyebrow{display:block;margin:0 0 9px;color:var(--gruen-d);font-size:.75rem;font-weight:850;letter-spacing:.11em;text-transform:uppercase}
.market-intro-heading,.market-section-head h2{margin:0;color:var(--tinte);font-size:clamp(1.65rem,3vw,2.25rem);line-height:1.14;letter-spacing:-.035em}
.market-intro-heading{margin-bottom:clamp(20px,3vw,30px)}
.market-copy{max-width:780px}
.market-copy p{max-width:780px;margin-bottom:clamp(18px,2.4vw,25px);font-size:clamp(1.03rem,1.45vw,1.12rem);line-height:1.78}
.market-copy>:last-child{margin-bottom:0}
.market-quickfacts{position:relative;overflow:hidden;padding:clamp(22px,3vw,28px);border:1px solid #cfe2d2;border-radius:22px;background:linear-gradient(155deg,#f4faf5 0%,#eaf4ec 100%);box-shadow:0 22px 50px -42px rgba(12,80,14,.55)}
.market-quickfacts::after{content:"";position:absolute;right:-45px;top:-55px;width:145px;height:145px;border-radius:50%;background:rgba(109,198,126,.13);pointer-events:none}
.market-quickfacts-title{position:relative;z-index:1;display:block;margin-bottom:17px;color:var(--tinte);font-size:1.05rem;font-weight:850;letter-spacing:-.015em}
.market-fact-list{position:relative;z-index:1;display:flex;flex-direction:column}
.market-fact{display:grid;gap:3px;padding:14px 0;border-top:1px solid rgba(23,109,25,.13)}
.market-fact:first-child{padding-top:0;border-top:0}
.market-fact span{color:var(--grau);font-size:.76rem;font-weight:750;letter-spacing:.035em;text-transform:uppercase}
.market-fact b{color:var(--tinte);font-size:.98rem;line-height:1.42}
.market-route{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;margin-top:18px;color:var(--gruen-d);font-size:.9rem;font-weight:850;text-decoration:none}
.market-route span{transition:transform .25s var(--takt)}
.market-route:hover span{transform:translateX(3px)}

.market-section{position:relative;padding-top:clamp(48px,7vw,82px);margin-top:clamp(16px,2.5vw,28px);border-top:1px solid var(--linie)}
.market-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin-bottom:clamp(20px,3vw,30px)}
.market-section-head>div{min-width:0}
.market-section-head p{max-width:720px;margin:9px 0 0;color:var(--tinte-2);font-size:1rem;line-height:1.65}
.market-section-head--split{align-items:center}
.market-count{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:7px 13px;border:1px solid #cfe2d2;border-radius:999px;background:#f2f8f3;color:var(--gruen-d);font-size:.78rem;font-weight:850;white-space:nowrap}
.market-section--surface{margin-top:clamp(56px,8vw,92px);padding:clamp(28px,4.5vw,50px);border:1px solid var(--linie);border-radius:clamp(20px,3vw,28px);background:linear-gradient(150deg,var(--papier-2),#fff);box-shadow:0 28px 70px -64px rgba(23,48,34,.55)}
.market-section--surface .market-section-head{margin-bottom:24px}
.market-arrival .info-cards{margin:0;gap:clamp(14px,2vw,20px)}
.market-arrival .info-card{min-height:100%;padding:clamp(21px,3vw,27px);border-radius:19px;background:#fff;box-shadow:0 18px 45px -42px rgba(23,48,34,.65)}
.market-arrival .info-card h3{margin-bottom:11px;font-size:1.04rem}
.market-arrival .info-card p,.market-arrival .info-card div p{max-width:none;margin-bottom:7px;font-size:.95rem;line-height:1.62}
.market-impressions .vendor-gallery{margin:0}
.market-impressions .article-media{margin:0}
.market-impressions .article-media .am-img{border-radius:18px}
.market-plan .sp-more{max-width:none;margin:22px 0 0}
.market-stands .vm-grid{margin-bottom:0;gap:clamp(12px,1.6vw,16px)}
.market-stands .vm-card{background:#fff;border-radius:17px;padding:20px 21px}
.market-stands .vm-more{margin-top:20px}
.market-back-row{margin-top:clamp(56px,8vw,90px);padding-top:26px;border-top:1px solid var(--linie)}
.market-back-row .back{margin-top:0}

@media(max-width:900px){
  .market-intro-grid{grid-template-columns:minmax(0,1fr) minmax(230px,.72fr);gap:34px}
}
@media(max-width:760px){
  .market-intro-grid{grid-template-columns:1fr;gap:28px}
  .market-copy,.market-copy p{max-width:none}
  .market-quickfacts{padding:21px}
  .market-fact-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 16px}
  .market-fact{padding:0 0 0 16px;border-top:0;border-left:1px solid rgba(23,109,25,.13)}
  .market-fact:first-child{padding-left:0;border-left:0}
  .market-section-head,.market-section-head--split{align-items:flex-start;flex-direction:column;gap:12px}
  .market-section--surface{margin-left:-4px;margin-right:-4px;padding:24px 20px}
}
@media(max-width:520px){
  .page-market-detail .market-body{padding-top:28px}
  .page-market-detail .markt-alert{margin-bottom:34px}
  .market-intro{padding-bottom:42px}
  .market-intro-heading{font-size:1.55rem}
  .market-copy p{font-size:1rem;line-height:1.7}
  .market-fact-list{display:flex}
  .market-fact{padding:12px 0;border-left:0;border-top:1px solid rgba(23,109,25,.13)}
  .market-fact:first-child{padding-top:0;border-top:0}
  .market-section{padding-top:44px;margin-top:14px}
  .market-section--surface{margin-top:48px;padding:22px 17px;border-radius:20px}
  .market-arrival .info-cards{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.market-route span{transition:none}}

@media(prefers-reduced-motion:reduce){
  .article-body .back{transition:none}
}

/* Beschicker-Profil: Intro (Text + Marken-Karte) oben, Bilder als „Impressionen" am Ende */
.article-body .vendor-top{display:grid;grid-template-columns:1fr minmax(210px,280px);gap:44px;align-items:start;margin-bottom:6px}
.article-body .vendor-top.nocard{grid-template-columns:1fr}
.article-body .vt-text{min-width:0}
.article-body .vt-text .lead{margin-bottom:16px}
.article-body .vt-text>:last-child{margin-bottom:0}
.article-body .vendor-card{align-self:start;display:grid;gap:12px;padding:0;background:transparent;border:0;text-align:left}
.article-body .vendor-card .vc-logo{display:flex;width:100%;min-height:144px;align-items:center;justify-content:center;padding:22px;border:1px solid rgba(22,32,26,.12);border-radius:20px;background:var(--logo-surface,#fff);box-sizing:border-box;box-shadow:0 14px 34px -26px rgba(22,32,26,.28)}
.article-body .vendor-card .vc-logo img{display:block;width:100%;height:100%;max-width:100%;object-fit:contain;filter:drop-shadow(0 1px 1px rgba(22,32,26,.34))}
.article-body .vendor-card .vc-logo.logo-surface-dark img{filter:drop-shadow(0 1px 1px rgba(255,255,255,.42))}
.article-body .vendor-card .vc-logo.logo-surface-original{padding:14px;background:#fff}
.article-body .vendor-card .vc-logo.logo-surface-original img{filter:none}
.article-body .vendor-card .vendor-card-actions{display:grid;gap:10px}
.article-body .vendor-card .vc-link,.article-body .vendor-card .vc-ig{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:11px 16px;border:1px solid rgba(22,32,26,.12);border-radius:999px;background:#fff;color:var(--gruen-d);font-weight:700;text-decoration:none;word-break:break-word;box-shadow:0 10px 22px -22px rgba(22,32,26,.25);transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.article-body .vendor-card .vc-link span:first-child{overflow-wrap:anywhere;text-align:center}
.article-body .vendor-card .vc-ig svg{width:18px;height:18px;flex:0 0 18px}
.article-body .vendor-card .vc-link:hover,.article-body .vendor-card .vc-ig:hover{transform:translateY(-1px);border-color:rgba(0,166,47,.35);box-shadow:0 12px 28px -22px rgba(12,80,14,.38)}
.article-body .vendor-gallery{margin-top:4px}
@media(max-width:760px){
  .article-body .vendor-top{grid-template-columns:1fr;gap:24px}
  .article-body .vendor-card{max-width:360px;width:100%}
}

/* ===== Markt-Status-Banner (Detailseite) ===== */
.markt-alert{display:flex;gap:13px;align-items:flex-start;margin:0 0 26px;padding:15px 17px;border-radius:15px;
  background:var(--weiss);border:1.5px solid var(--linie);border-left:5px solid var(--alc);
  box-shadow:0 10px 28px -18px rgba(0,0,0,.35)}
.markt-alert-ico{flex:0 0 38px;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--alc);color:#fff}
.markt-alert-ico svg{width:21px;height:21px}
.markt-alert-body{min-width:0}
.markt-alert-body strong{display:block;font-weight:800;font-size:1.05rem;color:var(--alc);letter-spacing:-.01em}
.markt-alert-body p{margin:3px 0 0;font-size:.98rem;line-height:1.5;color:var(--tinte)}
.markt-alert-reg{display:inline-block;margin-top:8px;font-size:.83rem;font-weight:600;color:var(--grau)}

/* Markt-Stände ohne eigene Detailseite — nicht anklickbar */
.vm-card.vm-static{cursor:default}
.vm-card.vm-static:hover{transform:none;box-shadow:none;border-color:var(--linie)}

/* Standliste wird progressiv per [hidden] auf vollständige Reihen reduziert. */
.vm-grid .vm-card[hidden]{display:none}
.vm-more{
  display:inline-flex;align-items:center;gap:8px;margin:-8px 0 26px;
  font:inherit;font-size:.92rem;font-weight:700;color:var(--gruen-d);
  background:var(--papier-2);border:1px solid var(--linie);border-radius:100px;
  padding:11px 20px;cursor:pointer;transition:transform .3s var(--takt),opacity .3s var(--takt),background-color .3s var(--takt),border-color .3s var(--takt),color .3s var(--takt),box-shadow .3s var(--takt)}
.vm-more:hover{background:var(--papier-3);border-color:var(--gruen);transform:translateY(var(--lift-control))}
.vm-more::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .3s var(--takt);margin-top:-3px}
.vm-more[aria-expanded="true"]::after{transform:rotate(-135deg);margin-top:3px}
@media(prefers-reduced-motion:reduce){.vm-more,.vm-more::after{transition:none}}

/* Anklickbare Adresse -> Karten-App */
.info-card--map{display:block;text-decoration:none;color:inherit;transition:transform .35s var(--takt),opacity .35s var(--takt),background-color .35s var(--takt),border-color .35s var(--takt),color .35s var(--takt),box-shadow .35s var(--takt)}
.info-card--map:hover{border-color:var(--gruen);box-shadow:var(--sh-m);transform:translateY(var(--lift-control))}
.info-card--map p{margin-bottom:10px}
.info-card--map .map-go{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:.9rem;color:var(--gruen-d)}
.info-card--map .map-go svg{width:15px;height:15px;transition:transform .35s var(--takt)}
.info-card--map:hover .map-go svg{transform:translateX(3px)}

/* Instagram-Button im Beschicker-Profil */
.article-body .vendor-card .vc-ig{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-weight:700;font-size:.9rem;color:var(--gruen-d);text-decoration:none}
.article-body .vendor-card .vc-ig:hover{text-decoration:underline}
.article-body .vendor-card .vc-ig svg{width:16px;height:16px}

/* Verknüpfte Stände in Marktgeschichten */
.article-body .story-vendors{clear:both;margin-top:30px}

/* Hintergrund einzelner Baukasten-Blöcke (im Seiten-Editor pro Block wählbar).
   Die Tönung kommt aus den .wm-bg-* Klassen (base.css); hier nur Karten-Optik. */
.article-body .pb-blockbg{padding:clamp(20px,3vw,34px) clamp(18px,3.2vw,32px);border-radius:var(--r-l);margin:22px 0}
.article-body .pb-blockbg>*:first-child{margin-top:0}
.article-body .pb-blockbg>*:last-child{margin-bottom:0}
.article-body .pb-blockbg .promo-wrap{padding:0}

/* ============================================================
   Artikel-Baukasten (Blöcke) — News & Marktgeschichten
   Alles stapelt sich mobil automatisch.
   ============================================================ */

/* Abschnitts-Überschrift */
.ab-h2{font-size:clamp(1.35rem,2.6vw,1.8rem);margin:34px 0 14px;letter-spacing:-.02em}
.ab-h2:first-child{margin-top:0}

/* Bild-Blöcke: Größe (S/M/L = schmal/mittel/volle Breite) */
.ab-media{margin:18px auto 30px}
.ab-media.ab-size-s{max-width:440px}
.ab-media.ab-size-m{max-width:720px}
.ab-media.ab-size-l{max-width:none}
.article-media.single.ab-size-s,.article-media.single.ab-size-m{max-width:min(100%,var(--absz,720px))}
.article-media.single.ab-size-s{--absz:440px}
.article-media.single.ab-size-l{max-width:none}

/* Bild-Format: Auto (natürlich), Quer 3:2, Hoch 3:4, Quadrat 1:1 */
.ab-media.ab-ratio-quer .am-img{aspect-ratio:3/2}
.ab-media.ab-ratio-hoch .am-img{aspect-ratio:3/4}
.ab-media.ab-ratio-quad .am-img{aspect-ratio:1/1}
.ab-media.ab-ratio-quer .am-img img,.ab-media.ab-ratio-hoch .am-img img,.ab-media.ab-ratio-quad .am-img img{height:100%;object-fit:cover}
.article-media.single.ab-ratio-auto .am-img{aspect-ratio:auto}
.article-media.single.ab-ratio-auto .am-img img{height:auto;object-fit:contain}

/* Bildunterschriften */
.ab-cell{margin:0;display:flex;flex-direction:column;gap:7px;min-width:0}
.ab-cell figcaption{font-size:.82rem;color:var(--grau);line-height:1.45;padding:0 4px}
.ab-media .ab-cell .am-img{width:100%}

/* Text + Bild nebeneinander (mobil: Bild oben, Text darunter) */
.ab-split{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(18px,3vw,34px);align-items:start;margin:22px 0 28px}
.ab-split.ab-side-links{grid-template-columns:.85fr 1.15fr}
.ab-split.ab-side-links .ab-split-img{order:-1}
.ab-split-txt>p:first-child{margin-top:0}
.ab-split-img .am-img{aspect-ratio:4/3}
.ab-split-img .am-img img{height:100%;object-fit:cover}
.ab-split.ab-ratio-quer .ab-split-img .am-img{aspect-ratio:3/2}
.ab-split.ab-ratio-hoch .ab-split-img .am-img{aspect-ratio:3/4}
.ab-split.ab-ratio-quad .ab-split-img .am-img{aspect-ratio:1/1}

/* Zitat */
.ab-quote{position:relative;margin:30px auto;max-width:680px;padding:8px 0 8px 26px;border-left:4px solid var(--gruen);border-radius:2px}
.ab-quote p{font-size:clamp(1.12rem,2vw,1.3rem);font-weight:600;line-height:1.5;letter-spacing:-.01em;color:var(--tinte);margin:0}
.ab-quote p::before{content:"\201E"}
.ab-quote p::after{content:"\201C"}
.ab-quote cite{display:block;margin-top:10px;font-style:normal;font-size:.86rem;font-weight:700;color:var(--gruen-d)}
.ab-quote cite::before{content:"— "}

/* Info-Box */
.ab-note{border-radius:16px;padding:18px 20px;margin:24px 0;border:1px solid}
.ab-note-t{display:block;font-size:1rem;margin-bottom:6px}
.ab-note p{margin:0 0 8px}
.ab-note p:last-child{margin-bottom:0}
.ab-note--gruen{background:#ecf5ec;border-color:#cfe6d1}
.ab-note--gruen .ab-note-t{color:#0c500e}
.ab-note--gold{background:#fdf6e2;border-color:#eddfb0}
.ab-note--gold .ab-note-t{color:#7a5c0d}
.ab-note--rot{background:#fbeeec;border-color:#efd0ca}
.ab-note--rot .ab-note-t{color:#8c2f22}
.ab-note--blau{background:#ebf2f8;border-color:#cfe0ef}
.ab-note--blau .ab-note-t{color:#1e4b74}

/* Button */
.ab-btnrow{margin:26px 0}
.ab-btnrow.ab-al-mitte{text-align:center}
.ab-btn{display:inline-flex;align-items:center;gap:8px;background:var(--tinte);color:#fff;font-weight:700;font-size:.98rem;padding:14px 28px;border-radius:100px;transition:background .3s var(--takt),transform .2s var(--takt)}
.ab-btn:hover{background:var(--gruen-d);transform:translateY(-1px)}
.ab-btn.ghost{background:transparent;color:var(--gruen-d);border:2px solid var(--gruen-d)}
.ab-btn.ghost:hover{background:var(--gruen-d);color:#fff;transform:translateY(-1px)}

/* Trennlinie */
.ab-hr{border:none;height:1px;background:var(--linie);margin:34px auto;max-width:280px}

/* Mobil: alles untereinander, Bilder zuerst */
@media(max-width:760px){
  .ab-split,.ab-split.ab-side-links{grid-template-columns:1fr;gap:14px}
  .ab-split .ab-split-img{order:-1}
  .ab-media.ab-size-s{max-width:min(100%,360px)}
}

/* Zeitlich begrenzte Beschickerhinweise – bewusst dezent, nicht wie eine Warnung. */
.vendor-profile-notice{margin:22px 0;padding:15px 17px;border-left:3px solid var(--green,#176d19);border-radius:10px;background:#f1f7f1}.vendor-profile-notice span{display:block;margin-bottom:4px;color:#176d19;font-size:.72rem;font-weight:850;letter-spacing:.09em;text-transform:uppercase}.vendor-profile-notice p{margin:0;line-height:1.55}.vm-absence{margin-top:8px}
/* „Nicht dabei"-Block auf der Profilseite: konkrete betroffene Termine.
   Aus dem Designsystem abgeleitet (Tokens, gleiche Einrückung wie der Status). */
.vendor-absence-block{margin:22px 0}
.vendor-absence-block .vm-head{margin:0 0 12px}
.vendor-absence-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.vendor-absence-list li{padding:11px 14px;border:1px solid rgba(224,126,0,.22);border-radius:12px;background:linear-gradient(135deg,rgba(255,164,43,.20),rgba(255,205,120,.14));color:#6b3700;line-height:1.4;box-shadow:0 10px 24px -24px rgba(214,112,0,.85)}
.vendor-absence-list .absence-profile-dates{font-weight:700;color:var(--tinte)}
.vendor-absence-list li em{display:block;margin-top:3px;font-style:normal;color:#79502b;font-size:.86rem}
/* Die Vorschauleiste liegt bewusst vor und unabhängig von der eigentlichen
   Website-Navigation. Ihre gemessene Höhe wird als Offset für den sticky Header
   verwendet, damit sich beide Ebenen niemals überdecken. */
.portal-previewbar{position:sticky;top:0;z-index:1200;min-height:48px;display:flex;align-items:center;justify-content:center;gap:8px 14px;flex-wrap:wrap;padding:10px 18px;background:#15351f;color:#fff;text-align:center;font-size:.9rem;font-weight:650;box-shadow:0 4px 16px rgba(0,0,0,.16)}
.portal-previewbar b{font-weight:850}.portal-previewbar span{opacity:.92}.portal-previewbar a{color:#fff;text-decoration:underline}
body.portal-preview-page #nav,body.portal-preview-page #nav.overlay{top:var(--portal-preview-offset,48px)}
@media(max-width:640px){.portal-previewbar{min-height:58px;gap:2px;padding:8px 14px;font-size:.78rem;line-height:1.3}.portal-previewbar b,.portal-previewbar span{flex:1 1 100%}}

.vendor-absence-more{margin-top:9px}
.vendor-absence-more summary{display:inline-flex;align-items:center;gap:7px;cursor:pointer;color:var(--gruen-d);font-size:.86rem;font-weight:750}
.vendor-absence-more[open] summary{margin-bottom:9px}
.vendor-absence-more .vendor-absence-list{margin-top:0}

/* Konkrete Abwesenheitstermine: kompakt, ohne irreführende Zeitspanne. */
.vendor-absence-list .absence-inline-more{display:inline-block;margin-left:3px}
.vendor-absence-list .absence-inline-more summary{display:inline;cursor:pointer;color:var(--gruen-d);font-weight:800;list-style:none}
.vendor-absence-list .absence-inline-more summary::-webkit-details-marker{display:none}
.vendor-absence-list .absence-inline-more[open]{display:block;margin:8px 0 0}
.vendor-absence-list .absence-inline-more[open] summary{display:block;margin-bottom:4px}
.vendor-absence-list .absence-inline-more>span{display:block;color:var(--tinte-2);font-weight:500}

/* Markt-Standkarten: Profil-Link und aufklappbare Abwesenheit bleiben getrennte,
   gültige Bedienelemente. So sind auch lange Terminlisten direkt erreichbar. */
.vm-card-core{display:block;color:inherit;text-decoration:none;min-width:0}
.vm-card-linked{cursor:default}
.vm-card-linked .vm-card-core:focus-visible{outline:2px solid var(--gruen);outline-offset:5px;border-radius:8px}
.absence-note-copy{display:block;min-width:0}
.vm-card .absence-note{margin-top:9px;align-self:flex-start}
.absence-card-more{display:inline-block;margin-top:3px;color:inherit}
.absence-card-more summary{display:inline;cursor:pointer;text-decoration:underline;text-underline-offset:2px;font-weight:800;list-style:none}
.absence-card-more summary::-webkit-details-marker{display:none}
.absence-card-more>span{display:block;margin-top:4px;font-weight:650}
.vm-card .absence-note,.vm-card .absence-note span{color:var(--absence-text,#6b3700)}
.vm-card .absence-note span{font-size:inherit;line-height:inherit}
.vm-static:hover{border-color:var(--linie);transform:none;box-shadow:none}