:root{
  --cfau-red:#cc1715;
  --cfau-white:#fff;
  --cfau-bg:#05060a;
  --cfau-blue:#4667ff;
  --cfau-violet:#9b54ff;
  --cfau-content:1520px;
}

.cfau-page,
.cfau-page *{
  box-sizing:border-box;
}

body.cfau-page-active{
  background:#05060a;
}

body.cfau-page-active .page-header{
  display:none;
}

body.cfau-page-active .site-main,
body.cfau-page-active main.site-main{
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
}

.cfau-page{
  position:relative;
  width:100vw;
  min-height:100svh;
  margin-left:calc(50% - 50vw);
  overflow:hidden;
  isolation:isolate;
  background:var(--cfau-bg);
  color:#fff;
  font-family:"Montserrat",Arial,sans-serif;
}

.cfau-scene{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}

.cfau-scene__background{
  position:absolute;
  inset:-3%;
  background:
    url("../img/ueber-uns-bg.png") 71% 50% / cover no-repeat;
  filter:saturate(1.02) brightness(.72) contrast(1.05);
  transform:scale(1.035);
}

.cfau-scene__shade{
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 38% 58% at 72% 46%,rgba(204,23,21,.05),rgba(0,0,0,.08) 50%,transparent 74%),
    linear-gradient(90deg,rgba(2,4,9,.86) 0%,rgba(2,4,9,.70) 34%,rgba(2,4,9,.27) 59%,rgba(2,4,9,.05) 78%,rgba(2,4,9,.15) 100%),
    linear-gradient(180deg,rgba(0,0,0,.16),rgba(0,0,0,.04) 48%,rgba(0,0,0,.32));
}

.cfau-scene__particles{
  position:absolute;
  inset:0;
  opacity:.55;
  background:
    radial-gradient(circle at 7% 17%,rgba(204,23,21,.95) 0 2px,transparent 3px),
    radial-gradient(circle at 17% 72%,rgba(134,72,255,.65) 0 2px,transparent 3px),
    radial-gradient(circle at 37% 16%,rgba(204,23,21,.78) 0 3px,transparent 4px),
    radial-gradient(circle at 61% 74%,rgba(204,23,21,.62) 0 2px,transparent 3px),
    radial-gradient(circle at 84% 18%,rgba(104,91,255,.46) 0 2px,transparent 3px),
    radial-gradient(circle at 91% 68%,rgba(204,23,21,.72) 0 3px,transparent 4px);
  background-size:187px 151px,229px 173px,313px 211px,263px 197px,347px 239px,281px 191px;
  mix-blend-mode:screen;
}

.cfau-scene__logo{
  position:absolute;
  z-index:4;
  top:4.4vh;
  right:5.8vw;
  width:clamp(320px,29vw,570px);
  height:auto;
  filter:
    drop-shadow(0 0 7px rgba(255,255,255,.35))
    drop-shadow(0 0 16px rgba(204,23,21,.72))
    drop-shadow(0 0 46px rgba(204,23,21,.42));
}

.cfau-content{
  position:relative;
  z-index:2;
  min-height:100svh;
  width:min(calc(100% - 7vw),var(--cfau-content));
  margin:0 auto;
  padding:clamp(44px,6.4vh,74px) 0 clamp(26px,4.2vh,48px);
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto;
  align-content:stretch;
}

.cfau-intro{
  width:min(61vw,1040px);
  padding-left:clamp(8px,1vw,18px);
}

.cfau-title{
  margin:0;
  font-family:"Anton",Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
  font-weight:400;
  font-size:clamp(72px,7vw,132px);
  line-height:.92;
  letter-spacing:-.02em;
  text-transform:uppercase;
  color:#fff;
  text-shadow:0 0 10px rgba(255,255,255,.18);
}

.cfau-title-line{
  display:block;
  width:clamp(130px,11vw,205px);
  height:2px;
  margin:clamp(22px,2.7vh,30px) 0 clamp(28px,3.1vh,38px);
  border-radius:999px;
  background:var(--cfau-red);
  box-shadow:0 0 5px rgba(204,23,21,.78),0 0 14px rgba(204,23,21,.42);
}

.cfau-lead{
  max-width:min(61vw,1040px);
  margin:0;
  font-size:clamp(17px,1.16vw,22px);
  line-height:1.55;
  font-weight:400;
  color:rgba(255,255,255,.92);
  text-wrap:pretty;
}

