/* =========================================================
   HAEUSER-KOMPASS
   Aus kompass-haeuser.html geloest. JEDE Regel ist auf #kompass
   beschraenkt, auch die in den Media Queries. Ohne das haetten
   die Handy-Regeln nur Klassen und wuerden von den Desktop-Regeln
   mit ID ueberstimmt, unabhaengig von der Reihenfolge.
   Die globalen Regeln :root, * und html,body sind entfernt,
   die Farbvariablen kommen aus style.css.
   ========================================================= */

#kompass{
  font-family:'Poppins',system-ui,sans-serif;
  background:var(--washi);color:var(--dark);
  position:relative;overflow:hidden;overflow:clip;
  border-radius:8px;
  min-height:660px;
}
#kompass .eyebrow{font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;font-weight:600;color:var(--bambus);
  display:inline-flex;align-items:center;gap:12px}
#kompass .eyebrow::before{content:"";width:26px;height:1px;background:var(--hinoki);flex:none}
#kompass button{font-family:inherit;cursor:pointer}
#kompass .screen{display:none;animation:fade .5s ease}
#kompass .screen.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}/* ---------- INTRO ---------- */



#kompass .intro-wrap{
  min-height:660px;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(120% 90% at 80% -10%, rgba(199,168,124,.35), transparent 55%),
    radial-gradient(90% 80% at 8% 110%, rgba(164,174,164,.30), transparent 60%),
    var(--washi);
  position:relative;padding:40px;
}
#kompass .intro-inner{max-width:660px;text-align:center;position:relative;z-index:2}
#kompass .intro-inner .eyebrow{margin-bottom:18px}
#kompass .intro-title{font-weight:400;font-size:clamp(32px,5vw,60px);line-height:1.08;margin:0 0 18px;letter-spacing:-.01em}
#kompass .intro-title em{font-style:normal;color:var(--hinoki)}
#kompass .intro-sub{font-size:15.5px;line-height:1.6;color:#4a524f;max-width:48ch;margin:0 auto 30px}
#kompass .btn-primary{padding:13px 26px;border-radius:999px;border:1px solid var(--dark);
  background:var(--dark);color:var(--washi);font-size:14px;font-weight:500;letter-spacing:.02em;
  transition:transform .25s ease,background .25s ease;display:inline-flex;align-items:center;gap:10px}
#kompass .btn-primary:hover{background:var(--dark-2);transform:translateY(-2px)}
#kompass .btn-primary svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}
#kompass .intro-foot{margin-top:22px;font-size:12px;color:var(--kyoto);letter-spacing:.02em}
#kompass .compass-deco{position:absolute;inset:0;pointer-events:none;opacity:.5;z-index:1}
#kompass .needle-spin{transform-origin:650px 120px;animation:needle 9s cubic-bezier(.5,0,.4,1) infinite}
@keyframes needle{
  0%{transform:rotate(0deg)} 18%{transform:rotate(122deg)} 34%{transform:rotate(96deg)}
  52%{transform:rotate(248deg)} 70%{transform:rotate(214deg)} 100%{transform:rotate(360deg)}
}/* ---------- QUIZ ---------- */



#kompass .quiz-wrap{min-height:660px;display:flex;flex-direction:column;padding:34px 40px 40px}
#kompass .quiz-top{display:flex;align-items:center;gap:18px;margin-bottom:8px}
#kompass .progress{flex:1;height:3px;background:var(--line);border-radius:2px;overflow:hidden}
#kompass .progress i{display:block;height:100%;background:var(--hinoki);width:0;transition:width .5s ease}
#kompass .q-count{font-size:11px;letter-spacing:.2em;color:var(--kyoto);font-weight:600}
#kompass .quiz-body{flex:1;display:flex;flex-direction:column;justify-content:center;max-width:1000px;margin:0 auto;width:100%}
#kompass .q-head{text-align:center;margin-bottom:34px}
#kompass .q-kicker{font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--bambus);font-weight:600;margin-bottom:12px}
#kompass .q-title{font-weight:300;font-size:clamp(27px,3.6vw,42px);margin:0;line-height:1.1;letter-spacing:-.01em}
#kompass .q-sub{color:var(--bambus);font-size:14px;margin-top:12px}
#kompass .options{display:grid;gap:16px}
#kompass .options.cols-2{grid-template-columns:repeat(2,1fr)}
#kompass .options.cols-3{grid-template-columns:repeat(3,1fr)}
#kompass .options.cols-4{grid-template-columns:repeat(4,1fr)}
#kompass .opt{background:#fbf9f4;border:1px solid var(--line);border-radius:6px;padding:22px 20px;text-align:left;
  transition:transform .18s,border-color .18s,box-shadow .18s;display:flex;flex-direction:column;gap:12px;min-height:150px}
