/* Beige-forward Theme + Sora font */
:root{
  --bg:#F2F2F2;
  --bg-alt:#EAE4D5;
  --edge:#B6B09F;
  --text:#000;
  --radius:20px;
  --glass-bg:rgba(255,255,255,0.55);
  --glass-brd:rgba(0,0,0,0.08);
  --shadow:0 18px 50px rgba(0,0,0,.12);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Sora,system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg, var(--bg), var(--bg-alt) 140%);
  line-height:1.7;
  overflow-x:hidden;
}

/* Scroll progress bar */
#scrollbar{
  position:fixed;top:0;left:0;height:4px;background:#000;width:0%;z-index:1000;
  box-shadow:0 0 12px rgba(0,0,0,.3);
}

/* Header */
.site-header{
  position:sticky;top:12px;z-index:50;margin:0 12px;
}
.glass{
  background:var(--glass-bg);
  backdrop-filter:saturate(125%) blur(10px);
  -webkit-backdrop-filter:saturate(125%) blur(10px);
  border:1px solid var(--glass-brd);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.container{max-width:1100px;margin:0 auto;padding:0 20px}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 12px}
.brand{font-weight:800;text-decoration:none;color:var(--text);letter-spacing:.3px}
nav a{margin-left:14px;text-decoration:none;color:var(--text);font-weight:600;opacity:.85;padding:6px 10px;border-radius:10px;position:relative}
nav a::after{content:'';position:absolute;left:10px;right:10px;bottom:4px;height:2px;background:#000;transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
nav a:hover::after, nav a.active::after{transform:scaleX(1)}

/* Sections */
.section{padding:72px 0}
.section.alt{background:var(--bg-alt)}
.section-title{margin:0 0 8px;font-size:clamp(24px,3vw,36px)}

.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
.hero h1{font-size:clamp(30px,4vw,48px);line-height:1.12;margin:0 0 14px}
.lead{font-size:1.05rem;opacity:.9}
.cta-row{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 18px;border-radius:999px;border:2px solid var(--text);text-decoration:none;font-weight:700;transition:transform .2s ease, background .2s ease}
.btn.primary{background:var(--text);color:#fff}
.btn.ghost{background:transparent;color:var(--text)}

.image-frame{overflow:hidden;border:1px solid var(--edge)}
.image-frame img{display:block;width:100%;height:auto;transform:scale(1.02);transition:transform .6s ease}
.image-frame:hover img{transform:scale(1.06)}

/* Cards */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:10px}
.card{padding:18px;text-decoration:none;color:var(--text);transition:transform .25s ease, box-shadow .25s ease, background .25s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.16)}

/* Content */
.content h2{margin-top:0}
.content ul{padding-left:18px}

.columns{columns:2;gap:24px}
.checklist li{list-style:"✓  ";padding-left:6px;margin:6px 0}

