/* Kaya Service – Gebäudereinigung Saarbrücken · Stylesheet 2026
   Palette (aus "Color Palette.txt"): DarkBrown #453E3E · Red #EF4D48 · DirtyWhite #F7F3F5 · Grau #E6E6E6
   Keine externen Schriften/Skripte: schnell und DSGVO-freundlich. */

:root{
  --brown:#453e3e;
  --brown-900:#2b2626;
  --brown-700:#5a5252;
  --red:#ef4d48;
  --red-dark:#d63a35;
  --red-ink:#b82f2b;           /* Text-Rot mit AA-Kontrast auf Weiss */
  --paper:#f7f3f5;
  --gray:#e6e6e6;
  --line:#e3dde0;
  --white:#fff;
  --ink:#2b2626;
  --muted:#6b6264;
  --radius:14px;
  --shadow:0 10px 30px -12px rgba(43,38,38,.28);
  --shadow-sm:0 4px 14px -6px rgba(43,38,38,.25);
  --wrap:1180px;
  --font:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Roboto,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--white);line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--red-ink);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--red)}
h1,h2,h3,h4{font-family:var(--font);line-height:1.15;margin:0 0 .5em;color:var(--brown);letter-spacing:-.015em;font-weight:800}
h1{font-size:clamp(2.1rem,5vw,3.6rem)}
h2{font-size:clamp(1.65rem,3.4vw,2.4rem)}
h3{font-size:1.25rem;letter-spacing:-.005em}
h4{font-size:1.05rem}
p{margin:0 0 1em}
ul{margin:0 0 1em;padding-left:1.2em}
.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.narrow{width:min(100% - 2.5rem,780px);margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:var(--red);color:#fff;padding:.7rem 1rem;z-index:100;border-radius:0 0 8px 0}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:4px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.55rem;font:700 1rem/1 var(--font);padding:1rem 1.5rem;border-radius:999px;border:2px solid transparent;text-decoration:none;cursor:pointer;transition:transform .15s,background .2s,color .2s,box-shadow .2s;min-height:48px}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 8px 20px -8px rgba(239,77,72,.75)}
.btn-primary:hover{background:var(--red-dark);color:#fff}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.btn-ghost:hover{background:#fff;color:var(--brown)}
.btn-dark{background:var(--brown);color:#fff}
.btn-dark:hover{background:var(--brown-900);color:#fff}
.btn-line{background:#fff;color:var(--brown);border-color:var(--brown)}
.btn-line:hover{background:var(--brown);color:#fff}
.btn svg,.more svg,.mobile-cta svg{width:1.15em;height:1.15em;flex:none}

/* Topbar + Header */
.topbar{background:var(--brown-900);color:#e9e2e4;font-size:.86rem}
.topbar .wrap{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;flex-wrap:wrap}
.topbar a{color:#fff;text-decoration:none}
.topbar a:hover{color:var(--red)}
.topbar span+span{margin-left:1.4rem}
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:76px}
.brand{display:flex;flex:none;align-items:center;gap:.8rem;text-decoration:none;color:var(--brown)}
.brand img{width:46px;height:auto}
.brand b{display:block;font-size:1.3rem;line-height:1;font-weight:800;letter-spacing:-.02em}
.brand small{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.25rem}
.nav ul{list-style:none;display:flex;gap:.2rem;margin:0;padding:0;align-items:center}
.nav a{display:block;white-space:nowrap;padding:.65rem .9rem;text-decoration:none;color:var(--brown);font-weight:600;font-size:.98rem;border-radius:999px}
.nav a:hover{background:var(--paper);color:var(--red-ink)}
.nav a[aria-current="page"]{color:var(--red-ink);background:var(--paper)}
.nav .btn{color:#fff;margin-left:.5rem;padding:.8rem 1.25rem}
.nav .btn:hover,.nav .btn[aria-current]{background:var(--red-dark);color:#fff}
.langsw{display:flex;align-items:center;gap:.2rem;margin-left:.1rem}
.langsw a{padding:.5rem .55rem;font-size:.9rem}
.langsw span{color:var(--muted);font-size:.85rem}
.burger{display:none;background:none;border:0;width:48px;height:48px;border-radius:10px;cursor:pointer;color:var(--brown)}
.burger span,.burger span::before,.burger span::after{display:block;width:24px;height:2.5px;background:currentColor;border-radius:2px;position:relative;transition:.25s;margin:auto}
.burger span::before,.burger span::after{content:"";position:absolute;left:0}
.burger span::before{top:-8px}.burger span::after{top:8px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* Hero — text sits directly on the photo (no white card, no dark scrim panel): legibility comes
   from a soft shadow "halo" behind the text itself (layered blurred shadows, no hard offset
   stroke/outline), so the photo stays fully visible with no overlay tint anywhere. Text is
   anchored top-left, under the header. The photo gets a slow, subtle Ken-Burns drift for a bit
   of life. */
.hero{position:relative;padding:0;color:#fff;isolation:isolate;overflow:hidden;background:var(--brown-900);min-height:clamp(560px,54vw,780px);display:flex;align-items:flex-start}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;z-index:-2;transform-origin:52% 40%;display:block}
.hero .wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto;padding:clamp(1.75rem,4vw,2.75rem) 0 clamp(1.5rem,3vw,2.5rem)}
.hero-card{max-width:min(700px,100%)}
.hero h1{color:#fff;max-width:none;font-size:clamp(1.6rem,2.5vw,2.15rem);margin-bottom:.45em;text-shadow:0 2px 4px rgba(0,0,0,.55),0 6px 18px rgba(0,0,0,.55),0 16px 40px rgba(0,0,0,.4)}
.hero h1 em{font-style:normal;color:var(--red)}
.hero p.lead{font-size:clamp(.98rem,1.4vw,1.08rem);max-width:none;color:#fff;margin:0;text-shadow:0 1px 4px rgba(0,0,0,.75),0 3px 14px rgba(0,0,0,.65),0 8px 28px rgba(0,0,0,.45);-webkit-text-stroke:.4px rgba(0,0,0,.35)}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--red);margin-bottom:1rem}
.eyebrow::before{content:"";width:34px;height:3px;background:var(--red);border-radius:2px}
.hero .eyebrow,.page-hero.has-img .eyebrow{margin-bottom:.7rem;text-shadow:0 1px 3px rgba(0,0,0,.6),0 3px 10px rgba(0,0,0,.55)}
.hero-cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.1rem}
.hero-cta .btn-ghost{background:#fff;color:var(--red-ink);border-color:var(--red)}
.hero-cta .btn-ghost:hover{background:var(--red);color:#fff;border-color:var(--red)}
.ph-card .btn-ghost{text-shadow:0 1px 2px rgba(0,0,0,.5);backdrop-filter:blur(2px)}
.page-hero{background:linear-gradient(135deg,var(--brown-900),var(--brown));color:#fff;padding:clamp(3rem,7vw,5.5rem) 0;position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;top:50%;right:max(1.25rem,calc((100% - var(--wrap))/2));height:72%;max-height:240px;aspect-ratio:729/767;transform:translateY(-50%);background:url(../img/logo-light.svg) center/contain no-repeat;opacity:.09;pointer-events:none}
.page-hero .wrap{position:relative;z-index:1}
.page-hero.has-img{isolation:isolate;background:var(--brown-900);padding:clamp(1.75rem,4.5vw,3rem) 0;min-height:clamp(280px,27vw,380px);display:flex;align-items:flex-start}
.page-hero.has-img>.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.page-hero.has-img::after{display:none}
.page-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transform-origin:52% 40%}
.ph-card{max-width:min(540px,100%)}
.page-hero h1{color:#fff;font-size:clamp(2rem,4.6vw,3.2rem);margin-bottom:.4em}
.page-hero.has-img h1{font-size:clamp(1.7rem,3.2vw,2.4rem);text-shadow:0 1px 3px rgba(0,0,0,.75),0 10px 28px rgba(0,0,0,.5)}
.page-hero p{max-width:60ch;color:#e6dde0;font-size:1.12rem;margin:0}
.page-hero.has-img p{font-size:.98rem;max-width:none;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8),0 6px 18px rgba(0,0,0,.45)}
.crumbs{font-size:.86rem;margin-bottom:1rem;color:#cdc3c6}
.crumbs a{color:#fff;text-decoration:none}
.crumbs a:hover{color:var(--red)}
.page-hero.has-img .crumbs{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8)}

/* Soft hero animation: a gentle fade/rise for the text the moment the page paints, and a slow
   drift on the photo itself. Skipped entirely for anyone who has asked their system for less
   motion. */
@media (prefers-reduced-motion:no-preference){
  @keyframes hero-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  @keyframes hero-kenburns{from{transform:scale(1)}to{transform:scale(1.07)}}
  .hero-card,.ph-card{animation:hero-in .9s cubic-bezier(.2,.7,.3,1) both}
  .hero>img,.page-hero>img{animation:hero-kenburns 17s ease-in-out infinite alternate}
}

/* Homepage hero on narrow phones: the full, uncropped team photo is kept — banner and legs
   included, nothing trimmed from the source image. object-fit:cover on a landscape photo inside a
   taller-than-wide box always shows the photo's FULL height (only the sides are cropped), which
   means the team's vertical position is a FIXED PERCENTAGE of the hero's height no matter how tall
   the hero box is. So the only way to keep the text clear of the team's faces without cropping the
   photo is to shrink the text block itself, then give the hero just enough height for that smaller
   block to clear the faces — instead of the old, much taller 1120px box. Below, the copy block is
   tightened (smaller heading/lead, tighter gaps, more compact buttons) and the hero height is cut
   accordingly, so the team appears as high up the page as the text block allows without the two
   overlapping. Re-check this height (and re-tighten further if needed) if the hero photo or hero
   copy ever changes. */
@media (max-width:640px){
  .hero{min-height:700px}
  .hero .wrap{padding:1.1rem 0 .9rem}
  .hero .eyebrow{margin-bottom:.35rem;font-size:.68rem}
  .hero h1{font-size:1.28rem;margin-bottom:.25em;line-height:1.16}
  .hero p.lead{font-size:.85rem;line-height:1.32}
  .hero-cta{margin-top:.55rem;gap:.4rem}
  .hero-cta .btn{padding:.5rem .8rem;font-size:.8rem}
}
/* Very narrow phones (~320-340px, e.g. older/small devices): the lead paragraph wraps an extra
   line at this width, eating into the clearance above the team's faces — give the hero a little
   more height here specifically rather than shrinking the copy further. */
@media (max-width:340px){
  .hero{min-height:760px}
}

/* Trust strip */
.trust{position:relative;margin-top:-4.2rem;z-index:5}
.trust ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-radius:var(--radius);box-shadow:var(--shadow)}
.trust li{padding:1.4rem 1.5rem;border-right:1px solid var(--line);display:flex;gap:.9rem;align-items:center}
.trust li:last-child{border:0}
.trust svg{width:34px;height:34px;flex:none;color:var(--red)}
.trust b{display:block;font-size:1.05rem;color:var(--brown);line-height:1.2}
.trust span{font-size:.86rem;color:var(--muted);line-height:1.3;display:block}
.trust [data-g]{display:inline;font-size:inherit;color:inherit;line-height:inherit}

/* Sections */
section{padding:clamp(3.5rem,8vw,6.5rem) 0}
.bg-paper{background:var(--paper)}
.bg-dark{background:var(--brown);color:#efe8ea}
.bg-dark h2,.bg-dark h3{color:#fff}
.sec-head{max-width:720px;margin-bottom:2.6rem}
.sec-head.center{text-align:center;margin-inline:auto}
.sec-head p{color:var(--muted);font-size:1.1rem}
.bg-dark .sec-head p{color:#d9d0d3}

/* Service cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s;border:1px solid var(--line)}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.card .ph{aspect-ratio:4/3;overflow:hidden;background:var(--gray)}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.card:hover .ph img{transform:scale(1.06)}
.card .body{padding:1.5rem 1.5rem 1.7rem;display:flex;flex-direction:column;flex:1}
.card h3{margin-bottom:.4em}
.card p{color:var(--muted);font-size:.98rem}
.card .more{margin-top:auto;font-weight:700;text-decoration:none;color:var(--red-ink);display:inline-flex;gap:.4rem;align-items:center}
.card .more:hover{gap:.7rem}
.cards.five{grid-template-columns:repeat(6,1fr)}
.cards.five .card{grid-column:span 2}
.cards.five .card:nth-child(4){grid-column:2 / span 2}
.cards.five .card:nth-child(5){grid-column:4 / span 2}

/* Feature list */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.feature .ico{width:58px;height:58px;border-radius:16px;background:rgba(239,77,72,.14);color:var(--red);display:grid;place-items:center;margin-bottom:1.1rem}
.feature .ico svg{width:30px;height:30px}
.bg-dark .feature p{color:#d9d0d3}

/* Split layout */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split.rev>:first-child{order:2}
.split .pic{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);position:relative}
.split .pic img{width:100%;height:auto}
.split .pic.tall img{aspect-ratio:3/4;height:100%;object-fit:cover;max-height:640px}
.tick{list-style:none;padding:0;margin:0 0 1.4rem}
.tick li{position:relative;padding:.35rem 0 .35rem 2rem}
.tick li::before{content:"";position:absolute;left:0;top:.62rem;width:1.15rem;height:1.15rem;border-radius:50%;background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/70% no-repeat}
.tick.cols{columns:2;column-gap:2.2rem}
.tick.cols li{break-inside:avoid}


/* Kompakte Leistungs-Kacheln (Startseite) */
.services{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem}
.svc{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:var(--shadow-sm);transition:transform .25s,box-shadow .25s}
.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow);color:var(--ink)}
.svc .ph{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--gray)}
.svc .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.svc:hover .ph img{transform:scale(1.06)}
.svc .body{display:flex;flex-direction:column;gap:.35rem;padding:1rem 1.05rem 1.1rem;flex:1}
.svc h3{font-size:1.05rem;margin:0;overflow-wrap:break-word;hyphens:auto}
@media (min-width:1200px){.svc h3{font-size:.9rem;letter-spacing:-.01em}.svc .body{padding:.9rem .8rem 1rem}}
.svc .txt{font-size:.9rem;line-height:1.45;color:var(--muted)}
.svc .more{margin-top:auto;padding-top:.5rem;font-weight:700;font-size:.9rem;color:var(--red-ink);display:inline-flex;align-items:center;gap:.35rem}
.svc:hover .more{gap:.6rem}

/* Galerie-Mosaik (Startseite) */
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:.75rem}
.mosaic a{position:relative;display:block;overflow:hidden;border-radius:12px;background:var(--gray);cursor:zoom-in}
.mosaic img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.mosaic a:hover img{transform:scale(1.06)}
.mosaic a::after{content:attr(data-cap);position:absolute;inset:auto 0 0 0;padding:1.8rem .9rem .75rem;font-size:.85rem;font-weight:600;color:#fff;background:linear-gradient(transparent,rgba(43,38,38,.85));opacity:0;transition:opacity .25s}
.mosaic a:hover::after,.mosaic a:focus-visible::after{opacity:1}
.mosaic .a{grid-area:1/1/3/3}.mosaic .b{grid-area:1/3/2/4}.mosaic .c{grid-area:1/4/3/5}.mosaic .d{grid-area:2/3/3/4}
.mosaic .e{grid-area:3/1/4/2}.mosaic .f{grid-area:3/2/4/4}.mosaic .g{grid-area:3/4/4/5}

/* Vorher / Nachher */
.ba{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.ba figure{margin:0;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--line)}
.ba img{width:100%;aspect-ratio:4/3;object-fit:cover}
.ba figcaption{padding:.9rem 1.1rem;font-weight:600;color:var(--brown);font-size:.95rem}

/* Gallery */
.filters{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.8rem}
.filters button{font:600 .95rem var(--font);padding:.6rem 1.1rem;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--brown);cursor:pointer;min-height:44px}
.filters button:hover{border-color:var(--brown)}
.filters button[aria-pressed="true"]{background:var(--brown);border-color:var(--brown);color:#fff}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.gallery.small{grid-template-columns:repeat(3,1fr)}
.gallery a{position:relative;display:block;border-radius:12px;overflow:hidden;aspect-ratio:1;background:var(--gray);cursor:zoom-in}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.gallery a:hover img{transform:scale(1.07)}
.gallery a::after{content:attr(data-cap);position:absolute;inset:auto 0 0 0;padding:1.6rem .9rem .75rem;font-size:.85rem;font-weight:600;color:#fff;background:linear-gradient(transparent,rgba(43,38,38,.85));opacity:0;transition:opacity .25s}
.gallery a:hover::after,.gallery a:focus-visible::after{opacity:1}
.gallery a[hidden]{display:none}
.lightbox{position:fixed;inset:0;background:rgba(20,17,17,.93);display:none;align-items:center;justify-content:center;z-index:200;padding:1rem}
.lightbox.open{display:flex}
.lightbox figure{margin:0;max-width:min(1100px,94vw);text-align:center}
.lightbox img{max-height:80vh;width:auto;margin:auto;border-radius:10px}
.lightbox figcaption{color:#e9e2e4;margin-top:.8rem;font-size:.95rem}
.lightbox button{position:absolute;background:rgba(255,255,255,.14);color:#fff;border:0;width:52px;height:52px;border-radius:50%;font-size:1.5rem;cursor:pointer}
.lightbox button:hover{background:var(--red)}
.lb-close{top:1rem;right:1rem}.lb-prev{left:1rem;top:50%}.lb-next{right:1rem;top:50%}

/* Reviews */
.reviews{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.review{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem;box-shadow:var(--shadow-sm);position:relative}
.review::before{content:"\201C";position:absolute;top:.4rem;right:1.2rem;font:800 5rem/1 Georgia,serif;color:rgba(239,77,72,.16)}
.stars{color:#f5a623;letter-spacing:.15em;font-size:1.15rem;margin-bottom:.6rem}
.review blockquote{margin:0 0 1rem;font-size:1.06rem;color:var(--ink)}
.review cite{font-style:normal;font-weight:700;color:var(--brown)}
.score{display:flex;align-items:center;gap:1rem;justify-content:center;margin-bottom:2.2rem;flex-wrap:wrap}
.score b{font-size:3rem;color:var(--brown);line-height:1}
.score .stars{margin:0;font-size:1.4rem}

/* Partner */
.partners{display:flex;gap:2.5rem;justify-content:center;align-items:center;flex-wrap:wrap}
.partners a{display:block;opacity:.85;transition:.2s}
.partners a:hover{opacity:1;transform:translateY(-2px)}
.partners img{height:50px;width:auto}
.partners .txtlogo{font-weight:800;font-size:1.5rem;letter-spacing:.06em;color:var(--brown-700);text-decoration:none}

/* CTA band */
.cta{background:linear-gradient(120deg,var(--red-dark),var(--red));color:#fff;padding:clamp(2.6rem,6vw,4.2rem) 0}
.cta .wrap{display:flex;gap:2rem;justify-content:space-between;align-items:center;flex-wrap:wrap}
.cta h2{color:#fff;margin:0 0 .3em}
.cta p{margin:0;max-width:52ch;color:#fff;opacity:.95}
.cta .btn-white{background:#fff;color:var(--red-ink)}
.cta .btn-white:hover{background:var(--brown);color:#fff}
.cta .btns{display:flex;gap:.8rem;flex-wrap:wrap}

/* Kontakt */
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.contact-list{list-style:none;margin:0;padding:0}
.contact-list li{display:flex;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line)}
.contact-list svg{width:26px;height:26px;color:var(--red);flex:none;margin-top:.15rem}
.contact-list b{display:block;color:var(--brown)}
.contact-list a{color:var(--ink);text-decoration:none;font-weight:600}
.contact-list a:hover{color:var(--red-ink)}
.form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.4rem,3vw,2.2rem);box-shadow:var(--shadow)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{margin-bottom:1rem}
.field label{display:block;font-weight:700;font-size:.92rem;margin-bottom:.35rem;color:var(--brown)}
.field input,.field select,.field textarea{width:100%;font:inherit;padding:.85rem 1rem;border:1.5px solid #cfc6c9;border-radius:10px;background:#fff;color:var(--ink);min-height:48px}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid rgba(239,77,72,.35);border-color:var(--red)}
.check{display:flex;gap:.7rem;align-items:flex-start;font-size:.9rem;color:var(--muted);margin-bottom:1.2rem}
.check input{margin-top:.3rem;width:20px;height:20px;accent-color:var(--red);flex:none}
.hp{position:absolute;left:-9999px}
.note{font-size:.85rem;color:var(--muted)}
.form-status{margin-top:1rem;padding:.9rem 1.1rem;border-radius:10px;font-size:.95rem;border:1px solid var(--line);background:var(--paper)}
.form-status.ok{background:#eef8ef;border-color:#b8dcbc;color:#1f5d2a}
.form-status.err{background:#fdeeed;border-color:#f1b9b6;color:#8a2622}
.form-status a{font-weight:700;color:inherit}
.form button[disabled]{opacity:.65;cursor:progress}
.hours{width:100%;border-collapse:collapse;margin-top:.4rem}
.hours td{padding:.35rem 0;border-bottom:1px dashed var(--line)}
.hours td:last-child{text-align:right;font-weight:700}

/* Prose (Impressum/Datenschutz) */
.prose h2{font-size:1.5rem;margin-top:2.2rem}
.prose h3{font-size:1.15rem;margin-top:1.6rem}
.prose{padding:clamp(2.5rem,6vw,4.5rem) 0}
.prose dl{display:grid;grid-template-columns:max-content 1fr;gap:.3rem 1.4rem}
.prose dt{font-weight:700;color:var(--brown)}
.prose dd{margin:0}
.todo{background:#fff4d6;border:1px dashed #d8a520;padding:.15rem .45rem;border-radius:5px;font-size:.92em}

/* Footer */
.footer{background:var(--brown-900);color:#d9d0d3;padding:clamp(3rem,6vw,4.5rem) 0 1.4rem;font-size:.97rem}
.footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2.4rem}
.footer h4{color:#fff;font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1rem}
.footer a{color:#d9d0d3;text-decoration:none}
.footer a:hover{color:#fff;text-decoration:underline}
.footer ul{list-style:none;padding:0;margin:0}
.footer li{padding:.22rem 0}
.footer .brand{color:#fff;margin-bottom:1rem}
.footer .brand small{color:#b8adb1}
.footer .legal{border-top:1px solid rgba(255,255,255,.12);margin-top:2.6rem;padding-top:1.3rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.86rem;color:#b8adb1}

/* Sticky Mobile CTA */
.mobile-cta{display:none}

/* Reveal */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s,transform .7s}
  .reveal.in{opacity:1;transform:none}
}

/* Responsive */
@media (max-width:1199px){
  .services{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1000px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .cards.five{grid-template-columns:repeat(2,1fr)}
  .cards.five .card,.cards.five .card:nth-child(4),.cards.five .card:nth-child(5){grid-column:auto}
  .cards.five .card:nth-child(5){grid-column:1 / -1}
  .features{grid-template-columns:1fr;gap:1.6rem}
  .split,.contact-grid{grid-template-columns:1fr}
  .split.rev>:first-child{order:0}
  .ba{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .trust ul{grid-template-columns:repeat(2,1fr)}
  .trust li:nth-child(2){border-right:0}
  .trust li:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .footer .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:1180px){
  .nav a{padding:.6rem .7rem;font-size:.95rem}
  .nav .btn{padding:.75rem 1.05rem;margin-left:.3rem}
  .brand small{letter-spacing:.1em}
}
@media (max-width:1100px){
  .burger{display:block}
  .nav{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow);display:none;padding:.4rem max(1.25rem,calc((100% - var(--wrap))/2)) 1.4rem}
  .nav.open{display:block}
  .nav ul{flex-direction:column;align-items:stretch;gap:0}
  .nav li:not(:last-child){border-bottom:1px solid var(--line)}
  .nav a{padding:1rem .4rem;border-radius:0;font-size:1.05rem;background:none}
  .nav a:hover,.nav a[aria-current="page"]{background:none}
  .nav .btn{margin:1rem 0 0;justify-content:center;border-radius:999px;padding:1rem 1.5rem;background:var(--red);color:#fff}
  .nav .btn:hover,.nav .btn[aria-current]{background:var(--red-dark);color:#fff}
}
@media (max-width:860px){
  .page-hero::after{display:none}
  .topbar .wrap{justify-content:center;text-align:center}
  .topbar .hide-s{display:none}
}
@media (max-width:700px){
  .services{grid-template-columns:1fr;gap:.75rem}
  .services .svc{flex-direction:row}
  .svc .ph{flex:0 0 38%;aspect-ratio:auto;min-height:110px}
  .svc .body{padding:.85rem 1rem}
  .mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px;grid-auto-flow:dense;gap:.5rem}
  .mosaic a{grid-area:auto!important}
  .mosaic .a{grid-column:span 2!important;grid-row:span 2!important}
  .mosaic .c{grid-row:span 2!important}
  .mosaic .f{grid-column:span 2!important}
}
@media (max-width:640px){
  body{font-size:16.5px}
  /* Inner-page hero photos (Über uns, Leistungen, Karriere, Kontakt) are candid/portrait shots of
     people, and on narrow phones the lead paragraph — full-width, top-left anchored, same size as
     desktop — was wrapping to 2-3 lines that landed squarely on top of faces in the photo (e.g. the
     younger colleague's face on Über uns, Hasan's face on Kontakt). The h1 is left alone (accepted
     as-is), but the lead <p> gets a smaller size + tighter line-height here so it both takes less
     vertical room AND (since more characters fit per line at a smaller size) usually wraps to one
     fewer line — plus a slightly taller min-height floor (300px→340px) so whatever text remains has
     more clearance above the object-fit:cover-cropped photo's face zone. Re-check with Playwright
     screenshots of all four affected pages (not just one) if hero copy or photos change. */
  .page-hero.has-img{min-height:clamp(370px,66vw,420px);padding-top:1rem;padding-bottom:1.4rem}
  .page-hero.has-img .crumbs{margin-bottom:.5rem}
  .page-hero.has-img h1{margin-bottom:.3em}
  .page-hero.has-img p{font-size:.85rem;line-height:1.32}
  .cards,.cards.five,.reviews,.ba{grid-template-columns:1fr}
  .cards.five .card:nth-child(5){grid-column:auto}
  .gallery,.gallery.small{grid-template-columns:repeat(2,1fr);gap:.6rem}
  .trust{margin-top:-3rem}
  .trust ul{grid-template-columns:1fr}
  .trust li{border-right:0;border-bottom:1px solid var(--line)}
  .trust li:last-child{border:0}
  .tick.cols{columns:1}
  .form .row{grid-template-columns:1fr}
  .footer .cols{grid-template-columns:1fr}
  .prose dl{grid-template-columns:1fr}
  .mobile-cta{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;box-shadow:0 -6px 24px rgba(0,0,0,.18)}
  .mobile-cta a{display:flex;justify-content:center;align-items:center;gap:.35rem;padding:.95rem .3rem;font-weight:700;font-size:.85rem;text-decoration:none;color:var(--brown);min-height:54px}
  .mobile-cta a:first-child{background:var(--red);color:#fff}
  .mobile-cta svg{width:1.05em;height:1.05em}
  body{padding-bottom:54px}
}
/* Vorher/Nachher-Schieberegler */
.cmp{--pos:50%;position:relative;overflow:hidden;border-radius:var(--radius);box-shadow:var(--shadow);aspect-ratio:700/880;background:var(--gray);user-select:none;-webkit-user-select:none;touch-action:pan-y;cursor:ew-resize}
.cmp-col{display:flex;justify-content:center}
.cmp-col .cmp{width:100%;max-width:520px}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;aspect-ratio:auto;pointer-events:none}
.cmp-before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.cmp-bar{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 12px rgba(0,0,0,.35);pointer-events:none}
.cmp-bar i{position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;border:3px solid #fff;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.cmp-bar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cmp-tag{position:absolute;top:.8rem;padding:.3rem .75rem;border-radius:99px;background:rgba(43,38,38,.72);color:#fff;font-weight:700;font-size:.82rem;letter-spacing:.04em;pointer-events:none;backdrop-filter:blur(3px)}
.cmp-tag.b{left:.8rem}.cmp-tag.a{right:.8rem}
.cmp-range{position:absolute;left:0;bottom:0;width:100%;height:1px;margin:0;opacity:0;pointer-events:none}
.cmp:focus-within{outline:3px solid var(--brown);outline-offset:3px}
.cmp:focus-within .cmp-bar i{box-shadow:0 0 0 4px rgba(43,38,38,.5)}
.cmp-hint{position:absolute;left:50%;bottom:.9rem;transform:translateX(-50%);padding:.35rem .9rem;border-radius:99px;background:rgba(255,255,255,.92);color:var(--brown);font-weight:700;font-size:.82rem;pointer-events:none;transition:opacity .4s}
.cmp.used .cmp-hint{opacity:0}
.ba .cmp{border-radius:0;box-shadow:none}
@media (max-width:1000px){.cmp-col .cmp{max-width:460px}}

/* Cookie-/Einwilligungs-Banner */
.linkbtn{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
.linkbtn:hover{color:#fff}
.consent{position:fixed;left:0;right:0;bottom:0;z-index:300;background:#fff;color:var(--ink);border-top:1px solid var(--line);box-shadow:0 -10px 40px rgba(43,38,38,.22);max-height:90vh;overflow:auto;padding:1.4rem 0}
.consent[hidden]{display:none}
.consent-main{display:flex;gap:2rem;align-items:center;justify-content:space-between}
.consent h2{font-size:1.15rem;margin:0 0 .5rem}
.consent p{margin:0;font-size:.95rem;line-height:1.6;max-width:62rem}
.consent-btns{display:flex;gap:.6rem;flex:none}
.cbtn{font:inherit;font-weight:700;font-size:.95rem;padding:.8rem 1.3rem;min-height:46px;border-radius:8px;border:2px solid var(--brown);cursor:pointer;background:#fff;color:var(--brown);white-space:nowrap;transition:background .2s,color .2s}
.cbtn.red{background:var(--red);border-color:var(--red);color:#fff}.cbtn.red:hover{background:var(--red-dark);border-color:var(--red-dark)}
.cbtn.dark{background:var(--brown);color:#fff}.cbtn.dark:hover{background:var(--brown-900)}
.cbtn.line:hover{background:var(--paper)}
.cbtn:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.consent-panel{margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--line);display:grid;gap:.9rem;justify-items:start}
.consent-panel[hidden]{display:none}
.crow{display:flex;gap:.8rem;align-items:flex-start;cursor:pointer}
.crow input{width:22px;height:22px;margin-top:.15rem;accent-color:var(--red);flex:none}
.crow span{display:block;font-size:.93rem;line-height:1.5;color:var(--muted)}
.crow b{display:block;color:var(--ink);font-size:1rem}
.map{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:#fff;min-height:340px;aspect-ratio:16/7;position:relative}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.5rem;padding:1.5rem;background:linear-gradient(135deg,#efe9ec,#e3dde0)}
.map-ph svg{width:42px;height:42px;color:var(--red);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.map-ph p{margin:0;max-width:34rem;color:var(--muted);font-size:.95rem}
.map-btns{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center;margin-top:.6rem}
@media (max-width:900px){
  .consent{padding:1.1rem 0 1.2rem}
  .consent-main{flex-direction:column;align-items:stretch;gap:1rem}
  .consent-btns{flex-wrap:wrap}
  .consent-btns .cbtn{flex:1 1 30%;padding:.75rem .6rem}
  .map{aspect-ratio:auto;min-height:420px}
}
@media print{.consent{display:none}}

/* Nach-oben-Button */
.to-top{position:fixed;right:1.25rem;bottom:1.25rem;z-index:70;width:52px;height:52px;border-radius:50%;border:0;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 22px rgba(43,38,38,.3);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .3s,transform .3s,visibility .3s,background .2s}
.to-top[hidden]{display:flex}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--red-dark);transform:translateY(-3px)}
.to-top:focus-visible{outline:3px solid var(--brown);outline-offset:3px}
.to-top svg{width:24px;height:24px}
@media (max-width:640px){.to-top{bottom:calc(54px + 1rem + env(safe-area-inset-bottom,0px));right:1rem;width:48px;height:48px}}
@media print{.header,.topbar,.mobile-cta,.cta,.lightbox,.to-top{display:none}}