/* =========================
   FONTS
   ========================= */
/*@font-face {font-family: Trebuchet; src: url("fonts/trebuc.ttf");}
@font-face {font-family: Trebuchet; font-style:italic; src: url("fonts/trebucit.ttf");}
@font-face {font-family: Trebuchet; font-weight:bold; src: url("fonts/trebucbd.ttf");}
@font-face {font-family: Trebuchet; font-weight:bold; font-style:italic; src: url("fonts/trebucbi.ttf");}*/
@font-face{
  font-family: 'FontAwesome';
  src: url('/fonts/fa-solid-900.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FontAwesomeRegular';
  src: url('/fonts/fa-regular-400.woff2') format('woff2');
  font-weight: 400;
}

/* =========================
   DESIGN TOKENS
   ========================= */
:root{
  --max-width: 75rem;      /* 75rem = 1200px bei 16px Root */
  --space-1: .5rem;
  --space-2: .75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;

  --bg: #FFFFFF;           /* FIX: war #FFFFF */
  --fg: #111111;
  --muted: #666666;

  --color1: #045c8e;
  --color2: #f39200;
  --color3: #444951;/*#e5ffff;*/

  --header-min-height: 60px;
  --radius: 0px;

  /* Form helpers */
  --form-border: #ccc;
  --form-focus: rgba(0,129,199,0.20);
  --btn-bg: var(--color1);
  --btn-bg-hover: var(--color2);
  
  /* Surfaces / Lines */
  --surface: #ffffff;
  --surface-2: #FAFAF8;     /* Header/Footer-Hintergrund */
  --surface-3: #f1f1f1;     /* Modal-Footer */
  --border: rgba(0,0,0,.05);
  --line: rgba(0,0,0,.12);

  /* Shadows */
  --shadow-1: 0 0 8px rgba(0,0,0,0.3);
  --shadow-2: 0 0 6px rgba(0,0,0,0.25);
  --shadow-card: 5px 5px 30px rgba(0,0,0,0.3);
  --shadow-menu: 0 .25rem .75rem rgba(0,0,0,.25);

  /* Text & Controls */
  --text-2: #555;
  --overlay: rgba(0,0,0,0.5);

  /* Slider / Gallery controls */
  --control-bg: rgba(0,0,0,0.4);
  --control-bg-hover: rgba(0,0,0,0.7);
  --control-bg-strong: rgba(0,0,0,0.45);
  
}

/* =========================
   BASE / RESET
   ========================= */
*{box-sizing:border-box;}
html{font-size:16px;scroll-behavior:smooth;}
body{margin:0;}

body{font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--fg);background:var(--bg);font-size:1rem;line-height:1.5;}
p{margin:0;hyphens:auto;}
h1,h2,h3,h4,h5,h6{margin:0 0 .5rem;color:var(--color1);hyphens:auto;font-weight:600;line-height:1.3;}

h1{font-size:1.25rem;}
h2{font-size:1.05rem;}
h3{font-size:.95rem;}
h4{font-size:.9rem;font-style:italic;}
h5{font-size:.85rem;}
h6{font-size:.8rem;}

a{color:var(--color1);text-decoration:none;}
a:hover,a:focus{text-decoration:underline;}

td{vertical-align:top;}
a img{padding-right:.3em;}
iframe{border:none;}

.container,
:where(main, body > footer) > div:first-child {max-width:var(--max-width);margin-inline:auto;padding-inline:var(--space-3);box-sizing:border-box;}

/* =========================
   LAYOUT: HEADER (sticky + shrink)
   ========================= */
#head-shell{position: sticky;top: 0;z-index: 999;background: var(--surface-2);}
#head-shell > header{background:#FAFAF8;box-shadow: var(--shadow-1);height: clamp(var(--header-min-height), 12vw, 200px);padding: .5rem 1.5rem;display:flex;align-items:center;justify-content:center;text-align:center;position: relative;font-size: clamp(.75rem, 2.5cqi, 1rem);color:var(--color1);container-type:inline-size;container-name:head;transition: height .25s ease, box-shadow .25s ease;}
#head-shell > header h1{margin:0;font-size: clamp(1.3rem, 6cqi, 3.6rem);transition: font-size .25s ease;font-weight:610;}
#head-shell.compact header{height: var(--header-min-height);box-shadow: var(--shadow-2);}
#head-shell.compact header h1{font-size: clamp(1rem, 2.5cqi, 1.6rem);}
/* Burger-Menü (Header) */
#head-shell > header .menu{position:absolute;left:1.5rem;top:50%;transform:translateY(-50%);cursor:pointer;}
#head-shell > header .menu::after{font: 30px 'FontAwesome';content: '\f0c9';color:var(--color1);font-weight:900;}
/* Logo */
.logo{position:absolute;right:1.5rem;bottom:15%;height:70%;aspect-ratio:179 / 125;display:inline-block;background:url('../images/logo.png') no-repeat center;background-size:contain;transition: bottom .25s ease, height .25s ease;}
#head-shell.compact .logo{bottom:4px;height:60%;}

/* Kontakt / Telefon */
.contact{position:absolute;right:5.5rem;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:.35rem;font-size:0;color:transparent;white-space:nowrap;text-decoration:none;}
.contact::before{content:'\f098';font: 400 26px/1em 'FontAwesome';color:var(--color1);font-weight:900; }
#head-shell.compact .contact{top:50%;transform:translateY(-50%);}
@container head (min-inline-size: 500px){
  .contact{font-size:inherit;color:inherit;}
}

/* =========================
   LAYOUT: MAIN
   ========================= */
main{padding-block: var(--space-4);}
main .container > * + *,main > div:first-child > * + *{margin-top: var(--space-4);}

