/* * {
  outline: 1px solid red;
} */
.aa-overflow-scroll-x { overflow-x: auto; }
.aa-dot { background-image: url(../img/grafics/dot.webp); background-size: 21px 21px; }
/* @media (min-width: 1024px ) { .aa-dot { outline: dashed 2px rgba(var(--fcolor), var(--alpha, 0.5)); outline-offset: -8px; }
} */ 
/* logo */
.aa-logo { height: 60px; }
/* headlines */
/* .aa-big-font-container { container-type: inline-size; } */
.aa-big-size-font__item { font-size:  clamp(1rem, 15vw, 20rem); white-space: nowrap; line-height: 1; }
@media (min-width: 1024px) { .aa-big-size-font__item { font-size:  clamp(1rem, 8.4vw, 10rem); white-space: nowrap; line-height: 1; } }
.aa-mauto { width: max-content; margin: auto; }
/* _layout___________________________ */
/* ---theatre---- */
.layout--theatre > .aa-header { grid-column: 1/5; grid-row: 1/2; }
.layout--theatre > .aa-nav { grid-column: 1/2; grid-row: 2/4; }
.layout--theatre > .aa-main { grid-column: 2/4; grid-row: 2/3; }
.layout--theatre > .aa-aside { grid-column: 4/5; grid-row: 2/4; }
.layout--theatre > .aa-footer { grid-column: 2/4; grid-row: 3/4; }
/* ---shelve--- */
.layout--shelve > .aa-header { grid-column: 1/3; grid-row: 1/2; }
.layout--shelve > .aa-nav { grid-column: 3/4; grid-row: 1/2; }
.layout--shelve > .aa-main { grid-column: 1/3; grid-row: 2/3; }
.layout--shelve > .aa-aside { grid-column: 3/4; grid-row: 2/3; }
.layout--shelve > .aa-footer { grid-column: 1/4; grid-row: 3/4; }
/* ---brick--- */
.layout--brick > .aa-header { grid-column: 1/3; grid-row: 1/2; }
.layout--brick > .aa-nav { grid-column: 3/4; grid-row: 1/2; height: auto; }
.layout--brick > .aa-main { grid-column: 2/4; grid-row: 2/3; }
.layout--brick > .aa-aside { grid-column: 1/2; grid-row: 2/3; }
.layout--brick > .aa-footer { grid-column: 1/4; grid-row: 3/4; }
/* ---spin--- */
.layout--spin > .aa-header { grid-column: 2/5; grid-row: 1/2; }
.layout--spin > .aa-nav { grid-column: 1/2; grid-row: 1/3; }
.layout--spin > .aa-main { grid-column: 2/4; grid-row: 2/3; }
.layout--spin > .aa-aside { grid-column: 4/5; grid-row: 2/4; }
.layout--spin > .aa-footer { grid-column: 1/4; grid-row: 3/4; }
/* _colors_________________________________________ */
.aa-color-prew-wrapper { height: 100px; }
.aa-color-prew { width: 100%; height: 100%; }
.aa-neutral-field { width: 6.667%; }
/* _icons_________________________________________ */
.aa-icon-size { width: 64px; height: 64px; }
.aa-float { float: left; }
/* _allgemein_________________________________________ */
.aa-top-link--show { position: relative; right: var(--space-n1); z-index: 0; }
/* _beispiele_________________________________________ */
.window-example { position: relative; background-image: url(../img/grafics/background-1.webp); height: 600px; }
.dialog { width: 450px; height: 190px; }
.mini-b { height: 20px; width: 20px; }
.top_bar { height: 30px; width: 100%; }
.top_bar img { width: 18px; }
/* _nav_________________________________________ */
@media (min-width: 1024px) { .aa-top-n12-lg { top: -12px !important; }
.aa-copytop { top: 0px !important; }
}
/* Hamburger */
.aa-nav__cross .aa-nav__slice-2 > span:nth-of-type(1) { display: none; }
.aa-nav__hamburger { display: flex; flex-direction: column; width: var(--hamburger-width); height: var(--hamburger-height); justify-content: center; align-items: var(--hamburger-X-position); }
.aa-nav__hamburger:hover,
.aa-nav__hamburger:active,
.aa-nav__hamburger:focus { cursor: pointer; }
/* slices-1 */
.aa-nav__slice-1 { width: var(--slice-1-width); height: var(--slice-1-height); margin: var(--slice-1-margin); border-radius: 15px; transition: all 150ms ease-in-out; background-color: var(--nav-hamburger-color); }
/* slices-2 */
.aa-nav__slice-2 { width: var(--slice-2-width); height: var(--slice-2-height); margin: var(--slice-2-margin); transition: all 150ms ease-in-out; background-color: var(--nav-hamburger-color); }
/* slices-3 */
.aa-nav__slice-3 { width: var(--slice-3-width); height: var(--slice-3-height); margin: var(--slice-3-margin); border-radius: 50%; transition: all 150ms ease-in-out; background-color: var(--nav-hamburger-color); }
/* slices-4 */
.aa-nav__slice-4 { width: var(--slice-4-width); height: var(--slice-4-height); margin: var(--slice-4-margin); transition: all 150ms ease-in-out; background-color: var(--nav-hamburger-color); }
/* cross-1 */
.aa-nav__cross .aa-nav__slice-1:nth-of-type(1) { transform-origin: left; transform: rotate(45deg); }
.aa-nav__cross .aa-nav__slice-1:nth-of-type(2) { opacity: 0; }
.aa-nav__cross .aa-nav__slice-1:nth-of-type(3) { transform-origin: left; transform: rotate(-45deg); }
/* cross-2 */
.aa-nav__cross .aa-nav__slice-2:nth-of-type(1) { transform-origin: left; transform: scaleX(0.53); }
.aa-nav__cross .aa-nav__slice-2:nth-of-type(2) { transform-origin: right; transform: scaleX(0.53); }
/* cross-3 */
.aa-nav__cross .aa-nav__slice-3:nth-of-type(1) { transform-origin: center; transform: scaleX(6); border-radius: 0; }
.aa-nav__cross .aa-nav__slice-3:nth-of-type(2) { transform-origin: center; transform: scaleX(6); border-radius: 0; }
.aa-nav__cross .aa-nav__slice-3:nth-of-type(3) { transform-origin: center; transform: scaleX(6); border-radius: 0; }
/* cross-4 */
.aa-nav__cross .aa-nav__slice-4:nth-of-type(1) { transform-origin: right; transform: scaleX(1.1); }
.aa-nav__cross .aa-nav__slice-4:nth-of-type(2) { transform-origin: right; transform: scaleX(0.76); }
.aa-nav__cross .aa-nav__slice-4:nth-of-type(3) { transform-origin: right; transform: scaleX(0.43); }
/* _aside_________________________________________ */
.aa-beispiel-add { height: 400px; }
.aa-del-height { text-decoration-thickness: 3px; }
/* Search */
.search__button { height: 55px !important; }
.search label { height: 55px !important; }
@media (min-width: 1024px) { .search__button { height: 110px !important; }
.search label { height: 80px !important; }
}
.aa-searchwidth-lg { max-width: 184px; }
/* shadow-beispiel */
.aa-shadow-beispiel { width: 100px; height: 50px; }
.aa-text-shadow-beispiel { width: 200px; height: 80px; }
/* copy-bereich */
.aa-transformCopy { top: -25px; }
.aa-copytop { top: 110px; }
.aa-codeHeight { max-height: 600px; }
/* grid */
.aa-subgrid-item-1 { width: 30px; height: 50px; }
.aa-subgrid-item-2 { width: 90px; height: 50px; }
#subgrid-figure img { width: 200px; }
#subgrid-figure .grid--column-subgrid-4 > div,
#subgrid-figure .grid--row-subgrid-3 > div { outline: solid 1px rgba(var(--highlight), var(--alpha, 1)); }
/* Aqua-Button */
#aquaButton .btn::before { content: ""; position: absolute; top: 2px; left: 10px; right: 10px; height: 40%; border-radius: 25px 25px 50% 50%; background: linear-gradient(to bottom, #ffffffbb 0%, #ffffff31 100%); pointer-events: none; z-index: 3; }
#aquaButton .btn::after { content: ""; position: absolute; bottom: 1px; left: 8px; right: 8px; height: 100%; background: radial-gradient(
ellipse at 50% 95%,
#bdf2ff8c 10%,
#95eaff73 30%,
transparent 70%
); pointer-events: none; z-index: 1; }
#aquaButton .btn { box-shadow:
inset 0px 2px 6px 4px rgba(var(--fff), var(--alpha, 0.4)),
inset 0px 2px 4px 0px #dd26dd2a; background: linear-gradient(
180deg,
#01316ed8 0%,
#0e376dbd 30%,
#2a64afb0 60%,
#3470c0b0 80%,
#3e7ed1b0 100%
); z-index: 1; }
#aquaButton span { position: relative; color: rgba(var(--000), var(--alpha, 0.8)); z-index: 2; text-shadow: 3px 5px 4px rgba(var(--neutral-1500), var(--alpha, 0.46)); font-family:
"Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
"Lucida Sans Unicode", Geneva, Verdana, sans-serif; }
#aquaButton { box-shadow:
0px 9px 20px #9fd0f8b4,
0px 15px 15px #2c597088; }
/* Dialoge */
.error-dialog { max-width: 350px; }
.error-dialog::backdrop { background: rgb(0 0 0 / 0.5); }
/* figure */
.aa-figure { position: relative; }
.aa-figcaption { position: absolute; top: 0; width: 100%; text-align: center; padding: var(--space-1); background-color: rgba(var(--highlight),var(--alpha,1)); color: rgba(var(--fcolor-static-invert),var(--alpha,1)); font-size: var(--font-size-2); transform: scaleY(1); transition: all 150ms ease-in-out; }
.aa-figure:hover .aa-figcaption { transform: scaleY(0); }