/* Yaahh Premium Schwarz/Weiß Design
   Inhalt, Links, IDs, Formulare und Scripts bleiben unverändert.
   Nur optische Veredelung über CSS.
*/

:root{
  --yaahh-bg:#000;
  --yaahh-text:#fff;
  --yaahh-muted:rgba(255,255,255,.72);
  --yaahh-soft:rgba(255,255,255,.10);
  --yaahh-line:rgba(255,255,255,.24);
  --yaahh-card:rgba(255,255,255,.055);
  --yaahh-card-strong:rgba(255,255,255,.09);
  --yaahh-shadow:0 28px 90px rgba(255,255,255,.08), 0 10px 35px rgba(0,0,0,.65);
  --yaahh-radius:26px;
  --yaahh-radius-small:16px;
}

*{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  background:#000;
}
body{
  min-height:100vh;
  background:
    radial-gradient(circle at 50% -10%, rgba(255,255,255,.20), transparent 34rem),
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.075), transparent 26rem),
    radial-gradient(circle at 92% 52%, rgba(255,255,255,.055), transparent 32rem),
    linear-gradient(180deg, #050505 0%, #000 45%, #050505 100%) !important;
  color:var(--yaahh-text) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  letter-spacing:.01em;
  overflow-x:hidden;
  position:relative;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size:54px 54px;
  mask-image:radial-gradient(circle at center, black, transparent 78%);
  opacity:.55;
}

body::after{
  content:"";
  position:fixed;
  inset:-40%;
  pointer-events:none;
  z-index:-1;
  background:conic-gradient(from 180deg, transparent, rgba(255,255,255,.035), transparent 24%, rgba(255,255,255,.025), transparent 55%);
  animation:yaahhAura 22s linear infinite;
  opacity:.75;
}

@keyframes yaahhAura{
  to{transform:rotate(360deg)}
}

header{
  position:relative;
  isolation:isolate;
  padding:clamp(2.2rem,5vw,5rem) 1.25rem clamp(1rem,3vw,2rem) !important;
  text-align:center;
}

header::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:min(720px,92vw);
  height:min(720px,92vw);
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.16), transparent 58%);
  filter:blur(16px);
  z-index:-1;
  opacity:.48;
  animation:yaahhPulse 6s ease-in-out infinite;
}

@keyframes yaahhPulse{
  0%,100%{opacity:.35; transform:translate(-50%,-50%) scale(.96)}
  50%{opacity:.58; transform:translate(-50%,-50%) scale(1.03)}
}

.logo, img.logo{
  max-width:min(220px,52vw) !important;
  height:auto !important;
  display:block;
  margin:1.2rem auto !important;
  filter:drop-shadow(0 0 18px rgba(255,255,255,.30)) drop-shadow(0 18px 30px rgba(0,0,0,.65));
  transition:transform .45s cubic-bezier(.2,.8,.2,1), filter .45s ease;
}
.logo:hover, img.logo:hover{
  transform:translateY(-4px) scale(1.035);
  filter:drop-shadow(0 0 28px rgba(255,255,255,.50)) drop-shadow(0 22px 42px rgba(0,0,0,.8));
}

h1{
  font-size:clamp(2.6rem,7vw,5.8rem) !important;
  line-height:.95 !important;
  letter-spacing:-.075em;
  margin:0 auto .85rem !important;
  font-weight:900 !important;
  text-wrap:balance;
  text-shadow:0 0 40px rgba(255,255,255,.24);
}
h2{
  font-size:clamp(1.35rem,3vw,2.35rem) !important;
  color:rgba(255,255,255,.78) !important;
  font-weight:650 !important;
  letter-spacing:-.035em;
  text-wrap:balance;
}
h3{
  font-size:clamp(1.15rem,2vw,1.55rem);
  color:#fff;
  letter-spacing:-.025em;
}

p, li{
  color:rgba(255,255,255,.84);
}
strong,b{color:#fff}

nav{
  width:min(1120px,calc(100% - 2rem));
  margin:1.6rem auto 2.4rem !important;
  padding:.65rem !important;
  display:flex !important;
  justify-content:center !important;
  gap:.7rem !important;
  flex-wrap:wrap;
  position:sticky;
  top:.75rem;
  z-index:50;
  border:1px solid rgba(255,255,255,.16);
  border-radius:10px;
  background:rgba(0,0,0,.54);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  box-shadow:0 18px 60px rgba(0,0,0,.56), inset 0 1px 0 rgba(255,255,255,.10);
}

nav a,
.legal-links a,
.tab-button,
button,
input[type="submit"],
input[type="button"],
a.button{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border:1px solid rgba(255,255,255,.28) !important;
  border-radius:999px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.035)) !important;
  color:#fff !important;
  text-decoration:none !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15), 0 10px 28px rgba(0,0,0,.32);
  transition:transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease, color .25s ease !important;
}

