/*
 * Design System — extracted from "Design_System Preview v12 - v11 + v10 Zitate.html"
 * Source sections: tokens, typography, buttons, layout, grids, quotes, tiles, text-image, cursor-gallery, smart-grid, tile-flow
 * Loaded in amoe/templates/base.html after custom.css (Nexa @font-face must be defined first).
 * Preview-only helpers (.preview-label, .preview-nav) excluded.
 */

:root{
  --color-black:#000000;--color-white:#ffffff;--color-white-soft:#eeeeee;
  --color-gray-light:#f2f2f2;--color-gray-dark:#4a4a4a;
  --color-purple:#9D0377;--color-gold:#E0BB74;--color-near-black:#333333;
  --color-text:var(--color-black);--color-text-muted:var(--color-gray-dark);
  --font-family:'Nexa',sans-serif;
  --font-weight-regular:450;--font-weight-bold:800;--font-weight-black:950;
  --space-xs:.25rem;--space-sm:.5rem;--space-md:1rem;--space-lg:1.5rem;
  --space-xl:2.5rem;--space-2xl:4rem;
  --section-pad-y:var(--space-2xl);--container-max:1250px;--container-pad:var(--space-xl);
  --radius:4px;--border-color:var(--color-gray-dark);--border-width:1px;
  --btn-border-width:2px;
  --shadow-md:0 4px 16px rgba(0,0,0,.10);--shadow-lg:0 8px 32px rgba(0,0,0,.14);
  --transition-base:.25s ease;--transition-slow:.55s cubic-bezier(.25,.46,.45,.94);
  --z-base:0;--z-raised:10;--z-cursor:9999;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-family);font-weight:var(--font-weight-regular);color:var(--color-text);line-height:1.6;background:#d8d8d8}

h1{font-size:1.575rem;font-weight:var(--font-weight-black);font-style:italic;letter-spacing:.005em;line-height:1.75rem;margin-top:5px;margin-bottom:3px;hyphens:auto}
h2{font-size:1.385rem;font-weight:var(--font-weight-black);font-style:italic;letter-spacing:.005em;line-height:1.62rem;padding-top:12px}
h3{font-size:1.178rem;font-weight:var(--font-weight-black);font-style:italic;letter-spacing:.005em;line-height:1.48rem;padding-top:8px}
h4{font-size:1.575rem;font-weight:var(--font-weight-black);font-style:italic;letter-spacing:.005em;line-height:1.75rem;margin-bottom:3px;color:var(--color-gold)}
h5{font-size:1.28rem;font-weight:var(--font-weight-black);font-style:italic;letter-spacing:.005em;line-height:1.57rem;padding-top:8px}
h6{font-size:1.178rem;font-weight:var(--font-weight-black);font-style:italic;letter-spacing:.005em;line-height:1.48rem;padding-top:8px}
p{font-weight:var(--font-weight-regular);font-style:normal;margin-bottom:.625rem}
b,strong{font-weight:var(--font-weight-bold)}

a{color:var(--color-near-black);text-decoration:none;transition:color var(--transition-base)}
a:hover{color:var(--color-purple)}
.on-purple a{color:var(--color-gold)}
.on-purple a:hover{color:var(--color-white)!important}
.on-dark a{color:var(--color-white-soft)}
.on-dark a:hover{color:var(--color-gold)!important}

.btn{display:inline-block;padding:.5rem 1.35rem;border-width:var(--btn-border-width);border-style:solid;border-radius:var(--radius);font-family:var(--font-family);font-size:.92rem;font-weight:var(--font-weight-bold);font-style:italic;letter-spacing:.04em;text-decoration:none;cursor:pointer;line-height:1.4;white-space:nowrap;transition:border-color var(--transition-base),background var(--transition-base),color var(--transition-base);border-color:var(--color-black);background:transparent;color:var(--color-black)}
.btn:not(.btn--inverse):not(.btn--on-purple):hover{border-color:var(--color-purple)!important;background:var(--color-purple)!important;color:var(--color-gold)!important}
.btn--inverse{border-color:var(--color-white);background:transparent;color:var(--color-white)}
.btn--inverse:hover{border-color:var(--color-gold)!important;background:var(--color-gold)!important;color:var(--color-black)!important}
.on-dark .btn--inverse:hover{color:var(--color-black)!important}
.btn--on-purple{border-color:var(--color-gold);background:transparent;color:var(--color-gold)}
.btn--on-purple:hover{border-color:var(--color-black)!important;background:var(--color-black)!important;color:var(--color-gold)!important}

