@import url('tc-mono.css');

/* ==========================================================
   TaylorCom Startseite - Mono-Theme (Wix-Template wh-1058)
   Palette : #EAE0C6 #536978 #EAE0C6 #536978 #536978 + Akzent #536978 / #EAE0C6
   Typo    : Montserrat 400, weites Letter-Spacing, CAPS-Eyebrows
   ========================================================== */
:root{
  --w:#EAE0C6; --g1:#536978; --g2:#EAE0C6; --g3:#536978; --k:#536978;
  --acc:#536978; --acc-l:#EAE0C6;
  --page:1200px;
  --pad:clamp(44px,5vw,80px);   /* Sektions-Innenabstand oben/unten */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--w); color:var(--k);
  font-family:"Montserrat","Segoe UI",system-ui,-apple-system,sans-serif;
  font-weight:400; -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.shell{max-width:var(--page);margin:0 auto;padding:0 28px}

/* ---------- Typo-Skala ---------- */
.eyebrow{font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--g3); margin:0 0 18px}
.eyebrow.on-dark{color:var(--g2)}
.eyebrow .dot{color:var(--acc)}
h1{font-size:clamp(30px,4.1vw,50px); font-weight:400; line-height:1.18; letter-spacing:.05em; text-transform:uppercase; margin:0}
h2{font-size:clamp(24px,2.4vw,30px); font-weight:400; line-height:1.35; letter-spacing:.075em; margin:0 0 20px}
h3{font-size:clamp(20px,1.9vw,26px); font-weight:400; line-height:1.3; letter-spacing:.09em; text-transform:uppercase; margin:0 0 18px}
p{font-size:16px; line-height:1.9; letter-spacing:.05em; color:var(--g3); margin:0 0 18px}
p.lead{font-size:18px; letter-spacing:.08em; line-height:1.85}
.on-dark h1,.on-dark h2,.on-dark h3{color:var(--w)}
.on-dark p{color:var(--g2)}

/* ---------- Link "Weiterlesen" ---------- */
.more{display:inline-block; font-size:13px; letter-spacing:.16em; text-transform:uppercase; padding-bottom:7px; border-bottom:1px solid var(--k); transition:.35s}
.more:hover{color:var(--acc); border-color:var(--acc); letter-spacing:.20em}
.more.on-dark{color:var(--w); border-color:var(--g3)}
.more.on-dark:hover{color:var(--acc-l); border-color:var(--acc-l)}

/* ---------- Header: Navigation exakt mittig ---------- */
.hdr{position:fixed; inset:0 0 auto 0; height:76px; z-index:60; display:flex; align-items:center;
  transition:background .4s,border-color .4s; border-bottom:1px solid rgba(234,224,198,0)}
.hdr.solid,.hdr.open{background:var(--w); border-bottom-color:var(--g1)}
.hdr .shell{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%}
.brand{font-size:15px; letter-spacing:.26em; text-transform:uppercase; color:var(--w); transition:color .4s}
.hdr.solid .brand,.hdr.open .brand{color:var(--k)}
.nav{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:26px}
.nav a{font-size:13px; letter-spacing:.10em; text-transform:uppercase; color:var(--w); opacity:.85; white-space:nowrap; transition:.3s}
.hdr.solid .nav a{color:var(--k)}
.nav a:hover{opacity:1;color:var(--acc-l)}
.hdr.solid .nav a:hover{color:var(--acc)}
.btn{display:inline-block; font-size:13px; letter-spacing:.14em; text-transform:uppercase; padding:13px 26px; border:1px solid currentColor; transition:.35s}
.btn:hover{background:var(--acc); border-color:var(--acc); color:var(--w)}
.burger{display:none;background:none;border:0;color:var(--w);font-size:22px;line-height:1;cursor:pointer;padding:8px;margin-left:auto}
.hdr.solid .burger,.hdr.open .burger{color:var(--k)}

/* ==========================================================
   Hero - Variante "Sternenhimmel": funkelndes Sternenfeld,
   dazu drei Sternschnuppen. Reines CSS, keine Assets.
   Die Elemente .sky / .cloud / .grain aus dem HTML werden hier
   umgewidmet - ein Variantenwechsel bleibt eine reine
   CSS-Aenderung, die Seite muss nicht angefasst werden.
   ========================================================== */
.hero{position:relative; min-height:min(46vh,460px); display:flex; align-items:flex-start;
  background:var(--k); overflow:hidden; color:var(--w)}
