/* Aboubacar Enterprises, Zentralseite der Gruppe.
   Grund: neutrales Fastschwarz. Die Gruppe fuehrt keine eigene Schmuckfarbe,
   Farbe kommt ausschliesslich aus den drei Betrieben (--acc je Karte). */

:root{
  --ink:#0b0c0e;
  --ink-2:#101216;
  --ink-3:#15171c;
  --paper:#eeebe5;
  --muted:#8d919a;
  --muted-2:#6f7480;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --acc:#eeebe5;
  --wrap:1180px;
  --pad:clamp(1.15rem,4vw,2.5rem);
  --sect:clamp(4.5rem,10vw,8.5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:var(--paper);
  font-family:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  font-weight:300; line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3{margin:0; font-weight:400; line-height:1.06; letter-spacing:-.015em}
p{margin:0}
ul{margin:0; padding:0; list-style:none}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--paper);
  color:var(--ink);padding:.7rem 1.1rem;font-size:.9rem}
.skip:focus{left:.6rem;top:.6rem}
:focus-visible{outline:2px solid var(--paper); outline-offset:3px}

/* Mono-Marker ueber jeder Ueberschrift, das wiederkehrende Mittel der Seite */
.mark{
  font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:500; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); margin-bottom:1.5rem; display:flex; align-items:center;
  gap:.7rem;
}
.mark::after{content:""; flex:1; height:1px; background:var(--line); max-width:7rem}
.mark i{font-style:normal; color:var(--muted-2)}

/* ------------------------------------------------------------------ Kopf -- */
.hd{position:sticky; top:0; z-index:40; background:rgba(11,12,14,.86);
  backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--line)}
.hd__in{display:flex; align-items:center; gap:1rem; min-height:74px}
.brand{display:flex; align-items:center; gap:.8rem; text-decoration:none; margin-right:auto}
.brand__mark{width:26px; flex:none}
.brand__mark svg{width:100%; height:auto; display:block}
.brand__name{display:block; font-size:.98rem; font-weight:500; letter-spacing:.13em;
  text-transform:uppercase; line-height:1.15}
.brand__sub{display:block; font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-weight:500; font-size:.58rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted-2); margin-top:.28rem}
.nav{display:flex; align-items:center; gap:1.6rem}
.nav a{text-decoration:none; font-size:.9rem; color:var(--muted); letter-spacing:.02em;
  padding-block:.3rem; border-bottom:1px solid transparent}
.nav a:hover{color:var(--paper); border-bottom-color:var(--line-2)}
@media (max-width:900px){ .nav{display:none} }
/* Auf schmalen Schirmen bricht der Zusatz sonst auf drei Zeilen um und
   schiebt die Kopfleiste auseinander. Im Fuss bleibt er stehen. */
@media (max-width:560px){
  .hd .brand__sub{display:none}
  .hd .brand__name{font-size:.86rem; letter-spacing:.1em}
}

/* Sprachwahl, Netzstandard v2: <details>-Menue ohne JS */
.lang{position:relative; flex:none}
.lang>summary{list-style:none; cursor:pointer; display:flex; align-items:center;
  gap:.5rem; padding:.45rem .6rem; border:1px solid var(--line);
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-weight:500;
  font-size:.7rem; letter-spacing:.12em; color:var(--muted)}
.lang>summary::-webkit-details-marker{display:none}
.lang>summary:hover{color:var(--paper); border-color:var(--line-2)}
.lang .cv{width:13px; height:13px; transition:transform .18s}
.lang[open] .cv{transform:rotate(180deg)}
.flag{width:19px; height:13px; border-radius:1px; flex:none; display:block}
.lang ul{position:absolute; right:0; top:calc(100% + .5rem); min-width:11.5rem;
  background:var(--ink-3); border:1px solid var(--line-2); padding:.35rem;
  box-shadow:0 18px 40px rgba(0,0,0,.55)}
.lang li a{display:flex; align-items:center; gap:.6rem; padding:.55rem .6rem;
  text-decoration:none; font-size:.9rem; color:var(--muted)}
