/* === CSS: a-page.css [root] === */
/* Fonts: Montserrat (Thin + Regular) */
/* @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;500&display=swap'); */

:root{
	--ink: #121211;
	--muted: #353533;
	--grey: #656563;
	--background: #FDFDFC;
	--shadow: #BFB9B1;
  /* … deine Farben bleiben … */
  --sans: "Montserrat", -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
	
	--radius: 3px;
	--gap: 1rem;
	
  /* Columns: mobil hart auf 2 */
  --cols-mobile: 2;
  --cols-tablet: 3;
  --cols-desktop: 4;
  --cols-wide: 5;
}

*{
	box-sizing: border-box;
	text-wrap: pretty;
	hyphens: auto;
}
html {
  scroll-behavior: smooth;
}

/* Branding / Typo */
body{
	margin: 0 clamp(.5rem, 5vw, 15rem);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.36;
}

.nav .pill, h1, h2, h3, h4, p{
  font-family: var(--sans);
  font-weight: 100;
}
p{
	color: var(--grey);
	font-weight: 400;
}
p.strong {
	color: var(--ink);
}
a{
	text-decoration: none;
	color: var(--ink);
}
td{
	color: var(--grey);
}
.instagram{
	width: 2rem;
	height: 2rem;
	opacity: .6;
}
.youtube{
	width: 100%;
	height: auto;
	aspect-ratio: 16/9;
}

footer a{
	color: var(--shadow);
}

.content{
	max-width: 75ch;
	display: table;
	margin: 0 auto;
}
.content h2{
	padding: 3rem 0;
}
.content h3{
	padding: 2rem 0 0 0;
}
.content p{
	max-width: 75ch;
	
}
.content p.cols{
	column-width: 33ch;
  column-rule: 1px solid var(--shadow);
  column-gap: 1rem;
}

/* Kategorie-Header */
.category{ padding: 4rem 0 1rem; }
.category + .category{ padding-top: 4rem; }
.category-head {
  display: flex;              /* nebeneinander */
  align-items: baseline;      /* gleiche Grundlinie */
  gap: 1rem;                  /* Abstand zwischen Titel & Sub */
}

.category-head h2, h1, h2, h3, h4 {
  margin: 0;
  font-size: 1.65rem;  /* gleiche Größe wie Sub */
  font-weight: 400;                     /* dick/fett */
  letter-spacing: 0.05em;
  color: var(--ink);
}
h1, h2, h3, h4{
	padding: .5rem 0 0 0;
	margin: 0;
}
h4{
	color: var(--shadow);
	font-size: 1.4rem;
}

.category-head .k-sub {
  margin: 0;
  font-size: 1.65rem;  /* exakt gleiche Schriftgröße */
  font-weight: 100;                     /* dünn */
  color: var(--muted);
}

/* Masonry wie gehabt (konstanter X/Y-Gap) */
.masonry{
	margin-top: 2rem;
  column-gap: var(--gap);
  column-count: var(--cols-mobile);
}
@media (min-width: 640px){ .masonry{ column-count: var(--cols-tablet); } }
@media (min-width: 900px){ .masonry{ column-count: var(--cols-desktop); } }
@media (min-width: 1280px){ .masonry{ column-count: var(--cols-wide); } }

.masonry-item{
  display: inline-block;
  width: 100%;
  margin: 0 0 var(--gap);
  border-radius: var(--radius);
  overflow: clip;
  background: var(--paper);
  border: 1px solid rgba(0,0,0,0.06);
  break-inside: avoid;
}
.masonry-item img{
  display: block; width: 100%; height: auto; object-fit: contain; background: var(--paper);
}

/* header / footer */
.logo {
}
.logo img{
	height: 9rem;
}
.nav-warp{
	display: flex; 
	flex-wrap: wrap;
	gap: 0 1rem;
	width: 100%;
	justify-content: space-between;
}
.nav, .sub-nav{
	display: flex; 
	gap: 0 1rem;
	flex-wrap: wrap
}
.site-header a{ 
	font-size: 1rem;
	text-decoration: none;
	color: var(--ink);
}