/* Layout tweaks */
.grid-2.tight{gap:20px}
.pros-cons{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.note{margin-top:10px;opacity:.85}

/* Footer */
.site-footer{padding:36px 0;border-top:1px solid rgba(0,0,0,.06);margin-top:24px}

/* Reveal */
.reveal{opacity:0;transform:translateY(16px);}
.reveal.visible{opacity:1;transform:none;transition:opacity .7s ease, transform .7s ease}
.delay-50{transition-delay:.05s}
.delay-100{transition-delay:.1s}
.delay-150{transition-delay:.15s}
.delay-200{transition-delay:.2s}
.delay-250{transition-delay:.25s}
.delay-300{transition-delay:.3s}
.delay-350{transition-delay:.35s}

/* Kinetic title (no blur) */
.kinetic-title{will-change:transform,opacity}
.kinetic-seg{display:inline-block;opacity:0;transform:translateY(-26px) rotate(-1.2deg);}

/* Parallax & Tilt */
.parallax{transform-style:preserve-3d;perspective:800px}
.tilt{transform-style:preserve-3d;transition:transform .2s ease}
.tilt:hover{transform:translateY(-4px) rotateX(2deg) rotateY(-2deg)}

/* Stagger paragraphs/lists */
.stagger, .stagger-list li{opacity:0;transform:translateY(10px)}
.stagger.visible, .stagger-list.visible li{opacity:1;transform:none;transition:opacity .6s ease, transform .6s ease}
.stagger-list li{transition-delay:calc(var(--i, 0) * 70ms)}

/* Responsive */
@media (max-width:860px){
  .grid-2{grid-template-columns:1fr}
  nav a{margin-left:10px}
  .columns{columns:1}
}


/* === HERO as full-width background image === */
.hero.section.alt{
  /* set the background image and keep the beige tone */
  background: var(--bg-alt) url('geschichte.jpg') center/cover no-repeat;
  position: relative;
  overflow: hidden;
  min-height: clamp(420px, 70vh, 700px);
  display: flex;
  align-items: center;
}

/* soft overlay for readability */
.hero.section.alt::after{content:'';background:none;}

/* make the layout single-column in the hero */
.hero .container.grid-2{
  grid-template-columns: 1fr;
}

/* hide the small inline image inside the hero */
.hero .hero-media{
  display: none;
}

/* slight text shadow for contrast */
.hero h1, .hero .lead{
  text-shadow: 0 1px 2px rgba(0,0,0,0.12);
}



/* === Hero: zentriert, clean, besser lesbar === */
.hero.section.alt{
  background-position: center 30%;
  min-height: clamp(520px, 78vh, 900px);
}

.hero .container{ max-width: 1100px; margin: 0 auto; }

.hero .container.grid-2{ grid-template-columns: 1fr; }

.hero .hero-text{
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.hero h1{
  margin-bottom: 14px;
  text-shadow: none;
}

.hero .lead{
  font-size: 1.1rem;
  max-width: 800px;
  margin: 0 auto;
  text-shadow: none;
}

/* Buttons: gleich aussehen, mittig, größer */
.hero .cta-row{
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px !important;
}

.hero .cta-row .btn,
.hero .cta-row a.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  font-weight: 600;
  font-size: 1rem;
  border-radius: 14px;
  border: none;
  text-decoration: none;
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}

/* Einheitlicher Look im Hero */
.hero .cta-row .btn.primary,
.hero .cta-row .btn.ghost,
.hero .cta-row a.btn{
  background: #111;
  color: #fff;
  border: 1px solid transparent;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}

.hero .cta-row .btn.primary:hover,
.hero .cta-row .btn.ghost:hover,
.hero .cta-row a.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.22);
  filter: brightness(1.1);
}

/* Mobile: zentriert */
@media (max-width: 860px){
  .hero .container{ text-align: center; }
  .cta-row{ justify-content: center; }
}


/* === overrides added per request (hero text white, bigger subline, buttons inline) === */
.hero .hero-text, .hero .hero-text h1, .hero .hero-text .lead { color: #fff; }
.hero .lead { font-size: 1.25rem; line-height: 1.6; }
.hero .cta-row { flex-wrap: nowrap; }
@media (max-width: 640px){
  .hero .cta-row { flex-wrap: wrap; }
}



/* === outline around hero text (subtle black) === */
.hero .hero-text h1,
.hero .hero-text .lead {
  /* Fallback using text-shadow for all browsers */
  text-shadow:
    0 1px 0 rgba(0,0,0,0.75),
    1px 0 0 rgba(0,0,0,0.75),
    0 -1px 0 rgba(0,0,0,0.75),
    -1px 0 0 rgba(0,0,0,0.75),
    1px 1px 0 rgba(0,0,0,0.65),
    1px -1px 0 rgba(0,0,0,0.65),
    -1px 1px 0 rgba(0,0,0,0.65),
    -1px -1px 0 rgba(0,0,0,0.65);
  /* Enhancement for WebKit */
  -webkit-text-stroke: 0.6px rgba(0,0,0,0.85);
  paint-order: stroke fill;
}



/* === stronger outline + dark glass buttons in hero === */
.hero .hero-text h1,
.hero .hero-text .lead {
  text-shadow:
    0 2px 0 rgba(0,0,0,0.85),
    2px 0 0 rgba(0,0,0,0.85),
    0 -2px 0 rgba(0,0,0,0.85),
    -2px 0 0 rgba(0,0,0,0.85),
    2px 2px 0 rgba(0,0,0,0.75),
    2px -2px 0 rgba(0,0,0,0.75),
    -2px 2px 0 rgba(0,0,0,0.75),
    -2px -2px 0 rgba(0,0,0,0.75);
  -webkit-text-stroke: 1.2px rgba(0,0,0,0.9);
  paint-order: stroke fill;
}

.hero .btn,
.hero .btn.primary,
.hero .btn.ghost {
  background: rgba(0,0,0,0.35);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 8px 24px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.35);
}

