:root{
  --schmiedeschwarz:#1A1A1C;
  --aluminium:#E9E9E9;
  --petrol:#0F7173;
  --magenta:#AF125A;
  --schwarz-2:#232326;
  --petrol-dunkel:#0A5557;
  --alu-2:#D9D9D9;
  --g:32px;               /* Rand / Gutter */
  --head:64px;
  --display:"Archivo", "Arial Black", sans-serif;
  --body:"Space Grotesk", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;
  --ease:cubic-bezier(.7,0,.2,1);
}
@media (max-width:760px){ :root{ --g:16px; --head:56px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-padding-top:var(--head); }
main > section, footer{ overflow-x:clip; }
body{ margin:0; background:var(--aluminium); color:var(--schmiedeschwarz); font-family:var(--body); font-size:17px; line-height:1.5; overflow-x:hidden; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
h1,h2,h3,p,ul,ol,figure,dl,dd{ margin:0; padding:0; }
ul,ol{ list-style:none; }
:focus-visible{ outline:3px solid var(--petrol); outline-offset:3px; }
.dunkel :focus-visible, .petrol :focus-visible, .site-head :focus-visible, footer :focus-visible{ outline-color:var(--aluminium); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:absolute; left:var(--g); top:-60px; z-index:100; background:var(--aluminium); padding:8px 14px; font-family:var(--mono); font-size:13px; }
.skip:focus{ top:8px; }

/* ---------- 12-Spalten-Raster als Haarlinien ---------- */
.raster{
  --line:rgba(26,26,28,.12);
  background-image:linear-gradient(to right, var(--line) 1px, transparent 1px);
  background-size:calc((100% - 2 * var(--g)) / 12) 100%;
  background-position:var(--g) 0;
  background-repeat:repeat-x;
}
.dunkel.raster{ --line:rgba(233,233,233,.09); }
.petrol.raster{ --line:rgba(233,233,233,.16); }
@media (max-width:760px){ .raster{ background-size:calc((100% - 2 * var(--g)) / 4) 100%; } }

.dunkel{ background-color:var(--schmiedeschwarz); color:var(--aluminium); }
.petrol{ background-color:var(--petrol); color:var(--aluminium); }
.hell{ background-color:var(--aluminium); color:var(--schmiedeschwarz); }

.wrap{ padding-inline:var(--g); }
.grid12{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); }
@media (max-width:760px){ .grid12{ grid-template-columns:repeat(4, minmax(0,1fr)); } }

.label{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.sektion-kopf{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; border-top:2px solid currentColor; padding-top:12px; }
.sektion-titel{
  font-family:var(--display); font-weight:900; font-variation-settings:"wdth" 125;
  font-size:clamp(56px, 11vw, 190px); line-height:.82; letter-spacing:-.035em; text-transform:uppercase;
  margin:28px 0 0 -.04em;
}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--magenta); display:inline-flex; align-items:center; gap:14px;
  background:var(--bg); color:#fff; text-decoration:none; border:0; cursor:pointer;
  font-family:var(--mono); font-weight:600; font-size:14px; letter-spacing:.06em; text-transform:uppercase;
  padding:16px 22px; position:relative; overflow:hidden; isolation:isolate;
}
.btn::before{ content:""; position:absolute; inset:0; background:var(--schmiedeschwarz); transform:translateY(101%); transition:transform .35s var(--ease); z-index:-1; }
.btn:hover::before{ transform:none; }
.btn .pfeil{ transition:transform .35s var(--ease); }
.btn:hover .pfeil{ transform:translateX(4px); }
.petrol .btn::before, .dunkel .btn::before{ background:#7d0d40; }
.btn-ghost{ background:transparent; color:inherit; box-shadow:inset 0 0 0 2px currentColor; }
.btn-ghost::before{ background:var(--schmiedeschwarz); }
.btn-ghost:hover{ color:var(--aluminium); }

/* ---------- Header ---------- */
.site-head{
  position:sticky; top:0; z-index:50; height:var(--head);
  background:var(--schmiedeschwarz); color:var(--aluminium);
  display:flex; align-items:center; justify-content:space-between; gap:24px; padding-inline:var(--g);
}
.logo{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.logo svg{ height:22px; width:auto; }
.logo .desk{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; opacity:.7; border-left:1px solid rgba(233,233,233,.3); padding-left:12px; }
.nav{ display:flex; align-items:center; gap:32px; }
.nav ul{ display:flex; gap:28px; }
.nav a:not(.btn){ font-family:var(--mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; padding:6px 0; background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat; transition:background-size .3s var(--ease); }
.nav a:not(.btn):hover{ background-size:100% 1px; }
.nav .btn{ padding:12px 16px; font-size:12px; }
.menu-btn{ display:none; background:none; border:1px solid rgba(233,233,233,.4); color:inherit; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; padding:9px 12px; cursor:pointer; }
@media (max-width:900px){
  .logo .desk{ display:none; }
  .menu-btn{ display:block; }
  .nav{ position:fixed; inset:var(--head) 0 auto 0; background:var(--schmiedeschwarz); flex-direction:column; align-items:stretch; gap:0; padding:8px var(--g) 24px; border-top:1px solid rgba(233,233,233,.15); transform:translateY(-8px); opacity:0; visibility:hidden; transition:.25s var(--ease); }
  .nav.offen{ transform:none; opacity:1; visibility:visible; }
  .nav ul{ flex-direction:column; gap:0; }
  .nav a:not(.btn){ display:block; font-family:var(--display); font-variation-settings:"wdth" 125; font-weight:800; font-size:34px; letter-spacing:-.02em; padding:10px 0; border-bottom:1px solid rgba(233,233,233,.15); background:none; }
  .nav .btn{ margin-top:20px; justify-content:center; padding:16px; font-size:13px; }
}

/* ---------- HERO ---------- */
.hero{ position:relative; overflow:hidden; display:flex; flex-direction:column; }
.hero-meta{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); padding-top:18px; }
.hero-meta > *{ padding-right:12px; }
.hero-meta .m1{ grid-column:1 / span 3; }
.hero-meta .m2{ grid-column:4 / span 3; }
.hero-meta .m3{ grid-column:7 / span 3; }
.hero-meta .m4{ grid-column:10 / span 3; text-align:right; padding-right:0; }
.hero-text{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); padding-top:72px; align-items:end; }
.hero h1{ grid-column:1 / span 8; padding-right:24px; font-family:var(--display); font-weight:800; font-variation-settings:"wdth" 112; font-size:clamp(34px,5.2vw,90px); line-height:.92; letter-spacing:-.025em; }
.hero-side{ grid-column:9 / span 4; display:flex; flex-direction:column; gap:20px; }
.slogan{ font-family:var(--mono); font-size:13px; letter-spacing:.06em; text-transform:uppercase; display:flex; align-items:center; gap:10px; }
.slogan::before{ content:""; width:28px; height:1px; background:currentColor; }
.hero-side p{ font-size:16px; max-width:36ch; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:10px; }

.mass{ position:relative; margin-top:28px; height:22px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; }
.mass::before{ content:""; position:absolute; left:0; right:0; top:10px; height:1px; background:var(--schmiedeschwarz); }
.mass i{ position:absolute; top:3px; width:1px; height:15px; background:var(--schmiedeschwarz); }
.mass i:first-child{ left:0; } .mass i:last-of-type{ right:0; }
.mass span{ position:absolute; left:50%; top:2px; transform:translateX(-50%); background:var(--aluminium); padding:0 10px; }

.wortmarke{
  position:relative; display:flex; justify-content:space-between; align-items:flex-end;
  font-family:var(--display); font-weight:900; font-variation-settings:"wdth" 125;
  font-size:30vw; line-height:.74; letter-spacing:-.04em; text-transform:uppercase;
  margin:6px calc(var(--g) * -1 - .03em) -.115em; /* unten vom Viewport angeschnitten */
  user-select:none;
}
.wortmarke > span{ display:block; position:relative; }
.wortmarke .b{ opacity:0; transform:translateY(18%); animation:hoch .9s var(--ease) forwards; }
.wortmarke .b:nth-child(2){ animation-delay:.06s } .wortmarke .b:nth-child(3){ animation-delay:.12s } .wortmarke .b:nth-child(4){ animation-delay:.18s }
@keyframes hoch{ to{ opacity:1; transform:none; } }

/* Das R im Schnitt: Schnittebene A–A legt den Kern frei */
.r-schnitt{ position:relative; }
.r-voll{ clip-path:inset(0 0 0 0); animation:schnitt-oben .9s var(--ease) .45s forwards; }
.r-schraffur{
  position:absolute; inset:0;
  background:repeating-linear-gradient(-45deg, var(--schmiedeschwarz) 0 3px, transparent 3px 11px);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-stroke:3px var(--schmiedeschwarz);
  clip-path:inset(52% 100% 0 0); animation:schnitt-unten .9s var(--ease) .45s forwards;
}
@keyframes schnitt-oben{ to{ clip-path:inset(0 0 48% 0); } }
@keyframes schnitt-unten{ to{ clip-path:inset(52% 0 0 0); } }
.schnittlinie{
  position:absolute; left:-6%; right:-2%; top:52%; height:2px; background:var(--magenta);
  transform:scaleX(0); transform-origin:left; animation:linie .9s var(--ease) .45s forwards;
}
.schnittlinie::before, .schnittlinie::after{
  content:"A"; position:absolute; top:-26px; font-family:var(--mono); font-size:14px; font-weight:600; letter-spacing:0; color:var(--schmiedeschwarz); line-height:1;
}
.schnittlinie::before{ left:0; } .schnittlinie::after{ right:0; }
@keyframes linie{ to{ transform:scaleX(1); } }
.kern-punkt{
  position:absolute; left:var(--kx, 22%); top:52%; width:.05em; height:.05em; margin:-.025em 0 0 -.025em; border-radius:50%;
  background:var(--magenta); opacity:0; animation:glimmen 2.6s ease-in-out 1.4s infinite, an .3s ease 1.2s forwards;
  box-shadow:0 0 0 .012em var(--aluminium), 0 0 .05em .02em rgba(175,18,90,.6);
}
@keyframes an{ to{ opacity:1; } }
@keyframes glimmen{ 0%,100%{ box-shadow:0 0 0 .012em var(--aluminium), 0 0 .04em .01em rgba(175,18,90,.5);} 50%{ box-shadow:0 0 0 .012em var(--aluminium), 0 0 .09em .04em rgba(175,18,90,.75);} }
.schnitt-notiz{
  position:absolute; right:-2%; top:calc(52% + 14px); font-family:var(--mono); font-size:11px; letter-spacing:.08em; line-height:1.4; text-transform:uppercase; white-space:nowrap;
  opacity:0; animation:an .4s ease 1.3s forwards;
}

@media (max-width:760px){
  .hero-meta{ grid-template-columns:1fr 1fr; row-gap:6px; }
  .hero-meta .m1{ grid-column:1; } .hero-meta .m2{ grid-column:2; text-align:right; padding-right:0; }
  .hero-meta .m3, .hero-meta .m4{ display:none; }
  .hero-text{ grid-template-columns:1fr; gap:22px; padding-top:28px; }
  .hero h1, .hero-side{ grid-column:1; }
  .hero-side p{ font-size:16px; }
  .hero > .wrap:nth-child(4){ order:-1; }
  .hero-meta{ order:-2; }
  .hero > .wrap:nth-child(3){ order:0; }
  .hero-text{ margin-top:0; padding-bottom:36px; }
  .wortmarke{ font-size:56vw; line-height:.76; display:grid; grid-template-columns:auto auto; justify-content:space-between; margin:20px -.02em 0 -.06em; row-gap:.02em; }
  .schnitt-notiz{ display:none; }
  .mass{ margin-top:22px; }
}

/* ---------- Marquee ---------- */
.band{ position:relative; overflow:hidden; border-block:1px solid rgba(233,233,233,.12); }
.band-inner{ display:flex; width:max-content; animation:lauf 60s linear infinite; }
.band.pausiert .band-inner{ animation-play-state:paused; }
.band ul{ display:flex; flex-shrink:0; }
.band li{
  font-family:var(--display); font-weight:900; font-variation-settings:"wdth" 125; text-transform:uppercase;
  font-size:clamp(40px,6.4vw,104px); line-height:1; letter-spacing:-.02em; padding:22px 0 14px; white-space:nowrap; display:flex; align-items:center;
}
.band li::after{ content:""; width:.26em; height:.26em; margin:0 .45em; background:var(--petrol); transform:rotate(45deg); }
.band li:nth-child(even){ -webkit-text-stroke:2px var(--aluminium); color:transparent; }
@keyframes lauf{ to{ transform:translateX(-50%); } }
.band-pause{
  display:block; margin:0 var(--g) 12px auto; background:var(--schmiedeschwarz); color:var(--aluminium);
  border:1px solid rgba(233,233,233,.35); font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:6px 10px; cursor:pointer;
}

/* ---------- Leistungen ---------- */
.leistungen{ padding-block:110px 0; }
.leistungen .intro{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); margin:36px 0 64px; }
.leistungen .intro p{ grid-column:7 / span 5; font-size:20px; line-height:1.45; }
.l-liste{ border-top:1px solid rgba(233,233,233,.25); }
.l-row{
  position:relative; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); align-items:start;
  padding:34px var(--g) 38px; margin-inline:calc(var(--g) * -1);
  border-bottom:1px solid rgba(233,233,233,.25); transition:background-color .35s var(--ease), color .35s var(--ease);
  overflow:hidden;
}
.l-row:hover, .l-row:focus-within{ background:var(--aluminium); color:var(--schmiedeschwarz); }
.l-nr{ grid-column:1 / span 1; font-family:var(--mono); font-size:13px; padding-top:10px; }
.l-row h3{
  grid-column:2 / span 5; font-family:var(--display); font-weight:900; font-variation-settings:"wdth" 100;
  font-size:clamp(30px,3.6vw,56px); line-height:.95; letter-spacing:-.025em; text-transform:uppercase;
  transition:font-variation-settings .5s var(--ease); padding-right:20px;
}
.l-row:hover h3{ font-variation-settings:"wdth" 125; }
.l-text{ grid-column:7 / span 3; padding-right:24px; }
.l-text p{ font-size:16px; }
.tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; }
.tags li{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; border:1px solid currentColor; padding:4px 8px; opacity:.8; }
.l-row .foto-platzhalter{
  position:absolute; top:0; bottom:0; right:0; width:calc((100% - 2 * var(--g)) / 12 * 3 + var(--g));
  clip-path:inset(0 0 0 100%); transition:clip-path .55s var(--ease);
}
.l-row:hover .foto-platzhalter, .l-row:focus-within .foto-platzhalter{ clip-path:inset(0); }
.l-pfeil{ grid-column:12; justify-self:end; font-family:var(--mono); font-size:28px; line-height:1; padding-top:6px; transition:opacity .2s; }
.l-row:hover .l-pfeil{ opacity:0; }

