/* =========================================
FILE: /styles.css
Shared styles for all pages (dark theme, components, responsive)
========================================= */
:root{
--bg: #121212;
--card: #1E1E1E;
--muted: #E6E1E5;
--text: #E3E3E3;
--brand: #00C4CC;
--brand-2: #004F4A;
--shadow: 0 10px 30px rgba(0,0,0,.35);
--radius: 18px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}


/* Utilities */
.visually-hidden-focusable{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.visually-hidden-focusable:focus{left:12px;top:12px;width:auto;height:auto;padding:8px 12px;background:#000;border-radius:8px}
.badge{display:inline-flex;gap:8px;align-items:center;border:1px dashed rgba(255,255,255,.2);border-radius:999px;padding:8px 12px;color:var(--text);background:rgba(255,255,255,.04);font-size:12px;line-height:1}


/* Layout */
.container{max-width:1150px;margin:0 auto;padding:0 20px}
header{position:sticky;top:0;z-index:40;background:rgba(18,18,18,.9);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:12px}
.logo{display:flex;gap:10px;align-items:center;font-weight:700;letter-spacing:.2px}
.logo-img{width:26px;height:26px;border-radius:6px;box-shadow:0 4px 14px rgba(0,196,204,.4)}
.nav a{opacity:.95}
.nav-links{display:flex;gap:18px;font-size:14px;color:var(--muted)}
.nav-links a[aria-current="page"]{color:#fff;font-weight:600}
.lang-switch{display:flex;gap:12px;font-size:14px;color:var(--muted)}
.nav-cta{display:flex}


.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.12);padding:10px 14px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));color:#fff;font-weight:700;box-shadow:var(--shadow)}
.btn.primary{border-color:transparent;background:linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%)}
.btn.ghost{background:transparent;border-color:rgba(255,255,255,.16)}
.btn:focus-visible{outline:2px solid var(--brand); outline-offset:2px}


section{padding:64px 0}
.section-title{font-size:28px;margin:0 0 10px}
.section-text{color:var(--muted);max-width:70ch}


.hero{padding:80px 0 40px}
.hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center}
.kicker{color:#b4b9c8;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.title{font-size:clamp(32px, 6vw, 48px);line-height:1.06;margin:10px 0 14px}
.subtitle{color:var(--muted);font-size:clamp(16px, 2.3vw, 18px);max-width:52ch}
.cta{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}
.mock{
  display:flex;                 /* Kinder (z. B. .device) schön zentrieren */
  align-items:center;
  justify-content:center;

  border-radius:var(--radius);
  background:var(--card);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow);

  position:relative;
  overflow:visible;             /* wichtig: Schatten/Notch nicht abschneiden */
  padding:16px;                 /* kleiner Innenabstand statt harter Clip */
}

.mock-phone{aspect-ratio:9/19}

/* Device frame (CSS-only, robust on phones) */
.device{
  --w: 320px;                /* Zielbreite im Layout */
  --radius: 36px;            /* Außenradius */
  --bezelX: clamp(10px, 4vw, 16px);   /* linker/rechter Rand */
  --bezelY: clamp(12px, 5vw, 22px);   /* oberer/unterer Rand */
  --notchW: 38%;                     /* Breite der Notch relativ zur Gerätebreite */
  --notchH: 10px;                    /* Höhe der Notch (fix) */

  width: min(100%, var(--w));
  aspect-ratio: 9 / 19.5;
  position: relative;
  border-radius: var(--radius);
  background: #0b0b0b;
  box-shadow:
    0 20px 60px rgba(0,0,0,.45),
    inset 0 0 0 6px #111;
}

/* Bildschirm – mit separaten X/Y-Rändern (kein Prozent-Inset mehr) */
.device .screen{
  position:absolute;
  left:   var(--bezelX);
  right:  var(--bezelX);
  top:    var(--bezelY);
  bottom: var(--bezelY);
  border-radius: calc(var(--radius) * 0.66);
  object-fit: cover;
  display:block;
  width:auto; height:auto;
}

