/* ==========================================================================
   SR Care – Wartungsseite
   Bewusst ohne Inline-CSS und ohne Inline-JavaScript, damit die Seite auch
   unter der strengen Content-Security-Policy der .htaccess funktioniert.
   ========================================================================== */

@font-face{font-family:'Cabin';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/cabin-latin-400.woff2) format('woff2')}
@font-face{font-family:'Cabin';font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/cabin-latin-700.woff2) format('woff2')}
@font-face{font-family:'Noto Kufi Arabic';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/notokufiarabic-400.woff2) format('woff2')}
@font-face{font-family:'Noto Kufi Arabic';font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/notokufiarabic-700.woff2) format('woff2')}

:root{
  --blue:#6d9dc5; --blue-light:#9dc0dd;
  --line:rgba(157,192,221,.42); --text:rgba(255,255,255,.82); --muted:rgba(255,255,255,.58);
  --ease:cubic-bezier(.22,.75,.28,1);
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;background:#123f66}
body{
  margin:0;min-height:100vh;display:grid;place-items:center;padding:clamp(20px,5vw,48px);
  font-family:'Cabin','Segoe UI',-apple-system,Arial,sans-serif;font-size:18px;line-height:1.6;
  color:var(--text);text-align:center;
  background:
    radial-gradient(1200px 720px at 80% -8%,rgba(157,192,221,.34),transparent 62%),
    radial-gradient(950px 640px at 0% 24%,rgba(109,157,197,.26),transparent 62%),
    radial-gradient(1050px 700px at 100% 76%,rgba(109,157,197,.28),transparent 64%),
    linear-gradient(180deg,#0f3559 0%,#17527f 34%,#134268 60%,#0e3154 100%);
  background-attachment:fixed;
}
html[lang="ar"] body{font-family:'Noto Kufi Arabic','Cabin','Segoe UI',Tahoma,sans-serif;line-height:1.85}

/* ---------- Seifenblasen ---------- */
.bubbles{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bubbles i{
  position:absolute;inset-block-end:-16vh;display:block;
  animation-name:rise;animation-timing-function:linear;animation-iteration-count:infinite;
}
.bubbles i > b{
  display:block;width:100%;height:100%;border-radius:50%;opacity:0;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.62),rgba(157,192,221,.22) 55%,rgba(109,157,197,.06) 100%);
  border:1px solid rgba(255,255,255,.34);box-shadow:inset 0 0 20px rgba(255,255,255,.22);
  animation-name:fade;animation-timing-function:linear;animation-iteration-count:infinite;
  animation-duration:inherit;animation-delay:inherit;
}
@keyframes rise{
  0%{transform:translate3d(0,0,0) scale(.7)}
  100%{transform:translate3d(34px,-118vh,0) scale(1.14)}
}
@keyframes fade{0%{opacity:0} 10%{opacity:.9} 70%{opacity:.5} 100%{opacity:0}}

/* Herzen */
.bubbles i.is-heart > b{
  clip-path:url(#heartClip);
  border:0;box-shadow:none;border-radius:0;
  background:radial-gradient(circle at 34% 26%,rgba(255,255,255,.85),rgba(255,168,181,.55) 45%,rgba(226,110,131,.30) 100%);
}

/* Platzen */
.bubbles i.is-pop > b{animation:pop .62s var(--ease) forwards}
@keyframes pop{
  0%{opacity:.85;transform:scale(1)}
  22%{opacity:.95;transform:scale(1.18)}
  55%{opacity:.45;transform:scale(1.55)}
  100%{opacity:0;transform:scale(2.05)}
}
.bubbles i.is-pop::after{
  content:"";position:absolute;inset:-45%;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.55);
  animation:ring .62s var(--ease) forwards;
}
.bubbles i.is-heart.is-pop::after{border-color:rgba(255,178,190,.7)}
@keyframes ring{0%{opacity:.8;transform:scale(.45)}100%{opacity:0;transform:scale(1.15)}}

/* ---------- Karte ---------- */
.card{
  position:relative;z-index:1;width:100%;max-width:620px;
  padding:clamp(30px,5vw,54px) clamp(22px,4vw,48px);
  border:1px solid var(--line);border-radius:26px;
  background:radial-gradient(460px 280px at 100% 0%,rgba(255,255,255,.07),transparent 70%);
  animation:in .9s var(--ease) both;
}
.card::before,.card::after{
  content:"";position:absolute;width:38px;height:38px;border:0 solid var(--blue-light);opacity:.9;
}
.card::before{inset-block-start:-1px;inset-inline-start:-1px;
  border-block-start-width:2px;border-inline-start-width:2px;border-start-start-radius:26px}
.card::after{inset-block-end:-1px;inset-inline-end:-1px;
  border-block-end-width:2px;border-inline-end-width:2px;border-end-end-radius:26px}
@keyframes in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.logo{width:clamp(190px,46vw,260px);margin:0 auto clamp(22px,4vw,32px);display:block;max-width:100%;height:auto}

.lang{display:inline-flex;gap:2px;padding:4px;margin-block-end:clamp(20px,3vw,28px);
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);border-radius:999px}
.lang button{
  border:0;background:transparent;cursor:pointer;padding:7px 14px;border-radius:999px;
  font:inherit;font-size:.78rem;font-weight:700;letter-spacing:.04em;color:rgba(255,255,255,.78);
  transition:background .25s,color .25s;
}
.lang button:hover{color:#fff}
.lang button[aria-current="true"]{background:var(--blue);color:#0a2036}

h1{
  margin:0 0 14px;color:#fff;font-size:clamp(1.7rem,5.6vw,2.5rem);font-weight:700;
  line-height:1.18;letter-spacing:-.015em;
}
html[lang="ar"] h1{letter-spacing:0}
.lede{margin:0 auto clamp(24px,4vw,32px);max-width:44ch;font-size:1.05rem}

.services{
  display:flex;flex-wrap:wrap;gap:9px;justify-content:center;list-style:none;padding:0;
  margin:0 0 clamp(26px,4vw,34px);
}
.services li{
  padding:8px 16px;border:1px solid var(--line);border-radius:999px;
  font-size:.88rem;font-weight:600;color:rgba(255,255,255,.9);
}

.cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-block-end:clamp(24px,4vw,32px)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 28px;border-radius:999px;text-decoration:none;
  font-size:1rem;font-weight:700;letter-spacing:.01em;
  background:linear-gradient(120deg,#a6c8e2,#6d9dc5);color:#0a2036;
  box-shadow:0 16px 32px -16px rgba(109,157,197,.85);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.btn:hover{transform:translateY(-3px);box-shadow:0 24px 40px -16px rgba(109,157,197,.95)}
.btn--ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.34)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}
.btn svg{width:18px;height:18px;flex:0 0 auto}
.num{direction:ltr;unicode-bidi:isolate}

.sep{margin-block:clamp(20px,3vw,26px) clamp(16px,2.4vw,20px);border:0;border-top:1px solid rgba(255,255,255,.14)}
.foot{font-size:.86rem;color:var(--muted);margin:0}
.foot--last{margin-block-start:10px}

/* Zugang zum internen Bereich – bewusst zurückhaltend ganz unten */
.intern-zeile{margin-block-start:clamp(18px,2.6vw,24px);margin-block-end:0}
.intern-link{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.82rem;color:rgba(255,255,255,.42);text-decoration:none;
  transition:color .22s var(--ease);
}
.intern-link:hover,.intern-link:focus-visible{color:var(--blue-pale)}
.intern-link svg{width:13px;height:13px;flex:0 0 auto}
.heart{color:#ff9aa6;display:inline-block;animation:beat 2.1s var(--ease) infinite}
@keyframes beat{0%,100%{transform:scale(1)}18%{transform:scale(1.28)}36%{transform:scale(1)}54%{transform:scale(1.18)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .bubbles{display:none}
}
@media (max-width:480px){
  .cta{flex-direction:column}
  .btn{width:100%}
}

/* ---------- Blasen: feste Klassen statt Inline-Styles ---------- */
.b1{width:34px;height:34px;left:15.1%;animation-duration:29.0s;animation-delay:-2.3s}
.b2{width:50px;height:50px;left:36.6%;animation-duration:17.2s;animation-delay:-16.2s}
.b3{width:13px;height:13px;left:43.4%;animation-duration:17.4s;animation-delay:-2.9s}
.b4{width:41px;height:41px;left:82.7%;animation-duration:18.5s;animation-delay:-7.1s}
.b5{width:56px;height:56px;left:94.8%;animation-duration:27.5s;animation-delay:-12.7s}
.b6{width:82px;height:82px;left:4.7%;animation-duration:33.2s;animation-delay:-9.3s}
.b7{width:21px;height:21px;left:11.8%;animation-duration:22.2s;animation-delay:-26.1s}
.b8{width:23px;height:23px;left:58.2%;animation-duration:28.8s;animation-delay:-11.9s}
.b9{width:51px;height:51px;left:6.3%;animation-duration:17.2s;animation-delay:-6.6s}
.b10{width:60px;height:60px;left:42.8%;animation-duration:22.3s;animation-delay:-18.7s}
.b11{width:44px;height:44px;left:30.0%;animation-duration:31.9s;animation-delay:-22.4s}
.b12{width:28px;height:28px;left:57.4%;animation-duration:26.5s;animation-delay:-28.0s}
.b13{width:64px;height:64px;left:28.8%;animation-duration:35.6s;animation-delay:-3.8s}
.b14{width:41px;height:41px;left:75.7%;animation-duration:19.0s;animation-delay:-15.6s}
.b15{width:13px;height:13px;left:66.8%;animation-duration:31.3s;animation-delay:-18.3s}
.b16{width:75px;height:75px;left:31.4%;animation-duration:29.9s;animation-delay:-19.0s}
.b17{width:53px;height:53px;left:45.6%;animation-duration:32.8s;animation-delay:-30.2s}
.b18{width:45px;height:45px;left:66.4%;animation-duration:17.2s;animation-delay:-22.4s}
.b19{width:58px;height:58px;left:99.3%;animation-duration:32.4s;animation-delay:-9.1s}
.b20{width:39px;height:39px;left:66.9%;animation-duration:16.5s;animation-delay:-14.8s}