.hero-media{position:absolute;inset:0;background:#536978}

/* Sternenfeld - 14 Punkte, langsam heller und dunkler werdend */
.sky{position:absolute;inset:0;
  background-color:#536978;
  background-image:
    radial-gradient(1px 1px at 8% 22%,rgba(234,224,198,.9),transparent),
    radial-gradient(1px 1px at 19% 58%,rgba(234,224,198,.55),transparent),
    radial-gradient(2px 2px at 27% 14%,rgba(234,224,198,.75),transparent),
    radial-gradient(1px 1px at 36% 71%,rgba(234,224,198,.5),transparent),
    radial-gradient(1px 1px at 44% 31%,rgba(234,224,198,.85),transparent),
    radial-gradient(1px 1px at 53% 63%,rgba(234,224,198,.45),transparent),
    radial-gradient(2px 2px at 61% 19%,rgba(234,224,198,.7),transparent),
    radial-gradient(1px 1px at 69% 48%,rgba(234,224,198,.6),transparent),
    radial-gradient(1px 1px at 77% 76%,rgba(234,224,198,.5),transparent),
    radial-gradient(1px 1px at 84% 27%,rgba(234,224,198,.8),transparent),
    radial-gradient(1px 1px at 92% 55%,rgba(234,224,198,.55),transparent),
    radial-gradient(1px 1px at 15% 84%,rgba(234,224,198,.45),transparent),
    radial-gradient(1px 1px at 48% 88%,rgba(234,224,198,.4),transparent),
    radial-gradient(1px 1px at 88% 88%,rgba(234,224,198,.5),transparent);
  animation:twinkle 7s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.55}to{opacity:1}}
.sky::after{content:none}

/* Sternschnuppen - .cloud wird zur Schnuppe umgewidmet.
   Laufzeiten 9 / 13 / 11 s ohne gemeinsames Vielfaches,
   damit sich das Zusammenspiel nicht sichtbar wiederholt. */
.cloud{
  position:absolute;height:1px;width:170px;opacity:0;left:auto;
  background:linear-gradient(90deg,transparent,rgba(234,224,198,.9));
  pointer-events:none;will-change:transform;
  animation:shoot 9s linear infinite;
}
.cloud::after{
  content:"";position:absolute;right:-1px;top:-1px;width:3px;height:3px;border-radius:50%;
  background:#EAE0C6;box-shadow:0 0 9px 2px rgba(234,224,198,.75);
}
@keyframes shoot{
  0%   {transform:translate(-14vw,-16vh) rotate(-28deg);opacity:0}
  4%   {opacity:1}
  17%  {opacity:1}
  24%  {transform:translate(56vw,40vh) rotate(-28deg);opacity:0}
  100% {transform:translate(56vw,40vh) rotate(-28deg);opacity:0}
}
.c1{left:14%;top:6%;animation-duration:9s;animation-delay:0s}
.c2{left:48%;top:-4%;animation-duration:13s;animation-delay:3.4s;width:130px}
.c3{left:72%;top:12%;animation-duration:11s;animation-delay:6.8s;width:200px}

/* Filmkorn gegen Banding */
.grain{position:absolute;inset:0;opacity:.10;mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(234,224,198,.9) .5px,transparent .5px);
  background-size:3px 3px;animation:shift 1.1s steps(3) infinite}
@keyframes shift{0%{transform:translate(0,0)}33%{transform:translate(-1px,1px)}66%{transform:translate(1px,-1px)}100%{transform:translate(0,0)}}

/* Lesbarkeit */
.hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(83,105,120,.5) 0%,rgba(83,105,120,.12) 45%,rgba(83,105,120,.58) 100%)}
.hero .shell{position:relative;z-index:2;padding-top:clamp(64px,8vh,84px)}
.hero h1{max-width:15ch}
.hero p.lead{max-width:52ch;margin-top:22px;color:var(--g1)}
.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--g2)}
.scroll-cue span{display:block;width:1px;height:32px;background:var(--g3);margin:10px auto 0;position:relative;overflow:hidden}
.scroll-cue span::after{content:"";position:absolute;inset:0;background:var(--acc);animation:drop 2.4s ease-in-out infinite}
@keyframes drop{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ---------- Sections ---------- */
section{padding:var(--pad) 0}
.dark{background:var(--k);color:var(--w)}
.split{display:grid;grid-template-columns:1fr 1.55fr;gap:clamp(28px,5vw,72px);align-items:start}

/* ---------- Services ---------- */
.svc{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,64px);align-items:center;padding:clamp(28px,3.5vw,52px) 0}
.svc:nth-child(even) .svc-media{order:2}
.svc-num{font-size:13px;letter-spacing:.2em;color:var(--acc);margin:0 0 16px}
.svc-media{aspect-ratio:4/3;position:relative;overflow:hidden;background:var(--g1)}
.svc-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04);transition:filter .7s ease,transform .9s ease}
.svc:hover .svc-media img{filter:grayscale(0) contrast(1);transform:scale(1.04)}

/* Breites Bildband */
.band{margin-top:clamp(28px,3.5vw,52px);aspect-ratio:16/6;overflow:hidden;background:var(--g1)}
.band img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04);transition:filter .7s ease}
.band:hover img{filter:grayscale(0) contrast(1)}

