/* =========================================================
   SFM Kundenfilme — Frontend
   Farben, Typografie und Rhythmus der Website sylter-filmmanufaktur.de
   ========================================================= */

:root{
  --sfmkf-cyan:       #0a7396;
  --sfmkf-cyan-hell:  #1bb3e4;
  --sfmkf-cyan-soft:  #e3f4fb;
  --sfmkf-cyan-linie: #a9e0f3;
  --sfmkf-glow:       rgba(16,158,203,.28);

  --sfmkf-paper:      #fbfaf8;
  --sfmkf-sand:       #f2efe9;
  --sfmkf-card:       #ffffff;

  --sfmkf-ink:        #0b0f14;
  --sfmkf-text:       #131a22;
  --sfmkf-text-2:     #4b5866;
  --sfmkf-text-3:     #5f6a74;
  --sfmkf-on-dark:    #eef3f7;
  --sfmkf-on-dark-2:  #a3b0bc;

  --sfmkf-linie:      #e2ddd4;
  --sfmkf-linie-2:    #efebe4;

  --sfmkf-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --sfmkf-wrap: 1240px;
  --sfmkf-pad: clamp(20px, 5vw, 40px);
  --sfmkf-sec: clamp(56px, 7vw, 104px);
  --sfmkf-r: 14px;
  --sfmkf-r-lg: 22px;

  --sfmkf-schatten-sm: 0 2px 8px rgba(19,26,34,.05), 0 12px 30px rgba(19,26,34,.06);
  --sfmkf-schatten:    0 4px 14px rgba(19,26,34,.07), 0 24px 60px rgba(19,26,34,.10);
}

