/* =========================================================
   SmileArtDrop — Design Tokens
   Palette:  Sonnenwecken #FFD54F · Ember #FF9800 · Blüte #E91E63
   Neutral:  Ink #333333 · Paper #FFFFFF · Warmlicht #FFF8EF
   Type:     Poppins (Display) · Nunito Sans (Text)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Nunito+Sans:opsz,wght@6..12,400;6..12,600;6..12,700&display=swap');

:root{
  --c-yellow: #FFD54F;
  --c-orange: #FF9800;
  --c-pink:   #E91E63;
  --gradient-brand: linear-gradient(115deg, var(--c-yellow) 0%, var(--c-orange) 52%, var(--c-pink) 100%);
  --gradient-soft:  linear-gradient(115deg, rgba(255,213,79,.16) 0%, rgba(255,152,0,.12) 52%, rgba(233,30,99,.14) 100%);

  --ink:        #333333;
  --ink-soft:   #6b6b6b;
  --paper:      #ffffff;
  --warmlight:  #FFF8EF;
  --line:       #f0e6da;

  --shadow-soft: 0 8px 24px rgba(51,51,51,.08);
  --shadow-card: 0 12px 32px rgba(255,152,0,.12);
  --glow-orange: 0 0 0 0 rgba(255,152,0,.55);
  --glow-pink:   0 0 24px rgba(233,30,99,.35);

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  --font-display: 'Poppins', system-ui, sans-serif;
  --font-body: 'Nunito Sans', system-ui, sans-serif;

  --maxw: 1180px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}
h1,h2,h3,h4, .brand-word{
  font-family: var(--font-display);
  margin: 0 0 .5em;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
p{ margin: 0 0 1em; color: var(--ink); }
a{ color: inherit; }
img{ max-width:100%; display:block; }
.container{ max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.visually-hidden{ position:absolute; width:1px;height:1px; overflow:hidden; clip:rect(0 0 0 0); }

:focus-visible{
  outline: 3px solid var(--c-pink);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ---------- Nav ---------- */