nav a{
  padding:.78rem 1.05rem !important;
  font-size:clamp(.92rem,1.4vw,1.08rem) !important;
  white-space:nowrap;
}

nav a::after,
.legal-links a::after,
.tab-button::after,
button::after,
input[type="submit"]::after,
input[type="button"]::after{
  content:"";
  position:absolute;
  inset:-2px;
  background:linear-gradient(110deg, transparent 0%, rgba(255,255,255,.34) 45%, transparent 65%);
  transform:translateX(-130%);
  transition:transform .7s ease;
  z-index:-1;
}
nav a:hover,
.legal-links a:hover,
.tab-button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
a.button:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.72) !important;
  background:#fff !important;
  color:#000 !important;
  box-shadow:0 18px 45px rgba(255,255,255,.14), 0 12px 34px rgba(0,0,0,.45);
}
nav a:hover::after,
.legal-links a:hover::after,
.tab-button:hover::after,
button:hover::after,
input[type="submit"]:hover::after,
input[type="button"]:hover::after{
  transform:translateX(130%);
}

.content,
.infobox,
section,
main,
.container,
.card,
.box,
.shop-item,
.product,
.service,
.meilenstein,
.demo,
form,
table{
  border-color:rgba(255,255,255,.18) !important;
}

.content,
.infobox,
main > div,
section,
form,
table{
  width:min(1040px,calc(100% - 2rem));
}

.content,
.infobox{
  position:relative;
  margin:1.2rem auto 2.2rem !important;
  padding:clamp(1.25rem,3vw,2.35rem) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:var(--yaahh-radius) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.035)) !important;
  box-shadow:var(--yaahh-shadow) !important;
  backdrop-filter:blur(18px) saturate(145%);
  -webkit-backdrop-filter:blur(18px) saturate(145%);
  line-height:1.75 !important;
}

.content::before,
.infobox::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg, rgba(255,255,255,.45), transparent 28%, rgba(255,255,255,.10) 70%, rgba(255,255,255,.34));
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  pointer-events:none;
  opacity:.7;
}

hr{
  border:0 !important;
  height:1px !important;
  width:min(880px,86%);
  margin:2rem auto !important;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.52), transparent) !important;
}

a{
  color:#fff !important;
  text-underline-offset:.22em;
  text-decoration-thickness:1px;
}
.content a:not(nav a), .infobox a:not(nav a), p a{
  background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;
  transition:background-size .25s ease, opacity .25s ease;
}
.content a:hover, .infobox a:hover, p a:hover{
  background-size:100% 1px;
  opacity:.82;
}

img:not(.logo):not(.footer){
  max-width:100%;
  height:auto;
  border-radius:18px;
  filter:drop-shadow(0 16px 30px rgba(0,0,0,.55));
}

.legal-links{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:.7rem;
  width:min(760px,calc(100% - 2rem));
  margin:2.2rem auto 2.8rem !important;
  padding:0 !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
}
.legal-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:.45rem .85rem !important;
  border:1px solid rgba(255,255,255,.34) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.055) !important;
  color:rgba(255,255,255,.88) !important;
  text-decoration:none !important;
  box-shadow:0 8px 24px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08) !important;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:transform .22s ease, background .22s ease, border-color .22s ease, color .22s ease !important;
}
.legal-links a:hover{
  transform:translateY(-2px);
  background:#fff !important;
  color:#000 !important;
  border-color:#fff !important;
}