.lang li a:hover,.lang li a[aria-current]{color:var(--paper); background:rgba(255,255,255,.05)}

/* ------------------------------------------------------------------ Hero -- */
.hero{padding-block:clamp(3.5rem,9vw,7rem) clamp(3rem,7vw,5.5rem);
  border-bottom:1px solid var(--line); position:relative; overflow:hidden}
/* Die drei Farben als schmale Kante ueber dem Hero, sonst nirgends im Rahmen */
.hero::before{content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg,#e6a23c 0 33.33%,#c9a86a 33.33% 66.66%,#ff6a1f 66.66%)}
.hero h1{font-size:clamp(2.7rem,8.2vw,5.6rem); margin-bottom:1.6rem}
.hero h1 span{display:block}
.h1a{font-weight:200; color:var(--muted)}
.h1b{font-weight:500}
.lead{max-width:46ch; color:var(--muted); font-size:clamp(1.02rem,.98rem + .35vw,1.22rem);
  line-height:1.62}
.hero .lead{max-width:52ch}
.cta{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.4rem}
.btn{display:inline-flex; align-items:center; gap:.6rem; text-decoration:none;
  padding:.85rem 1.4rem; font-size:.92rem; letter-spacing:.03em; border:1px solid var(--line-2)}
.btn .ar{width:17px; height:17px; transition:transform .18s}
.btn:hover .ar{transform:translateX(3px)}
.btn--solid{background:var(--paper); color:var(--ink); border-color:var(--paper); font-weight:500}
.btn--solid:hover{background:#fff}
.btn--ghost{color:var(--paper)}
.btn--ghost:hover{border-color:var(--paper)}
.places{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 0; margin-top:3rem;
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-weight:500;
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted-2)}
.places li{display:flex; align-items:center}
.places li+li::before{content:""; width:4px; height:4px; flex:none; border-radius:50%;
  background:var(--line-2); margin-inline:1.15rem}

/* Kurzverzeichnis der drei Betriebe neben dem Hero. Es nimmt die Farben schon
   vorweg, die weiter unten die Karten tragen. */
.hero__in{display:grid; gap:clamp(2.6rem,6vw,4.2rem); align-items:end}
@media (min-width:1000px){ .hero__in{grid-template-columns:1.42fr .8fr} }
.hero__idx{border-top:1px solid var(--line)}
.hero__idx li{display:grid; grid-template-columns:3px 1fr; gap:0 1rem;
  padding-block:1.05rem; border-bottom:1px solid var(--line)}
.hero__idx .bar{grid-row:1/3; background:var(--acc); align-self:stretch}
.hero__idx b{font-size:1.06rem; font-weight:400; letter-spacing:-.005em}
.hero__idx span{display:block; margin-top:.3rem;
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-weight:500;
  font-size:.63rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2)}

/* --------------------------------------------------------------- Abschnitt */
.sect{padding-block:var(--sect); border-bottom:1px solid var(--line)}
.sect--alt{background:var(--ink-2)}
.sect h2{font-size:clamp(1.9rem,4.6vw,3.05rem); font-weight:300; margin-bottom:1.1rem}
.sect__lead{max-width:56ch; color:var(--muted); margin-bottom:clamp(2.4rem,5vw,3.6rem)}

/* ----------------------------------------------------------- Die Betriebe */
.divs{display:grid; gap:1.15rem; grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}
.div{position:relative; background:var(--ink); border:1px solid var(--line);
  display:flex; flex-direction:column; transition:border-color .2s,transform .2s}
.div:hover{border-color:color-mix(in srgb,var(--acc) 55%,transparent); transform:translateY(-3px)}
.div__fig{margin:0; position:relative; overflow:hidden; aspect-ratio:3/2; background:var(--ink-3)}
.div__fig img{width:100%; height:100%; object-fit:cover; filter:saturate(.82) contrast(1.04);
  transition:transform .5s ease,filter .3s}
