/* ============================================================
   nuernberg360 App-Design (Glas)  ·  Präfix n3-  ·  2026
   Liegt ZUSÄTZLICH zum alten CSS — keine Kollisionen.
   ============================================================ */
:root{
  --n3-gruen:#1d7a52; --n3-gruen2:#2f9d6e; --n3-navy:#0c1e33;
  --n3-amber:#FFB703; --n3-rot:#E63946;
  --n3-txt:#16324a; --n3-mut:#6b8299; --n3-bg:#eef4f1;
  --n3-radius:20px;
}
.n3-shell{position:relative;min-height:100vh;background:var(--n3-bg);color:var(--n3-txt);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  -webkit-tap-highlight-color:transparent;overflow-x:hidden;
  padding-bottom:calc(76px + env(safe-area-inset-bottom));}
.n3-shell::before,.n3-shell::after{content:"";position:fixed;border-radius:50%;
  filter:blur(70px);opacity:.4;pointer-events:none;z-index:0}
.n3-shell::before{width:320px;height:320px;background:radial-gradient(circle,#8fd6b4,transparent 70%);top:-110px;left:-90px}
.n3-shell::after{width:340px;height:340px;background:radial-gradient(circle,#ffd97a,transparent 72%);bottom:-140px;right:-110px}
.n3-shell>*{position:relative;z-index:1}
.n3-wrap{max-width:1080px;margin:0 auto;padding:0 12px}

.n3-glas{background:rgba(255,255,255,.6);backdrop-filter:blur(20px) saturate(170%);
  -webkit-backdrop-filter:blur(20px) saturate(170%);border:1px solid rgba(255,255,255,.72);
  border-radius:var(--n3-radius);box-shadow:0 8px 28px rgba(12,46,60,.09)}

/* ---------- Kopfzeile ---------- */
.n3-top{position:sticky;top:0;z-index:900;display:flex;align-items:center;gap:10px;
  padding:10px 14px;margin:8px 8px 12px;border-radius:18px;
  background:rgba(255,255,255,.66);backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);border:1px solid rgba(255,255,255,.75);
  box-shadow:0 6px 22px rgba(12,46,60,.10)}
.n3-top-logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:1.08rem;
  color:var(--n3-navy);text-decoration:none;letter-spacing:-.02em;min-width:0}
.n3-top-logo img{width:34px;height:34px;border-radius:10px;display:block}
.n3-ort{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:700;
  color:var(--n3-gruen);background:rgba(29,122,82,.1);border-radius:999px;padding:4px 10px;white-space:nowrap}
.n3-top-akt{margin-left:auto;display:flex;gap:8px}
.n3-top-akt a,.n3-top-akt button{position:relative;width:40px;height:40px;display:flex;align-items:center;
  justify-content:center;border-radius:13px;border:1px solid rgba(255,255,255,.8);
  background:rgba(255,255,255,.6);color:var(--n3-navy);font-size:1.1rem;text-decoration:none;
  cursor:pointer;transition:transform .12s}
.n3-top-akt a:active,.n3-top-akt button:active{transform:scale(.92)}

/* ---------- Untere Tab-Leiste ---------- */
.n3-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:950;display:flex;align-items:flex-end;
  justify-content:space-around;gap:2px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.78);backdrop-filter:blur(26px) saturate(180%);
  -webkit-backdrop-filter:blur(26px) saturate(180%);border-top:1px solid rgba(255,255,255,.8);
  box-shadow:0 -8px 30px rgba(12,46,60,.12)}
.n3-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;
  color:#7d93a8;text-decoration:none;font-size:.62rem;font-weight:700;letter-spacing:.02em;
  transition:transform .12s}
.n3-tab i{font-size:1.35rem;line-height:1}
.n3-tab:active{transform:scale(.9)}
.n3-tab.aktiv{color:var(--n3-gruen)}
.n3-tab-plus{flex:1;display:flex;flex-direction:column;align-items:center;text-decoration:none;
  margin-top:-26px;color:var(--n3-gruen);font-size:.62rem;font-weight:700}
.n3-tab-plus span.kreis{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:linear-gradient(145deg,var(--n3-gruen2),var(--n3-gruen));
  color:#fff;font-size:1.5rem;box-shadow:0 8px 22px rgba(29,122,82,.45);
  border:3px solid rgba(255,255,255,.9);margin-bottom:3px;transition:transform .12s}