.container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--container-pad)}
.section{width:100%;padding-block:var(--section-pad-y)}
.section--contained{width:100%;padding-block:var(--section-pad-y)}
.bg-white{background-color:var(--color-white)}
.bg-gray-light{background-color:var(--color-gray-light)}
.bg-gray-dark{background-color:var(--color-gray-dark);color:var(--color-white)}
.bg-black{background-color:var(--color-black);color:var(--color-white)}
.bg-purple{background-color:var(--color-purple);color:var(--color-white)}
.bg-gold{background-color:var(--color-gold);color:var(--color-black)}
.bg-image{background-size:cover;background-position:center;background-repeat:no-repeat;position:relative}
.bg-image--overlay::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.50);z-index:var(--z-base)}
.bg-image--overlay>*{position:relative;z-index:var(--z-raised)}
.bordered{border:var(--border-width) solid var(--border-color);border-radius:var(--radius)}
.bordered--purple{border-color:var(--color-purple)}
.bordered--gold{border-color:var(--color-gold)}

.grid{display:grid;gap:var(--space-lg);width:100%}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--1-2{grid-template-columns:1fr 2fr}
.grid--2-1{grid-template-columns:2fr 1fr}
.grid--2-3{grid-template-columns:2fr 3fr}
.grid--3-2{grid-template-columns:3fr 2fr}
.grid--1-3{grid-template-columns:1fr 3fr}
.grid--3-1{grid-template-columns:3fr 1fr}

.smart-grid{display:grid;gap:var(--space-lg);width:100%}

.text-columns{columns:3;column-gap:var(--space-xl);column-rule:1px solid var(--color-gray-light);text-align:justify;hyphens:auto}
.text-columns h2,.text-columns h3,.text-columns h4,.text-columns h5,.text-columns h6{break-after:avoid-column;margin-bottom:var(--space-md);text-align:left}
.text-columns--2{columns:2}
.text-columns--3{columns:3}
@media(max-width:992px){.text-columns{columns:2}}
@media(max-width:668px){.text-columns{columns:1;column-gap:0;column-rule:none}}

/* ZITAT – Standard (aus v10) */
.quote-block{padding:var(--space-xl) var(--space-2xl);text-align:center;overflow:visible}
.quote-block__text{font-size:clamp(1.1rem,2vw,1.55rem);font-weight:var(--font-weight-black);font-style:italic;line-height:1.35;margin-bottom:var(--space-sm);padding-top:1.8em;position:relative;overflow:visible}
.quote-block__text::before{content:'\201C';position:absolute;left:50%;transform:translateX(-50%);font-size:2.8em;line-height:0.8;font-style:italic;font-weight:var(--font-weight-black);width:100%;opacity:.95;top:0.1em;overflow:visible}
.quote-gold::before{color:var(--color-gold)}
.quote-white::before{color:var(--color-white)}
.quote-gold-dark::before{color:var(--color-gold)}
.quote-block__source{display:block;font-size:.75rem;font-weight:var(--font-weight-regular);font-style:normal;letter-spacing:.1em;text-transform:uppercase;margin-top:var(--space-xs)}

/* ZITAT MIT BILD-AKZENT LINKS (aus v10) */
.quote-with-image-accent{
  display:grid;
  grid-template-columns:100px 1fr;
  gap:var(--space-lg);
  align-items:flex-start;
  padding:var(--space-xl) var(--space-2xl);
  text-align:left;
}
.quote-with-image-accent__img{
  width:100px;
  height:100px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
}
.quote-with-image-accent__content{
  display:flex;
  flex-direction:column;
  gap:var(--space-sm);
}
.quote-with-image-accent .quote-block__text{
  font-size:clamp(1.1rem,2vw,1.55rem);
  padding-top:1.8em;
  margin-bottom:0;
  text-align:left;
}
.quote-with-image-accent .quote-block__text::before{
  left:0;
  transform:none;
  font-size:2.8em;
  top:0.1em;
}
.quote-with-image-accent .quote-block__source{
  margin-top:var(--space-xs);
  text-align:left;
}
@media(max-width:768px){
  .quote-with-image-accent{
    grid-template-columns:1fr;
  }
  .quote-with-image-accent__img{
    width:80px;
    height:80px;
  }
}