.site-header{
	height: 14rem;
	background: var(--background);
	margin-bottom: 5rem;
}
.site-header-wrap{
	background: var(--background);
	position: absolute;
	left: 0;
	height: 14rem;
	width: 100%;
	box-shadow: 0 -1rem 2rem 0rem var(--shadow);
}
.header-inner-warp{
	display: flex;
	align-items: center;
  justify-content: center;
  flex-direction: column;
	margin: 0.5rem clamp(.5rem, 5vw, 15rem);
}

footer{
	height: 10rem;
	background: var(--background);
	margin: 0 clamp(.5rem, 5vw, 15rem);
	margin-top: 10rem;
}
.footer-wrap{
	position: absolute; 
	width: 100%;
	left: 0;
	height: 10rem;
	background: var(--background);
	box-shadow: inset 0 1rem 2rem -1rem var(--shadow);
}
.footer-inner-warp{
	margin: 2rem clamp(.5rem, 5vw, 15rem);
	display: flex;
	align-items: center;
  justify-content: center;
  flex-direction: column;
}
.footer-meta-nav{
	display: flex; 
	width: 100%;
	justify-content: space-between;
	gap: 0 1rem;
	flex-wrap: wrap
}
.footer-meta-nav a{	
	text-decoration: none;
	color: var(--ink);
}

/* Grundstil für Links mit Pfeil */
a.arrow-link {
  position: relative;
  text-decoration: none;      /* optional */
  color: inherit;             /* übernimmt Textfarbe */
  padding-right: 1.4em;       /* Platz für den Pfeil */
}

/* Der Pfeil selbst */
a.arrow-link::after {
  content: "→";               /* Unicode-Pfeil */
  position: absolute;
  right: 0;                   /* direkt am rechten Rand */
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9em;           /* leicht kleiner als Text */
  color: currentColor;        /* gleiche Farbe wie Text */
  transition: transform 0.25s ease;
}

/* dezente Bewegung beim Hover */
a.arrow-link:hover::after {
  transform: translate(4px, -50%); /* 4 px nach rechts gleiten */
}

#page {
	min-height: calc(100svh - 39rem);
}

.mobil-nav-wrap{
	display: none;
}

@media (max-width: 640px){ 
	h1, h2, h3, h4, .category-head h2, .category-head .k-sub{
		font-size: 1.2rem;
	}
	.site-header{
		margin-bottom: 0;
	}
}
@media (max-width: 600px){
	.nav-warp{
		justify-content: center;
	}
	.nav{ 
		display: none; 
	}
	.sub-nav a{
		color: var(--shadow);
	}
	.site-header{
		margin-bottom: 0;
	}
	.mobil-nav-wrap{
		display: block;
	}
}
/* === CSS: b-forms.css [root] === */
.form-contact-wrap h2{
	padding: 3rem 0;
}
.form-contact-wrap{
	margin: 0  auto;
  display: table;
  min-width: 45rem;
}
.form-two{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1rem;
	#justify-content: space-between;
}
.form fieldset{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	max-width: 22rem;
	border: none;
	padding: 0;
	margin: 0 0 1rem 0;
}
fieldset.width{
	width: 100%;
	max-width: 45rem;
}
input, textarea{
	-webkit-appearance: none;
  appearance: none;
	padding: 0.5rem 1rem;
	width: 100%;
	max-width: 13rem;
	/* styleing */
	background: var(--background);
	border: 1px dashed #eeeeed;
	border-bottom: 1px solid #999998;
	font-family: var(--sans);
  font-size: 1rem;
  border-radius: var(--radius);
  color: var(--ink, #111);
}
textarea{
	max-width: 36rem;
	min-height: 5rem;
}

.inpextra{
	position: absolute;
	top: -999vh;
	left: -999vw;
}

@media (max-width: 47rem){
	.form-contact-wrap{
		min-width: auto;
	}
}
/* === CSS: c-animation.css [root] === */
/* Masonry-Items bleiben im Layout sichtbar */
.masonry-item { opacity: 1; transform: none; }

/* Bilder starten unsichtbar, Box behält Platz */
.masonry-item img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  transform: translateY(12px) scale(0.985);
  will-change: opacity, transform;
  transition:
    opacity 600ms cubic-bezier(.22,.61,.36,1),
    transform 600ms cubic-bezier(.22,.61,.36,1);
  /* Stagger: wird per Inline-Var gesetzt */
  transition-delay: calc(var(--stagger, 0) * 70ms + var(--rand, 0ms));
}