.div:hover .div__fig img{transform:scale(1.035); filter:saturate(1) contrast(1.04)}
.div__fig::after{content:""; position:absolute; inset:auto 0 0 0; height:3px; background:var(--acc)}
.div__body{padding:clamp(1.4rem,3vw,1.9rem); display:flex; flex-direction:column;
  gap:.85rem; flex:1}
.div__top{display:flex; align-items:baseline; gap:.8rem;
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-weight:500;
  font-size:.68rem; letter-spacing:.17em; text-transform:uppercase}
.div__num{color:var(--acc)}
.div__field{color:var(--muted-2)}
.div__name{font-size:clamp(1.45rem,3vw,1.8rem); font-weight:500; letter-spacing:-.01em}
.div__name a{text-decoration:none}
.div__name a::after{content:""; position:absolute; inset:0}
.div__claim{color:var(--paper); font-size:1.02rem; line-height:1.45}
.div__text{color:var(--muted); font-size:.95rem; line-height:1.62}
.div__pts{display:flex; flex-direction:column; gap:.42rem; margin-top:.15rem;
  padding-top:1rem; border-top:1px solid var(--line)}
.div__pts li{display:flex; align-items:flex-start; gap:.6rem; font-size:.9rem;
  color:var(--muted)}
.div__pts li::before{content:""; width:5px; height:5px; margin-top:.62em; flex:none;
  background:var(--acc); opacity:.85}
.div__go{margin-top:auto; padding-top:1.15rem; display:flex; align-items:center;
  gap:.55rem; font-family:'IBM Plex Mono',ui-monospace,monospace; font-weight:500;
  font-size:.72rem; letter-spacing:.11em; color:var(--acc)}
.div__go .ar{width:16px; height:16px; transition:transform .2s}
.div:hover .div__go .ar{transform:translateX(4px)}

/* ------------------------------------------------------------- Standorte */
.places-grid{display:grid; gap:1px; background:var(--line);
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); border:1px solid var(--line)}
.place{background:var(--ink); padding:clamp(1.6rem,3.5vw,2.3rem)}
.place__city{font-size:clamp(1.5rem,3.4vw,2rem); font-weight:300; margin-bottom:.4rem}
.place__country{font-family:'IBM Plex Mono',ui-monospace,monospace; font-weight:500;
  font-size:.68rem; letter-spacing:.17em; text-transform:uppercase; color:var(--muted-2)}
.place__role{color:var(--muted); font-size:.94rem; margin-top:1.1rem;
  padding-top:1.1rem; border-top:1px solid var(--line)}

/* ------------------------------------------------------------- Das Haus -- */
.house{display:grid; gap:clamp(2.4rem,6vw,4.5rem); align-items:start}
@media (min-width:900px){ .house{grid-template-columns:1.35fr .85fr} }
.house__text p{color:var(--muted); max-width:62ch}
.house__text p+p{margin-top:1.2rem}
.facts{display:flex; flex-direction:column; border-top:1px solid var(--line)}
.fact{padding-block:1.35rem; border-bottom:1px solid var(--line)}
.fact b{display:block; font-size:clamp(1.7rem,4vw,2.3rem); font-weight:200;
  letter-spacing:-.02em; line-height:1}
.fact span{display:block; margin-top:.4rem; font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-weight:500; font-size:.68rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted-2)}

/* -------------------------------------------------------------- Kontakt -- */
/* Die Adresse ist 29 Zeichen lang und passt auf einem 320er Schirm in keiner
   Groesse in eine Zeile. Drei Dinge muessen deshalb stimmen, sonst zerfaellt
   der Link (so gesehen am 12.08.):
   1. der Pfeil braucht eine Groesse, sonst rendert das SVG in Bildschirmhoehe
   2. line-height muss runter, sonst stehen die Zeilen weit auseinander
   3. der Umbruch gehoert hinter das @, dafuer steht dort ein <wbr> im Markup */
.contact__mail{display:inline-flex; align-items:baseline; gap:.6rem;
  text-decoration:none; max-width:100%;
  font-size:clamp(1.05rem,4.2vw,2.4rem); font-weight:300; letter-spacing:-.015em;
  line-height:1.22; border-bottom:1px solid var(--line-2); padding-bottom:.4rem}