/* Foto-Platzhalter (wird später durch echtes Foto ersetzt) */
.foto-platzhalter{
  position:relative; overflow:hidden; background-color:var(--petrol); color:var(--aluminium); min-height:120px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 85% 15%, rgba(233,233,233,.28), transparent 55%),
    linear-gradient(160deg, #13898b 0%, var(--petrol) 40%, var(--petrol-dunkel) 100%);
  background-blend-mode:overlay, normal, normal;
}
.foto-platzhalter::before{
  content:""; position:absolute; inset:14px; border:1px solid rgba(233,233,233,.35);
  background:
    linear-gradient(rgba(233,233,233,.45),rgba(233,233,233,.45)) left 50% / 18px 1px no-repeat,
    linear-gradient(rgba(233,233,233,.45),rgba(233,233,233,.45)) 50% top / 1px 18px no-repeat;
}
.foto-platzhalter::after{
  content:"Foto · " attr(data-motiv); position:absolute; left:14px; right:14px; bottom:14px; padding:10px 12px;
  font-family:var(--mono); font-size:11px; line-height:1.45; letter-spacing:.04em; background:rgba(10,85,87,.85);
}

@media (max-width:900px){
  .leistungen{ padding-top:72px; }
  .leistungen .intro{ grid-template-columns:1fr; margin:28px 0 40px; }
  .leistungen .intro p{ grid-column:1; font-size:18px; }
  .l-row{ grid-template-columns:44px 1fr; row-gap:14px; padding-block:28px; }
  .l-nr{ grid-column:1; padding-top:6px; }
  .l-row h3{ grid-column:2; font-size:clamp(26px,7.6vw,44px); }
  .l-text{ grid-column:1 / -1; padding-right:0; }
  .l-pfeil{ display:none; }
  .l-row .foto-platzhalter{ position:relative; grid-column:1 / -1; width:auto; height:150px; clip-path:none; margin-top:6px; }
}

