/* =========================================================
   SCHRIFTARTEN (lokal gehostet statt Google Fonts CDN — so
   läuft beim Seitenaufruf keine Verbindung zu Google-Servern
   auf, siehe fonts/-Ordner)
   ========================================================= */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/fraunces-normal-400-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/fraunces-italic-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/inter-400-700.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/jetbrains-mono-500.woff2') format('woff2');
}

/* =========================================================
   DESIGN TOKENS
   Hell, modern, vertrauenswürdig. Rot/Gold als bewusst
   sparsam eingesetzte Akzente (Qualitäts-/Siegel-Anmutung),
   kein dunkler Hintergrund.
   ========================================================= */
:root {
  --bg:        #FAF9F6;
  --surface:   #FFFFFF;
  --surface-2: #F2EFE9;
  --ink:       #1C1B1A;
  --muted:     #6B6660;
  --red:       #B3202C;
  --red-dark:  #8E1922;
  --gold:      #A9814C;
  --border:    #E4E0D8;

  /* Warm getöntes Schatten-System (gold-/ink-getönt statt neutralem Grau) —
     einheitlich für Karten bei Vorteile, Preise und Portfolio. --shadow-rest
     ist der Ruhezustand, --shadow-hover die leicht angehobene Hover-Stufe. */
  --shadow-rest:  0 2px 6px -2px rgba(43, 32, 15, 0.08), 0 12px 24px -16px rgba(169, 129, 76, 0.24);
  --shadow-hover: 0 16px 32px -14px rgba(169, 129, 76, 0.3), 0 8px 16px -10px rgba(43, 32, 15, 0.14);

  --font-display: 'Fraunces', serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --container-width: 1160px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

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

img { max-width: 100%; display: block; }

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 14px 28px;
  border-radius: 4px;
  border: 1.5px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
  cursor: pointer;
}

.btn-primary {
  background: var(--red);
  color: #fff;
}
.btn-primary:hover {
  background: var(--red-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(179, 32, 44, 0.25);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--border);
}
.btn-ghost:hover {
  border-color: var(--ink);
}

.btn-outline {
  background: transparent;
  color: var(--red);
  border-color: var(--red);
  width: 100%;
  text-align: center;
}
.btn-outline:hover {
  background: var(--red);
  color: #fff;
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 249, 246, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.3s ease;
}
.site-header.scrolled {
  box-shadow: 0 4px 20px -8px rgba(28, 27, 26, 0.12);
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}

.logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.55rem;
  letter-spacing: -0.01em;
}
.logo span { color: var(--red); }

.main-nav {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 0.95rem;
  font-weight: 500;
}

.main-nav a:not(.nav-cta) {
  position: relative;
  padding-bottom: 4px;
}
.main-nav a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}
.main-nav a:not(.nav-cta):hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-cta {
  background: var(--ink);
  color: #fff;
  padding: 10px 18px;
  border-radius: 4px;
}
.nav-cta:hover { background: var(--red); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  padding: 40px 0 56px;
  overflow: hidden;
}

.hero-inner-v2 {
  display: grid;
  grid-template-columns: 1.5fr 0.5fr;
  gap: 40px;
  align-items: start;
}

.hero-photo img {
  width: 100%;
  height: auto;
  max-width: 320px;
  display: block;
  border-radius: 14px;
  box-shadow: var(--shadow-rest);
  will-change: transform;
}

@media (max-width: 900px) {
  .hero-inner-v2 {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  /* Text zuerst, Foto kompakt darunter — auf dem Handy soll man die Headline
     lesen, bevor das Foto kommt, nicht erst daran vorbeiscrollen müssen. */
  .hero-photo img {
    max-width: 260px;
    margin: 0 auto;
  }
}

.eyebrow, .section-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 16px;
}