/* Inter lokal, wie auf der Website. Keine Verbindung zu Google. */
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src:url(https://sylter-filmmanufaktur.de/wp-content/uploads/sfm-neu/assets/fonts/inter-var-latin.woff2) format('woff2');
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap;
  src:url(https://sylter-filmmanufaktur.de/wp-content/uploads/sfm-neu/assets/fonts/inter-var-latin.woff2) format('woff2');
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap;
  src:url(https://sylter-filmmanufaktur.de/wp-content/uploads/sfm-neu/assets/fonts/inter-var-latin.woff2) format('woff2');
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:800; font-display:swap;
  src:url(https://sylter-filmmanufaktur.de/wp-content/uploads/sfm-neu/assets/fonts/inter-var-latin.woff2) format('woff2');
}

body.sfm-kf{
  margin:0;
  font-family:var(--sfmkf-font);
  background:var(--sfmkf-paper);
  color:var(--sfmkf-text);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.sfm-kf *,body.sfm-kf *::before,body.sfm-kf *::after{box-sizing:border-box}
body.sfm-kf img,body.sfm-kf svg,body.sfm-kf iframe{display:block;max-width:100%}
body.sfm-kf a{color:inherit;text-decoration:none}
body.sfm-kf :focus-visible{outline:3px solid var(--sfmkf-cyan-hell);outline-offset:3px;border-radius:6px}

/* Die eigene Grundregel der Website noch einmal, damit das Theme Kopf und Fuss nicht verbiegt */
body.sfm-kf button{font:inherit;color:inherit;background:none;border:0;box-shadow:none;cursor:pointer;text-transform:none;letter-spacing:0}
body.sfm-kf ul{list-style:none;padding:0;margin:0}
body.sfm-kf .header .nav-link{background:transparent;border:0;box-shadow:none;border-radius:10px}
body.sfm-kf .header .nav-link:hover,body.sfm-kf .header .has-sub:hover > .nav-link{background:rgba(19,26,34,.05)}
body.sfm-kf .burger{border:1px solid var(--line,#e2ddd4);background:#fff}
body.sfm-kf .footer h4{margin:0 0 .7rem}

.sfm-wrap{width:100%;max-width:var(--sfmkf-wrap);margin-inline:auto;padding-inline:var(--sfmkf-pad)}

/* ---------- Typo ---------- */
.sfm-h1,.sfm-h2,.sfm-h3{line-height:1.1;letter-spacing:-.028em;font-weight:800;color:var(--sfmkf-text);margin:0;text-wrap:balance}
.sfm-h1{font-size:clamp(2.1rem,5vw,3.6rem);letter-spacing:-.035em}
.sfm-h2{font-size:clamp(1.6rem,3.2vw,2.4rem)}
.sfm-h3{font-size:clamp(1.1rem,1.8vw,1.35rem);letter-spacing:-.02em}
.sfm-lead{font-size:clamp(1rem,1.5vw,1.16rem);color:var(--sfmkf-text-2);max-width:62ch;line-height:1.6;margin:.9rem 0 0}
.sfm-muted{color:var(--sfmkf-text-2);margin:.5rem 0 0}
.sfm-tiny{font-size:.8rem;color:var(--sfmkf-text-3);margin:0}
.sfm-untertitel{font-size:clamp(1.05rem,1.9vw,1.4rem);font-weight:600;color:var(--sfmkf-text-2);margin:.5rem 0 0}

.sfm-eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.74rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sfmkf-cyan);margin:0 0 .9rem;
}
.sfm-eyebrow::before{content:"";width:24px;height:2px;background:currentColor;border-radius:2px}

/* ---------- Kopfleiste ---------- */
.sfm-kopf{
  position:sticky;top:0;z-index:60;
  background:rgba(251,250,248,.88);
  backdrop-filter:blur(14px) saturate(1.6);
  border-bottom:1px solid var(--sfmkf-linie-2);
}
.sfm-kopf-inner{display:flex;align-items:center;gap:1rem;min-height:72px}
.sfm-marke img{height:38px;width:auto}
.sfm-kopf-rechts{margin-left:auto;display:flex;align-items:center;gap:.9rem}
.sfm-pill{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.78rem;font-weight:700;padding:.4rem .8rem;border-radius:100px;
  background:var(--sfmkf-cyan-soft);color:#0a6e8f;border:1px solid var(--sfmkf-cyan-linie);
}
.sfm-pill svg{width:14px;height:14px}
.sfm-abmelden{font-size:.85rem;font-weight:600;color:var(--sfmkf-text-3);border-bottom:1px solid var(--sfmkf-linie)}
.sfm-abmelden:hover{color:var(--sfmkf-text)}
@media(max-width:600px){
  .sfm-marke img{height:30px}
  .sfm-pill span,.sfm-pill{font-size:.72rem}
}

/* ---------- Hero ---------- */
.sfm-hero{
  position:relative;background:var(--sfmkf-paper);
  padding-top:calc(var(--header-h,88px) + clamp(40px,6vw,76px));
  padding-bottom:clamp(30px,4vw,54px);
}
.sfm-hero.hat-bild{
  background:var(--sfmkf-ink);color:var(--sfmkf-on-dark);
  padding-top:calc(var(--header-h,88px) + clamp(46px,7vw,90px));
  padding-bottom:clamp(56px,7vw,96px);
}
.sfm-hero.hat-bild .sfm-h1{color:#fff}
.sfm-hero.hat-bild .sfm-lead,.sfm-hero.hat-bild .sfm-untertitel{color:var(--sfmkf-on-dark-2)}
.sfm-hero.hat-bild .sfm-eyebrow{color:var(--sfmkf-cyan-hell)}
.sfm-hero-bild{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:.42;filter:saturate(.9);
}
.sfm-hero.hat-bild::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,15,20,.55) 0%,rgba(11,15,20,.82) 100%);
}
.sfm-hero-inner{position:relative;z-index:2}
.sfm-hero-zahlen{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}
.sfm-hero-zahlen span{
  font-size:.8rem;font-weight:600;color:var(--sfmkf-text-3);
  border:1px solid var(--sfmkf-linie);border-radius:100px;padding:.32rem .8rem;background:#fff;
}
.sfm-hero.hat-bild .sfm-hero-zahlen span{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:var(--sfmkf-on-dark-2)}

/* ---------- Sektionen ---------- */
.sfm-sec{padding-block:var(--sfmkf-sec)}
.sfm-sec-sand{background:var(--sfmkf-sand);border-block:1px solid var(--sfmkf-linie)}
.sfm-block + .sfm-block{margin-top:clamp(40px,5vw,72px)}
.sfm-block .sfm-h2{margin-bottom:clamp(20px,2.5vw,32px)}
.sfm-gruppentitel{margin-bottom:1rem;color:var(--sfmkf-text-2);font-weight:700;letter-spacing:-.01em}

/* ---------- Filme ---------- */
.sfm-filme{display:grid;gap:clamp(22px,3vw,34px)}
.sfm-filme.ist-raster{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.sfm-filme.ist-raster{grid-template-columns:1fr}}

.sfm-film{
  background:var(--sfmkf-card);border:1px solid var(--sfmkf-linie);
  border-radius:var(--sfmkf-r-lg);overflow:hidden;box-shadow:var(--sfmkf-schatten-sm);
  transition:box-shadow .3s ease,transform .3s ease;
}
.sfm-film:hover{box-shadow:var(--sfmkf-schatten)}
.sfm-player{position:relative;padding-top:56.25%;background:#000}
.sfm-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.sfm-film-text{padding:clamp(18px,2.2vw,26px)}
.sfm-aktionen{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.1rem}

/* ---------- Buttons ----------
   Dreifache Klasse plus !important, damit das Theme sie nicht ueberschreibt. */
.sfm-btn.sfm-btn.sfm-btn{
  display:inline-flex !important;align-items:center;justify-content:center;gap:.55rem;
  padding:.85rem 1.4rem !important;border-radius:100px !important;
  background:var(--sfmkf-cyan) !important;color:#fff !important;
  border:1.5px solid transparent !important;
  font-family:var(--sfmkf-font);font-weight:700 !important;font-size:.92rem !important;
  line-height:1.2;text-transform:none;letter-spacing:0;text-decoration:none;
  cursor:pointer;width:auto;box-shadow:none;
  transition:transform .18s ease,box-shadow .25s ease,background .2s ease,border-color .2s;
}
.sfm-btn.sfm-btn.sfm-btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px var(--sfmkf-glow)}
.sfm-btn.sfm-btn.sfm-btn svg{width:17px;height:17px;flex:none}
.sfm-btn-outline.sfm-btn-outline.sfm-btn-outline{background:transparent !important;color:var(--sfmkf-text) !important;border-color:var(--sfmkf-linie) !important}
.sfm-btn-outline.sfm-btn-outline.sfm-btn-outline:hover{background:#fff !important;border-color:#cfc8bd !important;box-shadow:var(--sfmkf-schatten-sm)}
.sfm-btn-hell.sfm-btn-hell.sfm-btn-hell{background:#fff !important;color:var(--sfmkf-ink) !important}
.sfm-btn-hell.sfm-btn-hell.sfm-btn-hell:hover{box-shadow:0 12px 30px rgba(255,255,255,.18)}
.sfm-btn-block.sfm-btn-block.sfm-btn-block{width:100% !important;margin-top:.4rem}

/* ---------- Download-Kacheln ---------- */
.sfm-kacheln{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px)}
@media(max-width:1000px){.sfm-kacheln{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.sfm-kacheln{grid-template-columns:1fr}}

.sfm-kachel{
  display:flex;align-items:flex-start;gap:.9rem;
  padding:1.1rem 1.2rem;background:#fff;border:1px solid var(--sfmkf-linie);
  border-radius:var(--sfmkf-r);box-shadow:var(--sfmkf-schatten-sm);
  transition:transform .2s ease,box-shadow .25s ease,border-color .2s;
}
.sfm-kachel:hover{transform:translateY(-2px);box-shadow:var(--sfmkf-schatten);border-color:var(--sfmkf-cyan-linie)}
.sfm-kachel-icon{
  flex:none;width:42px;height:42px;border-radius:12px;
  display:grid;place-items:center;background:var(--sfmkf-cyan-soft);color:var(--sfmkf-cyan);
}
.sfm-kachel-icon svg{width:21px;height:21px}
.sfm-kachel-text{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.sfm-kachel-text strong{font-weight:700;letter-spacing:-.01em;line-height:1.35}
.sfm-quelle{font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sfmkf-cyan)}
.sfm-kachel-pfeil{margin-left:auto;color:var(--sfmkf-text-3);transition:transform .2s ease}
.sfm-kachel:hover .sfm-kachel-pfeil{transform:translateX(4px);color:var(--sfmkf-cyan)}

/* ---------- Dunkles Band ---------- */
.sfm-kino{background:var(--sfmkf-ink);color:var(--sfmkf-on-dark)}
.sfm-kino .sfm-h2{color:#fff}
.sfm-kino .sfm-lead{color:var(--sfmkf-on-dark-2)}
.sfm-kino .sfm-eyebrow{color:var(--sfmkf-cyan-hell)}
.sfm-kino-inner{display:flex;align-items:center;gap:clamp(24px,4vw,60px);flex-wrap:wrap}
.sfm-kino-cta{margin-left:auto}
@media(max-width:760px){.sfm-kino-cta{margin-left:0}}

/* ---------- Abmeldezeile ---------- */
.sfm-abmeldezeile{background:var(--sfmkf-paper);border-top:1px solid var(--sfmkf-linie-2);padding-block:1rem}
.sfm-abmeldezeile-inner{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.sfm-abmeldezeile .sfm-abmelden{margin-left:auto}
@media(max-width:600px){.sfm-abmeldezeile .sfm-abmelden{margin-left:0}}

/* ---------- Fuß (nur Rückfall, normal kommt der echte Fuß der Website) ---------- */
.sfm-fuss{background:var(--sfmkf-paper);border-top:1px solid var(--sfmkf-linie);padding-block:2.2rem}
.sfm-fuss-inner{display:flex;gap:1.4rem;flex-wrap:wrap;align-items:center}
.sfm-fuss-name{font-weight:800;letter-spacing:-.02em;margin:0}
.sfm-fuss-kontakt{margin-left:auto;display:flex;flex-wrap:wrap;gap:1.1rem;font-size:.88rem;color:var(--sfmkf-text-2)}
.sfm-fuss-kontakt a:hover{color:var(--sfmkf-cyan)}
@media(max-width:700px){.sfm-fuss-kontakt{margin-left:0}}

/* ---------- Anmeldung ---------- */
.sfm-gesperrt-main{
  min-height:70vh;display:grid;place-items:center;
  padding-top:calc(var(--header-h,88px) + clamp(40px,6vw,80px));
  padding-bottom:clamp(50px,8vw,100px);
}
.sfm-login-huelle{width:100%;display:grid;place-items:center;padding-inline:var(--sfmkf-pad)}
.sfm-login-karte{
  width:100%;max-width:430px;background:#fff;border:1px solid var(--sfmkf-linie);
  border-radius:var(--sfmkf-r-lg);box-shadow:var(--sfmkf-schatten);
  padding:clamp(26px,4vw,40px);text-align:center;
  font-family:var(--sfmkf-font);color:var(--sfmkf-text);
}
.sfm-login-icon{
  display:grid;place-items:center;width:52px;height:52px;margin:0 auto 1.1rem;
  border-radius:16px;background:var(--sfmkf-cyan-soft);color:var(--sfmkf-cyan);
}
.sfm-login-icon svg{width:26px;height:26px}
.sfm-login-karte .sfm-muted{margin-bottom:0}
.sfm-login-form{margin-top:1.5rem;text-align:left}
.sfm-login-form label{display:block;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sfmkf-text-3);margin-bottom:.4rem}
.sfm-login-form input[type=password].sfm-login-form input[type=password],
.sfm-login-form input[type=password]{
  width:100% !important;padding:.9rem 1.1rem !important;font-size:1.02rem;font-family:var(--sfmkf-font);
  border:1.5px solid var(--sfmkf-linie) !important;border-radius:12px !important;
  background:var(--sfmkf-paper) !important;color:var(--sfmkf-text) !important;
  box-shadow:none;transition:border-color .2s,box-shadow .2s;margin-bottom:.9rem;
}
.sfm-login-form input[type=password]:focus{outline:0;border-color:var(--sfmkf-cyan-hell);box-shadow:0 0 0 4px var(--sfmkf-cyan-soft)}
.sfm-fehler{
  margin:1rem 0 0;padding:.7rem .9rem;border-radius:12px;
  background:#fdecec;border:1px solid #f6c9c9;color:#8f2020;font-size:.9rem;font-weight:600;
}
.sfm-login-hilfe{margin-top:1.2rem;text-align:center}
.sfm-login-hilfe a{color:var(--sfmkf-cyan);font-weight:700}

@media(prefers-reduced-motion:reduce){
  body.sfm-kf *{transition:none !important}
}