.n3-tab-plus:active span.kreis{transform:scale(.92)}
.n3-badge{position:absolute;top:-4px;right:-6px;min-width:17px;height:17px;border-radius:9px;
  background:var(--n3-rot);color:#fff;font-size:.62rem;font-weight:800;display:flex;
  align-items:center;justify-content:center;padding:0 4px;border:2px solid #fff}
.n3-tab .n3-badge{position:absolute;transform:translate(12px,-2px)}
.n3-tab i{position:relative}

/* ---------- Suchleiste ---------- */
.n3-such{display:flex;align-items:center;gap:8px;padding:4px 6px 4px 14px;margin:0 0 12px;
  background:rgba(255,255,255,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.8);border-radius:17px;box-shadow:0 6px 20px rgba(12,46,60,.08)}
.n3-such i.lupe{color:var(--n3-mut);font-size:1.05rem}
.n3-such input{flex:1;min-width:0;border:none;background:none;font:inherit;font-size:1rem;
  color:var(--n3-txt);outline:none;padding:10px 0}
.n3-such input::placeholder{color:#9db0c0}
.n3-such button,.n3-such .n3-such-loc{border:none;cursor:pointer;width:42px;height:42px;flex:0 0 42px;
  border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;
  background:linear-gradient(145deg,var(--n3-gruen2),var(--n3-gruen));color:#fff;
  box-shadow:0 4px 14px rgba(29,122,82,.35);transition:transform .12s;text-decoration:none}
.n3-such .n3-such-loc{background:rgba(255,255,255,.85);color:var(--n3-gruen);
  box-shadow:inset 0 0 0 1px rgba(29,122,82,.25)}
.n3-such button:active,.n3-such .n3-such-loc:active{transform:scale(.9)}

/* ---------- Kategorie-Chips ---------- */
.n3-chips{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.n3-chips::-webkit-scrollbar{display:none}
.n3-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:9px 15px;
  border-radius:999px;background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.85);
  color:#3e5a72;font-size:.83rem;font-weight:600;text-decoration:none;white-space:nowrap;
  box-shadow:0 3px 12px rgba(12,46,60,.06);transition:transform .12s}
.n3-chip:active{transform:scale(.94)}
.n3-chip.aktiv{background:linear-gradient(145deg,var(--n3-gruen2),var(--n3-gruen));color:#fff;
  border-color:transparent;box-shadow:0 2px 6px rgba(29,122,82,.22)}

/* ---------- Abschnitts-Kopf ---------- */
.n3-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:18px 2px 10px}
.n3-h b,.n3-h h2{margin:0;font-size:1.05rem;font-weight:800;color:var(--n3-navy);letter-spacing:-.01em}
.n3-h-mehr{font-size:.8rem;font-weight:700;color:var(--n3-gruen);text-decoration:none;white-space:nowrap}

/* ---------- Inserat-Karten ---------- */
.n3-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(min-width:640px){.n3-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:960px){.n3-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.n3-card{display:flex;flex-direction:column;min-width:0;text-decoration:none;color:var(--n3-txt);
  background:rgba(255,255,255,.68);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.8);border-radius:18px;overflow:hidden;
  box-shadow:0 6px 20px rgba(12,46,60,.08);transition:transform .13s}