.contact__mail span{min-width:0; overflow-wrap:anywhere}
.contact__mail .ar{width:.72em; height:.72em; flex:none; align-self:center}
.contact__mail:hover{border-bottom-color:var(--paper)}
.contact__meta{display:flex; flex-wrap:wrap; gap:.4rem 2.4rem; margin-top:2rem}
.contact__meta div{min-width:0}
.contact__meta dt{font-family:'IBM Plex Mono',ui-monospace,monospace; font-weight:500;
  font-size:.66rem; letter-spacing:.17em; text-transform:uppercase; color:var(--muted-2)}
.contact__meta dd{margin:.35rem 0 0; font-size:1.02rem}
.contact__sites{margin-top:clamp(2.6rem,6vw,3.8rem); padding-top:2rem;
  border-top:1px solid var(--line)}
.contact__sites p{color:var(--muted); font-size:.94rem; margin-bottom:1.1rem}
.sitelinks{display:flex; flex-wrap:wrap; gap:.7rem}
.sitelinks a{display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
  border:1px solid var(--line); padding:.6rem 1rem; font-size:.88rem;
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-weight:500;
  letter-spacing:.04em; color:var(--muted)}
.sitelinks a:hover{color:var(--paper); border-color:currentColor}
.sitelinks .dot{width:7px; height:7px; flex:none; background:var(--acc)}

/* ---------------------------------------------------------------- Inhalt -- */
.page{padding-block:clamp(3.5rem,8vw,6rem) var(--sect)}
.page h1{font-size:clamp(2.1rem,5.5vw,3.4rem); font-weight:300; margin-bottom:2.4rem}
.prose{max-width:70ch}
.prose h2{font-size:clamp(1.1rem,2.4vw,1.3rem); font-weight:500; letter-spacing:0;
  margin:2.8rem 0 .9rem; padding-top:1.6rem; border-top:1px solid var(--line)}
.prose h2:first-of-type{margin-top:0; padding-top:0; border-top:0}
.prose p{color:var(--muted); font-size:.99rem; line-height:1.7}
.prose p+p{margin-top:.9rem}
.prose a{color:var(--paper)}
.prose .adr{color:var(--paper); font-style:normal; line-height:1.8}
.prose .note{font-size:.85rem; color:var(--muted-2); margin-bottom:2rem;
  padding-left:.9rem; border-left:2px solid var(--line-2)}

/* ------------------------------------------------------------------- 404 -- */
.err{min-height:56vh; display:flex; flex-direction:column; justify-content:center;
  padding-block:clamp(4rem,10vw,7rem)}
.err h1{font-size:clamp(2.2rem,6vw,3.6rem); font-weight:300; margin-bottom:1.2rem}

/* ------------------------------------------------------------------ Fuss -- */
.ft{padding-block:clamp(3rem,6vw,4.5rem) 2rem; background:var(--ink-2)}
.ft__grid{display:grid; gap:2.6rem; grid-template-columns:1fr}
@media (min-width:760px){ .ft__grid{grid-template-columns:1.5fr 1fr 1fr} }
.ft__blurb{color:var(--muted); font-size:.92rem; max-width:38ch; margin-top:1.2rem}
.ft h2{font-family:'IBM Plex Mono',ui-monospace,monospace; font-weight:500;
  font-size:.66rem; letter-spacing:.17em; text-transform:uppercase; color:var(--muted-2);
  margin-bottom:1.1rem}
.ft ul{display:flex; flex-direction:column; gap:.6rem}
.ft ul a{text-decoration:none; color:var(--muted); font-size:.92rem}
.ft ul a:hover{color:var(--paper)}
.ft__end{margin-top:clamp(2.6rem,6vw,4rem); padding-top:1.5rem;
  border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:.5rem 1.5rem;
  align-items:center; font-size:.82rem; color:var(--muted-2)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important; transition-duration:.01ms!important}
}