/* ======================================================================
   MEREB GUIDE — MARKENGRUNDLAGE
   Farbwerte aus dem Markenkonzept. Alle Oberflaechen beziehen sich auf
   diese Variablen; Farben werden nirgendwo sonst hartkodiert.
   ====================================================================== */

:root{
  /* Markenfarben */
  --green:      #13402B;   /* Hauptfarbe, Kopf- und Fusszeile */
  --green-700:  #1B5539;
  --green-300:  #4E8A6C;
  --gold:       #C08A2E;   /* Akzent, Hervorhebungen */
  --gold-300:   #DDB273;
  --cream:      #F5EBDC;   /* Flaechen, warmer Hintergrund */
  --cream-200:  #FBF6EF;
  --ink:        #2B2B2B;   /* Fliesstext */
  --ink-600:    #5A5A5A;
  --ink-300:    #8C8C8C;
  --line:       #E2D7C6;
  --white:      #FFFFFF;

  /* Zustaende */
  --ok:   #1D6B41;
  --warn: #B4791C;
  --err:  #A32020;

  /* Masse */
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --shadow:    0 1px 2px rgba(19,64,43,.06), 0 8px 24px rgba(19,64,43,.07);
  --shadow-lg: 0 2px 6px rgba(19,64,43,.08), 0 18px 48px rgba(19,64,43,.12);

  --wrap: 1180px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--cream-200); color:var(--ink);
  font:16px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}

/* Amharisch braucht eine eigene Schrift. Unicode-range sorgt dafuer, dass
   sie nur geladen wird, wenn aethiopische Zeichen vorkommen. */
@font-face{
  font-family:'Noto Sans Ethiopic';
  src:local('Noto Sans Ethiopic');
  unicode-range:U+1200-137F,U+1380-139F,U+2D80-2DDF;
  font-display:swap;
}
.am{font-family:'Noto Sans Ethiopic',serif}

h1,h2,h3{color:var(--green);line-height:1.2;margin:0 0 .5em;font-weight:700}
h1{font-size:clamp(30px,5vw,50px);letter-spacing:-.02em}
h2{font-size:clamp(22px,3vw,32px);letter-spacing:-.01em}
h3{font-size:19px}
p{margin:0 0 1em}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);font-weight:700;margin-bottom:10px}
.lead{font-size:18px;color:var(--ink-600);max-width:62ch}
.muted{color:var(--ink-600)}

/* ---- Kopfzeile -------------------------------------------------------- */
.site-head{background:var(--green);color:var(--cream)}
.site-head a{color:var(--cream)}
.site-head .wrap{display:flex;align-items:center;gap:24px;
  min-height:74px;padding-top:12px;padding-bottom:12px}

/* Markenregeln stehen weiter unten im Abschnitt MARKE */

.nav{display:flex;gap:22px;margin-left:auto;align-items:center;flex-wrap:wrap}
.nav a{font-size:15px;opacity:.92}
.nav a:hover{opacity:1;text-decoration:none;color:var(--gold-300)}
.lang{display:flex;gap:6px}
.lang a{font-size:12px;padding:5px 9px;border:1px solid rgba(245,235,220,.28);
  border-radius:999px;opacity:.75}
.lang a[aria-current=true]{background:var(--gold);border-color:var(--gold);
  color:var(--green);opacity:1;font-weight:700}

/* ---- Buehne ----------------------------------------------------------- */
.hero{background:var(--green);color:var(--cream);padding:56px 0 76px;position:relative;overflow:hidden}
.hero h1{color:var(--cream);max-width:16ch}
.hero .lead{color:rgba(245,235,220,.86);font-size:19px}
.hero-inner{position:relative;z-index:2;max-width:760px}

/* Dezentes Ge'ez-Muster als Hintergrund, ohne den Text zu stoeren */
.hero::after{
  content:'';position:absolute;right:-60px;top:-40px;width:520px;height:520px;
  background:radial-gradient(circle at 50% 50%,rgba(192,138,46,.20),transparent 62%);
  pointer-events:none;
}