/* ZITAT-KARUSSELL – Manuell + Auto-Scroll (aus v10) */
.quote-flow-wrapper{
  position:relative;
  overflow:hidden;
  width:100%;
}
.quote-flow{
  display:flex;
  gap:var(--space-lg);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
  scroll-behavior:smooth;
  padding-inline:var(--container-pad);
  padding-bottom:var(--space-sm);
  -webkit-overflow-scrolling:touch;
}
.quote-flow::-webkit-scrollbar{
  height:6px;
}
.quote-flow::-webkit-scrollbar-track{
  background:transparent;
}
.quote-flow::-webkit-scrollbar-thumb{
  background:var(--color-gray-light);
  border-radius:3px;
}
.quote-flow::-webkit-scrollbar-thumb:hover{
  background:var(--color-gray-dark);
}
.quote-flow__item{
  flex:0 0 auto;
  scroll-snap-align:start;
  width:clamp(380px,45vw,550px);
}
.quote-card{
  background:var(--color-white);
  border:1px solid var(--color-gray-light);
  border-radius:var(--radius);
  padding:var(--space-lg);
  display:flex;
  flex-direction:column;
  gap:var(--space-md);
  height:100%;
  transition:box-shadow var(--transition-base),transform var(--transition-base);
  position:relative;
}
.quote-card:hover{
  box-shadow:var(--shadow-lg);
  transform:translateY(-2px);
}
.quote-card__img{
  width:64px;
  height:64px;
  border-radius:50%;
  object-fit:cover;
}
.quote-card__text{
  font-size:1.2rem;
  font-weight:var(--font-weight-black);
  font-style:italic;
  line-height:1.65;
  color:var(--color-gold);
  padding-top:1.5em;
  position:relative;
  margin-top:0;
}
.quote-card__text::before{
  content:'\201C';
  position:absolute;
  left:0;
  top:0.1em;
  font-size:2.8em;
  line-height:0.8;
  font-weight:var(--font-weight-black);
  width: 100%;
  font-style:italic;
  color:var(--color-gold);
  opacity:0.95;
}
.quote-card__source{
  font-size:0.7rem;
  font-weight:var(--font-weight-regular);
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--color-text-muted);
  margin-top:var(--space-xs);
}

.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}
.tile__body{display:flex;flex-direction:column;padding:var(--space-lg);flex:1}
.tile__body--top-left{justify-content:flex-start;align-items:flex-start;text-align:left}
.tile__body--top-center{justify-content:flex-start;align-items:center;text-align:center}
.tile__body--top-right{justify-content:flex-start;align-items:flex-end;text-align:right}
.tile__body--mid-left{justify-content:center;align-items:flex-start;text-align:left}
.tile__body--mid-center{justify-content:center;align-items:center;text-align:center}
.tile__body--mid-right{justify-content:center;align-items:flex-end;text-align:right}
.tile__body--bot-left{justify-content:flex-end;align-items:flex-start;text-align:left}
.tile__body--bot-center{justify-content:flex-end;align-items:center;text-align:center}
.tile__body--bot-right{justify-content:flex-end;align-items:flex-end;text-align:right}
.text-white{color:var(--color-white)!important}.text-gold{color:var(--color-gold)!important}
.text-purple{color:var(--color-purple)!important}.text-black{color:var(--color-black)!important}
.text-muted{color:var(--color-text-muted)!important}
.mt-sm{margin-top:var(--space-sm)}.mt-md{margin-top:var(--space-md)}.mt-lg{margin-top:var(--space-lg)}
.mb-sm{margin-bottom:var(--space-sm)}.mb-md{margin-bottom:var(--space-md)}.mb-lg{margin-bottom:var(--space-lg)}

.tile{position:relative;overflow:hidden;border-radius:var(--radius);display:flex;flex-direction:column;transition:box-shadow var(--transition-base),transform var(--transition-base)}
.tile--shadow{box-shadow:var(--shadow-md)}
.tile--hoverable:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.tile--bg-image{min-height:280px;background-size:cover;background-position:center}
.tile--bg-image::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.40);z-index:var(--z-base);transition:background var(--transition-base)}
.tile--bg-image:hover::before{background:rgba(0,0,0,.24)}
.tile--bg-image>.tile__body{position:relative;z-index:var(--z-raised);height:100%;color:var(--color-white)}

.text-image{display:grid;gap:var(--space-xl);align-items:center}
.text-image--img-left{grid-template-columns:1fr 1fr}
.text-image--img-right{grid-template-columns:1fr 1fr}
.text-image--img-right .text-image__img{order:2}
.text-image--img-right .text-image__content{order:1}
.text-image--wide-img.text-image--img-left{grid-template-columns:3fr 2fr}
.text-image--wide-img.text-image--img-right{grid-template-columns:2fr 3fr}
.text-image--wide-img.text-image--img-right .text-image__img{order:2}
.text-image--wide-img.text-image--img-right .text-image__content{order:1}
.text-image__img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius);display:block;aspect-ratio:4/3}
.text-image__content{display:flex;flex-direction:column;gap:var(--space-sm)}