main > h2{background-color: var(--color2);color: #fff;padding: .25rem .5rem;}

/* =========================
   NAVIGATION (Main menu)
   ========================= */
nav{background: var(--color1);border-bottom: 1px solid var(--border);}
nav .container{padding-block: .4rem;}
nav ul{margin:0;padding:0;list-style:none;}
nav > .container > ul{display:flex;gap: var(--space-2);align-items:center;justify-content:center;}
nav li{position:relative;}
nav a{display:block;color:#fff;padding: .4rem .75rem;white-space:nowrap;text-decoration:none;}
nav a:hover, nav a:focus{background: var(--color2);text-decoration:none;}

/* Submenü (Desktop) */
nav li > ul{position:absolute;left:0;top:100%;background: var(--color1);padding: .4rem 0;min-width: 10rem;box-shadow:var(--shadow-menu);display:none;opacity:0;visibility:hidden;transform: translateY(5px);transition: opacity .15s ease, transform .15s ease, visibility .15s;z-index: 1000;}
nav li > ul a{padding: .35rem .9rem;}
nav li:hover > ul,nav li:focus-within > ul{display:block;opacity:1;visibility:visible;transform: translateY(0);}

@media (max-width: 48rem){
  nav > .container > ul{overflow-x:auto;}
}

/* Trigger-Checkbox (Burger) */
nav .trigger{position:absolute;opacity:0;pointer-events:none;}

/* Mobile Menü */
@media (max-width: 800px){
  header .menu{display:inline-block;}
  nav > .container > ul{display:none;flex-direction: column;align-items: flex-start;gap: 0;padding-block: .5rem;}
  nav .trigger:checked + ul{display:flex;}
  nav a{border-radius: 0;padding: .5rem .75rem;width: 100%;}
  /* Submenüs mobil: im Flow, eingerückt */
  /* Submenüs im mobilen Modus: standardmäßig zu */
  nav li > ul{display: none;position: static;margin-top: 0;background: rgba(0,0,0,0.08);border-radius: 0;padding: 0;box-shadow: none;opacity: 1;visibility: visible;transform: none;  }
  nav li > ul a{padding-left: 1.5rem;font-size: 0.95em;}
    /* geöffnet */
  nav li[aria-expanded="true"] > ul{display:block;}
  nav > .container > ul > li:has(> ul) > a::after{content: "\25BC";float: right;opacity: .9;}
  nav > .container > ul > li[aria-expanded="true"] > a::after{content:"" /*"\25B2"*/;}*/
}

@media (min-width: 801px){
  header .menu{display:none;}
}

/* Icon vor Login-Link im Menü */
#openModal::before,#openModal1::before{content: '\f007';font-family: 'FontAwesome';font-weight:900;padding-right: .5em;color:#fff;}

/* =========================
   MODAL (Login)
   ========================= */
.modal{display:none;position:fixed;inset:0;z-index:9999;background-color: var(--overlay);overflow:auto;padding:60px 1rem;}
#modal:target{display:block;}
.modal.show{display:block;}
.modal > form{max-width:400px;margin:auto;background:var(--surface);border-radius: var(--radius);border:1px solid #ccc;animation: zoomit .3s ease-out;}
.modal > form > header{text-align:right;padding: .75rem 1rem 0 1rem;}
.modal > form > header a{font-size:2rem;font-weight:bold;color:#333;cursor:pointer;text-decoration:none;line-height:1;}
.modal > form > header a:hover{color: var(--color2);}
.modal > form > main{padding: .5rem 1.5rem 1.5rem;}
.modal > form > main label{display:block;font-weight:bold;margin-top:1rem;}
.modal > form > main input{width:100%;padding:.6rem .75rem;margin-top:.3rem;border:1px solid #ccc;box-sizing:border-box;font: inherit;}
.modal > form > main input[type="checkbox"]{width:auto;margin-right:.5em;vertical-align: middle;}
.modal > form > main label.inline{display:inline-block;}
.modal > form > main button[type="submit"]{margin-top:1.5rem;width:100%;background: var(--color1);color:#fff;padding:.75rem;border:none;font-weight:bold;cursor:pointer;}
.modal > form > main button[type="submit"]:hover{background: var(--color2);}
.modal > form > footer{padding: 1rem 1.5rem;background-color:#f1f1f1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;}
.modal > form > footer button[type="button"]{background-color:#aaa;color:#fff;border:none;padding:.6rem 1rem;cursor:pointer;}
.modal > form > footer button[type="button"]:hover{background-color:#888;}
.modal > form > footer a{color: var(--color1);text-decoration:none;align-self:center;}
.modal > form > footer a:hover{text-decoration:underline;}

@media (max-width: 500px){
  .modal > form > footer{flex-direction:column;align-items:stretch;}
}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip: rect(0,0,0,0);white-space:nowrap;border:0;}

@keyframes zoomit{
  from{transform: scale(.9);opacity:0;}
  to{transform: scale(1);opacity:1;}
}

/* =========================
   HERO SLIDER
   ========================= */
.hero-slider{position: relative;overflow: hidden;max-width: var(--max-width);margin-inline: auto;margin-block: var(--space-3);border-radius: var(--radius);height: clamp(260px, 45vw, 520px);background:#000;}
/* Liste neutralisieren */
.hero-slider > [data-slides]{position: relative;width: 100%;height: 100%;margin: 0;padding: 0;list-style: none;}
/* Slides übereinander */
.hero-slider [data-slide]{
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease;
  backface-visibility: hidden;
  overflow: hidden;
}

.hero-slider [data-slide]::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(
      ellipse at center,
      rgba(0,0,0,0) 35%,
      rgba(0,0,0,.10) 65%,
      rgba(0,0,0,.28) 100%
    ),
    linear-gradient(
      to top,
      rgba(0,0,0,.30),
      rgba(0,0,0,.10) 38%,
      rgba(0,0,0,0) 70%
    );
}

/*Ganzes Bild etwas abdunkeln*/
/*.hero-slider [data-slide]::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.35),
    rgba(0,0,0,.15),
    rgba(0,0,0,0)
  );
  pointer-events:none;
}*/

.hero-slider [data-slide][data-active]{
  opacity:1;
  pointer-events:auto;
}

/* Bild mit langsamem Zoom-out */
.hero-slider img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  position: relative;
  z-index: 0;
  transform: scale(1);
  transition: transform 6s ease-out .15s;
  will-change: transform;
  backface-visibility: hidden;
}

.hero-slider [data-slide][data-active] img{
  transform: scale(1.10);
}
/* Caption */
.hero-slider figcaption{
  position: absolute;
  left: 5%;
  bottom: 8%;
  min-width: min(20rem, 40%);
  max-width: min(42rem, 72%);
  color: #fff;
  text-shadow: 0 .12rem .5rem rgba(0,0,0,.8);
  padding: .9rem 1.1rem;
  border-radius: var(--radius);
  background: linear-gradient(
    to right,
    rgba(0,0,0,.75),
    rgba(0,0,0,.45) 65%,
    rgba(0,0,0,0)
  );
  z-index: 2;

  opacity: 0;
  transform: translateY(.75rem);
  transition:
    opacity .45s ease .25s,
    transform .45s ease .25s;
  pointer-events: none;
  text-shadow:0 1px 2px rgba(0,0,0,.9),0 3px 8px rgba(0,0,0,.7);
}

.hero-slider [data-slide][data-active] figcaption{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.hero-slider figcaption h2{
	color: #fff;
  margin: 0 0 .35rem;
  line-height: 1.1;
  font-size: clamp(1.25rem, 2.4vw, 2.3rem);
}

.hero-slider figcaption p{
  margin: 0;
  line-height: 1.35;
  font-size: clamp(.95rem, 1.35vw, 1.1rem);
}

.hero-slider figcaption a{
  display: inline-block;
  margin-top: .75rem;
  padding: .5rem 1rem;
  border-radius: 999px;
  background: var(--color2);
  color: #fff;
  text-decoration: none;
  text-shadow: none;
  font-weight: 600;
  font-size: .95rem;
  transition:
    background-color .2s ease,
    color .2s ease,
    transform .2s ease;
}

.hero-slider figcaption a:hover,
.hero-slider figcaption a:focus{
  background: var(--surface);
  color: var(--color1);
  transform: translateY(-1px);
}
/* Steuerung */
.hero-slider > nav{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: none;
}
.hero-slider > nav > button{
  pointer-events: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  min-width: 2.6rem;
  min-height: 2.6rem;
  padding: .2rem .7rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: 1.6rem;
  line-height: 1;
  color: #fff;
  background: var(--control-bg);
  backdrop-filter: blur(2px);
  transition:
    background-color .2s ease,
    transform .2s ease,
    opacity .2s ease;
}
.hero-slider > nav > button[data-prev]{
  left: .75rem;
}

.hero-slider > nav > button[data-next]{
  right: .75rem;
}
.hero-slider > nav > button:hover,
.hero-slider > nav > button:focus{
  background: var(--control-bg-hover);
}
.hero-slider > nav > button:active{
  transform: translateY(-50%) scale(.96);
}

/* Dots */
.hero-slider [data-dots]{
  pointer-events: auto;
  position: absolute;
  left: 50%;
  bottom: .9rem;
  transform: translateX(-50%);
  display: flex;
  gap: .45rem;
  align-items: center;
}

.hero-slider [data-dots] button{
  width: .7rem;
  height: .7rem;
  border: none;
  padding: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  cursor: pointer;
  transition:
    transform .2s ease,
    background-color .2s ease,
    opacity .2s ease;
}

.hero-slider [data-dots] button:hover,
.hero-slider [data-dots] button:focus{
  transform: scale(1.1);
  background: rgba(255,255,255,.8);
}

.hero-slider [data-dots] button[aria-current="true"]{
  background: var(--color2);
  transform: scale(1.15);
}

/* Mobile */
@media (max-width: 768px){
  .hero-slider{
    height: clamp(240px, 58vw, 420px);
  }

  .hero-slider figcaption{
    left: 5%;
    right: 5%;
    bottom: 5%;
    min-width: 0;
    max-width: none;
    padding: .65rem .8rem;
    background: linear-gradient(
      to top,
      rgba(0,0,0,.66),
      rgba(0,0,0,.28)
    );
  }

  .hero-slider figcaption h2{
    font-size: 1.1rem;
  }

  .hero-slider figcaption p{
    font-size: .92rem;
  }

  .hero-slider figcaption a{
    margin-top: .6rem;
    padding: .45rem .9rem;
    font-size: .9rem;
  }

  .hero-slider > nav > button{
    display: none;
  }
  .hero-slider [data-dots]{
    bottom: .7rem;
  }
  .hero-slider [data-dots] button{
   min-width: .8rem;
   min-height: .8rem;
  }
  
}

/* Bewegungen reduzieren */
@media (prefers-reduced-motion: reduce){
  .hero-slider [data-slide]{transition:none;transform:none;}
}

/*

@media (prefers-reduced-motion: reduce){
  .hero-slider [data-slide]{
    transition: none;
  }

  .hero-slider img{
    transition: none;
    transform: none;
    will-change: auto;
  }

  .hero-slider [data-slide][data-active] img{
    transform: none;
  }

  .hero-slider figcaption{
    transition: none;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .hero-slider figcaption a,
  .hero-slider > nav > button,
  .hero-slider [data-dots] button{
    transition: none;
  }
}
*/

/* =========================
   CARDS (Reiseübersicht)
   ========================= */
.rcards{display:grid;grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));;gap:2.5rem;align-items:stretch;justify-content: start;}
.rcards > article{display:flex;flex-direction:column;height:100%;box-shadow: var(--shadow-card);background:var(--surface);max-width:20rem;position:relative;}
.rcards figure{margin:0;aspect-ratio: 4 / 3;overflow:hidden;position:relative;}
.rcards figure > strong{position:absolute;top:.4rem;left:.4rem;padding:.15rem .4rem;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background: rgba(255,0,122,0.9);color:#fff;border-radius:3px;}
.rcards figure img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;}
.rcards > article > header{display:flex;align-items:center;gap:.4rem;padding:.25rem .5rem 0;font-size:.75rem;color:#555;}
.rcards > article > header img{width:20px;height:auto;display:block;}
.rcards > article > header span{line-height:1.3;}
.rcards > article > div{padding: 0 .5em .5em;flex:1;}
.rcards h3{margin:.4rem 0;font-size:1rem;}
.rcards h4{margin:0 0 .35rem;font-size:.8rem;font-style:italic;font-weight:normal;}
.rcards ul{list-style:none;padding:0;margin:0;}
.rcards li{padding-left:16px;position:relative;font-size:.9rem;}
/* Gemeinsame Basis für Haken */
.rcards li::before,
section[aria-label="Hoehepunkte"] li::before{position:absolute;left:0;content:'\f00C';font-family:'FontAwesome';font-weight:900;color: var(--color1);}
section[aria-label="Hoehepunkte"] li::before{top:.1em;font-size:.9em;}
.rcards footer{padding: 0 .5em .5em;margin-top:auto;display:flex;align-items:center;justify-content:flex-end;gap:.5rem;font-size:.85em;}
.rcards .preis{color:#000;white-space:nowrap;}
.rcards .preis span{font-size: clamp(1.2em, 10cqi, 1.7em);font-weight:600;color: var(--color1);margin-left:.5em;}
.rcards footer a{padding:.5em .9em;color: var(--color1);border:2px solid var(--color1);background:none;text-decoration:none;font-weight:bold;white-space:nowrap;box-shadow:0;}
.rcards footer a:hover,.rcards footer a:focus{background: var(--color1);color:#fff;}

.rcards > article > a:first-of-type{position:absolute;inset:0;z-index:3;text-indent:-9999px;}
.rcards > article > *{position:relative;}
/*.rcards figure,.rcards > article > div,.rcards footer{position:relative;z-index:6;}*/
.rcards > article {position: relative;}

.rcards .wishlist-toggle {z-index: 3;}

.rcards > article > footer {position: relative;}

.rcards figure button, .reise > article > header > button {
    appearance: none;
    background: transparent;
    line-height: 1;
	position: absolute;
    top: .4rem;
    right: .4rem;
    padding: .15rem .4rem;
    font-size: 1.5rem;
	z-index:10;
}

.wishlist-toggle::before {
  content: "\f004";
  font-family: 'FontAwesome';
  font-weight: 900;
  display: block;
  color: white; /* nicht aktiv */
  text-shadow: 0 0 2px rgba(0,0,0,.7), 0 0 4px rgba(0,0,0,.5);
}


.wishlist-toggle.active::before {
	font-family: 'FontAwesome';
	font-weight: 900;
	color: red;}

.wishlist-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  text-decoration: none;
}

/* Herz */
.wishlist-link::before {
  content: "\f004";
  font-family: 'FontAwesome';
  font-weight: 900;
  font-style: normal;
  font-size: 1.1rem;
  line-height: 1;
  color: #777;
  transition: transform .2s ease, color .2s ease;
}

/* aktiv (wenn Elemente vorhanden) */
.wishlist-link.has-items::before {color: #d33;transform: scale(1.2);}
.wishlist-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 .3rem;
  border-radius: 999px;
  font-size: .75rem;
  line-height: 1;
  font-weight: 700;
  background: #d33;
  color: #fff;
}

.wishlist-count[hidden] {
  display: none;
}


/* Inhalte normal (keine z-index nötig) */
.rcarousel .rcards figure,.rcarousel .rcards > article > div,.rcarousel .rcards footer{position:relative;z-index:1;}
.rcarousel .rcards {display: grid;grid-auto-flow: column;grid-auto-columns: 270px;/* Breite der Card */gap: 40px;overflow-x: auto;overflow-y: hidden;scroll-snap-type: x proximity;scroll-behavior: smooth;padding: 0 10px 10px;/* bisschen Luft für Scrollbar */-webkit-overflow-scrolling: touch;}
.rcarousel .rcards > article {scroll-snap-align: start;}
/* optional: Scrollbar etwas dezenter */
.rcarousel .rcards::-webkit-scrollbar { height: 10px; }
.rcarousel .rcards::-webkit-scrollbar-thumb { background: rgba(0,0,0,.25); /*border-radius: 999px; */}
.rcarousel { position: relative; }
.rcarousel__btn{position: absolute;top: 50%;transform: translateY(-50%);z-index: 10;width: 44px;height: 44px;/*border-radius: 999px;*/border: 1px solid rgba(0,0,0,.2);background: rgba(255,255,255,.9);cursor: pointer;}
.rcarousel__btn.prev { left: 6px; }
.rcarousel__btn.next { right: 6px; }
.rcarousel .rcards {overflow-x: auto;overflow-y: hidden;/* Firefox */scrollbar-width: none;/* IE/Edge Legacy */-ms-overflow-style: none;}
/* Chrome / Safari / Edge (Blink/WebKit) */
.rcarousel .rcards::-webkit-scrollbar {display: none;}


/* optional: Buttons nur zeigen, wenn Hover (Desktop) */
@media (hover:hover) {
  .rcarousel__btn { opacity: .9; }
  .rcarousel__btn:hover { opacity: 1; }
}


/* ===== Desktop: Slide-up überblendet Footer/Preis ===== */
@media (hover:hover) and (pointer:fine){
  :not(.rcarousel) > .rcards > article{overflow:hidden;} 
/*  :not(.rcarousel) > .rcards > article > a:first-of-type::after{content:"Mehr Infos";position:absolute;left:0; right:0; bottom:0;padding:.9rem 1rem;text-indent:0;text-align:center;font-weight:700;color:#fff;background: var(--color1);transform: translateY(100%);transition: transform .18s ease;}*/
  :not(.rcarousel) > .rcards > article > footer::after{content:"Mehr Infos";position:absolute;left:0; right:0; bottom:0;padding:.9rem 1rem;text-indent:0;text-align:center;font-weight:700;color:#fff;background: var(--color1);transform: translateY(100%);transition: transform .18s ease;pointer-events:none;}
/*  :not(.rcarousel) > .rcards > article:hover > a:first-of-type::after,.rcards > article > a:first-of-type:focus-visible::after{transform: translateY(0);}*/
  :not(.rcarousel) > .rcards > article:hover > footer::after,.rcards > article > footer:focus-visible::after{transform: translateY(0);}

  :not(.rcarousel) > .rcards > article{transition: transform .18s ease;}
  :not(.rcarousel) > .rcards > article:hover{transform: translateY(-2px);}
}

/* Tastatur-Fokus sichtbar */
.rcards > article > a:first-of-type:focus-visible{outline:3px solid var(--color1);outline-offset:3px;}

/* ===== Mobile: Icon-Hinweis (Quadrat + Pfeil) ===== */
@media (max-width:600px){
  .rcards > article{justify-items:center;}
  /* kleines Icon oben rechts im Bild */
  .rcards > article > a:first-of-type::before{content:"";position:absolute;top:.55rem;right:.55rem;width:1.9rem;height:1.9rem;border-radius:.35rem;
    /* Icon als inline-SVG (Quadrat mit Pfeil nach rechts-oben) */
    background:no-repeat center / 1.15rem 1.15rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3z'/%3E%3Cpath fill='%23ffffff' d='M5 5h7v2H7v10h10v-5h2v7H5V5z'/%3E%3C/svg%3E");
    background-color: color-mix(in srgb, var(--color1) 85%, transparent);text-indent:0;}
}


@media (max-width: 600px){
  .rcards:not(.rcarousel) > .rcards {grid-template-columns: 1fr;justify-items: center;}
  .rcards > article{width: min(20rem, 100%);}
}

/* Carousel1*/
.carousel1 {
  --gap: 1rem;
  --min: 260px;   /* minimale Kachelbreite */
  --max: 1fr;     /* maximale Kachelbreite */
  --cols: 1;  
}

.carousel1 > div[data-viewport] {position: relative;overflow: hidden;}
.carousel1 > header {display: flex;justify-content: space-between;align-items: center;}
.carousel1 button {inline-size: 2.5rem;block-size: 2.5rem;/*border-radius: 100%;*/  font-size: 1.5rem;line-height: 1;}


/* Side Buttons (nur bei 1 sichtbar) */
.carousel1 [data-side] {position: absolute;top: 50%;transform: translateY(-50%);display: none;}
.carousel1 [data-side="left"]  { left: .5rem; }
.carousel1 [data-side="right"] { right: .5rem; }
.carousel1.is-single > header nav { display:none; }
.carousel1.is-single [data-side]  { display:block; }
.carousel1 [data-viewport] {overflow: hidden;position: relative;}
/* rcards wird im Slider zum Track */
.carousel1 .rcards{display: grid;grid-auto-flow: column;grid-template-rows: 1fr;gap: var(--gap);grid-auto-columns: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));grid-template-columns: none;transform: translateX(0);transition: transform .25s ease;will-change: transform;justify-content: start;}
/* wichtig gegen “Inhalt drückt Breite” */
.carousel1 .rcards > article{max-width: none;width: 100%;justify-self: stretch;min-width: 0;}
/* unterer Navigator */
/* nur der untere Navigator (damit globales nav Styling nicht greift) */
.carousel1 > nav[aria-label]{background: none;border: 0;}
/* Pill-Leiste */
.carousel1 > nav[aria-label] > span[data-dots]{display:flex;gap:.35rem;align-items:center;justify-content:center;min-height: .75rem;}
/* einzelne Pills */
.carousel1 > nav[aria-label] > span[data-dots] > span{width: 1.6rem;height: .42rem;border-radius: 999px;background: rgba(0,0,0,.20);}
/* sichtbar = dunkel */
.carousel1 > nav[aria-label] > span[data-dots] > span[data-on="1"]{background: var(--color1, rgba(0,0,0,.75));}
.carousel1 > nav[aria-label]{background: none;border: 0;}
.carousel1{--pad: 1rem; /* dein Wunsch-Innenabstand */}
/* Viewport bekommt Luft */
.carousel1 > div[data-viewport]{overflow: hidden;padding-inline: var(--pad);padding-bottom:var(--pad);}
/* Track holt sich die Breite zurück */
.carousel1 .rcards{margin-inline: calc(var(--pad) * -1);}
/*.carousel1 > div[data-viewport]{overflow: hidden;padding-inline: var(--pad);mask-image: linear-gradient(to right,transparent 0,black var(--pad),black calc(100% - var(--pad)),transparent 100%);}*/
.carousel1 > nav[aria-label] > span[data-left],.carousel1 > nav[aria-label] > span[data-right]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path: inset(50%);white-space:nowrap;border:0;}

/* ===== rcards Variante: Poster / Hochformat ===== */

/* ===== Poster-Variante: überschreibt das normale rcards-Card-Layout ===== */

.rcards.rcards--poster > article{position: relative;overflow: hidden;/*border-radius: 9px;*/max-width: none;aspect-ratio: 3 / 4;background: #000;box-shadow:none;}
.rcards.rcards--poster > article > a{position: absolute;inset: 0;z-index: 2;}
.rcards.rcards--poster > article > figure{margin: 0;position: absolute;aspect-ratio:auto;inset: 0;z-index: 0;}
.rcards.rcards--poster > article > figure > img{width: 100% !important;height: 100% !important;}
.rcards.rcards--poster > article::before{content:"";position:absolute;inset:0;z-index: 1;pointer-events: none;background:linear-gradient(  to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.5) 25%,rgba(0,0,0,0) 40%);}
.rcards.rcards--poster > article > div,.rcards.rcards--poster > article > footer{position: absolute;left: 14px;right: 14px;color: #fff;z-index: 4;}
.rcards.rcards--poster > article > div{bottom: 72px;}
.rcards.rcards--poster > article > div > h3{margin: 0;font-size: 1.2rem;line-height: 1.1;font-weight: 600;color:white;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
.rcards.rcards--poster > article > footer{bottom: 12px;margin: 0;z-index: 5;}
.rcards.rcards--poster > article > footer .preis{background: rgba(255,255,255,.92);color: #111;/*border-radius: 999px;*/font-weight: 600;text-align: center;width: 100%;box-shadow: 0 12px 24px rgba(0,0,0,.18);}
.rcards.rcards--poster > article > footer::after{content:none;}
.rcards.rcards--poster > article > footer:empty{display:none;}

/* =========================
   FILTER FORM (Allgemein)
   ========================= */
form{margin:1.5rem 0 2rem;}
fieldset{border: 1px solid var(--color1);/*border-radius: .75rem;*/padding: 1rem 1.25rem .75rem;margin: 0;/*background: var(--color3);*/box-shadow: 0 1px 3px rgba(0,0,0,0.05);}
legend{font-weight:700;font-size:1.05rem;padding:0 .5rem;margin-left:-.25rem;}
label{display:block;}
label span{display:block;margin-bottom:.25rem;font-size:.85rem;color:#555;}
select,button,input{font: inherit;box-sizing:border-box;padding:.4rem .6rem;/*border-radius:.3rem;*/border:1px solid var(--form-border);}
select{background:var(--surface);}
select:focus{border-color: var(--color1);outline:none;box-shadow: 0 0 0 2px var(--form-focus);}
button{background: var(--btn-bg);color:#fff;cursor:pointer;border:none;}
button:hover{background: var(--btn-bg-hover);}
button[type="submit"]{font-weight:600;padding:.45rem 1.4rem;}
.actions{margin-top:.25rem;}

@media (min-width: 640px){
  fieldset{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:flex-end;}
  label,.actions{flex:1 1 200px;}
  .actions button[type="submit"]{width:auto;}
  label select{width:100%;}
}
.rfilter fieldset {border:none;background: var(--color3);}
.rfilter fieldset > legend {/*float:right;*/color:white;background:var(--color3);}
.rfilter label > span{color:white;}

/* =========================
   DETAILSEITE: Layout / Content
   ========================= */
main > div > article{display:grid;gap:1.5rem;grid-template-columns:1fr;grid-template-areas:"header" "intro" "aside" "details";}
main > div > article > header{grid-area:header;margin-bottom:.5rem;}
main > div > article > .maincol{display:contents;}
main > div > article > .maincol > .intro{grid-area:intro;min-width:0;}
main > div > article > .maincol > .details{grid-area:details;min-width:0;}
main > div > article > aside{grid-area:aside;min-width:0;}
main > div > article > aside, main > div > article > header{box-shadow:var(--shadow-card);padding:.3em;position:relative;}
main > div > article > aside{background-color:#E5FFFF;border:2px solid var(--color1);}
main > div > article > aside > header > article{background:white;margin:.3em;padding:.3em;}
aside > header{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-bottom:1em;}
aside > header > a{display:inline-flex;align-items:center;gap:.4rem;padding:.6rem 1rem;border:1px solid #ccc;border-radius:6px;text-decoration:none;font-weight:600;white-space:nowrap;background:var(--color1);color:white;}
aside > header > a:hover, aside > header > a:focus-visible{filter:brightness(.95);outline:none;background:var(--color2);text-decoration:none;}

@media (min-width: 800px){
  main > div > article{grid-template-columns:minmax(0, 2fr) minmax(0, 1fr);grid-template-areas:"header header" "main   aside";align-items:start;}
  main > div > article > .maincol{grid-area:main;display:grid;gap:1.5rem;min-width:0;}
  main > div > article > .maincol > .intro, main > div > article > .maincol > .details{grid-area:auto;min-width:0;}
}

main > div > article > header h2{margin:0 0 .25rem;display:flex;align-items:center;gap:.5rem;}
main > div > article > header h1{margin:0 0 .25rem;}
main > div > article > header h4{margin:0;}

/* =========================
   DETAILSEITE: Bilder/Galerie
   ========================= */
section[aria-label="Bilder"]{margin-bottom:1.5rem;}
section[aria-label="Bilder"] figure{margin:0 0 .75rem;}
section[aria-label="Bilder"] figure img{display:block;width:100%;height:auto;}
section[aria-label="Bilder"] figcaption{margin-top:.25rem;font-size:.85rem;line-height:1.4;}

#gallery-controls{display:flex;align-items:center;gap:.5rem;}
#gallery-controls > button{border:1px solid #ccc;background:#f8f8f8;padding:.25rem .5rem;cursor:pointer;line-height:1;color:black;}
#gallery-controls > button:disabled{opacity:.5;cursor:default;}
#thumbnails{flex:1 1 auto;display:flex;flex-wrap:nowrap;gap:.5rem;overflow-x:auto;padding:.25rem 0;margin:0;scroll-snap-type: x mandatory;-webkit-overflow-scrolling: touch;background:none;overflow:hidden;}
#thumbnails a,#thumbnails a:hover,#thumbnails a:focus{background:transparent;text-decoration:none;}
#thumbnails a{flex:0 0 auto;scroll-snap-align:start;padding:0;}
#thumbnails a[aria-pressed="true"] img{outline: 2px solid #555;outline-offset: 2px;}
#thumbnails img {padding:0;}

@media (max-width: 600px){
  section[aria-label="Bilder"]{position:relative;}
  #gallery-controls{position:absolute;left:0;right:0;top:50%;transform: translateY(-50%);margin:0;padding:0 .25rem;display:flex;justify-content:space-between;align-items:center;pointer-events:none;}
  #gallery-controls > button{pointer-events:auto;border:none;border-radius:999px;background: var(--control-bg-strong);color:#fff;width:2.2rem;height:2.2rem;display:flex;align-items:center;justify-content:center;font-size:1.2rem;}
  #thumbnails{display:none;}
  section[aria-label="Bilder"] figure{margin-bottom:.75rem;}
}

/* =========================
   DETAILSEITE: Hoehepunkte
   ========================= */
section[aria-label="Hoehepunkte"] ul{list-style:none;margin:0 0 1em;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;}
section[aria-label="Hoehepunkte"] li{position:relative;padding-left:1.4rem;line-height:1.4;}

/* =========================
   TABS (Reisedetails)
   ========================= */
nav[data-tabs]{display:flex;flex-wrap:wrap;gap:2px;margin:0;padding:0;background:none;}
nav[data-tabs] button{appearance:none;border:1px solid var(--color1);border-bottom:none;background:#666;color:#fff;padding:0 12px;height:28px;line-height:28px;cursor:pointer;border-radius:6px 6px 0 0;font: inherit;}
nav[data-tabs] button:hover,nav[data-tabs] button:focus{background:#e8e8e8;color:#000;outline:none;}
nav[data-tabs] button[aria-pressed="true"]{background: var(--color1);color:#fff;position:relative;z-index:2;}
nav[data-tabs] button:focus-visible{outline: 2px solid rgba(0,129,199,0.35);outline-offset: 2px;}
[data-tab-panel]{border:1px solid var(--color1);padding:10px;margin-top:-1px;width:100%;box-sizing:border-box;}
[data-tab-panel][hidden]{display:none !important;}
[data-tab-panel] > h3{margin-top:0;}

/* Karte im Tab */
#tab-karte:not([hidden]){display:flex;flex-direction:column;gap:10px;}
#tab-karte .mapwrap{flex:1 1 auto;min-height:320px;height: clamp(360px, 60vh, 720px);}
#tab-karte #map{width:100%;height:100%;border-radius:8px;}
#tab-karte .maplink{align-self:flex-start;}

/* =========================
   FOOTER
   ========================= */
body > footer{background:linear-gradient(to bottom,#f2f4f7 0%,#fafaf8 60%);box-shadow:0 0 8px rgba(0,0,0,0.3);padding:1.5rem;margin-top:var(--space-4);border-top:1px solid rgba(0,0,0,0.08);}
body > footer {color:var(--muted);}
body > footer > div:first-child{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;max-width:1200px;margin:auto;text-align:left;}
body > footer h3{margin:0 0 .6rem 0;font-size:1rem;font-weight:600;}
body > footer p{margin:0 0 .5rem 0;font-size:.9rem;color:inherit;}
body > footer ul{list-style:none;padding:0;margin:0;}
body > footer li{margin:.3rem 0;}
body > footer a{color:inherit;text-decoration:none;}
body > footer a:hover{text-decoration:underline;}
@media (max-width:800px){
  body > footer > div:first-child{grid-template-columns:1fr;gap:1.5rem;text-align:center;}
}

/* =========================
   MISC: Reise-Detail Altbestand
   ========================= */
#grundpaket ul{list-style-image: url(../images/haken_blau.gif);list-style-position: outside;}
#preis p{text-align:right;font-size:1.5em;font-weight:bold;color:var(--color1);padding:0;margin:0;}

aside table,section table{width:100%;}
aside table td:first-child,
#tab-programm table td:nth-child(2){width:70%;}
#tab-programm table td:first-child:before{color:var(--color1);content:"\25B6";padding-left:5px;}
aside table td:last-child,section table td:last-child{width:30%;text-align:right;vertical-align:bottom;}

#tab-hotels img{float:left;margin-right:1em;}
hr{border:none;height:1px;color:var(--color1);background-color:var(--color1);}
h3 + p{font-size:.95rem;}
#tab-programm h4{margin:1rem 0;}

/* =========================
   TABLE: Abflughäfen
   ========================= */
.table-container{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;font-size:.90rem;margin-bottom:1.5rem;}
.table-container table{width:auto;max-width:100%;border-collapse:collapse;}
.table-container th,.table-container td{padding:.5rem .6rem;vertical-align:top;border-bottom:none;box-shadow: inset 0 -1px 0 rgba(0,0,0,.12);}
.table-container thead th,.table-container td{white-space:nowrap;}
.table-container th[scope="row"]{white-space:normal;}
.table-container thead th:not(:first-child){text-align:left;}
.table-container th[scope="row"],.table-container thead th:first-child{position:sticky;left:0;background:var(--surface);box-shadow: inset 0 -1px 0 rgba(0,0,0,.12), 1px 0 0 rgba(0,0,0,.12);}
.table-container th[scope="row"]{z-index:2;text-align:right;}
.table-container thead th:first-child{z-index:3;}
.table-container td{text-align:right;}
.table-container td a{font-weight:700;}

/* =========================
   BUCHUNGSFORMULAR
   ========================= */
.buchung{max-width:980px;margin:0 auto;padding:1rem;}
.buchung fieldset{border: 1px solid var(--color1);padding: 1rem;margin: 1rem 0;display:block;}
.buchung legend{padding:0 .5rem;}
.buchung fieldset > div{margin: .75rem 0;display:grid;gap:.5rem;grid-template-columns: 1fr;float:none;}
.buchung fieldset > div > label,.buchung fieldset > div > div > label{font-weight:600;}
.buchung input,.buchung textarea,.buchung select,.buchung button{width:100%;box-sizing:border-box;padding:.5rem;}
.buchung fieldset > div > div{display:grid;gap:.5rem;}
.buchung input[type="checkbox"],.buchung input[type="radio"]{width:auto;padding:0;}
.buchung ul{list-style:none;padding:0;margin:.5rem 0;}
.buchung li{margin:.25rem 0;}
.buchung li > label{display:flex;gap:.5rem;align-items:baseline;}
.buchung .is-error{outline:2px solid #c90;}
.buchung [aria-invalid="true"]{outline:2px solid #c90;outline-offset:2px;}
.buchung .hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;}
.buchung meter{width:100%;height:.75rem;}
/* Chrome / Edge / Safari */
.buchung meter::-webkit-meter-bar{background:#eee;}
.buchung meter::-webkit-meter-suboptimum-value{background:#e6a700; /* mittel */}
.buchung meter::-webkit-meter-even-less-good-value{background:#c33; /* schwach */}
.buchung meter::-webkit-meter-optimum-value{background:#2e7d32; /* gut */}
/* Firefox */
.buchung meter::-moz-meter-bar{background:#2e7d32;}
.buchung meter[value="1"]::-moz-meter-bar{ background:#c33; }
.buchung meter[value="2"]::-moz-meter-bar{ background:#e6a700; }
.buchung meter[value="3"]::-moz-meter-bar{ background:#4caf50; }
.buchung meter[value="4"]::-moz-meter-bar{ background:#2e7d32; }
.buchung #pwHint{margin:.25rem 0 0;font-size:.9rem;}



@media (min-width: 720px){
  .buchung fieldset > div{grid-template-columns: 170px 1fr;align-items:center;}
  .buchung fieldset > div:has(> div + div){grid-template-columns: 1fr 1fr;align-items:start;gap:1rem;}
  .buchung fieldset > div:has(> div + div) > div{grid-template-columns: 1fr 1fr;align-items:center;}
  .buchung fieldset > div:has(> div:first-child #plz){grid-template-columns: minmax(8rem, 12ch) 1fr;}
  .buchung fieldset > div:has(> textarea),.buchung fieldset > div:has(> label > input[type="checkbox"]){grid-template-columns: 1fr;align-items:start;}
  .buchung fieldset > div > label:has(> input[type="checkbox"]){display:flex;gap:.5rem;align-items:flex-start;width:100%;}
}

.buchung fieldset ul li > label{display:flex;gap:.5rem;align-items:start;padding:.25rem 0;}
@media (min-width: 900px){
  .buchung form:not(.wishlist-request){display:grid;grid-template-columns: 1fr 1fr;gap:1rem 1.25rem;align-items:start;}
  .buchung form:not(.wishlist-request) > fieldset{margin:0;}
  .buchung form:not(.wishlist-request) > fieldset[data-span="full"]{grid-column: 1 / -1;}
  .buchung form:not(.wishlist-request) > header,
  .buchung form:not(.wishlist-request) > footer{grid-column: 1 / -1;}
}

/* Buchung: Stepper */
.buchung nav{background:none;}
.buchung nav > ol{display:flex;gap:.5rem;list-style:none;padding:0;margin:1rem 0;}
.buchung nav > ol > li{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background: var(--color1);color:#fff;font-weight:700;line-height:1;}
.buchung nav > ol > li[aria-current="step"]{background: var(--color2);}
.buchung form > footer{display:flex;gap:.75rem;margin-top:1rem;}
.buchung fieldset input[type="number"]{width:4rem;}
.buchung fieldset select{width:6ch;}
.buchung header em{color:red;text-align:center;}
.buchung fieldset li > label > span:last-child{margin-left:auto;white-space:nowrap;}
.buchung fieldset li > label{display:flex;align-items:flex-start;gap:.75rem;}
.buchung fieldset li > label > span{line-height:1.35;}
.buchung fieldset p{margin:.25rem 0;}

/* Zimmerarten: kompakter Grid */
.buchung fieldset p:has(select[name^="kat["]){display:grid;grid-template-columns: minmax(18rem, 1fr) auto;gap:.75rem;align-items:center;}
.buchung fieldset p select[name^="kat["]{width:4.5rem;}
.buchung fieldset section{margin:1rem 0;}
.buchung fieldset section > h4{margin:0 0 .25rem;}
.buchung fieldset ul{margin:.25rem 0 .75rem 1.5rem;padding:0;}
.buchung fieldset li{margin:.1rem 0;color:#444;}
.buchung fieldset[hidden]{display:none !important;}
.buchung input[readonly]{background:#f5f5f5;color:#555;}
.buchung fieldset h3{margin:.5rem 0;}
.buchung fieldset h3 + h3{margin-top:1.25rem;}
.buchung fieldset > p > b{display:inline-block;min-width:1.5rem;}
.buchung fieldset p + ul{padding-left:.5rem;border-left:2px solid #e5e5e5;}
.buchung fieldset table{width:100%;border-collapse:collapse;margin-top:.5rem;}
.buchung fieldset th,.buchung fieldset td{padding:.35rem .5rem;text-align:left;}
.buchung fieldset thead th{border-bottom:2px solid #ccc;}
.buchung fieldset tbody td{border-bottom:1px solid #eee;}
.buchung fieldset tfoot th{border-top:2px solid #ccc;font-weight:700;}
.buchung fieldset th:nth-child(2),
.buchung fieldset th:nth-child(3),
.buchung fieldset td:nth-child(2),
.buchung fieldset td:nth-child(3){text-align:right;white-space:nowrap;}

/* ======================
   Main News Section
   ====================== */

.mainnews{position:relative;width: 100%;display: grid;grid-template-columns: 41.6667% 1fr; /* 10/24 */align-items: center;gap: 2rem;padding: 2rem 1rem;background: linear-gradient(to bottom,#f8fafc 0%,#f2f4f7 100%);padding: 3rem 1.5rem;padding: 1rem 1.5rem;}
.mainnews::before{
  content:"";
  position:absolute;
  inset:0;

  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;

 background: linear-gradient(to bottom,#f8fafc 0%,#f2f4f7 100%);
  z-index:-1;
}
/* linker Bereich: Bild zentriert */
.mainnews figure{margin: 0;display: flex;justify-content: center;padding: 2rem;}
/* Bild proportional: 4/24 = 16.6667% der Gesamtbreite
   plus clamp, damit es nicht zu klein/groß wird */
.mainnews img{width: clamp(90px, 16.6667vw, 220px);height: auto;display: block;}
/* Text */
.mainnews h2{margin: 0 0 1rem 0;font-size: clamp(1.4rem, 2vw, 2rem);}
.mainnews p{margin: 0 0 1.25rem 0;max-width: 55ch;}
.mainnews a{display: inline-block;padding: .6rem 1.2rem;border-radius: 999px;background: var(--color1);color: #fff;text-decoration: none;font-weight: 600;}

@media (max-width: 768px){
 .mainnews{grid-template-columns: 1fr;text-align:center;}
 .mainnews figure{padding: 1.5rem 0;justify-content: center;}
 .mainnews img{width: min(70vw, 280px);}
}

.newsintro {display:grid;grid-template-columns: 41.6667% 1fr;align-items:center;padding:3rem 1.5rem;gap:2rem;}
.newsintro header{display:flex;align-items:center;justify-content:center;text-align:center;height:100%;}
.newsintro > header h2{margin: 0;font-size: clamp(2.5rem, 6vw, 4rem);width: 4.2ch;line-height: 1;font-weight: 800;line-height:0.9;}
.newsintro > header span{display: block;}
.newsintro > header span:first-child{color: var(--color1); font-size: 1em;}
.newsintro > header span:last-child{color: #000;font-size: .69em;}
.newsintro ul{list-style: none;margin: 0;padding: 0;display: grid;gap: .5rem;}
.newsintro ul > li{position: relative;display: grid;grid-template-columns: 9ch 1fr;gap: 1rem;align-items: baseline;padding: .5rem 0 .5rem .75rem;  /* links Platz für Balken */border-bottom: 1px solid rgba(0,0,0,.06);transition: background .15s ease;}
/* Balken (unsichtbar) */
.newsintro ul > li::before{content: "";position: absolute;left: 0;top: 50%;transform: translateY(-50%);width: 3px;height: 60%;background: var(--color1);opacity: 0;transition: opacity .15s ease, height .15s ease;}
/* Hover aktivieren */
.newsintro ul > li:hover::before{opacity: 1;height: 75%;}
.newsintro ul > li:last-child{border-bottom: none;}
.newsintro time{color: rgba(0,0,0,.6);font-size: .95rem;font-variant-numeric: tabular-nums;white-space: nowrap;}
.newsintro a{text-decoration: none;color: inherit;}
.newsintro a:hover{text-decoration: underline;}
@media (max-width:768px){
  .newsintro ul > li{grid-template-columns: 1fr;gap: .25rem;}
  .newsintro{grid-template-columns:1fr;}
}

.kataloge{margin-top:var(--space-3);}
.kataloge > h1{margin:0 0 var(--space-3) 0;}
.kataloge > ul{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-3);  grid-template-columns:repeat(auto-fit, minmax(220px, 260px));  justify-content:center;}
.kataloge > ul > li{position:relative;display:flex;flex-direction:column; background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,0.10);transition:transform .12s ease, box-shadow .12s ease;}
.kataloge > ul > li:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,0.14);}
.kataloge > ul > li > a:first-child{display:block;padding:.75rem .9rem 0 .9rem;text-decoration:none;color:inherit;perspective:800px;}
.kataloge > ul > li > a:first-child > img{width:100%;display:block;aspect-ratio:5 / 7;object-fit:cover;border-radius:4px;transform-origin:left center;transition:transform .18s ease, box-shadow .18s ease;box-shadow:2px 0 2px rgba(0,0,0,.18), 8px 6px 14px rgba(0,0,0,.15);}
.kataloge > ul > li:hover > a:first-child > img{transform:rotateY(-6deg);box-shadow:4px 0 4px rgba(0,0,0,.22), 12px 10px 18px rgba(0,0,0,.18);}
.kataloge > ul > li > span{display:block;padding:.6rem .9rem .9rem .9rem;font-weight:600;line-height:1.25;}
.kataloge > ul > li > a:nth-child(2){position:absolute;left:.9rem;right:.9rem;bottom:3.2rem;z-index:3;display:inline-flex;align-items:center;justify-content:center;gap:.35rem;padding:.55rem .7rem;border-radius:12px;background:rgba(255,255,255,.92);box-shadow:0 6px 18px rgba(0,0,0,.18);text-decoration:none;color:inherit;opacity:0;transform:translateY(6px);transition:opacity .14s ease, transform .14s ease;pointer-events:none;}
.kataloge > ul > li:hover > a:nth-child(2){opacity:1;transform:translateY(0);pointer-events:auto;}
.kataloge > ul > li > a:nth-child(2) > img{width:18px;height:18px;display:block;}
.kataloge > ul > li::after{content:"";position:absolute;left:.9rem;right:.9rem;top:.75rem;height:calc(100% - 4.7rem);border-radius:4px;background:rgba(0,0,0,.12);opacity:0;transition:opacity .14s ease;pointer-events:none;z-index:2;}
.kataloge > ul > li:hover::after{opacity:1;}
.kataloge > ul > li > a:nth-child(2)::before{content:"";width:18px;height:18px;background:url("/images/reader.png") no-repeat center;background-size:contain;display:inline-block;}



.mitarbeiter{margin-top:var(--space-3);}
.mitarbeiter h1{margin:0 0 var(--space-2) 0;}
.mitarbeiter p{max-width:70ch;}
.mitarbeiter hr{margin:var(--space-3) 0;border:0;border-top:1px solid rgba(0,0,0,.12);}
.mitarbeiter section{margin-top:var(--space-4);}
.mitarbeiter h2{text-align:center;margin:0 0 var(--space-2) 0;color:var(--color1);font-weight:600;font-size:1.2rem;}
.mitarbeiter h2::after{content:"";display:block;width:60px;height:2px;margin:.6rem auto 0;background:var(--color1);}
.mitarbeiter .sub{text-align:center;max-width:60ch;margin:0 auto var(--space-3) auto;color:var(--muted);font-size:.95rem;}
.mitarbeiter ul{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fit, minmax(220px, 260px));  justify-content:center;}
.mitarbeiter li{position:relative;display:flex;flex-direction:column;min-height:0;background:#fff;border:1px solid rgba(0,0,0,.10);border-radius:14px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.08);transition:transform .14s ease, box-shadow .14s ease;}
.mitarbeiter li:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,.16);}
.mitarbeiter figure{margin:0;background:#f2f2f2;overflow:hidden;}
.mitarbeiter figure img{width:100%;display:block;aspect-ratio:3 / 4;object-fit:cover;transition:transform .35s ease, filter .2s ease;will-change:transform;}
.mitarbeiter li:hover figure img{transform:scale(1.06);filter:brightness(.9);}
.mitarbeiter li > div{padding:.8rem .9rem .8rem .9rem;}
.mitarbeiter strong{display:block;font-size:1rem;}
.mitarbeiter li > div > span{display:block;margin-top:.25rem;color:var(--muted);font-size:.9rem;}
.mitarbeiter li a{color:inherit;text-decoration:underline;}
.mitarbeiter li > p{margin:0;padding:0 .9rem 3.1rem .9rem;color:var(--muted);font-size:.9rem;line-height:1.35;}
.mitarbeiter li footer{position:absolute;left:0;right:0;bottom:0;background:rgba(84,171,218,.95);color:#fff;padding:.6rem .8rem;opacity:0;transform:translateY(100%);transition:opacity .2s ease, transform .2s ease;display:grid;gap:.2rem;}
.mitarbeiter li footer a{color:#fff;text-decoration:underline;}
.mitarbeiter li:hover footer{opacity:1;transform:translateY(0);}
@media (hover:none){
  .mitarbeiter li footer{position:static;opacity:1;transform:none;border-top:1px solid rgba(0,0,0,.08);}
  .mitarbeiter li > p{padding-bottom:.9rem;}
}
.bildnachweis ul {list-style: none;padding-left:0;}
.bildnachweis ul li {margin: 6px 0;}