/* ---- Suche ------------------------------------------------------------ */
.searchbar{display:flex;gap:10px;background:var(--white);border-radius:var(--r-lg);
  padding:9px;box-shadow:var(--shadow-lg);margin-top:26px;max-width:640px}
.searchbar input{flex:1;border:0;outline:0;padding:15px 17px;font-size:17px;
  color:var(--ink);background:transparent;border-radius:var(--r)}
.searchbar button{border:0;background:var(--gold);color:var(--green);
  font-weight:700;padding:15px 26px;border-radius:var(--r);cursor:pointer;font-size:16px}
.searchbar button:hover{background:var(--gold-300)}

/* ---- Schnellzugriff --------------------------------------------------- */
.quick{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.quick a{background:rgba(245,235,220,.12);border:1px solid rgba(245,235,220,.24);
  color:var(--cream);padding:10px 17px;border-radius:999px;font-size:15px}
.quick a:hover{background:var(--gold);border-color:var(--gold);
  color:var(--green);text-decoration:none;font-weight:600}

/* ---- Abschnitte ------------------------------------------------------- */
.section{padding:58px 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;margin-bottom:26px;flex-wrap:wrap}
.section-head p{margin:0}

.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
/* auto-fill statt auto-fit: bei einem einzigen Eintrag bleibt die Karte
   schmal, statt sich ueber die volle Breite zu ziehen. */
.grid-4{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}

/* ---- Karten ----------------------------------------------------------- */
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow);transition:transform .16s,box-shadow .16s}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.card-img{aspect-ratio:4/3;background:var(--cream);object-fit:cover;width:100%}
.card-body{padding:16px 18px 20px}
.card h3{margin:0 0 6px}
.card .meta{font-size:13.5px;color:var(--ink-600);display:flex;gap:8px;
  flex-wrap:wrap;align-items:center}

.badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;
  padding:4px 10px;border-radius:999px;background:var(--cream);
  border:1px solid var(--line);color:var(--ink-600)}
