/*
Theme Name: S&Y Veranstaltungstechnik
Theme URI: https://sy-veranstaltungstechnik.de/
Author: S&Y Veranstaltungstechnik
Description: Individuelles, responsives WordPress-Theme für S&Y Veranstaltungstechnik.
Version: 2.1.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: sy-veranstaltungstechnik
*/
:root{--sy-bg:#080d13;--sy-panel:#101923;--sy-panel2:#142231;--sy-text:#f4f7fb;--sy-muted:#aab8c7;--sy-cyan:#22c7ee;--sy-blue:#1686d9;--sy-line:rgba(255,255,255,.12);--sy-max:1180px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--sy-bg);color:var(--sy-text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.65}
a{color:inherit;text-decoration:none}
a:hover{color:var(--sy-cyan)}
img{max-width:100%;height:auto}
.wrap{width:min(var(--sy-max),calc(100% - 44px));margin-inline:auto}
.site-header{position:relative;z-index:20;background:rgba(6,12,18,.96);border-bottom:1px solid var(--sy-line)}
.header-inner{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:25px}
.site-brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:-.07em;font-size:1.55rem}
.site-brand .amp{color:var(--sy-cyan)}
.site-brand img{max-height:54px;width:auto}
.brand-caption{display:block;font-size:.55rem;letter-spacing:.18em;color:#b6c4d1;font-weight:700;margin-top:-7px}
.primary-menu{display:flex;align-items:center;gap:27px;list-style:none;margin:0;padding:0;color:#d3dce5;font-size:.9rem}
.primary-menu a{display:block;padding:12px 0}
.header-cta,.button{display:inline-flex;align-items:center;justify-content:center;padding:12px 19px;border:0;border-radius:4px;background:linear-gradient(110deg,var(--sy-blue),var(--sy-cyan));color:#04111a;font-weight:800;font-size:.9rem;cursor:pointer}
.header-cta:hover,.button:hover{color:#04111a;filter:brightness(1.08)}
.menu-toggle{display:none;background:transparent;border:1px solid var(--sy-line);border-radius:4px;color:#fff;padding:9px 12px}
.hero{min-height:680px;display:flex;align-items:center;position:relative;overflow:hidden;padding:105px 0 85px;background:radial-gradient(ellipse at 78% 46%,rgba(15,139,207,.27),transparent 35%),linear-gradient(110deg,#080d13 10%,rgba(8,13,19,.88) 54%,rgba(8,13,19,.4)),linear-gradient(135deg,#132535,#071019 60%,#0d2638)}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 49%,rgba(32,191,237,.07) 50%,transparent 51%),linear-gradient(0deg,transparent 49%,rgba(32,191,237,.05) 50%,transparent 51%);background-size:90px 90px;mask-image:linear-gradient(90deg,transparent,#000)}
.hero:after{content:"";position:absolute;width:500px;height:500px;border:1px solid rgba(34,199,238,.24);border-radius:50%;right:7%;top:16%;box-shadow:0 0 0 55px rgba(34,199,238,.025),0 0 0 110px rgba(34,199,238,.02),0 0 100px rgba(34,199,238,.12)}
.hero-content{position:relative;z-index:1;max-width:760px}
.eyebrow{color:var(--sy-cyan);text-transform:uppercase;letter-spacing:.2em;font-size:.76rem;font-weight:800}
.hero h1{font-size:clamp(3rem,7vw,6.1rem);line-height:.99;letter-spacing:-.065em;margin:22px 0 25px;font-weight:850}
.hero h1 .accent{color:var(--sy-cyan)}
.hero-copy{max-width:590px;color:#c0ccd7;font-size:1.12rem;margin:0 0 32px}
.hero-actions{display:flex;gap:13px;flex-wrap:wrap}
.button-outline{display:inline-flex;align-items:center;justify-content:center;padding:11px 18px;border:1px solid rgba(255,255,255,.38);border-radius:4px;font-weight:700;font-size:.9rem}
.hero-note{margin-top:55px;color:#8193a4;font-size:.77rem;letter-spacing:.13em;text-transform:uppercase}
.section{padding:96px 0}
.section-dark{background:#0c131b}
.section-head{max-width:700px;margin-bottom:42px}
.section-head h2,.statement h2{font-size:clamp(2.05rem,4vw,3.5rem);line-height:1.06;letter-spacing:-.05em;margin:12px 0 17px}
.section-head p,.muted{color:var(--sy-muted)}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.service-card{padding:27px;background:linear-gradient(145deg,#142230,#0e1721);border:1px solid var(--sy-line);min-height:215px;transition:transform .22s,border-color .22s}
.service-card:hover{transform:translateY(-4px);border-color:rgba(34,199,238,.5)}
.service-number{color:var(--sy-cyan);font-size:.75rem;letter-spacing:.15em;font-weight:800}
.service-card h3{font-size:1.25rem;margin:24px 0 8px}
.service-card p{color:var(--sy-muted);font-size:.93rem;margin:0}
.statement-grid{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center}
.visual-panel{min-height:360px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 60%,rgba(34,199,238,.3),transparent 38%),linear-gradient(145deg,#1b3549,#0a121b 70%);border:1px solid var(--sy-line)}
.visual-panel:before,.visual-panel:after{content:"";position:absolute;inset:16% 13%;border:1px solid rgba(34,199,238,.5);transform:skewY(-17deg)}
.visual-panel:after{inset:28% 23%;border-color:rgba(255,255,255,.22);transform:skewY(17deg)}
.visual-label{position:absolute;bottom:23px;left:25px;color:#d5e6f0;font-size:.72rem;letter-spacing:.17em;text-transform:uppercase;z-index:1}
.statement p{color:var(--sy-muted)}
.check-list{list-style:none;padding:0;margin:22px 0}
.check-list li{padding:7px 0;color:#dce6ef}
.check-list li:before{content:"↗";color:var(--sy-cyan);margin-right:12px;font-weight:900}
.reference-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}
.reference-card{position:relative;min-height:255px;display:flex;flex-direction:column;justify-content:end;overflow:hidden;border:1px solid var(--sy-line);background:linear-gradient(145deg,#17334a,#0c1722);padding:24px}
.reference-card:before{content:"";position:absolute;width:240px;height:240px;border:1px solid rgba(34,199,238,.22);border-radius:50%;right:-55px;top:-70px;box-shadow:0 0 0 35px rgba(34,199,238,.025),0 0 0 70px rgba(34,199,238,.02)}
.reference-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.58;transition:transform .4s}
.reference-card:hover img{transform:scale(1.05)}
.reference-card:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(4,10,16,.95),rgba(4,10,16,.05) 75%)}
.reference-card>*{position:relative;z-index:1}
.reference-category{color:var(--sy-cyan);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase}
.reference-card h3{font-size:1.28rem;margin:7px 0 0}
.contact-band{background:linear-gradient(110deg,#102334,#0b121a)}
.contact-inner{display:flex;justify-content:space-between;gap:28px;align-items:center}
.contact-inner h2{font-size:clamp(2.2rem,5vw,4rem);line-height:1;letter-spacing:-.06em;margin:12px 0}
.contact-inner p{color:var(--sy-muted);max-width:570px}
.site-footer{padding:30px 0;background:#060a0f;border-top:1px solid var(--sy-line);color:#8d9baa;font-size:.82rem}
.footer-inner{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.footer-inner strong{color:#eaf4fa}
.content-area{padding:70px 0;min-height:45vh}
.content-area h1,.content-area h2,.content-area h3{color:#fff}
.content-area p,.content-area li{color:#c3ced8}
.entry-content a{color:var(--sy-cyan);text-decoration:underline}
.entry-content img{border-radius:4px}
.reference-single-image{margin:25px 0}
.contact-form{max-width:700px;display:grid;gap:15px;margin-top:25px}
.contact-form label{display:grid;gap:6px;color:#dce6ef;font-weight:650}
.contact-form input,.contact-form textarea{width:100%;background:#0b141e;border:1px solid var(--sy-line);border-radius:4px;padding:13px;color:#fff;font:inherit}
.contact-form textarea{min-height:150px;resize:vertical}
.form-notice{padding:12px 15px;background:#102c26;border:1px solid #246a55;color:#b9f5d8}
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:850px){.primary-menu{gap:15px}.header-cta{display:none}.service-grid{grid-template-columns:repeat(2,1fr)}.statement-grid{gap:35px}}
@media(max-width:680px){.wrap{width:calc(100% - 32px)}.header-inner{min-height:72px}.menu-toggle{display:block}.primary-nav{display:none;position:absolute;top:72px;left:0;right:0;background:#080d13;padding:10px 22px 20px;border-bottom:1px solid var(--sy-line)}.primary-nav.is-open{display:block}.primary-menu{display:block}.primary-menu a{padding:10px 0}.hero{min-height:620px;padding:80px 0}.hero:after{right:-260px;opacity:.65}.hero h1{font-size:clamp(3.1rem,15vw,4.5rem)}.section{padding:72px 0}.service-grid,.reference-grid,.statement-grid{grid-template-columns:1fr}.visual-panel{min-height:260px}.contact-inner{align-items:flex-start;flex-direction:column}.reference-card{min-height:225px}}

/* Version 1.1: real S&Y photography */
.hero{background-image:linear-gradient(90deg,rgba(5,10,16,.97) 0%,rgba(5,10,16,.85) 40%,rgba(5,10,16,.4) 100%),var(--sy-hero-photo);background-size:cover;background-position:center}
.hero:before{background:linear-gradient(90deg,transparent 49%,rgba(32,191,237,.05) 50%,transparent 51%);background-size:90px 90px;opacity:.35}
.hero:after{opacity:.28}
.visual-panel:before,.visual-panel:after{display:none}
.reference-card[style*="background-image"]:after{background:linear-gradient(0deg,rgba(4,10,16,.68),transparent 80%)}

/* Header-Logo: eigenes WordPress-Logo oder mitgeliefertes S&Y-Logo */
.site-brand{flex:0 0 auto;display:flex;align-items:center;min-width:0}
.site-brand a{display:flex;align-items:center;line-height:0}
.site-brand img,.site-brand .custom-logo{display:block;width:auto;max-width:155px;max-height:66px;height:auto;object-fit:contain}
@media(max-width:680px){.site-brand img,.site-brand .custom-logo{max-width:115px;max-height:58px}}

/* v1.8: remove lower outline / decorative strokes from About image */
#ueber-uns .visual-panel{border:0;box-shadow:none;outline:none}
#ueber-uns .visual-panel::before,#ueber-uns .visual-panel::after{display:none;content:none}

/* v2.1 – rotating hero photography, preserving the existing hero layout and text. */
.sy-hero-slideshow{isolation:isolate}
.sy-hero-slides,.sy-hero-shade{position:absolute;inset:0;pointer-events:none}
.sy-hero-slides{z-index:0}
.sy-hero-slide{position:absolute;inset:0;background-position:center;background-size:cover;opacity:0;transition:opacity 1.4s ease-in-out;will-change:opacity}
.sy-hero-slide.is-active{opacity:1}
.sy-hero-shade{z-index:0;background:linear-gradient(90deg,rgba(5,10,16,.97) 0%,rgba(5,10,16,.85) 40%,rgba(5,10,16,.4) 100%)}
.sy-hero-slideshow::before,.sy-hero-slideshow::after{z-index:0;pointer-events:none}
.sy-hero-slideshow>.wrap{position:relative;z-index:2}
@media(prefers-reduced-motion:reduce){.sy-hero-slide{transition:none}}