/* GewerbeWerkstatt Schaufenster – Gestaltung v103
   Farben: Tinte (dunkles Bodensee-Schiefer), See (Seeblau), Messing (Werkzeug-Messing), Papier, Stein */
:root{
  --tinte:#1E2A33; --tinte-2:#26343F; --see:#35576A; --messing:#C49A52; --messing-dunkel:#9C7535;
  --papier:#F8F6F2; --stein:#E4DFD6; --text:#1C232A; --text-muted:#4A535C; --text-faint:#5C656E;
  --card-border:#E4DFD6; --brand:#1E2A33; --brand-dark:#000;
  --grad:linear-gradient(var(--stein), var(--stein));
}
body{background:var(--papier); color:var(--text); font-size:18px;}
h1,h2,h3{text-transform:none; letter-spacing:-0.02em; line-height:1.12; color:var(--text);}
a{color:var(--see);}
:focus-visible{outline:3px solid #2F6FBF; outline-offset:3px;}

/* Kopfzeile */
.sidebar{background:#fff; border-bottom:1px solid var(--stein);}
.sidebar .name{text-transform:none; font-size:26px; letter-spacing:-0.02em; color:var(--tinte);}
.side-nav a{color:var(--text-muted);}
.side-nav a:hover{color:var(--tinte);}
.side-nav a:last-child{background:var(--messing); color:var(--tinte); font-weight:700;}
.side-nav a:last-child:hover{background:var(--messing-dunkel); color:#fff;}

/* Knöpfe */
.btn{text-transform:none; letter-spacing:0; font-weight:700; border-radius:10px; padding:14px 24px; font-size:16px; transition:background .15s, color .15s, border-color .15s;}
.btn-gold{background:var(--messing); color:var(--tinte);}
.btn-gold:hover{background:var(--messing-dunkel); color:#fff; filter:none;}
.btn-outline{background:#fff; color:var(--tinte); border:1.5px solid var(--tinte);}
.btn-outline:hover{background:var(--tinte); color:#fff;}

/* Kopfbereich */
.hero.gw-buehne{background:radial-gradient(ellipse 70% 90% at 85% 60%, #2C3C48 0%, var(--tinte) 70%); color:#E9EEF2; padding:76px 0 70px; overflow:hidden; position:relative;}
.gw-buehne .wrap{position:relative; display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); gap:48px; align-items:center; max-width:var(--maxw);}
.gw-buehne-text{align-self:center;}
.gw-buehne h1{color:#fff; font-size:clamp(38px, 4.6vw, 58px); line-height:1.02; margin:0 0 22px; max-width:none;}
.gw-buehne h1 span{display:block; color:var(--messing);}
.gw-buehne p.lead{color:#C7D1D8; font-size:19px; line-height:1.6; max-width:30em; margin:0 0 30px;}
.gw-buehne .btn-outline{background:transparent; color:#fff; border-color:rgba(255,255,255,.55);}
.gw-buehne .btn-outline:hover{background:#fff; color:var(--tinte);}
.gw-hero-knoepfe{display:flex; flex-wrap:wrap; gap:12px; margin:0;}
.gw-vorteile{list-style:none; padding:0; margin:34px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:14px 26px; max-width:520px;}
.gw-vorteile li{background:none; border:0; border-left:2px solid var(--messing); border-radius:0; padding:2px 0 2px 14px; color:#C7D1D8; font-size:15px; line-height:1.4;}
.gw-vorteile strong{display:block; color:#fff; font-size:17px; font-weight:600;}
.gw-buehne-bild{margin:0 -36px 0 -10px; line-height:0;}
.gw-buehne-bild img{width:100%; height:auto; filter:drop-shadow(0 30px 40px rgba(0,0,0,.25));}
@media (max-width:900px){
  .gw-buehne .wrap{grid-template-columns:1fr; gap:10px;}
  .hero.gw-buehne{padding:48px 0 36px;}
  .gw-buehne-bild{margin:10px -24px 0 0;}
}
@media (max-width:480px){ .gw-vorteile{grid-template-columns:1fr 1fr; gap:12px 16px;} .gw-vorteile li{font-size:14px;} .gw-vorteile strong{font-size:16px;} }

/* Abschnitte */
.section{padding:84px 0;}
.section:nth-of-type(even){background:#fff;}
.section-label{text-transform:none; letter-spacing:0; color:var(--messing-dunkel); font-size:16px; font-weight:600; margin-bottom:10px;}
.section h2{font-size:clamp(30px, 3.4vw, 42px); max-width:20em;}
.section p.sub{max-width:36em; color:var(--text-muted);}

/* Galerie */
.gw-galerie{display:grid; grid-template-columns:minmax(220px, 280px) minmax(0, 1fr); gap:64px; align-items:start; margin-top:40px;}
.gw-galerie-text{padding-top:6px;}
.gw-galerie-geraet{position:relative; line-height:0;}
.gw-galerie-geraet img{width:100%; height:auto; filter:drop-shadow(0 26px 34px rgba(30,42,51,.22));}
.gw-galerie-geraet img:not(.aktiv){display:none;}
.gw-galerie-geraet img.aktiv{animation:gwEinblenden .35s ease;}
@keyframes gwEinblenden{from{opacity:.2;} to{opacity:1;}}
.gw-reiter-leiste{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px;}
.gw-reiter-leiste button{font:inherit; font-size:15px; font-weight:600; padding:10px 16px; border-radius:999px; border:1.5px solid var(--stein); background:#fff; color:var(--text); cursor:pointer;}
.gw-reiter-leiste button[aria-selected="true"]{background:var(--tinte); border-color:var(--tinte); color:#fff;}
.gw-reiter-leiste button:hover{border-color:var(--tinte);}
.gw-galerie-text h3{font-size:28px; margin:0 0 12px;}
.gw-galerie-text p{color:var(--text-muted); font-size:17px; line-height:1.65; margin:0 0 14px; max-width:34em;}
.gw-galerie-text ul{margin:0 0 26px; padding:0; list-style:none;}
.gw-galerie-text li{position:relative; padding:5px 0 5px 28px; font-size:16px; line-height:1.5;}
.gw-galerie-text li::before{content:""; position:absolute; left:2px; top:12px; width:12px; height:7px; border-left:2.5px solid var(--messing-dunkel); border-bottom:2.5px solid var(--messing-dunkel); transform:rotate(-45deg);}
.gw-galerie-tafel{display:none;}
.gw-galerie-tafel.aktiv{display:block;}
.gw-galerie-fuss{display:flex; align-items:center; gap:22px; flex-wrap:wrap; border-top:1px solid var(--stein); padding-top:22px; margin-top:8px;}
.gw-galerie-fuss canvas{width:96px; height:96px; image-rendering:pixelated; flex:none; border:6px solid #fff; box-shadow:0 0 0 1px var(--stein);}
.gw-galerie-fuss p{margin:0; font-size:15px; color:var(--text-muted); max-width:22em;}
.gw-galerie-fuss strong{display:block; color:var(--text); font-size:16px;}
@media (max-width:860px){
  .gw-galerie{grid-template-columns:minmax(0,1fr); gap:26px;}
  .gw-galerie-text{min-width:0;}
  .gw-galerie-geraet{max-width:240px; margin:0 auto; order:2;}
  .gw-galerie-text{order:1;}
  .gw-reiter-leiste{flex-wrap:nowrap; overflow-x:auto; margin-right:-24px; padding-right:24px; -webkit-overflow-scrolling:touch;}
  .gw-reiter-leiste button{flex:none;}
}

/* Symbole statt Buchstaben */
.icon-badge{width:46px; height:46px; border-radius:12px; background:#F1ECE2; color:var(--messing-dunkel);}
.icon-badge svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.info-liste{gap:30px 34px;}
.info-text h3{font-size:18px;}
.info-text p{font-size:15.5px;}

/* Pakete */
.paket-row{background:#fff; border:1.5px solid var(--stein); border-radius:14px; padding:20px 22px; background-image:none;}
.paket-row:hover{filter:none; border-color:#CFC6B6;}
.paket-row.featured{border:2px solid var(--messing); background-image:none;}
.paket-tag{background:var(--messing); color:var(--tinte); border-radius:6px; font-size:13px; padding:3px 9px;}
.paket-info h3{text-transform:none; font-size:22px; letter-spacing:-0.01em;}
.paket-info p{font-size:15px;}
.preis-zahl{font-size:28px; color:var(--tinte);}
.paket-mehr{color:var(--see) !important;}
.gw-vergleich{border-radius:14px; border-color:var(--stein);}
.gw-vergleich-spalten .gw-v-wir{background:#EEF3F5; border-color:#A9BFCB;}
.gw-zusatz-teaser{border-color:var(--stein); border-radius:14px;}

/* Schritte (echte Reihenfolge) */
.gw-schritt{border-radius:14px; border-color:var(--stein); padding:22px;}
.gw-schritt h3{text-transform:none; font-size:19px;}
.gw-nr{background:var(--messing); color:var(--tinte);}

/* Formulare */
.leadform{background:#fff; border:1.5px solid var(--stein); border-radius:16px;}
.field input, .field select, .field textarea{background:#fff; border:1px solid #B8B0A2; border-radius:9px; font-size:16px; min-height:48px;}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--see); box-shadow:0 0 0 3px rgba(53,87,106,.18); outline:none;}
.card{border-radius:14px;}

/* Fuß */
footer.site{background:var(--tinte); color:#C7D1D8; border-top:0; padding:40px 0;}
footer.site a{color:#fff;}
footer.site .credit{color:#AEB9C1; font-size:14px;}
html,body{overflow-x:clip;}

/* Kopfzeile am Desktop: eine ruhige Zeile */
@media (min-width:1100px){
  .sidebar{display:grid !important; grid-template-columns:auto 1fr auto; align-items:center; gap:28px; padding-top:16px !important; padding-bottom:16px !important;}
  .sidebar > .brand{justify-content:flex-start;}
  .sidebar .name{font-size:22px;}
  .sidebar .logo-slot{width:42px; height:42px;}
  .side-nav{border-top:0 !important; padding-top:0 !important; justify-content:flex-end;}
  .gw-sprach-zeile{margin:0 !important; justify-content:flex-end;}
}

/* Referenzen: Betriebe, die schon dabei sind (kommen automatisch aus dem Admin) */
.gw-dabei{margin-top:64px; padding-top:32px; border-top:1px solid var(--stein);}
.gw-dabei h3{font-size:20px; margin:0 0 16px;}
.gw-dabei-liste{display:flex; flex-wrap:wrap; gap:12px;}
.gw-dabei-karte{display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--stein); border-radius:12px; padding:10px 18px 10px 10px; color:var(--text); text-decoration:none; min-height:64px;}
.gw-dabei-karte:hover{border-color:var(--messing); text-decoration:none;}
.gw-dabei-karte img{width:44px; height:44px; object-fit:contain; border-radius:8px; background:var(--papier);}
.gw-dabei-init{width:44px; height:44px; border-radius:8px; background:var(--tinte); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:20px;}
.gw-dabei-karte strong{display:block; font-size:15.5px;}
.gw-dabei-karte small{display:block; color:var(--text-muted); font-size:13px;}

/* v111: neue Wortmarke oben */
.gw-marke{display:block; line-height:0;}
.gw-marke img{display:block; height:88px; width:auto;}
@media (max-width:1100px){ .gw-marke img{height:72px;} }
@media (max-width:480px){ .gw-marke img{height:58px; max-width:60vw;} }