.n3-card:active{transform:scale(.965)}
.n3-card-img{position:relative;aspect-ratio:1/1;background:#e3ece8 center/cover no-repeat;overflow:hidden}
.n3-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.n3-card-img .n3-status{position:absolute;top:8px;left:8px;font-size:.62rem;font-weight:800;
  padding:3px 9px;border-radius:999px;background:rgba(12,30,51,.75);color:#fff;backdrop-filter:blur(6px)}
.n3-card-body{padding:9px 11px 11px;display:flex;flex-direction:column;gap:4px}
.n3-card-body b{font-size:.86rem;font-weight:600;line-height:1.3;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.2em}
.n3-preis{display:inline-flex;align-self:flex-start;align-items:center;font-size:.9rem;font-weight:800;
  color:var(--n3-navy);background:linear-gradient(145deg,#ffd35c,var(--n3-amber));
  border-radius:10px;padding:3px 9px;box-shadow:0 3px 10px rgba(255,183,3,.35)}
.n3-preis.vb{font-size:.82rem}
.n3-card-meta{font-size:.7rem;color:var(--n3-mut);display:flex;align-items:center;gap:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- Knöpfe ---------- */
.n3-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
  border:none;cursor:pointer;font:inherit;font-weight:700;font-size:.97rem;padding:14px 18px;
  border-radius:15px;background:linear-gradient(145deg,var(--n3-gruen2),var(--n3-gruen));color:#fff;
  text-decoration:none;box-shadow:0 6px 18px rgba(29,122,82,.35);transition:transform .12s}
.n3-btn:active{transform:scale(.97)}
.n3-btn.hell{background:rgba(255,255,255,.8);color:#33526d;
  box-shadow:inset 0 0 0 1px rgba(12,46,60,.14)}
.n3-btn.amber{background:linear-gradient(145deg,#ffd35c,var(--n3-amber));color:var(--n3-navy);
  box-shadow:0 6px 18px rgba(255,183,3,.4)}
.n3-btn.rot{background:linear-gradient(145deg,#f0716c,var(--n3-rot));box-shadow:0 6px 18px rgba(230,57,70,.32)}
.n3-btn.klein{width:auto;padding:9px 14px;font-size:.85rem;border-radius:12px}

/* ---------- Formulare ---------- */
.n3-feld{margin-bottom:12px}
.n3-feld label{display:block;font-size:.74rem;font-weight:800;color:#54718a;margin-bottom:6px;
  letter-spacing:.04em;text-transform:uppercase}
.n3-feld input,.n3-feld select,.n3-feld textarea{width:100%;box-sizing:border-box;
  border:1px solid rgba(12,46,60,.13);background:rgba(255,255,255,.85);border-radius:14px;
  padding:13px 14px;font:inherit;font-size:1rem;color:var(--n3-txt);outline:none;
  transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
.n3-feld select{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b8299' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.n3-feld input:focus,.n3-feld select:focus,.n3-feld textarea:focus{border-color:var(--n3-gruen);
  box-shadow:0 0 0 3px rgba(29,122,82,.14)}
.n3-zwei{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.n3-flash{border-radius:15px;padding:12px 15px;font-size:.9rem;font-weight:600;margin:0 0 12px;
  background:rgba(230,57,70,.1);color:#b3282f;border:1px solid rgba(230,57,70,.25)}
.n3-flash.ok{background:rgba(29,122,82,.1);color:var(--n3-gruen);border-color:rgba(29,122,82,.3)}
.n3-flash.warn{background:rgba(255,183,3,.14);color:#8a6a00;border-color:rgba(255,183,3,.4)}

/* ---------- Listenzeilen ---------- */
.n3-zeile{display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;text-align:left;
  border:none;font:inherit;cursor:pointer;text-decoration:none;color:var(--n3-txt);
  background:rgba(255,255,255,.66);border-radius:16px;padding:13px 14px;margin-bottom:8px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 4px 14px rgba(12,46,60,.05);transition:transform .12s}
.n3-zeile:active{transform:scale(.98)}
.n3-zeile .ikon{flex:0 0 42px;width:42px;height:42px;border-radius:13px;display:flex;align-items:center;
  justify-content:center;font-size:1.15rem;background:rgba(29,122,82,.1);color:var(--n3-gruen)}
.n3-zeile .txt{flex:1;min-width:0}
.n3-zeile .txt b{display:block;font-size:.92rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.n3-zeile .txt span{display:block;font-size:.76rem;color:var(--n3-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.n3-zeile .pfeil{color:#9db0c0;font-size:1rem}

/* ---------- Blatt von unten ---------- */
.n3-ov{position:fixed;inset:0;z-index:4000;display:none;align-items:flex-end;justify-content:center;
  background:rgba(10,28,44,.4);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.n3-ov.auf{display:flex}
.n3-blatt{width:100%;max-width:560px;max-height:92vh;overflow:auto;-webkit-overflow-scrolling:touch;
  background:rgba(255,255,255,.85);backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);border:1px solid rgba(255,255,255,.85);
  border-radius:26px 26px 0 0;box-shadow:0 -10px 50px rgba(8,30,50,.3);
  padding:8px 16px calc(20px + env(safe-area-inset-bottom));animation:n3Hoch .28s cubic-bezier(.22,1,.36,1)}
@keyframes n3Hoch{from{transform:translateY(100%)}to{transform:translateY(0)}}
.n3-griff{width:38px;height:4px;border-radius:2px;background:rgba(12,46,60,.18);margin:6px auto 12px}
@media(min-width:900px){.n3-ov{align-items:center;padding:20px}
  .n3-blatt{border-radius:26px;animation:n3Rein .2s ease}
  @keyframes n3Rein{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}}

/* ---------- Chat-Blasen ---------- */
.n3-chat{display:flex;flex-direction:column;gap:8px;padding:6px 0}
.n3-blase{max-width:82%;padding:10px 13px;border-radius:17px;font-size:.92rem;line-height:1.4;
  background:rgba(255,255,255,.85);color:var(--n3-txt);align-self:flex-start;
  border:1px solid rgba(255,255,255,.9);box-shadow:0 3px 10px rgba(12,46,60,.07)}
.n3-blase.ich{align-self:flex-end;background:linear-gradient(145deg,var(--n3-gruen2),var(--n3-gruen));
  color:#fff;border-color:transparent}
.n3-blase .zeit{display:block;font-size:.64rem;opacity:.65;margin-top:3px}

/* ---------- Foto-Upload-Kacheln ---------- */
.n3-fotos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.n3-fotos .kachel{position:relative;aspect-ratio:1/1;border-radius:14px;overflow:hidden;
  background:rgba(255,255,255,.7);border:2px dashed rgba(29,122,82,.35);display:flex;
  align-items:center;justify-content:center;color:var(--n3-gruen);font-size:1.4rem;cursor:pointer}
.n3-fotos .kachel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- Sonstiges ---------- */
.n3-leer{text-align:center;color:#8ba0b4;font-size:.9rem;padding:34px 16px}
.n3-leer i{display:block;font-size:2.2rem;margin-bottom:8px;color:#b7c6d2}
.n3-hinweis{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--n3-mut);
  background:rgba(255,255,255,.55);border-radius:12px;padding:9px 12px;margin:10px 0}
.n3-sticky-cta{position:fixed;left:0;right:0;bottom:calc(70px + env(safe-area-inset-bottom));
  z-index:940;padding:0 14px;pointer-events:none}
.n3-sticky-cta .n3-btn{pointer-events:auto;max-width:560px;margin:0 auto;display:flex;
  box-shadow:0 10px 30px rgba(29,122,82,.45)}
@media(min-width:992px){
  .n3-tabbar{display:none}
  .n3-shell{padding-bottom:30px}
  .n3-sticky-cta{position:static;padding:0;margin-top:12px}
}

/* ---------- Globale App-Anpassungen (alle Shop-Seiten) ---------- */
body{background:linear-gradient(180deg,#eef4f1,#f5f7fa 42%)}
@media(max-width:991px){
  #n360-chat-toggle{bottom:calc(84px + env(safe-area-inset-bottom)) !important}
  #n360-cookie-reopen{bottom:calc(84px + env(safe-area-inset-bottom)) !important}
}
button.n3-tab{background:none;border:0;padding:0;cursor:pointer}

/* ---------- Einheitliche Preis-Optik (gelber Chip) überall ---------- */
.produkt-card .preis,.vor-p,.neu5-preis,.preis-gross{
  display:inline-block;background:linear-gradient(145deg,#ffd35c,#FFB703)!important;
  color:#0c1e33!important;border-radius:10px;padding:2px 9px;font-weight:800;
  box-shadow:0 3px 10px rgba(255,183,3,.35)}
.preis-gross{font-size:1.5rem;padding:6px 14px;border-radius:13px}

/* ---------- Desktop-CTA in der Kopfzeile (ersetzt dort die Bottom-Bar) ---------- */
.n3-nav-cta{display:inline-flex;align-items:center;gap:6px;margin-right:8px;padding:8px 15px;border-radius:12px;
  font-weight:700;font-size:.9rem;text-decoration:none;color:#fff;
  background:linear-gradient(145deg,#2f9d6e,#1d7a52);box-shadow:0 4px 14px rgba(29,122,82,.35);
  transition:transform .12s,box-shadow .12s;white-space:nowrap}
.n3-nav-cta:hover{color:#fff;transform:translateY(-1px);box-shadow:0 6px 18px rgba(29,122,82,.45)}