/* Klienta – Stil für alle Seiten von klienta.at
 *
 * Eine Datei statt einmal <style> je Seite: Sechs Seiten teilen sich
 * dasselbe Aussehen, und der Browser lädt es genau einmal. Beim Sprung von
 * der Startseite auf eine Branchenseite ist nichts mehr zu holen.
 *
 * Die Farben und Radien sind dieselben wie in der App (lib/core/theme).
 * Wer sie hier ändert, ändert sie nur für die Verkaufsseite – die App hat
 * ihre eigene Quelle.
 */

:root{
  --navy:#192F65;
  --brand:#2F4989;
  --brand-hell:#3D5BA8;
  --brand-soft:#8FA4D1;
  --tint:#EAEEF7;
  --bg:#F5F7FA;
  --surface:#fff;
  --border:#E2E7EF;
  --text:#192F65;
  --text-2:#5B6785;
  /* War #98A2B8: 2,56:1 auf Weiss – WCAG AA verlangt 4,5:1 fuer normalen
     Text. Genau in dieser Farbe standen Preishinweise und Fussnoten, also
     das Kleingedruckte, das man ohnehin schon schwer liest. Jetzt 4,68:1.
     Gemessen am 21.08.2026. */
  --text-3:#68748F;
  --success:#17916B;
  --warn:#C8892B;

  --r-s:10px;
  --r-m:14px;
  --r-l:20px;

  /* Weiche, tief liegende Schatten statt harter Kanten. Der erste Schatten
     zeichnet die Kante, der zweite gibt die Höhe. */
  --schatten-1:0 1px 2px rgba(25,47,101,.06), 0 4px 12px rgba(25,47,101,.05);
  --schatten-2:0 2px 4px rgba(25,47,101,.07), 0 12px 32px rgba(25,47,101,.09);

  --takt:.18s cubic-bezier(.2,.7,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

/* Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt sie auch
   hier nicht. Das ist kein Beiwerk: Für manche Menschen löst Bewegung
   Übelkeit aus. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
}

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
    "Helvetica Neue",Arial,sans-serif;
  background:var(--bg);color:var(--text);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
a{color:var(--brand);text-decoration-thickness:1px;text-underline-offset:2px}

/* Typografie: eine Stufenleiter statt beliebiger Größen. clamp() heißt,
   dass die Schrift mit dem Fenster wächst – ohne Umbruchpunkte. */
h1{font-size:clamp(32px,5.2vw,52px);line-height:1.1;letter-spacing:-1.1px;
  font-weight:800}
h2{font-size:clamp(25px,3.4vw,34px);line-height:1.2;letter-spacing:-.6px;
  font-weight:800;text-align:center}
h3{font-size:17.5px;line-height:1.35;letter-spacing:-.2px;font-weight:700}
.lead{font-size:clamp(16.5px,2vw,19px);color:var(--text-2);max-width:640px;
  line-height:1.6}
.sub{text-align:center;color:var(--text-2);max-width:640px;
  margin:14px auto 40px;font-size:16px}

/* ---------- Kopfzeile ---------- */
header{
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:50;
}
.head-inner{display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:14px 0;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;
  letter-spacing:-.3px;color:var(--navy);text-decoration:none;flex:none}
.logo img{height:30px;width:auto;display:block}
.head-nav{display:flex;align-items:center;gap:22px;font-size:15px;
  font-weight:600}
.head-nav a{color:var(--text-2);text-decoration:none;transition:color var(--takt)}
.head-nav a:hover,.head-nav a[aria-current="page"]{color:var(--navy)}
.head-actions{display:flex;align-items:center;gap:10px}
@media (max-width:900px){ .head-nav{display:none} }

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:var(--r-s);font-weight:700;font-size:15px;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:transform var(--takt),box-shadow var(--takt),
    background var(--takt),color var(--takt)}
.btn-primary{background:var(--navy);color:#fff;box-shadow:var(--schatten-1)}
.btn-primary:hover{background:var(--brand);transform:translateY(-1px);
  box-shadow:var(--schatten-2)}
.btn-ghost{background:var(--surface);color:var(--navy);
  border-color:var(--border)}
.btn-ghost:hover{border-color:var(--brand-soft);transform:translateY(-1px)}
.btn-gross{padding:15px 30px;font-size:16.5px}
.btn:focus-visible,a:focus-visible,summary:focus-visible{
  outline:3px solid var(--brand-soft);outline-offset:3px;border-radius:6px}

/* ---------- Kopfbereich ---------- */
.hero{
  position:relative;padding:92px 0 84px;overflow:hidden;
  background:
    radial-gradient(920px 460px at 10% -12%, #DCE4F6 0%, rgba(220,228,246,0) 62%),
    radial-gradient(780px 420px at 94% 2%, #E9EEFA 0%, rgba(233,238,250,0) 60%),
    var(--bg);
  border-bottom:1px solid var(--border);
}
/* Feines Punktraster darueber. Man sieht es kaum – und genau das ist der
   Zweck: Die Flaeche bekommt Struktur, ohne laut zu werden. */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(25,47,101,.055) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 0%, #000 0%, transparent 78%);
  mask-image:radial-gradient(70% 60% at 50% 0%, #000 0%, transparent 78%);
}
.hero .wrap{position:relative;z-index:1}

/* Ein Teil der Ueberschrift im Farbverlauf. Nur ein Teil – eine komplett
   verlaufende Ueberschrift liest sich schlechter und wirkt schnell billig. */
.verlauf{
  background:linear-gradient(96deg,var(--brand) 8%,var(--brand-hell) 52%,#6E86C4 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.badge{display:inline-flex;align-items:center;gap:8px;background:var(--tint);
  color:var(--brand);border:1px solid #D6DEF0;border-radius:999px;
  padding:7px 15px;font-size:13.5px;font-weight:700;margin-bottom:22px}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--success)}
.hero h1{margin-bottom:18px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0 14px}
.hero-note{color:var(--text-3);font-size:14px}

/* ---------- Abschnitte, Karten ---------- */
section{padding:64px 0}
section.alt{background:var(--surface);border-block:1px solid var(--border)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:18px}
.card{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-m);padding:24px;transition:transform var(--takt),
    box-shadow var(--takt),border-color var(--takt)}
section.alt .card{background:var(--bg)}
.card{position:relative;isolation:isolate}
/* Der Rand im Farbverlauf liegt als eigene Ebene darueber und wird nur beim
   Ueberfahren sichtbar. Ein echter Rand liesse die Karte springen. */
.card::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;z-index:-1;
  background:linear-gradient(135deg,var(--brand-soft),transparent 45%);
  opacity:0;transition:opacity var(--takt);
}
.card:hover{transform:translateY(-3px);box-shadow:var(--schatten-2);
  border-color:transparent}
.card:hover::after{opacity:1}
.card h3{margin-bottom:8px}
.card p{color:var(--text-2);font-size:15px}
.ico{width:40px;height:40px;border-radius:11px;background:var(--tint);
  display:grid;place-items:center;margin-bottom:14px;font-size:19px}

/* Aufzählung mit Haken statt Punkten. */
.haken{list-style:none;display:grid;gap:11px}
.haken li{position:relative;padding-left:29px;color:var(--text-2);
  font-size:15.5px}
.haken li::before{content:"";position:absolute;left:0;top:7px;width:17px;
  height:17px;border-radius:50%;background:var(--tint)}
.haken li::after{content:"";position:absolute;left:5.5px;top:11px;width:6px;
  height:3.5px;border-left:2px solid var(--success);
  border-bottom:2px solid var(--success);transform:rotate(-45deg)}
.haken strong{color:var(--text)}

/* Zwei Spalten: Text neben Bild oder Liste. */
.zwei{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;
  align-items:center}
@media (max-width:860px){ .zwei{grid-template-columns:1fr;gap:28px} }
.zwei h2{text-align:left}
.zwei .sub{text-align:left;margin-left:0}

/* ---------- Preise ---------- */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:18px;max-width:760px;margin:0 auto}
.plan{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-l);padding:30px 26px;text-align:center;position:relative;
  transition:transform var(--takt),box-shadow var(--takt)}