/* Wenn sichtbar: nur das Bild wird eingeblendet */
.masonry-item.is-in img {
  opacity: 1;
  transform: none;
}

/* Barrierefrei: keine Bewegung wenn reduce motion */
@media (prefers-reduced-motion: reduce) {
  .masonry-item img {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

.htmx-indicator {
	display:none;
}

.htmx-request {
  display:block;
}

#loader.htmx-indicator {
	display:none;
}
#loader.htmx-request {
  display:block;
  animation: load 12s linear 1;
}

#loader {
	display:block;
	position: fixed;
	z-index: 99;
	left: 0;
	top: 0;
	margin: 0;
	width: 0;
	background: var(--ink);
	height: 3px;
	/**/
 	opacity: 1; 
 	animation: load 8s linear 1; 
 	/**/
}
@keyframes load {
  0% { width: 0; }
  5% { width: 10; }
  30% { width: 90%; }
  100% { width: 100%; }
}
/* === CSS: d-mobil-nav.css [root] === */
.bignavarea{
	position: fixed;
	left: 0;
	width: 100vw;
	height: 100vh;
	display: none;
}

.mobil-nav-wrap{
	position: absolute;
	right: 0;
	z-index: 5;
}
#meny {
  	position: fixed;
    transition-timing-function: cubic-bezier(10,2,3,1);
    transform: translateY(-50rem);
    top: -2rem;
    left: 0;
    z-index: 0;
    transition: 0.5s;
}
.navigation{
	position: absolute;
	top: 0;
  left: 0;
  background: var(--background);
  width: 100vw;
  padding: 4rem 0 4rem 2rem;
  box-shadow: 0 0rem 3rem 0rem var(--grey);
}
.navigation{
	line-height: 2.5rem;
}
.navigation li{
	list-style: none;
}
.navigation a{
	display: block;
	padding: .5rem;
}

#menyAvPaa {
    display: none;
}

#menyAvPaa:checked ~ #meny, .burger-wrapper ~ #meny{
    transform: translateY(1rem);
}

#menyAvPaa:checked ~ .bignavarea {
  display: block;
}


#burger {
	--burger-size: 1.6rem;
	--bun: calc(var(--burger-size) / 16);
	--offset: calc(var(--burger-size) / 2.15);
	--offset-minus: calc(var(--offset) - var(--offset) * 2);
}

#burger {
    position: absolute;
    cursor: pointer;
    width: var(--burger-size);
    height: var(--burger-size);
    right: 2.5rem;
    top: 2rem;
    display: flex;
    z-index: 2;
    justify-content: space-between;
    flex-direction: column;
    transition: all .3s;
}

#burger > div {
    height: var(--bun);
    border-radius: var(--bun);
    background-color: var(--muted);
    transition: 0.5s;
    z-index: 999;
}

#menyAvPaa:checked ~ #burger > div {
  background-color: var(--muted);
}

#menyAvPaa:checked ~ #burger > div:nth-child(1) {
    transform: translateY(var(--offset)) rotate(45deg);
}
#menyAvPaa:checked ~ #burger > div:nth-child(2) {
    opacity: 0;
}
#menyAvPaa:checked ~ #burger > div:nth-child(3) {
    transform: translateY(var(--offset-minus)) rotate(-45deg);
}

