:root{
  --brown:#886762; --dpink:#cc9c9a; --blue:#546581; --dbrown:#2b201a; --pink:#fab5b8;
  --text-on-dark:#ffe8e9; --shadow-1:rgba(0,0,0,.2);
}
*{box-sizing:border-box}
html,body{height:100%}

body{
  font-family:"Yatra One",sans-serif;
  background:var(--blue); color:var(--pink);
  text-align:center; margin:0; padding:0; line-height:1.6;
  min-height:100vh; display:flex; flex-direction:column;
}

.container{width:90%; max-width:1200px; margin:auto; padding:20px;}

@keyframes pulseGlow{
  0%{box-shadow:0 0 10px #65748e,0 0 20px #65748e,0 0 30px #65748e}
  50%{box-shadow:0 0 15px var(--pink),0 0 25px var(--pink),0 0 35px var(--pink)}
  100%{box-shadow:0 0 20px #65748e,0 0 30px #65748e,0 0 40px #65748e}
}
@keyframes pulseGlow2{
  0%{box-shadow:0 0 10px #65748e,0 0 20px #65748e,0 0 30px #65748e}
  100%{box-shadow:0 0 20px #65748e,0 0 30px #65748e,0 0 40px #65748e}
}

/* gemeinsames Card-Pattern für Sections */
.section-card{
  background:rgba(43,32,26,.3);
  padding:20px; margin:20px 0; border-radius:10px; border:2px solid #000;
  box-shadow:0 4px 8px var(--shadow-1);
}
.section-card:hover{
  border:3px solid rgba(46,55,70,.7);
  box-shadow:0 0 10px var(--pink),0 4px 8px var(--shadow-1);
  animation:pulseGlow 1.5s infinite alternate ease-in-out;
}

/* Kleines Utility falls du Spacer-Bilder ersetzt */
.spacer{display:block; width:100%; height:1px}

/* ===== Section Spacer (zwischen Ebenen) ===== */
.selling-spacer-row{
  display: flex;
  justify-content: center;
  margin: 20px 0;                  /* gleich wie deine Sections */
}

.selling-spacer-img{
  width: clamp(550px, 340vw, 1150px); /* gleiche Max-Breite wie .sellbox */
  height: auto;
  display: block;
  border-radius: 10px;              /* matcht deine Cards */
   /* dezenter Schatten wie Sections */
  /* Optional: leicht transparent, falls gewünscht
     opacity: .85;
  */
}

/* Wenn du lieber die ABOUT-Breite matchen willst (max 950px), 
   ändere einfach die obere Max-Breite:
   .selling-spacer-img { width: clamp(300px, 90vw, 950px); }
*/
/* ===== Mobile Tweaks global ===== */
@media (max-width: 768px){
  html { font-size: 15px; }            /* etwas größere Basis für Lesbarkeit */
  .container { width: 94%; padding: 16px; }
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.25rem; }
}

/* Spacer-Bild zwischen Sections */
.selling-spacer-row{
  display:flex; justify-content:center; align-items:center;
  margin: 16px 0;
}
.selling-spacer-img{
  width: min(950px, 92vw);
  height: auto;
  border-radius: 6px;
  opacity: .85;
}
@media (max-width: 768px){
  .selling-spacer-row{ margin: 12px 0; }
  .selling-spacer-img{ width: 94vw; }
}

.float-start{
  position: fixed;
  left: 12px;
  top: 74px; /* wird per JS direkt nach Seitenstart korrekt gesetzt */
  width: 64px; height: 64px;
  border-radius: 999px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-decoration: none;
  color: #ffe8e9;
  background: linear-gradient(180deg,#886762 0%, #2b201a 100%);
  border: 2px solid rgba(0,0,0,.6);
  box-shadow:
    0 6px 18px rgba(0,0,0,.35),
    0 0 22px rgba(84,101,129,.35),
    0 0 44px rgba(204,156,154,.25);
  z-index: 9998;
  transition: transform .15s ease, box-shadow .2s ease, filter .18s ease;
}
.float-start .fs-label{
  font-size: 10px;
  line-height: 1;
  letter-spacing: .2px;
  user-select: none;
}
.float-start i{
  font-size: 18px;
  line-height: 1;
}
.float-start:hover{
  transform: translateY(-1px);
  box-shadow:
    0 10px 22px rgba(0,0,0,.38),
    0 0 28px rgba(250,181,184,.35),
    0 0 36px rgba(84,101,129,.28);
  filter: saturate(1.05);
}
@media (max-width: 560px){
  .float-start{ left: 8px; width: 56px; height: 56px; }
  .float-start .fs-label{ font-size: 9px; }
  .float-start i{ font-size: 16px; }
}