/* PineApp Labs - corporate site. Dark theme per reference design. */
/* Der Inter-Import lebt jetzt als nicht-blockierender <link> im
   head-Partial (partials/head.js) - ein @import hier erzeugt eine
   render-blockierende Request-Kette (styles.css -> fonts.googleapis.com),
   die Lighthouse mit ~440 ms LCP-Verzögerung ausgewiesen hat. */

:root {
  --bg: #0a0a0a;
  --surface: #141414;
  --surface-2: #1c1c1c;
  --text: #f5f5f5;
  --text-secondary: #a3a3a3;
  --text-muted: #6b6b6b;
  --border: #262626;
  --accent: #F2C94C;
  --link: #ffffff;
  --error: #ff6b6b;
  --success: #4caf50;
  --radius: 16px; /* Leicht reduziert für einen moderneren, weniger runden Look */
  --radius-sm: 8px;
  --max-width: 1180px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Per-app accent color, scoped to that app's own <main> (page body only -
   header/footer stay on the site-wide --accent since they're siblings of
   <main>, not descendants, so this override never reaches them). */
main.theme-plannender { --accent: #FA9884; }
main.theme-volo { --accent: #BA9CB5; }
main.theme-partypeople { --accent: #F425D1; }

html { scroll-behavior: smooth; }

/* ---------- Scroll reveal (tagged by js/main.js) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}
.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Gentle stagger when several siblings reveal together */
.grid .reveal-visible:nth-child(2), .portfolio-grid .reveal-visible:nth-child(2) { transition-delay: 0.07s; }
.grid .reveal-visible:nth-child(3), .portfolio-grid .reveal-visible:nth-child(3) { transition-delay: 0.14s; }
.grid .reveal-visible:nth-child(4), .portfolio-grid .reveal-visible:nth-child(4) { transition-delay: 0.21s; }
/* .portfolio-item-offset uses transform for its column stagger - the reveal
   transition must not fight it, so restore that offset once visible. */
.portfolio-item-offset.reveal-visible { transform: translateY(15%); }
.portfolio-item-offset-sm.reveal-visible { transform: translateY(5%); }
.portfolio-item-offset.reveal { transform: translateY(calc(15% + 22px)); }
.portfolio-item-offset-sm.reveal { transform: translateY(calc(5% + 22px)); }
@media (max-width: 700px) {
  .portfolio-item-offset.reveal, .portfolio-item-offset-sm.reveal { transform: translateY(22px); }
  .portfolio-item-offset.reveal-visible, .portfolio-item-offset-sm.reveal-visible { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .portfolio-item-offset.reveal { transform: translateY(15%); }
  .portfolio-item-offset-sm.reveal { transform: translateY(5%); }
}

/* ---------- Hero load-in (landing page) ---------- */
@keyframes plFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero h1 { animation: plFadeUp 0.6s ease-out both; }
.hero p { animation: plFadeUp 0.6s ease-out 0.12s both; }
.hero .hero-actions { animation: plFadeUp 0.6s ease-out 0.24s both; }
@media (prefers-reduced-motion: reduce) {
  .hero h1, .hero p, .hero .hero-actions { animation: none; }
}

body {
  /* Geändert: Inter als primäre Schriftart */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

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

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 16px;
  padding-bottom: 16px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { width: 36px; height: 36px; object-fit: contain; }
.brand span { font-weight: 400; font-size: 18px; color: var(--text); }

.main-nav { display: flex; align-items: center; gap: 36px; }
.main-nav a {
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 14px; /* Minimal kleiner für Eleganz */
  font-weight: 400; /* Reduziert von 500 */
  transition: color 0.15s ease;
  white-space: nowrap;
}
.main-nav a:hover, .main-nav a.active { color: var(--text); }

.nav-dropdown { position: relative; }
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px;
  min-width: 180px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  z-index: 60;
}
.nav-dropdown:hover .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a { display: block; padding: 10px 14px; border-radius: 6px; font-size: 14px; }
.nav-dropdown-menu a:hover { background: var(--surface-2); }

.header-actions { display: flex; align-items: center; gap: 14px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: none; border: none; cursor: pointer;
  padding: 8px;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s ease;
}
.btn-white { background: #fff; color: #0a0a0a; }
.btn-white:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(255, 255, 255, 0.1); }
.btn-outline { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn-outline:hover { background: var(--surface-2); border-color: var(--text-secondary); }
.btn-accent { background: var(--accent); color: #000; }
.btn-accent:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(255, 255, 255, 0.15); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn:focus-visible { outline: 2px solid var(--text-secondary); outline-offset: 2px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}
.btn-large { padding: 14px 28px; font-size: 15px; }

/* ---------- Hero ---------- */
.hero {
  padding: 130px 0 60px;
  text-align: center;
  min-height: 82vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.hero h1 {
  font-size: 72px;
  font-weight: 400;
  line-height: 0.95;
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}
.hero h1 .line-2 { color: var(--text-secondary); display: block; font-weight: 400; }
.hero p {
  color: var(--text-secondary);
  font-weight: 300;
  font-size: 18px;
  max-width: 500px;
  margin: 0 auto 44px;
  line-height: 1.6;
}
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero-scroll-hint {
  margin-top: 56px;
  color: var(--text-muted);
  animation: hero-bounce 2.2s ease-in-out infinite;
}
@keyframes hero-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-hint { animation: none; }
}

.page-hero {
  padding: 70px 0 50px;
  text-align: center;
}
.eyebrow {
  color: var(--accent);
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 12px;
}
.page-hero h1 { font-size: 40px; font-weight: 500; margin-bottom: 16px; line-height: 1.15; }
.page-hero h1 .line-2 { display: block; font-weight: 400; font-size: 0.85em; margin-top: 4px; color: var(--text-secondary); }
.page-hero p { color: var(--text-secondary); font-weight: 350; font-size: 17px; max-width: 620px; line-height: 1.6; margin-left: auto; margin-right: auto; }

.page-hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; text-align: left; }
.page-hero-grid p { margin-left: 0; margin-right: 0; }
.page-hero-visual { display: flex; justify-content: center; }
.page-hero-visual img {
  max-width: 100%;
  width: 300px;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

  /* width/top use % of the cluster itself (not px) so the whole cluster
     scales fluidly with its grid column instead of overflowing it on
     narrower desktop/tablet widths. */
  .phone-cluster { position: relative; width: 100%; max-width: 640px; aspect-ratio: 640 / 920; margin: 0 auto; }
  .phone-cluster img {
    position: absolute; max-width: none;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.4));
    transition: transform 0.4s ease;
  }
  .phone-cluster-center { left: 50%; top: 2%; width: 60%; transform: translateX(-50%); z-index: 0; }
  .phone-cluster-left { left: -2%; top: 25.5%; width: 40%; z-index: 1; transform: rotate(-4deg); }
  .phone-cluster-right { right: -2%; top: 25.5%; width: 40%; z-index: 1; transform: rotate(4deg); }
  .phone-cluster:hover .phone-cluster-center { transform: translateX(-50%) translateY(-6px); }
  .phone-cluster:hover .phone-cluster-left { transform: rotate(-6deg) translateY(-3px); }
  .phone-cluster:hover .phone-cluster-right { transform: rotate(6deg) translateY(-3px); }

  @media (prefers-reduced-motion: reduce) {
    .phone-cluster img { transition: none; }
  }
  @media (max-width: 900px) {
    .phone-cluster { max-width: 380px; height: 340px; }
    .phone-cluster-center { width: 170px; }
    .phone-cluster-left { width: 130px; left: 8%; top: 20.5%; }
    .phone-cluster-right { width: 130px; right: 8%; top: 20.5%; }
    .page-hero-grid { grid-template-columns: 1fr; text-align: center; }
    .page-hero-grid .hero-actions { justify-content: center !important; }
    .page-hero-visual { order: -1; margin-bottom: 12px; }
    .page-hero-visual img { width: 220px; }
  }

/* ---------- Sections ---------- */
section { padding: 60px 0; }
section.tight { padding: 40px 0; }
#apps { padding-top: 110px; }
.section-title { font-size: 32px; font-weight: 500; margin-bottom: 14px; text-align: center; }
.section-subtitle { color: var(--text-secondary); text-align: center; max-width: 560px; margin: 0 auto 48px; font-size: 16px; font-weight: 400; }

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  transition: border-color 0.2s ease;
}
.card:hover { border-color: #333; }
.card .icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  margin-bottom: 20px;
}
.card h3 { font-size: 18px; font-weight: 500; margin-bottom: 8px; }
.card p { color: var(--text-secondary); font-size: 14px; line-height: 1.6; }

.portfolio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 40px; }
.portfolio-item { text-align: center; }
/* Slight stagger between the left and right column of app tiles. */
.portfolio-item-offset { transform: translateY(15%); }
.portfolio-item-offset-sm { transform: translateY(5%); }
.portfolio-tile {
  position: relative; border-radius: 24px; aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; margin-bottom: 20px;
  border: 1px solid var(--border);
  transition: transform 0.3s ease;
}
.portfolio-item:hover .portfolio-tile { transform: translateY(-4px); }
.portfolio-tile-photo { background: var(--surface-2); }
.portfolio-tile-photo img { width: 100%; height: 100%; object-fit: cover; }
.portfolio-tile-blue { background: #4B5E6C; }
.portfolio-tile-teaser { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px; }
.portfolio-tile-teaser .teaser-title { font-size: 22px; font-weight: 500; color: var(--text); }
.portfolio-tile-teaser .teaser-sub { font-size: 14px; color: var(--text); }
.portfolio-item h3 { font-size: 20px; font-weight: 500; margin-bottom: 6px; color: var(--text); }
.portfolio-item p { color: var(--text-secondary); font-size: 14px; margin-bottom: 16px; }

@media (max-width: 700px) {
  .portfolio-grid { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; }
  .portfolio-item-offset, .portfolio-item-offset-sm { transform: none; }
  /* Mobile-only order: Volo, PlanNender, PartyPeople, Mehr PineApps -
     desktop's 2-column source order (PlanNender, PartyPeople, Volo, Mehr
     PineApps) stays untouched. */
  .portfolio-item:nth-child(1) { order: 2; } /* PlanNender */
  .portfolio-item:nth-child(2) { order: 3; } /* PartyPeople */
  .portfolio-item:nth-child(3) { order: 1; } /* Volo */
  .portfolio-item:nth-child(4) { order: 4; } /* Mehr PineApps */
}

.feature-row {
  display: grid; grid-template-columns: 60px 1fr; gap: 24px;
  padding: 24px 0; border-bottom: 1px solid var(--border); align-items: center;
}
.feature-row:last-child { border-bottom: none; }
/* Outline entfernt für cleane Optik */
.feature-row .num { font-size: 24px; font-weight: 500; color: var(--text-muted); }
.feature-row h3 { font-size: 16px; font-weight: 500; margin-bottom: 4px; }
.feature-row p { color: var(--text-secondary); font-size: 14px; }

/* Bottom-of-page CTA - plain, unboxed, blends into the page like any other
   section instead of sitting in its own bordered card. */
.cta-block { text-align: center; max-width: 560px; margin: 0 auto; }
.cta-block h2 { font-size: 32px; font-weight: 500; margin-bottom: 14px; }
.cta-block p { color: var(--text-secondary); margin-bottom: 26px; font-size: 16px; line-height: 1.7; }

/* ---------- Forms ---------- */
.form-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.job-apply-form { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border); }
/* Uppercase und Letter-Spacing für mehr Ruhe entfernt */
.form-field label { font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.form-field input, .form-field textarea, .form-field select {
  font: inherit; padding: 12px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
  transition: border-color 0.2s ease;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline: none; border-color: var(--text-secondary); }
.form-field textarea { min-height: 120px; resize: vertical; }
.form-field input[type="file"] { padding: 8px; font-size: 13px; }

/* ---------- Jobs page: collapsible listings + document rows ---------- */
.job-apply-form h4 { font-size: 14px; font-weight: 600; margin: 24px 0 12px; }
.job-apply-form h4:first-child { margin-top: 0; }
.job-listing { padding: 0; overflow: hidden; }
.job-listing-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; padding: 32px; background: none; border: none; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.job-listing-header:hover { background: var(--surface-2); }
.job-listing-chevron { flex-shrink: 0; font-size: 18px; color: var(--text-secondary); transition: transform 0.2s ease; }
.job-listing-chevron.open { transform: rotate(180deg); }
.job-listing-body { padding: 0 32px 32px; }
.job-document-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end;
  padding: 16px; margin-bottom: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.job-document-row .form-field { margin-bottom: 0; }
.btn-outline.btn-small { padding: 8px 16px; font-size: 13px; margin-bottom: 20px; }
@media (max-width: 640px) {
  .job-document-row { grid-template-columns: 1fr; }
}
/* Custom-styled file field: the native input keeps its real "Datei
   auswählen" / "Keine ausgewählt" rendering (accessibility, native picker),
   the × button just sits on top at the right edge - padding-right on the
   input reserves space so the browser's own filename text never runs
   underneath it. Replaces the old separate "Entfernen" button, which sat in
   its own grid column and got clipped on narrower screens. */
.file-field { position: relative; }
.file-field input[type="file"] { padding-right: 36px; width: 100%; }
.file-field .file-clear-btn {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  width: 24px; height: 24px; border: none; border-radius: 50%;
  background: transparent; color: var(--text-secondary);
  font-size: 16px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.file-field .file-clear-btn:hover { background: var(--surface-2); color: var(--text); }
.checkbox-row { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--text-secondary); margin-bottom: 24px; }
.checkbox-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  margin-top: 2px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 6px;
  background: #e8e8e8;
  border: 1px solid var(--border);
  cursor: pointer;
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.checkbox-row input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.checkbox-row input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid #000;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.checkbox-row input[type="checkbox"]:focus-visible { outline: 2px solid var(--text-secondary); outline-offset: 2px; }
.checkbox-row a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--text-muted); }

/* ---------- Footer ---------- */
.site-footer { background: var(--bg); margin-top: auto; padding: 60px 0 24px; }
.footer-top { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-bottom: 40px; }
.footer-brand { display: flex; align-items: center; gap: 24px; }
.footer-brand-logo { width: 160px; height: 160px; object-fit: contain; flex-shrink: 0; }
.footer-company { font-weight: 500; font-size: 15px; margin-bottom: 12px; line-height: 1.4; color: var(--text); }
.footer-contact { color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
.footer-contact a { color: var(--text-secondary); text-decoration: none; transition: color 0.2s ease; }
.footer-contact a:hover { color: var(--text); }
.footer-social { margin-top: 14px; }
.footer-social-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text-secondary); text-decoration: none; font-size: 14px;
  transition: color 0.2s ease;
}
.footer-social-link:hover { color: var(--text); }