.cfau-tabs{
  width:min(60vw,1040px);
  margin-top:clamp(34px,4.2vh,52px);
  padding-left:clamp(8px,1vw,18px);
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,1vw,18px);
}

.cfau-tab{
  -webkit-appearance:none !important;
  appearance:none !important;
  min-height:48px;
  padding:10px 16px 9px;
  border:1px solid rgba(255,255,255,.74) !important;
  border-radius:9px !important;
  background:rgba(7,8,14,.34) !important;
  background-image:none !important;
  color:rgba(255,255,255,.76) !important;
  font:500 clamp(13px,.95vw,17px)/1.15 "Montserrat",Arial,sans-serif;
  cursor:default;
  opacity:.72;
  box-shadow:0 0 6px rgba(255,255,255,.12),inset 0 0 8px rgba(255,255,255,.025);
  text-shadow:0 0 5px rgba(255,255,255,.12);
  transition:opacity .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease,transform .18s ease;
}

.cfau-tab:not(.is-active):hover,
.cfau-tab:not(.is-active):focus-visible{
  opacity:.96 !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.96) !important;
  background:rgba(7,8,14,.42) !important;
  background-image:none !important;
  box-shadow:0 0 7px rgba(255,255,255,.28),0 0 15px rgba(255,255,255,.12),inset 0 0 8px rgba(255,255,255,.04) !important;
  text-shadow:0 0 5px rgba(255,255,255,.22) !important;
  transform:translateY(-1px);
  outline:none !important;
}

.cfau-tab.is-active,
.cfau-tab.is-active:hover,
.cfau-tab.is-active:focus-visible{
  opacity:1 !important;
  color:#fff !important;
  border-color:rgba(255,74,69,.98) !important;
  background:linear-gradient(180deg,rgba(204,23,21,.16),rgba(65,4,7,.22)) !important;
  background-image:linear-gradient(180deg,rgba(204,23,21,.16),rgba(65,4,7,.22)) !important;
  box-shadow:0 0 8px rgba(204,23,21,.64),0 0 20px rgba(204,23,21,.36),inset 0 0 10px rgba(204,23,21,.12) !important;
  text-shadow:0 0 5px rgba(255,255,255,.28),0 0 9px rgba(204,23,21,.54) !important;
  outline:none !important;
}

.cfau-board{
  min-height:0;
  display:flex;
  align-items:end;
  padding:clamp(34px,5.2vh,62px) 0 clamp(22px,3vh,34px);
}

.cfau-board__row{
  width:100%;
  display:grid;
  grid-template-columns:repeat(9,minmax(0,1fr));
  gap:clamp(5px,.55vw,10px);
  align-items:end;
  padding:0 clamp(0px,.5vw,8px);
}

.cfau-board__pagination{display:none}

.cfau-member{
  --r:0deg;
  position:relative;
  min-width:0;
  aspect-ratio:4/5;
  transform:rotate(var(--r));
  transform-origin:50% 92%;
  transition:transform .22s ease,filter .22s ease,z-index .01s linear;
  z-index:1;
}

.cfau-member--1{--r:-3.4deg;transform:translateY(4px) rotate(var(--r))}
.cfau-member--2{--r:2.6deg;transform:translateY(9px) rotate(var(--r))}
.cfau-member--3{--r:-1.2deg;transform:translateY(-4px) rotate(var(--r))}
.cfau-member--4{--r:2.1deg;transform:translateY(7px) rotate(var(--r))}
.cfau-member--5{--r:-1.5deg;transform:translateY(1px) rotate(var(--r))}
.cfau-member--6{--r:2.8deg;transform:translateY(7px) rotate(var(--r))}
.cfau-member--7{--r:-1.8deg;transform:translateY(-2px) rotate(var(--r))}
.cfau-member--8{--r:2.3deg;transform:translateY(8px) rotate(var(--r))}
.cfau-member--9{--r:3.1deg;transform:translateY(3px) rotate(var(--r))}

.cfau-member:hover,
.cfau-member:focus-within{
  z-index:10;
  transform:translateY(-8px) rotate(0deg) scale(1.035);
  filter:brightness(1.06);
}

.cfau-member__inner{
  position:absolute;
  inset:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.32);
  border-radius:13px;
  background:rgba(8,8,14,.78);
  box-shadow:
    0 18px 36px rgba(0,0,0,.34),
    -2px 0 11px rgba(204,23,21,.25),
    2px 0 10px rgba(91,93,255,.12),
    0 0 9px rgba(255,255,255,.08);
}

