/*
Theme Name: ALX Creative Lab
Description: Individueller ALX-Auftritt in mattem Waldgrün.
Version: 1.0.3
Text Domain: alx-creative-lab
*/

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#141512;--ink:#f1f0e8;--muted:#aaada1;--lime:#344b3e;--line:#3b3d34}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Manrope,Arial,sans-serif}a{color:inherit;text-decoration:none}header{display:flex;justify-content:space-between;align-items:center;padding:28px 5%;border-bottom:1px solid var(--line)}.logo{font-size:30px;font-weight:800;letter-spacing:5px}.logo small{display:block;font-size:8px;letter-spacing:2px}nav{display:flex;gap:30px;font-size:13px}.pill{border:1px solid var(--line);border-radius:30px;padding:12px 20px}.hero{padding:60px 5% 45px}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:2px;display:flex;align-items:center;gap:10px}.dot{height:7px;width:7px;border-radius:50%;background:var(--lime)}h1{font-size:clamp(65px,10.8vw,165px);letter-spacing:-.075em;line-height:.96;font-weight:600;margin:38px 0}.accent{color:var(--lime)}.hero-bottom{display:flex;justify-content:space-between;align-items:end;gap:30px}.intro{max-width:440px;color:var(--muted);font-size:15px;line-height:1.8}.button{display:inline-flex;align-items:center;gap:45px;padding:18px 25px;background:var(--lime);color:var(--bg);border-radius:40px;font-size:13px;font-weight:800}.art{height:300px;margin:55px 0 0;background:#344b3e;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;color:#141512}.art:before,.art:after{content:'';position:absolute;width:450px;height:450px;border:60px solid #141512;border-radius:50%;transform:rotate(-30deg);left:-180px;top:-190px}.art:after{left:auto;right:-160px;top:80px}.art span{font-size:clamp(60px,13vw,185px);font-weight:800;letter-spacing:-.09em;transform:rotate(-7deg);z-index:1}.art small{position:absolute;bottom:20px;left:24px;font-size:10px;letter-spacing:2px}.section{padding:85px 5%;border-top:1px solid var(--line)}.section-top{display:flex;justify-content:space-between;gap:35px;margin-bottom:45px}h2{font-size:clamp(35px,5vw,65px);line-height:1.1;letter-spacing:-.05em;margin:0;max-width:800px;font-weight:500}.label{font-size:11px;color:var(--muted);letter-spacing:1.5px;min-width:160px}.service{display:grid;grid-template-columns:70px 1fr 1fr 30px;gap:20px;padding:30px 0;border-top:1px solid var(--line);align-items:start}.number{color:var(--muted);font-size:12px}.service h3{font-size:35px;letter-spacing:-1.5px;margin:0;font-weight:500}.service p{color:var(--muted);font-size:14px;line-height:1.8;margin:0}.arrow{font-size:28px}.tags{font-size:10px;letter-spacing:1px;color:var(--lime);margin-top:14px}.about{background:#22241e;display:grid;grid-template-columns:1fr 1fr;gap:70px}.about p{font-size:17px;line-height:1.9;color:#c2c5b6;margin:0}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:50px}.step{border-top:1px solid var(--line);padding-top:20px}.step h3{font-size:20px;font-weight:500}.step p{color:var(--muted);font-size:14px;line-height:1.8}.contact{background:var(--lime);color:var(--bg)}.contact .label{color:#c2d1c5}.contact h2{font-size:clamp(55px,8vw,110px);max-width:1000px}.contact-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:45px}.contact .button{background:var(--bg);color:var(--ink)}footer{padding:30px 5%;display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:11px}footer div{display:flex;gap:20px}.draft{padding:10px;text-align:center;font-size:10px;letter-spacing:.5px;background:#22241e;color:var(--muted)}@media(max-width:700px){header{padding:22px 6%}nav a:not(:last-child){display:none}.hero{padding:40px 6%}h1{font-size:18vw;margin:35px 0}.hero-bottom,.section-top,.contact-bottom{display:block}.intro{margin-bottom:25px}.art{height:220px}.section{padding:55px 6%}.label{margin-bottom:25px}.service{grid-template-columns:30px 1fr 25px}.service p{grid-column:2/3}.service .arrow{grid-column:3;grid-row:1}.service h3{font-size:30px}.about{grid-template-columns:1fr;gap:30px}.steps{grid-template-columns:1fr}.contact-bottom .button{margin-bottom:25px}footer{flex-direction:column}footer div{flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Dezente Bewegung für den Markenauftritt */
@keyframes floatType{0%,100%{transform:translateX(-2%) rotate(-7deg)}50%{transform:translateX(2%) rotate(-4deg)}}
@keyframes breathe{0%,100%{box-shadow:0 0 0 0 #344b3e55}50%{box-shadow:0 0 0 7px #344b3e00}}
.art span{animation:floatType 9s ease-in-out infinite}.dot{animation:breathe 3s ease-in-out infinite}
.button,.pill{transition:transform .25s ease,box-shadow .25s ease,background .25s ease}.button:hover{transform:translateY(-4px);box-shadow:0 10px 30px #0003}.pill:hover{background:#ffffff0b}
.button span,.service .arrow{display:inline-block;transition:transform .3s ease}.button:hover span{transform:translate(3px,-2px)}
.service{transition:background .3s ease,padding .3s ease}.service:hover{background:#ffffff04;padding-left:12px;padding-right:12px}.service:hover .arrow{transform:translate(4px,-4px);color:var(--lime)}
nav a:focus-visible,.button:focus-visible{outline:2px solid var(--lime);outline-offset:6px}
@media(prefers-reduced-motion:no-preference){.motion-ready .reveal{opacity:0;transform:translateY(28px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.3,1)}.motion-ready .reveal.visible{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.contact-links{display:flex;flex-wrap:wrap;align-items:center;gap:14px;max-width:700px}.contact-instagram{padding:15px;font-size:13px;text-decoration:underline;text-underline-offset:5px}.contact-details{flex-basis:100%;display:flex;flex-wrap:wrap;gap:12px 25px;font-size:13px;margin-top:8px}.contact-bottom{gap:30px}@media(max-width:700px){.contact-bottom .contact-links .button{margin-bottom:0}.contact-links{margin-bottom:25px}}
/* Mattes Waldgrün, mit heller Schrift auf grünen Flächen */
.accent,.service:hover .arrow{color:#9bb5a2}.dot{background:#9bb5a2}.tags{color:#9bb5a2}
.hero .button{color:var(--ink)}.art{color:var(--ink)}.art:before,.art:after{border-color:#25372d}.contact{color:var(--ink)}.contact .label{color:#c2d1c5}

.portfolio-note{max-width:620px;color:var(--muted);font-size:14px;line-height:1.8;margin-bottom:35px}.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.portfolio-art{height:330px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;transition:transform .4s ease}.portfolio-card:hover .portfolio-art{transform:translateY(-5px)}.portfolio-brand{background:#344b3e;color:#f1f0e8;flex-direction:column}.portfolio-brand>span{font-size:120px;letter-spacing:-12px;font-weight:800}.portfolio-dot{color:#9bb5a2}.portfolio-brand>small{font-size:9px;letter-spacing:2px;margin-top:20px}.portfolio-print{background:#b7b8ac}.print-sheet{width:58%;height:75%;padding:25px;background:#eeeade;color:#25372d;font-size:48px;font-weight:800;transform:rotate(-12deg);box-shadow:15px 20px 0 #344b3e}.print-sheet small{display:block;margin-top:35px;font-size:15px;line-height:1.5;letter-spacing:1px}.portfolio-social{background:#22241e}.social-tile{padding:25px 40px;border:1px solid #9bb5a2;transform:rotate(7deg);font-size:48px;font-weight:800;line-height:.95;letter-spacing:-3px}.social-tile em{color:#9bb5a2}.portfolio-caption{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-top:18px}.portfolio-caption h3{font-size:15px;font-weight:500;margin:0}.portfolio-caption>span{color:var(--muted);font-size:10px;white-space:nowrap}@media(max-width:850px){.portfolio-grid{grid-template-columns:1fr}.portfolio-art{height:300px}}@media(max-width:700px){nav a[href="#portfolio"]{display:block}}
.meier-reference>span{font-size:clamp(32px,4vw,58px);letter-spacing:2px}.meier-reference>small{margin-top:8px;letter-spacing:3px}.reference-type{font-size:9px;letter-spacing:1px;margin-top:60px;color:#c2d1c5}.reference-description{font-size:13px;line-height:1.8;color:var(--muted)}
/* Gleiche Breite für beide Logozeilen */
.logo{display:flex;flex-direction:column;width:96px;align-items:stretch;font-size:30px;font-weight:800;line-height:1;letter-spacing:0}.logo-word{display:flex;justify-content:space-between;width:100%}.logo small{display:block;width:100%;font-size:8px;letter-spacing:1.65px;line-height:1.4;margin-top:6px;text-align:center;white-space:nowrap}

.logo small{display:flex;justify-content:space-between;letter-spacing:0;text-align:initial;width:100%}.logo small span{display:block}

/* Mobile Markenfläche: vollständiger Schriftzug und getrennte Unterzeile */
@media(max-width:700px){
.art{height:auto;min-height:220px;padding:35px 18px 70px;overflow:hidden}
.art>span{font-size:clamp(30px,8.5vw,58px);letter-spacing:-.055em;line-height:1.1;white-space:nowrap;animation:none;transform:rotate(-5deg)}
.art>small{left:18px;right:18px;bottom:20px;font-size:8px;letter-spacing:1.1px;line-height:1.7;max-width:none}
header nav{gap:12px}.pill{padding:10px 12px;font-size:11px}.logo{flex-shrink:0}header{gap:15px}
.contact-links .button{max-width:100%;gap:20px}.portfolio-caption{flex-wrap:wrap}
}

@media(max-width:700px){
.service{grid-template-columns:30px minmax(0,1fr) 25px;gap:16px 12px}
.service>.number{grid-column:1;grid-row:1}
.service>h3{grid-column:2;grid-row:1;min-width:0}
.service>div{grid-column:1 / -1;grid-row:2;min-width:0}
.service>.arrow{grid-column:3;grid-row:1}
.service p{font-size:14px;line-height:1.8;overflow-wrap:break-word}
.service .tags{line-height:1.8;overflow-wrap:break-word}
}

.art>small{z-index:2}.legal-page{padding:65px 6%;max-width:1000px;margin:auto}.legal-page h1{font-size:clamp(34px,6vw,64px);letter-spacing:-.04em;line-height:1.15;overflow-wrap:anywhere}.legal-content{font-size:16px;line-height:1.85;color:var(--muted);overflow-wrap:anywhere}.legal-content p{margin:0 0 1.2em}.legal-content a{text-decoration:underline;color:var(--ink)}.legal-content strong{color:var(--ink)}.legal-content ul,.legal-content ol{padding-left:1.5em}