@import url("brand-pets-base.css");

/* Hero refinements layered over the preserved pet/brand styles.
   Source of truth: current iOS DashboardView + FocusDashboardComponents. */

.hero-visual{overflow:visible;isolation:isolate}

/* Real transparent Wuffi cutout for the hero. */
.hero-visual::after{
  left:-92px;
  bottom:24px;
  width:clamp(300px,26vw,410px);
  background-image:url("assets/pets/wuffi-cutout.webp?v=20260817-1");
  background-size:contain;
  background-position:center bottom;
  background-repeat:no-repeat;
  mix-blend-mode:normal;
  filter:drop-shadow(0 30px 26px rgba(0,0,0,.30));
  opacity:1;
  transform:translateZ(0);
  pointer-events:none;
}
.hero-visual::before{left:-52px;bottom:18px;width:350px;height:66px;opacity:.72}

/* The live app's date label has no hard-coded weekday badge. */
.hero-visual .focus-meta span:first-child::after{content:"HEUTE · 17. AUGUST"}
.hero-visual .focus-meta .pill{display:none}

/* Current home hierarchy: snapshot -> companion -> Heute zuerst -> primary action -> Danach. */
.hero-visual .section-label{display:none}
.hero-visual .deadline-list{gap:7px;overflow:visible;margin-top:13px}

.hero-visual .deadline-row:first-child{
  position:relative;
  display:block;
  min-height:154px;
  padding:38px 14px 58px;
  border:0;
  border-radius:20px;
  background:linear-gradient(145deg,#0a4b3b,#063028);
  box-shadow:0 14px 30px rgba(6,48,40,.20);
  color:#f8f6ed;
}
.hero-visual .deadline-row:first-child::before{
  content:"⚡  HEUTE ZUERST";
  position:absolute;
  left:14px;
  top:13px;
  color:#d1ef6b;
  font-size:8px;
  font-weight:900;
  letter-spacing:.08em;
}
.hero-visual .deadline-row:first-child::after{
  content:"Als erledigt markieren";
  position:absolute;
  left:12px;
  right:12px;
  bottom:11px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:13px;
  background:#d1ef6b;
  color:#063028;
  font-size:9px;
  font-weight:850;
  letter-spacing:.01em;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
.hero-visual .deadline-row:first-child .row-icon{display:none}
.hero-visual .deadline-row:first-child>div{display:grid;gap:5px}
.hero-visual .deadline-row:first-child strong::after{
  content:"Stromvertrag";
  font-size:14px;
  line-height:1.15;
  color:#f8f6ed;
  letter-spacing:-.02em;
}
.hero-visual .deadline-row:first-child small::after{
  content:"Kündigung vorbereiten · Bis 03.09.2026";
  font-size:9px;
  line-height:1.35;
  color:rgba(248,246,237,.72);
}
.hero-visual .deadline-row:first-child .days{display:none}

.hero-visual .deadline-row:nth-child(2){
  position:relative;
  margin-top:32px;
  min-height:58px;
  padding:10px;
  border-radius:15px;
  background:#fffdf8;
  border-color:#e3ded3;
  box-shadow:0 3px 12px rgba(6,48,40,.025);
  overflow:visible;
}
.hero-visual .deadline-row:nth-child(2)::before{
  content:"Danach";
  position:absolute;
  left:2px;
  top:-24px;
  color:#15241f;
  font-size:11px;
  font-weight:850;
  letter-spacing:-.01em;
}
.hero-visual .deadline-row:nth-child(2)::after{
  content:"Alle";
  position:absolute;
  right:2px;
  top:-23px;
  color:#0b5c43;
  font-size:9px;
  font-weight:800;
}
.hero-visual .deadline-row:nth-child(2) .days{
  font-size:0;
  background:#e3f2df;
  color:#236a43;
}
.hero-visual .deadline-row:nth-child(2) .days::after{content:"59 T";font-size:9px;font-weight:900}
.hero-visual .deadline-row:nth-child(n+3){display:none}

/* The old website-only wallet bar no longer exists on the current home screen. */
.hero-visual .phone-shell{min-height:680px;padding-bottom:20px}
.hero-visual .phone-shell::after{content:none;display:none}

@media(max-width:1040px){
  .hero-visual::after{left:-8px;width:315px;bottom:34px}
}
@media(max-width:760px){
  .hero-visual::after{left:calc(50% - 268px);width:260px;bottom:20px}
}
@media(max-width:640px){
  .hero-visual::after{left:calc(50% - 234px);width:220px;bottom:20px}
}
@media(max-width:390px){
  .hero-visual::after{left:-28px;width:198px}
}