/* Notch: mittig, Breite relativ, Höhe fix */
.device::before{
  content:"";
  position:absolute;
  left:50%;
  top: var(--bezelY);
  width: var(--notchW);
  height: var(--notchH);
  transform: translateX(-50%);
  background:#0b0b0b;
  border-bottom-left-radius:16px;
  border-bottom-right-radius:16px;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset;
}

/* Lautsprecher-Slot */
.device::after{
  content:"";
  position:absolute;
  left:50%;
  top: calc(var(--bezelY) + 6px);
  width: 24%;
  height: 6px;
  transform: translateX(-50%);
  background:#1b1b1b;
  border-radius:999px;
}


.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.card h3{margin:6px 0 8px;font-size:18px}
.card p{color:var(--muted);margin:0}


.templates{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.template{background:var(--card); border:1px solid rgba(255,255,255,.1);padding:14px;border-radius:16px;min-height:160px;display:flex;flex-direction:column;justify-content:space-between}
.tpl-title{font-size:14px;font-weight:600}
.tpl-thumb{height:88px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);overflow:hidden}
.tpl-desc{margin-top:10px;color:var(--muted);font-size:13px;line-height:1.4}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.tag{font-size:12px;color:var(--text);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:4px 8px;background:rgba(255,255,255,.04)}


/* Tables */
table{width:100%;border-collapse:separate;border-spacing:0 10px}
th,td{text-align:left;padding:12px 14px}
thead th{color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.08em}
tbody tr{background:var(--card);border:1px solid rgba(255,255,255,.08)}
tbody tr td:first-child{border-top-left-radius:12px;border-bottom-left-radius:12px}
tbody tr td:last-child{border-top-right-radius:12px;border-bottom-right-radius:12px}


/* Pricing */
.pricing{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.price h3{font-size:22px;margin:6px 0}
.price .amount{font-size:36px;font-weight:800}
.price ul{list-style:none;margin:12px 0 0;padding:0;color:var(--muted)}
.price ul li{margin:6px 0}


/* Footer */
footer{padding:40px 0;color:var(--muted);border-top:1px solid rgba(255,255,255,.08)}


/* Mobile Navigation */
.menu-toggle{
  display:none;
  background:transparent;
  border:1px solid rgba(255,255,255,.16);
  border-radius:10px;
  padding:8px 10px;
  cursor:pointer
}
.menu-toggle .bar{display:block;width:22px;height:2px;margin:4px 0;background:var(--text)}
.mobile-nav{display:none;flex-direction:column}
.mobile-nav[hidden]{display:none}

/* ==========================
   Mobile refinements (2025-09)
   ========================== */
/* Hide desktop nav earlier to prevent overlap */
@media (max-width: 1024px){
  .nav-links{display:none}
  .nav-cta{display:none}
  .menu-toggle{display:inline-flex;flex-direction:column}
   body.nav-open header{ z-index: 1200; } /* hebt Mobile-Menü über das Announcement */
  /* 👉 WICHTIG: Mobile-Menü sichtbar machen, wenn nicht hidden */
  .mobile-nav{
    display:flex;                   /* war global: none */
    flex-direction:column;
    gap:12px;
    padding:14px 20px;
    background:rgba(18,18,18,.98);
  }
  .mobile-nav a{
    padding:10px 0;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .mobile-nav a:last-child{ border-bottom:none }
}





/* Compact header & hero on small phones */
@media (max-width: 720px){
  .nav{flex-wrap:wrap}
  .lang-switch{display:none}
  .logo span{font-size:16px}
  .hero{padding:56px 0 24px}
  .title{font-size:clamp(28px, 8vw, 36px)}
  .subtitle{font-size:clamp(15px, 4vw, 16px)}
  .cta{gap:8px}
  .btn{padding:12px 14px; font-size:14px}
  .cta .btn{width:100%; justify-content:center} /* full-width CTAs */
  .mock-phone{margin-top:12px}
}


/* Templates: 1 column on narrow screens */
@media (max-width: 700px){
  .templates{grid-template-columns:1fr}
}

/* Ensure badges wrap nicely */
@media (max-width: 400px){
  .badge{white-space:normal}
}

/* ===== FINAL OVERRIDE: device frame ===== */
/* Card um das Gerät: zentriert, nichts abschneiden */
.mock{
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius);
  background:var(--card);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow);
  position:relative;
  overflow:visible;           /* NICHT abschneiden */
  padding:16px;
}

