/* Startseite (scripts/start2_action_temp.php) - Entwurf: Artefakt "Simkea Startseite", Login-Konzept Phase 4 */

@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 600 700; font-display: swap; src: url('/fonts/start/cinzel-600-700.woff2') format('woff2'); }
@font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/start/alegreya-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/start/alegreya-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/start/alegreya-sans-700.woff2') format('woff2'); }

:root {
  --sk-ground: #17110b;
  --sk-bar: #1d150e;
  --sk-foot: #120d08;
  --sk-line: #3a2b1d;
  --sk-card: #2a1f15;
  --sk-cardline: #44331f;
  --sk-text: #f1e7d3;
  --sk-text2: #e4d6bb;
  --sk-muted: #d6c6a8;
  --sk-soft: #c9b89a;
  --sk-head: #fbf3e2;
  --sk-gold: #e0ad4f;
  --sk-link: #e8bd66;
  --sk-parch: #f2e4c2;
  --sk-parchline: #c9ad74;
  --sk-ink: #2b1d10;
  --sk-inkmuted: #4f3a24;
  --sk-wood: #3a2614;
  --sk-green: #7fbf5a;
  --sk-display: 'Cinzel', Georgia, serif;
  --sk-body: 'Alegreya Sans', 'Trebuchet MS', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.sk-start { margin: 0; background: var(--sk-ground); color: var(--sk-text); font-family: var(--sk-body); font-size: 18px; line-height: 1.55; }
.sk-start a { color: var(--sk-link); }
.sk-start a:hover { color: #f6d48f; }
.sk-start img { max-width: 100%; height: auto; }
.sk-start input:focus-visible, .sk-start a:focus-visible, .sk-start button:focus-visible, .sk-start summary:focus-visible { outline: 3px solid var(--sk-link); outline-offset: 2px; }

.sk-wrap { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.sk-band { background: var(--sk-bar); border-top: 1px solid var(--sk-line); border-bottom: 1px solid var(--sk-line); }
.sk-section { padding-top: 72px; padding-bottom: 72px; }
.sk-h2 { margin: 0 0 12px; font-family: var(--sk-display); font-size: 40px; line-height: 1.15; color: var(--sk-head); }
.sk-eyebrow { font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--sk-gold); font-weight: 700; }
.sk-lead { margin: 0 0 32px; color: var(--sk-muted); max-width: 760px; }

/* Kopfzeile */
.sk-header { background: var(--sk-bar); border-bottom: 1px solid var(--sk-line); }
.sk-header .sk-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding-top: 12px; padding-bottom: 12px; }
.sk-logo img { height: 52px; width: auto; display: block; }
.sk-nav { display: flex; flex-wrap: wrap; gap: 4px 22px; flex-grow: 1; font-size: 17px; font-weight: 500; }
.sk-nav a { color: var(--sk-text2); text-decoration: none; padding: 6px 0; }
.sk-nav a:hover { color: var(--sk-head); }
.sk-cta { background: var(--sk-gold); color: #1d140c !important; font-weight: 700; text-decoration: none; padding: 11px 22px; border-radius: 8px; }

/* Meldungen */
.sk-alert { border-bottom: 1px solid #7a2e24; background: #4a1d17; color: #f3cfc7; }
.sk-alert.sk-ok { background: #2c3a1f; border-color: #56723a; color: #d2e2c0; }
.sk-alert .sk-wrap { padding-top: 14px; padding-bottom: 14px; }
.sk-alert strong { color: #fff; }
.sk-alert ul { margin: 6px 0 0; padding-left: 22px; }

/* Hero */
.sk-hero { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; padding-top: 56px; padding-bottom: 64px; }
.sk-hero-copy { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.sk-h1 { margin: 0; font-family: var(--sk-display); font-size: 58px; line-height: 1.08; font-weight: 700; color: var(--sk-head); }
.sk-hero-text { margin: 0; font-size: 22px; color: var(--sk-text2); max-width: 560px; }
.sk-chips { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.sk-chips li { border: 1px solid #5a4430; background: #241a11; border-radius: 999px; padding: 6px 16px; font-size: 16px; }
.sk-devices { width: 100%; max-width: 640px; margin-top: 12px; }

/* Login-Karte */
.sk-login { flex: 0 1 420px; min-width: 0; width: 100%; background: var(--sk-parch); color: var(--sk-ink); border: 1px solid var(--sk-parchline); border-radius: 16px; padding: 32px 30px; box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.sk-login h2 { margin: 0 0 6px; font-family: var(--sk-display); font-size: 28px; color: var(--sk-ink); }
.sk-login .sk-intro { margin: 0 0 22px; font-size: 17px; color: var(--sk-inkmuted); }
.sk-login a { color: #6e4614; }
.sk-providers { display: flex; flex-direction: column; gap: 10px; }
.sk-prov { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 0 18px; border-radius: 10px; color: #fff !important; text-decoration: none; font-weight: 700; font-size: 17px; border: 0; width: 100%; font-family: inherit; cursor: pointer; }
.sk-prov svg { flex-shrink: 0; }
.sk-prov-discord { background: #4752c4; }
.sk-prov-twitch { background: #7a3ee0; }
.sk-prov-steam { background: #1b2838; }
.sk-prov-steam:hover, .sk-prov-discord:hover, .sk-prov-twitch:hover { filter: brightness(1.12); }
.sk-google { min-height: 44px; display: flex; justify-content: center; }
.sk-note { margin: 12px 0 0; font-size: 15px; color: #5c4630; }
.sk-or { display: flex; align-items: center; gap: 12px; margin: 24px 0 18px; color: #6b5338; font-size: 15px; }
.sk-or::before, .sk-or::after { content: ''; flex-grow: 1; height: 1px; background: var(--sk-parchline); }
.sk-form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.sk-field { font-weight: 700; font-size: 15px; display: block; }
.sk-field input { display: block; width: 100%; margin-top: 4px; min-height: 46px; padding: 0 14px; border-radius: 8px; font: inherit; font-weight: 400; }
.sk-login .sk-field input { border: 1px solid #a88c5a; background: #fffaf0; color: var(--sk-ink); }
.sk-btn { min-height: 48px; border: 0; border-radius: 10px; font: inherit; font-weight: 700; font-size: 17px; cursor: pointer; padding: 0 22px; }
.sk-btn-wood { background: var(--sk-wood); color: #f6ead0; }
.sk-btn-gold { background: var(--sk-gold); color: #1d140c; }
.sk-small { font-size: 15px; }
.sk-login-foot { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--sk-parchline); font-size: 16px; color: var(--sk-inkmuted); }
.sk-login-foot strong { color: var(--sk-ink); }
.sk-check { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; font-weight: 400; }
.sk-check input { width: 22px; height: 22px; margin: 2px 0 0; flex-shrink: 0; accent-color: #6e4614; min-height: 0; }
.sk-linkbtn { background: none; border: 0; padding: 0; min-height: 44px; font: inherit; font-size: 15px; color: #6e4614; text-decoration: underline; cursor: pointer; align-self: flex-start; }

/* Karten */
.sk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.sk-card { background: var(--sk-card); border: 1px solid var(--sk-cardline); border-radius: 14px; padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.sk-card h3 { margin: 4px 0 0; font-size: 22px; color: var(--sk-head); }
.sk-card p { margin: 0; font-size: 17px; color: var(--sk-muted); flex-grow: 1; }
.sk-card a { font-weight: 700; }

/* Retro-Flair */
.sk-split { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.sk-split > div { flex: 1 1 460px; min-width: 0; }
.sk-split > img { flex: 1 1 420px; min-width: 0; max-width: 560px; }
.sk-checks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.sk-checks li { display: flex; gap: 12px; }
.sk-checks svg { flex-shrink: 0; margin-top: 4px; }

/* Geschichte */
.sk-story { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.sk-story > img { flex: 0 1 300px; min-width: 0; border-radius: 12px; }
.sk-story > div { flex: 1 1 520px; min-width: 0; }
.sk-story p { margin: 0 0 14px; color: var(--sk-muted); }
.sk-story .sk-quote { color: var(--sk-text2); font-style: italic; }
.sk-story details { border-top: 1px solid var(--sk-cardline); padding-top: 4px; }
.sk-story summary { cursor: pointer; font-weight: 700; color: var(--sk-link); min-height: 44px; display: flex; align-items: center; list-style: none; }
.sk-story summary::-webkit-details-marker { display: none; }
.sk-story details[open] summary { margin-bottom: 8px; }

/* Screenshots */
.sk-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.sk-shots img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; border: 1px solid var(--sk-cardline); display: block; }

/* Registrierung */
.sk-register { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.sk-register > div { flex: 1 1 360px; min-width: 0; }
.sk-register > div p { margin: 0 0 12px; color: var(--sk-muted); }
.sk-regform { flex: 1 1 460px; min-width: 0; background: var(--sk-card); border: 1px solid var(--sk-cardline); border-radius: 14px; padding: 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 0; }
.sk-regform .sk-full { grid-column: 1 / -1; }
.sk-regform .sk-field input { border: 1px solid #6b5338; background: var(--sk-ground); color: var(--sk-text); }
.sk-regform .sk-check { color: var(--sk-muted); }
.sk-regform .sk-check input { accent-color: var(--sk-gold); }
.sk-regform .sk-btn { font-size: 18px; min-height: 50px; }

/* Gemeinschaft */
.sk-community { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; padding-top: 56px; padding-bottom: 56px; }
.sk-community h2 { margin: 0; font-family: var(--sk-display); font-size: 32px; color: var(--sk-head); flex: 1 1 280px; }
.sk-pills { display: flex; flex-wrap: wrap; gap: 12px; }
.sk-pills a { display: flex; align-items: center; min-height: 46px; padding: 0 20px; border-radius: 10px; border: 1px solid #5a4430; color: var(--sk-text) !important; text-decoration: none; font-weight: 700; }
.sk-pills a:hover { background: #2a1f15; }

/* FAQ */
.sk-faq { max-width: 860px; }
.sk-faq details { border-bottom: 1px solid #3d2d1e; padding: 6px 0; }
.sk-faq summary { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-weight: 700; font-size: 19px; cursor: pointer; list-style: none; }
.sk-faq summary::-webkit-details-marker { display: none; }
.sk-faq summary span { color: var(--sk-link); font-size: 26px; transition: transform .2s; }
.sk-faq details[open] summary span { transform: rotate(45deg); }
.sk-faq p { margin: 0 0 16px; color: var(--sk-muted); }

/* Fusszeile */
.sk-footer { background: var(--sk-foot); border-top: 1px solid var(--sk-line); }
.sk-footer .sk-wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; padding-top: 28px; padding-bottom: 28px; font-size: 16px; color: var(--sk-soft); }
.sk-footer span { flex-grow: 1; }

/* Steam-Client: kompakte Seite */
.sk-client .sk-hero { padding-top: 36px; }

@media (max-width: 760px) {
  body.sk-start { font-size: 17px; }
  .sk-wrap { padding-left: 16px; padding-right: 16px; }
  .sk-h1 { font-size: 38px; }
  .sk-hero-text { font-size: 19px; }
  .sk-h2 { font-size: 30px; }
  .sk-section { padding-top: 52px; padding-bottom: 52px; }
  .sk-hero { padding-top: 32px; gap: 32px; }
  .sk-login { padding: 24px 20px; }
  .sk-regform { padding: 20px; }
  .sk-nav { order: 3; width: 100%; }
  .sk-login { order: -1; }
}

/* Screenshot-Lightbox (featherlight) im Look der Seite */
.featherlight { background: rgba(10, 7, 4, .85); }
.featherlight .featherlight-content { background: var(--sk-card); border: 1px solid var(--sk-cardline); border-radius: 12px; padding: 12px; }
.featherlight .featherlight-close-icon { background: var(--sk-gold); color: #1d140c; border-radius: 50%; width: 32px; line-height: 32px; top: 6px; right: 6px; font-weight: 700; }
.featherlight .featherlight-image { border-radius: 6px; }
.sk-shots a { cursor: zoom-in; display: block; }