:root{
      --bg:#f5f7f5;
      --card:#ffffff;
      --shadow: 0 8px 24px rgba(0,0,0,0.12);
      --radius: 14px;
      --text:#1b1f1c;
      --muted:#5f6b64;
      --line: rgba(0,0,0,0.12);
      --accent:#2e9e4f;
      --dark:#0f172a;
      --gap: 18px; /* EINMAL definieren -> überall identisch */
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      background: var(--bg);
      color: var(--text);
    }

    /* ===== TOP HERO BAR ===== */
    .top-hero{
      width:100%;
      background: linear-gradient(90deg, rgba(46,158,79,0.95), rgba(108,207,127,0.95));
      color:#fff;
      padding: 16px 16px;
      text-align:center;
    }
    .top-hero-inner{ max-width: 1200px; margin: 0 auto; }
    .top-hero-title{
      margin:0 0 6px;
      font-size: 22px;
      font-weight: 950;
      letter-spacing: 0.2px;
    }
    .top-hero-sub{
      margin:0;
      font-size: 14px;
      opacity: 0.95;
      line-height: 1.35;
    }

    /* ===== HEADER-CARD (fix: gleiche Außenkanten wie unten) ===== */
    header{ padding: 0; margin: 0; } /* <- wichtig: kein eigenes padding! */

    .headwrap{
      max-width: 1200px;
      margin: var(--gap) auto 0;     /* oben Abstand wie grid-gap */
      padding: 0 16px;              /* exakt wie .wrap */
    }

    .headcard{
      width: 100%;
      background: var(--card);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 10px 12px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
    }

    .brand img{ height: 74px; width:auto; display:block; }

    .sitebanner{
      flex: 1 1 auto;
      display:flex;
      justify-content:center;
      align-items:center;
      font-weight: 950;
      font-size: 20px;
      color: var(--accent);
      user-select:none;
      white-space: nowrap;
    }
    .sitebanner span{
      background: rgba(46,158,79,0.10);
      border: 1px solid rgba(46,158,79,0.20);
      padding: 10px 14px;
      border-radius: 999px;
      box-shadow: 0 6px 16px rgba(46,158,79,0.10);
    }
    @media (max-width: 900px){
      .sitebanner{ display:none; }
    }
    @media (max-width: 740px){
      .headcard{ flex-wrap:wrap; justify-content:center; }
      .authbar{ justify-content:center; }
    }

    .authbar{
      display:flex;
      align-items:center;
      gap: 10px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .pill{
      border:0;
      border-radius: 999px;
      padding: 10px 14px;
      font-weight: 800;
      font-size: 14px;
      cursor:pointer;
      background: var(--dark);
      color: #fff;
      box-shadow: 0 6px 16px rgba(15,23,42,0.12);
    }
    .pill.secondary{
      background: rgba(15,23,42,0.08);
      color: var(--dark);
      box-shadow: none;
    }

    .loggedin-line{
      margin: 8px 0 0; /* in headwrap */
      color: var(--muted);
      font-size: 13px;
      min-height: 18px;
    }

    /* ===== MAIN LAYOUT ===== */
    .wrap{
      max-width: 1200px;
      margin: 0 auto;
      padding: var(--gap) 16px 24px; /* top Abstand = gap -> Headcard Abstand passt exakt */
    }
    .grid{
      display:flex;
      gap: var(--gap);
      justify-content:center;
      align-items:stretch;
      flex-wrap:wrap;
    }
    .card{
      background: var(--card);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 14px;
    }
    .card.map{
      width: min(720px, 92vw);
      flex: 1 1 520px;
      display:flex;
      flex-direction:column;
    }
    #map{
      width:100%;
      height: 56vh;
      min-height: 380px;
      border-radius: 12px;
      overflow:hidden;
    }

    .card.shelf{
      width: min(420px, 92vw);
      flex: 0 1 360px;
      display:flex;
      flex-direction:column;
      gap: 10px;
    }

    .hint{ font-size: 14px; color: var(--muted); line-height: 1.35; }

    /* ---- Ad slots (empty by default; can be filled by ads.js / ad server) ---- */
    .adRow{
      display:flex;
      gap:12px;
      margin-top: 12px;
    }
    .adRow .adSlot{ flex: 1 1 0; }
    .adSlot{
      min-height: 92px;
      border-radius: 14px;
      border: 1px dashed rgba(0,0,0,0.22);
      background: rgba(255,255,255,0.65);
      display:flex;
      align-items:center;
      justify-content:center;
      color: rgba(0,0,0,0.45);
      font-size: 12px;
      font-weight: 700;
    }
    .adSlot:empty::after{
  content: "🐶 Hier könnte Werbung stehen – aber der Hund hat sie gefressen.";
  text-align: center;
  padding: 10px;
  line-height: 1.4;
}
.adSlot:empty{
  cursor: pointer;
  transition: all 0.2s ease;
}

