:root{
  --bg:#f4f1f0;--surface:#fbf9f8;--card:#ffffff;--text:#241f23;--muted:#746b70;
  --accent:#7b3153;--accent-deep:#542139;--accent-soft:#efe3e8;--border:#e5ddda;
  --sky:#6ba2e4;--stone:#a89790;--cat:#7b3153;
  --shadow:0 18px 50px rgba(70,29,50,.10);--shadow-soft:0 8px 28px rgba(70,29,50,.07);
}
[data-theme="dark"]{
  --bg:#171517;--surface:#211e20;--card:#282427;--text:#fbf7f8;--muted:#c9c0c4;
  --accent:#d37da3;--accent-deep:#f0aec8;--accent-soft:#3a2a32;--border:#463e42;
  --sky:#8cb9ef;--stone:#b6aaa5;--cat:#d37da3;
  --shadow:0 18px 50px rgba(0,0,0,.28);--shadow-soft:0 8px 28px rgba(0,0,0,.22);
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;color:var(--text);min-height:100vh;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 20% 0%,rgba(190,109,146,.12),transparent 34rem),
    linear-gradient(180deg,var(--bg),var(--surface));
}
button,input{font:inherit}
button{cursor:pointer}
.app{width:min(100%,780px);margin:auto;padding:14px 14px calc(34px + env(safe-area-inset-bottom))}
.hero{
  position:relative;height:330px;border-radius:30px;overflow:hidden;margin-bottom:14px;
  box-shadow:var(--shadow);isolation:isolate;background:#543342;
}
.hero img{width:100%;height:100%;object-fit:cover;object-position:center 43%;display:block}
.hero-shade{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,8,12,.04) 20%,rgba(24,10,17,.78) 100%);
}
.hero-content{position:absolute;left:24px;right:70px;bottom:24px;color:white}
.eyebrow{font-size:13px;text-transform:uppercase;letter-spacing:.18em;font-weight:700;opacity:.82}
.hero h1{font-family:Georgia,serif;font-size:54px;line-height:.95;margin:8px 0 9px;font-weight:500}
.hero p{margin:0;max-width:480px;font-size:17px;line-height:1.45;color:rgba(255,255,255,.9)}
.hero-button{
  position:absolute;right:17px;top:17px;width:44px;height:44px;border:1px solid rgba(255,255,255,.45);
  border-radius:50%;background:rgba(28,14,21,.28);backdrop-filter:blur(12px);color:white;font-size:19px
}
.tabs{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:6px;margin-bottom:24px;
  background:color-mix(in srgb,var(--card) 88%,transparent);border:1px solid var(--border);
  border-radius:18px;box-shadow:var(--shadow-soft);position:sticky;top:8px;z-index:5;
  backdrop-filter:blur(16px)
}
.tab{
  border:0;background:transparent;color:var(--muted);border-radius:13px;padding:11px 7px;font-weight:650
}
.tab span{margin-right:4px}
.tab.active{background:var(--accent);color:#fff;box-shadow:0 7px 18px rgba(109,40,73,.22)}
.intro{margin:6px 4px 18px}
.intro-kicker,.daily-head span{color:var(--accent);font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.intro h2{font-family:Georgia,serif;font-size:31px;font-weight:500;margin:6px 0}
.intro p,.daily-head p{color:var(--muted);margin:0;line-height:1.55}
.mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mode{
  position:relative;min-height:118px;display:flex;flex-direction:column;align-items:flex-start;gap:7px;
  padding:17px;border:1px solid var(--border);border-radius:22px;background:var(--card);
  box-shadow:var(--shadow-soft);transition:transform .18s,border-color .18s,box-shadow .18s;
}
.mode:hover{transform:translateY(-2px)}
.mode input{position:absolute;opacity:0}
.mode .mode-icon{
  display:grid;place-items:center;width:38px;height:38px;border-radius:13px;
  background:var(--accent-soft);color:var(--accent);font-size:21px
}
.mode strong{display:block;font-size:16px}
.mode small{display:block;color:var(--muted);font-size:13px;line-height:1.35;margin-top:2px}
.mode i{
  position:absolute;right:13px;top:13px;width:23px;height:23px;border-radius:50%;
  display:grid;place-items:center;background:var(--accent);color:white;font-style:normal;
  opacity:0;transform:scale(.7);transition:.18s
}
.mode:has(input:checked){border-color:var(--accent);box-shadow:0 12px 32px rgba(126,48,87,.16)}
.mode:has(input:checked) i{opacity:1;transform:scale(1)}
.settings-card,.heart-card,.closing-card{
  margin-top:14px;background:var(--card);border:1px solid var(--border);border-radius:22px;
  padding:18px;box-shadow:var(--shadow-soft)
}
.setting-head strong{display:block}
.setting-head span{display:block;color:var(--muted);font-size:13px;margin-top:3px}
.round-pills{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.round-pills input{position:absolute;opacity:0}
.round-pills span{
  display:flex;flex-direction:column;align-items:center;padding:10px 5px;border:1px solid var(--border);
  border-radius:15px;background:var(--surface);font-weight:800
}
.round-pills small{font-weight:500;color:var(--muted);font-size:11px;margin-top:2px}
.round-pills label:has(input:checked) span{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.erotic-box{border-top:1px solid var(--border);margin-top:17px;padding-top:17px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.chip input{position:absolute;opacity:0}
.chip span{display:block;padding:9px 14px;border:1px solid var(--border);border-radius:999px;background:var(--surface)}
.chip:has(input:checked) span{background:var(--accent);border-color:var(--accent);color:white}
.erotic-box p{font-size:12px;color:var(--muted);line-height:1.45;margin-bottom:0}
.primary,.secondary,.ghost-button,.text-button{
  border-radius:16px;padding:14px 16px;border:1px solid var(--border);font-weight:750;color:var(--text)
}
.primary{width:100%;background:linear-gradient(135deg,var(--accent),var(--accent-deep));border:0;color:white;box-shadow:0 13px 28px rgba(117,40,77,.22)}
.start-button{margin-top:14px;display:flex;justify-content:center;gap:12px;font-size:17px}
.start-button b,.next-button span{font-size:20px}
.secondary{width:100%;background:var(--card)}
.ghost-button{background:var(--card);padding:9px 12px}
.text-button{background:transparent;color:var(--accent);border:0;padding:4px 0}
.game-topbar{display:flex;justify-content:space-between;align-items:center;gap:10px}
.badge{
  display:inline-block;padding:7px 11px;border-radius:999px;background:var(--accent-soft);
  color:var(--accent);font-weight:800;font-size:13px
}
.small{font-size:13px;color:var(--muted);margin-top:5px}
.progressbar{height:7px;background:var(--border);border-radius:99px;overflow:hidden;margin:10px 0 15px}
.progressbar>div{height:100%;background:linear-gradient(90deg,var(--accent),#c9789e);transition:width .25s}
.question-card{
  position:relative;min-height:390px;display:flex;flex-direction:column;justify-content:center;text-align:center;
  background:linear-gradient(145deg,var(--card),var(--accent-soft));border:1px solid var(--border);
  border-radius:32px;padding:44px 26px 32px;box-shadow:var(--shadow);overflow:hidden;
  transition:transform .22s,opacity .22s
}
.question-card:before{
  content:"";position:absolute;width:190px;height:190px;border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);
  border-radius:50%;right:-78px;bottom:-82px
}
.question-card.swap{transform:translateX(-14px) rotate(-1deg);opacity:.12}
.question-orbit{
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;margin:0 auto 18px;
  background:var(--card);color:var(--accent);font-size:25px;box-shadow:var(--shadow-soft)
}
.turn-label{font-size:13px;font-weight:750;color:var(--accent);letter-spacing:.03em}
.question-card h2{font-family:Georgia,serif;font-size:31px;line-height:1.34;font-weight:500;margin:12px 0}
.question-card p{color:var(--muted);line-height:1.5;margin:5px auto 0;max-width:520px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.next-button{margin-top:10px}
.favorite.active{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.heart-card{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.heart-symbol{width:43px;height:43px;border-radius:14px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.heart-title{display:flex;justify-content:space-between;gap:10px}
.heart-title span{color:var(--muted);font-size:12px}
.heart-card p{color:var(--muted);font-size:13px;line-height:1.45;margin:6px 0}
.finish-card{text-align:center;padding:42px 20px 26px}
.finish-card>span{font-size:45px;color:var(--accent)}
.finish-card h2{font-family:Georgia,serif;font-size:31px;font-weight:500}
.finish-card p{color:var(--muted)}
.closing-card small{display:block;color:var(--accent);font-weight:800;text-transform:uppercase;letter-spacing:.12em}
.closing-card strong{display:block;font-family:Georgia,serif;font-size:22px;line-height:1.4;margin-top:7px}
.daily-head{text-align:center;margin:12px 0 18px}
.daily-card{min-height:420px}
.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.stat{background:var(--card);border:1px solid var(--border);border-radius:19px;padding:16px 8px;text-align:center;box-shadow:var(--shadow-soft)}
.stat strong{display:block;font-family:Georgia,serif;font-size:30px;color:var(--accent)}
.stat span{font-size:12px;color:var(--muted)}
#favoritesList>div{background:var(--card);border:1px solid var(--border);border-radius:19px;padding:16px;margin-bottom:10px;box-shadow:var(--shadow-soft)}
footer{text-align:center;color:var(--muted);font-size:12px;padding:26px 8px 8px}
.hidden{display:none!important}
@media(max-width:560px){
  .app{padding:10px 10px calc(28px + env(safe-area-inset-bottom))}
  .hero{height:310px;border-radius:25px}
  .hero-content{left:19px;right:57px;bottom:20px}
  .hero h1{font-size:48px}
  .hero p{font-size:15px}
  .tabs{top:5px}
  .tab{font-size:13px}
  .mode-grid{grid-template-columns:1fr}
  .mode{min-height:92px;display:grid;grid-template-columns:40px 1fr;align-items:center}
  .mode i{grid-column:auto}
  .question-card{min-height:360px;padding:38px 20px 28px}
  .question-card h2{font-size:27px}
}


/* V3: Farben aus dem gemeinsamen Foto – Burgunder, warmes Stein und Himmelblau */
.hero-content .eyebrow{color:#f0dce5}
.hero p{max-width:520px}
.mode-icon{transition:transform .18s ease,background .18s ease}
.mode:has(input:checked) .mode-icon{transform:scale(1.06)}
.mode-date .mode-icon,.mode-romance .mode-icon{background:#f2dfe8;color:#7b3153}
.mode-easy .mode-icon{background:#e8f1fb;color:#416e9f}
.mode-deep .mode-icon{background:#e8e5e2;color:#665952}
.mode-erotic .mode-icon{background:#f0dfdf;color:#8b3f4b}
.question-card{--category-color:var(--cat)}
.question-card .question-orbit{color:var(--category-color)}
.question-card .turn-label{color:var(--category-color)}
.badge{color:var(--category-color);background:color-mix(in srgb,var(--category-color) 13%,var(--card))}
.progressbar>div{background:linear-gradient(90deg,var(--category-color),color-mix(in srgb,var(--category-color) 55%,var(--sky)))}
.question-card:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 10% 10%,color-mix(in srgb,var(--category-color) 8%,transparent),transparent 36%);
}
.install-button{
  width:100%;margin-top:14px;padding:13px 16px;border:1px dashed var(--accent);
  border-radius:16px;background:transparent;color:var(--accent);font-weight:750
}
.start-button:disabled{opacity:.62;cursor:wait}
@media (min-width:900px){
  .app{width:min(100%,850px)}
  .hero{height:360px}
}


/* V4 – reduzierte Premium-Oberfläche */
.intro{margin-top:10px}
.intro h2{font-size:33px}
.intro p{max-width:420px}

.mode{
  min-height:112px;
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--card) 96%,transparent),var(--card));
}
.mode strong{font-size:17px}
.mode small{font-size:12.5px}
.mode:has(input:checked){
  transform:translateY(-1px);
  box-shadow:0 16px 36px rgba(97,33,63,.14);
}

.settings-card{
  background:color-mix(in srgb,var(--card) 96%,var(--accent-soft));
}
.start-button{
  min-height:56px;
  border-radius:18px;
  letter-spacing:.01em;
}
.start-button:hover{filter:brightness(1.03)}
.start-button:active{transform:translateY(1px)}

.question-card{
  min-height:410px;
  padding-top:48px;
}
.question-card h2{
  max-width:580px;
  margin-left:auto;
  margin-right:auto;
}
.question-helper{
  margin-top:16px!important;
  padding-top:14px;
  border-top:1px solid color-mix(in srgb,var(--category-color) 16%,transparent);
  font-size:13px;
}
.question-helper.hidden{display:none!important}

.install-area{margin-top:18px}
.install-button{
  width:100%;
  min-height:48px;
  border-style:solid;
  background:var(--card);
  box-shadow:var(--shadow-soft);
}
.ios-install-hint{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:18px;
  background:var(--card);
  box-shadow:var(--shadow-soft);
}
.ios-install-hint .ios-icon{
  flex:0 0 auto;
  width:38px;height:38px;
  border-radius:12px;
  display:grid;place-items:center;
  background:var(--accent-soft);
  color:var(--accent);
  font-size:19px;
}
.ios-install-hint strong{display:block;font-size:14px}
.ios-install-hint small{display:block;color:var(--muted);font-size:12px;margin-top:2px}

footer{display:none!important}

@media(max-width:560px){
  .hero{height:300px}
  .intro h2{font-size:29px}
  .mode{min-height:88px}
  .question-card{min-height:370px}
}


/* V5 – professioneller, persönlicher und kompakter */
.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:4px 4px 12px;
}
.section-head span{
  color:var(--accent);
  font-size:13px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.hero{
  height:310px;
  margin-bottom:10px;
}
.hero-content{bottom:20px}
.hero h1{font-size:50px}
.hero p{font-size:15px}

.tabs{
  margin-bottom:16px;
  padding:5px;
  border-radius:17px;
}
.tab{
  min-height:42px;
  padding:9px 8px;
  font-size:14px;
}

.mode-grid{gap:10px}
.mode{
  min-height:104px;
  padding:15px;
  border-radius:20px;
}
.mode .mode-icon{
  width:36px;
  height:36px;
  border-radius:12px;
  font-size:19px;
}
.mode .mode-icon.erotic-heart{
  font-size:20px;
  line-height:1;
  background:#f4e1e5;
  color:#9b4554;
}
.mode strong{font-size:16px}
.mode small{
  font-size:12px;
  line-height:1.3;
  margin-top:1px;
}
.mode i{
  width:21px;
  height:21px;
  font-size:12px;
}

.settings-card{
  margin-top:12px;
  padding:16px;
  border-radius:20px;
}
.setting-head strong{font-size:15px}
.setting-head span{font-size:12px}
.round-pills{
  margin-top:12px;
  gap:7px;
}
.round-pills span{
  padding:9px 4px;
  border-radius:13px;
}
.round-pills small{font-size:10px}

.start-button{
  margin-top:12px;
  min-height:54px;
  border-radius:17px;
  font-size:16px;
  box-shadow:0 12px 26px rgba(117,40,77,.19);
}
.start-button b{font-size:18px}

.install-area{
  max-width:500px;
  margin:12px auto 0;
}
.install-button{
  min-height:42px;
  border-style:dashed;
  box-shadow:none;
  font-size:13px;
  color:var(--muted);
}
.ios-install-hint{
  padding:11px 13px;
  border-radius:16px;
  box-shadow:none;
}
.ios-install-hint strong{font-size:13px}
.ios-install-hint small{font-size:11px}

@media(min-width:760px){
  .mode:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 28px rgba(70,29,50,.09);
  }
}

@media(max-width:560px){
  .hero{
    height:285px;
    border-radius:24px;
  }
  .hero h1{font-size:45px}
  .tabs{margin-bottom:14px}
  .tab{font-size:12.5px}
  .mode-grid{gap:8px}
  .mode{
    min-height:78px;
    padding:12px 13px;
    grid-template-columns:38px 1fr;
  }
  .mode strong{font-size:15px}
  .mode small{font-size:11.5px}
  .settings-card{padding:14px}
  .start-button{min-height:52px}
}


/* V7 – persönliche Premium-App */
.hero img{
  transform:scale(1);
  animation:heroKenBurns 10s ease-out forwards;
  will-change:transform;
}
.hero-content .eyebrow{
  opacity:0;
  transform:translateY(8px);
  animation:heroFadeUp .55s ease-out .15s forwards;
}
.hero h1{
  opacity:0;
  transform:translateY(10px);
  animation:heroTitleIn .8s cubic-bezier(.22,.61,.36,1) .28s forwards;
}
.hero p{
  opacity:0;
  transform:translateY(8px);
  animation:heroFadeUp .65s ease-out .62s forwards;
  line-height:1.38;
  max-width:440px;
}
.hero-shade{
  background:
    linear-gradient(180deg,rgba(13,9,11,.03) 18%,rgba(24,14,19,.18) 52%,rgba(25,16,21,.72) 100%);
}

@keyframes heroKenBurns{
  from{transform:scale(1)}
  to{transform:scale(1.045)}
}
@keyframes heroTitleIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes heroFadeUp{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

@media (prefers-reduced-motion:reduce){
  .hero img,.hero-content .eyebrow,.hero h1,.hero p{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
  }
}


/* V8 – Markenidentität E4 und Premium-Intro */
body.splash-lock{overflow:hidden}
.splash{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:#6a2343;
  color:#f7efe8;
  transition:opacity .45s ease,visibility .45s ease;
}
.splash.hide{
  opacity:0;
  visibility:hidden;
}
.splash-logo{
  width:112px;
  height:112px;
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 18px 45px rgba(0,0,0,.24);
  opacity:0;
  transform:scale(.92);
  animation:splashLogoIn .55s ease .08s forwards;
}
.splash-logo img{width:100%;height:100%;display:block}
.splash-word{
  margin-top:22px;
  font-family:Georgia,serif;
  font-size:44px;
  opacity:0;
  transform:translateY(8px);
  animation:splashTextIn .55s ease .42s forwards;
}
.splash-names{
  margin-top:7px;
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  opacity:0;
  animation:splashTextIn .5s ease .68s forwards;
}
.app-enter{
  opacity:0;
  transform:translateY(6px);
  animation:appEnter .55s ease 1.55s forwards;
}
@keyframes splashLogoIn{
  to{opacity:1;transform:scale(1)}
}
@keyframes splashTextIn{
  to{opacity:1;transform:translateY(0)}
}
@keyframes appEnter{
  to{opacity:1;transform:translateY(0)}
}

.hero{
  border:1px solid color-mix(in srgb,var(--accent) 14%,transparent);
}
.hero-button{
  border-color:rgba(255,255,255,.5);
}
.tabs{
  background:color-mix(in srgb,var(--card) 92%,transparent);
  box-shadow:0 12px 28px rgba(62,28,45,.08);
}
.tab.active{
  box-shadow:0 8px 20px rgba(105,35,67,.20);
}
.section-head span{
  letter-spacing:.16em;
}
.mode{
  overflow:hidden;
}
.mode:before{
  content:"";
  position:absolute;
  inset:auto -25px -35px auto;
  width:90px;height:90px;
  border-radius:50%;
  background:color-mix(in srgb,var(--accent) 4%,transparent);
}
.mode:has(input:checked){
  background:linear-gradient(145deg,var(--card),color-mix(in srgb,var(--accent-soft) 62%,var(--card)));
}
.start-button{
  background:linear-gradient(135deg,#7b3153,#5c203e);
}
.question-card{
  background:
    linear-gradient(145deg,var(--card),color-mix(in srgb,var(--accent-soft) 72%,var(--card)));
}
.question-orbit{
  border:1px solid color-mix(in srgb,var(--category-color) 14%,transparent);
}
@media (prefers-reduced-motion:reduce){
  .splash-logo,.splash-word,.splash-names,.app-enter{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
  }
}


/* V9 – ruhige, klassische Markenführung und optimierte Usability */
:root{
  --accent:#6f2b4d;
  --accent-deep:#4f1d36;
  --accent-soft:#eee2e7;
}
[data-theme="dark"]{
  --accent:#d180a4;
  --accent-deep:#efb0c9;
  --accent-soft:#392832;
}

/* Der eigene Splash bleibt bewusst kurz und erscheint nur einmal pro Sitzung. */
.splash{
  background:linear-gradient(180deg,#712d50,#531c39);
}
.splash-logo{
  width:104px;
  height:104px;
  border-radius:24px;
  box-shadow:0 16px 38px rgba(0,0,0,.20);
}
.splash-word{
  margin-top:18px;
  font-family:"Iowan Old Style","Baskerville","Times New Roman",serif;
  font-size:40px;
  font-style:italic;
}
.splash-names{
  margin-top:5px;
  letter-spacing:.17em;
}
.app-enter{
  animation-delay:.82s;
}

/* Hero */
.hero{
  height:315px;
}
.hero h1{
  font-family:"Iowan Old Style","Baskerville","Times New Roman",serif;
  font-style:italic;
  letter-spacing:-.025em;
}
.hero p{
  max-width:470px;
}

/* Navigation: vertraute Begriffe, bessere Touch-Ziele */
.tabs{
  margin-bottom:14px;
}
.tab{
  min-height:44px;
}

/* Keine redundante Zwischenüberschrift – Modi starten sofort */
.mode-grid{
  margin-top:2px;
  gap:10px;
}
.mode{
  min-height:102px;
  padding:15px;
}
.mode strong{
  letter-spacing:-.01em;
}
.mode small{
  max-width:190px;
}

/* Emoji im Erotikmodus optisch zentrieren */
.mode .mode-icon.erotic-heart{
  font-size:19px;
  background:#f3e3e7;
}

/* Zeitwahl als ruhiger Funktionsbereich */
.settings-card{
  margin-top:12px;
  box-shadow:0 8px 22px rgba(62,28,45,.055);
}
.setting-head span{
  color:var(--muted);
}

/* Primäre Aktion klar und nicht überinszeniert */
.start-button{
  min-height:56px;
  box-shadow:0 10px 24px rgba(93,30,62,.18);
}

/* Frage im Mittelpunkt */
.question-card{
  min-height:395px;
  box-shadow:0 14px 38px rgba(62,28,45,.085);
}
.question-card h2{
  font-family:"Iowan Old Style","Baskerville","Times New Roman",serif;
  letter-spacing:-.015em;
}

/* Weniger technische Optik bei der Herzkarte */
.heart-card{
  box-shadow:0 7px 20px rgba(62,28,45,.05);
}

/* Favoritenkarten ruhiger */
#favoritesList>div p{
  margin-bottom:0;
  line-height:1.45;
}

/* Installationshinweis ist unterstützend, nicht Teil des Hauptflows */
.install-area{
  margin-bottom:8px;
}

@media(max-width:560px){
  .hero{height:292px}
  .hero-content{right:62px}
  .hero h1{font-size:47px}
  .hero p{font-size:14.5px}
  .mode{min-height:82px}
  .mode small{max-width:none}
  .question-card{min-height:365px}
}

/* Respektiert reduzierte Bewegungen. */
@media(prefers-reduced-motion:reduce){
  .app-enter{animation:none!important;opacity:1!important;transform:none!important}
}


/* V13 – Mobiler Hero wieder mit Text IM Bild, aber klarer platziert */
@media(max-width:560px){
  .hero{
    height:312px;
    overflow:hidden;
  }

  .hero img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 38%;
  }

  .hero-shade{
    inset:0;
    height:auto;
    background:linear-gradient(
      180deg,
      rgba(12,8,10,.06) 8%,
      rgba(20,12,16,.08) 28%,
      rgba(26,16,21,.24) 62%,
      rgba(28,17,22,.64) 100%
    );
  }

  .hero-content{
    position:absolute;
    inset:0;
    padding:22px 20px 22px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    background:none;
  }

  .hero-content .eyebrow{
    position:absolute;
    top:22px;
    left:20px;
    margin:0;
    font-size:11px;
    letter-spacing:.19em;
    text-transform:uppercase;
    text-shadow:0 1px 10px rgba(0,0,0,.22);
  }

  .hero h1{
    margin:0 0 10px;
    font-size:38px;
    line-height:.98;
    text-shadow:0 2px 16px rgba(0,0,0,.24);
  }

  .hero p{
    margin:0;
    font-size:13.5px;
    line-height:1.32;
    max-width:265px;
    text-shadow:0 2px 14px rgba(0,0,0,.22);
  }

  .hero-button{
    top:14px;
    right:14px;
  }
}


/* V15 – bessere Lesbarkeit von „CARINA & MARTIN“ */
.hero-content .eyebrow{
  color:#fff;
  font-weight:800;
  text-shadow:0 2px 10px rgba(0,0,0,.45);
  background:rgba(40,22,31,.42);
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  padding:7px 11px 6px;
  width:max-content;
  max-width:calc(100% - 76px);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}

@media(max-width:560px){
  .hero-content .eyebrow{
    top:18px;
    left:18px;
    font-size:10.5px;
    letter-spacing:.17em;
    padding:6px 10px 5px;
    background:rgba(34,18,27,.50);
  }
}