/* Max Niemann – Fotografie */
@font-face{font-family:"W Sans";font-style:normal;font-weight:300;font-display:block;src:url(../fonts/w-300.woff2) format("woff2")}
@font-face{font-family:"W Sans";font-style:italic;font-weight:300;font-display:block;src:url(../fonts/w-300i.woff2) format("woff2")}
@font-face{font-family:"W Sans";font-style:normal;font-weight:400;font-display:block;src:url(../fonts/w-400.woff2) format("woff2")}
@font-face{font-family:"W Sans";font-style:italic;font-weight:400;font-display:block;src:url(../fonts/w-400i.woff2) format("woff2")}
@font-face{font-family:"W Sans";font-style:normal;font-weight:600;font-display:block;src:url(../fonts/w-600.woff2) format("woff2")}
@font-face{font-family:"W Sans";font-style:italic;font-weight:600;font-display:block;src:url(../fonts/w-600i.woff2) format("woff2")}
@font-face{font-family:"W Sans";font-style:normal;font-weight:700;font-display:block;src:url(../fonts/w-700.woff2) format("woff2")}
@font-face{font-family:"W Sans";font-style:italic;font-weight:700;font-display:block;src:url(../fonts/w-700i.woff2) format("woff2")}

:root{
  /* Warme Graustufen, Farbe kommt aus den Fotos */
  --paper:#fcfbfa;
  --fog:#f3f2ef;          /* wird unten aus der Markenfarbe abgeleitet */
  --line:#e1ded8;
  --ink:#24211d;
  --slate:#6e685f;
  --claim:#a39d93;       /* Claim im Logo, wie im Original hellgrau */
  --brand:#1f3763;       /* Tiefblau – Markenfarbe */
  --brand-dark:#16294b;
  --accent:var(--brand); /* Aktionen und Akzentflächen */
  --accent-dark:var(--brand-dark);
  --accent-ink:#fcfbfa;
  --ok:#5f7a52;
  --err:#a3271b;
  --radius:3px;
  --wrap:1180px;
  --gutter:clamp(16px,4vw,40px);
  --f:"W Sans","DIN Next","DIN Pro","Helvetica Neue",Arial,system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f);font-size:1.0625rem;line-height:1.6;font-weight:300;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--slate)}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
p{margin:0 0 1em}
h1,h2,h3{margin:0;font-weight:300;letter-spacing:-.005em;line-height:1.12;text-wrap:balance}
h1{font-size:clamp(2.5rem,5.2vw,4.2rem);font-weight:300;letter-spacing:-.015em;line-height:1.05}
h2{font-size:clamp(1.75rem,3vw,2.5rem)}
h3{font-size:1.35rem;font-weight:300;letter-spacing:0;line-height:1.25}
.lead{font-size:clamp(1.12rem,1.6vw,1.28rem);line-height:1.55;color:var(--ink);max-width:36em}
.muted{color:var(--slate)}
.small{font-size:.9rem}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.section{padding:clamp(64px,9vw,120px) 0}
.section.fog{background:var(--fog)}
.section-head{max-width:40em;margin-bottom:clamp(28px,4vw,48px)}
.section-head p{color:var(--slate);margin-top:.8em}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:100;background:var(--paper);padding:8px 12px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:.75em 1.35em;border-radius:var(--radius);border:1.5px solid var(--ink);background:transparent;color:var(--ink);font:inherit;font-weight:300;font-size:1rem;text-decoration:none;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:var(--paper)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.textlink{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px}