/* ---------- Kennzahlen ---------- */
.kennzahlen{ padding-block:100px 110px; }
.zahlen{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); margin-top:48px; }
.zahl{ grid-column:span 3; border-top:1px solid rgba(233,233,233,.4); padding:18px 20px 0 0; margin-top:56px; }
.zahl:first-child{ grid-column:1 / -1; margin-top:0; border-top:0; padding:0; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); align-items:end; }
.zahl-wert{ font-family:var(--display); font-weight:900; font-variation-settings:"wdth" 100; font-size:clamp(44px,4.4vw,76px); line-height:.9; letter-spacing:-.04em; display:block; white-space:nowrap; }
.zahl-wert small{ font-size:.38em; letter-spacing:0; margin-left:.12em; font-weight:700; }
.zahl-label{ display:block; margin-top:12px; font-size:15px; max-width:26ch; opacity:.9; }
.zahl:first-child .zahl-wert{ grid-column:1 / span 10; font-size:clamp(110px,24.5vw,400px); font-variation-settings:"wdth" 125; line-height:.78; margin-left:-.05em; letter-spacing:-.055em; }
.zahl:first-child .zahl-wert small{ font-size:.16em; letter-spacing:.02em; vertical-align:top; }
.zahl:first-child .zahl-label{ grid-column:11 / span 2; font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.06em; border-top:1px solid rgba(233,233,233,.5); padding-top:10px; margin-bottom:.6vw; }
.fussnote{ margin-top:48px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; opacity:.7; }
@media (max-width:900px){
  .kennzahlen{ padding-block:72px; }
  .zahlen{ grid-template-columns:1fr 1fr; }
  .zahl{ grid-column:span 1; margin-top:32px; padding-right:12px; }
  .zahl:first-child{ grid-column:1 / -1; grid-template-columns:1fr; }
  .zahl:first-child .zahl-wert{ grid-column:1; font-size:30vw; }
  .zahl:first-child .zahl-label{ grid-column:1; margin-top:16px; }
  .zahl-wert{ font-size:clamp(40px,12vw,64px); }
}

