/* ==========================================================
   Game Recovery · viaGanz
   Gemeinsames Stylesheet für index / impressum / datenschutz
   ========================================================== */

/* --- Schriften: lokal eingebunden (DSGVO) --- */
@font-face{
  font-family:'Fraunces';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('fonts/fraunces-variable.woff2') format('woff2');
}
@font-face{
  font-family:'Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/ibm-plex-sans-400.woff2') format('woff2');
}
@font-face{
  font-family:'Plex Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/ibm-plex-sans-600.woff2') format('woff2');
}
@font-face{
  font-family:'Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/ibm-plex-mono-400.woff2') format('woff2');
}

:root{
  --night:#ffffff;
  --deep:#ffffff;
  --deep2:#fcfbf9;
  --terra:#c17a54;
  --terra-lift:#d08c66;
  --gold:#9c6a3b;
  --paper:#17201d;
  --mut:rgba(23,32,29,.66);
  --mut2:rgba(23,32,29,.45);
  --line:#e7e9e7;
  --maxw:1080px;
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Plex Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--body);color:var(--paper);background:var(--deep);
  background-image:linear-gradient(180deg,var(--night) 0%,var(--night) 18%,var(--deep) 52%,var(--deep2) 100%);
  background-attachment:fixed;font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 26px}
section{padding:92px 0}

/* --- Typografie --- */
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.015em;margin:0}
h1{font-size:clamp(2.3rem,5.6vw,4.1rem);line-height:1.06}
h2{font-size:clamp(1.2rem,2.8vw,2.2rem);line-height:1.18;margin-bottom:14px}
h3{font-size:1.16rem;line-height:1.3;margin-bottom:8px;font-weight:600}
p{margin:0 0 16px}
.lead{font-size:1.12rem;color:var(--mut);max-width:80ch}
.mut{color:var(--mut)}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--gold);margin-bottom:16px;display:block}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* --- Kopfzeile (Navigation) --- */
header.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:13px 26px;display:flex;
  align-items:center;justify-content:space-between;gap:18px}
.brand{font-family:var(--display);font-size:1.14rem;font-weight:600;letter-spacing:-.01em;
  color:var(--paper);text-decoration:none;white-space:nowrap}
.brand span{color:var(--gold)}
.nav-links{display:flex;align-items:center;gap:22px}
.nav-links a{color:var(--mut);text-decoration:none;font-size:.92rem}
.nav-links a:hover{color:var(--paper)}

/* Claim & Textwechsel */
.brand-group{ display:flex; align-items:baseline; gap:12px; }
.brand-claim{
  font-family:var(--display);
  font-style:italic;
  font-weight:400;
  font-size:.86rem;
  letter-spacing:.005em;
  color:var(--mut);
  white-space:nowrap;
}
.mobile-text { display: none; }

/* --- Buttons --- */
.btn{display:inline-block;font-family:var(--body);font-weight:500;font-size:1rem;
  padding:14px 26px;border-radius:2px;text-decoration:none;border:1px solid transparent;
  transition:background .18s ease,border-color .18s ease,color .18s ease}