#kompass .opt:hover{transform:translateY(-4px);border-color:var(--hinoki);box-shadow:0 14px 30px -18px rgba(37,47,46,.45)}
#kompass .opt:focus-visible{outline:2px solid var(--dark);outline-offset:2px}
#kompass .opt.sel{border-color:var(--dark);box-shadow:0 0 0 2px var(--dark) inset}
#kompass .opt .ic{width:34px;height:34px;stroke:var(--bambus);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#kompass .opt .ol{font-weight:500;font-size:16px}
#kompass .opt .od{font-size:12.5px;color:var(--bambus);line-height:1.55}
#kompass .quiz-nav{display:flex;justify-content:space-between;align-items:center;margin-top:30px;max-width:1000px;margin-left:auto;margin-right:auto;width:100%}
#kompass .btn-back{background:none;border:none;color:var(--kyoto);font-size:13px;font-weight:500;display:flex;align-items:center;gap:7px;padding:8px 4px;opacity:0;pointer-events:none;transition:opacity .2s}
#kompass .btn-back.on{opacity:1;pointer-events:auto}
#kompass .btn-back:hover{color:var(--dark)}
#kompass .btn-back svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}
#kompass .hint-sel{font-size:12px;color:var(--kyoto)}/* ---------- LADEBILD: das Licht geht an ---------- */



#kompass .load-wrap{min-height:660px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  position:relative;overflow:hidden;background:#0d1430}
#kompass .load-scene{position:absolute;inset:0;width:100%;height:100%;display:block}
#kompass .load-cap{position:relative;z-index:5;text-align:center;color:#F4F1EA;margin-top:auto;margin-bottom:56px;
  text-shadow:0 2px 12px rgba(0,0,0,.75)}
#kompass .load-cap .eyebrow{color:#F0DEC4;margin-bottom:12px}
#kompass .load-cap h3, .load-cap h2{font-weight:300;font-size:27px;letter-spacing:-.01em;margin:0 0 18px}
#kompass .load-dots{display:flex;gap:8px;justify-content:center}
#kompass .load-dots i{width:8px;height:8px;border-radius:50%;background:#E4D3BC;opacity:.4;animation:ld 1.2s infinite}
#kompass .load-dots i:nth-child(2){animation-delay:.2s}#kompass .load-dots i:nth-child(3){animation-delay:.4s}
@keyframes ld{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-5px)}}
@keyframes winOn{0%{opacity:0}70%{opacity:1}100%{opacity:.92}}
@keyframes starsIn{0%{opacity:0}100%{opacity:.8}}
@keyframes moonRise{0%{transform:translateY(150px);opacity:0}45%{opacity:1}100%{transform:translateY(0);opacity:1}}
@keyframes skyIn{0%{opacity:0}100%{opacity:1}}
@keyframes shimmer{0%,100%{opacity:.45}50%{opacity:.9}}
@keyframes ripple{0%,100%{transform:translateX(-8px)}50%{transform:translateX(8px)}}
@keyframes birdGlide{0%{transform:translate(-260px,40px) scale(.8);opacity:0}
  16%{opacity:.55}78%{opacity:.55}100%{transform:translate(1160px,-30px) scale(1);opacity:0}}
@keyframes glowPulse{0%,100%{opacity:.28}50%{opacity:.5}}/* ---------- ERGEBNIS ---------- */



#kompass .res-wrap{min-height:660px;display:flex;flex-direction:column}
#kompass .res-head{display:flex;justify-content:space-between;align-items:flex-end;padding:26px 34px 20px;gap:20px;flex-wrap:wrap;
  border-bottom:1px solid var(--line)}
#kompass .res-head .eyebrow{color:var(--bambus)}
#kompass .res-title{font-weight:300;font-size:clamp(26px,3.4vw,40px);margin:8px 0 0;line-height:1.1;letter-spacing:-.01em}
#kompass .res-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
#kompass .tag{font-size:11px;letter-spacing:.05em;background:var(--sand-2);border:1px solid var(--line);color:var(--bambus);
  padding:5px 11px;border-radius:999px;font-weight:500}