/* ---------- Zahlen ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--g1);margin-top:40px}
.dark .stats{background:#536978}
.stat{background:var(--w);padding:34px 24px}
.dark .stat{background:var(--k)}
.stat b{display:block;font-size:clamp(34px,4vw,52px);font-weight:300;letter-spacing:.03em;margin-bottom:10px}
.stat small{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--g3)}
.dark .stat small{color:var(--g2)}

/* ---------- Wortmarken ---------- */
.marks{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--g1);margin-top:36px}
.mark{background:var(--w);padding:38px 20px;text-align:center;font-size:14px;letter-spacing:.22em;text-transform:uppercase;color:var(--g2);transition:.4s}
.mark:hover{color:var(--k);letter-spacing:.26em}

/* ---------- Listen-Block ---------- */
.listing{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(28px,5vw,72px);align-items:start}
.row{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:start;padding:24px 0;border-top:1px solid #536978}
.row:last-child{border-bottom:1px solid #536978}
.row h4{margin:0 0 8px;font-size:16px;font-weight:400;letter-spacing:.14em;text-transform:uppercase}
.row .place{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--acc);margin:0 0 10px}
.row p{margin:0;font-size:14px;line-height:1.8}
.row .apply{white-space:nowrap;align-self:center;font-size:12px;letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid var(--g3);padding-bottom:6px;transition:.35s}
.row .apply:hover{color:var(--acc-l);border-color:var(--acc-l)}

/* ---------- CTA ---------- */
.cta{background:var(--k);color:var(--w);text-align:center}
.cta h2{font-size:clamp(26px,3.2vw,40px);text-transform:uppercase;letter-spacing:.06em}
.cta .btns{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.cta .btn{color:var(--w)}
.cta .btn.fill{background:var(--w);color:var(--k);border-color:var(--w)}
.cta .btn.fill:hover{background:var(--acc);border-color:var(--acc);color:var(--w)}

/* ---------- Footer ---------- */
footer{background:var(--k);color:var(--g2);padding:56px 0 30px;font-size:13px;letter-spacing:.06em}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
footer h5{margin:0 0 16px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--w);font-weight:400}
footer a{display:block;padding:6px 0;transition:.3s}
footer a:hover{color:var(--acc-l)}
.fbrand{font-size:15px;letter-spacing:.26em;text-transform:uppercase;color:var(--w);margin-bottom:16px}
.fbot{margin-top:40px;padding-top:20px;border-top:1px solid #536978;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12px;color:var(--g3)}

/* ---------- Reveal (ohne JS bleibt alles sichtbar) ---------- */
.rv{opacity:1;transform:none}
html.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s ease}
html.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none}
  .sky,.grain,.scroll-cue span::after{animation:none}
  .cloud{display:none}
}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .nav{gap:20px}
  .nav a{letter-spacing:.06em}
  .btn{padding:12px 20px}
}
@media (max-width:900px){
  .burger{display:block}
  .nav{display:none}
  .hdr.open .nav{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:fixed; left:0; right:0; top:76px; transform:none;
    background:var(--w); border-bottom:1px solid var(--g1); padding:8px 28px 26px;
  }
  .hdr.open .nav a{color:var(--k);opacity:1;padding:16px 0;border-bottom:1px solid var(--g1);letter-spacing:.14em}
  .hdr.open .nav a:last-child{border-bottom:0}
  .hdr.open .nav a.btn{margin-top:16px;text-align:center;border:1px solid var(--k)}
  .hero{min-height:min(52vh,420px)}
  .hero .shell{padding-top:64px}
  .cloud{width:120px}
  .c3{width:150px}
  .split,.svc,.listing{grid-template-columns:1fr}
  .svc:nth-child(even) .svc-media{order:0}
  .stats,.marks{grid-template-columns:repeat(2,1fr)}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .stats,.marks,.fgrid{grid-template-columns:1fr}
  .row{grid-template-columns:1fr}
}


/* Kompakter Hero auch fuer alte HTML-/Cache-Versionen. */
.hero{height:520px !important;min-height:520px !important;padding:0 !important;align-items:flex-start !important}
.hero .shell{padding-top:105px !important}
@media(max-width:900px){.hero{height:460px !important;min-height:460px !important;padding:0 !important}.hero .shell{padding-top:88px !important}}


/* Hero endet direkt unter der Ãœberschrift. */
.hero{height:auto !important;min-height:0 !important;padding:110px 0 40px !important;align-items:flex-start !important}
.hero .shell{padding-top:0 !important}
.hero .lead{display:none !important}
@media(max-width:900px){.hero{height:auto !important;min-height:0 !important;padding:96px 0 32px !important}.hero .shell{padding-top:0 !important}}