/* --- Glanz-/Glitzer-Schimmer auf der Headline ---
   Saß vorher auf dem großen "Elyweb"-Schriftzug im Hero; der ist raus (das
   Logo steht ja schon oben im Header, war doppelt). Technik ist gleich
   geblieben: ein per ::after erzeugtes, unsichtbares Textduplikat (Inhalt
   über data-text, damit er nicht doppelt im CSS gepflegt werden muss)
   bekommt einen hellen Verlauf, der per background-clip:text nur innerhalb
   der Buchstabenform sichtbar ist, und wird per mix-blend-mode über den
   echten (farbigen) Text gelegt. Zweite Zeile läuft leicht zeitversetzt,
   damit nicht beide Zeilen exakt synchron schimmern. Reduced-Motion wird
   durch die globale @media-Regel oben in dieser Datei abgefangen. */
.hero-headline-shimmer {
  position: relative;
}
.hero-headline-shimmer::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(100deg,
    transparent 30%,
    rgba(255, 255, 255, 0.5) 45%,
    var(--gold) 50%,
    rgba(255, 255, 255, 0.5) 55%,
    transparent 70%);
  background-size: 300% 100%;
  background-position: 150% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  mix-blend-mode: screen;
  animation: wmShimmer 14s ease-in-out infinite;
}
.hero-headline-shimmer-delayed::after {
  animation-delay: 1.8s;
}

@keyframes wmShimmer {
  0%   { background-position: 150% 0; }
  40%  { background-position: -50% 0; }
  100% { background-position: -50% 0; }
}

/* Versteckt visuell, aber für Screenreader lesbar — sagt "Elyweb" als ein
   Wort an, statt dass ein Screenreader die einzelnen <span>-Buchstaben vorliest. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hero-headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 4.8vw, 2.5rem);
  line-height: 1.2;
  margin: 8px 0 16px;
  color: var(--ink);
  text-align: left;
}

/* width: fit-content ist hier wichtig: die Zeile bleibt zwar ein eigener
   Block (steht also untereinander), schrumpft aber auf die tatsächliche
   Textbreite. Ohne das würde der Farbverlauf über die volle, unsichtbare
   Blockbreite berechnet statt über den sichtbaren Text — der goldene Teil
   des Verlaufs würde dann im leeren Raum rechts vom Text landen. */
.hero-headline-line {
  display: block;
  width: fit-content;
}

/* Statt Farbverlauf (war schwer zu balancieren) jetzt klare Wortfarben:
   "Webseiten." in Gold, "Starke" in Rot — der Rest bleibt Ink (Standardfarbe
   von .hero-headline). Damit ist keine der beiden Zeilen mehr grau/blass,
   aber die Farbverteilung ist eindeutig statt fließend-unvorhersehbar. */
.headline-word-gold {
  color: var(--gold);
}

.headline-word-red {
  color: var(--red);
}

.hero-sub {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 46ch;
  margin: 0;
  text-align: left;
}

/* =========================================================
   PHILOSOPHIE
   Drei kurze Aussagen, die einzeln beim Scrollen erscheinen.
   .philosophy-inner bekommt (wie andere Sections) die Klasse
   .reveal per script.js; die Kinder .philosophy-line erhalten
   dann über nth-child eine leicht gestaffelte transition-delay,
   sodass sie nacheinander statt gleichzeitig auftauchen.
   ========================================================= */
