/*
  Apple‑inspirierte Styles für die Lexware Office Landingpage

  Dieses Stylesheet verwendet dunkle Panels, viel Weißraum, dezente Schatten
  und abgerundete Ecken, um einen eleganten, modernen Eindruck zu erzielen.
  Durch minimale Animationen und sorgfältig gesetzte Akzente erhält die Seite
  eine hochwertige Anmutung, die an die Produktkommunikation von Apple erinnert.
*/

/* Farbdefinitionen und Grundwerte */
:root {
  --clr-bg: #0b0f1a;           /* Gesamtseitenhintergrund */
  --clr-panel: #101828;        /* Navigations- und Panelhintergrund */
  --clr-card: #13203b;         /* Kartenhintergrund */
  /* SevDesk-Farbschema: Orange‑Rot aus dem Logo */
  --clr-accent: #ff614e;       /* Primärer Akzent (Orange‑Rot) */
  --clr-accent-light: rgba(255,97,78,0.2);
  --clr-text: #f5f5f7;         /* Primärer Fließtext */
  --clr-muted: #8692b6;        /* Sekundärer Text */
  --radius: 16px;              /* Standard‑Radius für abgerundete Ecken */
  --max-width: 1200px;         /* Maximalbreite des Inhalts */
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  background-color: var(--clr-bg);
  color: var(--clr-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding: 0 1.4rem;
}

.flex {
  display: flex;
  align-items: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Navigationsleiste */
header.site {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(16, 24, 40, 0.8);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid #1c273e;
}

header.site .nav {
  padding: 0.8rem 0;
}

header.site .brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

header.site .brand img {
  height: 28px;
}

nav.menu {
  display: flex;
  gap: 1.4rem;
  font-size: 0.95rem;
}

nav.menu a {
  padding: 0.4rem 0;
  position: relative;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

nav.menu a:hover {
  opacity: 1;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.9rem 1.3rem;
  border-radius: 14px;
  font-weight: 700;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.25s ease;
}

.btn-primary {
  background: var(--clr-accent);
  color: var(--clr-text);
  box-shadow: 0 12px 32px var(--clr-accent-light);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px var(--clr-accent-light);
}

.btn-outline {
  background: transparent;
  color: var(--clr-text);
  border-color: #2a3b5c;
}
.btn-outline:hover {
  background: rgba(255,255,255,0.05);
}

/* Hero Section */
.hero {
  position: relative;
  overflow: hidden;
  padding: 5rem 0 4rem;
  background-image: url('assets/hero-bg.png');
  background-size: cover;
  background-position: center;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(11,15,26,0.6), rgba(11,15,26,0.95));
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 3rem;
  align-items: center;
}

.hero .text h1 {
  font-size: clamp(2.3rem, 4vw, 3.6rem);
  line-height: 1.15;
  margin: 0 0 1rem;
  font-weight: 800;
}

.hero .text p {
  color: var(--clr-muted);
  font-size: 1.05rem;
  margin-bottom: 1.3rem;
  max-width: 620px;
}

/* Bild im Hero: begrenze die Breite strikt, damit große Icons nicht den Text überlagern */
.hero .image {
  /* Begrenze das Bild und rücke es nach rechts, damit es nicht den Text überdeckt */
  /* Halte das Icon kompakt, sodass es auf kleineren und mittleren Bildschirmen nicht das Layout überdeckt */
  max-width: 220px;
  margin-left: auto;
}
.hero .image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 30px 60px rgba(0,0,0,0.6);
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
}
.hero .image img:hover {
  transform: translateY(-4px);
}

/* Sections */
section.section {
  padding: 5rem 0;
  border-bottom: 1px solid #172a44;
}

section.section h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin-bottom: 0.6rem;
  font-weight: 700;
}

section.section p.sub {
  color: var(--clr-muted);
  font-size: 1.05rem;
  margin: 0 auto 2rem;
  max-width: 680px;
  text-align: center;
}

/* Grid of advantages */
.advantages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.advantage {
  background: var(--clr-card);
  border-radius: var(--radius);
  padding: 1.4rem;
  box-shadow: 0 10px 28px rgba(0,0,0,0.25);
  transition: transform 0.3s ease;
}
.advantage:hover {
  transform: translateY(-4px);
}
.advantage h3 {
  margin: 0 0 0.5rem;
  font-size: 1.2rem;
}
.advantage p {
  color: var(--clr-muted);
  font-size: 0.92rem;
}

/* Target groups */
.groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.group {
  background: var(--clr-card);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.group h3 {
  margin: 0 0 0.4rem;
  font-size: 1.3rem;
}
.group p {
  color: var(--clr-muted);
  font-size: 0.94rem;
  margin: 0.5rem 0;
}

/* CTA Band */
.cta-band {
  background: linear-gradient(to right, rgba(220,38,38,0.25), rgba(255,255,255,0.02));
  padding: 3rem 1.5rem;
  text-align: center;
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.cta-band h2 {
  font-size: 2rem;
  margin-bottom: 0.6rem;
}
.cta-band p {
  color: var(--clr-muted);
  margin-bottom: 1.4rem;
  font-size: 1rem;
}

/* FAQ */
.faq details {
  margin: 0.7rem 0;
  background: var(--clr-card);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  border: 1px solid #1b2f4b;
}
.faq summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1rem;
  position: relative;
  padding-right: 1.6rem;
}
.faq summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  color: var(--clr-accent);
  transition: transform 0.3s ease;
}
.faq details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}
.faq p {
  color: var(--clr-muted);
  margin: 0.5rem 0 0;
  font-size: 0.92rem;
}

/* Footer */
footer {
  background: #09101c;
  padding: 2.5rem 0;
  color: #aeb9c9;
  border-top: 1px solid #152639;
}
footer .footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}
footer h4 {
  color: var(--clr-text);
  margin: 0 0 0.6rem;
  font-weight: 700;
}
footer p {
  font-size: 0.88rem;
  margin: 0.2rem 0;
}
footer a {
  color: #bcd4f7;
}

/* Reveal Animation */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.show {
  opacity: 1;
  transform: translateY(0);
}