/* Header */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(252,251,250,.94);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid transparent;transition:border-color .2s}
.site-header.scrolled{border-bottom-color:var(--line)}
.site-header .wrap{display:flex;align-items:center;gap:24px;height:72px}
/* Logo wie im Original: »max« light, Nachname regular, Claim hellgrau, alles klein */
.brand{text-decoration:none;display:flex;flex-direction:column;line-height:1;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand .name{font-size:1.7rem;letter-spacing:-.01em;white-space:nowrap}
.brand .name .first{font-weight:300;margin-right:.14em}
.brand .name .last{font-weight:400}
.brand .claim{font-size:.74rem;font-weight:300;color:var(--claim);letter-spacing:.012em;margin-top:5px;padding-left:.08em}
@media (max-width:420px){.brand .name{font-size:1.45rem}.brand .claim{font-size:.68rem}}
.nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav a{text-decoration:none;padding:8px 11px;font-size:.95rem;border-radius:var(--radius)}
.nav a[aria-current=page]{font-weight:300;box-shadow:inset 0 -2px 0 var(--ink);border-radius:0}
.nav .btn{margin-left:12px;min-height:42px;padding:.5em 1.05em;font-size:.95rem}
.menu-toggle{display:none;margin-left:auto;background:none;border:0;font:inherit;font-weight:300;padding:10px 4px;cursor:pointer;color:var(--ink)}
@media (max-width:960px){
  .menu-toggle{display:block}
  .nav{display:none;position:absolute;top:72px;left:0;right:0;background:var(--paper);flex-direction:column;align-items:stretch;padding:8px var(--gutter) 24px;border-bottom:1px solid var(--line);gap:0}
  .nav.open{display:flex}
  .nav a{padding:14px 0;border-bottom:1px solid var(--line);font-size:1.05rem}
  .nav a[aria-current=page]{box-shadow:none}
  .nav .btn{margin:18px 0 0}
}

/* Hero mit Kontaktbogen */
.hero{padding:clamp(40px,6vw,80px) 0 clamp(56px,7vw,96px)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,72px);align-items:center}
.hero .lead{margin-top:22px}
.availability{display:flex;gap:10px;align-items:flex-start;margin-top:28px;padding-top:20px;border-top:1px solid var(--line);font-size:.95rem;color:var(--slate);max-width:32em}
.availability::before{content:"";flex:none;width:8px;height:8px;margin-top:.55em;border-radius:50%;background:var(--ok)}
/* Bildreihen: jedes Bild wächst mit seinem Seitenverhältnis, alle Bilder einer Reihe haben exakt dieselbe Höhe, nichts wird beschnitten */
.rows{display:flex;flex-direction:column;gap:8px}
.jrow{display:flex;gap:8px}
.jrow > *{min-width:0;margin:0}
.jrow img{width:100%;height:auto}
.mosaic{gap:8px}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}}
@media (max-width:600px){.rows,.jrow{gap:5px}}

/* Bildband über die volle Breite */
.band{padding:0 8px}
.band-wrap{padding-bottom:clamp(64px,9vw,120px)}

/* Kundenlogos */
.logos{padding:clamp(48px,6vw,80px) 0;border-top:1px solid var(--line)}
.logos.fog{background:var(--fog);border-top:0}
.logos h2{font-size:1rem;font-weight:300;color:var(--slate);margin-bottom:28px;letter-spacing:0}
.logos ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:36px 48px;align-items:center}
.logos li{display:flex;align-items:center;justify-content:center;height:64px}
.logos img{max-height:60px;max-width:100%;width:auto;object-fit:contain;mix-blend-mode:multiply}
@media (max-width:860px){.logos ul{grid-template-columns:repeat(3,1fr);gap:28px 28px}.logos li{height:52px}.logos img{max-height:44px}}
@media (max-width:420px){.logos ul{grid-template-columns:repeat(2,1fr)}}
.rating{display:inline-flex;gap:8px;align-items:baseline;text-decoration:none;font-weight:300}
.rating .stars{color:#b8860b;letter-spacing:1px}

/* Leistungen */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,36px)}
.service img{aspect-ratio:4/3;object-fit:cover;width:100%;margin-bottom:18px}
.service h3{margin-bottom:8px}
.service p{color:var(--slate);font-size:1rem}
.service .links{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.95rem}
@media (max-width:860px){.services{grid-template-columns:1fr}}

/* Ablauf */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:0;counter-reset:s}
.steps li{counter-increment:s;padding:22px 20px 0 0;border-top:2px solid var(--ink)}
.steps li::before{content:counter(s);display:block;font-size:2.4rem;font-weight:300;line-height:1;margin-bottom:14px;letter-spacing:-.04em}
.steps h3{font-size:1.05rem;margin-bottom:6px}
.steps p{font-size:.95rem;color:var(--slate);margin:0}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr;gap:28px 20px}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* Zitate */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(24px,4vw,48px)}
.quote{margin:0}
.quote blockquote{margin:0 0 18px;font-size:1.08rem;line-height:1.55}
.quote figcaption{display:flex;align-items:center;gap:12px;font-size:.92rem}
.quote img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.quote b{display:block}
.quote span{color:var(--slate)}