.philosophy {
  padding: 40px 0 24px;
}
.philosophy-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.philosophy-line {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 22px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.philosophy.is-visible .philosophy-line { opacity: 1; transform: none; }
.philosophy.is-visible .philosophy-line:nth-child(2) { transition-delay: 0.15s; }
.philosophy.is-visible .philosophy-line:nth-child(3) { transition-delay: 0.3s; }

.philosophy-line-lg {
  font-size: clamp(1.6rem, 3.5vw, 2.1rem);
  font-weight: 600;
  color: var(--ink);
}
.philosophy-line-emph {
  color: var(--ink);
}
@media (prefers-reduced-motion: reduce) {
  .philosophy-line, .hero-highlight, .fuer-wen-item, .price-card, .process-step { opacity: 1; transform: none; animation: none; }
}

/* =========================================================
   SECTION HEADINGS (shared)
   ========================================================= */
.section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.section-sub {
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 60ch;
  margin: 0 0 48px;
}

/* =========================================================
   HERO HIGHLIGHTS
   Kurzfassung der drei Kernargumente direkt im Hero (siehe index.html) —
   auf dem Handy eine Spalte mit kurzen Zeilen, ab 700px eine Reihe.
   Steht bereits im sichtbaren Bereich beim Laden, daher kein Scroll-Reveal
   wie bei den anderen Sections, nur ein kurzes Einblenden beim Laden.
   ========================================================= */
.hero-highlights {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}

.hero-highlight {
  opacity: 0;
  transform: translateY(10px);
  animation: heroHighlightIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-highlight:nth-child(2) { animation-delay: 0.1s; }
.hero-highlight:nth-child(3) { animation-delay: 0.2s; }

@keyframes heroHighlightIn {
  to { opacity: 1; transform: none; }
}

@media (min-width: 700px) {
  .hero-highlights {
    flex-direction: row;
    gap: 32px;
  }
  .hero-highlight {
    flex: 1;
  }
}

.hero-highlight-main {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
  margin: 0 0 4px;
}

.hero-highlight-sub {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
  max-width: 60ch;
}

/* =========================================================
   FÜR WEN
   Kurzer Orientierungs-Abschnitt direkt nach dem Hero: 6 Branchen als
   kleine Icon-Kacheln, damit Besucher sich sofort wiedererkennen, bevor
   sie überhaupt bei den Preisen ankommen. Bewusst schlichte Strich-Icons
   statt Emojis, damit es zum ruhigen, hochwertigen Rest der Seite passt.
   ========================================================= */
.fuer-wen {
  padding: 60px 0;
  background: var(--surface);
}
.fuer-wen-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 28px 20px;
  margin-top: 40px;
}
.fuer-wen-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.fuer-wen.is-visible .fuer-wen-item { opacity: 1; transform: none; }
.fuer-wen.is-visible .fuer-wen-item:nth-child(2) { transition-delay: 0.2s; }
.fuer-wen.is-visible .fuer-wen-item:nth-child(3) { transition-delay: 0.4s; }
.fuer-wen.is-visible .fuer-wen-item:nth-child(4) { transition-delay: 0.6s; }
.fuer-wen.is-visible .fuer-wen-item:nth-child(5) { transition-delay: 0.8s; }
.fuer-wen.is-visible .fuer-wen-item:nth-child(6) { transition-delay: 1s; }
.fuer-wen-item svg {
  width: 30px;
  height: 30px;
  color: var(--gold);
}
.fuer-wen-item span {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink);
}
@media (max-width: 900px) {
  .fuer-wen-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .fuer-wen-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
}

/* =========================================================
   PRICING
   ========================================================= */
.pricing {
  padding: 60px 0;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Alle drei Karten haben jetzt einen echten Rand (ohne Rand wirkte es
   unfertig/uneinheitlich) — aber ohne Schatten/Hover-Lift, damit es ruhiger
   bleibt als die ursprüngliche "3× weiße Box mit Schatten"-Optik. Das
   empfohlene Paket hebt sich durch einen dauerhaft laufenden Farbrahmen ab.
   Technik: kein mask-composite/@property (in manchen Chrome-Versionen nicht
   sichtbar animiert) — stattdessen dieselbe robuste background-position-
   Animation wie beim Schimmer-Effekt im Hero: zwei Hintergrund-Ebenen
   (innen die normale Kartenfarbe, außen ein breiter, wandernder Verlauf),
   sichtbar gemacht über einen transparenten Rand + background-clip. */
.price-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.pricing.is-visible .price-card { opacity: 1; transform: none; }
.pricing.is-visible .price-card:nth-child(2) { transition-delay: 0.12s; }
.pricing.is-visible .price-card:nth-child(3) { transition-delay: 0.24s; }

/* Rahmen-Technik nach Vorbild (TikTok @darkcss77 "Card Border Animation"):
   der Rahmen ist die meiste Zeit unsichtbar (verschmilzt mit der Kartenfarbe)
   — nur zwei helle Punkte (Rot, Gold) kreisen einander gegenüberliegend
   herum. Das macht die Bewegung deutlich auffälliger als ein durchgehend
   farbiger Rahmen, der nur die Farbe wechselt. Umsetzung: .price-card-
   highlight bekommt den rotierenden Verlauf direkt als Hintergrund, ::after
   liegt 3px eingerückt darüber (deckt die Mitte mit der normalen Kartenfarbe
   ab) und sitzt dank z-index:-1 unter dem eigentlichen Karteninhalt, aber
   über dem Verlauf — übrig bleibt nur ein 3px breiter, sichtbarer Rand. */
.price-card-highlight {
  position: relative;
  z-index: 0;
  border: none;
  border-radius: 14px;
  padding: 38px 32px;
  background: conic-gradient(from var(--price-angle),
    var(--red) 0%, transparent 4%,
    transparent 46%, var(--gold) 50%, transparent 54%,
    transparent 96%, var(--red) 100%);
  animation: priceBorderSpin 5s linear infinite;
}
.price-card-highlight::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--surface);
  border-radius: 11px;
  z-index: -1;
}