.plan:hover{transform:translateY(-3px);box-shadow:var(--schatten-2)}
.plan.best{border-color:var(--brand-soft);box-shadow:var(--schatten-2)}
.plan .tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--navy);color:#fff;font-size:12.5px;font-weight:700;
  padding:5px 14px;border-radius:999px;white-space:nowrap}
.price{font-size:42px;font-weight:800;letter-spacing:-1.4px;margin:12px 0 2px}
.price span{font-size:16px;font-weight:600;color:var(--text-2);
  letter-spacing:0}
.gross{color:var(--text-3);font-size:13.5px;margin-bottom:20px}
.plan ul{list-style:none;display:grid;gap:9px;margin-bottom:24px;
  font-size:15px;color:var(--text-2);text-align:left}
.plan ul li{padding-left:26px;position:relative}
.plan ul li::before{content:"✓";position:absolute;left:0;color:var(--success);
  font-weight:800}
.plan .btn{width:100%}
.price-note{max-width:760px;margin:28px auto 0;font-size:14px;
  color:var(--text-3);text-align:center;line-height:1.6}

/* ---------- Fragen ---------- */
.faq{max-width:840px;margin:0 auto}
.faq details{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-m);padding:0 22px;margin-bottom:10px;
  transition:border-color var(--takt),box-shadow var(--takt)}