/* ---------- Prozess (horizontal auf Desktop) ---------- */
.prozess{ position:relative; }
.p-pin{ padding-block:100px 80px; }
.p-kopf{ padding-inline:var(--g); }
.p-spur{ display:grid; grid-template-columns:1fr; gap:0; padding-inline:var(--g); margin-top:40px; }
.p-schritt{ border-top:2px solid var(--schmiedeschwarz); padding:20px 0 40px; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); }
.p-nr{ grid-column:1 / span 4; font-family:var(--display); font-weight:900; font-variation-settings:"wdth" 125; font-size:clamp(90px,14vw,220px); line-height:.8; letter-spacing:-.05em; color:transparent; -webkit-text-stroke:2px var(--schmiedeschwarz); }
.p-body{ grid-column:6 / span 6; }
.p-body h3{ font-family:var(--display); font-weight:900; font-variation-settings:"wdth" 120; font-size:clamp(30px,3.2vw,48px); line-height:1; letter-spacing:-.025em; text-transform:uppercase; }
.p-body p{ margin-top:14px; max-width:36ch; }
.p-dauer{ display:inline-block; margin-top:18px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; background:var(--schmiedeschwarz); color:var(--aluminium); padding:5px 9px; }
.p-fortschritt{ display:none; }

.prozess.horizontal .p-pin{ z-index:1; background-color:var(--aluminium); position:sticky; top:var(--head); height:calc(100vh - var(--head)); padding:0; display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.prozess.horizontal .p-spur{ display:flex; width:max-content; margin-top:6vh; will-change:transform; padding-right:var(--g); }
.prozess.horizontal .p-schritt{ width:max(25vw, 340px); flex-shrink:0; display:block; padding:22px 32px 0 0; margin-right:2vw; }
.prozess.horizontal .p-body h3{ font-size:min(2.5vw, 40px); font-variation-settings:"wdth" 110; }
.prozess.horizontal .p-nr{ font-size:min(13vw, 24vh); }
.prozess.horizontal .p-body{ margin-top:4vh; }
.prozess.horizontal .p-fortschritt{ display:flex; align-items:center; gap:16px; margin:6vh var(--g) 0; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.p-fortschritt .leiste{ flex:1; height:2px; background:rgba(26,26,28,.15); position:relative; }
.p-fortschritt .leiste i{ position:absolute; inset:0; background:var(--schmiedeschwarz); transform-origin:left; transform:scaleX(var(--p,0)); }
.prozess.horizontal .p-sektion-titel{ font-size:min(9vw, 15vh); }
.prozess.horizontal .p-rest{ position:absolute; left:var(--g); right:var(--g); bottom:48px; z-index:0; display:flex; justify-content:space-between; align-items:flex-end; pointer-events:none; }
.p-rest{ display:none; }
.p-rest b{ font-family:var(--display); font-weight:900; font-variation-settings:"wdth" 125; font-size:min(24vw, 360px); line-height:.75; letter-spacing:-.05em; color:transparent; -webkit-text-stroke:1px rgba(26,26,28,.18); }
@media (max-width:760px){
  .p-pin{ padding-block:72px 40px; }
  .p-schritt{ grid-template-columns:1fr; padding-bottom:32px; }
  .p-nr, .p-body{ grid-column:1; }
  .p-nr{ font-size:96px; }
  .p-body{ margin-top:14px; }
}

/* ---------- Haltung ---------- */
.haltung{ padding-block:110px; }
.manifest{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); margin-top:56px; row-gap:56px; }
.manifest blockquote{ grid-column:1 / span 9; margin:0; font-family:var(--display); font-weight:800; font-variation-settings:"wdth" 115; font-size:clamp(34px,4.6vw,76px); line-height:1; letter-spacing:-.03em; }
.manifest blockquote p + p{ margin-top:.35em; color:rgba(233,233,233,.55); }
.manifest .foto-platzhalter{ grid-column:1 / span 5; aspect-ratio:4/5; }
.manifest .text{ grid-column:7 / span 5; align-self:end; }
.manifest .text > p{ font-size:19px; line-height:1.5; }
.prinzipien{ margin-top:44px; border-top:1px solid rgba(233,233,233,.3); }
.prinzipien li{ display:grid; grid-template-columns:150px 1fr; gap:16px; padding:16px 0; border-bottom:1px solid rgba(233,233,233,.3); }
.prinzipien b{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; padding-top:3px; }
@media (max-width:900px){
  .haltung{ padding-block:72px; }
  .manifest{ grid-template-columns:1fr; row-gap:36px; margin-top:36px; }
  .manifest blockquote, .manifest .foto-platzhalter, .manifest .text{ grid-column:1; }
  .manifest .foto-platzhalter{ aspect-ratio:4/3; }
  .prinzipien li{ grid-template-columns:1fr; gap:4px; }
}

/* ---------- Branchen ---------- */
.branchen{ padding-block:110px; }
.b-liste{ margin-top:48px; border-top:2px solid var(--schmiedeschwarz); }
.b-item{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); align-items:baseline; padding:14px 0 10px; border-bottom:1px solid rgba(26,26,28,.25); }
.b-item .label{ grid-column:1 / span 1; }
.b-item h3{
  grid-column:2 / span 8; font-family:var(--display); font-weight:900; font-variation-settings:"wdth" 62; text-transform:uppercase;
  font-size:clamp(40px,6.2vw,110px); line-height:.9; letter-spacing:-.02em; transition:font-variation-settings .6s var(--ease);
}
.b-item:hover h3{ font-variation-settings:"wdth" 74; }
.b-item p{ grid-column:10 / span 3; font-size:15px; padding-left:16px; }
@media (max-width:900px){
  .branchen{ padding-block:72px; }
  .b-item{ grid-template-columns:36px minmax(0,1fr); row-gap:6px; }
  .b-item .label{ grid-column:1; }
  .b-item h3{ grid-column:2; font-variation-settings:"wdth" 75; font-size:clamp(28px,9.4vw,60px); hyphens:manual; }
  .b-item p{ grid-column:2; font-size:14px; }
}

