/* Startseite Tingstatt – ✅ Steph 19.10.2026: beim Aufruf des Spiels erscheint zuerst diese Startseite (Gestaltung aus Stephs Vorlage).
   🔧 Alle Regeln gelten nur innerhalb von #startseite, damit sie die Knöpfe und die Karte des Spiels nicht verändern */
#startseite{position:fixed;inset:0;z-index:1000;overflow:hidden;background:#233d32;color:#fff5dc;font-family:Georgia,'Times New Roman',serif;transition:opacity .9s ease}
#startseite.weg{opacity:0;pointer-events:none}
#startseite *{box-sizing:border-box}
#startseite button{all:unset;box-sizing:border-box;cursor:pointer;font:inherit;color:inherit}
#startseite button:focus-visible{outline:2px solid #ffdf9b;outline-offset:7px}
#startseite .landscape{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:st-arrive .9s ease-out both,st-drift 36s ease-in-out .9s infinite alternate;filter:saturate(.92)}
#startseite .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,33,29,.35),transparent 49%,rgba(12,29,24,.16) 65%,rgba(9,26,22,.8)),radial-gradient(ellipse at 50% 30%,rgba(23,48,40,.16),transparent 65%)}
#startseite .light{position:absolute;inset:-30%;background:linear-gradient(110deg,transparent 54%,#fff3b00d 56%,transparent 61%,#fff3b00c 65%,transparent 70%);pointer-events:none;animation:st-light 16s ease-in-out infinite alternate}
#startseite .controls{position:absolute;right:36px;top:30px;display:flex;gap:10px}
#startseite .icon-button{display:grid;place-items:center;width:42px;height:42px;border:1px solid #fff1cb55;border-radius:50%;background:#172f2833;backdrop-filter:blur(8px)}
#startseite .icon-button:hover{background:#fff1cb22}
#startseite .icon-button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5}
#startseite .title{position:absolute;top:16%;left:0;width:100%;text-align:center;animation:st-reveal 2s .3s both;text-shadow:0 3px 25px #173d32b3}
#startseite .eyebrow{margin:0 0 18px;font:11px Arial,sans-serif;letter-spacing:.42em;text-transform:uppercase}
#startseite .ornament{display:flex;justify-content:center;align-items:center;gap:16px;margin-bottom:10px;color:#f3dc9d}
#startseite .ornament:before,#startseite .ornament:after{content:'';width:76px;height:1px;background:linear-gradient(90deg,transparent,#f3dc9d)}
#startseite .ornament:after{transform:rotate(180deg)}
#startseite .ornament svg{width:39px;height:37px;fill:none;stroke:currentColor;stroke-width:1.1}
#startseite h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(62px,10.2vw,210px);line-height:1;letter-spacing:.075em;margin:0 0 20px;padding-left:.075em;color:#fff2cd;text-shadow:0 2px 1px #826939,0 5px 28px #1a392d99}
#startseite .byline{font:12px Arial,sans-serif;letter-spacing:.12em;color:#fff4d8cc}
#startseite .brand{font-size:16px;letter-spacing:.03em;margin-left:7px;color:#fff7e4}
#startseite .entry{position:absolute;bottom:15%;left:50%;transform:translateX(-50%);width:90%;text-align:center;animation:st-reveal 2s 1s both}
#startseite .entry p{font-size:clamp(16px,1.35vw,23px);font-style:italic;color:#fff8e7;margin:0 0 24px;text-shadow:0 2px 10px #102b22}
#startseite .start{display:inline-block;position:relative;padding:18px 48px;border:1px solid #e3ca8a;background:linear-gradient(135deg,#334d3fee,#1e372ded);box-shadow:0 5px 30px #0c241955,inset 0 0 0 4px #213c3255;letter-spacing:.21em;font:12px Arial,sans-serif;text-transform:uppercase;transition:.25s}
#startseite .start:hover{background:#48634b;box-shadow:0 0 30px #f0cf6740;transform:translateY(-2px)}
#startseite .start span{margin-left:24px;color:#eed294}
#startseite .footer{position:absolute;bottom:28px;left:40px;right:40px;display:flex;justify-content:space-between;align-items:center;font:10px Arial,sans-serif;letter-spacing:.12em;color:#fff5d9a6}
#startseite .recommend{display:flex;align-items:center;gap:9px}
#startseite .chrome{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.2}
#startseite canvas{position:absolute;inset:0;pointer-events:none}
#startseite.paused *,#startseite.paused .landscape{animation-play-state:paused!important}
#startseite .studio-signature{display:flex;align-items:center;gap:9px;color:#fff;letter-spacing:.02em;background:transparent}
#startseite .studio-symbol{display:block;width:27px;height:25px;overflow:hidden;filter:brightness(0) invert(1)}
#startseite .studio-wordmark{font:12px Arial,sans-serif}
#startseite .studio-copyright{font:10px Arial,sans-serif;margin-left:5px}
@keyframes st-arrive{from{opacity:.35;transform:scale(1.03)}to{opacity:1;transform:scale(1)}}
@keyframes st-drift{from{transform:scale(1)}to{transform:scale(1.045)}}
@keyframes st-reveal{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@keyframes st-light{to{transform:translateX(4%);opacity:.45}}
@media(min-width:2400px){#startseite .controls{right:70px;top:60px}#startseite .icon-button{width:64px;height:64px}#startseite .eyebrow{font-size:19px}#startseite .byline{font-size:20px}#startseite .brand{font-size:26px}#startseite .start{font-size:20px;padding:27px 70px}#startseite .footer{font-size:17px;bottom:50px;left:80px;right:80px}#startseite .studio-symbol{width:43px;height:39px}#startseite .studio-wordmark{font-size:19px}#startseite .studio-copyright{font-size:16px}}
@media(max-width:600px){#startseite .controls{right:20px;top:20px}#startseite .title{top:24%}#startseite .eyebrow{font-size:9px;letter-spacing:.3em}#startseite h1{font-size:clamp(44px,12vw,72px)}#startseite .entry{bottom:19%}#startseite .footer{left:20px;right:20px;bottom:22px;justify-content:space-between;gap:12px;flex-wrap:wrap}#startseite .landscape{object-position:60% center}#startseite .entry p{font-size:16px}#startseite .start{padding:17px 30px}#startseite .studio-signature{gap:6px}#startseite .studio-wordmark{font-size:11px}#startseite .studio-copyright{font-size:9px;margin-left:2px}#startseite .studio-symbol{width:23px;height:21px}#startseite .recommend{font-size:9px;letter-spacing:.03em}}
@media(prefers-reduced-motion:reduce){#startseite,#startseite *{animation:none!important;transition:none!important}}

/* ✅ Steph 19.10.2026: das Bild ohne Verzögerung – 🔧 sofort eine winzige, weich gezeichnete Vorschau, darüber blendet das große Bild in knapp einer Sekunde ein */
#startseite .vorschau{position:absolute;inset:-4%;background:url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAMKADAAQAAAABAAAAGwAAAAD/wAARCAAbADADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9sAQwAEBAQEBAQGBAQGCQYGBgkMCQkJCQwPDAwMDAwPEg8PDw8PDxISEhISEhISFRUVFRUVGRkZGRkcHBwcHBwcHBwc/9sAQwEEBQUHBwcMBwcMHRQQFB0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0d/90ABAAD/9oADAMBAAIRAxEAPwDyHwT4IGo2x1i/aOWObIEJkZZFD42tgYyACD7jPHevdNB+H/gzTbSXTbq4WaPcHiLJsGRnBJyMHk8g45xivI/DfnT3V3dRyvayCEOLYDe7FCFwuAcgLjBH9K6Kw1C6nXyp5LkTkZePLbuh+7wSw4PArw8NicNa9Re8vu/ryZ3V6NRfDZxZ7vaWGk2gS1j1BZwoADFtxP1IFdXZ22nxhZGuYip9Tj+eK+ef7R1C0eOFEiKNlsbi5wM87/vKBg9fSof+E3EMJuEtoipU7Hkfcu7sMkj9K9apmLVNU02lbyOalhI8znyp/ee4+JvAPh3xOs14LqK3vJE2JM2HCELjKAnCscAFueBwMnNeX618E9F0fS4ItAuLe4vn5nkuHUqkYHICnG7c2QOny5rmbjxn4gvIV+wyG2cfNI4QFVG3PDYGQQO2eMmuLuZ9avgZJZ3u3usqGYMctxmPoSvXOOM9K+Vrw55OXOe3CSivgP/Q8Zh8a67aeTeKTN5DlGaQoZGVlwNwxk46kqfx4q3Y6vpd1cW0rXj2N1HJI0bO2YgNmMMSN6hskDGRz9a8xiuZ9gm8xt/yjOe3XH51rzJHm4BRSJH2tlQeOOnp1PIr5GVCnflSt6HpqvK13qeu3Wo+F7axtlmmvJrraYmuLAbgEYnOcqDtPUgHn0xVyKwt3spmM7CxbkTBFiZeMAbcHeTjOAcg89a+f7y4ms2X7M5j2vxtOMfLn+fNdLYa3rEUDNHezDEcfG845JzxnFVDDVItTpzvvuX7WMrpq3oeyWfhq/u7T7RpBuWiIVxDIqE5AOC53Ac9sc1yN7peqaZqKX9/a3NlZoGEiQIygMe4ZgVO5uOvI4q7obtqQkku8Flk4ZAIzwARkptJx715h4q1PUWvTaNcyNCCfkLEj8c9eg61x061WvUdOSS9E/8AP9Deap06alq3/Xkf/9k=) center/cover;filter:blur(22px) saturate(.92);transform:scale(1.04)}
/* ✅ Steph 19.10.2026: „Dorf betreten“ öffnet einen Dialog mit den vorhandenen Spielen */
#startseite .waehler{position:absolute;inset:0;display:grid;place-items:center;background:#0c1d1799;backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .35s}
#startseite.waehlt .waehler{opacity:1;pointer-events:auto}
#startseite.waehlt .title,#startseite.waehlt .entry{opacity:0;pointer-events:none;transition:opacity .35s}
#startseite .karte{width:min(460px,calc(100vw - 32px));max-height:calc(100vh - 140px);display:flex;flex-direction:column;gap:10px;padding:22px 22px 18px;border:1px solid #e3ca8a;background:linear-gradient(160deg,#2c473af2,#18302af5);box-shadow:0 10px 50px #0008,inset 0 0 0 4px #213c3255}
#startseite .karte-kopf{display:flex;justify-content:space-between;align-items:center;font:12px Arial,sans-serif;letter-spacing:.21em;text-transform:uppercase;color:#eed294}
#startseite .karte-kopf button{font-size:16px;letter-spacing:0;padding:2px 6px;color:#fff5dc}
#startseite .doerfer{display:flex;flex-direction:column;gap:6px;overflow-y:auto;scrollbar-width:thin}
#startseite .dorf{display:flex;flex-direction:column;gap:3px;padding:11px 14px;border:1px solid #fff1cb33;background:#ffffff0d;transition:.2s}
#startseite .dorf:hover,#startseite .dorf:focus-visible{border-color:#e3ca8a;background:#ffffff1f}
#startseite .dorf b{font-weight:400;font-size:19px;color:#fff2cd}
#startseite .dorf small{font:11px Arial,sans-serif;letter-spacing:.06em;color:#fff4d8b3}
#startseite .dorf .marke{font:10px Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#eed294}
#startseite .karte-fuss{display:flex;gap:8px;margin-top:4px}
#startseite .karte-fuss button{flex:1;text-align:center;padding:10px 8px;border:1px solid #e3ca8a99;font:11px Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;transition:.2s}
#startseite .karte-fuss button:hover{background:#ffffff1a;border-color:#e3ca8a}