@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');
:root{--night:#111a2e;--gold:#d8b776;--ink:#253047;--paper:#f8f5ef;--muted:#6c7380}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,'Noto Sans Thai',sans-serif}button,a,textarea{font:inherit}a{color:inherit}button{cursor:pointer}.wrap{width:min(100% - 36px,680px);margin:auto}.hero{background:radial-gradient(circle at 50% 15%,#43506b 0%,#202d46 45%,#0e1627 100%);color:#fff;min-height:100dvh;padding:30px 0 60px;text-align:center}.eyebrow{letter-spacing:.18em;font-size:11px;font-weight:700;color:var(--gold);text-transform:uppercase}.hero h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(36px,9vw,65px);line-height:1.12;margin:20px 0}.hero .lead{font-size:clamp(17px,4.3vw,23px);color:#f0d8aa}.hero p{line-height:1.8;max-width:540px;margin:16px auto}.hero .hint{color:#ddd3c2;font-size:13px}.photo{display:flex;align-items:center;justify-content:center;flex-direction:column;background:linear-gradient(145deg,#63718b,#28334d);border:1px dashed #bdac8b;border-radius:20px;color:#eee3cc;min-height:220px;overflow:hidden;background-position:center;background-size:cover}.photo .emoji{font-size:42px}.hero .photo{margin:25px auto;width:min(100%,430px);min-height:255px}.btn{border:0;background:var(--gold);color:#182238;border-radius:999px;padding:15px 23px;min-height:52px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}.btn.outline{background:transparent;border:1px solid #bdb9b0;color:var(--ink)}.hero .btn{margin:14px 0;width:min(100%,330px)}.tiny{font-size:12px;opacity:.75}.quiz{padding:28px 0 70px;min-height:100dvh}.topline{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:13px}.track{background:#e8e2d7;height:7px;border-radius:10px;margin:18px 0 35px;overflow:hidden}.track span{display:block;height:100%;background:var(--gold);border-radius:10px}.quiz h1{font-size:clamp(24px,6vw,36px);line-height:1.5;margin:18px 0 25px}.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.choice{border:2px solid #e2dcd0;background:white;padding:10px;border-radius:16px;min-height:85px;display:flex;flex-direction:column;text-align:left;gap:10px;align-items:stretch;color:var(--ink);transition:transform .15s,border-color .15s}.choice:hover{transform:translateY(-2px)}.choice.selected{border-color:#ba9654;background:#fff9ec}.choice .visual{height:clamp(125px,30vw,200px);border-radius:10px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#e5dacb,#c5cfcd);color:#68645e;font-size:34px;background-position:center;background-size:cover}.choice .text{font-size:clamp(13px,3.6vw,16px);line-height:1.5}.nav{display:flex;justify-content:space-between;gap:12px;margin-top:30px}.nav .btn{min-width:125px}.btn:disabled{opacity:.4;cursor:not-allowed}.result{padding:28px 0 65px}.result-head{text-align:center;padding:24px 0}.result h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(34px,9vw,55px)}.score{font-size:clamp(60px,15vw,90px);color:#b28c49;font-weight:750;line-height:1.2}.panel{border:1px solid #ece5d8;background:white;border-radius:20px;padding:clamp(18px,5vw,30px);margin:20px 0}.panel p{line-height:1.85}.meter{height:15px;border-radius:20px;background:#e6e0d5;overflow:hidden}.meter span{display:block;height:100%;background:linear-gradient(90deg,#b3945b,#e0c17c);transition:width 1.2s;width:0}.result .photo{min-height:260px;background:linear-gradient(140deg,#e5e0d7,#b6b0a9);color:#575b5e}.contact{display:flex;flex-direction:column;gap:12px}.contact .btn{width:100%}.contact .line{background:#06c755;color:#fff}.contact .inactive{opacity:.4;pointer-events:none}.small{font-size:13px;color:var(--muted);line-height:1.7}textarea{border:1px solid #d6d0c5;border-radius:12px;padding:14px;min-height:110px;width:100%;resize:vertical}.switch{display:flex;justify-content:center;gap:14px;font-size:13px;margin-top:12px}.switch a{color:#ebd2a4}.result .switch a{color:#8e6d33}.footer{text-align:center;font-size:12px;color:#7a7e83;margin-top:45px}@media(min-width:650px){.choices{gap:18px}.choice{padding:14px}}

/* Ergebnisseite: Bilder vollstaendig und ohne Vergroesserung anzeigen */
.result .photo {
  width: 100%;
  max-width: 520px;
  min-height: 0;
  height: auto;
  aspect-ratio: 2 / 1;
  margin: 0 auto;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #111a2e;
  border: 0;
}