@property --price-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes priceBorderSpin {
  to { --price-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .price-card-highlight { animation: none; }
}

.price-badge {
  position: absolute;
  top: -13px;
  left: 32px;
  z-index: 1;
  background: var(--red);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
}

.price-tier {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gold);
  margin: 4px 0 12px;
}

.price-amount {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 600;
  margin: 0 0 12px;
}

.price-desc {
  color: var(--muted);
  font-size: 0.95rem;
  margin: 0 0 24px;
  min-height: 44px;
}

/* Kein Häkchen-Icon mehr (das "Checkmark-Liste" ist DAS Erkennungsmerkmal
   generischer SaaS-Preistabellen) — stattdessen eine schlichte Liste mit
   dünnen Linien zwischen den Punkten, wie eine Leistungsaufstellung. */
.price-features {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  font-size: 0.92rem;
}

.price-features li {
  padding: 10px 0;
  border-top: 1px solid var(--border);
}
.price-features li:last-child {
  border-bottom: 1px solid var(--border);
}

/* Ratenzahlungs-Hinweis direkt unter dem Anfragen-Button jeder Karte —
   klein und zurückhaltend, damit der Preis oben die Hauptaussage bleibt
   und die Rate nur als zusätzliche Option daneben steht. */
.price-installment-note {
  margin: 12px 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
}

/* Hilfestellung für unentschlossene Besucher unter den drei Paketen —
   fängt die auf, die sich nicht sofort für eine Karte entscheiden können,
   statt dass sie einfach abspringen. */
.pricing-help {
  margin-top: 48px;
  padding: 32px 28px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  text-align: center;
}
.pricing-help-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  margin: 0 0 8px;
}
.pricing-help-text {
  color: var(--muted);
  max-width: 50ch;
  margin: 0 auto 22px;
}
.pricing-help .btn-outline {
  width: auto;
}

/* =========================================================
   PORTFOLIO
   ========================================================= */
.portfolio {
  padding: 60px 0;
}

/* =========================================================
   SHOWCASE (Beispielprojekte)
   Eine große aktive Vorschau in der Mitte, ein kleineres Nachbar-Projekt
   links und rechts. Löst das vorherige 3D-Karussell mit lauter gleich
   großen Karten ab — dort war laut Nutzer-Feedback vor allem der Name zu
   erkennen, nicht die Website selbst. Bewusst ohne Drehung/3D-Rotation,
   nur Position/Größe/Deckkraft, damit es ruhig und hochwertig wirkt statt
   verspielt. Jede Karte zeigt eine echte Live-Vorschau per iframe:
   Desktop/Tablet rendern die Demo in Desktop-Breite (1400×900, wie am
   eigenen Bildschirm), Mobile rendert sie in Handy-Breite (375×600) —
   die Werte müssen zu SHOWCASE_SIZES in script.js passen (dort auch die
   Slides/Infos, nicht hier).
   ========================================================= */