/* Seitenkopf Leistungsseiten */
.page-head{padding:clamp(40px,6vw,80px) 0 clamp(32px,4vw,48px)}
.page-head .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,64px);align-items:end}
.page-head .lead{margin-top:20px}
.facts{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.facts li{padding:14px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:9.5em 1fr;gap:12px;font-size:.98rem}
.facts b{font-weight:300}
.facts span{color:var(--slate)}
@media (max-width:860px){.page-head .wrap{grid-template-columns:1fr}}
@media (max-width:420px){.facts li{grid-template-columns:1fr;gap:2px}}

/* Textspalten */
.cols{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px)}
.cols .body{max-width:38em}
.cols .body h3{margin:1.6em 0 .5em}
.cols .body h3:first-child{margin-top:0}
@media (max-width:860px){.cols{grid-template-columns:1fr}}

/* Inline-CTA-Band */
.cta-band{background:var(--accent);color:var(--paper);padding:clamp(40px,6vw,64px) 0}
.cta-band .wrap{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;justify-content:space-between}
.cta-band h2{font-size:clamp(1.5rem,2.6vw,2.1rem);max-width:22em}
.cta-band p{margin:.5em 0 0;color:rgba(252,251,250,.78)}
.cta-band .btn{border-color:var(--paper);color:var(--paper)}
.cta-band .btn-primary{background:var(--paper);border-color:var(--paper);color:var(--accent-dark)}
.cta-band .btn-primary:hover{background:var(--fog);border-color:var(--fog);color:var(--ink)}
.cta-band .btn:hover{background:var(--paper);color:var(--ink)}

/* FAQ */
.faq{max-width:46em}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:18px 36px 18px 0;font-weight:300;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:14px;font-size:1.4rem;font-weight:300}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--slate);margin:0 0 20px}

/* Referenzen */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,32px)}
.case-link{display:block;text-decoration:none;color:inherit}
.case-link:hover{color:inherit}
.case-link:hover h3{text-decoration:underline;text-decoration-thickness:1px}
.case-link .imgbox{display:block}
.case img{aspect-ratio:3/2;object-fit:cover;width:100%;display:block;margin-bottom:12px;background:var(--fog)}
.case h3{font-size:1.05rem}
.case p{font-size:.92rem;color:var(--slate);margin:.2em 0 0}
@media (max-width:860px){.cases{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.cases{grid-template-columns:1fr}}
.client-list{columns:3 14em;column-gap:32px;list-style:none;margin:0;padding:0}
.client-list li{padding:9px 0;border-bottom:1px solid var(--line);break-inside:avoid;font-weight:300}

/* Über mich */
.about-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:start}
.about-grid img{width:100%}
.team{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:clamp(20px,4vw,48px);align-items:start}
@media (max-width:860px){.about-grid,.team{grid-template-columns:1fr}.team img{max-width:240px}}

/* Anfrage-Formular */
.inquiry{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:start}
.inquiry-aside p{color:var(--slate)}
.direct{list-style:none;padding:0;margin:24px 0 0;border-top:1px solid var(--line)}
.direct li{padding:12px 0;border-bottom:1px solid var(--line)}
.direct a{font-weight:300;text-decoration:none}
.direct span{display:block;font-size:.85rem;color:var(--slate)}
@media (max-width:900px){.inquiry{grid-template-columns:1fr}}

.funnel{background:none;border:0;padding:0}