.footer-row{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:clamp(2rem,7vw,5rem) !important;
  width:min(760px,calc(100% - 2rem));
  margin:2.2rem auto 3rem !important;
  padding:.75rem 0 1.5rem !important;
  border:0 !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.footer{
  width:clamp(58px,7vw,78px) !important;
  height:auto !important;
  opacity:.88;
  filter:drop-shadow(0 0 10px rgba(255,255,255,.16));
  transition:transform .25s ease, opacity .25s ease, filter .25s ease !important;
}
.footer:hover{
  transform:translateY(-3px) scale(1.08) !important;
  opacity:1;
  filter:drop-shadow(0 0 18px rgba(255,255,255,.34));
}

footer{
  margin:0 !important;
  padding:.75rem 1rem !important;
  border:0 !important;
  background:none !important;
  color:rgba(255,255,255,.58) !important;
  font-size:.92rem !important;
  letter-spacing:.02em;
  white-space:nowrap;
  position:relative;
}
footer::before,
footer::after{
  content:"";
  position:absolute;
  top:50%;
  width:4.2rem;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
}
footer::before{right:100%}
footer::after{left:100%}

input, textarea, select{
  border:1px solid rgba(255,255,255,.22) !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.07) !important;
  color:#fff !important;
  padding:.8rem 1rem !important;
  outline:none !important;
  transition:border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
input:focus, textarea:focus, select:focus{
  border-color:rgba(255,255,255,.72) !important;
  box-shadow:0 0 0 4px rgba(255,255,255,.11);
  background:rgba(255,255,255,.10) !important;
}
::placeholder{color:rgba(255,255,255,.48)}

table{
  border-collapse:separate !important;
  border-spacing:0 !important;
  overflow:hidden;
  border-radius:18px;
  background:rgba(255,255,255,.05);
  box-shadow:0 18px 44px rgba(0,0,0,.36);
}
td,th{
  border-color:rgba(255,255,255,.14) !important;
  padding:.8rem 1rem !important;
}
th{background:rgba(255,255,255,.10)}

#cookie-banner{
  left:50% !important;
  bottom:1rem !important;
  width:min(980px,calc(100% - 2rem)) !important;
  transform:translateX(-50%);
  border:1px solid rgba(255,255,255,.18);
  border-radius:22px;
  background:rgba(8,8,8,.84) !important;
  color:#fff !important;
  box-shadow:0 24px 90px rgba(0,0,0,.78), inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
#cookie-banner button{
  background:#fff !important;
  color:#000 !important;
  font-weight:700;
}
#cookie-banner button.decline{
  background:rgba(255,255,255,.10) !important;
  color:#fff !important;
}

/* dezente Scroll-Reveal-Optik ohne JavaScript */
.content, .infobox, section, .footer-row, nav{
  animation:yaahhRise .65s ease both;
}
@keyframes yaahhRise{
  from{opacity:0; transform:translateY(16px)}
  to{opacity:1; transform:translateY(0)}
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.001ms !important;
  }
}

@media (max-width:768px){
  body::before{background-size:34px 34px}
  header{padding-top:2rem !important}
  h1{font-size:clamp(2.05rem,11vw,3.2rem) !important}
  h2{font-size:clamp(1.15rem,6vw,1.75rem) !important}
  nav{
    position:relative;
    top:auto;
    border-radius:10px;
    padding:.65rem !important;
    margin:1rem auto 1.4rem !important;
  }
  nav a{
    flex:1 1 auto;
    text-align:center;
    padding:.72rem .85rem !important;
  }
  .content,.infobox{
    width:calc(100% - 1rem);
    border-radius:22px !important;
    padding:1.15rem !important;
  }
  .footer-row{
    gap:1rem !important;
    flex-wrap:nowrap;
    width:calc(100% - 1rem);
  }
  .footer{width:52px !important}
  footer{
    font-size:.82rem !important;
    white-space:normal;
    text-align:center;
  }
  footer::before,
  footer::after{display:none}
  .legal-links{
    gap:.55rem;
    width:calc(100% - 1rem);
    margin:1.6rem auto 2rem !important;
  }
  .legal-links a{
    min-height:32px;
    padding:.4rem .7rem !important;
    font-size:.95rem !important;
  }
  #cookie-banner .buttons{
    float:none !important;
    display:flex;
    gap:.6rem;
    margin-top:.8rem;
    flex-wrap:wrap;
  }
  #cookie-banner button{margin-left:0 !important}
}


/* v5: Link-Menürahmen eckig, Link-Buttons bleiben rund */
nav,
.tabs{
  border-radius:10px !important;
}

nav a,
.legal-links a,
.tab-button,
button,
input[type="submit"],
input[type="button"],
a.button{
  border-radius:999px !important;
}

/* Die inneren Link-Menüs in den Boxen bleiben ein klarer eckiger Rahmen. */
.infobox > nav,
section > nav,
.infobox .tabs{
  border-radius:10px !important;
}