.hero .btn:hover,
.hero .btn:focus {
  background: rgba(0,0,0,0.5);
  transform: translateY(-1px);
}



/* === bottom section buttons (glassy variants) === */
.btn.btn-glass{
  background: rgba(0,0,0,0.35);
  color:#fff;
  border:1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 8px 24px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.35);
}
.btn.btn-glass:hover{ background: rgba(0,0,0,0.5) }

/* color accents */
.btn.btn-glass.tools{
  background: linear-gradient(135deg, rgba(20,120,20,.7), rgba(0,180,120,.6)) , rgba(0,0,0,0.25);
  border-color: rgba(0,255,160,0.25);
}
.btn.btn-glass.tools:hover{
  background: linear-gradient(135deg, rgba(20,120,20,.85), rgba(0,180,120,.75)) , rgba(0,0,0,0.35);
}

.btn.btn-glass.oberstufe{
  background: linear-gradient(135deg, rgba(20,60,160,.7), rgba(0,140,255,.6)) , rgba(0,0,0,0.25);
  border-color: rgba(120,180,255,0.25);
}
.btn.btn-glass.oberstufe:hover{
  background: linear-gradient(135deg, rgba(20,60,160,.85), rgba(0,140,255,.75)) , rgba(0,0,0,0.35);
}



/* From Uiverse.io (modified) */
.uiverse {
  --duration: 7s;
  --easing: linear;
  --c-color-1: rgba(255, 163, 26, 0.7);
  --c-color-2: #1a23ff;
  --c-color-3: #e21bda;
  --c-color-4: rgba(255, 232, 26, 0.7);
  --c-shadow: rgba(255, 223, 87, 0.5);
  --c-shadow-inset-top: rgba(255, 223, 52, 0.9);
  --c-shadow-inset-bottom: rgba(255, 250, 215, 0.8);
  --c-radial-inner: #ffd215;
  --c-radial-outer: #fff172;
  --c-color: #fff;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  outline: none;
  position: relative;
  cursor: pointer;
  border: none;
  display: inline-block;
  border-radius: 24px;
  padding: 0;
  margin: 0;
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--c-color);
  background: radial-gradient(circle, var(--c-radial-inner), var(--c-radial-outer) 80%);
  box-shadow: 0 0 14px var(--c-shadow);
  text-decoration: none;
}

.uiverse:before {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: 24px;
  box-shadow: inset 0 3px 12px var(--c-shadow-inset-top), inset 0 -3px 4px var(--c-shadow-inset-bottom);
}

.uiverse .wrapper {
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  overflow: hidden;
  border-radius: 24px;
  min-width: 170px;
  padding: 12px 20px;
  display: inline-block;
}

.uiverse .wrapper span {
  display: inline-block;
  position: relative;
  z-index: 1;
}

.uiverse:hover { --duration: 1400ms; }

.uiverse .wrapper .circle {
  position: absolute;
  left: 0; top: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  filter: blur(var(--blur, 8px));
  background: var(--background, transparent);
  transform: translate(var(--x, 0), var(--y, 0)) translateZ(0);
  animation: var(--animation, none) var(--duration) var(--easing) infinite;
}

.uiverse .wrapper .circle.circle-1,
.uiverse .wrapper .circle.circle-9,
.uiverse .wrapper .circle.circle-10 { --background: var(--c-color-4); }
.uiverse .wrapper .circle.circle-3,
.uiverse .wrapper .circle.circle-4 { --background: var(--c-color-2); --blur: 14px; }
.uiverse .wrapper .circle.circle-5,
.uiverse .wrapper .circle.circle-6 { --background: var(--c-color-3); --blur: 16px; }
.uiverse .wrapper .circle.circle-2,
.uiverse .wrapper .circle.circle-7,
.uiverse .wrapper .circle.circle-8,
.uiverse .wrapper .circle.circle-11,
.uiverse .wrapper .circle.circle-12 { --background: var(--c-color-1); --blur: 12px; }