.badge-verified{background:rgba(29,107,65,.10);border-color:rgba(29,107,65,.3);color:var(--ok);font-weight:600}
.badge-fasting{background:rgba(192,138,46,.12);border-color:rgba(192,138,46,.34);color:#8a6110;font-weight:600}
.badge-open{background:rgba(29,107,65,.10);border-color:rgba(29,107,65,.3);color:var(--ok);font-weight:600}
.badge-closed{background:#f6f2ee;color:var(--ink-300)}

/* ---- Kategoriekacheln ------------------------------------------------- */
.tile{display:flex;flex-direction:column;justify-content:flex-end;
  min-height:132px;padding:18px;border-radius:var(--r);
  background:var(--green);color:var(--cream);position:relative;overflow:hidden}
.tile:hover{text-decoration:none;background:var(--green-700)}
.tile .n{font-size:13px;color:var(--gold-300)}
.tile strong{font-size:18px;display:block}
.tile.alt{background:var(--cream);color:var(--green);border:1px solid var(--line)}
.tile.alt:hover{background:var(--white)}
.tile.alt .n{color:var(--ink-600)}

/* ---- Hinweisleiste ---------------------------------------------------- */
.strip{background:var(--cream);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:22px 0}
.strip .wrap{display:flex;gap:34px;flex-wrap:wrap;justify-content:space-between}
.strip .item{display:flex;gap:12px;align-items:center;font-size:15px}
.strip .item b{color:var(--green);display:block;font-size:15px}
.strip .item span{color:var(--ink-600);font-size:13.5px}

/* ---- Leerzustand ------------------------------------------------------ */
.empty{background:var(--white);border:1px dashed var(--line);border-radius:var(--r);
  padding:38px;text-align:center;color:var(--ink-600)}
.empty strong{display:block;color:var(--green);font-size:18px;margin-bottom:6px}

/* ---- Fusszeile -------------------------------------------------------- */
.site-foot{background:var(--green);color:rgba(245,235,220,.8);padding:44px 0 26px;margin-top:52px}
.site-foot a{color:rgba(245,235,220,.8)}
.site-foot a:hover{color:var(--gold-300)}
.site-foot h4{color:var(--cream);font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;margin:0 0 12px}
.foot-grid{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.foot-grid ul{list-style:none;margin:0;padding:0;font-size:14.5px}
.foot-grid li{margin-bottom:7px}
.foot-bottom{border-top:1px solid rgba(245,235,220,.16);margin-top:32px;
  padding-top:18px;font-size:13px;display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap}

/* Ge'ez-Bordüre wie im Markenkonzept */
.geez-rule{height:6px;background:
  repeating-linear-gradient(90deg,var(--gold) 0 14px,var(--green-700) 14px 28px)}

@media (max-width:640px){
  .site-head .wrap{flex-wrap:wrap;gap:12px}
  .nav{width:100%;margin-left:0;gap:16px}
  .section{padding:40px 0}
}

/* ---- Filter ----------------------------------------------------------- */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0 4px}
.fbtn{background:var(--white);border:1px solid var(--line);color:var(--ink);
  padding:9px 15px;border-radius:999px;font-size:14.5px;cursor:pointer;
  font-family:inherit;text-decoration:none;display:inline-block}
.fbtn:hover{border-color:var(--gold);text-decoration:none}
.fbtn.on{background:var(--green);border-color:var(--green);color:var(--cream);font-weight:600}
.fbtn.clear{border-style:dashed;color:var(--ink-600)}

/* ---- Detailseite ------------------------------------------------------ */
/* Unten genug Raum, damit die Galerie hineinragen kann, ohne dass der
   gruene Block mitten im Bild endet. */
.detail-head{background:var(--green);color:var(--cream);padding:34px 0 64px}
.detail-head h1{color:var(--cream);margin-bottom:6px}
.detail-head .sub{color:var(--gold-300);font-size:17px}
.detail-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}

.detail-grid{display:grid;grid-template-columns:1fr 340px;gap:30px;
  margin-top:-40px;position:relative;z-index:2}
@media(max-width:900px){.detail-grid{grid-template-columns:1fr}}

.gallery{display:grid;gap:6px;grid-template-columns:2fr 1fr 1fr;
  border-radius:var(--r);overflow:hidden;background:var(--cream);
  box-shadow:var(--shadow-lg);border:4px solid var(--cream-200)}
.gallery img{width:100%;height:100%;object-fit:cover;aspect-ratio:1}
.gallery img:first-child{grid-row:span 2;aspect-ratio:4/3}
@media(max-width:640px){.gallery{grid-template-columns:1fr}
  .gallery img:first-child{grid-row:auto}
  .gallery img:not(:first-child){display:none}}

.box{background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);padding:20px;margin-bottom:16px;box-shadow:var(--shadow)}
.box h3{font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-600);margin-bottom:14px}

.actions{display:grid;gap:9px}
.act{display:flex;align-items:center;gap:11px;padding:13px 15px;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--white);color:var(--ink);font-size:15.5px;font-weight:500}
.act:hover{background:var(--cream);border-color:var(--gold);text-decoration:none}
.act.primary{background:var(--green);color:var(--cream);border-color:var(--green)}
.act.primary:hover{background:var(--green-700)}
.act .ico{font-size:18px;width:22px;text-align:center}

.hours{width:100%;font-size:14.5px}
.hours td{padding:7px 0;border-bottom:1px solid var(--line)}
.hours tr:last-child td{border-bottom:0}
.hours .day{color:var(--ink-600)}
.hours .eth{color:var(--ink-300);font-size:12.5px}
.hours tr.today td{font-weight:700;color:var(--green)}

.fasting-note{background:rgba(192,138,46,.10);border:1px solid rgba(192,138,46,.32);
  border-radius:var(--r-sm);padding:13px 15px;font-size:14.5px;margin-bottom:16px}