section.alt .faq details{background:var(--bg)}
.faq details[open]{border-color:var(--brand-soft);box-shadow:var(--schatten-1)}
.faq summary{cursor:pointer;list-style:none;padding:19px 0;font-weight:700;
  font-size:16.5px;color:var(--navy);display:flex;gap:16px;
  justify-content:space-between;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--brand-soft);font-size:23px;
  line-height:1;flex:none;transition:transform var(--takt)}
.faq details[open] summary::after{content:"–";transform:rotate(180deg)}
.faq details > div{padding:0 0 19px;color:var(--text-2);font-size:15.5px;
  max-width:70ch}
.faq details > div p + p{margin-top:11px}

/* ---------- Branchen-Kacheln ---------- */
.branchen{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:14px}
.branche{display:block;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-m);padding:20px;text-decoration:none;color:var(--navy);
  transition:transform var(--takt),box-shadow var(--takt),
    border-color var(--takt)}
section.alt .branche{background:var(--bg)}
.branche:hover{transform:translateY(-2px);box-shadow:var(--schatten-2);
  border-color:var(--brand-soft)}
.branche strong{display:block;font-size:16.5px;margin-bottom:5px}
.branche span{color:var(--text-2);font-size:14.5px;font-weight:400}

/* ---------- Brotkrumen ---------- */
.krumen{font-size:13.5px;color:var(--text-3);padding:16px 0 0}
.krumen a{color:var(--text-2);text-decoration:none}
.krumen a:hover{text-decoration:underline}
.krumen span{margin:0 7px;color:var(--brand-soft)}

/* ---------- Anbieter, Fuß ---------- */


footer{background:var(--navy);color:#C7D2EA;padding:34px 0;font-size:14px}
.foot-inner{display:flex;justify-content:space-between;align-items:center;
  gap:18px;flex-wrap:wrap}
footer a{color:#fff;text-decoration:none}
footer a:hover{text-decoration:underline}
footer nav{display:flex;gap:20px;flex-wrap:wrap}

/* ---------- Bildstrecke (nur Startseite) ---------- */
.shots{max-width:960px;margin:0 auto}
.stage{position:relative}
.slide{display:none}
/* `on`, nicht `an`: Umbenannt wurde einmal nur hier, HTML und Skript
   setzen weiterhin `on`. Ergebnis war, dass keine einzige Ansicht
   sichtbar war - die Bilder luden, wurden aber 0 Pixel hoch. */
.slide.on{display:block}
.browser{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-m);overflow:hidden;box-shadow:var(--schatten-2)}
.browser-bar{height:32px;background:var(--bg);border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:6px;padding:0 12px}
.browser-bar i{width:9px;height:9px;border-radius:50%;background:#D6DCE8;
  display:block}
.browser img{display:block;width:100%;height:auto}
/* Ein Geraet, kein weisser Kasten: Der alte Rahmen war nur ein 5 px
   breiter weisser Rand - auf hellem Hintergrund sah das aus wie ein
   angeschnittenes Bild. Dunkler Korpus und Aussparung oben machen auf
   den ersten Blick klar, dass hier ein Handy steht. */
.phone{position:absolute;right:-16px;bottom:-20px;width:172px;
  border-radius:26px;padding:6px;background:#131A2B;
  box-shadow:0 18px 40px rgba(25,47,101,.28)}
.phone::before{content:"";position:absolute;top:13px;left:50%;
  transform:translateX(-50%);width:54px;height:11px;border-radius:8px;
  background:#131A2B;z-index:2}
.phone img{display:block;width:100%;height:auto;border-radius:21px}
@media (max-width:760px){ .phone{display:none} }
.shot-tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;
  margin-bottom:22px}
.shot-tab{background:var(--surface);border:1px solid var(--border);
  border-radius:999px;padding:8px 16px;font-size:14px;font-weight:600;
  color:var(--text-2);cursor:pointer;transition:all var(--takt)}
.shot-tab[aria-selected="true"]{background:var(--navy);color:#fff;
  border-color:var(--navy)}
.shot-caption{text-align:center;margin-top:34px}
.shot-caption p{color:var(--text-2);max-width:600px;margin:8px auto 0}

@media (max-width:640px){
  section{padding:48px 0}
  .hero{padding:52px 0 46px}
  .wrap{padding:0 18px}
}


/* ---------- Zahlenstreifen ---------- */
.zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:1px;background:var(--border);border:1px solid var(--border);
  border-radius:var(--r-m);overflow:hidden;margin-top:44px}