.cfau-member__inner::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:
    inset 1px 0 0 rgba(255,82,78,.82),
    inset -1px 0 0 rgba(118,97,255,.58),
    inset 0 1px 0 rgba(255,255,255,.34);
  opacity:.78;
}

.cfau-member__photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.92) contrast(1.04) brightness(.88);
}

.cfau-member__shade{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg,rgba(2,3,7,.03) 28%,rgba(5,5,10,.22) 58%,rgba(4,4,8,.95) 100%),
    radial-gradient(circle at 22% 65%,rgba(204,23,21,.20),transparent 42%),
    radial-gradient(circle at 82% 50%,rgba(76,72,255,.12),transparent 46%);
}

.cfau-member__meta{
  position:absolute;
  z-index:2;
  left:10px;
  right:10px;
  bottom:12px;
  text-align:center;
}

.cfau-member__name{
  margin:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#fff;
  font-family:"Montserrat",Arial,sans-serif;
  font-size:clamp(10px,.79vw,15px);
  line-height:1.15;
  font-weight:700;
  text-shadow:0 2px 10px rgba(0,0,0,.8);
}

.cfau-member__function{
  margin:5px 0 0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:rgba(255,255,255,.72);
  font-size:clamp(9px,.68vw,13px);
  line-height:1.1;
  font-weight:400;
  text-shadow:0 2px 8px rgba(0,0,0,.85);
}

.cfau-statutes{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding-top:clamp(4px,.5vh,8px);
}

.cfau-statutes__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:178px;
  min-height:44px;
  padding:9px 26px;
  border:1px solid rgba(255,255,255,.38);
  border-radius:9px;
  background:rgba(6,7,12,.24);
  color:rgba(255,255,255,.72);
  font:500 15px/1 "Montserrat",Arial,sans-serif;
  text-decoration:none;
  box-shadow:0 0 6px rgba(255,255,255,.07),0 0 12px rgba(204,23,21,.09),inset 0 0 8px rgba(255,255,255,.02);
  opacity:.66;
  transition:opacity .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease,transform .18s ease;
}

.cfau-statutes__link:not(.is-disabled):hover,
.cfau-statutes__link:not(.is-disabled):focus-visible{
  opacity:1;
  color:#fff;
  border-color:rgba(255,255,255,.72);
  box-shadow:0 0 8px rgba(255,255,255,.13),0 0 18px rgba(204,23,21,.17),inset 0 0 9px rgba(255,255,255,.025);
  transform:translateY(-1px);
  outline:none;
}

.cfau-statutes__link.is-disabled{
  cursor:default;
}

.cfau-back-home{
  display:inline-block;
  margin-top:10px;
  color:rgba(255,255,255,.56);
  font:500 12px/1.35 "Montserrat",Arial,sans-serif;
  text-decoration:none;
  transition:color .18s ease,opacity .18s ease;
}

.cfau-back-home:hover,
.cfau-back-home:focus-visible{
  color:#fff;
  outline:none;
}

@media (max-width:1180px){
  .cfau-content{width:min(calc(100% - 44px),1120px)}
  .cfau-scene__logo{right:3.4vw;width:clamp(280px,30vw,420px)}
  .cfau-intro{width:min(55vw,650px)}
  .cfau-tabs{width:min(72vw,860px)}
  .cfau-board__row{gap:4px}
}

/* Conservative responsive safety. The final mobile choreography remains the same DOM/data source. */
@media (min-width:768px) and (max-width:820px){
  .cfau-page{min-height:auto;overflow:hidden}
  .cfau-content{width:100%;min-height:auto;padding:36px 24px 46px;display:block}
  .cfau-scene__background{background-position:72% 20%;filter:saturate(1.02) brightness(.55) contrast(1.05)}
  .cfau-scene__shade{background:linear-gradient(180deg,rgba(2,3,8,.24),rgba(2,3,8,.76) 38%,rgba(2,3,8,.82))}
  .cfau-scene__logo{position:relative;display:block;top:auto;right:auto;width:min(58vw,330px);margin:0 0 48px auto}
  .cfau-intro{width:100%;padding:0}
  .cfau-title{font-size:clamp(58px,16vw,92px)}
  .cfau-lead{font-size:17px}
  .cfau-tabs{width:100%;padding:0;grid-template-columns:1fr 1fr;margin-top:36px;gap:12px}
  .cfau-tab{font-size:14px}
  .cfau-board{padding:48px 0 34px;overflow:visible}
  .cfau-board__row{display:flex;width:max-content;gap:18px;transform:translateX(calc(-1 * min(22vw,110px)));padding:0}
  .cfau-member{width:min(68vw,360px);flex:0 0 auto;aspect-ratio:4/5}
  .cfau-member:nth-child(n+4){display:none}
  .cfau-member--1{opacity:.36;transform:scale(.86) rotate(-3deg)}
  .cfau-member--2{opacity:1;transform:scale(1) rotate(0deg)}
  .cfau-member--3{opacity:.36;transform:scale(.86) rotate(3deg)}
  .cfau-member:hover{transform:scale(1) rotate(0)}
  .cfau-member__name{font-size:18px}
  .cfau-member__function{font-size:14px}
  .cfau-statutes{padding-top:12px}
}