.cg{position:relative;width:100%;padding:3rem 0 2rem;background:var(--color-white);user-select:none;-webkit-user-select:none}
.cg__header{text-align:center;margin-bottom:2rem;padding:0 1.5rem}
.cg__cursor{position:fixed;top:0;left:0;width:64px;height:64px;pointer-events:none;z-index:var(--z-cursor);opacity:0;transform:translate(-50%,-50%);transition:opacity .18s ease;will-change:transform}
.cg__cursor.is-visible{opacity:1}
.cg__cursor-svg{width:100%;height:100%;filter:drop-shadow(0 2px 10px rgba(0,0,0,.25))}
.cg__cursor.is-left .cg__cursor-svg{transform:scaleX(-1)}
.cg__viewport{width:100%;overflow:hidden;cursor:none}
.cg__track{display:flex;gap:1rem;padding:0 5%;transition:transform var(--transition-slow);will-change:transform}
.cg__slide{position:relative;flex:0 0 auto;width:clamp(260px,42vw,580px);border-radius:var(--radius);overflow:hidden;aspect-ratio:3/2}
.cg__img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;transition:transform .5s ease}
.cg__slide:hover .cg__img{transform:scale(1.04)}
.cg__caption{position:absolute;bottom:0;left:0;right:0;margin:0;padding:.6rem 1rem;background:linear-gradient(transparent,rgba(0,0,0,.55));color:var(--color-white);font-size:.85rem}
.cg__dots{display:flex;justify-content:center;gap:6px;margin-top:1.5rem}
.cg__dot{width:8px;height:8px;border-radius:50%;background:var(--color-gray-dark);border:none;padding:0;cursor:pointer;transition:background .2s,transform .2s}
.cg__dot.is-active{background:var(--color-black);transform:scale(1.35)}

.tile-flow{display:flex;gap:var(--space-md);overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-inline:var(--container-pad);padding-bottom:var(--space-sm)}
.tile-flow::-webkit-scrollbar{display:none}
.tile-flow__item{flex:0 0 auto;scroll-snap-align:start;width:clamp(220px,30vw,400px)}


@media(max-width:1250px){:root{--container-pad:var(--space-lg)}}
@media(max-width:992px){.grid--4{grid-template-columns:repeat(2,1fr)}.grid--3{grid-template-columns:repeat(2,1fr)}.grid--1-2,.grid--2-1,.grid--2-3,.grid--3-2{grid-template-columns:1fr}}
@media(max-width:885px){:root{--section-pad-y:var(--space-xl);--container-pad:var(--space-lg)}.grid--1-3,.grid--3-1{grid-template-columns:1fr}}
@media(max-width:768px){:root{--container-pad:var(--space-md)}.grid--2{grid-template-columns:1fr}.text-image--img-left,.text-image--img-right,.text-image--wide-img.text-image--img-left,.text-image--wide-img.text-image--img-right{grid-template-columns:1fr}.text-image--img-right .text-image__img,.text-image--wide-img.text-image--img-right .text-image__img{order:-1}.text-image--img-right .text-image__content,.text-image--wide-img.text-image--img-right .text-image__content{order:0}}
@media(max-width:668px){:root{--container-pad:var(--space-md)}.quote-block{padding:var(--space-lg) var(--space-md)}}
/* Smartphone portrait: equal-column tile grids collapse to one box per row */
@media(max-width:480px){.grid--3,.grid--4{grid-template-columns:1fr}}
@media(max-width:400px){:root{--section-pad-y:var(--space-lg);--container-pad:var(--space-sm)}}
@media(max-width:640px){.cg__viewport{cursor:default;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.cg__viewport::-webkit-scrollbar{display:none}.cg__track{transition:none;padding:0 5%}.cg__slide{width:80vw;scroll-snap-align:start}.cg__cursor{display:none}}


/* Viewport full-bleed: spans the full window width regardless of parent padding/width */
.amoe-full-bleed{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.amoe-full-bleed__inner{padding-inline:20px}

/* On dark sections, render default buttons in inverse style (white outline) */
.on-dark .btn:not(.btn--inverse):not(.btn--on-purple){border-color:var(--color-white);color:var(--color-white)}
.on-dark .btn:not(.btn--inverse):not(.btn--on-purple):hover{border-color:var(--color-gold)!important;background:var(--color-gold)!important;color:var(--color-black)!important}

/* === Hero "on top": flush to viewport top + transparent navbar === */
body:has(.sticky-transparent-navbar) .navbar{
    position:fixed;top:0;left:0;right:0;z-index:1000;
    background:transparent;
    padding-top:25px;
    transition:background .3s ease;
}
body:has(.sticky-transparent-navbar) .navbar .nav-link,
body:has(.sticky-transparent-navbar) .navbar .navbar-brand,
body:has(.sticky-transparent-navbar) .navbar .navbar-toggler{color:#fff}
body:has(.sticky-transparent-navbar) .navbar.navbar--scrolled{
    background:rgba(128,128,128,.35);
}
body:has(.sticky-transparent-navbar) .page-content{padding-top:0!important}
body:has(.sticky-transparent-navbar) .page-content > h1{display:none}