/* Light als Default */
:root {
    --bg:#e9f2ff;   /* hellblau statt Weiß */
    
  --fg:#0b1320;
  --muted:#5b6b82;
  --card:#ffffff; /* leicht graublau für Karten */
  --accent:#2563eb;
  --subline:#3a3a3a;   /* dunkles Grau für Light */
  --note:#555555;       /* dunkleres Grau für Light Mode */
  
  --btn-bg:#ffffff;    /* helles Grau für Light Mode */
  --btn-fg:#0b1320;    /* dunkle Schrift */
  --btn-icon:#0b1320;   /* dunkles Icon im Light Mode */
  
  --footer-text:#444444;   /* dunkles Grau im Light Mode */
  --footer-link:#0b1320;   /* dunkler Link */
  --footer-link-hover:#0b1320; /* Akzentfarbe oder Unterstrich */
  
  --logo-url: url('/files/logo-light.svg'); /* Standard Light Mode */
  --img-path: /img-light/;
  
  --phone-screen: #ffffff;   /* Light: weiß */
   --watch-crown:  #1f2937;   /* Light: dunkles Grau statt „schwarz“ */
  
}

/* Dark Theme überschreibt Variablen */
.theme-dark {
  --bg:#0b1020;
  --fg:#eaf2ff;
  --muted:#9fb2d4;
  --card:#111827;
  --accent:#60a5fa;
  --subline:#d7e5ff;   /* hellblau für Dark */
  --note:#cfe1ff;       /* hellblau für Dark Mode */
  
  --btn-bg:#1f2937;    /* dunkler Hintergrund für Dark Mode */
  --btn-fg:#eaf2ff;    /* helle Schrift */
  --btn-icon:#ffffff;   /* weißes Icon im Dark Mode */
  
  --footer-text:#b6c6e9;   /* hellgrau im Dark Mode */
    --footer-link:#ffffff;   /* weiße Links */
    --footer-link-hover:#ffffff; /* hellblau beim Hover */
    
    --logo-url: url('/files/logo-dark.svg'); /* Für Dark Mode */
    --img-path: /img-dark/;
    
    --phone-screen: #000000;   /* Dark: schwarz */
     --watch-crown:  #0f172a;   /* Dark: leichtes Navy */
   
}