@media (prefers-reduced-motion:reduce){
  .cfau-tab,
  .cfau-member,
  .cfau-statutes__link{transition:none}
}

/* --------------------------------------------------------------------------
   Mobile composition
   Single responsive owner for <= 767px. Desktop rules above remain untouched.
   Native horizontal scroll-snap owns the board on mobile; JS only tracks the
   centred card state and never writes layout transforms.
   -------------------------------------------------------------------------- */
@media (max-width:767px){
  body.cfau-page-active{overflow-x:hidden}

  .cfau-page{
    width:100vw;
    min-height:100svh;
    margin-left:calc(50% - 50vw);
    overflow:hidden;
  }

  .cfau-scene{position:absolute;inset:0}

  .cfau-scene__background{
    inset:0;
    background-position:76% 0;
    background-size:auto clamp(470px,118vw,610px);
    background-repeat:no-repeat;
    filter:saturate(1.03) brightness(.61) contrast(1.06);
    transform:none;
  }

  .cfau-scene__shade{
    background:
      linear-gradient(180deg,rgba(2,4,9,.03) 0%,rgba(2,4,9,.08) 22%,rgba(2,4,9,.46) 43%,rgba(2,4,9,.72) 66%,rgba(2,4,9,.88) 100%),
      linear-gradient(90deg,rgba(2,4,9,.47) 0%,rgba(2,4,9,.18) 51%,rgba(2,4,9,.08) 100%);
  }

  .cfau-scene__particles{opacity:.48}

  /* Confirmed mobile composition: logo lives in the upper-right, not centred. */
  .cfau-scene__logo{
    position:absolute;
    display:block;
    top:clamp(2px,.7vw,5px);
    right:clamp(2px,1.2vw,7px);
    left:auto;
    width:clamp(176px,45vw,218px);
    max-width:none;
    height:auto;
    margin:0;
    transform:none;
    filter:
      drop-shadow(0 0 5px rgba(255,255,255,.25))
      drop-shadow(0 0 13px rgba(204,23,21,.68))
      drop-shadow(0 0 34px rgba(204,23,21,.34));
  }

  .cfau-content{
    width:100%;
    min-height:100svh;
    margin:0;
    padding:clamp(190px,49vw,228px) 0 clamp(44px,11vw,66px);
    display:block;
  }

  .cfau-intro{width:auto;margin:0 6.8vw;padding:0}

  .cfau-title{
    margin:0;
    font-family:"Anton",Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
    font-size:clamp(58px,16.3vw,80px);
    line-height:.94;
    letter-spacing:-.018em;
    text-shadow:0 0 8px rgba(255,255,255,.18);
  }

  .cfau-title-line{
    width:clamp(92px,24vw,122px);
    height:2px;
    margin:clamp(14px,3.8vw,19px) 0 clamp(22px,5.7vw,30px);
    background:var(--cfau-red);
    box-shadow:0 0 5px rgba(204,23,21,.78),0 0 13px rgba(204,23,21,.38);
  }

  .cfau-lead{
    max-width:none;
    margin:0;
    font-size:clamp(16px,4.15vw,19px);
    line-height:1.48;
    color:rgba(255,255,255,.92);
    text-wrap:pretty;
  }

  .cfau-tabs{
    width:auto;
    margin:clamp(30px,7.8vw,40px) 6.8vw 0;
    padding:0;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(10px,2.6vw,13px) clamp(12px,3vw,15px);
  }

  .cfau-tab{
    min-height:clamp(54px,13.6vw,64px);
    padding:10px 8px 9px;
    border-radius:9px !important;
    font-size:clamp(14px,3.8vw,17px);
    opacity:.68;
  }

  .cfau-tab:not(.is-active):hover,
  .cfau-tab:not(.is-active):focus-visible{transform:none}

  /* Native horizontal carousel. The viewport itself scrolls; no transform-based
     pseudo-carousel and no duplicated cards. */
  .cfau-board{
    width:100%;
    min-height:0;
    height:auto;
    margin-top:clamp(46px,11.5vw,60px);
    padding:0;
    display:block;
    overflow:hidden;
    outline:none;
  }

  .cfau-board__row{
    --cfau-mobile-card:clamp(338px,86vw,410px);
    width:100%;
    height:auto;
    display:flex;
    align-items:center;
    gap:clamp(16px,4vw,22px);
    padding:
      clamp(10px,2.6vw,14px)
      calc((100vw - var(--cfau-mobile-card)) / 2)
      clamp(20px,5vw,28px);
    overflow-x:auto;
    overflow-y:visible;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:calc((100vw - var(--cfau-mobile-card)) / 2);
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    touch-action:pan-x pan-y;
  }

  .cfau-board__row::-webkit-scrollbar{display:none}

  .cfau-board__row .cfau-member{
    position:relative;
    top:auto;
    left:auto;
    flex:0 0 var(--cfau-mobile-card);
    width:var(--cfau-mobile-card);
    min-width:var(--cfau-mobile-card);
    aspect-ratio:4/5;
    opacity:.16;
    pointer-events:auto;
    visibility:visible;
    filter:saturate(.58) brightness(.52);
    transform:scale(.90) rotate(0deg);
    transform-origin:50% 50%;
    scroll-snap-align:center;
    scroll-snap-stop:always;
    transition:
      transform .30s cubic-bezier(.2,.72,.25,1),
      opacity .24s ease,
      filter .24s ease;
    z-index:1;
  }

  .cfau-board__row .cfau-member.is-current{
    opacity:1;
    filter:none;
    transform:scale(1) rotate(0deg);
    z-index:3;
  }

  .cfau-board__row .cfau-member.is-adjacent{
    opacity:.27;
    filter:saturate(.70) brightness(.66);
    transform:scale(.93) rotate(0deg);
    z-index:2;
  }

  .cfau-board__row .cfau-member.is-away{
    opacity:.10;
    filter:saturate(.45) brightness(.44);
    transform:scale(.88) rotate(0deg);
    z-index:1;
  }

  .cfau-board__row .cfau-member:hover,
  .cfau-board__row .cfau-member:focus-within{
    transform:inherit;
  }

  .cfau-member__inner{
    border-radius:14px;
    box-shadow:
      0 22px 44px rgba(0,0,0,.42),
      -2px 0 12px rgba(204,23,21,.28),
      2px 0 11px rgba(91,93,255,.13),
      0 0 10px rgba(255,255,255,.08);
  }

  .cfau-member__meta{
    left:16px;
    right:16px;
    bottom:clamp(18px,4.7vw,24px);
  }

  .cfau-member__name{font-size:clamp(19px,5vw,24px);line-height:1.12}
  .cfau-member__function{margin-top:7px;font-size:clamp(16px,4.25vw,20px)}

  .cfau-board__pagination{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    margin-top:clamp(6px,1.6vw,10px);
    padding:0 6.8vw;
  }

  .cfau-board__dot{
    -webkit-appearance:none;
    appearance:none;
    width:7px;
    height:7px;
    min-width:7px;
    min-height:7px;
    margin:0;
    padding:0;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.32);
    box-shadow:none;
    opacity:.72;
    cursor:pointer;
    transition:transform .18s ease,background-color .18s ease,opacity .18s ease,box-shadow .18s ease;
  }

  .cfau-board__dot.is-active{
    background:var(--cfau-red);
    opacity:1;
    transform:scale(1.22);
    box-shadow:0 0 6px rgba(204,23,21,.65);
  }

  .cfau-board__dot:focus-visible{
    outline:1px solid rgba(255,255,255,.75);
    outline-offset:3px;
  }

  .cfau-statutes{
    margin-top:clamp(42px,10.5vw,54px);
    padding:0 0 clamp(8px,2vw,14px);
  }

  .cfau-statutes__link{
    min-width:clamp(170px,45vw,214px);
    min-height:48px;
    padding:10px 24px;
    border-color:rgba(255,255,255,.30);
    font-size:clamp(15px,3.9vw,18px);
    opacity:.46;
  }
}