#kompass .tag.seen{background:rgba(164,174,164,.26);border-color:var(--matcha);color:#4a5850}
#kompass .tag.seen::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--matcha);
  display:inline-block;margin-right:7px;vertical-align:1px}
#kompass .btn-restart{background:none;border:1px solid var(--line);border-radius:999px;padding:10px 18px;font-size:12.5px;
  color:var(--bambus);font-weight:500;display:flex;align-items:center;gap:8px;transition:.2s;white-space:nowrap}
#kompass .btn-restart:hover{border-color:var(--dark);color:var(--dark)}
#kompass .btn-restart svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8}/* Gefühl aus Frage fünf */



#kompass .mood{margin:20px 34px 0;border:1px solid var(--line);border-radius:8px;padding:15px 20px;
  display:flex;align-items:baseline;gap:8px 20px;flex-wrap:wrap;
  background:
    radial-gradient(120% 160% at 10% 0%, rgba(199,168,124,.34), transparent 62%),
    radial-gradient(90% 140% at 94% 100%, rgba(164,174,164,.30), transparent 58%),
    #fbf9f4}
#kompass .mood-lab{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--bambus);font-weight:600}
#kompass .mood-word{font-size:25px;font-weight:300;letter-spacing:-.01em;line-height:1.1}
#kompass .mood p{margin:0;font-size:13.5px;color:#4a524f;line-height:1.55;flex:1;min-width:230px}

#kompass .stat-row{display:flex;gap:0;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#fbf9f4;
  margin:16px 34px 0}
#kompass .stat{flex:1;padding:12px 14px;text-align:center;border-right:1px solid var(--line);min-width:0}
#kompass .stat:last-child{border-right:none}
#kompass .stat b{display:block;font-size:23px;color:var(--dark);line-height:1.15;font-weight:300;letter-spacing:-.01em}
#kompass .stat.txt b{font-size:14px;font-weight:600;line-height:1.3;padding:3px 0}
#kompass .stat span{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--kyoto)}

#kompass .res-grid{flex:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:0 clamp(28px,3.4vw,54px);padding:24px 34px 10px}/* Linke Spalte */



#kompass .day-col{min-width:0}
#kompass .wowline{border-left:2px solid var(--hinoki);padding:3px 0 3px 15px;margin:0 0 22px;
  font-size:16.5px;line-height:1.5;font-weight:300;color:var(--dark)}
#kompass .day-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:16px}
#kompass .day-h h3{font-size:19px;font-weight:400;margin:0;letter-spacing:-.01em}
#kompass .day-h span{font-size:12px;color:var(--kyoto)}
#kompass .timeline{position:relative;padding-left:24px}
#kompass .timeline:before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:2px;background:var(--line)}
#kompass .day{position:relative;margin-bottom:18px}
#kompass .day:before{content:"";position:absolute;left:-24px;top:5px;width:12px;height:12px;border-radius:50%;
  background:var(--washi);border:2px solid var(--hinoki)}
#kompass .day.sun:before{background:var(--terra);border-color:var(--terra)}
#kompass .day-when{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--kyoto);font-weight:600}
#kompass .day-place{font-size:18px;font-weight:400;margin:2px 0 4px;line-height:1.25}
#kompass .day-txt{font-size:13px;color:var(--bambus);line-height:1.58}

#kompass .near{border-top:1px solid var(--line);margin-top:6px;padding-top:16px}
#kompass .near h5, .near h3{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--bambus);font-weight:600;margin:0 0 11px}
#kompass .near ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
#kompass .near li{font-size:12.5px;color:var(--bambus);border:1px solid var(--line);border-radius:999px;
  padding:5px 12px;background:#fbf9f4}/* Rechte Spalte */



#kompass .side-col{min-width:0}
#kompass .hotel-tip{border:1px solid var(--line);border-left:2px solid var(--hinoki);border-radius:6px;
  padding:0;overflow:hidden;background:var(--washi);margin-bottom:18px}
#kompass .hotel-tip .th{display:flex;align-items:flex-start;gap:8px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bambus);font-weight:600;padding:14px 16px 12px;line-height:1.5}
#kompass .hotel-tip .th svg{width:15px;height:15px;stroke:var(--terra);fill:none;stroke-width:1.6;flex:none}
#kompass .hotel-media{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;cursor:pointer;
  background:linear-gradient(135deg,var(--hinoki),var(--tatami))}