.showcase {
  position: relative;
  height: 440px;
  margin-top: 48px;
}
.showcase-stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.showcase-slide {
  position: absolute;
  left: 50%;
  top: 50%;
  cursor: pointer;
  transition: transform 0.6s cubic-bezier(0.22, 0.85, 0.32, 1), opacity 0.6s ease;
}
/* Aktive Karte ist jetzt auch klickbar (öffnet die Demo, wie der Button
   darunter) — nur der Platzhalter "Arztpraxis" bleibt ohne Ziel. */
.showcase-slide.is-pending-slide.is-active-slide {
  cursor: default;
}
.showcase-frame {
  aspect-ratio: 1400 / 900;
  width: 640px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
  box-shadow: 0 30px 70px rgba(28, 27, 26, 0.28);
  transition: width 0.6s cubic-bezier(0.22, 0.85, 0.32, 1);
}
.showcase-frame.is-side {
  width: 300px;
  box-shadow: 0 16px 40px rgba(28, 27, 26, 0.2);
}
.showcase-frame iframe {
  width: 1400px;
  height: 900px;
  border: none;
  transform-origin: top left;
  pointer-events: none;
}
.showcase-frame-pending {
  display: flex;
  align-items: center;
  justify-content: center;
}
.showcase-pending-note {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
}

.showcase-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font-size: 1.1rem;
  cursor: pointer;
}
.showcase-arrow:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.showcase-arrow-prev { left: 0; }
.showcase-arrow-next { right: 0; }

.showcase-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  max-width: 640px;
  margin: 28px auto 0;
}
.showcase-info-text {
  transition: opacity 0.25s ease;
}
.showcase-info-name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0;
}
.showcase-info-meta {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 4px 0 0;
}
.showcase-info-dot {
  margin: 0 6px;
}
.showcase-info .btn.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

.showcase-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 22px;
}
.showcase-dot {
  width: 6px;
  height: 6px;
  border-radius: 10px;
  background: var(--border);
  cursor: pointer;
}
.showcase-dot.active {
  width: 22px;
  background: var(--red);
}

@media (max-width: 900px) {
  .showcase { height: 320px; }
  .showcase-frame { width: 440px; }
  .showcase-frame.is-side { width: 210px; }
}

