/* Originales App-Focus-Layout mit ausgewählten Prism-Flächen.
   Hero, Navigation, Typografie und Grundfarben stammen aus ../css/site.css. */
@font-face {
  font-family: 'Manrope';
  /* Latin-Subset als WOFF (≈29 KB); vollständige TTF als Rückfall. */
  src: url('manrope-latin.woff') format('woff'), url('manrope.ttf') format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
  font-weight: 200 800;
  font-display: swap;
}

/* Mehr nutzbare Breite auf Desktop, gemeinsame Außenkanten. */
@media(min-width:1001px) {
  .app-hero, .stats, .section, footer {
    max-width: 1840px;
    padding-left: 4%;
    padding-right: 4%;
  }
  nav, nav.scrolled { padding-left: 4%; padding-right: 4%; }
}

/* Prism: gemeinsame, abgerundete Statistikfläche. */
.stats-inner {
  border: 1px solid rgba(164,139,192,.12);
  background: #1c1728;
  border-radius: 24px;
  padding: 8px 20px;
}
.stat, .stat:first-child { padding: 26px; text-align: center; }
.stat-value { color: #cbb8e1; }

/* Prism: vier Karten in einer Reihe und runde Nummern. */
.features { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; }
.feature {
  background: linear-gradient(125deg,#1c1728,#17121f);
  border: 1px solid #ebe6f110;
  border-radius: 26px;
  padding: 36px;
}
.feature::before {
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 11px;
  background: #cbb8e10b;
  border: 1px solid #cbb8e133;
  margin-bottom: 24px;
}
.feature h3 { font-size: 22px; }
.feature p { max-width: 450px; }
.feature:hover {
  background: #292036;
  border-color: #b39bce6b;
  box-shadow: 0 20px 40px #0003;
  transform: translateY(-4px);
}

/* Tonaler dunkler Rahmen um die Desktop-Produktkarten. */
.desktop-section > .divider { display: none; }
.desktop-head {
  border-radius: 26px 26px 0 0;
  background: #100d18;
  color: var(--txt);
  padding: 48px;
  margin-bottom: 0;
}
.desktop-head .section-title { color: var(--txt); }
.desktop-head .section-lead { color: #aaa0b7; }
.desktop-head .eyebrow { color: var(--accent-soft); }
.desktop-head .chip { color: #aaa0b7; border-color: #cbb8e126; }
.bundle-grid {
  background: #100d18;
  padding: 0 28px 28px;
  gap: 22px;
  border-radius: 0 0 26px 26px;
}
.bundle-card { background: #17121f; border-radius: 20px; border-color: rgba(164,139,192,.38); }  /* gleicher dünner Lila-Rand wie beim Komplettpaket */
.bundle-card.is-complete { background: #221b30; }
.bundle-card.is-complete .bundle-media { flex-basis: 50%; }
.bundle-body { padding: 28px; }
.bundle-media { aspect-ratio: 24/9; }
.resolution-note { padding-left: 20px; }

@media(max-width:1200px) {
  .features { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:1000px) {
  .desktop-head { padding: 32px; }
  .stat:nth-child(3) { padding-left: 26px; }
  .bundle-card.is-complete .bundle-media { flex: none; }
}
@media(max-width:768px) {
  .features { grid-template-columns: 1fr; }
  .feature { padding: 28px; border-radius: 20px; }
  .feature h3 { font-size: 20px; }
  .feature:hover { transform: none; }
  .desktop-head { padding: 28px 22px; }
  .bundle-grid { padding: 0 12px 12px; gap: 14px; }
  .bundle-body { padding: 22px; }
  .stats-inner { padding: 0; border-radius: 18px; }
  .stat, .stat:first-child, .stat:nth-child(3) { padding: 24px 14px; }
  .resolution-note { padding-left: 0; }
}

/* Markenprofil und dezenter Kontaktlink. */
#about .about p + p { margin-top: 20px; }
#contact .contact-email {
  font-size: clamp(20px, 1.6vw, 28px);
  font-weight: 500;
  letter-spacing: -.3px;
}

/* Kompakter gemeinsamer Seitenabschluss. */
.closing-section {
  max-width: 1840px;
  margin: 0 auto;
  padding: 36px 4% 42px;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
.closing-section > .section { padding: 0; margin: 0; min-width: 0; }
.closing-section .section-title { margin-top: 0; font-size: clamp(28px, 2.4vw, 36px); }
.closing-section .about { max-width: none; }
.closing-section .about p { font-size: 17px; line-height: 1.8; }
.closing-section #contact { border-left: 1px solid var(--line); padding-left: 36px; }
footer { margin-top: 0; padding-top: 28px; padding-bottom: 28px; }
@media(max-width:1000px) {
  .closing-section { grid-template-columns: 1fr; gap: 30px; padding: 24px 5% 32px; }
  .closing-section #contact { border-left: 0; border-top: 1px solid var(--line); padding: 26px 0 0; }
  .closing-section .about p { font-size: 16px; }
}
@media(max-width:480px) { .closing-section { padding-left: 4%; padding-right: 4%; } }

/* Social-Profil im Kontaktbereich. */
.contact-socials { margin-top: 26px; display: grid; gap: 10px; }
.social-link {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 300px;
  min-height: 64px;
  padding: 14px 16px;
  border: 1px solid rgba(164,139,192,.16);
  border-radius: 14px;
  background: rgba(164,139,192,.035);
  color: var(--accent-soft);
  text-decoration: none;
  transition: background .2s, border-color .2s;
}
.social-link svg { flex-shrink: 0; }
.social-link strong { display: block; color: var(--txt); font-size: 14px; font-weight: 600; }
.social-handle { display: block; color: var(--txt-dim); font-size: 12px; margin-top: 3px; }
.social-arrow { margin-left: auto; font-size: 18px; }
.social-link:hover { background: rgba(164,139,192,.09); border-color: rgba(164,139,192,.4); }

/* Etwas präsentere Desktop-Navigation bei unveränderter Leistenhöhe. */
@media(min-width:1001px) {
  nav { padding-top: 21px; padding-bottom: 21px; }
  nav.scrolled { padding-top: 13px; padding-bottom: 13px; }
  nav .brand { font-size: 18px; }
  nav .nav-logo { width: 40px; height: 40px; }
  nav .nav-links a { font-size: 14px; color: #aaa0b7; }
  nav .language-current { font-size: 14px; color: #aaa0b7; }
  nav .nav-links a:hover, nav .language-current:hover { color: #ebe6f1; }
}

/* Starker Hell-Dunkel-Verlauf (Variante "title-contrast"), mit weichen Übergängen:
   helles Flieder -> zum Ende von "Wallpaper" abdunkelnd -> dunkles Violett
   ("für dein") -> zum Ende hin aufhellend -> leuchtendes Violett ("Smartphone").
   Die Verläufe liegen auf den beiden Textteilen selbst und laufen über deren
   zusammengesetzte Zeilenfragmente (slice) – unabhängig von Sprache und Umbruch. */
.app-title { color: #c49af9; }
.app-title > span {
  background: linear-gradient(90deg, #d4c3e5 0%, #c3aed8 45%, #a389bd 68%, #897298 86%, #78638e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: slice;
  box-decoration-break: slice;
}
.app-title em {
  background: linear-gradient(90deg, #78638e 0%, #78638e 10%, #897298 22%, #a389bd 36%, #a389bd 52%, #b7a0d1 76%, #b39bce 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: slice;
  box-decoration-break: slice;
}
a.store-status { text-decoration: none; }

/* Hero-Buttons im gleichen Flieder-Ton wie Statistikfläche, Chips und Social-Links. */
.store-status {
  border-color: rgba(164,139,192,.22);
  background: #1c1728;
  box-shadow: none;
}
a.store-status:hover { border-color: rgba(164,139,192,.42); background: #1c1728; }
.app-actions .cta-ghost {
  border-color: rgba(164,139,192,.32);
}
.app-actions .cta-ghost:hover {
  border-color: rgba(164,139,192,.6);
  background: rgba(164,139,192,.08);
}

/* Kleine Schrift in den Desktop-Produktkarten minimal größer. */
.bundle-kicker { font-size: 12px; }
.bundle-meta { font-size: 12.5px; }
.bundle-link { font-size: 12px; }
.deal-badge { font-size: 11.5px; }
.price-save { font-size: 13px; }
.price-old { font-size: 16px; }
.bundle-desc { font-size: 16px; }
@media(max-width:768px) { .bundle-desc { font-size: 15px; } }

/* Footer und Auflösungshinweis leicht heller – weiterhin dezent und sekundär. */
footer { color: #aaa0b7; }
.footer-ai { color: #aaa0b7; }
.footer-links a { color: #cbb8e1; }
.footer-links a:hover { color: var(--accent-soft); }
.resolution-note { color: #aaa0b7; }
.app-note { color: #aaa0b7; } /* Kontrast ≥ 4.5:1 (vorher #aaa0b7 ≈ 4:1) */

/* Kontaktformular: eigener breiter Block unter „Über uns | Kontakt“. */
.closing-section > .contact-form-block { grid-column: 1 / -1; min-width: 0; }
@media(min-width:1001px) { .closing-section { row-gap: 56px; } }
.contact-form-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  color: var(--accent-soft);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 2.8px;
  text-transform: uppercase;
}
.contact-form-title::before {
  content: "";
  width: 44px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
}
.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 22px;
  padding: 28px 32px;
  border: 1px solid rgba(164,139,192,.16);
  border-radius: 18px;
  background: rgba(164,139,192,.035);
}
.contact-field { min-width: 0; }
.contact-field-message,
.contact-form-actions,
.closing-section .contact-form .contact-status { grid-column: 1 / -1; }
.contact-field label {
  display: block;
  margin-bottom: 8px;
  color: var(--txt-dim);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.contact-field input,
.contact-field textarea {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(164,139,192,.16);
  border-radius: 10px;
  background: #100d18;
  color: var(--txt);
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  transition: border-color .2s, box-shadow .2s;
}
.contact-field textarea { min-height: 112px; resize: vertical; }
.contact-field input:hover,
.contact-field textarea:hover { border-color: rgba(164,139,192,.3); }
.contact-field input:focus,
.contact-field textarea:focus,
.contact-field input:focus-visible,
.contact-field textarea:focus-visible {
  outline: none;
  border-color: rgba(164,139,192,.6);
  box-shadow: 0 0 0 3px rgba(164,139,192,.18);
}
.contact-field [aria-invalid="true"] { border-color: rgba(255,138,160,.6); }
.contact-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.contact-form-actions {
  display: flex;
  align-items: center;
  gap: 14px 24px;
  flex-wrap: wrap;
}
.contact-form .contact-submit {
  flex-shrink: 0;
  padding: 14px 26px;
  border-color: rgba(164,139,192,.32);
  font-family: inherit;
  cursor: pointer;
}
.contact-form .contact-submit:hover { border-color: rgba(164,139,192,.6); background: rgba(164,139,192,.08); }
.contact-form .contact-submit:disabled { opacity: .6; cursor: default; }
.closing-section .contact-form .contact-form-note { color: #aaa0b7; font-size: 13px; line-height: 1.6; }
.contact-form-note a { color: var(--accent-soft); text-decoration: none; }
.contact-form-note a:hover { color: #ebe6f1; }
.closing-section .contact-form .contact-status {
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.6;
}
.contact-status.is-success { border: 1px solid rgba(164,139,192,.32); background: rgba(164,139,192,.08); color: var(--txt); }
.contact-status.is-error { border: 1px solid rgba(255,138,160,.35); background: rgba(255,138,160,.06); color: #f3c9d2; }
@media(max-width:1000px) { .closing-section > .contact-form-block { padding-top: 26px; border-top: 1px solid var(--line); } }
@media(max-width:768px) {
  .contact-form-title { font-size: 13px; letter-spacing: 2.4px; margin-bottom: 18px; }
  .contact-form { grid-template-columns: 1fr; gap: 16px; padding: 22px 20px; }
}
@media(max-width:480px) {
  .contact-form { padding: 18px 16px; }
  .contact-form-actions { flex-direction: column; align-items: stretch; }
  .contact-form .contact-submit { width: 100%; }
}

/* Gewähltes Farbschema: Amethyst. Nur Farbüberschreibungen. */
/* Ausschließlich Farbanpassungen; Layout und Verhalten unverändert. */
:root { --bg:#09080e; --bg-2:#100d18; --txt:#ebe6f1; --txt-dim:#aaa0b7; --accent:#b39bce; --accent-soft:#cbb8e1; --line:rgba(164,139,192,.15); --line-soft:rgba(164,139,192,.08); }
body::before { background:radial-gradient(900px 520px at 12% -5%,rgba(164,139,192,.09),transparent 60%),radial-gradient(760px 460px at 96% 12%,rgba(164,139,192,.045),transparent 62%); }
::selection { background:rgba(164,139,192,.32); color:#ebe6f1; }
nav.scrolled { background:#09080e; border-color:var(--line); }
nav .nav-links a, nav .language-current { color:#aaa0b7; }
nav .nav-links a:hover, nav .language-current:hover { color:#ebe6f1; }
.language-menu { background:#100d18; border-color:var(--line); }
.language-menu button { color:#aaa0b7; }
.language-menu button:hover { background:#1c1728; color:#ebe6f1; }
.language-current:hover { background:rgba(164,139,192,.07); border-color:rgba(164,139,192,.5); }
.brand, .section-title, .feature h3, .contact-email, .social-link strong { color:#ebe6f1; }
.app-title { color:#cbb8e1; }
.app-title > span { background-image:linear-gradient(90deg,#d4c3e5 0%,#a389bd 55%,#78638e 100%); }
.app-title em { background-image:linear-gradient(90deg,#78638e 0%,#897298 35%,#b7a0d1 100%); }
.store-status { background:#1c1728; border-color:rgba(164,139,192,.28); color:#ebe6f1; }
a.store-status:hover { background:#292036; border-color:rgba(164,139,192,.48); }
.app-actions .cta-ghost, .contact-form .contact-submit { border-color:rgba(164,139,192,.3); color:#ebe6f1; }
.app-actions .cta-ghost:hover, .contact-form .contact-submit:hover { background:rgba(164,139,192,.09); border-color:rgba(164,139,192,.55); }
.stats-inner { background:#1c1728; border-color:rgba(164,139,192,.16); }
.stat-value { color:#cbb8e1; }
.feature { background:linear-gradient(125deg,#1c1728,#17121f); border-color:rgba(164,139,192,.12); }
.feature::before { background:rgba(164,139,192,.055); color:#cbb8e1; border-color:rgba(164,139,192,.24); }
.feature::after { background:linear-gradient(150deg,rgba(164,139,192,.35),transparent 40%); }
.feature:hover { background:#292036; border-color:rgba(164,139,192,.4);  }
.feature:hover::before { background:rgba(164,139,192,.16); border-color:rgba(164,139,192,.5); color:#ebe6f1;  }
.feature-premium { background:linear-gradient(125deg,#221b30,#1c1728); border-color:rgba(164,139,192,.38);  }
.desktop-head, .bundle-grid { background:#100d18; }
.desktop-head .section-lead, .desktop-head .chip { color:#aaa0b7; }
.desktop-head .chip { border-color:rgba(164,139,192,.2); }
.desktop-head .eyebrow { color:#cbb8e1; }
.bundle-card { background:#17121f; border-color:rgba(164,139,192,.3); }
.bundle-card.is-complete { background:#221b30; border-color:rgba(164,139,192,.38); }
.bundle-card:hover { border-color:rgba(164,139,192,.5);  }
.bundle-link { color:#ebe6f1; }
.bundle-card:hover .bundle-link { border-color:rgba(164,139,192,.5); background:rgba(164,139,192,.08); }
.deal-badge { background:rgba(164,139,192,.12); border-color:rgba(164,139,192,.38); color:#cbb8e1; }
.price-save { color:#cbb8e1; }
.social-link, .contact-form { background:rgba(164,139,192,.035); border-color:rgba(164,139,192,.16); }
.social-link:hover { background:rgba(164,139,192,.09); border-color:rgba(164,139,192,.4); }
.contact-field input, .contact-field textarea { background:#100d18; border-color:rgba(164,139,192,.18); }
.contact-field input:hover, .contact-field textarea:hover { border-color:rgba(164,139,192,.35); }
.contact-field input:focus, .contact-field textarea:focus, .contact-field input:focus-visible, .contact-field textarea:focus-visible { border-color:rgba(164,139,192,.6);  }
.contact-field [aria-invalid="true"] { border-color:rgba(255,138,160,.6); }
.app-note, .resolution-note, footer, .footer-ai, .closing-section .contact-form .contact-form-note { color:#aaa0b7; }
.footer-links a { color:#cbb8e1; }
.about p { color:#cbb8e1; }