/* Abel Akustik — визуальный мир из логотипа:
   звуковые дуги, сходящиеся в «a». Синий + тон гипсокартона. */
*,*::before,*::after{box-sizing:border-box}
:root{
  --blau:#1f4788;          /* из логотипа */
  --blau-tief:#152f58;
  --blau-hell:#3566b4;
  --gips:#f2ede4;          /* тёплый тон гипсокартона */
  --gips-tief:#e3dacb;
  --tinte:#15181d;
  --grau:#5b6472;
  --linie:#d9d3c8;
  --weiss:#fff;
  --mass:72rem;
  --r:2px;                 /* строгие углы: строительная точность */
}
html{font-size:100%;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--weiss);color:var(--tinte);
  font-family:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blau);text-underline-offset:.18em}
h1,h2,h3{line-height:1.15;letter-spacing:-.018em;margin:0 0 .6em;font-weight:700}
h1{font-size:clamp(2rem,1.3rem + 2.9vw,3.4rem)}
h2{font-size:clamp(1.5rem,1.15rem + 1.5vw,2.25rem)}
h3{font-size:clamp(1.12rem,1rem + .45vw,1.35rem)}
p{margin:0 0 1.1em;max-width:68ch}
.wrap{max-width:var(--mass);margin-inline:auto;padding-inline:clamp(0rem,1.5vw,.75rem)}


/* ——— шапка ——— */
.kopf{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.93);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--linie)}
.kopf-in{display:flex;align-items:center;gap:1.5rem;min-height:4.5rem}
.marke{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:inherit;flex:0 0 auto}
.marke img{width:40px;height:auto}
.marke b{font-size:1.06rem;font-weight:700;letter-spacing:-.01em;display:block;line-height:1.1}
.marke span{font-size:.72rem;color:var(--grau);letter-spacing:.09em;text-transform:uppercase}
.menu{margin-left:auto;display:flex;gap:.35rem;flex-wrap:wrap}
.menu a{padding:.5rem .8rem;border-radius:var(--r);text-decoration:none;color:var(--tinte);
  font-size:.94rem;font-weight:500;white-space:nowrap}
.menu a:hover{background:var(--gips)}
.menu a[aria-current="page"]{color:var(--blau);box-shadow:inset 0 -2px 0 var(--blau)}
.menu-knopf{display:none;margin-left:auto;background:none;border:1px solid var(--linie);
  border-radius:var(--r);padding:.55rem .8rem;font:inherit;font-size:.9rem;cursor:pointer}