@keyframes circle-1 { 33%{transform:translate(0,16px) translateZ(0);} 66%{transform:translate(12px,64px) translateZ(0);} }
@keyframes circle-2 { 33%{transform:translate(80px,-10px) translateZ(0);} 66%{transform:translate(72px,-48px) translateZ(0);} }
@keyframes circle-3 { 33%{transform:translate(20px,12px) translateZ(0);} 66%{transform:translate(12px,4px) translateZ(0);} }
@keyframes circle-4 { 33%{transform:translate(76px,-12px) translateZ(0);} 66%{transform:translate(112px,-8px) translateZ(0);} }
@keyframes circle-5 { 33%{transform:translate(84px,28px) translateZ(0);} 66%{transform:translate(40px,-32px) translateZ(0);} }
@keyframes circle-6 { 33%{transform:translate(28px,-16px) translateZ(0);} 66%{transform:translate(76px,-56px) translateZ(0);} }
@keyframes circle-7 { 33%{transform:translate(8px,28px) translateZ(0);} 66%{transform:translate(20px,-60px) translateZ(0);} }
@keyframes circle-8 { 33%{transform:translate(32px,-4px) translateZ(0);} 66%{transform:translate(56px,-20px) translateZ(0);} }
@keyframes circle-9 { 33%{transform:translate(20px,-12px) translateZ(0);} 66%{transform:translate(80px,-8px) translateZ(0);} }
@keyframes circle-10 { 33%{transform:translate(68px,20px) translateZ(0);} 66%{transform:translate(100px,28px) translateZ(0);} }
@keyframes circle-11 { 33%{transform:translate(4px,4px) translateZ(0);} 66%{transform:translate(68px,20px) translateZ(0);} }
@keyframes circle-12 { 33%{transform:translate(56px,0) translateZ(0);} 66%{transform:translate(60px,-32px) translateZ(0);} }

/* Variant overrides: replace yellow parts with green (tools) and blue (oberstufe) */
.uiverse.tools{
  --c-color-1: rgba(40, 200, 90, 0.7);
  --c-color-4: rgba(100, 255, 180, 0.7);
  --c-shadow: rgba(120, 255, 200, 0.4);
  --c-shadow-inset-top: rgba(120, 255, 200, 0.85);
  --c-shadow-inset-bottom: rgba(220, 255, 240, 0.85);
  --c-radial-inner: #4fdc7a;
  --c-radial-outer: #b0f7c8;
}

.uiverse.oberstufe{
  --c-color-1: rgba(40, 120, 255, 0.7);
  --c-color-4: rgba(140, 200, 255, 0.7);
  --c-shadow: rgba(160, 200, 255, 0.5);
  --c-shadow-inset-top: rgba(140, 200, 255, 0.9);
  --c-shadow-inset-bottom: rgba(220, 240, 255, 0.85);
  --c-radial-inner: #4e8dff;
  --c-radial-outer: #a7c8ff;
}



/* === flat style & single-line row for Uiverse buttons === */
.uiverse-row{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:24px;
  flex-wrap:nowrap;
}
@media (max-width: 640px){
  .uiverse-row{ flex-wrap:wrap; }
}
.uiverse{
  box-shadow: none;             /* remove outer depth */
  border: none;
}
.uiverse:before{
  box-shadow: none;             /* remove inner inset depth */
}
/* make both buttons same min width & height feeling */
.uiverse .wrapper{
  min-width: 190px;
  padding: 14px 22px;
}



/* === one-line layout for bottom buttons === */
.uiverse-row.one-line{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:32px;
  flex-wrap: nowrap; /* keep in one line */
  white-space: nowrap;
}
.uipair{ display:inline-flex; align-items:center; gap:12px; }
.uilabel{ font-weight:700; }

/* Remove depth/3D shadows */
.uiverse{ box-shadow: none !important; }
.uiverse:before{ box-shadow: none !important; }



/* === FIX: inline bottom CTA row alignment === */
.uiverse-row.one-line{
  display:flex;
  align-items:center;           /* vertical center */
  justify-content:center;
  gap:40px;                     /* even spacing between pairs */
  flex-wrap: nowrap;            /* keep single line */
  white-space: nowrap;          /* avoid label wrapping */
}
.uipair{
  display:inline-flex;
  align-items:center;
  gap:14px;
  white-space: nowrap;          /* keep label next to button */
  margin: 0; padding: 0;
}
.uilabel{
  font-weight:700;
  display:inline-block;
  line-height: 1;               /* avoid extra vertical space */
  margin: 0; padding: 0;
  transform: translateY(1px);   /* tiny nudge for baseline match */
}
/* Normalize button box so it aligns to text baseline */
.uiverse{
  vertical-align: middle;
  line-height: 0;
}

/* Remove any residual depth/glow */
.uiverse, .uiverse:before{
  box-shadow: none !important;
}

/* Normalize internal wrapper so height is consistent */
.uiverse .wrapper{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width: 170px;
  min-height: 48px;
  padding: 10px 18px;
}



