/* ============================================================
   NAVIGATION
   ============================================================ */
:root{
  --glass:#ffffff;
  --glass-solid:#ffffff;
  --glass-border:rgba(27,36,48,.10);

  --brand:#1f5573;
  --brand-dark:#163c52;

  --text:#1b2430;
  --muted:#55627a;
  --line:rgba(27,36,48,.12);

  --header-h:72px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
:where(.site-header a, .nav-mobile a, .skip-link){color:inherit;text-decoration:none}

/* ---------- Header ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--glass);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.site-header.is-stuck{
  border-bottom-color:var(--glass-border);
  box-shadow:0 10px 30px -20px rgba(20,12,40,.75);
}

.header-inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 clamp(16px,4vw,32px);
  padding-left:max(clamp(16px,4vw,32px), env(safe-area-inset-left));
  padding-right:max(clamp(16px,4vw,32px), env(safe-area-inset-right));
  height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.brand{display:inline-flex;align-items:center;gap:12px;flex:0 0 auto;color:var(--text)}
.brand img{
  width:46px;height:46px;display:block;
  transition:transform .35s var(--ease);
}
.brand:hover img{transform:scale(1.06) rotate(-3deg)}
.brand span{font-weight:650;letter-spacing:-.01em;font-size:1.05rem}
/* Auf sehr schmalen Geräten nur optisch ausblenden — als
   Textalternative des Logo-Links wird der Name weiter gebraucht. */
@media (max-width:420px){
  .brand span{
    position:absolute;
    width:1px;height:1px;
    margin:-1px;padding:0;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
  }
}

/* ---------- Desktop-Navigation ---------- */
.nav-desktop{display:none;align-items:center;gap:6px}
@media (min-width:860px){ .nav-desktop{display:flex} }

.nav-link{
  position:relative;
  padding:10px 14px;
  border-radius:10px;
  color:var(--muted);
  font-weight:550;
  font-size:.98rem;
  transition:color .2s ease;
}
.nav-link::after{
  content:"";
  position:absolute;
  left:14px;right:14px;bottom:6px;
  height:2px;border-radius:2px;
  background:var(--brand);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav-link:hover{color:var(--text)}
.nav-link:hover::after{transform:scaleX(1)}
.nav-link:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

.nav-cta{
  margin-left:10px;
  padding:11px 22px;
  border-radius:999px;
  background:var(--brand);
  color:#fff;
  font-weight:600;
  font-size:.98rem;
  box-shadow:0 10px 24px -14px rgba(31,85,115,.95);
  transition:background-color .25s ease, transform .2s var(--ease), box-shadow .25s ease;
}
.nav-cta:hover{
  background:var(--brand-dark);
  transform:translateY(-1px);
  box-shadow:0 14px 28px -14px rgba(22,60,82,.95);
}
.nav-cta:active{transform:translateY(0)}
.nav-cta:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

/* ---------- Burger ---------- */
.burger{
  display:inline-flex;
  align-items:center;justify-content:center;
  width:44px;height:44px;
  margin-right:-8px;
  border:0;background:transparent;
  border-radius:12px;
  cursor:pointer;
  color:var(--text);
  -webkit-tap-highlight-color:transparent;
  z-index:110;
}
@media (min-width:860px){ .burger{display:none} }
.burger:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.burger span{
  position:absolute;
  width:22px;height:2px;border-radius:2px;
  background:currentColor;
  transition:transform .4s var(--ease), opacity .2s ease, width .4s var(--ease);
}
.burger span:nth-child(1){transform:translateY(-6px)}
.burger span:nth-child(3){transform:translateY(6px);width:14px}
.burger[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.2)}
.burger[aria-expanded="true"] span:nth-child(3){transform:rotate(-45deg);width:22px}

/* ---------- Mobiles Menue ---------- */
.nav-mobile{
  position:fixed;
  inset:0;
  z-index:99;
  background:var(--glass-solid);
  color:var(--text);
  display:flex;
  flex-direction:column;
  padding:calc(var(--header-h) + 24px) clamp(20px,7vw,40px) calc(32px + env(safe-area-inset-bottom));
  /* Kleine Geraete und grosse Systemschrift: lieber scrollen als abschneiden */
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  transition:opacity .35s var(--ease), transform .45s var(--ease), visibility .35s;
}
@media (min-width:860px){ .nav-mobile{display:none} }
.nav-mobile.is-open{opacity:1;visibility:visible;transform:none}

.nav-mobile a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:20px 4px;
  font-size:clamp(1.5rem,7vw,2rem);
  font-weight:600;
  line-height:1.25;
  letter-spacing:-.02em;
  border-bottom:1px solid var(--line);
  opacity:0;
  transform:translateY(14px);
  transition:opacity .45s var(--ease), transform .45s var(--ease), color .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.nav-mobile a .arrow{color:var(--brand);flex:0 0 auto;transition:transform .3s var(--ease)}
.nav-mobile a:active{color:var(--brand)}
.nav-mobile a:active .arrow{transform:translateX(4px)}
.nav-mobile.is-open a{opacity:1;transform:none}
.nav-mobile.is-open a:nth-child(1){transition-delay:.08s}
.nav-mobile.is-open a:nth-child(2){transition-delay:.14s}

.nav-mobile-cta{
  margin-top:auto;
  padding-top:32px;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .45s var(--ease) .2s, transform .45s var(--ease) .2s;
}
.nav-mobile.is-open .nav-mobile-cta{opacity:1;transform:none}
.nav-mobile-cta a{
  display:flex;
  justify-content:center;
  border:0;
  background:var(--brand);
  color:#fff;
  padding:18px 24px;
  border-radius:999px;
  font-size:1.05rem;
  font-weight:650;
  letter-spacing:.01em;
  opacity:1;
  transform:none;
  box-shadow:0 16px 34px -18px rgba(31,85,115,1);
  transition:transform .2s var(--ease), background-color .25s ease;
}
.nav-mobile-cta a:active{transform:scale(.98);background:var(--brand-dark)}

/* ---------- Store-Badges im mobilen Menue ----------
   Stehen nur hier, das Panel selbst ist ab 860 px ausgeblendet. */
.nav-mobile-store{
  padding-top:22px;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .45s var(--ease) .28s, transform .45s var(--ease) .28s;
}
.nav-mobile.is-open .nav-mobile-store{opacity:1;transform:none}

.nav-mobile-store__label{
  margin:0 0 12px;
  text-align:center;
  font-size:.92rem;
  font-weight:600;
  color:var(--muted);
}
.nav-mobile-store__badges{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:10px;
}
.nav-mobile-store a{
  display:block;
  padding:0;
  border:0;
  border-bottom:0;
  font-size:inherit;
  font-weight:inherit;
  letter-spacing:normal;
  line-height:normal;
  opacity:1;
  transform:none;
  border-radius:10px;
  transition:transform .2s var(--ease);
}
.nav-mobile-store a:active{transform:scale(.97)}
.nav-mobile-store img{
  display:block;
  width:auto;
  height:clamp(44px,13vw,58px);
}

/* ---------- Skip-Link (Barrierefreiheit / SEO) ---------- */
/* Nicht mit left:-9999px verstecken: in RTL laesst sich links
   herausragender Inhalt scrollen, die Seite waere 10.000px breit. */
.skip-link{
  position:absolute;
  inset-inline-start:0;
  top:0;
  transform:translateY(-120%);
  z-index:200;
  padding:12px 20px;
  background:var(--brand);
  color:#fff;
  border-radius:0 0 12px 0;
  font-weight:600;
}
.skip-link:focus{transform:none}

@media (prefers-reduced-motion:reduce){
  .site-header *,
  .nav-mobile *,
  .site-header,
  .nav-mobile{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ============================================================
   INSEL USEDOM — HERO SLIDER
   Alles ist unter .us-hero gescoped, kollidiert also nicht mit
   bestehendem Theme-CSS. Assets liegen in ./assets/
   ============================================================ */

.us-hero,
.us-stage,
.us-introhead,
.us-appintro,
.us-features,
.us-steps,
.us-reviews,
.us-community,
.us-partners,
.us-legal{
  /* Sprungziele landen unter der klebenden Kopfleiste, nicht darunter */
  scroll-margin-top: var(--header-h, 72px);

  /* ---- Marken-Tokens (hier anpassen) ---- */
  --us-lilac:       #8F7DB1;   /* Grundton aus der Vorlage */
  --us-lilac-deep:  #6B5891;
  --us-lilac-glow:  #A18FC2;
  --us-teal:        #14596B;   /* App-UI */
  --us-gold:        #E2A82C;   /* App-Buttons */
  --us-pink:        #E5007D;   /* App-Akzent */
  --us-magenta:     #C64F8E;   /* Community-Button */
  --us-magenta-hover:#D63E92;
  --us-ink:         #FFFFFF;
  --us-ink-soft:    rgba(255,255,255,.78);
  --us-ink-faint:   rgba(255,255,255,.55);

  /* ---- Komposition (Feintuning der Vorlage) ---- */
  --us-map-left:    22%;
  --us-map-height:  94%;
  --us-map-opacity: .42;
  --us-phone-left:  56%;
  --us-phone-height:94%;
  --us-dots-opacity:.16;

  --us-font-body:'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.us-partners,
.us-partners *{ box-sizing: border-box; }

.us-hero{
  position: relative;
  isolation: isolate;
  width: 100%;
  overflow: hidden;
  /* Beide Verläufe sind vor der Unterkante ausgeblendet, damit der
     Textblock darunter nahtlos anschließt. */
  background:
    linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(110% 80% at 20% 6%, var(--us-lilac-glow) 0%, transparent 60%),
    var(--us-lilac);
  color: var(--us-ink);
  font-family: var(--us-font-body);
  -webkit-font-smoothing: antialiased;
}

.us-hero *,
.us-hero *::before,
.us-hero *::after,
.us-appintro,
.us-appintro *,
.us-appintro *::before,
.us-appintro *::after,
.us-introhead,
.us-introhead *,
.us-features,
.us-features *,
.us-features *::before,
.us-features *::after,
.us-steps,
.us-steps *,
.us-reviews,
.us-reviews *,
.us-community,
.us-community *{ box-sizing: border-box; }

/* Zoom-Sperre: kein Doppeltipp-Zoom, kein Querscrollen */
.us-hero,
.us-introhead,
.us-appintro{
  touch-action: manipulation;
  max-width: 100%;
  overflow-x: clip;
}

/* ---------- Slider-Gerüst ---------- */
.us-hero__viewport{ overflow: hidden; }
.us-hero__track{
  display: flex;
  transition: transform .7s cubic-bezier(.65,.02,.24,1);
  will-change: transform;
}
.us-slide{
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  padding: 34px 20px 40px;
  text-align: center;
}

/* ---------- Ebenen ---------- */
.us-layer{ will-change: transform; }

.us-layer--dots{
  position: absolute;
  inset: -4%;
  z-index: 0;
  /* relativ zu dieser Datei, nicht zur Seite: site.css liegt in assets/ */
  background: url("dots.webp") center/cover no-repeat;
  opacity: 0;
  pointer-events: none;
  animation: us-dots-in 1.1s ease-out .05s both, us-drift 26s ease-in-out 1.2s infinite;
}

.us-layer--map{
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  width: min(155%, 900px);
  translate: -50% -50%;
  pointer-events: none;
  opacity: 0;
  animation: us-map-in 1.3s cubic-bezier(.2,.85,.25,1) .18s both;
}
.us-layer--map img{ display: block; width: 100%; height: auto; }

/* Parallax läuft auf den Bildern, damit es nicht mit den
   Einflug-Keyframes der Ebenen kollidiert. */
.us-layer--map img,
.us-layer--phones img{
  transition: transform .5s cubic-bezier(.2,.8,.3,1);
}

.us-layer--phones{
  position: relative;
  z-index: 2;
  order: 2;
  width: clamp(230px, 62vw, 420px);
  max-width: 100%;
  opacity: 0;
  animation: us-phones-in 1.25s cubic-bezier(.18,.9,.24,1) .42s both;
}
.us-phones__inner{ animation: us-float 7.5s ease-in-out 1.7s infinite; }
.us-layer--phones img{
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 34px 44px rgba(46,28,74,.38));
}

.us-hero a:focus-visible,
.us-hero button:focus-visible{ outline: 2px solid #fff; outline-offset: 3px; border-radius: 999px; }

/* ---------- Sprachen ---------- */
.us-langs{
  position: relative;
  z-index: 3;
  order: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  animation: us-rise .8s cubic-bezier(.2,.8,.3,1) .95s both;
}
.us-langs__label{
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--us-ink-soft);
}
.us-langs__list{
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.us-langs__list li{ animation: us-pop .55s cubic-bezier(.34,1.56,.5,1) both; }
.us-langs__list li:nth-child(1){ animation-delay: 1.02s; }
.us-langs__list li:nth-child(2){ animation-delay: 1.12s; }
.us-langs__list li:nth-child(3){ animation-delay: 1.22s; }
.us-langs__list img{
  display: block;
  width: clamp(40px, 8vw, 58px);
  height: auto;
  filter: drop-shadow(0 6px 12px rgba(46,28,74,.3));
  transition: transform .28s cubic-bezier(.2,.8,.3,1);
}
.us-langs__list img:hover{ transform: translateY(-3px) scale(1.06); }

/* ---------- Slider-Bedienung (ab 2 Slides sichtbar) ---------- */
.us-nav{
  position: absolute;
  z-index: 5;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 50%;
  background: rgba(46,28,74,.22);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background-color .25s, transform .25s;
}
.us-nav:hover{ background: rgba(46,28,74,.45); transform: translateY(-50%) scale(1.06); }
.us-nav--prev{ left: 14px; }
.us-nav--next{ right: 14px; }
.us-nav svg{ width: 18px; height: 18px; }

.us-dots{
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 16px;
  translate: -50% 0;
  display: flex;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.us-dots button{
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.42);
  cursor: pointer;
  transition: width .3s cubic-bezier(.2,.8,.3,1), background-color .3s;
}
.us-dots button[aria-current="true"]{ width: 26px; background: #fff; }

.us-hero[data-single="true"] .us-nav,
.us-hero[data-single="true"] .us-dots{ display: none; }

/* ============================================================
   DESKTOP — freie Komposition wie in der Vorlage
   ============================================================ */
@media (min-width: 1000px){
  .us-slide{
    display: block;
    padding: 0;
    text-align: left;
    aspect-ratio: 3 / 1;
    min-height: 400px;
    max-height: 760px;
  }

  .us-layer--map{
    left: var(--us-map-left);
    top: 50%;
    width: auto;
    height: var(--us-map-height);
    translate: 0 -50%;
    animation-name: us-map-in-desktop;
  }
  .us-layer--map img{ width: auto; height: 100%; }

  .us-layer--phones{
    position: absolute;
    left: var(--us-phone-left);
    top: 50%;
    width: auto;
    height: var(--us-phone-height);
    translate: 0 -50%;
    animation-name: us-phones-in-desktop;
  }
  .us-phones__inner{ height: 100%; }
  .us-layer--phones img{ width: auto; height: 100%; }

  .us-langs{
    position: absolute;
    /* logisch, damit die Gruppe in RTL auf die andere Seite wandert */
    inset-inline-end: clamp(24px, 3vw, 64px);
    bottom: clamp(26px, 5vw, 74px);
    gap: 16px;
  }
  .us-langs__list{ flex-direction: column; gap: 8px; }
  .us-langs__label{ font-size: clamp(.78rem, 1vw, .92rem); }
  .us-langs__list img{ width: clamp(46px, 3.4vw, 64px); }

  .us-dots{ bottom: 22px; inset-inline-start: clamp(32px, 4.5vw, 86px); translate: 0 0; }
  .us-nav--prev{ left: 22px; }
  .us-nav--next{ right: 22px; }
}

/* Schmaler Desktop: etwas mehr Höhe, damit die Komposition nicht klemmt */
@media (min-width: 1000px) and (max-width: 1299px){
  .us-slide{ aspect-ratio: 2.5 / 1; }
  .us-hero{
    --us-phone-height: 90%;
    --us-map-height: 88%;
    --us-map-left: 17%;
    --us-phone-left: 50%;
  }
  /* Label über die Flaggen, damit die Gruppe schmal bleibt */
  .us-langs{
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    inset-inline-end: 20px;
    bottom: 20px;
  }
  .us-langs__label{ font-size: .75rem; }
}

/* Sehr breite Screens */
@media (min-width: 1500px){
  .us-hero{ --us-map-left: 24%; --us-phone-left: 57%; }
}

/* Querformat auf dem Handy: flache Bühne, Phones kleiner */
@media (max-width: 999px) and (orientation: landscape) and (max-height: 520px){
  .us-slide{ padding-block: 24px 28px; gap: 18px; }
  .us-layer--phones{ width: clamp(180px, 30vw, 280px); }
}

/* ============================================================
   ZWEITE BÜHNE — Tipps & Kategorien
   Nutzt dieselbe Mechanik wie oben (.us-hero) und verschiebt nur
   die Komposition über die Variablen.
   ============================================================ */
.us-hero--tips{
  --us-phone-left:  30%;
  --us-phone-height: 86%;
}

.us-layer--icons{
  position: relative;
  z-index: 2;
  order: 3;
  width: clamp(190px, 58vw, 320px);
  max-width: 100%;
  opacity: 0;
  animation: us-icons-in 1.2s cubic-bezier(.18,.9,.24,1) .55s both;
}
.us-icons__inner{ animation: us-float 9s ease-in-out 2s infinite; }
.us-layer--icons img{
  display: block;
  width: 100%;
  height: auto;
  transition: transform .5s cubic-bezier(.2,.8,.3,1);
}

@media (min-width: 1000px){
  .us-hero--tips .us-layer--icons{
    position: absolute;
    left: 59%;
    top: 50%;
    width: 21.5%;
    translate: 0 -50%;
    animation-name: us-icons-in-desktop;
  }
  .us-hero--tips .us-icons__inner{ height: 100%; }
}

@media (min-width: 1000px) and (max-width: 1299px){
  .us-hero--tips{ --us-phone-left: 27%; --us-phone-height: 82%; }
  .us-hero--tips .us-layer--icons{ left: 58%; width: 23%; }
}

/* Tablet: nebeneinander statt gestapelt — sonst wird die Bühne sehr hoch */
@media (min-width: 640px) and (max-width: 999px){
  .us-hero--tips .us-slide{
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 3vw, 40px);
  }
  .us-hero--tips .us-layer--phones{
    order: 1;
    width: clamp(240px, 42vw, 400px);
  }
  .us-hero--tips .us-layer--icons{
    order: 2;
    width: clamp(150px, 25vw, 270px);
  }
}

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes us-icons-in{
  from{ opacity: 0; transform: translateY(26px) scale(.92); }
  to  { opacity: 1; transform: none; }
}
@keyframes us-icons-in-desktop{
  from{ opacity: 0; translate: 56px -46%; scale: .9; }
  to  { opacity: 1; translate: 0 -50%; scale: 1; }
}
@keyframes us-dots-in{
  from{ opacity: 0; transform: scale(1.06); }
  to  { opacity: var(--us-dots-opacity); transform: scale(1); }
}
@keyframes us-drift{
  0%,100%{ transform: translate3d(0,0,0) scale(1); }
  50%    { transform: translate3d(-1.4%, .8%, 0) scale(1.03); }
}
@keyframes us-map-in{
  from{ opacity: 0; translate: -50% -46%; scale: 1.07; }
  to  { opacity: .26; translate: -50% -50%; scale: 1; }
}
@keyframes us-map-in-desktop{
  from{ opacity: 0; translate: -34px -50%; scale: 1.05; }
  to  { opacity: var(--us-map-opacity); translate: 0 -50%; scale: 1; }
}
@keyframes us-phones-in{
  from{ opacity: 0; transform: translateY(34px) scale(.93); }
  to  { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes us-phones-in-desktop{
  from{ opacity: 0; translate: 86px -46%; rotate: 5deg; scale: .93; }
  to  { opacity: 1; translate: 0 -50%; rotate: 0deg; scale: 1; }
}
@keyframes us-float{
  0%,100%{ transform: translateY(0); }
  50%    { transform: translateY(-11px); }
}
@keyframes us-rise{
  from{ opacity: 0; transform: translateY(20px); }
  to  { opacity: 1; transform: translateY(0); }
}
@keyframes us-pop{
  0%  { opacity: 0; transform: scale(.55) translateY(10px); }
  70% { opacity: 1; transform: scale(1.09) translateY(0); }
  100%{ opacity: 1; transform: scale(1) translateY(0); }
}

/* ---------- Barrierefreiheit: Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce){
  .us-hero *{
    animation: none !important;
    transition-duration: .01ms !important;
  }
  .us-hero__track{ transition: none !important; }
  .us-layer--dots{ opacity: var(--us-dots-opacity); }
  .us-layer--map{ opacity: .26; }
  .us-layer--phones,
  .us-layer--icons,
  .us-langs,
  .us-langs__list li{ opacity: 1; }
  @media (min-width: 1000px){ .us-layer--map{ opacity: var(--us-map-opacity); } }
}

/* ============================================================
   TEXTBLOCK unter dem Slider
   ============================================================ */
.us-appintro{
  background: var(--us-lilac);
  color: var(--us-ink);
  font-family: var(--us-font-body);
  -webkit-font-smoothing: antialiased;
}

.us-appintro__inner{
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 20px;
  padding-block: clamp(40px, 6vw, 72px) clamp(48px, 7vw, 80px);
}

/* ---------- Ueberschrift ueber dem Slider ----------
   Eigene Sektion, damit die H1 vor dem Karussell steht. Gleicher
   Grund und gleiche Breite wie der Textblock darunter, nur mit
   knapperem Abstand – der Slider schliesst direkt an. */
/* Gemeinsame Flaeche fuer Ueberschrift und Slider. Der Verlauf
   liegt am Wrapper, nicht an den beiden Sektionen – sonst sitzt
   an der Naht eine sichtbare Kante. */
.us-stage{
  position: relative;
  isolation: isolate;
  /* Absolute Laengen statt Prozent: die Flaeche ist jetzt hoeher als
     der Slider allein, und Prozentwerte wuerden den Schimmer je nach
     Laenge der Ueberschrift verschieben. So bleibt die Unterkante
     reines Lila und geht nahtlos in den Textblock ueber. */
  background:
    linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 340px),
    radial-gradient(1500px 460px at 20% 140px, var(--us-lilac-glow) 0%, transparent 65%),
    var(--us-lilac);
  color: var(--us-ink);
}
.us-stage > .us-hero{ background: none; }

.us-introhead{
  color: var(--us-ink);
  font-family: var(--us-font-body);
  -webkit-font-smoothing: antialiased;
}
.us-introhead__inner{
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 20px;
  padding-block: clamp(28px, 4.2vw, 52px) clamp(24px, 3.4vw, 40px);
}
.us-introhead .us-appintro__title{ margin: 0; }

.us-appintro__title{
  margin: 0 0 clamp(26px, 3.4vw, 42px);
  font-weight: 700;
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -.015em;
  text-align: center;
  text-wrap: balance;
}

.us-appintro__text{
  display: flex;
  flex-direction: column;
  gap: 1em;
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  line-height: 1.55;
}
.us-appintro__text p{ margin: 0; }

.us-appintro__rule{
  height: 0;
  margin: clamp(26px, 3vw, 38px) 0 0;
  border: 0;
  border-top: 1px solid rgba(255,255,255,.55);
}

.us-appintro__download{
  margin-top: clamp(48px, 7vw, 92px);
  text-align: center;
}
.us-appintro__cta{
  margin: 0 0 14px;
  font-weight: 700;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
}

.us-badges{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
.us-badges a{
  display: block;
  border-radius: 10px;
  transition: transform .28s cubic-bezier(.2,.8,.3,1), filter .28s;
}
.us-badges a:hover{ transform: translateY(-3px); filter: brightness(1.12); }
.us-badges img{
  display: block;
  width: auto;
  height: clamp(52px, 7vw, 80px);
}

.us-appintro a:focus-visible{ outline: 2px solid #fff; outline-offset: 4px; }

/* ============================================================
   SEKTION „Wofür eine Insel Usedom App?"
   ============================================================ */
.us-features{
  background: var(--us-lilac);
  color: var(--us-ink);
  font-family: var(--us-font-body);
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
  max-width: 100%;
  overflow-x: clip;
}

.us-features__inner{
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 20px;
  padding-block: clamp(44px, 6.5vw, 86px);
  display: grid;
  gap: clamp(30px, 5vw, 64px);
  align-items: center;
}

.us-features__title{
  margin: 0 0 clamp(18px, 2.2vw, 28px);
  font-weight: 300;
  font-size: clamp(1.7rem, 3.6vw, 2.9rem);
  line-height: 1.15;
  letter-spacing: -.005em;
  text-wrap: balance;
}

.us-features__text{
  display: flex;
  flex-direction: column;
  gap: 1em;
  font-size: clamp(1rem, 1.3vw, 1.14rem);
  line-height: 1.55;
}
.us-features__text p{ margin: 0; }
.us-features__text strong{ font-weight: 700; }

.us-features__media{
  justify-self: center;
  width: 100%;
  max-width: 520px;
}
.us-features__media img{
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 900px){
  .us-features__inner{ grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .us-features__media{ justify-self: end; max-width: 480px; }
}

/* ============================================================
   SEKTION „In drei Schritten" — drei Karten
   ============================================================ */
.us-steps{
  background: var(--us-lilac);
  color: var(--us-ink);
  font-family: var(--us-font-body);
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
  max-width: 100%;
  overflow-x: clip;
}

.us-steps__inner{
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 20px;
  padding-block: clamp(40px, 6vw, 80px);
}

.us-visually-hidden,
.us-hero .us-visually-hidden{
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.us-steps__list{
  display: grid;
  gap: clamp(20px, 2.6vw, 32px);
  justify-content: center;
}

.us-step{
  background: #fff;
  color: #34343C;
  border-radius: clamp(18px, 2vw, 28px);
  padding: clamp(26px, 3vw, 44px) clamp(22px, 2.6vw, 38px);
  box-shadow: 0 20px 44px -28px rgba(38,22,66,.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
}

.us-step__title{
  margin: 0;
  color: #17171C;
  font-weight: 700;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.3;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.us-step__icon{
  display: block;
  width: auto;
  height: clamp(62px, 6vw, 80px);
  margin-block: clamp(20px, 2.6vw, 34px);
}

.us-step__lead{
  margin: 0 0 .9em;
  color: #17171C;
  font-weight: 700;
  font-size: clamp(1rem, 1.35vw, 1.14rem);
  line-height: 1.4;
  text-wrap: balance;
}

.us-step p{
  margin: 0 0 .9em;
  font-size: clamp(.97rem, 1.2vw, 1.05rem);
  line-height: 1.55;
}
.us-step p:last-child{ margin-bottom: 0; }

/* ---------- Mobil: Karten als Swiper ---------- */
@media (max-width: 999px){
  .us-steps__list{
    display: flex;
    justify-content: flex-start;   /* zentriert würde nach links überlaufen */
    gap: 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    /* randlos bis an den Bildschirmrand, damit die Nachbarkarte anschneidet */
    margin-inline: -20px;
    padding-inline: 20px;
    padding-block: 6px 22px;   /* Platz für den Schatten */
  }
  .us-steps__list::-webkit-scrollbar{ display: none; }

  .us-step{
    flex: 0 0 min(86%, 460px);
    max-width: none;
    margin-inline: 0;
    scroll-snap-align: start;
    /* Wischen zieht die Karten mit, statt den Tap abzufangen */
    touch-action: pan-x pan-y;
  }

  /* Punkte: kleine Optik, aber daumengerechte Trefferfläche (44 px) */
  .us-steps__dots{
    display: flex;
    justify-content: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .us-steps__dots button{
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .us-steps__dots button::before{
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: rgba(255,255,255,.5);
    transition: width .3s cubic-bezier(.2,.8,.3,1), background-color .3s;
  }
  .us-steps__dots button[aria-current="true"]::before{ width: 26px; background: #fff; }
  .us-steps__dots button:focus-visible{ outline: 2px solid #fff; outline-offset: -4px; }
}

/* Ab hier nebeneinander — die Punkte entfallen. */
@media (min-width: 1000px){
  .us-steps__list{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .us-step{ max-width: none; }
  .us-steps__dots{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  .us-steps__list{ scroll-behavior: auto; }
}

/* ============================================================
   SEKTION Bewertungen + Store-Links
   ============================================================ */
.us-reviews{
  background: var(--us-lilac);
  color: var(--us-ink);
  font-family: var(--us-font-body);
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
  max-width: 100%;
  overflow-x: clip;
}

.us-reviews__inner{
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 20px;
  padding-block: clamp(40px, 6vw, 80px);
  display: grid;
  gap: clamp(34px, 5vw, 60px);
  align-items: center;
}

.us-reviews__list{
  display: flex;
  flex-direction: column;
  gap: clamp(26px, 3.2vw, 44px);
}

.us-review__stars{
  display: flex;
  gap: 3px;
  color: #fff;
}
.us-review__stars svg{
  /* Breite UND Höhe setzen: das äußere <svg> hat keine eigene viewBox
     und bekäme mit height:auto die Standardhöhe von 150px. */
  width: clamp(21px, 2.1vw, 29px);
  height: clamp(21px, 2.1vw, 29px);
  fill: currentColor;
}

.us-review__meta{
  margin: .55em 0 0;
  font-weight: 700;
  font-size: clamp(.9rem, 1.05vw, 1rem);
}
.us-review__title{
  margin: 1.15em 0 .15em;
  font-weight: 700;
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.35;
}
.us-review__text{
  margin: 0;
  max-width: 58ch;
  font-size: clamp(.97rem, 1.15vw, 1.05rem);
  line-height: 1.5;
  color: rgba(255,255,255,.9);
}

/* ---------- Store-Block ---------- */
.us-stores{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(6px, 1.4vw, 18px);
}
.us-stores__arrow{
  flex: 0 0 auto;
  width: clamp(36px, 4vw, 60px);
  height: auto;
  margin-top: clamp(46px, 6.5vw, 104px);
}
.us-stores__grid{
  display: flex;
  justify-content: center;
  gap: clamp(14px, 2.4vw, 32px);
}
.us-store{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 1.8vw, 22px);
}
.us-store__badge{
  display: block;
  border-radius: 10px;
  transition: transform .25s cubic-bezier(.2,.8,.3,1), filter .25s;
}
.us-store__badge:hover{ transform: translateY(-2px); filter: brightness(1.12); }
.us-store__badge img{
  display: block;
  width: auto;
  height: clamp(46px, 4.6vw, 64px);
}
.us-store__qr{
  display: block;
  width: clamp(118px, 13.5vw, 186px);
  height: auto;
  border-radius: 4px;
}
.us-reviews a:focus-visible{ outline: 2px solid #fff; outline-offset: 4px; }

/* Mobil: keine QR-Codes, nur die beiden Buttons */
@media (max-width: 899px){
  .us-stores__arrow,
  .us-store__qr{ display: none; }
  .us-stores{ align-items: center; }
  .us-stores__grid{ flex-wrap: wrap; gap: 12px; }
  .us-store__badge img{ height: clamp(46px, 13vw, 62px); }
}

@media (min-width: 900px){
  .us-reviews__inner{ grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
}

/* ============================================================
   SEKTION Community
   ============================================================ */
.us-community{
  background: var(--us-lilac);
  color: var(--us-ink);
  font-family: var(--us-font-body);
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
  max-width: 100%;
  overflow-x: clip;
}

.us-community__inner{
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 20px;
  padding-block: clamp(40px, 6vw, 78px);
}

.us-community__title{
  margin: 0 0 clamp(26px, 3.2vw, 40px);
  text-align: center;
  font-weight: 300;
  font-size: clamp(1.6rem, 3.4vw, 2.75rem);
  line-height: 1.18;
  letter-spacing: -.005em;
  text-wrap: balance;
}

.us-community__cta{
  display: block;
  width: 100%;
  padding: clamp(16px, 2.1vw, 26px) clamp(20px, 3vw, 36px);
  border-radius: clamp(12px, 1.7vw, 20px);
  background: var(--us-magenta);
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-weight: 400;
  font-size: clamp(1rem, 1.5vw, 1.32rem);
  line-height: 1.3;
  text-wrap: balance;
  box-shadow: 0 16px 36px -24px rgba(50,20,60,.9);
  transition: background-color .25s ease, transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s ease;
}
.us-community__cta:hover{
  background: var(--us-magenta-hover);
  transform: translateY(-2px);
  box-shadow: 0 22px 42px -24px rgba(50,20,60,1);
}
.us-community__cta:active{ transform: translateY(0); }
.us-community__cta:focus-visible{ outline: 2px solid #fff; outline-offset: 4px; }

/* ============================================================
   SEKTION Partner
   ============================================================ */
.us-partners{
  --us-partner-bg: #4C3E6B;
  background: var(--us-partner-bg);
  color: var(--us-ink);
  font-family: var(--us-font-body);
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
  max-width: 100%;
  overflow-x: clip;
}

.us-partners__inner{
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 20px;
  padding-block: clamp(36px, 5vw, 64px);
}

.us-partners__title{
  margin: 0 0 clamp(28px, 4vw, 52px);
  text-align: center;
  font-weight: 400;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  letter-spacing: .01em;
}

.us-partners__grid{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(22px, 3.4vw, 48px) clamp(20px, 3.4vw, 44px);
}

.us-partner{
  flex: 0 0 auto;
  /* Flex statt Grid: nur so löst max-height:100% des Logos gegen
     die feste Kachelhöhe auf. Im Grid wächst die Zeile mit dem Bild. */
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(112px, 14vw, 172px);
  height: clamp(64px, 7.6vw, 104px);
  border-radius: 8px;
  opacity: .92;
  transition: opacity .25s ease, transform .25s cubic-bezier(.2,.8,.3,1);
}
.us-partner:hover,
.us-partner:focus-visible{
  opacity: 1;
  transform: translateY(-3px) scale(1.04);
}
.us-partner:focus-visible{ outline: 2px solid #fff; outline-offset: 6px; }

/* Jedes Logo fügt sich in dieselbe Box, egal welches Seitenverhältnis */
.us-partner img{
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ============================================================
   Einblendbare Leiste am unteren Rand
   Erscheint, sobald keine der Store-Button-Gruppen im Bild ist.
   ============================================================ */
.us-stickybar{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  background: #fff;
  border-top: 1px solid rgba(27,36,48,.10);
  box-shadow: 0 -12px 34px -22px rgba(20,12,40,.9);
  padding: 10px 16px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  transform: translateY(115%);
  visibility: hidden;
  transition: transform .45s cubic-bezier(.22,1,.36,1), visibility .45s;
}
.us-stickybar.is-visible{
  transform: none;
  visibility: visible;
}

.us-stickybar__inner{
  max-width: 1180px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.us-stickybar__label{
  margin: 0;
  text-align: center;
  font-weight: 700;
  font-size: clamp(.86rem, 2.6vw, .95rem);
  line-height: 1.25;
  color: #1b2430;
}
.us-stickybar__badges{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.us-stickybar a{
  display: block;
  border-radius: 8px;
  transition: transform .2s cubic-bezier(.22,1,.36,1), filter .2s;
}
.us-stickybar a:hover{ filter: brightness(1.12); }
.us-stickybar a:active{ transform: scale(.97); }
.us-stickybar a:focus-visible{ outline: 2px solid #1f5573; outline-offset: 3px; }
.us-stickybar img{
  display: block;
  width: auto;
  height: clamp(38px, 10.5vw, 48px);
}

/* Zurück nach oben, am rechten Rand der Leiste */
.us-stickybar__top{
  position: absolute;
  top: 50%;
  right: max(14px, env(safe-area-inset-right, 0px));
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(27,36,48,.16);
  border-radius: 50%;
  background: #fff;
  color: #1f5573;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .2s cubic-bezier(.22,1,.36,1);
}
.us-stickybar__top:hover{
  background: #1f5573;
  border-color: #1f5573;
  color: #fff;
  transform: translateY(-2px);
}
.us-stickybar__top:active{ transform: none; }
.us-stickybar__top:focus-visible{ outline: 2px solid #1f5573; outline-offset: 3px; }
.us-stickybar__top svg{ width: 20px; height: 20px; }

/* Auf schmalen Geräten Platz für den Knopf freihalten, damit die
   Badges nicht darunter laufen. */
@media (max-width: 699px){
  .us-stickybar{ padding-right: 60px; }
}
@media (max-width: 359px){
  .us-stickybar img{ height: 34px; }
  .us-stickybar__badges{ gap: 8px; }
}

@media (prefers-reduced-motion: reduce){
  .us-stickybar{ transition-duration: .01ms; }
}

/* ============================================================
   Sanftes Einblenden, sobald ein Block in den Viewport kommt.
   Ohne JavaScript bleibt alles regulär sichtbar.
   ============================================================ */
.us-reveal[data-reveal="pending"] .us-anim{
  opacity: 0;
  transform: translateY(22px);
}
.us-reveal[data-reveal="pending"] .us-anim--media{
  transform: translateY(22px) scale(.965);
}
.us-reveal[data-reveal] .us-anim{
  transition: opacity .75s cubic-bezier(.2,.8,.3,1) var(--us-d, 0s),
              transform .75s cubic-bezier(.2,.8,.3,1) var(--us-d, 0s);
}
.us-reveal[data-reveal="in"] .us-anim{
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce){
  .us-reveal[data-reveal="pending"] .us-anim,
  .us-reveal[data-reveal="pending"] .us-anim--media{
    opacity: 1;
    transform: none;
  }
  .us-reveal .us-anim{ transition-duration: .01ms !important; }
}

/* ============================================================
   Seitengrundlage
   ============================================================ */
body{
  margin: 0;
  background: #4C3E6B;
  color: #fff;
  font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  overflow-x: hidden;
}
body.nav-open{ overflow: hidden; }

/* ============================================================
   FOOTER
   ============================================================ */
.us-footer{
  --us-footer-bg: #332A4C;
  background: var(--us-footer-bg);
  color: #fff;
  font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
.us-footer *{ box-sizing: border-box; }

.us-footer__inner{
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 20px;
  padding-block: clamp(36px, 5vw, 60px);
}

.us-footer__cols{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: clamp(28px, 5vw, 64px);
}
.us-footer__col{ min-width: min(100%, 200px); }

.us-footer__head{
  margin: 0 0 14px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.us-footer__list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.us-footer__list a{
  color: rgba(255,255,255,.84);
  text-decoration: none;
  font-size: .98rem;
  transition: color .2s ease;
}
.us-footer__list a:hover{ color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.us-footer__list a:focus-visible{ outline: 2px solid #fff; outline-offset: 3px; border-radius: 3px; }

/* ---------- Fußzeile: Copyright links, Laufschrift rechts ---------- */
.us-footer__bottom{
  border-top: 1px solid rgba(255,255,255,.13);
  padding-block: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: clamp(.86rem, 1.05vw, .95rem);
  color: rgba(255,255,255,.78);
}

.us-footer__copy{
  margin: 0;
  padding-inline: 20px;
  text-align: center;
}
.us-footer__copy a{
  color: #fff;
  text-decoration: none;
  transition: opacity .2s ease;
}
.us-footer__copy a:hover{ opacity: .78; }
.us-footer__copy a:focus-visible{ outline: 2px solid #fff; outline-offset: 3px; border-radius: 3px; }

/* Ein einziger Durchlauf im Bild: der Text startet rechts außerhalb
   und wandert nach links aus dem Kasten. */
.us-footer__ticker{
  width: 100%;
  overflow: hidden;
}
.us-footer__ticker span{
  display: inline-block;
  padding-left: 100%;
  white-space: nowrap;
  animation: us-ticker 18s linear infinite;
}
.us-footer__ticker:hover span{ animation-play-state: paused; }
.us-footer__heart{ color: #E5007D; font-style: normal; }

@keyframes us-ticker{
  from{ transform: translate3d(0,0,0); }
  to  { transform: translate3d(-100%,0,0); }
}

@media (prefers-reduced-motion: reduce){
  .us-footer__ticker span{
    animation: none;
    padding-left: 0;
  }
  .us-footer__ticker{ text-align: center; padding-inline: 20px; }
}

/* ---------- Hinweis auf die Software ---------- */
.us-builtwith{
  border-top: 1px solid rgba(255,255,255,.10);
  padding-inline: 20px;
  /* letzter Block der Seite: unten Platz für die Store-Leiste */
  padding-block: clamp(22px, 3.2vw, 34px) clamp(104px, 13vw, 132px);
  text-align: center;
}
.us-builtwith__label{
  margin: 0 0 14px;
  font-size: .84rem;
  letter-spacing: .06em;
  color: rgba(255,255,255,.6);
}
.us-builtwith__link{
  display: inline-block;
  border-radius: 6px;
}
.us-builtwith__link:focus-visible{ outline: 2px solid #fff; outline-offset: 6px; }
.us-builtwith img{
  display: block;
  /* Vorlage wird überschrieben: erst auf Schwarz, dann invertiert —
     ergibt reines Weiß, unabhängig von den Farben der Datei. */
  filter: brightness(0) invert(1);
  opacity: .7;
  height: clamp(26px, 3.2vw, 40px);
  width: auto;
  transition: opacity .25s ease, transform .25s cubic-bezier(.2,.8,.3,1);
}
.us-builtwith__link:hover img{
  opacity: 1;
  transform: translateY(-2px);
}

/* ---------- Ansprache unter den Partnerlogos ---------- */
.us-partners__cta{
  margin-top: clamp(34px, 5vw, 62px);
  text-align: center;
}
.us-partners__cta p{
  margin: 0;
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  line-height: 1.6;
}
.us-partners__cta p + p{ margin-top: .35em; }
.us-partners__cta strong{ font-weight: 700; }
.us-partners__cta a{
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: opacity .2s ease;
}
.us-partners__cta a:hover{ opacity: .75; }
.us-partners__cta a:focus-visible{ outline: 2px solid #fff; outline-offset: 3px; }



/* ============================================================
   UNTERSEITEN mit Rechtstexten
   ============================================================ */
.us-legal{
  background: var(--us-lilac);
  color: var(--us-ink);
  font-family: var(--us-font-body);
  -webkit-font-smoothing: antialiased;
  scroll-margin-top: var(--header-h, 72px);
}
.us-legal *{ box-sizing: border-box; }

.us-legal__inner{
  max-width: 860px;
  margin-inline: auto;
  padding-inline: 20px;
  padding-block: clamp(36px, 6vw, 72px) clamp(56px, 9vw, 110px);
}

.us-legal h1{
  margin: 0 0 clamp(20px, 3vw, 34px);
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.12;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.us-legal h2{
  margin: clamp(30px, 4vw, 48px) 0 .5em;
  font-weight: 700;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.3;
}
.us-legal h3{
  margin: clamp(22px, 3vw, 32px) 0 .4em;
  font-weight: 700;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.35;
}
.us-legal p,
.us-legal li{
  font-size: clamp(1rem, 1.2vw, 1.06rem);
  line-height: 1.65;
  color: rgba(255,255,255,.92);
}
.us-legal p{ margin: 0 0 1em; }
.us-legal ul,
.us-legal ol{ margin: 0 0 1em; padding-left: 1.3em; }
.us-legal li{ margin-bottom: .4em; }
.us-legal strong{ font-weight: 700; color: #fff; }
.us-legal a{
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.us-legal a:hover{ opacity: .78; }
.us-legal a:focus-visible{ outline: 2px solid #fff; outline-offset: 3px; }
.us-legal table{
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.4em;
  font-size: .97rem;
}
.us-legal th,
.us-legal td{
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.22);
  vertical-align: top;
}
.us-legal__updated{
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.22);
  font-size: .92rem;
  color: rgba(255,255,255,.75);
}


/* ---------- Haus-Icon in der Hauptnavigation ---------- */
.nav-home{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  margin-right:2px;
  border-radius:10px;
  color:var(--muted);
  transition:color .2s ease, background-color .2s ease;
}
.nav-home:hover{ color:var(--text); background:rgba(27,36,48,.06); }
.nav-home:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.nav-home svg{ width:21px; height:21px; }

/* Dritter Eintrag im mobilen Menü läuft mit ein */
.nav-mobile.is-open a:nth-child(3){ transition-delay:.20s; }

/* ---------- Zurück-Button auf den Textseiten ---------- */
.us-legal a.us-legal__back{
  display:inline-flex;
  align-items:center;
  gap:.55em;
  margin-bottom:clamp(20px, 2.8vw, 32px);
  padding:.62em 1.2em;
  border:1px solid rgba(255,255,255,.45);
  border-radius:999px;
  color:#fff;
  font-size:.95rem;
  font-weight:600;
  text-decoration:none;
  transition:background-color .25s ease, border-color .25s ease, transform .2s cubic-bezier(.22,1,.36,1);
}
.us-legal a.us-legal__back:hover{
  background:rgba(255,255,255,.15);
  border-color:#fff;
  opacity:1;
  transform:translateX(-3px);
}
.us-legal a.us-legal__back svg{ width:1.05em; height:1.05em; }


/* ============================================================
   SPRACHUMSCHALTER
   ============================================================ */
.lang{ position:relative; flex:0 0 auto; }

.lang--desk{ display:none; }
.lang--mob{ display:block; margin-inline-start:auto; }
@media (min-width:860px){
  .lang--desk{ display:block; }
  .lang--mob{ display:none; }
}

.lang__toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:40px;
  padding:0 11px;
  border:1px solid rgba(27,36,48,.16);
  border-radius:999px;
  background:#fff;
  color:var(--text);
  font:inherit;
  font-size:.88rem;
  font-weight:700;
  letter-spacing:.02em;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .2s ease, border-color .2s ease;
}
.lang__toggle:hover{ background:rgba(27,36,48,.05); border-color:rgba(27,36,48,.32); }
.lang__toggle:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.lang__toggle .globe{ width:18px; height:18px; }
.lang__toggle .chev{ width:11px; height:11px; transition:transform .25s var(--ease); }
.lang__toggle[aria-expanded="true"] .chev{ transform:rotate(180deg); }

.lang__menu{
  position:absolute;
  z-index:120;
  top:calc(100% + 8px);
  inset-inline-end:0;
  min-width:192px;
  margin:0;
  padding:6px;
  list-style:none;
  background:#fff;
  border:1px solid rgba(27,36,48,.12);
  border-radius:14px;
  box-shadow:0 20px 44px -22px rgba(20,12,40,.85);
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .2s ease, transform .25s var(--ease), visibility .2s;
}
.lang__toggle[aria-expanded="true"] + .lang__menu{
  opacity:1;
  visibility:visible;
  transform:none;
}
.lang__menu a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:9px 12px;
  border-radius:9px;
  color:var(--text);
  text-decoration:none;
  font-size:.96rem;
  line-height:1.3;
  transition:background-color .18s ease;
}
.lang__menu a:hover{ background:rgba(27,36,48,.06); }
.lang__menu a:focus-visible{ outline:2px solid var(--brand); outline-offset:-2px; }
.lang__menu a[aria-current="true"]{ font-weight:700; color:var(--brand); }
.lang__code{
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.09em;
  color:var(--muted);
}

/* ---------- Sprachliste im mobilen Menü ---------- */
/* Menuefuss: Sprachen und Netzwerke stehen zusammen unter einer
   Haarlinie, damit sie als Nebensache lesbar sind. */
.nav-mobile__langs{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
  margin:26px 0 0;
  padding:20px 0 0;
  border-top:1px solid var(--line);
  list-style:none;
}
@media (max-width:339px){
  .nav-mobile__langs{ grid-template-columns:repeat(2, 1fr); }
}
.nav-mobile .nav-mobile__langs a{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:64px;
  padding:10px 6px;
  border:1px solid var(--line);
  border-bottom:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  font-size:.82rem;
  font-weight:600;
  line-height:1.15;
  letter-spacing:0;
  text-align:center;
  opacity:1;
  transform:none;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease;
}
.nav-mobile .nav-mobile__langs a[aria-current="true"]{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
}
.nav-mobile .nav-mobile__langs a[aria-current="true"] .lang__flag{
  box-shadow:0 0 0 1px rgba(255,255,255,.7);
}
.nav-mobile .nav-mobile__langs a:active{ border-color:var(--brand); }

/* ---------- Sprachzeile in der Fußzeile ---------- */
.us-footer__langs{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px 16px;
  margin:clamp(26px, 4vw, 40px) 0 0;
  padding:0;
  list-style:none;
}
.us-footer__langs a{
  color:rgba(255,255,255,.78);
  text-decoration:none;
  font-size:.9rem;
}
.us-footer__langs a:focus-visible{ outline:2px solid #fff; outline-offset:3px; border-radius:3px; }

/* Nur Flaggen: die aktive Sprache steht voll da, die uebrigen
   treten zurueck. 44px Trefferflaeche bleibt ueber das Padding. */
.us-footer__langs a{
  display:block;
  padding:9px;
  border-radius:4px;
  line-height:0;
}
.us-footer__flag{
  width:26px;
  height:19px;
  opacity:.45;
  filter:saturate(.75);
  transition:opacity .18s ease, filter .18s ease, transform .18s ease;
}
.us-footer__langs a:hover .us-footer__flag,
.us-footer__langs a:focus-visible .us-footer__flag{
  opacity:.85;
  filter:none;
  transform:translateY(-2px);
}
.us-footer__langs a[aria-current="true"] .us-footer__flag{
  opacity:1;
  filter:none;
  box-shadow:0 0 0 2px rgba(255,255,255,.85), 0 2px 6px rgba(0,0,0,.28);
}
@media (prefers-reduced-motion: reduce){
  .us-footer__flag{ transition:none; }
  .us-footer__langs a:hover .us-footer__flag{ transform:none; }
}

@media (prefers-reduced-motion: reduce){
  .lang__menu{ transition-duration:.01ms; }
}


/* ---------- Flaggen im Sprachumschalter ---------- */
.lang__flag{
  display:block;
  flex:0 0 auto;
  width:20px;
  height:15px;          /* 4:3 wie die SVG-Quellen, also kein Beschnitt */
  border-radius:2px;
  box-shadow:0 0 0 1px rgba(27,36,48,.16) inset;
  object-fit:cover;
}
.lang__flag--code{
  display:grid;
  place-items:center;
  width:20px;
  height:14px;
  border:1px solid rgba(27,36,48,.22);
  border-radius:2px;
  box-shadow:none;
  font-size:.52rem;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--muted);
}
.lang__toggle .lang__abbr{ margin-inline-start:1px; }
.lang__menu a{ justify-content:flex-start; }
.lang__menu a > span:not(.lang__code){ flex:1 1 auto; }
.nav-mobile .nav-mobile__langs a .lang__flag{ width:28px; height:21px; }
.nav-mobile .nav-mobile__langs a[aria-current="true"] .lang__flag--code{
  border-color:rgba(255,255,255,.5);
  color:rgba(255,255,255,.9);
}


/* ============================================================
   RECHTS-NACH-LINKS (Persisch, Arabisch)
   ============================================================ */
[dir="rtl"] body{ font-family:'Vazirmatn', 'Noto Naskh Arabic', 'Segoe UI', Tahoma, system-ui, sans-serif; }
[dir="rtl"] .us-hero,
[dir="rtl"] .us-introhead,
[dir="rtl"] .us-appintro,
[dir="rtl"] .us-features,
[dir="rtl"] .us-steps,
[dir="rtl"] .us-reviews,
[dir="rtl"] .us-community,
[dir="rtl"] .us-partners,
[dir="rtl"] .us-legal,
[dir="rtl"] .us-footer{ font-family:inherit; }

/* Laufband andersherum */
[dir="rtl"] .us-footer__ticker span{ animation-name:us-ticker-rtl; }
/* Die Copyright-Zeile ist reines Latein plus Zahlen – ohne
   direction:ltr schiebt die Bidi-Logik "© 2026" ans Ende. */
[dir="rtl"] .us-footer__copy{ direction:ltr; }
@keyframes us-ticker-rtl{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(100%,0,0); }
}
[dir="rtl"] .us-footer__ticker span{ padding-left:0; padding-right:100%; }

/* Pfeile spiegeln */
[dir="rtl"] .us-legal__back svg,
[dir="rtl"] .nav-mobile a .arrow{ transform:scaleX(-1); }
[dir="rtl"] .us-legal a.us-legal__back:hover{ transform:translateX(3px); }
[dir="rtl"] .nav-mobile a:active .arrow{ transform:scaleX(-1) translateX(4px); }

/* Die Bühnen bleiben ungespiegelt – die Fotos hätten sonst
   spiegelverkehrte Bildschirme. Nur der Text richtet sich aus. */
[dir="rtl"] .us-features__text,
[dir="rtl"] .us-reviews__list,
[dir="rtl"] .us-legal__inner{ text-align:right; }
[dir="rtl"] .us-review__stars{ flex-direction:row-reverse; justify-content:flex-end; }
[dir="rtl"] .us-footer__cols{ direction:rtl; }
[dir="rtl"] .us-legal ul,
[dir="rtl"] .us-legal ol{ padding-left:0; padding-right:1.3em; }

/* Zahlen in Rechtstexten lateinisch halten (Preise, Paragraphen) */
[dir="rtl"] .us-legal{ font-variant-numeric:normal; }


/* Hinweis auf nur deutschsprachige Rechtstexte */
.us-legal__notice{
  margin:0 0 clamp(26px,3.5vw,40px);
  padding:14px 18px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:12px;
  background:rgba(255,255,255,.08);
  font-size:.96rem;
  line-height:1.55;
}
.us-legal .us-legal__notice a{ font-weight:700; white-space:nowrap; }

/* ---------- Deutscher Rechtstext in den Sprachordnern ---------- */
/* Der Block traegt lang="de" dir="ltr", damit Adressen und Paragrafen
   nicht von der Bidi-Logik umsortiert werden. */
.us-legal__de{ text-align:start; }

/* ============================================================
   SOZIALE NETZWERKE
   Markenzeichen aus simple-icons (CC0). fill="currentColor",
   damit sie die Farbe des Umfelds uebernehmen – die Richtlinien
   von Instagram und TikTok erlauben einfarbig weiss bzw. schwarz.
   ============================================================ */
.us-social{
  display:flex;
  justify-content:center;
  gap:8px;
  margin:clamp(24px, 3.6vw, 36px) 0 0;
  padding:0;
  list-style:none;
}
.us-social a{
  display:grid;
  place-items:center;
  width:44px;               /* Mindestgroesse fuer Finger und Maus */
  height:44px;
  border-radius:50%;
  color:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.18);
  transition:color .18s ease, border-color .18s ease,
             background-color .18s ease, transform .18s ease;
}
.us-social a svg{ width:20px; height:20px; display:block; }
.us-social a:hover,
.us-social a:focus-visible{
  color:#fff;
  border-color:rgba(255,255,255,.55);
  background:rgba(255,255,255,.10);
  transform:translateY(-2px);
}
.us-social a:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

/* Die Flaggenzeile rueckt nach, damit der Block nicht auseinanderfaellt */
.us-social + .us-footer__langs{ margin-block-start:clamp(16px, 2.4vw, 22px); }

/* ---------- Im mobilen Menue: heller Grund ---------- */
.nav-mobile .us-social--nav{
  justify-content:center;
  gap:10px;
  margin:14px 0 0;
}
.nav-mobile .us-social--nav a{
  width:40px;
  height:40px;
  padding:0;
  border-radius:12px;
  color:var(--brand);
  border-color:var(--line);
  background:#fff;
  opacity:1;
  transform:none;
}
.nav-mobile .us-social--nav a svg{ width:18px; height:18px; }
.nav-mobile .us-social--nav a:hover,
.nav-mobile .us-social--nav a:focus-visible{
  color:var(--brand);
  border-color:var(--brand);
  background:rgba(31,85,115,.08);
}
.nav-mobile .us-social--nav a:focus-visible{ outline-color:var(--brand); }

@media (prefers-reduced-motion: reduce){
  .us-social a{ transition:none; }
  .us-social a:hover{ transform:none; }
}


/* ---------- Menuefuss: gemeinsames Einblenden ---------- */
.nav-mobile__langs,
.nav-mobile .us-social--nav{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .45s var(--ease) .34s, transform .45s var(--ease) .34s;
}
.nav-mobile.is-open .nav-mobile__langs,
.nav-mobile.is-open .us-social--nav{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .nav-mobile__langs,
  .nav-mobile .us-social--nav{ transition:none; transform:none; }
}

/* ---------- Niedrige Displays: Menue zusammenruecken ----------
   Ziel ist, dass der Menuefuss ohne Scrollen sichtbar bleibt.
   Das overflow-y am Panel bleibt als Sicherheitsnetz bestehen. */
@media (max-height: 720px){
  .nav-mobile{ padding-block-start:calc(var(--header-h) + 14px); }
  .nav-mobile a{ padding:13px 4px; font-size:1.35rem; }
  .nav-mobile-cta{ padding-top:18px; }
  .nav-mobile-cta a{ padding:15px 24px; font-size:1rem; }
  .nav-mobile-store{ padding-top:16px; }
  .nav-mobile-store__label{ margin-bottom:9px; font-size:.86rem; }
  .nav-mobile-store img{ height:44px; }
  .nav-mobile__langs{ margin-top:18px; padding-top:14px; gap:7px; }
  .nav-mobile .nav-mobile__langs a{ min-height:54px; padding:8px 5px; font-size:.76rem; gap:5px; }
  .nav-mobile .nav-mobile__langs a .lang__flag{ width:24px; height:18px; }
  .nav-mobile .us-social--nav{ margin-top:11px; }
  .nav-mobile .us-social--nav a{ width:36px; height:36px; }
}

/* ---------- Sehr schmale Displays ----------
   Die beiden Store-Badges brechen sonst untereinander um. */
@media (max-width: 359px){
  .nav-mobile-store__badges{ gap:8px; }
  .nav-mobile-store img{ height:40px; }
}