.btn-primary{background:var(--terra);color:#12211d;font-weight:600}
.btn-primary:hover{background:var(--terra-lift)}
.btn-ghost{border-color:var(--line);color:var(--paper)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-sm{padding:9px 18px;font-size:.9rem}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}

/* --- Bildplätze --- */
.media{position:relative;overflow:hidden;background:#f2f2ef}
.media img,.media svg{width:100%;height:100%;object-fit:cover;display:block}
.media-wide{aspect-ratio:16/9}
.media-band{aspect-ratio:21/6}
.media-square{aspect-ratio:1/1}
.media-portrait{aspect-ratio:4/5}

/* --- Hero --- */
.hero{padding:104px 0 76px}
.hero-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:52px;
  align-items:stretch;
}
.hero-text{
  display:flex;
  flex-direction:column;
}
.hero-text > *:first-child{margin-top:0}
.hero-text > *:last-child{margin-bottom:0}

.hero-media,
.hero .media{
  position:relative;
  width:100%;
  height:100%;
  min-height:0;
  aspect-ratio:auto !important;
}

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

.hero h1{max-width:19ch}
.hero .lead{margin-top:24px;font-size:1.2rem}

/* --- Erkennen --- */
.recog{display:grid;grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.recog div{padding:26px 24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.recog p{margin:0;font-size:1.02rem;color:var(--paper)}

/* --- Vergleich & Kosten-FAQ --- */
.cmp{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin-top:34px}
.cmp>div{background:var(--deep);padding:28px 24px}
.cmp .own{background:#f4f1ea}
.cmp .own h3{color:var(--gold)}
.cmp .dur{font-family:var(--mono);font-size:.76rem;letter-spacing:.1em;color:var(--mut2);
  text-transform:uppercase;margin-bottom:14px;display:block}
.cmp p{font-size:.96rem;color:var(--mut);margin:0}

/* Standard: Neutrale runde Punkte für Reha, Kassentherapie, Private Suchtklinik & FAQ */
.cmp-list{ list-style:none !important; margin:16px 0 0; padding:0; }
.cmp-list li{
  position:relative !important; padding-left:20px !important; margin:0 0 12px;
  font-size:.98rem; color:var(--mut); line-height:1.45;
}
.cmp-list li::before{
  content:"" !important; position:absolute !important; left:2px !important; top:0.55em !important;
  width:6px !important; height:6px !important; background:var(--gold) !important; border-radius:50% !important;
}

/* Exklusiv für Game Recovery (.own): Favicon-Icon */
.own .cmp-list li{
  padding-left:26px !important;
}
.own .cmp-list li::before{
  content:"" !important; position:absolute !important; top:3px !important; left:0 !important;
  width:16px !important; height:16px !important;
  background:url('Fabicon.jpeg') no-repeat center center / contain !important;
  border-radius:3px !important;
}

/* --- Programme --- */
.progs{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:36px}
.prog{border:1px solid var(--line);display:flex;flex-direction:column}
.prog-body{padding:30px 28px}
.prog .tag{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:14px;display:block}
.prog h3{font-size:1.5rem;margin-bottom:12px}
.prog ul{margin:18px 0 0;padding:0;list-style:none}
.prog li{padding:9px 0 9px 26px;position:relative;font-size:.96rem;color:var(--mut);
  border-top:1px solid var(--line)}
.prog li:before{
  content:""; position:absolute; left:0; top:12px;
  width:16px; height:16px;
  background:url('Fabicon.jpeg') no-repeat center center / contain;
  border-radius:3px;
}

/* --- Stufen & Module --- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:34px}
.step{border-top:2px solid var(--gold);padding-top:20px}
.step .n{font-family:var(--mono);font-size:.76rem;letter-spacing:.14em;color:var(--gold);
  display:block;margin-bottom:10px}
.step p{font-size:.96rem;color:var(--mut);margin:0}
.mods{margin-top:52px;border-top:1px solid var(--line)}
.mod{display:grid;grid-template-columns:64px 1fr 1.15fr;gap:22px;padding:22px 0;
  border-bottom:1px solid var(--line);align-items:baseline}
.mod .l{font-family:var(--display);font-size:1.7rem;color:var(--gold);line-height:1}
.mod .t{font-weight:600;font-size:1.02rem}
.mod .d{color:var(--mut);font-size:.96rem}

/* --- Video Container --- */
.video-container {
  max-width: 800px;
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--line);
  background: #000;
}

.video-container video {
  -webkit-touch-callout: none;
  user-select: none;
}

/* Versteckt den automatischen Browser-Play-Button im Zentrum */
video::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none;
}

/* --- Wer wir sind --- */
.who{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:34px}
.who h3{font-size:1.3rem}
.who .role{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin-bottom:12px;display:block}
.who p{font-size:.98rem;color:var(--mut)}
.who .media{margin-bottom:22px;max-width:300px}

/* --- Referenzen / Firmen-Logos --- */
.trust-logos-wrapper {
  margin-top: 72px;
  padding-top: 48px;
  margin-bottom: 48px;
  border-top: 1px solid var(--line);
  text-align: center;
  width: 100%;
}

.trust-logos-title {
  font-size: 0.88rem !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  font-family: var(--mono);
  text-align: center;
  display: block;
  margin: 0 auto 32px auto;
}

.trust-logos-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.trust-logos-img {
  width: 100%;
  max-width: 780px;
  height: auto;
  display: block;
  margin: 0 auto;
  opacity: 0.88;
  filter: grayscale(100%);
  transition: opacity 0.3s ease, filter 0.3s ease;
}

.trust-logos-img:hover {
  opacity: 1;
  filter: grayscale(0%);
}

/* --- Selbsttest --- */
.test{border:1px solid var(--gold);padding:44px 38px;display:grid;
  grid-template-columns:1.3fr 1fr;gap:34px;align-items:center}
.test p{margin-bottom:0}

/* --- FAQ --- */
.faq{margin-top:30px;border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{padding:20px 34px 20px 0;cursor:pointer;list-style:none;position:relative;
  font-weight:500;font-size:1.03rem}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";position:absolute;right:4px;top:18px;color:var(--gold);
  font-size:1.3rem;font-family:var(--mono)}
details[open] summary:after{content:"–"}
details p{padding:0 0 22px;color:var(--mut);font-size:.98rem;max-width:70ch;margin:0}

.faq, 
.faq details, 
.faq details *,
.faq details p, 
.faq details div,
.faq details ul,
.faq details li {
  max-width: none !important;
  width: 100% !important;
}

/* Standard-FAQ-Listen mit Favicon-Icon statt Bullets */
.faq ul:not(.cmp-list){
  list-style:none;
  margin:10px 0 16px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.faq ul:not(.cmp-list) li{
  position:relative;
  padding-left:26px;
  font-size:.98rem;
  color:var(--mut);
  line-height:1.5;
}
.faq ul:not(.cmp-list) li::before{
  content:"";
  position:absolute;
  left:0;
  top:4px;
  width:16px;
  height:16px;
  background:url('Fabicon.jpeg') no-repeat center center / contain;
  border-radius:3px;
}

/* --- Abschluss --- */
.final {
  background: linear-gradient(180deg, rgba(193,122,84,.10), rgba(193,122,84,.02));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.final h2 {
  max-width: none !important;
}
.crisis {
  color: var(--mut);
  font-size: .9rem;
  line-height: 1.5;
}

/* --- Fuß --- */
footer{padding:52px 0 64px;font-size:.9rem;color:var(--mut2)}
footer a{color:var(--mut);text-decoration:none;border-bottom:1px solid var(--line)}
footer a:hover{color:var(--gold)}
.foot-links{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:22px}
.disclaimer{max-width:78ch;line-height:1.62}

/* --- Responsive --- */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:38px}
  .hero-media, .hero .media{position:relative;height:380px}
  .brand-group{ flex-direction:column; align-items:flex-start; gap:2px; }
  .brand-claim{ font-size:.72rem; display:none; }
  .cmp{grid-template-columns:1fr}
  .progs{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .who{grid-template-columns:1fr;gap:34px}
  .test{grid-template-columns:1fr;padding:32px 24px}
}

@media (max-width: 768px) {
  .trust-logos-wrapper {
    margin-top: 48px;
    padding-top: 32px;
    margin-bottom: 32px;
  }
  .trust-logos-title {
    font-size: 0.80rem !important;
  }
  .trust-logos-img {
    max-width: 100%;
  }
}

@media(max-width:720px){
  .nav-in { padding: 10px 18px; }
  .nav-links a:not(.btn) { display: none !important; }
  section { padding: 64px 0; }
  h2 { font-size: 1.2rem !important; line-height: 1.2; margin-bottom: 12px; }
  .recog { grid-template-columns: 1fr; }
  .mod { grid-template-columns: 44px 1fr; gap: 14px; }
  .mod .d { grid-column: 2; }
}

@media(max-width:600px){
  .brand-claim{ font-size:.66rem; }
}