/* === ALIGNMENT FIX v2 === */
.uiverse-row.one-line{ gap:48px; }

.uipair{ gap:10px; }

.uilabel{
  font-weight:700;
  line-height: 1.2;
  display:inline-flex;
  align-items:center; /* center vs button */
}

/* Make the fancy button behave like a normal inline control */
.uiverse{
  display:inline-flex;          /* instead of inline-block */
  align-items:center;
  line-height: 1;               /* restore line-height */
  vertical-align: middle;
}

/* Let inner wrapper size the button without altering baseline */
.uiverse .wrapper{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height: 44px;
  padding: 10px 18px;
}



/* Mundo button variant (keeps default yellows/pinks) */
.uiverse.mundo .wrapper{ min-width: 170px; min-height: 48px; }



/* === HERO overrides === */
.hero .hero-text, .hero .hero-text h1, .hero .hero-text .lead { color: #fff; }
.hero .lead { font-size: 1.25rem; line-height: 1.6; }
.hero .cta-row { flex-wrap: nowrap; }
@media (max-width: 640px){ .hero .cta-row { flex-wrap: wrap; } }

/* === Uiverse base + variants (green tools, blue oberstufe) === */
.uiverse {
  --duration: 7s;
  --easing: linear;
  --c-color-1: rgba(255, 163, 26, 0.7);
  --c-color-2: #1a23ff;
  --c-color-3: #e21bda;
  --c-color-4: rgba(255, 232, 26, 0.7);
  --c-shadow: rgba(0,0,0,0);
  --c-shadow-inset-top: rgba(0,0,0,0);
  --c-shadow-inset-bottom: rgba(0,0,0,0);
  --c-radial-inner: #ffd215;
  --c-radial-outer: #fff172;
  --c-color: #fff;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  position: relative;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  border-radius: 24px;
  padding: 0;
  margin: 0;
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--c-color);
  background: radial-gradient(circle, var(--c-radial-inner), var(--c-radial-outer) 80%);
  box-shadow: none;
  text-decoration: none;
  vertical-align: middle;
}
.uiverse:before { content: none; }