@media (max-width: 640px) {
  .showcase { height: 500px; }
  .showcase-frame { aspect-ratio: 375 / 600; width: min(300px, 82vw); }
  .showcase-slide:not(.is-active-slide) { display: none; }
  .showcase-arrow { width: 38px; height: 38px; }
  .showcase-info { justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .showcase-slide, .showcase-frame { transition: none; }
}

/* Eine einzige, ruhige CTA unter dem gesamten Portfolio-Bereich statt einer
   Wiederholung pro Karte — wirkte vorher durch die Wiederholung aufdringlich. */
.portfolio-cta-single {
  text-align: center;
  margin-top: 48px;
}

/* =========================================================
   ABLAUF / PROCESS — automatische Einflug-Sequenz
   Sobald der Bereich ins Blickfeld scrollt, fliegen die 4 Karten
   automatisch nacheinander von unten ein (einmalig ausgelöst, nicht an
   jeden weiteren Scroll-Pixel gekoppelt) und bleiben danach fertig
   zusammengesetzt stehen. .process bekommt die Klasse reveal+is-visible
   wie die anderen Sections (script.js); .process-step nutzt darauf
   aufbauend eine eigene, kräftigere Keyframe-Animation mit Stagger statt
   der einfachen Fade-Transition.
   ========================================================= */
.process {
  padding: 60px 0 40px;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.process-steps {
  margin-top: 48px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.process-step {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--surface);
  border-radius: 16px;
  padding: 28px 28px 28px 24px;
  border-left: 4px solid var(--red);
  box-shadow: var(--shadow-rest);
  opacity: 0;
  transform: translateY(56px) scale(0.96);
}

@keyframes processStepFlyIn {
  to { opacity: 1; transform: none; }
}

.process.is-visible .process-step {
  animation: processStepFlyIn 2.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.process.is-visible .process-step:nth-child(2) { animation-delay: 0.6s; }
.process.is-visible .process-step:nth-child(3) { animation-delay: 1.2s; }
.process.is-visible .process-step:nth-child(4) { animation-delay: 1.8s; }

.process-step-num {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--red);
  border: 1.5px solid var(--red);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.process-step-body h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin: 4px 0 6px;
}
.process-step-body p {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0;
  max-width: 52ch;
}

/* =========================================================
   SEITEN-INTRO (eigenständige Unterseiten wie wissenswertes.html,
   die keinen großen Hero brauchen, nur einen kurzen Titelblock)
   ========================================================= */
.page-intro {
  padding: 40px 0 8px;
}

/* =========================================================
   RECHTSTEXTE (Impressum, Datenschutz)
   ========================================================= */
.legal {
  padding: 20px 0 80px;
}
.legal-inner {
  max-width: 720px;
}
.legal-block {
  margin-top: 44px;
}
.legal-block h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  margin: 0 0 14px;
}
.legal-block p {
  color: var(--muted);
  line-height: 1.7;
  margin: 0 0 10px;
}
.legal-block p strong {
  color: var(--ink);
  font-weight: 600;
}
.legal-block a {
  color: var(--red);
  text-decoration: underline;
}

/* =========================================================
   FAQ / WISSENSWERTES
   ========================================================= */
.faq {
  padding: 60px 0;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.faq-inner {
  max-width: 760px;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 32px;
}

.back-home-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  padding: 12px 20px;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(28, 27, 26, 0.25);
  text-decoration: none;
  z-index: 500;
  transition: background 0.2s ease, transform 0.2s ease;
}
.back-home-btn:hover {
  background: var(--red);
  transform: translateY(-2px);
}
@media (max-width: 600px) {
  .back-home-btn {
    bottom: 16px;
    right: 16px;
    padding: 10px 16px;
    font-size: 0.82rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .back-home-btn { transition: none; }
}

.faq-group-title {
  font-family: var(--font-mono);
  font-size: 0.98rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}

.faq-group-title:not(:first-child) {
  margin-top: 20px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px 22px;
}

.faq-item summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  list-style: none;
  position: relative;
  padding-right: 28px;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  color: var(--red);
  font-size: 1.3rem;
  font-weight: 400;
  transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
  content: "–";
}

.faq-item p {
  color: var(--muted);
  line-height: 1.65;
  font-size: 0.96rem;
  margin: 14px 0 4px;
}

/* =========================================================
   WHY
   ========================================================= */
.why {
  padding: 60px 0 40px;
  background: var(--ink);
  color: #fff;
}
.why .section-eyebrow { color: var(--gold); }
.why .section-title { color: #fff; }

.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 24px;
}

.why-col {
  border-left: 2px solid var(--red);
  padding-left: 24px;
}

.why-label {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gold);
  margin: 0 0 10px;
}

.why-text {
  color: #d8d4cd;
  line-height: 1.6;
  margin: 0;
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact {
  padding: 40px 0 60px;
  background: var(--ink);
  color: #fff;
}
.contact .section-eyebrow { color: var(--gold); }
.contact .section-title { color: #fff; }
.contact .section-sub { color: #d8d4cd; }

.contact-inner {
  max-width: 560px;
}

.btn-large {
  font-size: 1.05rem;
  padding: 16px 36px;
}

.contact-buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.contact-note {
  color: #a8a39b;
  font-size: 0.85rem;
  margin-top: 16px;
  max-width: 46ch;
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 28px 0;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.85rem;
  color: var(--muted);
}

.footer-links {
  display: flex;
  gap: 20px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .main-nav {
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 24px 20px;
    display: none;
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 12px 0; width: 100%; }
  .nav-cta { margin-top: 8px; text-align: center; }
  .nav-toggle { display: flex; }

  .hero { padding: 24px 0 40px; }
}