.fasting-note b{color:#8a6110}

.map{height:230px;border-radius:var(--r-sm);overflow:hidden;background:var(--cream);
  border:1px solid var(--line)}

.verify-line{font-size:13px;color:var(--ink-600);display:flex;
  align-items:center;gap:7px;margin-top:14px}

/* ---- Near Me ---------------------------------------------------------- */
#nearmap{height:52vh;min-height:320px;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);background:var(--cream)}
.near-list{display:grid;gap:12px;margin-top:18px}
.near-item{display:flex;gap:14px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:12px;align-items:center}
.near-item img{width:64px;height:64px;border-radius:var(--r-sm);object-fit:cover;flex:0 0 auto}
.near-item .d{margin-left:auto;color:var(--gold);font-weight:700;font-size:14px;white-space:nowrap}

.pagination{display:flex;gap:6px;list-style:none;padding:0;flex-wrap:wrap}
.pagination a,.pagination span{display:inline-block;padding:8px 13px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--white);font-size:14px}
.pagination .active span{background:var(--green);color:var(--cream);border-color:var(--green)}

/* Formulare */
.box .field{margin-bottom:16px}
.box label{display:block;font-size:13.5px;color:var(--ink-600);margin:0 0 6px}
.box input[type=text],.box input[type=tel],.box input[type=email],
.box input[type=date],.box textarea{
  width:100%;padding:12px 14px;font-size:16px;color:var(--ink);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm)}
.box input:focus,.box textarea:focus{outline:0;border-color:var(--gold)}
.box textarea{resize:vertical}
.err-msg{color:var(--err);font-size:13px;margin-top:5px}

/* Veranstaltungen */
.event-card .when{font-size:13px;font-weight:700;color:var(--gold);
  text-transform:uppercase;letter-spacing:.06em}
.event-card .when .time{color:var(--ink-600);font-weight:500;text-transform:none;letter-spacing:0}
.event-card h3{font-size:18px;line-height:1.3}