/* Max-Breite für das Phone im Hero */
.mock-phone{ width:100%; max-width:360px; }

/* Smartphone-Rahmen */
.device{
  width:100%;
  aspect-ratio: 9 / 19.5;
  position:relative;
  border-radius:32px;
  background:#0b0b0b;
  box-shadow: 0 20px 60px rgba(0,0,0,.45), inset 0 0 0 6px #111;
}

/* Bildschirmfläche: absolute + feste Insets in px (keine %-Ovale) */
.device .screen{
  position:absolute;
  top:18px; bottom:22px;      /* oben/unten Rand */
  left:14px; right:14px;      /* links/rechts Rand */
  width:calc(100% - 28px);
  height:calc(100% - 40px);
  border-radius:24px;
  object-fit:cover;
  display:block;
}

/* Notch: mittig, einfache feste Maße */
.device::before{
  content:"";
  position:absolute; left:50%;
  top:18px;
  width:38%; height:12px;
  transform:translateX(-50%);
  background:#0b0b0b;
  border-bottom-left-radius:14px;
  border-bottom-right-radius:14px;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset;
}

/* Lautsprecher-Slot */
.device::after{
  content:"";
  position:absolute; left:50%;
  top:26px;
  width:24%; height:6px;
  transform:translateX(-50%);
  background:#1b1b1b;
  border-radius:999px;
}

/* Auf sehr kleinen Phones etwas schmalere Ränder */
@media (max-width: 420px){
  .device .screen{
    top:14px; bottom:18px; left:12px; right:12px;
    width:calc(100% - 24px); height:calc(100% - 32px);
    border-radius:22px;
  }
  .device::before{ top:14px; height:10px }
  .device::after{ top:22px; height:5px }
}

/* ==========================
   Announcement Banner (responsive)
   ========================== */
.announcement{
  background: var(--brand-2);
  border-bottom: 1px solid rgba(255,255,255,.08);
  position: sticky;          /* Desktop klebend */
  top: 0;
  z-index: 1000;             /* über dem Header */
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
}
.announcement .inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  flex-wrap: wrap;           /* erlaubt Zeilenumbruch auf Tablets */
}
.announcement .info{
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  line-height: 1.25;
  flex: 1 1 auto;
}
.btn.small{                  /* kleiner CTA im Banner */
  padding: 8px 12px;
  font-size: .92rem;
  line-height: 1;
}

/* leichte Typoverkleinerung bei schmaleren Viewports */
@media (max-width: 920px){
  .announcement .info{ font-size: 14px; }
}

/* Smartphone-Optimierung */
@media (max-width: 720px){
  .announcement{
    position: relative;      /* Banner nicht klebend, verhindert Überschneidung mit sticky Header */
    top: auto;
    padding-top: calc(8px + env(safe-area-inset-top, 0px)); /* Notch-Safe-Area */
    padding-bottom: 8px;
  }
  .announcement .inner{
    flex-direction: column;  /* Text über Button */
    align-items: stretch;
    gap: 8px;
  }
  .announcement .info{
    font-size: 14px;
    white-space: normal;     /* sicherstellen, dass umgebrochen wird */
  }
  .announcement .btn{
    width: 100%;             /* Vollbreite-Button auf Phones */
    justify-content: center;
    padding: 12px 14px;
    font-weight: 700;
  }
}

/* ganz kleine Geräte */
@media (max-width: 360px){
  .announcement .info{ font-size: 13px; }
}

/* ==========================
   MOBILE FIX PACK (2025-09-08)
   ========================== */

/* 0) Grundabstände auf Phones */
@media (max-width: 720px){
  .container{ padding: 0 16px; }
}

/* 1) Announcement: Full-bleed Hintergrund + Content mit Rand,
      robust gegen Zoom-Glitches; Button nicht volle Breite */
