/* Scoping nur in diesem Wrapper */
.oae-alle-orte { max-width: 1100px; margin: 0 auto; padding: 0 16px; }

.oae-alle-orte .oae-orte-list{
  list-style: none; padding: 0; margin: 12px 0;
}

.oae-alle-orte .oae-ort{
  border: 1px solid #e9ecf3; padding: 12px; border-radius: 12px;
  margin: 10px 0; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

/* Karten-Layout: Bild links fix, rechts Inhalt – Titel oben rechts */
.oae-alle-orte .oae-card.oae-card--grid{
  position: relative;
  display: grid;
  grid-template-columns: 120px 1fr;
  grid-template-areas:
    "img right";
  column-gap: 12px;
  align-items: start;
}

/* Bild links */
.oae-alle-orte .oae-cell-img{ grid-area: img; }
.oae-alle-orte .oae-imgbox{
  width: 120px; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden;
  background: #f3f4f6; border: 1px solid #e5e7eb;
}
.oae-alle-orte .oae-imgbox img{ width:100%; height:100%; object-fit: cover; display:block; }
.oae-alle-orte .oae-imgbox--placeholder{
  width:100%; height:100%; background: repeating-linear-gradient(45deg,#f3f4f6,#f3f4f6 8px,#eef2f7 8px,#eef2f7 16px);
}

/* Rechte Spalte enthält Top-Badge, Titel, Meta, Actions */
.oae-alle-orte .oae-cell-right{ grid-area: right; min-width: 0; }


.oae-alle-orte .oae-right-top .oae-btn.oae-report{
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
  padding: 6px 10px; box-shadow: 0 2px 6px rgba(0,0,0,.06);
}

/* Titel direkt oben rechts neben dem Bild */
.oae-alle-orte .oae-cell-title{ margin: 0; }
.oae-alle-orte .oae-card-title{ margin: 0; font-size: 1.05rem; font-weight: 700; }

/* Koordinaten */
.oae-alle-orte .oae-card-body{ margin-top: 4px; }
.oae-alle-orte .oae-meta{ font-size: .9rem; opacity: .85; }

/* Buttons in einer Reihe, kompakt */
.oae-alle-orte .oae-actions-row{
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px;
}
.oae-alle-orte .oae-btn{
  display: inline-block; background: #fff; color: #111;
  border: 1px solid #e5e7eb; border-radius: 8px; padding: 6px 10px;
  text-decoration: none; cursor:pointer; transition: box-shadow .15s ease, transform .15s ease;
}
.oae-alle-orte .oae-btn:hover{ box-shadow: 0 2px 10px rgba(0,0,0,.06); transform: translateY(-1px); }

/* Pager */
.oae-alle-orte .oae-pager{ margin: 10px 0; text-align: center; }
.oae-alle-orte .page-numbers{ display:inline-block; margin:0 4px; padding:6px 10px; border:1px solid #e5e7eb; border-radius:8px; text-decoration:none; color:#111; }
.oae-alle-orte .page-numbers.current{ background:#111; color:#fff; border-color:#111; }

/* Mobile Feinschliff */
@media (max-width: 640px){
  .oae-alle-orte .oae-card.oae-card--grid{
    grid-template-columns: 100px 1fr;
  }
  .oae-alle-orte .oae-imgbox{ width:100px; }
}

/* Karte klickbar machen */
.oae-alle-orte .oae-card {
  position: relative;
}
.oae-alle-orte .oae-card .oae-card-link{
  position: absolute;
  inset: 0;              /* top:0; right:0; bottom:0; left:0 */
  z-index: 1;            /* liegt unter den Buttons */
  border-radius: 12px;   /* optional: gleiche Rundung wie die Karte */
}

/* Buttons (und evtl. Badge) müssen über dem Overlay liegen */
.oae-alle-orte .oae-actions-row .oae-btn,
.oae-alle-orte .oae-right-top,
.oae-alle-orte .oae-actions-row a.oae-btn {
  position: relative;
  z-index: 2;
}

/* optional: leichter Hover-Effekt der ganzen Karte */
.oae-alle-orte .oae-card:hover{
  box-shadow: 0 4px 14px rgba(0,0,0,.07);
}

/* Active state für Fav/Besucht */
.oae-alle-orte .oae-actions-row .oae-btn.is-on,
.oae-alle-orte .oae-actions-row .oae-btn.is-active,
.oae-alle-orte .oae-actions-row .oae-btn[aria-pressed="true"]{
  background:#111; color:#fff; border-color:#111;
}
.oae-alle-orte .oae-actions-row .oae-btn.oae-fav.is-on,
.oae-alle-orte .oae-actions-row .oae-btn.oae-fav.is-active,
.oae-alle-orte .oae-actions-row .oae-btn.oae-fav[aria-pressed="true"]{
  background:#f59e0b; border-color:#f59e0b; color:#111;
}
.oae-alle-orte .oae-actions-row .oae-btn.oae-besucht.is-on,
.oae-alle-orte .oae-actions-row .oae-btn.oae-besucht.is-active,
.oae-alle-orte .oae-actions-row .oae-btn.oae-besucht[aria-pressed="true"]{
  background:#10b981; border-color:#10b981; color:#fff;
}

/* Neutral state for Favorit (nicht aktiv) */
.oae-alle-orte .oae-actions-row .oae-btn.oae-fav:not(.is-on):not(.is-active):not([aria-pressed="true"]){
  background:#fff !important;
  color:#111 !important;
  border-color:#e5e7eb !important;
}

/* Allgemein: Buttons sanft animieren */
.oae-alle-orte .oae-actions-row .oae-btn{
  transition: all .2s ease-in-out;
}

/* Hover-Effekt im neutralen Zustand */
.oae-alle-orte .oae-actions-row .oae-btn:hover:not(.is-on):not(.is-active):not([aria-pressed="true"]){
  background:#f3f4f6; /* leicht grau */
  border-color:#d1d5db;
}

/* Favorit aktiv */
.oae-alle-orte .oae-actions-row .oae-btn.oae-fav.is-on,
.oae-alle-orte .oae-actions-row .oae-btn.oae-fav.is-active,
.oae-alle-orte .oae-actions-row .oae-btn.oae-fav[aria-pressed="true"]{
  background:#f59e0b;
  border-color:#f59e0b;
  color:#111;
  box-shadow:0 2px 6px rgba(245,158,11,.4); /* Amber Glow */
}

/* Besucht aktiv */
.oae-alle-orte .oae-actions-row .oae-btn.oae-besucht.is-on,
.oae-alle-orte .oae-actions-row .oae-btn.oae-besucht.is-active,
.oae-alle-orte .oae-actions-row .oae-btn.oae-besucht[aria-pressed="true"]{
  background:#10b981;
  border-color:#10b981;
  color:#fff;
  box-shadow:0 2px 6px rgba(16,185,129,.4); /* Emerald Glow */
}

/* Icon-Feedback (größer bei Aktivierung) */
.oae-alle-orte .oae-actions-row .oae-btn.is-on img,
.oae-alle-orte .oae-actions-row .oae-btn.is-active img,
.oae-alle-orte .oae-actions-row .oae-btn[aria-pressed="true"] img{
  transform:scale(1.2);
  transition: transform .2s ease;
}

<style>
/* Slider-Basis – nur ein Slide sichtbar */
.oae-slider .oae-viewport { overflow: hidden; position: relative; }
.oae-slider .oae-viewport > * { display: none; }
.oae-slider .oae-viewport > *.is-active { display: block; }
/* Dots (optional) */
.oae-dots { display:flex; gap:6px; justify-content:center; margin-top:8px; }
.oae-dots .oae-dot { width:8px; height:8px; border-radius:50%; border:0; background:#ddd; }
.oae-dots .oae-dot.is-active { background:#111; }
</style>

/* Lost-Place Skin */
.oae-lost-skin{
  position:relative;
  color:#e5e7eb;                /* helle Schrift */
  background:
    radial-gradient(120% 80% at 80% 0%, #1f2937 0%, rgba(31,41,55,0.6) 40%, transparent 60%),
    linear-gradient(180deg,#111827 0%, #0b1325 55%, #0a1120 100%);
  border:1px solid #1f2937;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 6px 16px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.04);
}

/* feines Noise-Overlay (Data-URI, kein externes File) */
.oae-lost-skin::before{
  content:"";
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter>\
<rect width='120' height='120' filter='url(#n)' opacity='0.06'/></svg>");
  background-size:120px 120px;
  pointer-events:none;
  mix-blend-mode:soft-light;
}

/* dezente Vignette */
.oae-lost-skin::after{
  content:"";
  position:absolute; inset:-15%;
  background:
    radial-gradient(90% 70% at 50% 30%, rgba(0,0,0,.0) 40%, rgba(0,0,0,.22) 95%);
  pointer-events:none;
}

/* Überschrift/Link-Kontrast */
.oae-lost-skin .oae-title,
.oae-lost-skin a.oae-title{
  color:#e2e8f0; text-decoration:none;
}
.oae-lost-skin .oae-title:hover{ color:#facc15; }

/* Buttons bleiben klar lesbar */
.oae-lost-skin .oae-btn{ box-shadow:0 2px 6px rgba(0,0,0,.25); }

/* Distanz-Text o.ä. leicht entsättigt */
.oae-lost-skin .oae-meta{ color:#cbd5e1; opacity:.9; }


.oae-alle-orte .oae-card.oae-card--grid{
  position:relative; display:grid; grid-template-columns:120px 1fr; column-gap:12px; align-items:start;
  color:#ffffff;
  background:
    radial-gradient(120% 80% at 80% 0%, #1f2937 0%, rgba(31,41,55,.6) 40%, transparent 60%),
    linear-gradient(180deg,#111827 0%, #0b1325 55%, #0a1120 100%) !important;
  border:1px solid #1f2937; border-radius:12px; padding:12px; overflow:hidden;
  box-shadow:0 6px 16px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.04);
}
.oae-alle-orte .oae-card.oae-card--grid::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='120' height='120' filter='url(#n)' opacity='0.06'/></svg>");
  background-size:120px 120px; mix-blend-mode:soft-light;
}
.oae-alle-orte .oae-card.oae-card--grid::after{
  content:""; position:absolute; inset:-15%; pointer-events:none;
  background:radial-gradient(90% 70% at 50% 30%, rgba(0,0,0,0) 40%, rgba(0,0,0,.22) 95%);
}

/* ==== Pagination Fix (WP paginate_links) ==== */
.oae-alle-orte nav.oae-pager ul.page-numbers{
  list-style: none !important;
  margin: 12px 0 !important;
  padding: 0 !important;

  display: inline-flex !important;
  gap: 8px !important;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.oae-alle-orte nav.oae-pager ul.page-numbers > li{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.oae-alle-orte nav.oae-pager a.page-numbers,
.oae-alle-orte nav.oae-pager span.page-numbers{
  display: inline-block !important;
  min-width: 36px;
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  color: #111;
  text-decoration: none;
  line-height: 1;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.oae-alle-orte nav.oae-pager a.page-numbers:hover{
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,0,0,.08);
}
.oae-alle-orte nav.oae-pager span.page-numbers.current{
  background: #111;
  color: #fff;
  border-color: #111;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
/* Pfeile kompakter */
.oae-alle-orte nav.oae-pager .prev,
.oae-alle-orte nav.oae-pager .next{
  min-width: auto;
  padding: 8px 10px;
}