/* ---------- CTA ---------- */
.cta{ padding-block:120px; overflow:hidden; }
.cta .grid12{ align-items:end; }
.cta h2{ grid-column:1 / span 9; font-family:var(--display); font-weight:900; font-variation-settings:"wdth" 125; font-size:clamp(48px,6.6vw,116px); line-height:.86; letter-spacing:-.04em; text-transform:uppercase; }
.cta .seite{ grid-column:10 / span 3; display:flex; flex-direction:column; gap:22px; }
.cta .btn{ font-size:16px; padding:22px 26px; justify-content:space-between; }
@media (max-width:900px){
  .cta{ padding-block:80px; }
  .cta h2, .cta .seite{ grid-column:1 / -1; }
  .cta h2{ font-size:10.6vw; }
  .cta .seite{ margin-top:32px; }
}

/* ---------- Kontakt ---------- */
.kontakt{ padding-block:110px; }
.k-grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); margin-top:48px; }
.k-daten{ grid-column:1 / span 4; padding-right:32px; }
.k-daten dl{ border-top:2px solid var(--schmiedeschwarz); }
.k-daten dl div{ padding:14px 0; border-bottom:1px solid rgba(26,26,28,.25); }
.k-daten dt{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; opacity:.75; }
.k-daten dd{ font-size:18px; margin-top:4px; }
form{ grid-column:6 / span 7; display:grid; grid-template-columns:1fr 1fr; gap:0 24px; }
.feld{ display:flex; flex-direction:column; border-top:2px solid var(--schmiedeschwarz); padding-top:8px; margin-bottom:24px; }
.feld.voll{ grid-column:1 / -1; }
.feld label{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.feld input, .feld textarea{ font:inherit; font-size:18px; background:transparent; border:0; border-bottom:1px solid rgba(26,26,28,.3); padding:10px 0; color:inherit; border-radius:0; }
.feld textarea{ min-height:130px; resize:vertical; }
.feld input:focus, .feld textarea:focus{ outline:none; border-bottom:2px solid var(--petrol); background:rgba(15,113,115,.06); }
.feld input:focus-visible, .feld textarea:focus-visible{ outline:2px solid var(--petrol); outline-offset:2px; }
.datei{ position:relative; border:1px dashed rgba(26,26,28,.5); padding:18px; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:8px; cursor:pointer; }
.datei input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.datei:focus-within{ outline:3px solid var(--petrol); outline-offset:3px; }
.datei span{ font-size:15px; }
.datei b{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.form-fuss{ grid-column:1 / -1; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.form-fuss small{ font-size:13px; max-width:40ch; opacity:.8; }
.form-status{ grid-column:1 / -1; font-family:var(--mono); font-size:12px; margin-top:12px; min-height:1em; }
@media (max-width:900px){
  .kontakt{ padding-block:72px; }
  .k-grid{ grid-template-columns:1fr; row-gap:40px; }
  .k-daten, form{ grid-column:1; padding-right:0; }
  form{ grid-template-columns:1fr; }
}

/* ---------- Footer ---------- */
footer{ padding:60px var(--g) 0; overflow:hidden; }
.f-grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); row-gap:28px; font-size:15px; }
.f-grid > div{ grid-column:span 3; padding-right:16px; }
.f-grid h2{ font-family:var(--mono); font-size:11px; font-weight:400; letter-spacing:.1em; text-transform:uppercase; opacity:.6; margin-bottom:10px; }
.f-grid a{ text-decoration:none; } .f-grid a:hover{ text-decoration:underline; }
.f-grid li + li{ margin-top:4px; }
.f-wort{ font-family:var(--display); font-weight:900; font-variation-settings:"wdth" 125; font-size:31.6vw; line-height:.74; letter-spacing:-.04em; margin:40px 0 -.12em -.05em; color:transparent; -webkit-text-stroke:1px rgba(233,233,233,.28); white-space:nowrap; user-select:none; }
@media (max-width:760px){ .f-grid{ grid-template-columns:1fr 1fr; } .f-grid > div{ grid-column:span 1; } }

/* ---------- Scroll-Reveal ---------- */
.js .zeigen{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.js .zeigen.da{ opacity:1; transform:none; }

@media (max-width:760px){ .sektion-titel{ font-size:12.6vw; font-variation-settings:"wdth" 100; } .zahl-wert{ white-space:normal; } .zahl:first-child .zahl-wert{ white-space:nowrap; font-size:29vw; } }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-delay:0s !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .band-inner{ animation:none !important; }
  .js .zeigen{ opacity:1; transform:none; }
}

/* =====================================================================
   Runde 2 – Mehrseiter: gemeinsame Bausteine
   ===================================================================== */
.nav a[aria-current="page"]{ background-size:100% 2px; }
@media (max-width:900px){ .nav a[aria-current="page"]{ color:#fff; border-left:6px solid var(--petrol); padding-left:12px; } }
.l-pfeil{ text-decoration:none; }
.l-pfeil::after{ content:""; position:absolute; inset:0; z-index:1; }   /* ganze Zeile klickbar */
.l-row .foto-platzhalter{ z-index:0; }
.mehr{ display:inline-flex; gap:10px; align-items:center; font-family:var(--mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; border-bottom:2px solid currentColor; padding-bottom:4px; transition:gap .25s var(--ease); }
.mehr:hover{ gap:16px; }
.btn-petrol{ --bg:var(--petrol); }
.btn-petrol::before{ background:var(--schmiedeschwarz) !important; }
.dunkel .btn-petrol::before, .petrol .btn-petrol::before{ background:var(--petrol-dunkel) !important; }

/* Seitenkopf (Unterseiten): leichte Variante des Plakat-Heros */
.seitenkopf{ position:relative; overflow:hidden; }
.sk-text{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); padding-top:64px; align-items:end; row-gap:24px; }
.sk-text .crumb{ grid-column:1 / span 5; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.crumb a{ text-decoration:none; } .crumb a:hover{ text-decoration:underline; }
.sk-text .lead{ grid-column:7 / span 6; font-size:clamp(19px,1.7vw,24px); line-height:1.4; }
.sk-titel{
  font-family:var(--display); font-weight:900; font-variation-settings:"wdth" 125; text-transform:uppercase; white-space:nowrap;
  font-size:var(--sk, 14vw); line-height:.86; letter-spacing:-.045em; margin:26px 0 -.075em -.05em;
}
.sk-titel span{ display:inline-block; opacity:0; transform:translateY(16%); animation:hoch .8s var(--ease) .05s forwards; }
@media (max-width:760px){
  .sk-text{ grid-template-columns:1fr; padding-top:36px; }
  .sk-text .crumb, .sk-text .lead{ grid-column:1; }
  .sk-text .lead{ font-size:18px; }
}

/* Start: Produkt-Teaser */
.teaser{ padding-block:100px; }
.teaser .grid12{ margin-top:40px; align-items:end; row-gap:32px; }
.teaser h2{ grid-column:1 / span 7; font-family:var(--display); font-weight:900; font-variation-settings:"wdth" 62; text-transform:uppercase; font-size:clamp(44px,6vw,100px); line-height:.9; letter-spacing:-.01em; }
.teaser .t-seite{ grid-column:9 / span 4; display:flex; flex-direction:column; gap:22px; align-items:flex-start; }
.teaser ul.t-liste{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); border-top:2px solid var(--schmiedeschwarz); }
.t-liste li{ padding:14px 16px 14px 0; border-bottom:1px solid rgba(26,26,28,.25); font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
@media (max-width:900px){ .teaser{ padding-block:72px; } .teaser h2, .teaser .t-seite{ grid-column:1 / -1; } }

/* Fertigung: drei Spalten Verfahren / Werkstoffe / Losgrößen */
.sektion{ padding-block:110px; }
@media (max-width:900px){ .sektion{ padding-block:72px; } }
.spalten{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:48px; }
.spalte{ border-top:2px solid currentColor; padding:18px 28px 28px 0; }
.spalte h3{ font-family:var(--display); font-weight:900; font-variation-settings:"wdth" 120; text-transform:uppercase; font-size:clamp(28px,2.8vw,44px); line-height:1; letter-spacing:-.02em; }
.spalte ul{ margin-top:22px; }
.spalte li{ padding:10px 0; border-bottom:1px solid rgba(128,128,128,.35); font-size:17px; display:flex; justify-content:space-between; gap:12px; }
.spalte li small{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; opacity:.7; text-align:right; }
.spalte p{ margin-top:16px; font-size:15px; opacity:.85; }

/* Fertigung: Zeichnung · Skizze · Muster */
.v-liste{ margin-top:48px; border-top:2px solid currentColor; }
.v-item{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); align-items:baseline; padding:18px 0 14px; border-bottom:1px solid rgba(233,233,233,.35); }
.v-item .label{ grid-column:1 / span 1; }
.v-item h3{ grid-column:2 / span 7; font-family:var(--display); font-weight:900; font-variation-settings:"wdth" 125; text-transform:uppercase; font-size:clamp(46px,8.6vw,150px); line-height:.86; letter-spacing:-.045em; }
.v-item p{ grid-column:10 / span 3; font-size:16px; }
.v-fuss{ margin-top:36px; font-size:20px; max-width:52ch; }
@media (max-width:900px){
  .v-item{ grid-template-columns:36px minmax(0,1fr); row-gap:8px; }
  .v-item h3{ grid-column:2; font-size:12.4vw; } .v-item p{ grid-column:2; }
}

/* Fertigung: Konstruktion & Prototyp (Karten mit Foto) */
.k-karten{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:0; margin-top:48px; border-top:1px solid rgba(233,233,233,.25); }
.k-karte{ padding:28px 32px 36px 0; display:flex; flex-direction:column; gap:16px; }
.k-karte + .k-karte{ padding-left:32px; border-left:1px solid rgba(233,233,233,.25); }
.k-karte h3{ font-family:var(--display); font-weight:900; font-variation-settings:"wdth" 120; text-transform:uppercase; font-size:clamp(30px,3.4vw,54px); line-height:.95; letter-spacing:-.025em; }
.k-karte .foto-platzhalter{ aspect-ratio:16/9; }
.k-karte ul{ border-top:1px solid rgba(233,233,233,.25); }
.k-karte li{ padding:9px 0; border-bottom:1px solid rgba(233,233,233,.25); font-size:15px; }
@media (max-width:760px){ .k-karte + .k-karte{ padding-left:0; border-left:0; border-top:1px solid rgba(233,233,233,.25); } .k-karte{ padding-right:0; } }

/* Tabelle (Maschinenpark u. a.) */
.tab-wrap{ margin-top:40px; overflow-x:auto; }
table.tabelle{ width:100%; border-collapse:collapse; font-size:16px; min-width:560px; }
.tabelle caption{ text-align:left; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding-bottom:12px; opacity:.75; }
.tabelle th{ text-align:left; font-family:var(--mono); font-weight:600; font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:10px 16px 10px 0; border-bottom:2px solid currentColor; }
.tabelle td{ padding:14px 16px 14px 0; border-bottom:1px solid rgba(128,128,128,.4); vertical-align:top; }
.tabelle td:first-child{ font-family:var(--display); font-weight:800; font-variation-settings:"wdth" 110; font-size:20px; text-transform:uppercase; }
.hinweis{ margin-top:18px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; opacity:.75; }

/* Produkte */
.pr-index{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); margin-top:40px; border-top:2px solid var(--schmiedeschwarz); }
.pr-index a{ display:block; height:100%; padding:14px 16px 16px 0; text-decoration:none; border-bottom:1px solid rgba(26,26,28,.25); }
.pr-index b{ display:block; font-family:var(--mono); font-size:11px; font-weight:400; letter-spacing:.08em; }
.pr-index span{ display:block; margin-top:6px; font-family:var(--display); font-weight:800; font-variation-settings:"wdth" 100; font-size:20px; line-height:1.05; text-transform:uppercase; }
.pr-index a:hover span{ text-decoration:underline; text-decoration-thickness:2px; }
@media (max-width:900px){ .pr-index{ grid-template-columns:1fr 1fr; } }
.produkt{ padding-block:90px; }
.produkt + .produkt{ border-top:1px solid rgba(26,26,28,.15); }
.produkt .grid12{ row-gap:36px; }
.p-zeichnung{ grid-column:1 / span 5; position:sticky; top:calc(var(--head) + 24px); align-self:start; border:2px solid currentColor; }
.p-zeichnung svg{ width:100%; height:auto; }
.p-zeichnung figcaption{ display:grid; grid-template-columns:1fr auto; border-top:2px solid currentColor; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
.p-zeichnung figcaption span{ padding:8px 10px; } .p-zeichnung figcaption span + span{ border-left:1px solid currentColor; }
.p-info{ grid-column:7 / span 6; }
.p-info .p-nummer{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.p-info h2{ font-family:var(--display); font-weight:900; font-variation-settings:"wdth" 125; text-transform:uppercase; font-size:clamp(36px,4.6vw,78px); line-height:.88; letter-spacing:-.04em; margin-top:14px; hyphens:manual; }
.p-info .p-lead{ font-size:19px; margin-top:20px; max-width:46ch; }
.spez{ margin-top:30px; border-top:2px solid currentColor; }
.spez div{ display:grid; grid-template-columns:minmax(120px, 34%) 1fr; gap:16px; padding:11px 0; border-bottom:1px solid rgba(128,128,128,.4); }
.spez dt{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding-top:3px; }
.spez dd{ font-size:16px; }
.modelle{ display:flex; flex-wrap:wrap; gap:6px; }
.modelle li{ font-family:var(--mono); font-size:12px; border:1px solid currentColor; padding:4px 8px; }
.p-cta{ margin-top:30px; display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.badge{ display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:6px 10px; border:1px dashed currentColor; }
.produkt.pausiert .p-zeichnung{ opacity:.55; }
@media (max-width:900px){
  .produkt{ padding-block:64px; }
  .p-zeichnung, .p-info{ grid-column:1 / -1; position:static; }
  .spez div{ grid-template-columns:1fr; gap:2px; }
}
/* Linienzeichnungen */
.lz{ fill:none; stroke:currentColor; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.lz .duenn{ stroke-width:1; }
.lz .achse{ stroke:var(--petrol); stroke-width:1; stroke-dasharray:14 4 2 4; }
.lz .mass{ stroke:var(--petrol); stroke-width:1; }
.lz .gewebe{ stroke-width:.8; opacity:.6; }
.lz text{ fill:currentColor; stroke:none; font-family:var(--mono); font-size:11px; letter-spacing:.06em; }
.lz .fuell{ fill:currentColor; stroke:none; }

/* Unternehmen */
.jahre{ padding-block:90px 110px; overflow:hidden; }
.jahre .grid12{ align-items:end; row-gap:28px; margin-top:24px; }
.jahre-zahl{ grid-column:1 / span 7; font-family:var(--display); font-weight:900; font-variation-settings:"wdth" 125; font-size:clamp(160px,31vw,500px); line-height:.74; letter-spacing:-.06em; margin-left:-.05em; white-space:nowrap; }
.jahre-zahl small{ font-size:.32em; vertical-align:top; letter-spacing:0; }
.jahre-text{ grid-column:9 / span 4; }
.jahre-text h2{ font-family:var(--display); font-weight:900; font-variation-settings:"wdth" 115; text-transform:uppercase; font-size:clamp(28px,2.6vw,42px); line-height:1; letter-spacing:-.02em; }
.jahre-text p{ margin-top:16px; font-size:17px; }
@media (max-width:900px){ .jahre-zahl, .jahre-text{ grid-column:1 / -1; } .jahre-zahl{ font-size:56vw; } }
.werkstatt{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--g); margin-top:48px; }
.werkstatt .foto-platzhalter{ grid-column:span 4; aspect-ratio:3/4; }
.werkstatt .foto-platzhalter:first-child{ grid-column:span 8; aspect-ratio:auto; }
@media (max-width:760px){ .werkstatt{ grid-template-columns:1fr; } .werkstatt .foto-platzhalter, .werkstatt .foto-platzhalter:first-child{ grid-column:1; aspect-ratio:4/3; } }
.karriere-liste{ margin-top:40px; border-top:2px solid currentColor; }
.job{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); align-items:baseline; padding:20px 0; border-bottom:1px solid rgba(128,128,128,.4); row-gap:8px; }
.job .label{ grid-column:1 / span 2; }
.job h3{ grid-column:3 / span 6; font-family:var(--display); font-weight:900; font-variation-settings:"wdth" 110; text-transform:uppercase; font-size:clamp(24px,2.6vw,40px); line-height:1; letter-spacing:-.02em; }
.job p{ grid-column:9 / span 4; font-size:15px; }
@media (max-width:900px){ .job{ grid-template-columns:1fr; } .job .label, .job h3, .job p{ grid-column:1; } }

/* Kontakt: Anliegen + Anfahrt */
fieldset.anliegen{ grid-column:1 / -1; border:0; margin:0 0 28px; border-top:2px solid var(--schmiedeschwarz); padding:8px 0 0; min-width:0; }
.anliegen legend{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:0; float:left; width:100%; margin-bottom:12px; }
.anliegen .optionen{ clear:both; display:flex; flex-wrap:wrap; gap:8px; }
.anliegen label{ position:relative; cursor:pointer; }
.anliegen input{ position:absolute; opacity:0; inset:0; cursor:pointer; margin:0; }
.anliegen span{ display:block; padding:12px 16px; border:2px solid var(--schmiedeschwarz); font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
.anliegen input:checked + span{ background:var(--schmiedeschwarz); color:var(--aluminium); }
.anliegen input:focus-visible + span{ outline:3px solid var(--petrol); outline-offset:3px; }
.anfahrt{ padding-block:0 110px; }
.anfahrt .grid12{ margin-top:40px; row-gap:28px; }
.karte{ grid-column:1 / span 8; border:2px solid var(--schmiedeschwarz); aspect-ratio:16/9; position:relative; overflow:hidden; background:var(--alu-2); }
.karte svg{ width:100%; height:100%; }
.anfahrt .a-text{ grid-column:10 / span 3; }
.anfahrt .a-text p + p{ margin-top:14px; }
@media (max-width:900px){ .karte, .anfahrt .a-text{ grid-column:1 / -1; } .anfahrt{ padding-bottom:72px; } .karte{ aspect-ratio:4/3; } }

/* Rechtstexte */
.rechtstext{ padding-block:80px 110px; }
.rechtstext .inhalt{ max-width:72ch; margin-left:calc((100% / 12) * 2); }
.rechtstext h2{ font-family:var(--display); font-weight:900; font-variation-settings:"wdth" 115; text-transform:uppercase; font-size:26px; letter-spacing:-.01em; margin-top:40px; padding-top:12px; border-top:2px solid currentColor; }
.rechtstext h2:first-child{ margin-top:0; }
.rechtstext p, .rechtstext ul{ margin-top:12px; }
.rechtstext ul{ list-style:square; padding-left:20px; }
@media (max-width:900px){ .rechtstext{ padding-block:56px 72px; } .rechtstext .inhalt{ margin-left:0; } }

.dunkel .b-liste{ border-top-color:var(--aluminium); }
.dunkel .b-item{ border-bottom-color:rgba(233,233,233,.25); }