/* Ungeprüfte Einträge klar kennzeichnen */
.badge-unverified{background:#f6f2ee;border-color:#d8cbb8;color:#8a6110;font-weight:600}
.unverified-note{background:#f6f2ee;border:1px solid #d8cbb8;border-radius:var(--r-sm);
  padding:14px 16px;font-size:14px;color:var(--ink-600);line-height:1.5}
.unverified-note b{color:#8a6110;display:block;margin-bottom:4px}

/* ======================================================================
   STARTSEITE — geteilter Kopfbereich, Karte rechts
   ====================================================================== */

.hero-split{display:grid;grid-template-columns:minmax(0,46%) minmax(0,54%);
  min-height:430px;background:var(--green)}
.hero-panel{display:flex;align-items:center;position:relative;overflow:hidden}
.hero-panel-inner{padding:44px 40px;width:100%;max-width:640px;margin-left:auto;
  position:relative;z-index:2}

/* Dezentes Rautenmuster wie im Markenkonzept */
.hero-panel::before{content:'';position:absolute;inset:0;opacity:.16;
  background-image:
    linear-gradient(45deg,var(--gold) 25%,transparent 25%,transparent 75%,var(--gold) 75%),
    linear-gradient(45deg,var(--gold) 25%,transparent 25%,transparent 75%,var(--gold) 75%);
  background-size:26px 26px;background-position:0 0,13px 13px;
  mask-image:linear-gradient(90deg,#000,transparent 55%)}

.hero-panel h1{color:var(--cream);font-size:clamp(30px,3.4vw,46px);
  line-height:1.12;margin:0 0 14px}
.hero-sub{color:rgba(245,235,220,.82);font-size:17px;margin:0 0 18px}

.searchbar{display:flex;align-items:center;gap:8px;background:var(--white);
  border-radius:12px;padding:6px 6px 6px 14px;max-width:530px;
  box-shadow:var(--shadow-lg);margin:0}
.searchbar .s-ico{color:var(--ink-300);font-size:17px}
.searchbar input{flex:1;border:0;outline:0;padding:13px 6px;font-size:16px;
  background:transparent;color:var(--ink);min-width:0}
.searchbar button{border:0;background:var(--err);color:#fff;font-weight:700;
  padding:13px 24px;border-radius:9px;cursor:pointer;font-size:15px;white-space:nowrap}
.searchbar button:hover{filter:brightness(1.08)}

.quick{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.quick a{background:rgba(245,235,220,.13);border:1px solid rgba(245,235,220,.26);
  color:var(--cream);padding:8px 14px;border-radius:999px;font-size:14px}
.quick a:hover{background:var(--gold);border-color:var(--gold);color:var(--green);
  text-decoration:none;font-weight:600}

.trust{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px;margin-top:26px}
.t-item{display:flex;gap:10px;align-items:flex-start;font-size:13.5px}
.t-ico{color:var(--gold);font-size:16px;line-height:1.3;flex:0 0 auto}
.t-item b{color:var(--cream);display:block;font-size:13.5px;font-weight:600}
.t-item span span{color:rgba(245,235,220,.62);font-size:12.5px}

.hero-map{min-height:430px;background:var(--cream)}
.hero-map .maplibregl-ctrl-attrib{font-size:10px}

@media (max-width:900px){
  .hero-split{grid-template-columns:1fr}
  .hero-panel-inner{padding:32px 20px;max-width:none;margin:0}
  .hero-map{min-height:300px;order:2}
  .trust{grid-template-columns:1fr}
}

/* ---- Abschnitte ------------------------------------------------------- */
.band{padding:34px 0}
.band.alt{background:var(--white);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.band-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;margin-bottom:16px}
.band-head h2{font-size:20px;margin:0}
.band-head a{font-size:14px;color:var(--ink-600)}
.band-head a:hover{color:var(--green)}

.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:38px}
.ev-cta{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:30px;align-items:start}
@media (max-width:980px){.two-col,.ev-cta{grid-template-columns:1fr}}

/* Waagerechte Reihe, die auf schmalen Schirmen wischbar wird */
.rail{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.rail > *{scroll-snap-align:start;flex:0 0 auto}

/* ---- Kategoriekacheln -------------------------------------------------- */
.cat-tile{width:104px;padding:14px 10px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:6px}
.cat-tile:hover{border-color:var(--gold);text-decoration:none;transform:translateY(-2px);
  box-shadow:var(--shadow)}
.cat-ico{width:46px;height:46px;border-radius:12px;background:var(--cream);
  display:flex;align-items:center;justify-content:center;font-size:21px}
.cat-tile strong{font-size:13.5px;color:var(--green);line-height:1.2}
.cat-tile .n{font-size:12px;color:var(--ink-600)}

/* ---- Viertel ----------------------------------------------------------- */
.hood{width:150px;display:flex;flex-direction:column;gap:3px}
.hood:hover{text-decoration:none}
.hood-art{height:96px;border-radius:var(--r);display:flex;align-items:center;
  justify-content:center;margin-bottom:5px;background:var(--green)}
.hood-art[data-seed="1"]{background:var(--green-700)}
.hood-art[data-seed="2"]{background:#1F6B4A}
.hood-art[data-seed="3"]{background:#2A5F47}
.hood-art[data-seed="4"]{background:#17503A}
.hood-mark{font-size:34px;font-weight:700;color:rgba(192,138,46,.85)}
.hood strong{font-size:14.5px;color:var(--green)}
.hood .n{font-size:12.5px;color:var(--ink-600)}

/* ---- Hervorgehobene Orte ----------------------------------------------- */
.feat{width:220px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;position:relative;display:block}
.feat:hover{text-decoration:none;box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.feat-art{display:block;height:128px;background-size:cover;background-position:center;
  background-color:var(--cream)}
.feat-art.empty{display:flex;align-items:center;justify-content:center;background:var(--green)}
.feat-art.empty[data-seed="1"]{background:var(--green-700)}
.feat-art.empty[data-seed="2"]{background:#1F6B4A}
.feat-art.empty[data-seed="3"]{background:#2A5F47}
.feat-art.empty[data-seed="4"]{background:#17503A}
.feat-mark{font-size:40px;font-weight:700;color:rgba(192,138,46,.8)}

.feat-tags{position:absolute;top:9px;left:9px;display:flex;gap:5px}
.tag{background:rgba(255,255,255,.94);color:var(--ink);font-size:11px;
  padding:4px 9px;border-radius:999px;font-weight:600}
.tag-gold{background:var(--gold);color:var(--green)}

.feat-body{display:block;padding:11px 13px 13px}
.feat-body strong{display:block;font-size:15px;color:var(--green);line-height:1.25}
.feat-body .n{display:block;font-size:12.5px;color:var(--ink-600);margin-top:2px}
.feat-foot{display:flex;align-items:center;gap:8px;margin-top:9px;flex-wrap:wrap}
.mark{font-size:12px;color:var(--ink-600)}
.mark-ok{color:var(--ok);font-weight:600}
.feat-foot .price{font-size:12.5px;color:var(--ink-600)}
.feat-foot .hrs{font-size:12px;color:var(--ink-600);margin-left:auto}

/* ---- Veranstaltungen --------------------------------------------------- */
.ev-rail{display:grid;gap:9px}
.ev-item{display:flex;gap:12px;align-items:center;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 12px}
.ev-item:hover{border-color:var(--gold);text-decoration:none}
.ev-date{flex:0 0 auto;width:46px;text-align:center;background:var(--cream);
  border-radius:8px;padding:5px 0}
.ev-date .m{display:block;font-size:10.5px;letter-spacing:.08em;color:var(--gold);font-weight:700}
.ev-date .d{display:block;font-size:18px;font-weight:700;color:var(--green);line-height:1.1}
.ev-text strong{display:block;font-size:14.5px;color:var(--green)}
.ev-text .n{font-size:12.5px;color:var(--ink-600)}

/* ---- Aufruf an Betriebe ------------------------------------------------ */
.cta{background:var(--gold);border-radius:var(--r);padding:24px;
  display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden}
.cta::after{content:'';position:absolute;right:-30px;bottom:-30px;width:150px;height:150px;
  border-radius:50%;background:rgba(19,64,43,.10)}
.cta-ico{font-size:30px}
.cta h3{color:var(--green);margin:0;font-size:19px}
.cta p{margin:0;color:rgba(19,64,43,.78);font-size:14.5px}
.cta-btn{background:var(--green);color:var(--cream);padding:12px 20px;
  border-radius:9px;font-weight:700;text-align:center;font-size:15px;
  position:relative;z-index:2}
.cta-btn:hover{background:var(--green-700);text-decoration:none;color:var(--cream)}
.cta-note{font-size:12.5px;color:rgba(19,64,43,.7)}

/* Herkunftshinweis in der Kopfzeile */
.pill-local{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;
  padding:6px 12px;border-radius:999px;background:rgba(245,235,220,.12);
  border:1px solid rgba(245,235,220,.26);color:var(--gold-300);white-space:nowrap}
@media (max-width:900px){.pill-local{display:none}}

/* Blätterpfeile an den waagerechten Reihen */
.rail-wrap{position:relative}
.rail-btn{position:absolute;right:-6px;top:38%;transform:translateY(-50%);
  width:36px;height:36px;border-radius:50%;border:1px solid var(--line);
  background:var(--white);color:var(--green);font-size:22px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow);z-index:3;padding:0 0 3px 2px}
.rail-btn:hover{background:var(--gold);border-color:var(--gold);color:var(--green)}

/* Weiche Kante rechts, damit sichtbar wird, dass es weitergeht */
.rail-wrap::after{content:'';position:absolute;right:0;top:0;bottom:8px;width:56px;
  background:linear-gradient(90deg,transparent,var(--cream-200));pointer-events:none;z-index:2}
.band.alt .rail-wrap::after{background:linear-gradient(90deg,transparent,var(--white))}

@media (max-width:640px){
  .rail-btn{display:none!important}
  .rail-wrap::after{width:28px}
}

/* ---- Blätterung -------------------------------------------------------- */
.pager{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:26px}
.pg{display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;padding:0 12px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--white);color:var(--ink);
  font-size:14.5px;line-height:1;text-decoration:none}
.pg:hover{border-color:var(--gold);text-decoration:none}
.pg.current{background:var(--green);border-color:var(--green);
  color:var(--cream);font-weight:700}
.pg.disabled{opacity:.35;pointer-events:none}
.pg.gap{border:0;background:transparent;min-width:22px;padding:0;color:var(--ink-300)}
.pg-info{margin-left:auto;font-size:13.5px;color:var(--ink-600)}

/* Sicherheitsnetz: falls doch irgendwo eine Standardvorlage greift,
   bleiben deren SVG-Pfeile auf Textgroesse begrenzt. */
.pager svg,nav[role="navigation"] svg{width:16px;height:16px;display:inline-block}

@media (max-width:520px){
  .pg-info{width:100%;margin:8px 0 0;text-align:center}
}

/* Kategoriesymbole als SVG */
.cat-ico img{width:26px;height:26px;display:block}

/* Viertelbilder */
.hood-art.has-img{background-size:cover;background-position:center;
  position:relative;overflow:hidden}
.hood-art.has-img::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(19,64,43,.55))}
.hood-credit{position:absolute;left:6px;bottom:5px;z-index:2;font-size:9.5px;
  color:rgba(255,255,255,.85);text-shadow:0 1px 2px rgba(0,0,0,.5);
  max-width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Illustration statt Foto: kein Verlauf, damit die Zeichnung klar bleibt */
.hood-art.illustration::after{display:none}
.hood-art.illustration{background-color:var(--green)}

/* ======================================================================
   MARKE — Wortmarke und Bildzeichen
   ====================================================================== */

.brand{display:flex;align-items:center;gap:13px;flex:0 0 auto}
.brand:hover{text-decoration:none}
.brand-mark{width:46px;height:46px;display:block;flex:0 0 auto}

.brand-text{line-height:1.08;display:block}
.brand-name{display:block;font-family:Georgia,'Times New Roman',serif;
  font-size:21px;letter-spacing:.09em;color:var(--cream)}
.brand-name b{font-weight:700;color:var(--cream)}
.brand-name i{font-style:normal;font-weight:700;color:var(--gold)}
.brand-tag{display:block;font-family:Georgia,'Times New Roman',serif;
  font-size:10px;letter-spacing:.2em;color:var(--gold);margin-top:3px;
  white-space:nowrap}

.foot-mark{width:52px;height:52px}

@media (max-width:640px){
  .brand-mark{width:38px;height:38px}
  .brand-name{font-size:18px}
  .brand-tag{font-size:8.5px;letter-spacing:.12em}
}

/* ---- Ortswechsler ------------------------------------------------------ */
.city-pick{position:relative;flex:0 0 auto;margin-left:4px}
.city-btn{display:inline-flex;align-items:center;gap:6px;
  background:rgba(245,235,220,.12);border:1px solid rgba(245,235,220,.26);
  color:var(--cream);border-radius:999px;padding:7px 14px;font-size:13.5px;
  cursor:pointer;font-family:inherit;white-space:nowrap}
.city-btn:hover{border-color:var(--gold);color:var(--gold-300)}
.city-btn.static{cursor:default}
.city-btn.static:hover{border-color:rgba(245,235,220,.26);color:var(--cream)}
.city-btn .caret{font-size:10px;opacity:.7}

.city-menu{position:absolute;left:0;top:calc(100% + 8px);z-index:40;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);
  box-shadow:var(--shadow-lg);min-width:190px;padding:6px;display:block}
.city-menu a{display:flex;justify-content:space-between;gap:12px;
  padding:9px 12px;border-radius:6px;color:var(--ink);font-size:14.5px}
.city-menu a:hover{background:var(--cream);text-decoration:none}
.city-menu .am{color:var(--ink-600);font-size:13px}

@media (max-width:900px){.city-pick{order:3}}