/* === CSS: z-htmx-confirm.css [core] === */
.confirm-modal[hidden]{ display:none; }
  .confirm-modal{ position:fixed; inset:0; z-index:9999; }
  .confirm-modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.5); }
  .confirm-modal__panel{
    position:relative; margin:auto; top:30vh; max-width:520px; width:calc(100% - 2rem);
    background:#111; color:#fff; border-radius:12px; padding:1.25rem; box-shadow:0 10px 40px rgba(0,0,0,.4);
  }
  .confirm-modal__title{ margin:0 0 .5rem; font-size:1.125rem; }
  .confirm-modal__text{ margin:0 0 1rem; opacity:.9; }
  .confirm-modal__actions{ display:flex; gap:.5rem; justify-content:flex-end; }
  .btn{ padding:.6rem .9rem; border-radius:.6rem; border:0; cursor:pointer; }
  .btn--ghost{ background:transparent; color:#fff; outline:1px solid rgba(255,255,255,.25); }
  .btn--danger{ background:#e5484d; color:#fff; }
/* === CSS: z-nsb-box.css [root] === */
/* =======================================================================
   NSB Box – Lightbox / Overlay
   Alle Variablen können später im :root überschrieben werden
   ======================================================================= */
:root {
  /* Overlay & Filter */
  --nsb-bg-overlay:   rgba(40,40,40,0.85);
  --nsb-bg-filter:    blur(4px);

  /* Content Container */
  --nsb-content-size: 90%;
  --nsb-border-type:  none;
  --nsb-border-radius: 5px;
  --nsb-shadow-type:  0 0 40px -10px #101010;

  /* Controls */
  --nsb-close-size:    2.4rem;
  --nsb-close-pos:     2rem;
  --nsb-close-shadow:  0 0 10px 0 #101010;

  --nsb-arrow-size:    2.8rem;
  --nsb-arrow-bg:      rgba(0,0,0,.35);
}

/* ==================== Grundlayout ==================== */
#nsbbox {
  position: fixed;
  inset: 0;
  display: flex;                 /* nur Flex */
  justify-content: center;
  align-items: center;
  z-index: 9999;

  background: var(--nsb-bg-overlay);
  backdrop-filter: var(--nsb-bg-filter);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
#nsbbox.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .3s ease;
}

/* ==================== Media Wrapper ==================== */
/* ==================== Media Wrapper ==================== */
#nsbbox .nsb-media {
  max-width:  var(--nsb-content-size);
  max-height: var(--nsb-content-size);
  border:     var(--nsb-border-type);
  border-radius: var(--nsb-border-radius);
  box-shadow: var(--nsb-shadow-type);
  background: #000;

  /* NEU: echtes Flex-Centering */
  display: flex;
  justify-content: center;
  align-items: center;

  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition: transform .30s cubic-bezier(.22,.61,.36,1),
              opacity  .30s cubic-bezier(.22,.61,.36,1);
  will-change: transform, opacity;
}
#nsbbox.open .nsb-media {
  opacity: 1;
  transform: none;
}
#nsbbox.fade-out .nsb-media {
  opacity: 0;
  transform: translateX(var(--dir, 0));
}

/* ==================== Media Content ==================== */
#nsbbox .nsb-media > img,
#nsbbox .nsb-media > iframe {
  display: block;
  /* Neu: Bild streng auf Viewport begrenzen */
  max-width:  90vw;   /* statt 80vw – mehr Platz, aber nicht zu nah an Pfeilen */
  max-height: 90vh;
  margin: auto;       /* sichert horizontales + vertikales Zentrieren */
  border-radius: inherit;
  border: none;
  object-fit: contain;
}

/* ==================== Caption ==================== */
#nsbbox .nsb-caption {
  color: #fff;
  text-align: center;
  margin-top: 1rem;
  font-size: 1rem;
  max-width: 90%;
}

/* ==================== Buttons ==================== */
#nsbbox button {
  position: absolute;
  border: none;
  background: var(--nsb-arrow-bg);
  color: #fff;
  cursor: pointer;
  user-select: none;
  border-radius: 50%;
  box-shadow: var(--nsb-close-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
}

#nsbbox .nsb-close {
  top: var(--nsb-close-pos);
  right: var(--nsb-close-pos);
  width: var(--nsb-close-size);
  height: var(--nsb-close-size);
  font-size: calc(var(--nsb-close-size) * 0.6);
}

#nsbbox .nsb-prev,
#nsbbox .nsb-next {
  top: 50%;
  transform: translateY(-50%);
  width: var(--nsb-arrow-size);
  height: var(--nsb-arrow-size);
  font-size: calc(var(--nsb-arrow-size) * 0.6);
}
#nsbbox .nsb-prev { left:  clamp(1rem, 3vw, 3rem); }
#nsbbox .nsb-next { right: clamp(1rem, 3vw, 3rem); }

@media (prefers-reduced-motion: reduce) {
  #nsbbox,
  #nsbbox .nsb-media {
    transition: none !important;
  }
}