#kompass .hotel-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#kompass .hotel-media .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:rgba(244,241,234,.9);font-size:11px;letter-spacing:.2em;text-transform:uppercase;pointer-events:none}
#kompass .hotel-info{min-width:0;padding:14px 16px 16px}
#kompass .hotel-tip h4, #kompass .hotel-tip h3{font-size:21px;margin:0 0 3px;font-weight:400;letter-spacing:-.01em}
#kompass .hotel-tip .hmeta{font-size:11.5px;color:var(--kyoto);letter-spacing:.05em;margin-bottom:8px}
#kompass .hotel-tip .hmeta .luxe{font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--bambus);
  border:1px solid var(--hinoki);border-radius:999px;padding:1px 6px;margin-left:3px}
#kompass .stars{display:inline-flex;align-items:center;gap:1px;vertical-align:-2px;margin-right:2px}
#kompass .stars .star{width:14px;height:14px;display:block}
#kompass .hotel-tip p{font-size:13px;color:var(--bambus);line-height:1.55;margin:0 0 12px;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
#kompass .hotel-tip a.more{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--dark);
  text-decoration:none;border-bottom:1px solid var(--hinoki);padding-bottom:2px}
#kompass .hotel-tip a.more:hover{color:var(--hinoki)}
#kompass .hotel-tip a.more svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8}

#kompass .why{border-top:1px solid var(--line);padding-top:14px;margin-bottom:18px}
#kompass .why h5, .why h3{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--bambus);font-weight:600;margin:0 0 10px}
#kompass .why ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
#kompass .why li{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--bambus);line-height:1.5}
#kompass .why li svg{width:15px;height:15px;stroke:var(--terra);fill:none;stroke-width:1.7;flex:none;margin-top:2px}
#kompass .why li b{color:var(--dark);font-weight:500}

#kompass .dial{border-top:1px solid var(--line);padding-top:14px;margin-bottom:18px}
#kompass .dial label{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--bambus);font-weight:600;margin-bottom:8px}
#kompass .dial label b{display:block;margin-top:4px;color:var(--dark);font-size:17px;font-weight:400;letter-spacing:-.01em;text-transform:none}
#kompass .dial input[type=range]{width:100%}
#kompass .dial .scale{display:flex;justify-content:space-between;font-size:10px;color:var(--bambus);margin-top:5px;letter-spacing:.04em}
#kompass .dial .note{display:flex;gap:10px;align-items:flex-start;margin-top:12px;font-size:12.5px;color:var(--bambus);line-height:1.5}
#kompass .dial .note svg{width:16px;height:16px;stroke:var(--hinoki);fill:none;stroke-width:1.6;flex:none;margin-top:2px}
#kompass .dial .note b{color:var(--dark);font-weight:500}
#kompass input[type=range]{-webkit-appearance:none;appearance:none;height:4px;border-radius:3px;background:rgba(37,47,46,.22);outline:none}
#kompass input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--dark);cursor:pointer;border:3px solid var(--washi);box-shadow:0 2px 6px rgba(0,0,0,.25)}
#kompass input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--dark);
  cursor:pointer;border:3px solid var(--washi)}

#kompass .alts-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:#fbf9f4;border:1px solid var(--line);border-radius:6px;padding:13px 16px;
  font-size:13px;font-weight:500;color:var(--dark);text-align:left;transition:border-color .2s,background .2s}
#kompass .alts-toggle:hover{border-color:var(--hinoki)}
#kompass .alts-toggle span.sub{display:block;font-size:11.5px;color:var(--kyoto);font-weight:400;margin-top:3px}
#kompass .alts-toggle svg{width:16px;height:16px;stroke:var(--terra);fill:none;stroke-width:2;flex:none;transition:transform .25s}
#kompass .alts-toggle.open svg{transform:rotate(180deg)}
#kompass .alts{display:none;margin-top:12px;flex-direction:column;gap:10px}
#kompass .alts.open{display:flex;animation:fade .35s ease}
#kompass .alt{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:6px;
  padding:13px 15px;background:var(--washi);cursor:pointer;text-align:left;width:100%;transition:border-color .2s,transform .2s}