.progress{display:flex;gap:6px;margin-bottom:22px}
.progress span{flex:1;height:3px;background:var(--line);border-radius:2px;transition:background .2s}
.progress span.on{background:var(--accent)}
.step-count{font-size:.85rem;color:var(--slate);margin:0 0 6px}
.fstep{border:0;margin:0;padding:0;min-width:0}
.fstep[hidden]{display:none}
.fstep legend{font-size:1.35rem;font-weight:300;letter-spacing:-.015em;margin-bottom:18px;padding:0}
.fstep .sub{color:var(--slate);font-weight:300;margin:22px 0 10px;font-size:1rem}
.chips{display:grid;grid-template-columns:repeat(2,1fr);gap:0 32px;border-top:1px solid var(--line)}
.chips.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:560px){.chips,.chips.three{grid-template-columns:1fr}}
.chip{position:relative;display:flex}
.chip label{flex:1}
.chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chip label{display:block;position:relative;padding:15px 8px 15px 0;border-bottom:1px solid var(--line);cursor:pointer;line-height:1.35;transition:border-color .15s,color .15s}
.chip label small{display:block;margin-top:2px}
.chip label small{color:var(--slate);font-size:.85rem}
.chip input:hover+label{border-bottom-color:var(--slate)}
.chip input:focus-visible+label{outline:2px solid var(--accent);outline-offset:2px}
.chip input:checked+label{color:var(--accent);border-bottom-color:var(--accent);box-shadow:inset 0 -1px 0 var(--accent)}
.chip input:checked+label small{color:var(--accent)}
.field{margin-bottom:14px}
.field label{display:block;font-size:.88rem;color:var(--slate);margin-bottom:2px}
.field label .opt{font-weight:300;color:var(--slate)}
.field input,.field textarea{width:100%;font:inherit;font-size:1.05rem;font-weight:300;padding:10px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;color:var(--ink)}
.field input:focus,.field textarea:focus{border-bottom-color:var(--accent);outline:none}
.field textarea{min-height:90px;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
@media (max-width:560px){.field-row{grid-template-columns:1fr}}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;margin:6px 0 10px;color:var(--slate)}
.check input{width:18px;height:18px;margin-top:3px;flex:none;accent-color:var(--accent)}
.hp{position:absolute;left:-5000px}
.fnav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:24px}
.fnav .back{background:none;border:0;font:inherit;color:var(--slate);cursor:pointer;padding:10px 0;text-decoration:underline}
.fnav .back[hidden]{display:none}
.summary{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;padding:0;list-style:none}
.summary li{font-size:.85rem;background:var(--fog);padding:4px 10px;border-radius:20px}
.fog .summary li{background:#e6e9eb}
.ferror{color:var(--err);font-size:.92rem;margin:10px 0 0}
.done{padding:12px 0}
.done h3{font-size:1.4rem;margin-bottom:10px}

/* Rechtstexte */
.legal{max-width:44em}
.legal h2{font-size:1.4rem;margin:2em 0 .6em}
.legal h3{font-size:1.1rem;margin:1.6em 0 .4em}
.draft{border-left:3px solid var(--err);padding:10px 16px;background:#fbf1ef;font-size:.95rem;margin-bottom:28px}

/* Footer */
.site-footer{background:var(--fog);padding:56px 0 110px;font-size:.95rem}
.site-footer .wrap{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px}
.site-footer h2{font-size:1rem;margin-bottom:10px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{padding:3px 0}
.site-footer a{text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.site-footer .base{grid-column:1/-1;border-top:1px solid var(--line);padding-top:20px;color:var(--slate);display:flex;flex-wrap:wrap;gap:8px 24px}
@media (max-width:760px){.site-footer .wrap{grid-template-columns:1fr 1fr}.site-footer .about-col{grid-column:1/-1}}
@media (min-width:961px){.site-footer{padding-bottom:56px}}

/* Mobile Aktionsleiste */
.mobilebar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(252,251,250,.97);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .25s}
.mobilebar.show{transform:none}
.mobilebar .btn{flex:1;min-height:46px;font-size:.98rem}
@media (max-width:960px){.mobilebar{display:flex}}

/* Lightbox */
a.lb{display:block;cursor:zoom-in}
a.lb img{transition:opacity .15s}
a.lb:hover img{opacity:.9}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(20,18,16,.94);display:flex;align-items:center;justify-content:center;padding:56px 64px calc(56px + env(safe-area-inset-bottom))}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 10px 40px rgba(0,0,0,.4)}
.lightbox button{position:absolute;background:none;border:0;color:#f0ede7;font:inherit;cursor:pointer;padding:12px 16px;font-size:1rem}
.lightbox button:hover{color:#fff}
.lightbox .lb-close{top:calc(8px + env(safe-area-inset-top));right:8px}
.lightbox .lb-prev,.lightbox .lb-next{top:50%;transform:translateY(-50%);font-size:2.2rem;font-weight:300;line-height:1}
.lightbox .lb-prev{left:6px}.lightbox .lb-next{right:6px}
.lightbox .lb-count{position:absolute;bottom:calc(16px + env(safe-area-inset-bottom));left:0;right:0;text-align:center;color:#a39d93;font-size:.85rem;font-variant-numeric:tabular-nums}
@media (max-width:600px){.lightbox{padding:56px 0}.lightbox .lb-prev,.lightbox .lb-next{display:none}}
body.lb-open{overflow:hidden}

/* Sternchen am Namen (Über mich) */
.star{color:var(--accent);text-decoration:none;font-weight:400;margin-left:.04em}
a.star:hover{color:var(--accent-dark)}
h1 a.star{font-size:.7em;vertical-align:super;line-height:0}
.namenote{border-top:1px solid var(--line)}
.namenote h2{font-size:clamp(1.4rem,2.2vw,1.8rem)}

/* Bilder blenden weich ein, sobald sie geladen sind (nur mit JavaScript, sonst sofort sichtbar) */
.jrow figure,.service-img,.about-grid > img{background:var(--fog);overflow:hidden}
.js .jrow img,.js .service img,.js .case img,.js .about-grid > img,.js .team img{opacity:0;transform:scale(1.02);filter:saturate(.6);animation:img-failsafe 0s linear 2.5s forwards;transition:opacity 1.1s cubic-bezier(.22,.61,.36,1),transform 1.6s cubic-bezier(.22,.61,.36,1),filter 1.6s ease}
.js .jrow img.is-loaded,.js .service img.is-loaded,.js .case img.is-loaded,.js .about-grid > img.is-loaded,.js .team img.is-loaded{opacity:1;transform:none;filter:none}

/* Sicherheitsnetz: falls das Skript nicht läuft, erscheinen die Bilder spätestens nach 2,5 Sekunden */
@keyframes img-failsafe{to{opacity:1;transform:none;filter:none}}

/* Hilfsklassen */
.page-head .wrap.s-one{grid-template-columns:1fr}
.section.s-pt0{padding-top:0}
.hero .lead + p{margin-top:14px;max-width:36em}

/* Kontakt mit Portrait */
.person{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.person img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.person:hover span{text-decoration:underline;text-decoration-thickness:1px}
.inquiry-aside .person{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);display:flex}
.inquiry-aside .person img{width:56px;height:56px}
.site-footer .person img{width:32px;height:32px}

/* Vorschau-Werkzeuge (nur Vorschau) */
.edit-bar{position:fixed;left:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:60;display:flex;flex-wrap:wrap;align-items:center;gap:6px;max-width:calc(100% - 24px);background:#24211d;color:#f8f7f4;padding:8px 10px;border-radius:6px;font-size:.85rem;box-shadow:0 6px 20px rgba(0,0,0,.18)}
.edit-bar .edit-title{opacity:.6;margin-right:4px}
.edit-bar button{font:inherit;font-size:.85rem;color:#f8f7f4;background:transparent;border:1px solid rgba(248,247,244,.35);border-radius:4px;padding:5px 10px;cursor:pointer}
.edit-bar button.on{background:#f8f7f4;color:#24211d}
.edit-bar .edit-status{opacity:.8;max-width:34em}
@media (max-width:960px){.edit-bar{bottom:calc(80px + env(safe-area-inset-bottom))}}
body.review [data-review="angepasst"]{background:rgba(242,201,76,.35);box-shadow:0 0 0 3px rgba(242,201,76,.35);cursor:help}
body.review [data-review="neu"]{outline:2px dashed rgba(64,120,192,.7);outline-offset:4px;cursor:help}
body.review .edited, body.editing .edited{outline:2px solid rgba(76,160,90,.8);outline-offset:4px}
body.editing [contenteditable=true]{outline:1px dashed var(--slate);outline-offset:4px;cursor:text}
body.editing [contenteditable=true]:focus{outline:2px solid var(--accent)}

.namemark{font-size:.62em;line-height:0;margin-left:1px}
.namemark .star{margin:0}
body.review [data-review="dein"]{outline:2px solid rgba(76,160,90,.8);outline-offset:4px}

/* Kundenstimmen als ausfransende Spalten (Referenzseite) */
.quotes.masonry{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,4vw,48px);align-items:start}
.quotes.masonry .qcol{display:flex;flex-direction:column;gap:clamp(36px,4vw,52px)}
@media (max-width:860px){.quotes.masonry{grid-template-columns:1fr}.quotes.masonry .qcol+.qcol{margin-top:clamp(36px,4vw,52px)}}

/* Kopf: Titel links, Anfrage-Button oben rechts */
.head-top{grid-column:1/-1;display:flex;justify-content:space-between;align-items:flex-start;gap:clamp(20px,4vw,48px)}
.head-top .btn{flex:none;margin-top:.5em}
.btn-lg{padding:16px 30px;font-size:1.05rem}
.head-link{margin-top:20px}
.h1-project{font-size:clamp(2.1rem,4vw,3.2rem);margin-top:.4em}
.project-intro{margin-top:clamp(20px,3vw,32px)}
.project-intro .lead{margin:0}
@media (max-width:760px){.head-top{flex-direction:column;gap:18px}.head-top .btn{margin-top:0}}
.mail-alt{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.mail-alt .small{margin:0 0 10px;color:var(--slate)}
.inquiry-aside .mail-alt .person{margin-top:0;padding-top:0;border-top:0}
.form-note{color:var(--slate);margin-top:8px}
.head-side{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(20px,3vw,28px)}
.head-side .facts{width:100%}
.person u{text-decoration:none}
.person:hover u{text-decoration:underline;text-decoration-thickness:1px}
.person:hover span{text-decoration:none}
.person-label span{display:flex;flex-direction:column;gap:2px}
.person-label small{font-size:.85rem;color:var(--slate)}
.lead-2{margin-top:.8em}
.service-title{color:inherit;text-decoration:none;display:block}
.service-title:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}

/* Leistungskarten: ganze Karte klickbar */
a.service{display:block;color:inherit;text-decoration:none}
.service-img{display:block;margin-bottom:18px;position:relative}
.service-img img{margin-bottom:0}
a.service h3{transition:color .4s ease}
a.service:hover h3{color:var(--accent)}
a.service .more{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding-right:10px;color:var(--accent);border-bottom:1px solid currentColor;font-size:.98rem;line-height:1.5;padding-bottom:1px}
a.service .more::after{content:"→";display:inline-block;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
a.service:hover .more::after{transform:translateX(6px)}
a.service:focus-visible{outline:2px solid var(--accent);outline-offset:6px}

/* Ruhiger Mouseover für alle Bilder: langsames Hineinzoomen, leicht aufgehellt */
.jrow figure,.service-img,.case-link .imgbox{overflow:hidden;position:relative}
.case-link .imgbox{margin-bottom:12px;background:var(--fog)}
.case-link .imgbox img{margin-bottom:0}
.service-img::after,.case-link .imgbox::after{content:"";position:absolute;inset:0;background:var(--accent);opacity:0;mix-blend-mode:multiply;transition:opacity 1.2s ease;pointer-events:none}
a.service:hover .service-img::after,.case-link:hover .imgbox::after{opacity:.1}

/* Kopf: Anfrage als letzte Zeile der Stichpunkte */
.head-side{display:block}
.facts-cta{display:flex;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid var(--accent);color:var(--accent);text-decoration:none;font-size:1.05rem;transition:padding .2s ease}
.facts-cta .arrow{margin-left:auto;font-size:1.1rem;transition:transform .25s ease}
.facts-cta:hover{border-bottom-width:2px;padding-bottom:15px}
.facts-cta:hover .arrow{transform:translateY(3px)}
.facts-cta-solo{margin-top:28px;max-width:22em;border-top:1px solid var(--line)}

/* Kontaktfelder: Label im Feld, rutscht beim Tippen nach oben */
.summary-box{margin:0 0 6px}
.summary-box .sub{margin-top:0}
.summary{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.summary li{font-size:.88rem;color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent);padding:5px 12px;border-radius:999px}
.field.fl{position:relative;margin-bottom:10px}
.field.fl input,.field.fl textarea{padding:22px 0 8px}
.field.fl label{position:absolute;left:0;top:20px;margin:0;font-size:1.05rem;color:var(--slate);pointer-events:none;transform-origin:left top;transition:transform .18s ease,color .18s ease}
.field.fl input:focus+label,.field.fl input:not(:placeholder-shown)+label,.field.fl textarea:focus+label,.field.fl textarea:not(:placeholder-shown)+label{transform:translateY(-17px) scale(.78)}
.field.fl input:focus+label,.field.fl textarea:focus+label{color:var(--accent)}
.field.fl .opt{font-size:.8em;opacity:.75;margin-left:4px}
.field .hint{font-size:.85rem;color:var(--slate);margin:6px 0 0}

/* Anker zur Anfrage: farbig hinterlegt, links unter dem Einleitungstext */
.anchor-cta{display:inline-flex;align-items:center;gap:28px;margin-top:28px;padding:15px 22px;background:var(--accent);color:var(--accent-ink);text-decoration:none;font-size:1.05rem;border-radius:var(--radius);transition:background .2s ease}
.anchor-cta .arrow{transition:transform .25s ease}
.anchor-cta:hover{background:var(--accent-dark)}
.anchor-cta:hover .arrow{transform:translateY(3px)}
.facts-cta:hover .arrow{transform:translateX(3px)}

/* Namenswechsel: »Niemann« wird durchgestrichen, »Max Niemann.« erscheint darunter */
.name-switch{line-height:1.2}
.name-switch .ns-old,.name-switch .ns-new{display:block}
.ns-strike{position:relative;display:inline-block;color:var(--claim)}
.ns-strike::after{content:"";position:absolute;left:-2%;right:-2%;top:54%;height:2px;background:var(--accent);transform-origin:left center;transform:scaleX(1)}
.ns-new{color:var(--accent);margin-top:.15em}
.ns-arrow{display:inline-block;margin-right:.15em}
.js .name-switch .ns-strike{color:var(--ink);transition:color .8s ease .9s}
.js .name-switch .ns-strike::after{transform:scaleX(0);transition:transform .9s cubic-bezier(.65,0,.35,1) .35s}
.js .name-switch .ns-new{opacity:0;transform:translateX(-14px);transition:opacity 1s ease 1.3s,transform 1.2s cubic-bezier(.16,1,.3,1) 1.3s}
.js .name-switch.is-in .ns-strike{color:var(--claim)}
.js .name-switch.is-in .ns-strike::after{transform:scaleX(1)}
.js .name-switch.is-in .ns-new{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .name-switch .ns-strike,.js .name-switch .ns-strike::after,.js .name-switch .ns-new{transition:none}}
.name-switch .star,.name-switch .ns-arrow{display:inline-block;width:1.15em;margin:0}
.name-switch .ns-indent{display:inline-block;width:1.15em}
a.service p{margin:0}
a.service .more{margin-top:8px}
@media (max-width:860px){.services{row-gap:64px}}
.anchor-cta:hover,.anchor-cta:focus-visible,.btn-primary:hover{color:var(--accent-ink)}

a.service:hover .service-img::after,.case-link:hover .imgbox::after{transition:opacity 2s ease}
/* Zweite Zeile: Vorname bleibt wie oben, nur »Niemann« farbig und unterstrichen */
.name-switch .ns-new{color:var(--ink)}
.ns-hl{position:relative;display:inline-block;color:var(--accent)}
.ns-hl::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:2px;background:var(--accent);transform-origin:left center}
.js .name-switch .ns-hl::after{transform:scaleX(0);transition:transform 1s cubic-bezier(.65,0,.35,1) 2.1s}
.js .name-switch.is-in .ns-hl::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.js .name-switch .ns-hl::after{transition:none}}


/* Anfrage-Bereich in der Markenfarbe: helle Schrift auf der Markenfarbe */
#anfrage{background:var(--brand);color:#fcfbfa;
  --ink:#fcfbfa;--slate:rgba(252,251,250,.72);--claim:rgba(252,251,250,.5);--line:rgba(252,251,250,.26);
  --accent:#fcfbfa;--accent-dark:#ffffff;--accent-ink:var(--brand);--err:#ffc2b8}
#anfrage .summary li{background:rgba(252,251,250,.14);color:#fcfbfa}
#anfrage .inquiry-aside p{color:var(--slate)}
#anfrage .chip input:checked+label{font-weight:400}
#anfrage .btn-primary:hover{background:#ffffff;color:var(--brand)}
#anfrage .btn:not(.btn-primary):hover{background:rgba(252,251,250,.1);color:#fcfbfa}
#anfrage input::placeholder,#anfrage textarea::placeholder{color:rgba(252,251,250,.45)}
#anfrage input:-webkit-autofill{-webkit-text-fill-color:#fcfbfa;transition:background-color 9999s}
#anfrage .person img{box-shadow:0 0 0 2px rgba(252,251,250,.3)}

/* Markenfarbe als dezente Hintergrundfarbe: Farbflächen und Stichpunkt-Block */
:root{--tint:color-mix(in srgb,var(--brand) 7%,#fcfbfa);--tint-line:color-mix(in srgb,var(--brand) 16%,#fcfbfa)}
:root{--fog:var(--tint)}
.head-side{background:var(--tint);padding:6px clamp(18px,2.4vw,28px) 0;border-radius:var(--radius)}
.head-side .facts{border-top:0}
.head-side .facts li{border-bottom-color:var(--tint-line)}
.head-side .facts-cta{border-bottom:0;padding:18px 0 20px}
.head-side .facts-cta:hover{padding-bottom:20px}

/* Kontaktdaten: Rückwärts-Text richtig herum anzeigen, bis JS den echten Text einsetzt */
.obf{unicode-bidi:bidi-override;direction:rtl}

/* Über mich: Arbeitsfoto klein in der linken Spalte */
.about-side{margin:clamp(20px,3vw,32px) 0 0;max-width:420px}
.about-side img{width:100%;display:block}
@media (max-width:860px){.about-side{max-width:none}}
/* »Mehr Infos«: Unterstrich wächst mit dem Pfeil mit */
a.service .more{border-bottom:0;padding-bottom:3px;padding-right:12px;background:linear-gradient(currentColor,currentColor) left bottom/calc(100% - 12px) 1px no-repeat;transition:background-size .5s cubic-bezier(.22,.61,.36,1)}
a.service:hover .more{background-size:100% 1px}
a.service .more::after{transition:transform .5s cubic-bezier(.22,.61,.36,1)}
a.service:hover .more::after{transform:translateX(8px)}
/* »Mehr Infos«: nur der Text unterstrichen, Pfeil daneben */
a.service .more{background:none;padding:0;border:0}
a.service .more u{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}
/* Seitenbreite Bildreihen auf Unterseiten: Desktop flach, mobil eigene Reihen */
.band.wide .rows-m{display:none}
@media (max-width:760px){.band.wide .rows-d{display:none}.band.wide .rows-m{display:flex}}
.edit-bar .edit-out{color:#f8f7f4;font-size:.85rem;margin-left:4px}
.edit-conflict{outline:2px dashed #a3271b !important}
body.editing main img{outline:2px dashed rgba(31,55,99,.55);outline-offset:-2px;cursor:copy}

/* Zoom beim Drüberfahren: ein Rahmen um das Bild wird vergrößert (transform, in allen Browsern) */
.zw{display:block;transform:translateZ(0);transition:transform .9s cubic-bezier(.4,0,.2,1)}
.jrow a.lb{display:block;transform:translateZ(0);transition:transform .9s cubic-bezier(.4,0,.2,1)}
a.service:hover .zw,.case-link:hover .zw{transform:scale(1.045);transition:transform 2s cubic-bezier(.25,.6,.3,1)}
.jrow figure:hover a.lb{transform:scale(1.025);transition:transform 2s cubic-bezier(.25,.6,.3,1)}
.client-more{color:var(--slate);margin:14px 0 0;font-weight:300}
body.editing [data-block][contenteditable=true] p,body.editing [data-block][contenteditable=true] h3{outline:0 !important}