.nav{
  position: sticky; top:0; z-index: 50;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav .container{ display:flex; align-items:center; justify-content:space-between; height:72px; }
.logo{ display:flex; align-items:center; gap:10px; font-family: var(--font-display); font-weight:700; font-size:1.15rem; text-decoration:none; color: var(--ink); }
.logo-mark{
  width:34px; height:34px; border-radius: 10px;
  background: var(--gradient-brand);
  box-shadow: var(--shadow-card);
  position: relative;
  flex-shrink:0;
}
.logo-img{
  height:36px; width:auto; border-radius:8px;
  box-shadow: var(--shadow-soft);
  flex-shrink:0;
}
.footer .logo-img{ box-shadow: 0 8px 20px rgba(0,0,0,.35); }
.nav-links{ display:flex; gap:28px; list-style:none; margin:0; padding:0; }
.nav-links a{ text-decoration:none; font-weight:600; font-size:.95rem; color: var(--ink-soft); transition: color .2s; }
.nav-links a.active, .nav-links a:hover{ color: var(--c-pink); }
.nav-toggle{ display:none; }

/* ---------- Buttons ---------- */
.btn{
  --btnGlow: rgba(255,152,0,.45);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family: var(--font-display); font-weight:600; font-size:.98rem;
  padding: 14px 28px; border-radius: var(--radius-pill);
  border: none; cursor:pointer; text-decoration:none;
  transition: transform .18s ease, box-shadow .3s ease, filter .2s ease;
}
.btn:disabled, .btn.btn-disabled{
  background: var(--line) !important; color: var(--ink-soft) !important;
  box-shadow:none !important; cursor:not-allowed; transform:none !important; filter:none !important;
  opacity:.7;
}
.btn-primary{
  color:#fff; background: var(--gradient-brand); background-size: 160% 160%;
  box-shadow: 0 6px 20px var(--btnGlow);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 10px 30px var(--btnGlow), var(--glow-pink); filter: brightness(1.04); }
.btn-primary:active{ transform: translateY(0); }
.btn-ghost{
  color: var(--ink); background: #fff; border: 1.5px solid var(--line);
}
.btn-ghost:hover{ border-color: var(--c-orange); color: var(--c-orange); }
.btn-sm{ padding: 9px 18px; font-size:.85rem; }
.btn-block{ width:100%; }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding: 84px 0 60px;
  overflow:hidden;
  background: var(--gradient-soft);
}
.hero-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap:48px; align-items:center; }
.eyebrow{
  display:inline-block; font-family: var(--font-display); font-weight:600; font-size:.78rem;
  letter-spacing:.08em; text-transform:uppercase; color: var(--c-pink);
  background: #fff; border-radius: var(--radius-pill); padding:6px 14px;
  box-shadow: var(--shadow-soft); margin-bottom:18px;
}
.hero h1{ font-size: clamp(2.1rem, 4vw, 3.3rem); font-weight:800; }
.hero h1 .grad{
  background: var(--gradient-brand); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{ font-size:1.08rem; color: var(--ink-soft); max-width: 46ch; }
.hero-ctas{ display:flex; gap:14px; margin-top: 28px; flex-wrap:wrap; }

/* Signature element: the "journey path" — a dashed route with a travelling glowing drop,
   embodying "Kunst in Bewegung" (art in motion) */
.journey{
  position:relative; height: 360px; border-radius: var(--radius-lg);
  background: #fff; box-shadow: var(--shadow-card); overflow:hidden;
}
.journey svg{ width:100%; height:100%; }
.journey-path{
  fill:none; stroke: var(--c-orange); stroke-width:3; stroke-dasharray: 8 10; opacity:.55;
}
.journey-dot{ filter: drop-shadow(0 0 8px rgba(233,30,99,.6)); }
.journey-node{ fill:#fff; stroke: var(--c-pink); stroke-width:3; }
.journey-node-label{ font-family: var(--font-body); font-size:11px; fill: var(--ink-soft); font-weight:700; }
.motion-drop{
  offset-path: path("M 30 300 C 90 150, 160 320, 230 180 S 340 60, 360 90");
  animation: travel 7s linear infinite;
}
@keyframes travel{
  0%{ offset-distance: 0%; }
  100%{ offset-distance: 100%; }
}
@media (prefers-reduced-motion: reduce){ .motion-drop{ animation: none; offset-distance: 55%; } }

/* ---------- Sections ---------- */
.section{ padding: 76px 0; }
.section-alt{ background: var(--warmlight); }
.section-head{ max-width: 640px; margin: 0 auto 44px; text-align:center; }
.section-head h2{ font-size: clamp(1.6rem, 3vw, 2.2rem); }
.section-head p{ color: var(--ink-soft); }

.cards-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card{
  background:#fff; border-radius: var(--radius-md); padding: 28px 24px;
  box-shadow: var(--shadow-soft); border:1px solid var(--line);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-card); }
.card .icon-badge{
  width:44px; height:44px; border-radius: 12px; margin-bottom:14px;
  background: var(--gradient-brand); box-shadow: var(--shadow-card);
}
.card h3{ font-size:1.05rem; margin-bottom:.4em; }
.card p{ color: var(--ink-soft); font-size:.94rem; margin:0; }

/* ---------- Status pills (encode real object state) ---------- */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:.78rem;
  padding: 5px 12px; border-radius: var(--radius-pill);
}
.pill::before{ content:""; width:7px; height:7px; border-radius:50%; }
.pill-angelegt{ background:#e8eef7; color:#2a5a9c; }
.pill-angelegt::before{ background:#2a5a9c; }
.pill-ausgesetzt{ background:#e8f7ef; color:#1b8a4b; }
.pill-ausgesetzt::before{ background:#1b8a4b; }
.pill-eingesammelt{ background:#fff2e0; color:#b5690a; }
.pill-eingesammelt::before{ background:#ff9800; }
.pill-pausiert{ background:#f1f0ee; color:#6b6b6b; }
.pill-pausiert::before{ background:#8f8577; }

/* ---------- Forms ---------- */
.form-card{
  background:#fff; border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow-card);
  max-width: 520px; margin: 0 auto; border: 1px solid var(--line);
}
.field{ margin-bottom: 20px; }
.field label{ display:block; font-weight:700; font-size:.88rem; margin-bottom:6px; }
.field .hint{ font-size:.8rem; color: var(--ink-soft); margin-top:6px; }
input[type=text], input[type=email], input[type=password], input[type=file], textarea, select{
  width:100%; padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--line); font-family: var(--font-body); font-size:.96rem;
  background:#fdfcfb;
}
input:focus, textarea:focus, select:focus{ border-color: var(--c-orange); outline:none; }
textarea{ min-height: 110px; resize: vertical; }
.switch-row{ display:flex; align-items:center; gap:12px; }

/* ---------- Object list ---------- */
.obj-list{ display:grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap:20px; }
.obj-card{
  border-radius: var(--radius-md); overflow:hidden; background:#fff;
  border:1px solid var(--line); box-shadow: var(--shadow-soft);
}
.obj-card img{ height:150px; width:100%; object-fit:cover; }
.obj-card-body{ padding: 16px; }
.obj-card-body h4{ margin:0 0 6px; font-size:1rem; }
.obj-card-meta{ font-size:.82rem; color: var(--ink-soft); margin-bottom:10px; }

/* ---------- Map page ---------- */
.map-toolbar{
  display:flex; gap:12px; flex-wrap:wrap; align-items:center;
  padding: 16px 24px; background:#fff; border-bottom:1px solid var(--line);
}
.map-toolbar select, .map-toolbar input{ width:auto; min-width: 160px; }
#map{ height: calc(100vh - 72px - 68px); width:100%; }

/* Popup-Inhalte auf Mobile immer erreichbar machen (intern scrollbar, statt
   dass Teile des Inhalts außerhalb des sichtbaren Bereichs hängen bleiben) */
.leaflet-popup-content{ max-height: 58vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--c-orange) transparent; }
.leaflet-popup-content::-webkit-scrollbar{ width: 5px; }
.leaflet-popup-content::-webkit-scrollbar-thumb{ background: var(--c-orange); border-radius: 999px; }
.leaflet-popup-content::-webkit-scrollbar-track{ background: transparent; }

/* ---------- Journey-Ansicht: Karte + Karten mit wechselseitigem Highlighting ---------- */
.journey-layout{ display:grid; grid-template-columns: 1fr; gap:20px; }
.journey-map{ height:360px; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.journey-cards{
  display:flex; flex-direction:column; gap:12px;
}
.journey-card{
  background:#fff; border:2px solid var(--line); border-radius: var(--radius-md);
  padding:16px 18px; cursor:pointer; transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
  box-shadow: var(--shadow-soft);
}
.journey-card:hover{ transform: translateY(-2px); }
.journey-card.active{ border-color: var(--c-pink); box-shadow: var(--shadow-card); }
.journey-card img{ width:100%; max-width:220px; border-radius:10px; margin-bottom:10px; }
.journey-card-title{ font-family: var(--font-display); font-weight:700; font-size:.92rem; margin-bottom:4px; }
.journey-card-meta{ font-size:.8rem; color:var(--ink-soft); margin-bottom:8px; }
.journey-card-story{ font-size:.9rem; margin-bottom:8px; }
.journey-card-dates{ font-size:.78rem; color:var(--ink-soft); display:flex; gap:14px; flex-wrap:wrap; }
.journey-no-location-badge{
  font-size:.72rem; color:#b5690a; background:#fff2e0; padding:2px 9px; border-radius:999px; margin-left:6px;
}
.journey-edited-badge{
  font-size:.72rem; color:#2a5a9c; background:#e8eef7; padding:2px 9px; border-radius:999px; margin-left:6px;
}
.journey-card-finder{ font-size:.8rem; color:var(--ink-soft); margin-bottom:8px; }

.journey-edit-form .field{ margin-bottom:10px; }
.journey-edit-form label{ font-size:.78rem; font-weight:700; display:block; margin-bottom:4px; }
.journey-edit-form input[type="text"], .journey-edit-form textarea{
  width:100%; padding:8px 10px; border:1.5px solid var(--line); border-radius:var(--radius-sm); font-family:inherit; font-size:.88rem;
}
.journey-edit-status{ font-size:.8rem; margin-left:10px; }

.journey-card-icons{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.journey-toggle-btn{
  font-family: var(--font-body); font-size:.78rem; font-weight:700;
  padding:5px 12px; border-radius: var(--radius-pill); border:1.5px solid var(--line);
  background:#fff; color: var(--ink-soft); cursor:pointer; transition: all .15s ease;
}
.journey-toggle-btn:hover{ border-color: var(--c-orange); color: var(--c-orange); }
.journey-toggle-btn.active{ background: var(--gradient-brand); border-color:transparent; color:#fff; }
.journey-expand{
  background: var(--warmlight); border-radius: var(--radius-sm); padding:12px 14px; margin-bottom:10px;
}
.journey-expand img{ width:100%; max-width:260px; border-radius:8px; display:block; }

.journey-pagination{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: 14px 4px 4px; flex-wrap:wrap;
}
.journey-pagination-info{ font-size:.8rem; color:var(--ink-soft); text-align:center; flex:1; }

@media (min-width: 860px){
  .journey-layout{ grid-template-columns: 1.1fr .9fr; align-items:start; }
  .journey-map{ height:520px; position:sticky; top:88px; }
}
.leaflet-popup-content-wrapper{ border-radius: var(--radius-md); box-shadow: var(--shadow-card); }

/* Schwebender Geist für "ausgesetzte" Objekte auf der Karte */
.ghost-marker-wrap{ animation: ghost-float 3.2s ease-in-out infinite; filter: drop-shadow(0 4px 6px rgba(0,0,0,.2)); }
@keyframes ghost-float{
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-6px) rotate(2deg); }
}
.popup-log h4{ margin:0 0 4px; font-family: var(--font-display); }
.popup-log .pill{ margin-bottom:8px; }

/* ---------- Generator page ---------- */
.generator-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:40px; align-items:start; }
.qr-preview{
  background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  padding: 32px; text-align:center; border:1px solid var(--line);
}
#qr-canvas-wrap{ display:flex; justify-content:center; margin: 18px 0; }
.print-card{
  border: 2px dashed var(--c-orange); border-radius: var(--radius-md); padding:20px; margin-top:18px;
  background: var(--warmlight); font-size:.85rem; color: var(--ink-soft); text-align:left;
}

/* ---------- Payment page ---------- */
.price-box{
  background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  padding: 32px; border: 1px solid var(--line); max-width: 460px; margin: 0 auto;
}
.price-box .amount{ font-family: var(--font-display); font-size:2.4rem; font-weight:800; background: var(--gradient-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
.notice-box{
  border-left: 4px solid var(--c-pink); background: #fdf3f7; padding: 16px 18px; border-radius: 10px;
  font-size:.92rem; margin-top: 20px;
}

/* ---------- Community rules ---------- */
.rules-list{ list-style:none; margin:0; padding:0; display:grid; gap:16px; }
.rules-list li{
  display:flex; gap:14px; background:#fff; border:1px solid var(--line); border-radius: var(--radius-md);
  padding: 18px 20px; box-shadow: var(--shadow-soft);
}
.rules-list .dot{
  flex-shrink:0; width:10px; height:10px; margin-top:6px; border-radius:50%; background: var(--gradient-brand);
}

/* ---------- Footer ---------- */
.footer{ background: var(--ink); color:#f4ede4; padding: 48px 0 28px; margin-top: 40px; }
.footer .container{ display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.footer h5{ font-family: var(--font-display); margin:0 0 12px; color:#fff; font-size:.95rem; }
.footer-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.footer-links a{ text-decoration:none; color:#cbbfae; font-size:.9rem; }
.footer-links a:hover{ color: var(--c-yellow); }
.footer-bottom{ text-align:center; font-size:.8rem; color:#8f8577; margin-top:32px; border-top:1px solid #4a4a4a; padding-top:20px; }
.social-row{ display:flex; gap:14px; margin-top:10px; }
.social-row a{
  width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.08); color:#fff; text-decoration:none; font-size:.85rem; transition: background .2s;
}
.social-row a:hover{ background: var(--gradient-brand); }

/* ---------- Install / offline banner ---------- */
.toast-banner{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  background:#fff; box-shadow: var(--shadow-card); border-radius: var(--radius-pill);
  padding: 12px 22px; display:flex; align-items:center; gap:12px; font-size:.88rem;
  border:1px solid var(--line); z-index:100;
}

@media (max-width: 860px){
  .hero-grid{ grid-template-columns: 1fr; }
  .cards-3{ grid-template-columns: 1fr; }
  .generator-grid{ grid-template-columns: 1fr; }
  .nav-links{ display:none; }
  .footer .container{ flex-direction:column; }

  /* Header auf schmalen Bildschirmen: Logo-Schriftzug ausblenden (Icon reicht),
     damit Nickname + Buttons nicht mit dem Logo-Text überlappen */
  .nav .container{ height:auto; min-height:72px; padding-top:10px; padding-bottom:10px; flex-wrap:wrap; row-gap:8px; }
  .nav .logo-text{ display:none; }
  #nav-nickname{ font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:120px; }
  #nav-cta{ max-width:140px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  .hero-ctas{ flex-direction:column; align-items:stretch; }
  .hero-ctas .btn{ width:100%; text-align:center; }
}