.uiverse .wrapper {
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  overflow: hidden;
  border-radius: 24px;
  min-width: 170px;
  min-height: 48px;
  padding: 10px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.uiverse:hover { --duration: 1400ms; }

.uiverse .wrapper .circle {
  position: absolute; left: 0; top: 0;
  width: 40px; height: 40px; border-radius: 50%;
  filter: blur(var(--blur, 8px));
  background: var(--background, transparent);
  transform: translate(var(--x, 0), var(--y, 0)) translateZ(0);
  animation: var(--animation, none) var(--duration) var(--easing) infinite;
}

.uiverse .wrapper .circle.circle-1,
.uiverse .wrapper .circle.circle-9,
.uiverse .wrapper .circle.circle-10 { --background: var(--c-color-4); }
.uiverse .wrapper .circle.circle-3,
.uiverse .wrapper .circle.circle-4 { --background: var(--c-color-2); --blur: 14px; }
.uiverse .wrapper .circle.circle-5,
.uiverse .wrapper .circle.circle-6 { --background: var(--c-color-3); --blur: 16px; }
.uiverse .wrapper .circle.circle-2,
.uiverse ..wrapper .circle.circle-7,
.uiverse .wrapper .circle.circle-8,
.uiverse .wrapper .circle.circle-11,
.uiverse .wrapper .circle.circle-12 { --background: var(--c-color-1); --blur: 12px; }

@keyframes circle-1 { 33%{transform:translate(0,16px);} 66%{transform:translate(12px,64px);} }
@keyframes circle-2 { 33%{transform:translate(80px,-10px);} 66%{transform:translate(72px,-48px);} }
@keyframes circle-3 { 33%{transform:translate(20px,12px);} 66%{transform:translate(12px,4px);} }
@keyframes circle-4 { 33%{transform:translate(76px,-12px);} 66%{transform:translate(112px,-8px);} }
@keyframes circle-5 { 33%{transform:translate(84px,28px);} 66%{transform:translate(40px,-32px);} }
@keyframes circle-6 { 33%{transform:translate(28px,-16px);} 66%{transform:translate(76px,-56px);} }
@keyframes circle-7 { 33%{transform:translate(8px,28px);} 66%{transform:translate(20px,-60px);} }
@keyframes circle-8 { 33%{transform:translate(32px,-4px);} 66%{transform:translate(56px,-20px);} }
@keyframes circle-9 { 33%{transform:translate(20px,-12px);} 66%{transform:translate(80px,-8px);} }
@keyframes circle-10 { 33%{transform:translate(68px,20px);} 66%{transform:translate(100px,28px);} }
@keyframes circle-11 { 33%{transform:translate(4px,4px);} 66%{transform:translate(68px,20px);} }
@keyframes circle-12 { 33%{transform:translate(56px,0);} 66%{transform:translate(60px,-32px);} }

/* Color variants */
.uiverse.tools{
  --c-color-1: rgba(40, 200, 90, 0.7);
  --c-color-4: rgba(100, 255, 180, 0.7);
  --c-radial-inner: #4fdc7a;
  --c-radial-outer: #b0f7c8;
}
.uiverse.oberstufe{
  --c-color-1: rgba(40, 120, 255, 0.7);
  --c-color-4: rgba(140, 200, 255, 0.7);
  --c-radial-inner: #4e8dff;
  --c-radial-outer: #a7c8ff;
}
/* Mundo uses default warm gradient */

/* Row: one straight line */
.uiverse-row.one-line{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:48px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.uipair{ display:inline-flex; align-items:center; gap:12px; white-space: nowrap; }
.uilabel{ font-weight:700; line-height:1.2; display:inline-flex; align-items:center; }



/*MARKER: HERO-OVERRIDES*/
.hero .hero-text, .hero .hero-text h1, .hero .hero-text .lead { color: #fff; }
.hero .lead { font-size: 1.25rem; line-height: 1.6; }
.hero .cta-row { flex-wrap: nowrap; }
@media (max-width: 640px){ .hero .cta-row { flex-wrap: wrap; } }



/*MARKER: UIVERSE-BASE*/
.uiverse {
  --duration: 7s;
  --easing: linear;
  --c-color-1: rgba(255, 163, 26, 0.7);
  --c-color-2: #1a23ff;
  --c-color-3: #e21bda;
  --c-color-4: rgba(255, 232, 26, 0.7);
  --c-radial-inner: #ffd215;
  --c-radial-outer: #fff172;
  --c-color: #fff;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  position: relative;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  border-radius: 24px;
  padding: 0;
  margin: 0;
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--c-color);
  background: radial-gradient(circle, var(--c-radial-inner), var(--c-radial-outer) 80%);
  box-shadow: none;
  text-decoration: none;
  vertical-align: middle;
}
.uiverse:before { content: none; }

.uiverse .wrapper {
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  overflow: hidden;
  border-radius: 24px;
  min-width: 170px;
  min-height: 48px;
  padding: 10px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.uiverse .wrapper .circle {
  position: absolute; left: 0; top: 0;
  width: 40px; height: 40px; border-radius: 50%;
  filter: blur(var(--blur, 8px));
  background: var(--background, transparent);
  transform: translate(var(--x, 0), var(--y, 0)) translateZ(0);
  animation: var(--animation, none) var(--duration) var(--easing) infinite;
}

.uiverse-row.one-line{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:48px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.uipair{ display:inline-flex; align-items:center; gap:12px; white-space: nowrap; }
.uilabel{ font-weight:700; line-height:1.2; display:inline-flex; align-items:center; }



/*MARKER: UIVERSE-VARIANTS*/
.uiverse.tools{
  --c-color-1: rgba(40, 200, 90, 0.7);
  --c-color-4: rgba(100, 255, 180, 0.7);
  --c-radial-inner: #4fdc7a;
  --c-radial-outer: #b0f7c8;
}
.uiverse.oberstufe{
  --c-color-1: rgba(40, 120, 255, 0.7);
  --c-color-4: rgba(140, 200, 255, 0.7);
  --c-radial-inner: #4e8dff;
  --c-radial-outer: #a7c8ff;
}
/* Mundo bleibt gelb/pink (Default) */



/* === Override: place titles above the three bottom buttons on main page === */
#more-tools-projects .uiverse-row.one-line{
  align-items: flex-start;     /* top-align row items */
  flex-wrap: wrap;             /* allow wrapping on small screens */
  white-space: normal;         /* allow labels to wrap */
  gap: 24px;
}
#more-tools-projects .uipair{
  display: flex;
  flex-direction: column;      /* label above the button */
  align-items: center;
  gap: 8px;
}
#more-tools-projects .uilabel{
  display: block;
  text-align: center;
  margin-bottom: 6px;
}