.footer-newsletter h2 { font-size: 20px; font-weight: 500; margin-bottom: 16px; }
.newsletter-form { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.newsletter-form input {
  flex: 1; min-width: 200px; font: inherit; padding: 12px 16px;
  border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text);
}
.newsletter-form input:focus { outline: none; border-color: var(--text-secondary); }

.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: 12px; padding-top: 24px; font-size: 13px; color: var(--text-muted);
}
.footer-legal-links { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-legal-links a { color: var(--text-muted); text-decoration: none; }
.footer-legal-links a:hover { color: var(--text-secondary); }

/* ---------- Legal pages ---------- */
.legal-content h2 { font-size: 18px; font-weight: 500; margin: 32px 0 12px; color: var(--text); }
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 { font-size: 15px; font-weight: 600; margin: 18px 0 6px; color: var(--text); }
.legal-content p { color: var(--text-secondary); margin-bottom: 14px; font-size: 14px; }
.legal-content ul { color: var(--text-secondary); margin: 0 0 14px 20px; font-size: 14px; }
.legal-content ul.plain { margin-left: 0; }
.legal-content ul.plain li { margin-bottom: 10px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%);
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  padding: 12px 24px; border-radius: 8px; font-size: 14px; font-weight: 500;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5); z-index: 100; transition: opacity 0.2s ease;
}
.toast.error { border-color: var(--error); color: var(--error); }