/* ——— герой: дуги из логотипа ——— */
.held{position:relative;color:#fff;overflow:hidden;isolation:isolate;
  background:linear-gradient(160deg,#0f2banner 0%,var(--blau-tief) 42%,#0d2games 100%)}
.held{background:linear-gradient(158deg,#16325e 0%,#1f4788 46%,#122546 100%)}
.held::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(130% 100% at 12% 42%,rgba(86,140,222,.42),transparent 64%)}
/* мелкая перфорация — фактура акустической плиты */
.held::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.14;
  background-image:radial-gradient(circle,#fff .9px,transparent 1px);
  background-size:13px 13px}
.held-in{padding-block:clamp(4rem,10vw,8rem);padding-inline:clamp(1rem,3vw,1.75rem)}
.held h1{max-width:19ch;margin-bottom:.5em}
.held .lead{font-size:clamp(1.06rem,.98rem + .4vw,1.3rem);max-width:54ch;color:#dbe4f3;margin-bottom:2rem}
.augen{display:flex;flex-wrap:wrap;gap:.5rem}
.auge{border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:.38rem .85rem;
  font-size:.83rem;letter-spacing:.02em;color:#e8eefa}

/* дуги — графическая константа */
.bogen{position:absolute;right:-14%;top:50%;translate:0 -50%;width:min(78vw,880px);
  aspect-ratio:1;z-index:-1;opacity:.3;pointer-events:none}
@media(max-width:47.99rem){.bogen{right:-42%;width:140vw;opacity:.22}}
.bogen svg{width:100%;height:100%}

/* ——— секции ——— */
.sek{padding-block:clamp(3rem,7vw,5.5rem);padding-inline:clamp(1rem,3vw,1.75rem)}
.sek--gips{background:var(--gips)}
.sek--linie{border-top:1px solid var(--linie)}
.titel{max-width:60ch;margin-bottom:2.5rem}
/* надзаголовок как часть заголовка, не caps-ярлык (anti-pattern) */
.titel .ueber,.prosa .ueber{display:none}

/* ——— сетки ——— */
.gitter{display:grid;gap:1.5rem}
@media(min-width:48rem){.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}}
.karte{background:#fff;border:1px solid var(--linie);border-radius:var(--r);padding:1.6rem;
  display:flex;flex-direction:column;gap:.5rem}
.karte h3{margin:0}
.karte p{margin:0;color:var(--grau);font-size:.97rem}
.karte .zahl{font-variant-numeric:tabular-nums;font-size:2.1rem;font-weight:700;
  color:var(--blau);line-height:1}

/* ——— списки услуг ——— */
.liste{list-style:none;padding:0;margin:0 0 1.4em;display:grid;gap:.45rem}
.liste li{padding-left:1.45rem;position:relative;color:var(--grau)}
.liste li::before{content:"";position:absolute;left:0;top:.62em;width:.5rem;height:.5rem;
  border-left:2px solid var(--blau);border-bottom:2px solid var(--blau);rotate:-45deg}
.spalten{display:grid;gap:2rem}
@media(min-width:48rem){.spalten{grid-template-columns:repeat(3,1fr)}}

/* ——— широкое фото во всю секцию ——— */
.sek--voll{padding-block:0;padding-inline:0}
.breit{margin:0;position:relative}
.breit img{width:100%;height:clamp(16rem,38vw,30rem);object-fit:cover;display:block}
.breit figcaption{position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(transparent,rgba(13,25,46,.82));
  color:#e8eefa;font-size:.88rem;padding:3rem clamp(1rem,4vw,2.5rem) 1.1rem}

/* ——— карточка с фотографией ——— */
.karte--bild{padding:0;overflow:hidden}
.karte--bild figure{margin:0;aspect-ratio:16/10;background:var(--gips-tief)}
.karte--bild figure img{width:100%;height:100%;object-fit:cover}
.karte--bild h3{padding:1.3rem 1.4rem 0}
.karte--bild p{padding:0 1.4rem 1.5rem}

/* ——— галерея ——— */
.galerie{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
@media(min-width:48rem){.galerie--drei{grid-template-columns:repeat(3,1fr)}}
.galerie figure{margin:0;border-radius:var(--r);overflow:hidden;background:var(--gips-tief);
  aspect-ratio:4/3}
.galerie img{width:100%;height:100%;object-fit:cover;transition:scale .4s ease}
.galerie a:hover img{scale:1.04}

/* ——— таблица объектов ——— */
.obj{border:1px solid var(--linie);border-radius:var(--r);overflow:hidden;background:#fff}
.obj + .obj{margin-top:1.1rem}
.obj summary{cursor:pointer;padding:1rem 1.3rem;font-weight:600;display:flex;
  align-items:center;gap:.7rem;list-style:none}
.obj summary::-webkit-details-marker{display:none}
.obj summary::after{content:"";margin-left:auto;width:.55rem;height:.55rem;
  border-right:2px solid var(--blau);border-bottom:2px solid var(--blau);rotate:45deg;
  transition:rotate .2s}
.obj[open] summary::after{rotate:-135deg}
.obj summary:hover{background:var(--gips)}
.obj .anz{font-size:.8rem;color:var(--grau);font-weight:400}
.tab{width:100%;border-collapse:collapse;font-size:.92rem}
.tab th,.tab td{text-align:left;padding:.7rem 1.3rem;border-top:1px solid var(--linie);
  vertical-align:top}
.tab th{background:var(--gips);font-weight:600;font-size:.8rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--grau)}
.tab td:first-child{font-weight:500}
.tab-roll{overflow-x:auto}

/* ——— подвал ——— */
.fuss{background:var(--blau-tief);color:#c3cee2;padding-block:3rem;margin-top:4rem;font-size:.92rem}
.fuss a{color:#fff}
.fuss-in{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:start}
.fuss-nav{display:flex;flex-wrap:wrap;gap:1.1rem}
.fuss-nav a{text-decoration:none}
.fuss-nav a:hover{text-decoration:underline}

.vhidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.lead-text{font-size:clamp(1.05rem,.98rem + .35vw,1.22rem);color:#2b3340;max-width:60ch}
.prosa .liste{margin-block:1.2em 1.8em}
.prosa .liste + p{margin-top:0}
.prosa h2{margin-top:2.2em}
.prosa p:first-of-type{font-size:1.1rem;color:#2b3340}

@media(max-width:47.99rem){
  .menu{position:fixed;inset:4.5rem 0 auto;background:#fff;flex-direction:column;
    padding:1rem clamp(1rem,4vw,2.5rem) 1.5rem;border-bottom:1px solid var(--linie);
    gap:.2rem;display:none;box-shadow:0 14px 30px rgba(0,0,0,.09)}
  .menu.auf{display:flex}
  .menu a{padding:.7rem .3rem;font-size:1rem}
  .menu-knopf{display:block}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}