body{
margin:0;
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
background: var(--bg);
 color: var(--fg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.wrap{max-width:1100px;margin:0 auto;padding:48px 20px 60px;display:grid;gap:34px;text-align:center;}

header{display:flex;justify-content:center;align-items:center;gap:14px;}
.logo {
width: 60px;
height: 60px;
border-radius: 17px;
display: grid;
place-items: center;
overflow: hidden;
box-shadow: 0 2px 6px rgba(0,0,0,.15);
background-image: var(--logo-url);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
header { gap: 14px; }
.brand{font-size:38px;font-weight:700;letter-spacing:-0.02em;}

h1.hero{font-size:clamp(32px,6vw,52px);margin:16px 0 6px;letter-spacing:-0.01em;}
h2.language-line{font-size:clamp(30px,5vw,25px);margin:10px 0 6px;letter-spacing:-0.01em;}
p.subline {
color: var(--subline);
font-size:clamp(15px,4.2vw,26px);
margin:6px 0 20px;
}

/* Container */
.cta {
  display: flex;
  gap: 1rem; /* Abstand zwischen Buttons */
  justify-content: center; /* Buttons mittig */
  margin-top: 2rem;
}

/* Links ohne Rand/Hintergrund */
.btn-store {
  display: inline-block;
  border: none;       /* Rand entfernen */
  background: none;   /* Hintergrund entfernen */
  padding: 0;         /* Innenabstand entfernen */
  cursor: pointer;
}

/* ================================
   App Store / Google Play Badges
   ================================ */

.badge-appstore,
.badge-google {
  height: 50px;              /* Desktop: optimaler CTA-Size */
  width: auto;
  display: block;
  cursor: pointer;

  /* Optionaler, sehr dezenter Rahmen */
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;

  /* Smooth Micro-Interaction */
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease,
    border-color 0.2s ease;
}

/* Hover-Effekt (Desktop) */
.badge-appstore:hover,
.badge-google:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
  filter: brightness(1.05);
  border-color: rgba(0, 0, 0, 0.15);
}

/* Active-Feedback (Touch / Click) */
.badge-appstore:active,
.badge-google:active {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

/* Mobile-Optimierung */
@media (max-width: 768px) {
  .badge-appstore,
  .badge-google {
    height: 50px;
  }
}

.devices{display:grid;place-items:center;gap:20px;margin-top:6px;}
.cluster{
display:flex;
align-items:flex-start; /* align watch top with iPhone top */
gap:20px;
justify-content:center;
}
@media (max-width: 768px) {
  .iphone {
    width: min(700px, 90vw); /* auf Handy breiter */
  }
}

.iphone,.watch{position:relative;background: var(--card); border-radius:36px; box-shadow:0 20px 40px rgba(0,0,0,.5);}
.iphone{width:min(240px,40vw);aspect-ratio:9/19.5;padding:12px;}
.iphone .screen{position:absolute;inset:12px;border-radius:28px;overflow:hidden; background: var(--phone-screen);}
.iphone .island{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:30%;height:22px;background:#0d1117;border-radius:12px;}
.watch{width:min(170px,26vw);aspect-ratio:1/1.2;padding:14px;border-radius:34px;}
.watch .screen{position:absolute;inset:14px;border-radius:24px;overflow:hidden;background:#000;}
.crown{position:absolute;right:-12px;top:50%;transform:translateY(-50%);width:26px;height:26px; background: var(--watch-crown);;border-radius:50%;}

.slide,.slide-watch{position:absolute;inset:0;background-position:center;background-size:cover;opacity:0;transition:opacity .8s ease;}
.slide.active,.slide-watch.active{opacity:1;}

.tiny-note{color: var(--note);opacity:.9;font-size:13px;margin-top:12px;}
.android-note{color: var(--note);opacity:.9;font-size:13px;margin-top:6px;}

footer {
max-width:800px;
margin:40px auto 20px;
padding:0 20px;
font-size:13px;
display:flex;
justify-content:space-between;
flex-wrap:wrap;
gap:10px;
align-items:center;
color: var(--footer-text);
}

footer a {
color: var(--footer-link);
text-decoration: none;
}

footer a:hover,
footer a:active,
footer a:focus {
color: var(--footer-link-hover);
text-decoration: underline;
}

.theme-switch {
  position: relative;
  display: inline-block;
  width: 72px;   /* etwas schmaler als 88px */
  height: 40px;  /* etwas niedriger als 48px */
  margin-left: 90px; /* weiter rechts vom Appnamen */
  vertical-align: middle;
}

.theme-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.theme-switch .slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #ccc;
  border-radius: 999px;
  transition: background-color .3s;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.2);
}

/* Daumen */
.theme-switch .slider::before {
  content: "";
  position: absolute;
  height: 32px;      /* etwas kleiner */
  width: 32px;
  left: 4px;
  top: 4px;
  background-color: white;
  border-radius: 50%;
  transition: transform .3s;
  box-shadow: 0 2px 4px rgba(0,0,0,.3);
}

/* Aktiv (Dark Mode) */
.theme-switch input:checked + .slider {
  background-color: var(--accent);
}

.theme-switch input:checked + .slider::before {
  transform: translateX(32px); /* nach rechts verschieben */
}

./* =========================
  Apple-Style Language Switch (Footer)
  ========================= */

.lang-current {
 position: relative;
 font-size: 13px;
 color: var(--footer-link);
 cursor: pointer;
 opacity: .85;
 user-select: none;
}
.lang-current:hover,
.lang-current:focus {
 text-decoration: underline;
 opacity: 1;
}

/* Dropdown */
.lang-menu {
 position: absolute;
 bottom: 120%; /* nach oben aufklappen */
 right: 0;
 background: var(--card);
 border: 1px solid rgba(0,0,0,.12);
 border-radius: 12px;
 box-shadow: 0 12px 30px rgba(0,0,0,.2);
 min-width: 220px;
 max-height: 50vh;
 overflow: auto;
 display: none;
 z-index: 1000;
 padding: .25rem;
}

.lang-menu.open { display: block; }

.lang-menu button {
 display: block;
 width: 100%;
 text-align: left;
 padding: .55rem .75rem;
 background: transparent;
 border: 0;
 border-radius: 8px;
 font-size: 13px;
 color: var(--fg);
 cursor: pointer;
}

.lang-menu button:hover {
 background: color-mix(in oklab, var(--card) 35%, transparent);
}

.lang-menu button.active {
 font-weight: 600;
}

@media (prefers-color-scheme: dark){
 .lang-menu { border-color: rgba(255,255,255,.18); }
}




/* --- NEU: Mobile-Layout erzwingen --- */
@media (max-width: 600px) {
  footer {
    flex-direction: column;      /* statt nebeneinander: untereinander */
    align-items: flex-start;     /* Standard = links ausrichten */
  }

  #lang-switch-footer {
    align-self: flex-end;        /* dieses eine Element nach rechts */
    width: 100%;                 /* optional: ganze Zeile */
    text-align: right;           /* Inhalt rechtsbündig */
    margin-left: 0;
  }
}