.announcement{
  position: sticky;
  top: 0;
  z-index: 1000;
  overflow: visible;
}
.announcement::before{
  content:"";
  position:absolute;
  inset:0 calc(50% - 50vw);        /* Hintergrund bis an die Viewport-Ränder */
  background: var(--brand-2);
  z-index: -1;
}
@media (max-width: 720px){
  .announcement{ position: relative; } /* kein Sticky auf sehr schmalen Screens */
  .announcement .inner{ gap: 8px; flex-direction: column; align-items: stretch; }
  .announcement .info{ font-size: 14px; line-height: 1.3; white-space: normal; }
  .announcement .btn{ width: auto !important; align-self: flex-start; padding: 10px 14px; }
}

/* 2) Hero-Layout auf Phones stacken */
@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; gap: 20px; }
  .mock-phone{ order: 2; margin-top: 8px; }
}

/* 3) Phone-Mock: Screen größer auf Phones */
@media (max-width: 720px){
  .mock-phone{ max-width: 400px; margin-left: auto; margin-right: auto; }
  .device .screen{
    top:12px; bottom:14px; left:10px; right:10px;
    border-radius: 20px;
  }
  .device::before{ top:12px; height:10px; }
  .device::after{ top:20px; height:5px; }
}

/* 4) Vergleichstabelle: horizontal scrollbar + sauberes Alignment */
section table{ width: 100%; }
@media (max-width: 760px){
  section table{
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-spacing: 0 10px;         /* beibehalten, aber als Block */
    margin: 0;
  }
  section thead, section tbody, section tr{ display: table; width: 100%; }
  section th, section td{
    white-space: nowrap;
    vertical-align: middle;
    text-align: left;
  }
  section tbody tr td:first-child{ padding-left: 16px; }
  section tbody tr td:last-child{ padding-right: 16px; }
}

/* 5) Pricing: 1 Spalte auf Mobile + konsistente Typo */
@media (max-width: 860px){
  .pricing{ grid-template-columns: 1fr; gap: 14px; }
  .card.price{ text-align: left; }
  .price .amount{ font-size: 32px; }
  .price ul{ padding-left: 18px; }
}

/* 6) FAQ <details>: größere Tap-Ziele & schöner Open-State */
details.card{ padding: 0; overflow: hidden; }
details.card > summary{
  list-style: none;
  cursor: pointer;
  padding: 16px 18px;
  font-weight: 600;
}
details.card > summary::-webkit-details-marker{ display: none; }
details.card[open] > summary{
  border-bottom: 1px solid rgba(255,255,255,.08);
}
details.card > p{
  padding: 16px 18px;
  margin: 0;
  color: var(--muted);
}

/* 7) Kleinere Typo/Spacing-Finetunes */
@media (max-width: 720px){
  .section-title{ font-size: 24px; }
  .section-text{ font-size: 15px; }
  .templates{ gap: 12px; }
}

/* 8) Verhindert horizontales Page-Scrolling durch Full-Bleed-Elemente */
html, body{ max-width: 100%; overflow-x: hidden; }

/* ==========================
   Vergleichstabelle – zweispaltig, kein Scrollen
   ========================== */
