/* Landing Page — eigenständig, ohne die 430px-Hülle der App.
   Farben und Schriften wie im Selfiekastl-Theme. */

:root {
  --sk-red: #D74840;
  --sk-red-dark: #C13B34;
  --sk-cream: #FBF3EB;
  --sk-cream-2: #F7E7DF;
  --sk-ink: #241C18;
  --sk-text: #4D423B;
  --sk-muted: #897E78;
  --sk-line: #F0E3D6;
  --sk-card-line: #EEDFD0;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--sk-cream);
  color: var(--sk-text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Der eigentliche Grund für die verzerrten Bilder: ohne diese Regel
   gewinnen die width/height-Attribute gegen width:100%. */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

a { color: var(--sk-red); }
a:hover { color: var(--sk-red-dark); }

h1, h2, h3, h4, p, ul, li { margin: 0; }
ul { padding: 0; list-style: none; }

.ms {
  font-family: "Material Symbols Rounded";
  font-weight: 400; font-style: normal; line-height: 1;
  letter-spacing: normal; text-transform: none; display: inline-block;
  white-space: nowrap; word-wrap: normal; direction: ltr;
  -webkit-font-feature-settings: "liga"; -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- Mobil
   Die Abstaende stehen als Inline-Styles im Markup (96px Sektionen,
   40px Raender, bis 64px Rasterluecken). Deshalb hier mit !important
   und ohne Pfadabhaengigkeit — der Mount-Aufbau unterscheidet sich
   zwischen Server und Vorschau. */

@media (max-width: 860px) {
  section { padding-top: 56px !important; padding-bottom: 56px !important; }
  section > div, header > div, footer > div {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  section > div[style*="grid"] { gap: 26px !important; }
  footer > div[style*="grid"] { gap: 30px !important; }

  /* Kopfzeile bleibt einzeilig: Sprunglinks weg, der Knopf bleibt.
     Vorher brach das Menue in drei Zeilen um und war 170px hoch. */
  header nav a:not(:last-child) { display: none !important; }
  header nav a:last-child { margin-left: 0 !important; }
  header > div { min-height: 60px !important; }

  /* Karten flacher, sonst wird jede Sektion zur eigenen Bildschirmseite */
  section > div > div > div[style*="border-radius:24px"],
  section > div > div[style*="border-radius:22px"] { padding: 26px 22px !important; }
}

@media (max-width: 560px) {
  section { padding-top: 44px !important; padding-bottom: 44px !important; }
  section > div[style*="grid"] { gap: 20px !important; }
}