#kompass .alt:hover{border-color:var(--hinoki);transform:translateY(-2px)}
#kompass .alt .num{font-size:11px;font-weight:600;color:var(--terra);letter-spacing:.1em;flex:none;margin-top:3px}
#kompass .alt .atxt{min-width:0}
#kompass .alt .an{font-size:15px;font-weight:500;margin:0 0 2px;letter-spacing:-.01em;line-height:1.25}
#kompass .alt .am{font-size:11px;color:var(--kyoto);letter-spacing:.05em;margin-bottom:5px}
#kompass .alt p{font-size:12.5px;color:var(--bambus);line-height:1.5;margin:0}

#kompass .cta-book{text-align:center;background:var(--washi);border-top:1px solid var(--line);padding:18px 26px 24px;margin-top:12px}
#kompass .cta-check{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--bambus);margin-bottom:11px;cursor:pointer}
#kompass .cta-check input{accent-color:var(--terra);width:15px;height:15px}
#kompass .cta-book a{display:inline-flex;align-items:center;gap:10px;padding:13px 26px;border-radius:999px;
  background:var(--dark);color:var(--washi);text-decoration:none;font-size:14px;font-weight:500;letter-spacing:.02em;transition:.25s ease}
#kompass .cta-book a:hover{background:var(--hinoki);color:var(--dark);transform:translateY(-2px)}
#kompass .cta-book a svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7}
#kompass .disclaimer{margin-top:11px;font-size:11px;color:var(--kyoto);letter-spacing:.02em}/* ---------- Handy und Tablet ---------- */



@media (max-width:900px){
  #kompass .res-grid{grid-template-columns:1fr;padding:20px 20px 4px;gap:0}
  #kompass .side-col{margin-top:22px}
  #kompass .stat-row{margin:14px 20px 0;flex-wrap:wrap}
  #kompass .stat{flex:1 1 50%;border-bottom:1px solid var(--line)}
  #kompass .stat:nth-child(2n){border-right:none}
  #kompass .stat:nth-child(n+3){border-bottom:none}
  #kompass .res-head{padding:22px 20px 16px}
  #kompass .mood{margin:16px 20px 0}
  #kompass .options.cols-4{grid-template-columns:repeat(2,1fr)}
  #kompass .options.cols-3{grid-template-columns:repeat(2,1fr)}
}/* ---------- schmale Handys ---------- */



@media (max-width:700px){
  #kompass .quiz-wrap{min-height:0;padding:22px 16px 26px}
  #kompass .quiz-top{gap:12px;margin-bottom:4px}
  #kompass .q-count{font-size:10px;letter-spacing:.16em}
  #kompass .q-head{margin-bottom:20px}
  #kompass .q-kicker{font-size:10px;letter-spacing:.2em;margin-bottom:7px}
  #kompass .q-title{font-size:26px;line-height:1.16}
  #kompass .q-sub{font-size:12.5px;margin-top:7px;line-height:1.45}
  #kompass .options{gap:10px}
  #kompass .opt{padding:14px;min-height:0;gap:8px;border-radius:6px}
  #kompass .opt:hover{transform:none;box-shadow:none}
  #kompass .opt .ic{width:26px;height:26px}
  #kompass .opt .ol{font-size:14.5px}
  #kompass .opt .od{font-size:11.5px;line-height:1.42}
  #kompass .quiz-nav{flex-direction:column-reverse;align-items:center;gap:14px;margin-top:22px}
  #kompass .hint-sel{text-align:center;font-size:11.5px;line-height:1.5;max-width:34ch}
  #kompass .btn-back{justify-content:center;border:1px solid var(--line);background:#fbf9f4;border-radius:999px;
    padding:11px 24px;color:var(--bambus);font-size:13px;font-weight:600}
  #kompass .btn-back:not(.on){display:none}
  #kompass .intro-wrap{min-height:560px;padding:30px 20px}
  #kompass .load-wrap{min-height:560px}
  #kompass .load-cap{margin-bottom:42px}
  #kompass .load-cap h3, .load-cap h2{font-size:21px}
  #kompass .mood{padding:13px 16px;gap:4px 14px}
  #kompass .mood-word{font-size:21px}
  /* Beschriftung und Wort bleiben nebeneinander, der Satz bekommt eine
     eigene Zeile ueber die volle Breite. */
  #kompass .mood p{flex:1 0 100%;min-width:0;margin-top:5px}
  #kompass .wowline{font-size:15px;margin-bottom:18px}
  #kompass .stat.txt b{font-size:13px}
  #kompass .stat b{font-size:20px}
}/* ---------- Desktop ---------- */