.adSlot:empty:hover{
  background: rgba(46,158,79,0.08);
  border-color: rgba(46,158,79,0.4);
}

.adSlot:empty:hover::after{
  content: "👉 Jetzt Werbeplatz sichern: business@kackisacki.de";
}
    /* ---- SEO block on city landing pages ---- */
    .seoWrap{
      max-width: 1180px;
      margin: 10px auto 0;
      padding: 0 18px;
    }
    .seoCard{
      background: rgba(255,255,255,0.92);
      border: 1px solid rgba(0,0,0,0.08);
      border-radius: 18px;
      padding: 16px 18px;
      box-shadow: 0 10px 24px rgba(0,0,0,0.08);
      color: var(--text);
    }
    .seoCard h2{ margin: 0 0 10px 0; font-size: 18px; }
    .seoCard p{ margin: 0 0 10px 0; color: var(--muted); line-height: 1.5; }
    .seoCard .netLinks{ margin-top: 10px; display:flex; flex-wrap:wrap; gap:10px; }
    .seoCard .netLinks a{ font-size: 13px; }

    #shelfWrapper{
      position: relative;
      width: 100%;
      border-radius: 12px;
      overflow:hidden;
      background: linear-gradient(180deg, rgba(0,0,0,0.03), rgba(0,0,0,0.00));
      padding: 10px;
    }
    #shelfImg{
      width:100%;
      height:auto;
      display:block;
      user-select:none;
      -webkit-user-drag:none;
    }
    .bagZone{ position:absolute; cursor: grab; border-radius: 12px; }
    #bagBrown{ left: 24%; top: 14%; width: 22%; height: 34%; }
    #bagGreen{ left: 54%; top: 14%; width: 22%; height: 34%; }

    .legend{
      display:flex;
      gap:10px;
      align-items:center;
      font-size: 13px;
      color: var(--muted);
      flex-wrap:wrap;
    }
    .dot{ width:10px;height:10px;border-radius:50%; display:inline-block; box-shadow: 0 0 0 2px rgba(0,0,0,0.05) inset; }
    .dot.brown{ background:#8d5932; }
    .dot.green{ background:#2e9e4f; }

    .btnRow{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 6px; }
    .btn{
      border: 0;
      border-radius: 999px;
      padding: 10px 14px;
      background: var(--dark);
      color: #fff;
      cursor:pointer;
      font-weight: 800;
      font-size: 14px;
    }
    .btn.secondary{ background: rgba(15,23,42,0.08); color: var(--dark); }

    footer{ display:flex; justify-content:center; padding: 10px 16px 28px; }
    .foot{ max-width: 1200px; width:100%; text-align:center; color: var(--muted); font-size: 14px; }
    .foot .vline{ width: 2px; height: 22px; background: var(--line); margin: 10px auto 8px; border-radius: 2px; }
    a{ color: var(--accent); text-decoration:none; }
    a:hover{ text-decoration:underline; }

    /* Modal overlay */
    .overlay{
      position: fixed;
      inset: 0;
      background: rgba(15,23,42,0.55);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 18px;
      z-index: 9999;
    }
    .overlay.show{ display:flex; }

    .modal{
	width: min(520px, 92vw);
	max-height: 90vh;        /* 🔥 WICHTIG */
	display: flex;
	flex-direction: column;  /* 🔥 */
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 20px 60px rgba(0,0,0,0.35);
	overflow: hidden;
	}
    .modalHeader{
	  flex-shrink: 0;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding: 14px 16px;
      border-bottom: 1px solid rgba(0,0,0,0.08);
    }
    .modalTitle{ font-weight: 900; letter-spacing: 0.2px; }
    .modalClose{
      border:0;
      background: rgba(15,23,42,0.08);
      color: var(--dark);
      border-radius: 999px;
      padding: 8px 10px;
      cursor:pointer;
      font-weight: 900;
    }
   .modal-content {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    width: 90%;
    max-width: 900px;
}

	.modalBody {
	overflow-y: auto;   /* 🔥 Scroll aktivieren */
	flex: 1;            /* 🔥 nimmt Resthöhe */
	padding: 12px 16px;
}
    .field{ display:flex; flex-direction:column; gap:6px; margin-bottom: 12px; }
    label{ font-size: 13px; color: var(--muted); }
    input{
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid rgba(0,0,0,0.14);
      font-size: 15px;
      outline: none;
    }
    input:focus{
      border-color: rgba(46,158,79,0.65);
      box-shadow: 0 0 0 4px rgba(46,158,79,0.14);
    }
    .modalActions{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 8px; }
    .note{ font-size: 13px; color: var(--muted); margin-top: 10px; line-height: 1.35; }
    .error{ font-size: 13px; color: #b42318; margin-top: 10px; line-height: 1.35; }

    /* Auth button toggles */
    [data-auth="logged-in"] .show-logged-out{ display:none !important; }
    [data-auth="logged-out"] .show-logged-in{ display:none !important; }

/* --- Kackisacki server clusters (zoom < 12) --- */
.kc-clus{
  width:44px;
  height:44px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(46,158,79,0.22);
  border: 2px solid rgba(46,158,79,0.60);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.kc-clus span{
  display:inline-block;
  padding: 4px 8px;
  line-height: 1;
  border-radius: 999px;
  font-weight: 900;
  color: #0f172a;
  background: rgba(255,255,255,0.80);
  border: 1px solid rgba(0,0,0,0.10);
}

/* Slightly different emphasis by magnitude */
.kc-10  { background: rgba(46,158,79,0.18); border-color: rgba(46,158,79,0.45); }
.kc-50  { background: rgba(46,158,79,0.22); border-color: rgba(46,158,79,0.55); }
.kc-200 { background: rgba(46,158,79,0.26); border-color: rgba(46,158,79,0.65); }
.kc-1000{ background: rgba(46,158,79,0.30); border-color: rgba(46,158,79,0.75); }
.kc-1000 span{ font-size: 13px; }

.station-popup{min-width:240px;max-width:330px}.station-actions{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}.station-actions .btn{font-size:13px;padding:8px 10px}.station-delete{background:#963c34}.station-popup input{width:100%;margin-top:5px}.station-popup label{display:block}

.city-knowledge{margin:24px 0;padding:20px;background:#eef5ef;border:1px solid #c8dccb;border-radius:12px}.city-knowledge dl{margin:0}.city-knowledge dl>div{display:grid;grid-template-columns:minmax(110px,160px) 1fr;gap:12px;padding:8px 0;border-bottom:1px solid #d3e2d5}.city-knowledge dt{font-weight:700}.city-knowledge dd{margin:0}.city-knowledge .note{margin-top:14px}@media(max-width:520px){.city-knowledge{padding:14px}.city-knowledge dl>div{grid-template-columns:1fr;gap:3px}}