.zahl{background:var(--surface);padding:22px 20px;text-align:center}
.zahl b{display:block;font-size:27px;font-weight:800;letter-spacing:-.8px;
  color:var(--navy);line-height:1.15}
.zahl span{display:block;margin-top:4px;font-size:14px;color:var(--text-2)}

/* ---------- Einblenden beim Scrollen ----------
 * Nur ein paar Pixel und etwas Deckkraft. Wer die Seite schnell
 * durchscrollt, soll nicht auf Animationen warten muessen, und ohne
 * JavaScript bleibt alles trotzdem sichtbar: Die Klasse wird erst
 * hinzugefuegt, wenn das Skript laeuft. */
.js .auf{opacity:0;transform:translateY(14px)}
.js .auf.da{opacity:1;transform:none;
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1)}

/* ---------- Randnotiz ---------- */
.notiz{border-left:3px solid var(--brand-soft);background:var(--tint);
  border-radius:0 var(--r-s) var(--r-s) 0;padding:16px 18px;
  color:var(--text-2);font-size:15px;margin:22px 0}
.notiz strong{color:var(--navy)}


/* ---------- Sprunglink ----------
 * Nur sichtbar, wenn er den Fokus hat. Wer mit der Tastatur arbeitet,
 * springt damit an der Navigation vorbei; alle anderen sehen ihn nie. */
.sprung{position:absolute;left:-9999px;top:0;z-index:100;background:var(--navy);
  color:#fff;padding:12px 20px;border-radius:0 0 var(--r-s) 0;font-weight:700;
  text-decoration:none}
.sprung:focus{left:0}

/* ---------------------------------------------------------------- Film
   Der Erklaerfilm gleich unter dem Kopfbereich. Das Vorschaubild traegt
   dieselbe Rundung und denselben Schatten wie die Browser-Attrappen weiter
   unten, damit der Abschnitt nicht wie ein Fremdkoerper wirkt. */
.film { padding-top: 12px; }

.film-rahmen {
  max-width: 900px;
  margin: 26px auto 0;
  border-radius: var(--r-l);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 26px 60px rgba(25, 47, 101, .16);
  /* Feste Proportion: Ohne sie springt das Layout, sobald das Video geladen
     ist - und ein springendes Layout kostet bei Google Punkte (CLS). */
  aspect-ratio: 16 / 9;
  background: var(--tint);
}

.film-rahmen video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------------------------------------------------------------
   Sichere Zahlung – der Block unter den Preisen.

   Warum überhaupt: Ein Betrieb, der eine unbekannte Software abonniert,
   fragt sich genau zwei Dinge – wer bekommt meine Kartendaten, und komme
   ich da wieder heraus. Wer darauf keine Antwort findet, klickt weg.

   Bewusst nur Wortmarken als Text statt nachgebauter Logos: Ein selbst
   gezeichnetes Visa- oder Mastercard-Zeichen verstösst gegen deren
   Markenrichtlinien. Die Namen zu nennen ist erlaubt und sagt dasselbe.
   --------------------------------------------------------------- */
.zahlung{max-width:760px;margin:30px auto 0;background:var(--surface);
  border:1px solid var(--border);border-radius:14px;padding:22px 24px}
.zahlung h3{font-size:15.5px;font-weight:800;color:var(--navy);
  margin:0 0 4px;display:flex;align-items:center;gap:8px}
.zahlung h3 svg{width:17px;height:17px;flex:none;color:var(--success)}
.zahlung > p{font-size:14px;color:var(--text-2);margin:0 0 14px}
.zahlung ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.zahlung li{position:relative;padding-left:22px;font-size:13.5px;
  line-height:1.5;color:var(--text-2)}
.zahlung li::before{content:"";position:absolute;left:2px;top:7px;width:9px;
  height:9px;border-radius:50%;background:var(--tint);
  box-shadow:inset 0 0 0 2px var(--brand-soft)}
.marken{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.marke{display:inline-block;border:1px solid var(--border);border-radius:7px;
  padding:5px 11px;font-size:12.5px;font-weight:700;color:var(--text-2);
  background:var(--bg);letter-spacing:.2px}
/* Die Originaldateien der Marken – unverändert, nur skaliert. Die
   Markenrichtlinien verlangen freien Raum ringsum; die Zellen sind
   deshalb höher als die Zeichen selbst. */
.marken img{display:block;height:26px;width:auto;border:1px solid var(--border);
  border-radius:7px;background:#fff;padding:4px 8px;box-sizing:content-box}
.marken img[alt="Visa"]{height:30px;padding:2px 8px}
.stripe-badge{margin:0 0 14px}
.stripe-badge img{display:block;height:27px;width:auto}
@media (max-width:560px){.zahlung{padding:18px 16px}}