@media (min-width:901px){
  #kompass .res-grid{padding:26px 34px 12px}
  #kompass .cta-book{padding:20px 34px 26px}
}/* ---------- weniger Bewegung ---------- */



@media (prefers-reduced-motion:reduce){
  #kompass .screen, #kompass .alts.open{animation:none}
  #kompass .needle-spin, #kompass .load-dots i{animation:none}
  #kompass .load-scene *{animation-duration:.01ms !important;animation-iteration-count:1 !important}
}

/* =========================================================
   HANDY, ab hier eng
   Auf 390 Pixel bleiben nach Rahmen und Innenabstaenden nur
   rund 320 Pixel Inhalt. Zwei Antwortkarten nebeneinander
   sind dort nicht lesbar, darum eine Karte pro Zeile mit dem
   Symbol links und dem Text rechts. Alle Innenabstaende von
   34 auf 16 Pixel, Schriftgroessen eine Stufe kleiner.
   ========================================================= */
@media (max-width:560px){

  /* ---- Einstieg ---- */
  #kompass .intro-wrap{min-height:0;padding:36px 18px 40px}
  #kompass .load-wrap{min-height:400px}

  /* ---- Quiz ---- */
  #kompass .quiz-wrap{padding:20px 16px 24px}
  #kompass .q-head{margin-bottom:18px}
  #kompass .q-title{font-size:23px;line-height:1.18}
  #kompass .q-sub{font-size:12.5px;margin-top:6px}

  /* Eine Karte pro Zeile, Symbol links, Text rechts */
  #kompass .options,
  #kompass .options.cols-2,
  #kompass .options.cols-3,
  #kompass .options.cols-4{grid-template-columns:1fr;gap:8px}
  #kompass .opt{display:grid;grid-template-columns:24px minmax(0,1fr);
    column-gap:12px;row-gap:2px;padding:13px 14px;min-height:0;align-items:start}
  #kompass .opt .ic{width:24px;height:24px;grid-row:1 / span 2;margin-top:2px}
  #kompass .opt .ol{grid-column:2;font-size:15px}
  #kompass .opt .od{grid-column:2;font-size:12px;line-height:1.45}
  #kompass .opt:hover{transform:none;box-shadow:none}
  #kompass .quiz-nav{margin-top:18px;gap:10px}

  /* ---- Ergebnis ---- */
  #kompass .res-wrap{min-height:0}
  #kompass .res-head{padding:18px 16px 14px;gap:12px}
  #kompass .res-title{font-size:24px}
  #kompass .btn-restart{padding:8px 14px;font-size:11.5px}
  #kompass .res-tags{gap:6px;margin-top:9px}
  #kompass .tag{font-size:10.5px;padding:4px 9px}

  #kompass .mood{margin:14px 16px 0;padding:12px 14px;gap:6px 12px}
  #kompass .mood-word{font-size:20px}
  #kompass .mood p{flex:1 0 100%;min-width:0;font-size:12.5px;line-height:1.5;margin-top:4px}

  #kompass .stat-row{margin:12px 16px 0}
  #kompass .stat{padding:10px 8px}
  #kompass .stat b{font-size:18px}
  #kompass .stat.txt b{font-size:12.5px}
  #kompass .stat span{font-size:9.5px;letter-spacing:.08em}

  #kompass .res-grid{padding:16px 16px 4px}
  #kompass .side-col{margin-top:18px}
  #kompass .wowline{font-size:14px;margin-bottom:14px;padding-left:12px}
#kompass .hotel-tip h4, #kompass .hotel-tip h3{font-size:18px}
  #kompass .hotel-tip p{font-size:12.5px}
  #kompass .alts-toggle{padding:12px 14px}
  #kompass .cta-book{padding:16px 16px 22px}
  #kompass .cta-book a{padding:12px 20px;font-size:13px}
}

/* ---------- sehr schmale Geraete ---------- */
@media (max-width:380px){
  #kompass .q-title{font-size:21px}
  #kompass .stat{flex:1 1 100%;border-right:none}
  #kompass .stat:nth-child(n+3){border-bottom:1px solid var(--line)}
  #kompass .stat:last-child{border-bottom:none}
}