table[aria-label="Vergleich Visli vs andere Apps"]{
  table-layout: fixed;                 /* gleich breite Spalten */
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;              /* „Karten“-Look je Zeile */
}
table[aria-label="Vergleich Visli vs andere Apps"] thead th{
  color: var(--muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 10px 14px;
}
table[aria-label="Vergleich Visli vs andere Apps"] th,
table[aria-label="Vergleich Visli vs andere Apps"] td{
  width: 50%;
  padding: 14px 16px;
  vertical-align: middle;
  white-space: normal;                 /* Zeilenumbruch erlauben */
  overflow-wrap: anywhere;             /* lange Wörter umbrechen */
  word-break: break-word;
  hyphens: auto;
}
table[aria-label="Vergleich Visli vs andere Apps"] tbody tr{
  background: var(--card);
  border: 1px solid rgba(255,255,255,.08);
}
table[aria-label="Vergleich Visli vs andere Apps"] tbody tr td:first-child{
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  border-left: 3px solid var(--brand); /* Visli-Spalte subtil highlighten */
  font-weight: 600;
}
table[aria-label="Vergleich Visli vs andere Apps"] tbody tr td:last-child{
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* auf kleinen Screens kleinere Typo/Abstände, weiterhin 2 Spalten */
@media (max-width: 720px){
  table[aria-label="Vergleich Visli vs andere Apps"] th,
  table[aria-label="Vergleich Visli vs andere Apps"] td{ padding: 12px; font-size: 14px; }
  table[aria-label="Vergleich Visli vs andere Apps"] thead th{ font-size: 12px; }
}
/* Überschreibt frühere „Scrollable Table“-Regel gezielt */
@media (max-width: 700px){
  table[aria-label="Vergleich Visli vs andere Apps"]{
    display: table !important;
    overflow: visible !important;
    white-space: normal !important;
  }
}

/* ==========================
   FAQ – elegantes Akkordeon
   ========================== */
/* auf Mobile einspaltig, sonst Grid bleibt wie gehabt */
@media (max-width: 900px){
  .grid-3{ grid-template-columns: 1fr; }
}

/* Cards sauber ohne Doppel-Padding */
details.card{
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: var(--card);
}
details.card + details.card{ margin-top: 10px; }

details.card > summary{
  list-style: none;
  cursor: pointer;
  padding: 16px 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: relative;
}
details.card > summary::-webkit-details-marker{ display: none; }

/* Chevron */
details.card > summary::after{
  content: "";
  width: 10px; height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
  opacity: .9;
}
details.card[open] > summary::after{
  transform: rotate(-135deg);
}

/* Open-State */
details.card[open] > summary{
  background: rgba(255,255,255,.02);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Inhalt – einheitliches Padding & Typo */
details.card > *:not(summary){
  padding: 16px 18px;
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: 15px;
}

/* Fokus sichtbar für Accessibility */
details.card > summary:focus-visible{
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 10px;
}

/* ==========================
   MOBILE FIXES — FINAL (2025-09-08)
   ========================== */

/* Grundabstände auf Phones */
@media (max-width: 720px){
  .container{ padding: 0 16px; }
}

/* Banner: Full-bleed Hintergrund, Content mit Rand, robust gegen Zoom */
.announcement{
  position: sticky;
  top: 0;
  z-index: 1000;
  overflow: visible;
}
.announcement::before{
  content:"";
  position:absolute;
  inset:0 calc(50% - 50vw);     /* Hintergrund bis zu den Viewporträndern */
  background: var(--brand-2);
  z-index: -1;
}
/* Auf sehr schmalen Screens kein sticky (verhindert Überschneiden) */
@media (max-width: 720px){
  .announcement{ position: relative; top: auto; }
  .announcement .inner{ gap: 8px; flex-direction: column; align-items: stretch; }
  .announcement .info{ font-size: 14px; line-height: 1.3; white-space: normal; }
  .announcement .btn{ width: auto; align-self: flex-start; padding: 10px 14px; } /* NICHT volle Breite */
}

/* Hero: auf Mobile stapeln */
@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; gap: 20px; }
  .mock-phone{ order: 2; margin-top: 8px; }
}

/* Phone-Mock größer/luftiger auf Mobile */
@media (max-width: 720px){
  .mock-phone{ max-width: 400px; margin-left: auto; margin-right: auto; }
  .device .screen{ top:12px; bottom:14px; left:10px; right:10px; border-radius: 20px; }
  .device::before{ top:12px; height:10px; }
  .device::after{ top:20px; height:5px; }
}

/* Vergleichstabelle: immer 2 Spalten, kein Scroll, schöne Umbrüche */
table[aria-label="Vergleich Visli vs andere Apps"]{
  table-layout: fixed;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;
}
table[aria-label="Vergleich Visli vs andere Apps"] thead th{
  color: var(--muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 10px 14px;
}
table[aria-label="Vergleich Visli vs andere Apps"] th,
table[aria-label="Vergleich Visli vs andere Apps"] td{
  width: 50%;
  padding: 14px 16px;
  vertical-align: middle;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
  text-align: left;
}
table[aria-label="Vergleich Visli vs andere Apps"] tbody tr{
  background: var(--card);
  border: 1px solid rgba(255,255,255,.08);
}
table[aria-label="Vergleich Visli vs andere Apps"] tbody tr td:first-child{
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  border-left: 3px solid var(--brand); /* Visli-Spalte highlighten */
  font-weight: 600;
}
table[aria-label="Vergleich Visli vs andere Apps"] tbody tr td:last-child{
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}
@media (max-width: 720px){
  table[aria-label="Vergleich Visli vs andere Apps"] th,
  table[aria-label="Vergleich Visli vs andere Apps"] td{ padding: 12px; font-size: 14px; }
  table[aria-label="Vergleich Visli vs andere Apps"] thead th{ font-size: 12px; }
}

/* Pricing: 1 Spalte auf Mobile, sauber linksbündig */
@media (max-width: 860px){
  .pricing{ grid-template-columns: 1fr; gap: 14px; }
  .card.price{ text-align: left; }
  .price .amount{ font-size: 32px; }
  .price ul{ padding-left: 18px; }
}

/* FAQ: schönes Akkordeon mit Chevron und klarem Open-State */
@media (max-width: 900px){
  .grid-3{ grid-template-columns: 1fr; }
}
details.card{
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: var(--card);
}
details.card + details.card{ margin-top: 10px; }
details.card > summary{
  list-style: none;
  cursor: pointer;
  padding: 16px 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
details.card > summary::-webkit-details-marker{ display: none; }
details.card > summary::after{
  content: "";
  width: 10px; height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
  opacity: .9;
}
details.card[open] > summary::after{ transform: rotate(-135deg); }
details.card[open] > summary{
  background: rgba(255,255,255,.02);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
details.card > *:not(summary){
  padding: 16px 18px;
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: 15px;
}

/* Keine horizontale Page-Scrollerei auf Mobile */
html, body{ max-width: 100%; overflow-x: hidden; }

/* Falls der Inline-Block doch versehentlich noch drin ist, harte Overrides: */
@media (max-width: 720px){
  .announcement{ position: relative !important; top: auto !important; }
}

/* Templates: quadratische Thumbnails für 1080x1080 */
.tpl-thumb{
  height: auto;                  /* überschreibt alte fixe Höhe */
  aspect-ratio: 1 / 1;           /* immer quadratisch */
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}
.tpl-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;              /* füllt den Quadrat-Rahmen schön aus */
  display: block;
}

/* FAQ Desktop: Karten gleich hoch, saubere Ausrichtung */
/* FAQ Desktop: Karten sauber strecken und gleich hoch darstellen */

@media (min-width: 901px){
  .grid-3{ align-items: stretch; }
  .grid-3 details.card{
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .grid-3 details.card > summary{
    display: flex;
    align-items: center; /* min-height setzt das Script */
  }
}

/* Mobile/Tablet: gestaffelter Abstand bleibt angenehm lesbar */
@media (max-width: 900px){
  details.card + details.card{ margin-top: 10px; }
}

/* ==== FAQ (Buttons statt <details>) ==== */
.faq-grid { align-items: stretch; }
.faq-item { display: flex; flex-direction: column; }

.faq-q {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 16px 18px;
  background: transparent;
  color: inherit;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  text-align: left;
}

/* Chevron */
.faq-q::after {
  content: "";
  width: 10px; height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
  opacity: .9;
}
.faq-q[aria-expanded="true"]::after { transform: rotate(-135deg); }

/* Open-State Header */
.faq-q[aria-expanded="true"] {
  background: rgba(255,255,255,.02);
  border-bottom: 1px solid rgba(255,255,255,.08);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

/* Panel */
.faq-a {
  padding: 16px 18px;
  color: var(--muted);
  line-height: 1.55;
  font-size: 15px;
  border-top: none;
}

/* Card-Look beibehalten */
.faq-item.card {
  padding: 0;                 /* Card umschließt Button+Panel, daher kein Doppel-Padding */
  overflow: hidden;
}

/* Desktop: gleiche Höhe der Fragenzeile */
@media (min-width: 901px){
  .faq-grid { align-items: stretch; }
  .faq-item.card { height: 100%; }
  .faq-q { /* min-height wird via JS gesetzt */ }
}

/* ===== Announcement: Smartphone komplett zentrieren ===== */
@media (max-width: 720px){
  .announcement{
    position: relative;
    top: auto;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    padding-bottom: 10px;
  }
  .announcement .inner{
    display: flex;
    flex-direction: column;
    align-items: center;     /* zentriert alle Kinder horizontal */
    gap: 8px;
    text-align: center;      /* Text innerhalb zentrieren */
  }
  .announcement .info{
    display: grid;
    grid-auto-rows: min-content;
    row-gap: 4px;
    justify-items: center;   /* jede Zeile zentriert */
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
    font-size: 14px;
    line-height: 1.4;
  }
  .announcement .info span[aria-hidden="true"]{ display: none; } /* Punkt ausblenden */
  .announcement .btn.small{
    align-self: center;      /* Button mittig */
    width: auto;             /* nicht volle Breite */
    padding: 10px 14px;
  }
}

/* ==== MOBILE ANNOUNCEMENT — HARD OVERRIDE ==== */
@media (max-width: 720px){
  .announcement{
    position: relative !important;       /* kein sticky auf Phone */
    top: auto !important;
    padding: calc(10px + env(safe-area-inset-top,0)) 16px 10px !important;
    overflow: visible !important;
    z-index: 1000 !important;
  }
  /* Vollflächiger Hintergrund bis an die Viewportränder (fix gegen Zoom-Glitches) */
  .announcement::before{
    content: "" !important;
    position: absolute !important;
    inset: 0 calc(50% - 50vw) !important;
    background: var(--brand-2) !important;
    z-index: -1 !important;
  }

  /* Inhalt sauber zentriert */
  .announcement .inner{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-align: center !important;
  }

  /* Text hübsch umbrechen + Mitte */
  .announcement .info{
    display: grid !important;
    row-gap: 4px !important;
    justify-items: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    hyphens: auto !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    max-width: 40ch !important;          /* angenehme Zeilenlänge */
    margin: 0 auto !important;
  }
  .announcement .info span[aria-hidden="true"]{ display:none !important; } /* den Punkt ausblenden */

  /* Button mittig, NICHT volle Breite */
  .announcement .btn.small{
    align-self: center !important;
    width: auto !important;
    padding: 10px 14px !important;
  }
}

/* Preis-Karten robust ausrichten */
.pricing { /* falls noch nicht vorhanden: Grid/Gap für Karten */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.card.price {
  display: flex;
  flex-direction: column;       /* vertikaler Stack */
  height: 100%;
}

.card.price .cta {
  margin-top: auto;             /* Button nach unten schieben */
}

/* optionale Kleinigkeiten für saubere Abstände */
.card.price ul { margin-bottom: 0; }
.card.price small { display: block; margin-top: 6px; }


  .price-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    gap: 1rem;
  }
  .price-footer small {
    color: var(--muted);
  }
/* Mehr Raum im Header auf Smartphones */
@media (max-width: 720px){
  .nav {
    padding: 20px 0; /* vorher 14px */
  }
  .logo span {
    font-size: 17px; /* optional etwas größer für bessere Lesbarkeit */
  }
}

/* ===== Comparison table (EN) — same look as DE ===== */
table[aria-label="Visli vs other apps comparison"]{
  table-layout: fixed;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;
}
table[aria-label="Visli vs other apps comparison"] thead th{
  color: var(--muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 10px 14px;
}
table[aria-label="Visli vs other apps comparison"] th,
table[aria-label="Visli vs other apps comparison"] td{
  width: 50%;
  padding: 14px 16px;
  vertical-align: middle;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
  text-align: left;
}
table[aria-label="Visli vs other apps comparison"] tbody tr{
  background: var(--card);
  border: 1px solid rgba(255,255,255,.08);
}
table[aria-label="Visli vs other apps comparison"] tbody tr td:first-child{
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  border-left: 3px solid var(--brand); /* highlight left column like DE */
  font-weight: 600;
}
table[aria-label="Visli vs other apps comparison"] tbody tr td:last-child{
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* mobile tweaks */
@media (max-width: 720px){
  table[aria-label="Visli vs other apps comparison"] th,
  table[aria-label="Visli vs other apps comparison"] td{
    padding: 12px; font-size: 14px;
  }
  table[aria-label="Visli vs other apps comparison"] thead th{ font-size: 12px; }
}

/* override any earlier "scrollable table" rules */
@media (max-width: 700px){
  table[aria-label="Visli vs other apps comparison"]{
    display: table !important;
    overflow: visible !important;
    white-space: normal !important;
  }
}