/* ---------- Cookie consent banner (two layers - see js/cookie-banner.js) ---------- */
.cookie-banner {
  position: fixed;
  left: 24px; right: 24px; bottom: 24px;
  max-width: 640px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 200;
}
.cookie-simple, .cookie-settings { display: flex; flex-direction: column; gap: 12px; }
.cookie-banner-text { font-size: 13px; line-height: 1.6; color: var(--text-secondary); }
.cookie-banner-text a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--text-muted); }
/* All three buttons share the exact same .btn.btn-accent style/size/color on
   purpose - none may look more prominent than another (no "nudging" toward
   accept). */
.cookie-banner-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.cookie-legal-links { display: flex; gap: 14px; justify-content: flex-end; }
.cookie-legal-links a { font-size: 12px; color: var(--text-muted); text-decoration: none; }
.cookie-legal-links a:hover { color: var(--text-secondary); }

.cookie-category { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; }
.cookie-category-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cookie-category-head h3 { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.cookie-category-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.cookie-provider-details { margin-top: 10px; font-size: 12px; }
.cookie-provider-details summary { cursor: pointer; color: var(--text-secondary); font-weight: 500; }
.cookie-provider-empty { margin-top: 8px; color: var(--text-muted); font-size: 12px; }
.cookie-provider-table-wrap { overflow-x: auto; margin-top: 8px; }
.cookie-provider-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.cookie-provider-table th, .cookie-provider-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.cookie-provider-table th { color: var(--text-muted); font-weight: 600; }

/* Toggle switch - checkbox styled as a slider, essential's is disabled+on */
.cookie-toggle { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.cookie-toggle input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.cookie-toggle input:disabled { cursor: not-allowed; }
.cookie-toggle-slider {
  position: absolute; inset: 0;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
  transition: background 0.15s ease; pointer-events: none;
}
.cookie-toggle-slider::before {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%; background: var(--text);
  transition: transform 0.15s ease;
}
.cookie-toggle input:checked + .cookie-toggle-slider { background: var(--accent); border-color: var(--accent); }
.cookie-toggle input:checked + .cookie-toggle-slider::before { background: #000; transform: translateX(18px); }
.cookie-toggle input:disabled + .cookie-toggle-slider { opacity: 0.6; }
.cookie-toggle input:focus-visible + .cookie-toggle-slider { outline: 2px solid var(--text-secondary); outline-offset: 2px; }

@media (max-width: 480px) {
  .cookie-banner { left: 12px; right: 12px; bottom: 12px; padding: 18px; }
  .cookie-banner-actions { flex-direction: column; align-items: stretch; }
  .cookie-legal-links { justify-content: center; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  .site-header.menu-open .main-nav {
    display: flex; flex-direction: column; align-items: center; position: absolute;
    top: 100%; left: 0; right: 0; background: var(--bg);
    border-bottom: 1px solid var(--border); padding: 12px 24px 20px; gap: 4px;
  }
  .site-header.menu-open .main-nav a { padding: 12px 4px; text-align: center; }
  /* No "Apps" sub-menu on mobile - PlanNender/PartyPeople/Volo show as flat,
     centered top-level items instead (desktop keeps the hover dropdown). */
  .site-header.menu-open .nav-dropdown { display: contents; }
  .site-header.menu-open .nav-dropdown-trigger { display: none; }
  .site-header.menu-open .nav-dropdown-menu { display: contents; }
  .hero h1 { font-size: 48px; }
  .page-hero h1 { font-size: 32px; }
  .page-hero-grid p { margin-left: auto; margin-right: auto; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

  /* Everything below: center text, icons and form rows on mobile instead
     of the desktop's left-aligned layout. */
  .card { text-align: center; }
  .card .icon { margin-left: auto; margin-right: auto; }
  .feature-row { grid-template-columns: 1fr; gap: 8px; justify-items: center; text-align: center; }
  .legal-content { text-align: center; }
  .legal-content ul { display: inline-block; text-align: left; }

  .footer-top { grid-template-columns: 1fr; gap: 36px; }
  .footer-brand { gap: 20px; justify-content: center; text-align: center; order: 2; }
  .footer-brand-logo { display: none; }
  .footer-newsletter { text-align: center; order: 1; }
  .newsletter-form { justify-content: center; }
  .checkbox-row { justify-content: center; text-align: center; }
  .footer-legal-links { justify-content: center; }
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; }
}
@media (max-width: 480px) {
  .footer-brand { flex-direction: column; align-items: center; gap: 16px; }
}