/* Import local fonts */

:root{
    --nav-max: 75%;
    --nav-pad-x: 25px;
    --navbar-height: 100px;         /* match the real navbar height */
    --navbar-offset-top: 60px;
    --text-width-ch:60ch;
    --hero-top-pad: calc(var(--navbar-height) + var(--navbar-offset-top) + 40px);
    --primary-color: rgba(0, 0, 0, 0.75);
    --overlay-color: rgba(0, 0, 0, 0.85);
    --menu-speed: 0.75s;
    --glass-bg: rgba(255,255,255,.06);
    --glass-br: 28px; 
  }
@font-face {
    font-family: 'Field Gothic Bold';
    src: url('fonts/Outfit/static/Outfit-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Field Gothic Regular';
    src: url('fonts/Outfit/static/Outfit-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Field Gothic Demi';
    src: url('fonts/Outfit/static/Outfit-Medium.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Field Gothic Light';
    src: url('fonts/Outfit/static/Outfit-ExtraLight.ttf') format('opentype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit Light';
    src: url('fonts/Outfit/static/Outfit-Light.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

.alt-font{
    font-family: 'Field Gothic Bold';/* or whatever you want */
    
  }
  
h1, h2, h3, h4, h5, h6 {
    font-family: 'Field Gothic Bold', sans-serif;
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
}



html {
    scroll-behavior: smooth;
    height:-webkit-fill-available;
}

html { box-sizing: border-box; overflow-x: hidden; }
*, *::before, *::after { box-sizing: inherit; }
body { overflow-x: hidden; }

body {
    background-color: black;
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Field Gothic Regular', sans-serif;
    height:-webkit-fill-available;
}


p {
   
    font-size: 18px;
}



h1 {
    font-size: 36px;
}

h2 { line-height: 1.1; }  /* or 1.05–1.2 to taste */

/* if you want tighter hero headings */
.hero-copy h2,
.platten2-copy h2,
.ankauf-sticky-text h2 { line-height: 1.05; }

h3 {
    font-size: 42px;
    font-family: 'Field Gothic Light';  
}

h4 {
    font-size: 36px;
    text-transform: uppercase;
    font-family: 'Field Gothic Bold';
}

h5 {
    font-family: 'Field Gothic Bold';
    font-size: 30px;
}

h6 {
    font-family: 'Field Gothic Regular';
    font-size: 7px;
}
.agb-header  {
   
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top:64px;
}

/* ==== Navbar icon tooltips (desktop) ==== */


.navbar-cta .svg-link{ position: relative; }

/* Bubble */
.navbar-cta .svg-link::after{
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);                 /* below the icon */
  transform: translateX(-50%) translateY(6px);
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.2;
  font-family: 'Field Gothic Regular', sans-serif;
  white-space: nowrap;
  color: #fff;
  background: rgba(0,0,0,.85);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 2000;
}

/* Small arrow */
.navbar-cta .svg-link::before{
  content:"";
  position:absolute;
  left:50%;
  top: calc(100% + 4px);
  width: 10px; height: 10px;
  transform: translateX(-50%) translateY(6px) rotate(45deg);
  background: rgba(0,0,0,.85);
  border-left: 1px solid rgba(255,255,255,.18);
  border-top: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 6px 16px rgba(0,0,0,.28);
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 1999;
}

/* Show on hover and keyboard focus */
@media (hover:hover) and (pointer:fine){
  .navbar-cta .svg-link:hover::after,
  .navbar-cta .svg-link:hover::before{
    opacity: 1;
    transform: translateX(-50%) translateY(0) rotate(0deg);
  }
}
.navbar-cta .svg-link:focus-visible::after,
.navbar-cta .svg-link:focus-visible::before{
  opacity: 1;
  transform: translateX(-50%) translateY(0) rotate(45deg);
}

/* If you’d rather show ABOVE the icon, swap these: */
/*
.navbar-cta .svg-link::after{ bottom: calc(100% + 10px); top: auto; }
.navbar-cta .svg-link::before{ bottom: calc(100% + 4px); top: auto; }
*/


header {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 1000;
}

/* keep the two buttons aligned with space; wraps on small screens */
.hero-actions{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;           /* if tight, second button drops to next line */
  }
  .hero-actions .button{ margin-top:0; }  /* override your .hero-copy .button rule */
  

/* keep icons lined up, equal size, tidy gaps */
.navbar-cta .cta-left{ display:flex; align-items:center;  }
.navbar-cta .svg-link{ display:inline-flex; }
.navbar-cta .svg-icon{ width:28px; height:28px; display:block; } /* same as IG */

/* progressive collapse so nothing overlaps the center nav-links */
@media (max-width:1250px){ .navbar-cta .sl-link{ display:none; } }   /* hide SL first */
@media (max-width:1180px){ .navbar-cta .icon-3{ display:none; } }    /* then 3rd icon */
@media (max-width:1110px){ .navbar-cta .icon-2{ display:none; } }    /* then 2nd icon */
@media (max-width:1060px){ .navbar-cta .icon-1{ display:none; } }    /* keep IG until mobile */

/* make sure the middle column can actually shrink */
.navbar .nav-links{ min-width:0; }
/* IG + SL stay together, Contact 16px away (you already have this) */
.navbar-cta{
    display:flex; align-items:center; 
  }
  .navbar-cta .cta-left{
    display:flex; align-items:center;    /* exact 8px between IG and SL */
  }
  
  /* Clean “SL” link: Open Sans, bold, white, subtle hover scale */
  .sl-link{
    font-family: 'Open Sans', Arial, sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    color: #fff;
    text-decoration: none;
    display: inline-block;
    transition: transform .18s ease, filter .18s ease;
    transform-origin: center bottom;
  }
  .sl-link:hover{ transform: scale(1.06); }
  .sl-link:active{ transform: scale(0.96); }
  .sl-link:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }
  

  .menu-wrap .logo-mobile{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: clamp(22px, 6.2vw, 34px);   /* scales nicely between phones/tablets */
    width: auto;
    max-width: calc(100% - 180px);      /* leaves room for burger + mail button */
    display: block;
    pointer-events: none;               /* don't block burger/mail taps */
    user-select: none;
    z-index: 3500;                      /* above the pill background */
  } 
  /* NAVBAR LAYOUT */
 /* Center nav-links without affecting page container */
/* NAVBAR: center links without overlapping the right cluster */

.pre-platten-banner{
  width: 100%;
  padding-left: clamp(16px, 4vw, 40px);
  padding-right: clamp(16px, 4vw, 40px);
  margin: clamp(16px, 5vw, 56px) 0;        /* space above/below */
  box-sizing: border-box;
}

.wide-video-card{
  position: relative;
  aspect-ratio: 21 / 9;                    /* keeps 21:9 everywhere */
  border-radius: 28px;                     /* rounded corners */
  overflow: hidden;                         /* clip the video */
  background: #000;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

/* Fallback for older browsers without aspect-ratio */
@supports not (aspect-ratio: 1 / 1){
  .wide-video-card::before{
    content: "";
    display: block;
    padding-top: calc(100% * 9 / 21);      /* 42.857% = 21:9 */
  }
}

/* Make sure this doesn't inherit your full-screen #bg-video rules */
.wide-video-card > .wide-video{
  position: absolute;                       /* fill the rounded card */
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;                        /* cover inside the card */
  display: block;
}

/* Optional: slightly larger radius on big screens */
@media (min-width: 1280px){
  .wide-video-card{ border-radius: 32px; }
}
.open-hours{
    position: fixed;
    top: calc(var(--navbar-offset-top) - 28px); /* sits a bit higher than the navbar */
    left: 50%;
    transform: translateX(-50%);   /* center the container to match navbar */
    width: 100%;
    max-width: var(--nav-max);
    padding: 0 var(--nav-pad-x);
    text-align: right;             /* <-- pushes text to the right edge */
    color: rgba(255,255,255,.9);
    font-family: 'Field Gothic Regular', sans-serif;
    font-size: 16px;
    line-height: 1;
    z-index: 1001;
    pointer-events: auto;     /* ← enable clicks */
    cursor: pointer; 
  }
  .open-hours:focus-visible{
    outline: 2px solid #fff; 
    outline-offset: 2px;
  }
  @media (max-width:1024px){ .open-hours{ display:none }} 
  
.navbar{
    position: fixed;
    top: var(--navbar-offset-top);
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--nav-max);
    height: var(--navbar-height);
    background:#000;
    border-radius:9999px;
    padding:0 var(--nav-pad-x);
    box-shadow:0 4px 6px rgba(0,0,0,.3);
    z-index:1000;
  
    /* NEW: 3-column grid prevents overlap */
    display:grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items:center;
  }
  
  .navbar .logo{ height:32px; padding-left: 8px; }
  
  /* Centered links live in the middle column and auto-shrink */
  .navbar .nav-links{
    padding-left: 175px;
    justify-self:center;
    display:flex;
    align-items:center;
    gap: clamp(12px, 2.2vw, 16px);
    white-space: nowrap;
  }
  .navbar .nav-links a{
    color:#fff; text-decoration:none;
    padding-inline: clamp(6px, 1.2vw, 8px);
    font-size:18px;
    font-family:"Field Gothic Regular",sans-serif;
    transition:filter .2s ease;
    display:inline-flex;
    transition: transform 140ms cubic-bezier(.2,.8,.2,1), filter .14s ease;
    transform-origin: center bottom;
  }
  .navbar .nav-links a:hover,
  .navbar .nav-links a.active{ filter: brightness(1.2); }

  .navbar .nav-links a:hover{ transform: scale(1.07); }
.navbar .nav-links a.active{ font-family: 'Field Gothic Demi', sans-serif; }
  
  /* Right-side: IG + Contact stay together with 16px gap */
  .navbar-cta{
    justify-self:end;
    display:flex;
    align-items:center;
         /* <- requested spacing */
  }
  .navbar-cta .svg-icon{
    width:28px; height:28px; display:block;
    transition: transform .2s ease, filter .2s ease;
  }
  .navbar-cta .svg-link:hover .svg-icon{
    transform: scale(1.1);
    filter: brightness(1.7);
  }
  
  /* Make it breathe as width tightens (before your mobile breakpoint hides navbar) */


  @media (max-width: 1280px){
    .navbar .nav-links{ gap: clamp(8px, 1.6vw, 20px); }
    .navbar .nav-links a{ font-size:15px; }
  }
  @media (max-width: 1120px){
    .navbar .nav-links a{ padding-inline: 8px; font-size:14px; }
  }
  
  /* You already hide the desktop navbar below 1024px */
  @media (max-width:1024px){
    .navbar{ display:none; }
    :root{
        /* was 40px */
        --navbar-offset-top: 40px;
      }
  }

  /* underline for the active nav link */
.navbar .nav-links a{
    position: relative;                  /* needed for ::after */
    transform-origin: center bottom;
    will-change: transform;
  }
  
  /* blue bar that animates in */
  .navbar .nav-links a::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-8px;                          /* adjust if you want it closer */
    width:70%;
    height:3px;
    background:#007BFF;
    border-radius:2px;
    transform: translateX(-50%) scaleX(0);
    transform-origin:center;
    opacity:0;
    transition: transform 220ms cubic-bezier(.2,.8,.2,1), opacity 220ms ease;
  }
  
  /* show underline when active */
  .navbar .nav-links a.active::after{
    transform: translateX(-50%) scaleX(1);
    opacity:1;
  }
  
  /* keep your hover pop; add a subtle pop when active too */
  .navbar .nav-links a:hover{ transform: scale(1.07); }
  .navbar .nav-links a.active{ transform: scale(1.05); }  /* works alongside your font-family change */
  
  
.button {
    font-family: 'Outfit Light';
  cursor: pointer;
text-decoration: none;
  transition: all 0.2s;
  padding: 6px 16px;
  border-radius: 100px;
  background: #007BFF; /* Updated background color */
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  font-size: 18px;
  position: relative;
  z-index: 1;
  color: #ffffff;
  gap: 10px;
}




.button:hover {
  background: #006EE3; /* Match hover color to new background */
}

.button::after {
    content: "";
    display: block;
    width: 34px;
    height: 34px;
    transition: transform 0.3s ease-in-out;
    /* Updated SVG with blue circle and white arrow */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 74 74' height='34' width='34'%3E%3Ccircle stroke-width='3' stroke='%23006EE3' fill='%23006EE3' r='35.5' cy='37' cx='37'%3E%3C/circle%3E%3Cpath fill='white' d='M25 35.5C24.1716 35.5 23.5 36.1716 23.5 37C23.5 37.8284 24.1716 38.5 25 38.5V35.5ZM49.0607 38.0607C49.6464 37.4749 49.6464 36.5251 49.0607 35.9393L39.5147 26.3934C38.9289 25.8076 37.9792 25.8076 37.3934 26.3934C36.8076 26.9792 36.8076 27.9289 37.3934 28.5147L45.8787 37L37.3934 45.4853C36.8076 46.0711 36.8076 47.0208 37.3934 47.6066C37.9792 48.1924 38.9289 48.1924 39.5147 47.6066L49.0607 38.0607ZM25 38.5L48 38.5V35.5L25 35.5V38.5Z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
  }

.button:hover::after {
  transform: translateX(5px);
}

.button:active {
  transform: scale(0.95);
}
/*mobile*/

/* Call button variant */
.button--call{
    background: #12B981;                 /* green */
    border-color: transparent;
  }
  .button--call:hover{ background:#0EA371; }
  .button--call:active{ transform: scale(0.95); }
  
  /* Replace the blue arrow with a green phone-in-circle */
  .button--call::after{
    width:34px; height:34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 74' width='34' height='34'%3E%3Ccircle cx='37' cy='37' r='35.5' fill='%230EA371' stroke='%230EA371' stroke-width='3'/%3E%3Cpath d='M45.6 44.6l-3.4 3.4c-6.2-3-11.1-7.9-14.2-14.2l3.4-3.4a2 2 0 0 0 .5-2.1l-2.3-5.7a2 2 0 0 0-2.4-1.2l-5.4 1.8a2 2 0 0 0-1.3 1.9c.2 13.6 11.3 24.7 24.9 24.9a2 2 0 0 0 1.9-1.3l1.8-5.4a2 2 0 0 0-1.2-2.4l-5.7-2.3a2 2 0 0 0-2 .5z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    transform: translateX(0);            /* no slide like the mail button */
  }
  
  /* Subtle “press” on hover to differentiate it from the email button */
  .button--call:hover::after{ transform: scale(1.06); }
  
/* === Contact CTA card (desktop + mobile) === */
.contact-cta{
    width: 100%;
    margin-top: 128px;                 /* space after intro */
    margin-bottom: 128px;
  }
  
  .contact-cta .cta-card{
    display: grid;
    grid-template-columns: 1.15fr 1fr; /* text / image */
    align-items: center;
    gap: clamp(20px, 4vw, 128px);
    border-radius: 28px;
    padding: clamp(20px, 4vw, 48px);
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    border: 1px solid rgba(255,255,255,.12);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    backdrop-filter: blur(12px) saturate(120%);
    box-shadow: 0 10px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.22);
    overflow: hidden;
  }
  
  .contact-cta .cta-copy{
    width: min(var(--text-width-ch,60ch),100%);
  }
  
  .contact-cta .cta-copy h2{
    font-family: 'Field Gothic Light', sans-serif;
    font-size: clamp(28px, 4.6vw, 36px);
    line-height: 1.15;
    margin: 6px 0 16px;
  }
  
  .contact-cta .cta-copy .lead{
    font-size: 16px;
    line-height: 1.55;
    margin: 0 0 90px;
  }
  
  .contact-cta .cta-actions{
    display: flex;
    align-items: center;
    gap: 16px;
  }
  
  /* Secondary text link next to the blue button */
  .contact-cta .cta-link{
    color:#fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.35);
    padding-bottom: 2px;
    transition: filter .18s ease, border-color .18s ease, transform .18s ease;
  }
  .contact-cta .cta-link:hover{
    filter: brightness(1.2);
    border-color:#fff;
    transform: translateY(-1px);
  }
  
  /* Media area */
  .contact-cta .cta-media{
    margin: 0;
    border-radius: 22px;
    overflow: hidden;
    background:#000;
    aspect-ratio: 16/9;
  }
  .contact-cta .cta-media img,
  .contact-cta .cta-media video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* Fallback for older browsers without aspect-ratio */
  @supports not (aspect-ratio: 1 / 1){
    .contact-cta .cta-media{ position: relative; }
    .contact-cta .cta-media::before{
      content:""; display:block; padding-top:56.25%; /* 16:9 */
    }
    .contact-cta .cta-media > *{
      position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    }
  }
  
  /* ====== Mobile (≤1024px): stack and match your mobile look ====== */
  @media (max-width:1024px){
    .alt-font {
        font-family: 'Field Gothic Bold';
    }

    .contact-cta .page-container {
        padding: 0px;
    }
    .contact-cta{ margin-top: 64px; margin-bottom: 64px; }
    .contact-cta .cta-card{
      grid-template-columns: 1fr;      /* stack */
      padding: 24px;
      gap: 18px;
      border-radius: 24px;
      /* a touch darker like your existing mobile card */
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      border: 1px solid rgba(255,255,255,.12);
    }
    .contact-cta .cta-media{ border-radius: 18px; aspect-ratio: 4/3; }
    .contact-cta .cta-copy h4{ font-size: clamp(24px, 6.2vw, 34px); }
    .contact-cta .cta-copy .lead{ font-size: 16px; margin-bottom:32px; }
    .contact-cta .cta-actions{ gap: 12px; flex-wrap: wrap; }
  }

  /* Contact-CTA heading type overrides */
.contact-cta .cta-copy h2{
    font-family: 'Field Gothic Regular', sans-serif;   /* default for this H2 */
  }
  
  .contact-cta .cta-copy h2 .h2-outfit{
    font-family: 'Field Gothic Light';  /* only “Was ist das” */
    font-weight: 200;
    font-size: 36px;                                  /* matches your @font-face */
  }

  
.logo-svg {
    height: 24px;
    position: fixed; /* Ensures the logo stays in the same position on the screen */
    right: 1rem; /* 1rem padding from the right edge */
    top: 40px; /* Adjust this value as needed to control the vertical position */
    z-index: 1000; /* Ensures the logo is above other elements if needed */
    color: #000;
}


/* ===== Info Toggle Card ===== */
.info-toggle-card{
  width:100%;
  padding-inline: clamp(16px, 4vw, 40px);
  margin: 64px 0px;
  height: auto !important; /* don’t clamp this card to 100vh */
}

.itc{
  border-radius: 28px;
  padding: clamp(18px, 3.2vw, 28px);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
  box-shadow: 0 10px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.22);
  color:#fff;
}

/* Header: iOS-like toggles */
.itc-header{
  display:flex;
  align-items:center;
  justify-content:center;   /* <— center */
  gap: clamp(12px, 2vw, 20px);
  margin-bottom: clamp(14px, 2.4vw, 18px);
  flex-wrap: wrap;
}
.ios-toggle{
  display:inline-flex; align-items:center; gap:10px;
  user-select:none; cursor:pointer;
}
.ios-toggle__label{ font-size: 16px; }
.ios-toggle input{ position:absolute; opacity:0; pointer-events:none; }

/* switch pill */
.ios-toggle__switch{
  width: 48px; height: 28px; border-radius: 999px;
  background: rgba(255,255,255,.24);
  position: relative; display:inline-block; transition: background .22s ease;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.ios-toggle__switch::after{
  content:"";
  position:absolute; top:3px; left:3px;
  width:22px; height:22px; border-radius:50%;
  background:#fff; transition: transform .22s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.ios-toggle input:checked + .ios-toggle__switch{
  background:#007BFF;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.ios-toggle input:checked + .ios-toggle__switch::after{ transform: translateX(20px); }

/* Body/panels */
.itc-body{ width:100%; }
.itc-panel[hidden]{ display:none !important; }

.itc-title{
  font-family:'Field Gothic Light',sans-serif;
  font-size: clamp(22px, 3.8vw, 28px);
  line-height:1.15;
  margin: 2px 0 12px;
}

/* Hours list */
.hours{
  list-style:none; padding:0; margin: 0 0 8px;
  display:grid; gap:8px; max-width: 420px;
}
.hours li{
  display:flex; justify-content:space-between; align-items:center;
  padding: 10px 14px; border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
}
.hours li span:last-child{ font-family:'Field Gothic Demi',sans-serif; }

/* Notes + actions */
.note{ font-size: 14px; line-height:1.5; opacity:.9; max-width: 70ch; margin-top: 10px; }
.itc-actions{ display:flex; gap:14px; align-items:center; margin-top: 14px; }
.itc .cta-link{
  color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.35); padding-bottom:2px;
  transition: filter .18s ease, border-color .18s ease, transform .18s ease;
}
.itc .cta-link:hover{ filter:brightness(1.15); border-color:#fff; transform: translateY(-1px); }

/* News ticker */
.ticker{
  position: relative; overflow:hidden;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.ticker__track{
  display:inline-flex; align-items:center; gap:18px;
  white-space: nowrap;
  padding: 12px 16px;
  animation: ticker-scroll 36s linear infinite;
}
.badge{
  display:inline-block;
  font-family:'Field Gothic Demi',sans-serif;
  font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  padding: 6px 10px; border-radius:999px;
  background:#007BFF; color:#fff;
}
.item{ font-size:16px; }
.dot{ opacity:.5; }

@keyframes ticker-scroll{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* track duplicated for seamlessness */
}

@media (prefers-reduced-motion: reduce){
  .ticker__track{ animation: none; }
}

@media (max-width:1024px){
  .info-toggle-card{ margin: 32px 0 32px; padding-inline:16px; }
  .itc{ border-radius: 24px; }
  .item{ font-size:15px; }

#updates .page-container { max-width: 100%; }
.info-toggle-card { padding-inline: 0; }  /* remove the outer padding */
}


/* hide-only utility for the original checkboxes */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; border:0;
}

/* segmented pill (matches your reference) */
.seg{
  display:inline-grid;
  grid-auto-flow: column;
  gap: 6px;
  padding: 6px;
  border-radius: 9999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.seg-input{ position:absolute; opacity:0; pointer-events:none; }
.seg-btn{
  font-family: 'Field Gothic Demi', sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  color: rgba(255,255,255,.85);
  padding: 10px 16px;
  border-radius: 9999px;
  cursor: pointer;
  user-select: none;
  transition: transform .16s ease, color .16s ease, background .16s ease, filter .16s ease;
}
.seg-btn:hover{ filter: brightness(1.1); }

/* ACTIVE = blue chip for whichever is selected */
#seg-news:checked  + label[for="seg-news"]  { background:#007BFF; color:#fff; transform: translateY(-1px); }
#seg-hours:checked + label[for="seg-hours"] { background:#007BFF; color:#fff; transform: translateY(-1px); }

 
  .menu-wrap { display:none; }

  /* ===== MOBILE NAV (≤1024px) — pill bar + CURTAIN SPLIT overlay ===== */
  @media (max-width:1024px){

    .hero-copy h2 {
        font-size: 48px !important;    
    }
    /* Hide desktop navbar */
    .navbar{ display:none !important; }
  
    /* Pill bar (visible on mobile) */
    .menu-wrap{
      position: fixed;
      top: var(--navbar-offset-top,16px);
      /* 24px from viewport edges */
      left: 8px; right: 8px; width: auto; margin: 0;
      transform: none;
  
      height: 80px;
      background:#000;
      border-radius:9999px;
      box-shadow:0 4px 6px rgba(0,0,0,.3);
      z-index: 3000;
      display:block !important;
    }
  
    /* Invisible checkbox (clickable above overlay) */
    .menu-wrap .toggler{
      position:absolute;
      left: 8px; top: 50%;
      transform: translateY(-50%);
      width:56px; height:56px;
      opacity:0; cursor:pointer;
      z-index: 4000;
    }


    /* Keep X clickable when open */
    .menu-wrap .toggler:checked{
      position: fixed;
      left: 8px;
      top: calc(var(--navbar-offset-top,16px) + 4px);
      transform:none;
    }

    .menu-wrap .mobile-title{
        position:absolute;
        left:50%;
        top:50%;
        transform: translate(-50%, -50%);
        font-family: 'Field Gothic Bold', sans-serif;
        font-size: 18px;                 /* tweak if you want bigger */
        line-height: 1;
        color:#fff;
        letter-spacing: .02em;
        white-space: nowrap;
        max-width: calc(100% - 180px);   /* leaves room for burger + mail icon */
        overflow: hidden;
        text-overflow: ellipsis;
        pointer-events: none;            /* don’t block burger/mail clicks */
        user-select: none;
      }
  
    /* Burger/X visual */
 /* Left-aligned burger button */
.menu-wrap .hamburger{
    position:absolute;
    left:16px;                 /* stay on the left */
    top:50%;
    transform:translateY(-50%);
    width:32px; height:32px;
    display:flex; align-items:center; justify-content:center;
    z-index:3999;
    pointer-events:none;       /* clicks go to .toggler */
  }
  
  /* middle bar (stroke #2) */
  .menu-wrap .hamburger > div{
    position:relative;
    width:14px; height:2px;
    background:#fff;           /* white */
    border-radius:2px;
    transition:
      background .25s ease,
      width .25s cubic-bezier(.2,.8,.2,1);
  }
  
  /* top (#1) and bottom (#3) bars */
  .menu-wrap .hamburger > div::before,
  .menu-wrap .hamburger > div::after{
    content:"";
    position:absolute; left:50%;
    height:2px; background:#fff;
    border-radius:2px;
    transform:translateX(-50%);              /* keep centered within the 32px box */
    transition:
      top .35s cubic-bezier(.2,.8,.2,1),
      width .35s cubic-bezier(.2,.8,.2,1),
      transform .35s cubic-bezier(.2,.8,.2,1);
  }
  
  /* closed lengths + offsets (3rd shorter than 2nd) */
  .menu-wrap .hamburger > div::before{ top:-8px; width:20px; }  /* top (longest)   */
  .menu-wrap .hamburger > div::after { top: 8px; width:10px; }  /* bottom (short)  */
  
  /* OPEN: turn into an X */
  .menu-wrap .toggler:checked + .hamburger > div{
    background: transparent; /* hide middle bar but KEEP element visible */
  }
  .menu-wrap .toggler:checked + .hamburger > div::before{
    top:0; width:22px; transform:translateX(-50%) rotate(45deg);
  }
  .menu-wrap .toggler:checked + .hamburger > div::after{
    top:0; width:22px; transform:translateX(-50%) rotate(-45deg);
  }
    
  
    /* Tiny logo in pill */

  
    .menu-wrap .icon-btn{
        position:absolute;
        right:16px; top:50%;
        transform: translateY(-50%);
        width:48px; height:48px;
        border-radius:50%;
        background:#007BFF;                 /* blue circle */
        display:inline-flex; align-items:center; justify-content:center;
        text-decoration:none;
        border:1px solid transparent;
        box-shadow:0 2px 6px rgba(0,0,0,.25);
        z-index:3500;
        transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
      }
      .menu-wrap .icon-btn:hover{
        background:#006EE3;                 /* slightly darker on hover */
        transform: translateY(-50%) scale(1.06);
        box-shadow:0 4px 10px rgba(0,0,0,.35);
      }
      .menu-wrap .icon-btn:active{ transform: translateY(-50%) scale(0.96); }
      .menu-wrap .icon-btn:focus-visible{
        outline:2px solid #fff;
        outline-offset:2px;
      }
      
      /* white paper-plane icon */
      .menu-wrap .icon-btn svg{
        width:22px; height:22px; display:block;
        fill:none; stroke:#fff; stroke-width:2;
        stroke-linecap:round; stroke-linejoin:round;
      }
    /* Contact button on the right */
    .menu-wrap .button{
      position:absolute;
      right:16px; top:50%;
      transform: translateY(-50%);
      font-size:16px; padding:6px 14px;
      z-index: 3500;
    }
  
    /* -------- NEW: FULLSCREEN "curtain split" reveal -------- */
    .menu-wrap .menu{
      position: fixed;        /* viewport-fixed for true fullscreen */
      inset: 0;
      visibility: hidden;
      pointer-events: none;
      overflow: hidden;
      display:flex; align-items:center; justify-content:left;
      z-index: 3200;
      background: rgba(0,0,0,.88); /* dark backdrop */
    }
  
    /* Two sliding curtains */
    .menu-wrap .menu::before,
    .menu-wrap .menu::after{
      content:"";
      position:absolute; top:0; bottom:0;
      width: 50%;
      background:#000;
      will-change: transform;
      transition: transform .85s cubic-bezier(.16,1,.3,1);
    }
    .menu-wrap .menu::before{
      left:0;
      border-top-right-radius: 48px;
      border-bottom-right-radius: 48px;
      transform: translateX(0%);         /* closed: cover left half */
    }
    .menu-wrap .menu::after{
      right:0;
      border-top-left-radius: 48px;
      border-bottom-left-radius: 48px;
      transform: translateX(0%);         /* closed: cover right half */
    }
  
    /* Menu content */
    .menu-wrap .menu > div{
      position: relative;
      z-index: 1;                        /* above curtains */
      text-align:left;
      max-width: 90vw; max-height: 45vh;
      opacity: 0;
      transform: translateY(8px) scale(.98);
      transition:
        opacity .45s ease .25s,
        transform .55s cubic-bezier(.16,1,.3,1) .2s;
    }
  
    /* Open state */
    .menu-wrap .toggler:checked ~ .menu{
      visibility: visible;
      pointer-events: auto;
    }
    .menu-wrap .toggler:checked ~ .menu::before{
      transform: translateX(-102%);      /* slide fully off-screen left */
    }
    .menu-wrap .toggler:checked ~ .menu::after{
      transform: translateX(102%);       /* slide fully off-screen right */
    }
    .menu-wrap .toggler:checked ~ .menu > div{
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  
    /* List styles (unchanged) */
    .menu-wrap .menu > div > div{ opacity:1; } /* keep inner container visible */
    .menu-wrap .menu > div > div > ul{ margin:0; padding:0; }
    .menu-wrap .menu > div > div > ul > li{
      list-style:none; color:#fff; font-size:48px;
      margin-bottom:16px;
      margin-left:32px;
      text-transform:none;
    }
    .menu-wrap .menu > div > div > ul > li > a{
      color:inherit; text-decoration:none; transition: color .4s ease;
    }
  
    /* Motion-reduced accessibility */
    @media (prefers-reduced-motion: reduce){
      .menu-wrap .menu::before,
      .menu-wrap .menu::after,
      .menu-wrap .menu > div{
        transition: none !important;
      }
    }
  }
  
  

/* Sections */
section {
    width: 100%;
    height: 100vh;
    position: relative;
    
}

/* Logo animation strip (sits like your other video cards) */
.logo-strip{
    width: 100%;
    padding-inline: var(--nav-pad-x, 24px);
    margin: 32px auto 0;
    box-sizing: border-box;
  }
  
  .logo-card{
    width: 100%;
    
  }
  
  .logo-video{
    width: 100%;
    height: 100%;
    object-fit: cover;   /* fills the card; center crop if ever mismatched */
    object-position: center;
    display: block;
  }
  
  /* Mobile: keep 16px gutters and slightly softer radius */
  @media (max-width: 1024px){
    .logo-strip{ padding-inline: 16px; scale:2 }
    .logo-card{ border-radius: 22px; }
  }
  /* Ankauf uses a card like intro/home */
#ankauf { height: auto !important; }  /* don’t clamp to 100vh */

.ankauf-banner{
  width: 100%;
  padding-inline: clamp(16px, 4vw, 24px); /* match site gutters */
  box-sizing: border-box;
  margin-bottom: 128px;
}

.ankauf-card{
  position: relative;
  margin: 0 auto;
  aspect-ratio: 16 / 9;                  /* same as intro/home */
  border-radius: 28px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

.ankauf-media{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

.ankauf-scrim{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.18));
  z-index: 1;
}

/* keep your text styling + position the same, just layer above media */
#ankauf .page-container{
  position: relative;
  z-index: 2;
  margin-top: 256px;                     /* same vertical offset you used */
}

/* mobile tweaks to match your other cards */
@media (max-width:1024px){
  .ankauf-banner{ padding-inline: 16px; }
  .ankauf-card{ border-radius: 24px; aspect-ratio: 4 / 3; }
  #ankauf .page-container{ margin-top: 120px; }  /* gentle lift on small screens */
}


/* Container für alle Inhalte, die bündig zur Navbar sein sollen */
.page-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--nav-max);
    margin: 0 auto;
    padding: 0 var(--nav-pad-x);
    color: #fff;
  }
  
  /* Hero-Copy positionieren (vertikal kannst du nach Geschmack anpassen) */
  .hero-copy {
    /* Abstand von oben, damit nix unter der Navbar steckt */
    /* feste, aber responsive Textbreite: max 60ch, nie breiter als Container */
    width: min(var(--text-width-ch), 100%);
  }
  
  /* Übertitel (Eyebrow) */
  .eyebrow {
    font-family: 'Field Gothic Demi', sans-serif;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 13px;
    line-height: 1.2;
    color: var(--eyebrow-color);
    margin-bottom: 8px;
  }
  
  /* H2 über dem Text */
  .hero-copy h2 {
    font-family: 'Field Gothic Light', sans-serif; /* wie dein h2 */
    font-size: clamp(28px, 5vw, 60px);
    line-height: 1.05;
    margin-bottom: 32px;
  }
  
  /* Paragraph mit fixer Lesebreite (siehe .hero-copy width) */
  .hero-copy .lead {
    font-size: 18px;
    line-height: 1.55;
  }
  
  /* Button-Abstand */
  .hero-copy .button {
    margin-top: 32px;
  }
  

/* Make home behave like intro (card, gutters, radius) */
#home { height: auto !important; }

.home-banner{
  width: 100%;
  padding-inline: clamp(16px, 4vw, 24px); /* match intro-banner gutters */
  box-sizing: border-box;                  /* same bottom space as intro */
        /* clears your fixed navbar */
}

.home-card{
  position: relative;
  margin: 0 auto;
  aspect-ratio: 16 / 9;                    /* same as .intro-card */
  border-radius: 28px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

/* video fills the card */
.home-media{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* Mobile: same vibe as intro */
@media (max-width:1024px){
  .home-banner{ padding-inline: 16px; }
  .home-card{ border-radius: 24px; aspect-ratio: 9/16; }
}


#bg-video {

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}
#PLATTEN .page-container{
    padding:0;
    margin-bottom:128px;
    }
  


.content {
    top:30%;
    position: relative;
    z-index: 1;
    text-align: left; /* Center the text horizontally */
    color: white;
    width: 40%;
    margin: 0 auto; /* Center the content horizontally */
    padding: 0 100px; /* Add some horizontal padding for the content */
}

.content .button {
    margin-top: 32px;
}

.content p {
    font-size: 18px;
    margin-top: 0px;
    margin-bottom: 0px;
}

/* Ensure the section occupies the full height of the viewport */





/* PLATTEN Section */
/* Section frame + predictable stacking */
.platten2-section{
    position: relative;
    background:#000;
    color:#fff;
    isolation:isolate; /* ensures overlay z-index sits above images */
  }
  
  /* Panels (one viewport high each) */
  .platten2-panel{
    position: relative;
    height: 100vh;
    width: 100%;
    flex-shrink: 0;
    z-index: 1; /* below overlay */
  }
  .platten2-panel img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  
  /* Sticky overlay aligned with navbar edges
     Uses your navbar variables if present, else falls back */
  .platten2-overlay{
    padding-left: 0px !important;
    position: sticky;
    top: calc(var(--navbar-height,90px) + var(--navbar-offset-top,40px) + 24px);
    z-index: 10;
    width: 100%;
    max-width: var(--nav-max, 65%);
    margin: 0 auto;
    padding: 0 var(--nav-pad-x, 45px);
    box-sizing: border-box;
    pointer-events: auto; /* keep links clickable */
  }
  
  /* Copy block – matches hero text width */
  .platten2-copy{
    width: min(var(--text-width-ch, 60ch), 100%);
  }
  
  /* HERO text styling */
  .platten2-copy h2{
    font-family: 'Field Gothic Light', sans-serif; /* like your h2 */
    font-size: clamp(28px, 5vw, 60px);
    line-height: 1.05;
    margin-bottom: 16px;
  }
  .platten2-copy .lead{
    font-size: 18px;
    line-height: 1.55;
  }
  .platten2-copy .button{ margin-top: 24px; }
  







/* Ankauf Section Styling */
/* Styling for the ankauf section */
.ankauf-section {
    position: relative;
    background-color: black;
    
}

/* Container for the text and video */
.ankauf-container {
    
    justify-content: space-between;

   
}



/* Text overlay styling */



/* Rabatte und Sparen heading styling */
.rabatte-heading {
    color: black;
    font-size: 60px;
    position: relative;
    white-space: nowrap;
    position: relative; 
    display: inline-block;
}

.rabatte-heading::after {
    content: "";
    position: absolute;
    bottom:0;
    left: 0;
    width: 110%;
    height: 70px;
    background-color: #007BFF; /* Blue color */
    z-index: -1;
}

.ankauf-section p {
    margin:0;
    margin-top: 32px;
}


.ankauf-sticky-text {
    position: relative;
    top: 8%;
    left: var(--navbar-padding); /* Align with the navbar's padding */
    width: calc(100% - 2 * var(--navbar-padding)); /* Full width minus padding */
    padding-left:130px; /* Adjust the translateX to match the left percentage */
    width: 1000px;
    padding-right:100px;
    padding-bottom: 128px;
    padding-top: 128px;
    box-sizing: border-box;
    color: white;
    text-align: left;
    z-index: 10;
    pointer-events: none;
    display: inline-block;
}

.ankauf-sticky-text h2 {
    text-transform: uppercase;
    font-family: 'Field Gothic Bold';
}



/* Container for the paragraph text */

/* make sure the global "section { height:100vh }" doesn't hijack this one */
#intro { height: auto !important; }

/* default: desktop text visible, mobile text hidden */
#intro .lead--mobile { display: none; }

@media (max-width:1024px){
  #intro .lead--desktop { display: none; }
  #intro .lead--mobile  { display: block; margin-bottom: 32px; }
}

.hero-copy .lead {
    font-size: 16px;
    line-height: 1.35;
  }


/* wrapper that matches your site gutters */
.intro-banner{
  width: 100%;
  padding-inline: clamp(16px, 4vw, 24px);
  box-sizing: border-box;
  margin-bottom: 128px;
}

/* the rounded media card (desktop default = 16:9) */
.intro-card{
  position: relative;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 28px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

/* video fills the card, always centered */
.intro-card > .intro-media{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  z-index: 0;
}


/* keep text aligned like everywhere else, inside the card */
.intro-card > .page-container{
  position: relative;
  z-index: 1;
  height: 90%;
  display: flex;
  align-items: flex-end;      /* text sits near the bottom like a hero */
}

.intro-card .hero-copy{
  width: min(var(--text-width-ch, 60ch), 100%);
  padding-block: clamp(24px, 6vw, 64px); /* breathing room inside card */
}

/* desktop: add the requested top margin */


/* mobile: 9:16, 16px side padding */
@media (max-width: 1024px){
  .intro-banner{ padding-inline: 16px; margin-bottom: 0px; }
  .intro-card{
    aspect-ratio: 9 / 16;
    max-width: 640px;       /* optional */
  }
  .intro-card .hero-copy{ padding-block: 24px; margin-bottom: 24px; }

  #PLATTEN .page-container {
    padding: 0;
    margin-bottom: 64px;
    margin-top:64px;
}

.hero-copy .button {
  margin-top:0px;
}
}


/* fallback for very old browsers without aspect-ratio */
@supports not (aspect-ratio: 1 / 1){
  .intro-card::before{
    content: "";
    display: block;
    padding-top: 56.25%; /* 16:9 */
  }
  @media (max-width: 1024px){
    .intro-card::before{ padding-top: 177.78%; /* 9:16 */ }
  }
}




#keller{ height:auto !important; overflow:visible !important; }

/* Ensure the section fills the viewport */
section#keller {
    position: relative; /* Position relative for child absolute positioning */
    height: 100vh; /* Full viewport height */
    overflow: hidden; /* Hide overflow from video */
}

.keller-banner{
    width:100%;
    padding-left: clamp(16px, 4vw, 24px);
    padding-right: clamp(16px, 4vw, 24px);
    box-sizing: border-box;
  }
  
  /* The rounded video card (16:9) */
  .keller-card{
    position: relative;
    margin: 0 auto;
    aspect-ratio: 16 / 9;             /* keep 16:9 everywhere */
    border-radius: 28px;
    overflow: hidden;                  /* clip video to the rounded box */
    background: #000;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    margin-bottom: 128px;
  }
  
  .keller-card > .keller-video{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;           /* fill without distortion */
    object-position: center;     /* keep center in view */
    display: block;
  }
  /* Fallback for browsers without aspect-ratio */
  @supports not (aspect-ratio: 1 / 1){
    .keller-card::before{
      content:"";
      display:block;
      padding-top: 56.25%;             /* 16:9 */
    }
  }
@media (min-width:1025px){
    section#keller{
      position: relative;
      height: 100vh;
      overflow: hidden;
      margin-bottom: 0px!important;
    }
  }
  
  /* --- 3) Mobile keller video card (put this CLOSE TO THE END of your CSS) --- */
  @media (max-width:1024px){
    #keller{
        margin-top: 64px;
      /* let the card create the shape; the section just provides gutters */
      height: auto !important;
      padding-inline: 16px;        /* 16px gutters */
      overflow-x: hidden;
      overflow-y: visible;
    }
  
    #keller .keller-card{
      position: relative;
      width: 100%;
      max-width: 640px;            /* optional */
      margin: 0 auto;
      aspect-ratio: 9 / 16;
      border-radius: 28px;
      overflow: hidden;
      background: #000;
      box-shadow: 0 8px 24px rgba(0,0,0,.35);
    }
  
    /* fallback if aspect-ratio isn’t supported */
    @supports not (aspect-ratio: 1 / 1){
      #keller .keller-card::before{
        content:"";
        display:block;
        padding-top:125%;
      }
    }
  
    #keller .keller-card > #bg-video{
      position: absolute !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      display: block;
      z-index: 0 !important;       /* never negative on mobile */
    }
  }

  /* Hidden on desktop */
.contact-card-mobile { display:none; }

/* Mobile-only glass card after #keller */
@media (max-width: 1024px){
  .contact-card-mobile{
    padding: 0 16px;                 /* 16px gutters */
    margin-top: 64px;
    display:block;
  }
  .contact-card{
    width: 100%;
    border-radius: 24px;
    padding: 24px 24px;
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    box-shadow: 0 8px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12);
    color:#fff;
  }

  .öffnungszeiten-p {
    font-size: 32px !important;
font-weight: 700; 
}

  .contact-card h4{
    font-family: 'Field Gothic Regular' !important;
    text-transform: none;
    margin-bottom: 16px;
    line-height: 1.15;
   
  }
  /* Fallback if backdrop-filter isn’t supported */
  @supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)){
    .contact-card{
      background: rgba(255,255,255,.06);
    }
  }

  .contact-card h2{
    font-family: 'Field Gothic Regular', sans-serif;
    font-size: 20px;
    line-height: 1.1;
    margin: 2px 0 8px;
    text-transform: none;            /* cleaner small headline */
  }
  .contact-card p{
    font-family: 'Field Gothic Regular', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.45;
    margin: 0 0 14px;
  }
  .contact-card .button{
    display:inline-flex;
    margin-top: 4px;
    font-size: 16px;
    padding: 10px 16px;
    margin-top:24px;
  }
}


/* Style for the background video */
#bg-video {
    position: absolute; /* Position the video absolutely */
    top: 0;
    left: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    object-fit: cover; /* Cover the entire section */
    z-index: 0; /* Video behind the content */
}

/* Container for text and button */
.keller {
    position: relative; /* Position relative to center the content */
    z-index: 1; /* Bring the content above the video */
    text-align: left; /* Center align text */
    color: white; /* Text color */
    padding-left: 300px; /* Left padding */
    padding-right: 300px; /* Right padding */
    padding-bottom: 64px; /* Bottom padding to create space above the button */
    box-sizing: border-box; /* Include padding in width calculation */
    width: 70%;
    display: flex; /* Use flexbox for centering */
    flex-direction: column; /* Stack elements vertically */
    justify-content: flex-end; /* Align content to the bottom of the section */
    height: 100%; /* Ensure it fills the full height of the section */
    align-items: left;
}

/* Style for paragraph */
.keller p {
    font-size: 18px; /* Text size */
    margin-bottom: 32px; /* No top margin, space below */
}

/* Button styles */




/* General styles for merch section */
.merch-section {
    background-color: black;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; /* Stack items vertically */
    position: relative;
    z-index: 1;
    height:auto;
    
}

.merch-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(320px, 1fr));
    gap: 28px;
    padding: 0px clamp(16px, 7vw, 36px);
    
}

.merch-item {
    display: flex;
    flex-direction: column;
    gap: 32px;            /* ⟵ padding-like space between image & text */
    text-align: left;
}

/* Ensuring images are responsive */
.merch-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;         /* crop to fill, no distortion */
    display: block;
    border-radius: 30px;
  }


  
  .merch-text .text{
    margin-top: 32px;
    font-size: 18px;  /* horizontal breathing room */
  }

  .merch-text .copy-text {
    font-size: 12px;
    font-family: 'Field Gothic Regular';
    margin-top: 6px;
    margin-bottom: 32px;
  }
  .merch-text .bold-text {
    margin-top: 4px;
  }
  


.merch .button {
    margin-top: 0px;
    margin-bottom: 0px;
    display: inline-block;
    padding: 5px 3px;
    text-align: center;
    align-items: center;
}





.video-background {
    position: fixed; /* Fixed position to keep it within the viewport */
    top: 0;
    left: 0;
    height: 100vh; /* Full height of the viewport */
    width: 100vw; /* Full width of the viewport */
    overflow: hidden; /* Hide overflow */
    z-index: -1; /* Place the video behind other elements */
}

.video-background video {
    min-height: 100%; /* Ensure the video covers the container */
    min-width: 100%; /* Ensure the video covers the container */
    object-fit: cover; /* Ensure the video covers the container without distortion */
    width: 100%;
    height: 100%;
}

/* Style for the video within the background */
.footer-burger {
    align-items: center;
    text-align: center;
    justify-content: center;
    padding-top: 128px;
}
.footer-textburger {
    display: flex; /* Use flexbox to stack links vertically */
    flex-direction: column; /* Stack links in a column */
    font-size: 16px;
    text-align: center;
    padding-top:16px;
    padding-bottom:32px;
   
    
    
}




/* ===== Carousel section layout ===== */
.feature-carousel{
    width: 100%;
    background: transparent;
  }
  
  .feature-carousel .fc-grid{
    display: grid;
    grid-template-columns: 1fr 1.15fr;         /* text left / slider right */
    align-items: center;
    gap: clamp(20px, 4vw, 64px);
  }
  
  /* Left text — keep your hero styles + fixed reading width */
  .feature-carousel .fc-copy{
    width: min(var(--text-width-ch,60ch), 100%);
  }
  
  /* ===== Slider box ===== */
  .fc-slider{
    position: relative;
    width: 100%;
    border-radius: 28px;
    overflow: hidden;
    aspect-ratio: 4 / 5;                       /* tall look; change if you like */
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.14);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    backdrop-filter: blur(12px) saturate(120%);
    box-shadow: 0 10px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.25);
    isolation: isolate;
  }
  
  .fc-track{
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 520ms cubic-bezier(.2,.8,.2,1);
  }
  
  .fc-slide{
    min-width: 100%;
    height: 100%;
  }
  .fc-slide img{
    width: 100%;
    height: 100%;
    object-fit: cover;           /* always fills, nicely centered */
    display: block;
  }
  
  /* Round blue arrow buttons (match your button language) */
  .fc-nav{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px; height: 46px;
    border: 0; border-radius: 50%;
    background: #007BFF;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
    transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
    z-index: 2;
  }
  .fc-nav:hover{
    background: #006EE3;
    transform: translateY(-50%) scale(1.06);
    box-shadow: 0 10px 26px rgba(0,0,0,.45);
  }
  .fc-prev{ left: 12px; }
  .fc-next{ right: 12px; }
  
  /* Dots (auto-generated) */
  .fc-dots{
    position: absolute;
    bottom: 12px; left: 50%;
    transform: translateX(-50%);
    display: flex; gap: 8px;
    z-index: 2;
  }
  .fc-dots button{
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.45);
    border: 0;
  }
  .fc-dots button[aria-current="true"]{ background: #fff; }
  
  /* ===== Responsive ===== */
/* Mobile layout for the carousel */
@media (max-width: 1024px){

  #ankauf.ankauf-hero .page-container {
   
    margin-top: 64px!important;
}
    .feature-carousel .fc-grid{
      grid-template-columns: 1fr;   /* stack text over slider */
      gap: 24px;
    }
    .fc-slider{
      aspect-ratio: 4 / 5;          /* <- make mobile 4:5 */
    }
  }
  
  @media (max-width: 600px){
    
    .fc-slider{
      border-radius: 22px;
      aspect-ratio: 4 / 5;          /* keep 4:5 on phone */
    }
  }
  
  /* Optional: fallback for older Safari that ignores aspect-ratio */
  @supports not (aspect-ratio: 1 / 1){
    .fc-slider{ position: relative; }
    .fc-slider::before{ content:""; display:block; padding-top:125%; } /* 4:5 */
    .fc-track{ position:absolute; inset:0; }
  }

  


.svg-iconburger {
    padding-top:128px;
    transition: transform 0.2s ease, filter 0.2s ease; /* Animation for scale and lighting effect */
    
}


  
  /* content inside */
  .footer-content{ 
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
  }
  
  .svg-icons{ display:flex; justify-content:center; gap:16px; margin-bottom:16px; }
  .svg-link{ display:inline-flex; margin-right:8px}
  .svg-icon{ width:42px; height:42px; transition:transform .2s ease, filter .2s ease; }
  .svg-link:hover .svg-icon{ transform:scale(1.1); filter:brightness(1.7); }
  
  .footer-text{ display:flex; flex-direction:column; gap:8px; font-size:18px; }
  .footer-link{ color:#fff; text-decoration:none; text-transform:uppercase; transition:transform .2s ease, font-weight .2s ease; }
  .footer-link:hover{ transform:scale(1.06); font-weight:700; }
  
  .footercopyright{
    font-size:12px;
    margin-top:32px;
    text-align:center;
  }
  .footercopyright .break{ white-space:nowrap; }
  
  /* Mobile tweaks */
  @media (max-width:600px){
    footer{ padding:40px 16px 24px; border-radius:24px 24px 0 0; }
    .svg-icon{ width:36px; height:36px; }
  
  }
  
  /* Mobile tweaks */
  @media (max-width:600px){

    .svg-icon{ width:36px; height:36px; }
    .footer-text{ font-size:16px; }
    .footercopyright{ font-size:10px; margin-top:18px; }
  }
  

AGB

/* General styles for the AGB page */



.agb-back-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color:white;
    
}

.agb-icon {
    height: 42px; /* Adjust the size of the arrow as needed */
    width: auto;
    color:white;
    z-index:1;
    padding-left:150px;
    transition: transform 0.3s ease;
}

.agb-icon:hover {
    transform: scale(1.1);
}
.agb-logo {
    height: 50px; /* Adjust the size of the logo as needed */
    width: auto;
    padding-right:90px;
}


.agb-main {
    padding-top: 128px;
    padding: 32px; /* Padding around the main content */
    font-size: 18px; /* Base font size */
    line-height: 1.5; /* Line height for better readability */
    
}

.agb-h1 {
    padding-top: 128px;
    color: white; /* Ensure the header text is visible */
    text-align: center;
    padding-left: 200px;
    padding-right: 200px;
    padding-bottom:64px;
}

.agb-p {
    padding-top:0px;
    color: white; /* Set text color for paragraphs */
    text-align: left;
    padding-left: 200px;
    padding-right: 200px;
    padding-bottom:16px;
    
}




.agb-copy {
    margin-bottom: 16px; /* Space between paragraphs */
    color: white; /* Set text color for paragraphs */
    text-align: left;
    padding-left: 200px;
    padding-right: 200px;
}

.agb-bold{

    font-family: field gothic bold;
    color:white;
    font-size: 18px;
    padding-left: 200px;
    padding-right: 200px;
    padding-bottom:16px;
    

}


.content-error {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
}

.content-error h1 {
    font-size: 192px;
    margin:0;
    color: white;
    text-shadow: 2px 2px 30px rgba(0, 0, 0, 1.7);
    
}

.content-error p {
    font-size: 24px;
    margin-bottom: 32px;
    text-shadow: 2px 2px 30px rgba(0, 0, 0, 1.7);
    
}

.video-container-error {
    position: relative;
    height: 100%;
    width: 100%;
}
#background-video-error {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1;
    transform: translate(-50%, -50%);
    background-size: cover;
    overflow: hidden;
}

/* Contact Form Overlay */
.contact-form-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Black background with 80% opacity */
    z-index: 1000; /* Above everything else */
    justify-content: center;
    align-items: center;
}

/* Centered Form Container */
.contact-form-container {
    background-color: white;
    padding: 20px;
    border-radius: 0px;
    width: 90%;
    max-width: 800px;
    text-align: center;
    position: relative;
    z-index: 1;
}

/* Close Button */
/* Close Button */
.close-button {
    position: absolute;
    top: 32px;
    left: 32px;
    font-size: 42px; /* Reduce font size to make the X thinner */
    font-family: 'field gothic regular';
    line-height: 1; /* Ensure vertical alignment */
    cursor: pointer;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black; /* Set color of the X */
}

.close-button img {
    width: 100%; /* Make SVG fill the container */
    height: 100%; /* Make SVG fill the container */
    display: block; /* Remove any extra space below the image */
}

/* Scale Effect on Hover */
.close-button:hover {
    transform: scale(1.2); /* Scale the button by 20% */
}

.datenschutz-text {
    font-size: 10px; /* Smaller font size for the paragraph text */
    color: #666; /* Color for the text, adjust as needed */
    margin-top: 8px; /* Space between the button and the text */
    text-align: center; /* Center align the text */
    padding-left:100px;
    padding-right:100px;
    margin-bottom: 32px;
}

/* Input Fields and Textarea */
input[type="text"], textarea {
    width: 86%;
    padding: 10px;
    margin: 8px 0;
    border-radius: 0px;
    border: 1px solid #ccc; /* Default border color */
    background-color: #f5f4f4; /* Greyed-out background */
    font-size: 18px;
    font-family: 'Field Gothic Regular', sans-serif; /* Ensure font consistency */
    transition: background-color 0.3s, border-color 0.3s; /* Smooth transition */
}

/* Input Fields and Textarea on Focus */
input[type="text"]:focus, textarea:focus {
    background-color: white; /* Change background to white on focus */
    border-color: #FF8500; /* Border color on focus */
    outline: none; /* Remove default outline */
    
}

/* Hover Effect for Input Fields and Textarea */
input[type="text"]:hover, textarea:hover {
    border-color: #FF8500; /* Border color on hover */
}

/* Submit Button */
.submit-button {
    text-transform: uppercase;
    font-family: 'Field Gothic Bold';
    background-color: #FF8500; /* Orange background color */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 0px;
    cursor: pointer;
    font-size: 22px;
    margin-top: 16px;
    margin-bottom: 0px;
    color: black;
   
    transition: background-color 0.3s; /* Smooth transition */
}

.submit-button:hover {
    background-color: #007BFF; /* Keep orange background on hover */
}

/* Form Heading */
.contact-form-container h2 {
    margin-top: 64px;
    margin-bottom: 32px;
    font-size: 60px;
    font-family: 'Field Gothic Bold', sans-serif; /* Ensure font consistency */
    position: relative; /* Required for positioning the pseudo-element */
    text-align: center; /* Center align text if desired */
}

/* Blue Rectangle Box Underneath Text */
.contact-form-container h2::after {
    content: "";
    position: absolute;
    bottom: -20px; /* Adjust as needed to place the box directly below the text */
    left: 50%; /* Center the box horizontally */
    transform: translateX(-50%); /* Shift the box left by 50% of its width to center it */
    width: 88%; /* Adjust width as needed */
    height: 42px; /* Height of the rectangle box */
    background-color: #007BFF; /* Blue color */
    z-index: -1; /* Ensure it is behind the heading text */
}



/* Media Query for viewport width 1920px max */

@media screen and (min-width: 3480px) {
    .content {
        scale:1.5;
    }

    .navbar {
        position: fixed; /* Change to sticky */
       
        padding: 0 80px; /* Padding left and right */
        width:45%;
       
    }

    .nav-links a {
       
        padding: 0 50px;

    }

    .sticky-text {
        top:10%;
        margin-left: 1050px;
        scale: 1.5;
    }

    .content {
      
        padding: 0 1300px;
    /* Your CSS rules for this width range go here */
  }

  .keller {
    
    padding-left: 1300px;
    padding-right: 1300px;
    

  }

  .keller p{
    scale:1.5;

  }



  .merch-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 128px 900px;
    gap: 64px;
    max-width: 1500px;
    margin: 0 auto;
    scale:1.5;
}

.merch-section {
  
    padding-top: 256px;
    padding-bottom:256px;

}



.ankauf-sticky-text {
   margin-left:1000px;
   scale: 1.5;
}
    }


@media (min-width: 1025px) { 

.menu-wrap {

    display:none;
}
.hamburger {

    display:none;

}

.menu {

    display: none;
}

}



  

@media (min-width: 1900px) {
    .nav-links a {
       
        padding: 0 50px;

    }

   

    .navbar .logo {
        height: 42px;
    }


    
   
}


/* Media Query for viewport width 1700px max */
@media (max-width: 1500px) {
    .nav-links a {
       
        padding: 0 30px;

    }

    
}

@media (max-width: 1440px) {
    .nav-links a {
       
        padding: 0 20px;

    }
    .navbar {

        scale:0.9;
    }

    
}





/* Media Query for viewport width 1250px or less */
@media (max-width: 1422px) {
    .nav-links a {
        font-size: 14px;
        padding: 0 20px;

    }



    .navbar .logo {
        height: 35px;
    }

}

@media (min-width: 1025px) and (max-width: 1200px) {
    /* Your styles here */
    .content {
        top: 25%;
        position: relative;
        z-index: 1;
        text-align: center; /* Center the text horizontally */
        color: white;
        margin: 0 auto; /* Center the content horizontally */
        padding: 0 180px; /* Add some horizontal padding for the content */
    }
}


/* TABLET */
@media (max-width: 1024px) {  

 
    
    .logo-svg {
        
        padding-right: 32px;
    }

    .ankauf-sticky-text {
        position: relative;
    top: 8%;
    left: var(--navbar-padding); /* Align with the navbar's padding */
    width: calc(100% - 2 * var(--navbar-padding)); /* Full width minus padding */
    padding-left:130px; /* Adjust the translateX to match the left percentage */
    width: 1000px;
    padding-right:100px;
    padding-bottom: 128px;
    padding-top: 128px;
    box-sizing: border-box;
    color: white;
    text-align: left;
    z-index: 10;
    pointer-events: none;
    display: inline-block;
    }

    .keller {
        
        padding-left: 180px; /* Left padding */
        padding-right: 180px; /* Right padding */
        padding-bottom: 64px; /* Bottom padding to create space above the button */
        
    }

    .menu-wrap .toggler {
       
        width: 70px;
        height: 70px;
    
      }   

 
   

    .navbar {
        display: none; /* Hide navbar */
    }

    .content {
        top: 30%;
        position: relative;
        z-index: 1;
        text-align: center; /* Center the text horizontally */
        color: white;
        margin: 0 auto; /* Center the content horizontally */
        padding: 0 180px; /* Add some horizontal padding for the content */
    }

    .overlay .headline {
        font-size: 36px;
    }
    .overlay .text {

        padding-top:450px;
    }

    @media (min-width: 761px) and (max-width: 1000px) {
        /* Your CSS rules go here */

        .content {
            top: 30%;
            position: relative;
            z-index: 1;
            text-align: center; /* Center the text horizontally */
            color: white;
            margin: 0 auto; /* Center the content horizontally */
            padding: 0 80px; /* Add some horizontal padding for the content */
        }

      }

      @media (min-width: 300px) and (max-width: 1025px) {
        .circle-overlay.scroll-effect,
        .image-wrapper img.scroll-effect {
            transition: transform 2s ease;
        }
        
        .circle-overlay.scroll-effect.enlarged {
            transform: translate(-50%, -50%) scale(3);
        }
        
        .image-wrapper img.scroll-effect.enlarged {
            transform: scale(1.2);
        }
    }




/* PHONE */
@media (max-width: 600px) {    

    .logo-svg {
        
        padding-right: 0px;
    }
    
    .agb-header  {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0px;
        background-color: black;
        top:0;
        margin-top:0;
    }

    /* ANFAHRT */
    .content p {
        font-size: 16px;
        margin-top: 0px;
        margin-bottom: 0px;
        
    }

    p{

        font-size: 16px;
    }

    .navbar {
        display: none; /* Hide navbar */
    }

    .content {
        top: 30%;
        position: relative;
        z-index: 1;
        text-align: center; /* Center the text horizontally */
        color: white;
        margin: 0 auto; /* Center the content horizontally */
        padding: 0 15px; /* Add some horizontal padding for the content */
    }



    .footer-text {
        display: flex; /* Use flexbox to stack links vertically */
        flex-direction: column; /* Stack links in a column */
        font-size: 16px;
        
        
    }

    .svg-icon {
        width: 32px; /* Set icon size */
        height: 32px; /* Set icon size */
        transition: transform 0.2s ease, filter 0.2s ease; /* Animation for scale and lighting effect */
    }

    .keller {
        
        padding-left: 15px; /* Left padding */
        padding-right: 15px; /* Right padding */
        padding-bottom: 32px; /* Bottom padding to create space above the button */
        
    }

    .keller p {
        font-size: 16px; /* Text size */
        margin-top: 32px; /* No top margin, space below */
    }



    .image-wrapper:hover img {
        /* You can still keep the hover effect here */
        transform: scale(1.05);
    }

    .overlay .button {
        margin-top: 0px;
        margin-bottom: 0px;
        display: inline-block;
        padding: 8px 30px;
        width: 180px;
        text-align: center;
        align-items: center;
        font-size: 26px;
    }

    .merch-item {
       
        position: relative;
        text-align: left;
        flex: 1 1 200px; /* Allow items to grow and shrink */
        max-width: none;
    }

    .image-wrapper {
        padding-left: 16px;
        padding-right: 16px;
    }

    .merch-text {
        padding-left: 16px;

    }

    .merch-section {
        background-color: black;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column; /* Stack items vertically */
        position: relative;
        z-index: 1;
        height:auto;
        
    }
    
    .merch-container {
        display: flex;
        flex-wrap: wrap; /* Allows items to wrap to the next line */
        justify-content: center;
        align-items: center;
        padding: 0; /* Adjust padding as needed */
        padding-bottom: 64px;
        gap: 16px;
        max-width: 1500px; /* Max width for better control */
        margin: 0 auto;
        
    }

    .overlay .headline {
        font-size: 40px;
        padding-top:32px;
    }

    .merch-img-card {
        margin-top: 32px !important;
    }

    .overlay .text {
        padding-top:300px;
        font-size:1444px;
        white-space: nowrap;
    }
    .sticky-text {
        margin-top:64px;
        position: sticky;
        
        top: 92px;
        left: 0; /* Reset left positioning */
        right: 0; /* Add right positioning to cover full width */
        transform: none; /* Remove the transform for centering */
        width: 100%; /* Ensure the width is full */
        padding: 0 5%; /* Add padding on the sides */
        box-sizing: border-box; /* Include padding in the width */
        text-align: center; /* Center the text */
        padding-bottom: 64px;
    }
    .sticky-text h2 {
        
        text-align: center;
        
        margin: 0 auto; /* Center the text block */
        width: 102%; /* Ensure the container takes the full width */
        font-size: 30px;
        line-height: 1;


    }

    .sticky-text p {
        font-size:16px;
        text-align: center;
        padding-top:16px;
        margin:0%;
        width: 100%;
        
        
    }


    .footer-burger {
    align-items: center;
    text-align: center;
    justify-content: center;
    padding-top: 128px;
}
.footer-textburger {
    display: flex; /* Use flexbox to stack links vertically */
    flex-direction: column; /* Stack links in a column */
    font-size: 16px;
    text-align: center;
    padding-top:16px;
    padding-bottom:32px;
   
    
    
}

.svg-iconburger {
    
    padding-top:64px;
    transition: transform 0.2s ease, filter 0.2s ease; /* Animation for scale and lighting effect */
    
}

.footer-content {
    text-align: center; /* Center text */
    padding-top:32px;
   
}

.svg-icons {
    display: flex; /* Use flexbox for the icons */
    margin-bottom: 16px; /* Space between icons and text */
}

.svg-link {
    margin: 0 16px; /* Space around each icon */
}

.svg-icon {
    width: 36px; /* Set icon size */
    height: 36px; /* Set icon size */
    transition: transform 0.2s ease, filter 0.2s ease; /* Animation for scale and lighting effect */
}

.svg-link:hover .svg-icon {
    transform: scale(1.1); /* Scale up on hover */
    filter: brightness(1.7); /* Light up effect on hover */
}

.footer-text {
    display: flex; /* Use flexbox to stack links vertically */
    flex-direction: column; /* Stack links in a column */
    font-size: 18px;
    
    
}

@media (max-width: 600px){
  /* 1) No inner padding on the media card */
  .image-wrapper{ padding: 0; }              /* ← remove the 16px you added */

  /* 2) Give the item/container the gutters instead */
  .merch-item{ padding-inline: 16px; }       /* or: .merch-container{ padding-inline:16px; } */

  /* 3) Make sure the media actually fills the rounded box */
  .image-wrapper{
    aspect-ratio: 4 / 5;
    border-radius: 24px;                     /* optional: slightly softer on phone */
    overflow: hidden;
    background: transparent;                 /* avoids black “frame” if anything mis-sizes */
  }
  .image-wrapper > img,
  .image-wrapper > video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}


.footer-link {
    display: inline-block; /* Allow padding around links */
    margin: 0px 0; /* Space between text items */
    text-decoration: none; /* Remove underline */
    color: #fff; /* Set link color */
    text-transform: uppercase; /* Uppercase text */
    transition: font-weight 0.2s ease, transform 0.2s ease; /* Animation for font weight and scaling */
}

.footer-link:hover {
    font-weight: bold; /* Change font weight on hover */
    transform: scale(1.1); /* Scale up on hover */
}

    

.ankauf-section h2 {
        
    text-align: center;
    
    margin: 0 auto; /* Center the text block */
    width: 100%; /* Ensure the container takes the full width */
    font-size: 32px;
    line-height: 1;
    white-space: nowrap;


}

.ankauf-section p {
    font-size:16px;
    text-align: center;
    padding-top:16px;
    margin:0%;
}

.ankauf-sticky-text {
    margin-top:64px;
    position: relative;
    
    
    top: 0;
    left: 0; /* Reset left positioning */
    right: 0; /* Add right positioning to cover full width */
    transform: none; /* Remove the transform for centering */
    width: 100%; /* Ensure the width is full */
    padding: 0 5%; /* Add padding on the sides */
    box-sizing: border-box; /* Include padding in the width */
    text-align: center; /* Center the text */
    padding-bottom: 64px;
}

.year-heading::after {
    content: "";
    position: absolute;
    bottom:0;
    left: 0;
    width: 100%;
    height: 42px;
    background-color: #007BFF; /* Blue color */
    z-index: -1;
    transition: width 0.3s ease;
}

.rabatte-heading::after {
    content: "";
    position: absolute;
    bottom:0;
    left: 0;
    width: 100%;
    height: 42px;
    background-color: #007BFF; /* Blue color */
    z-index: -1;
}

.ankauf-section p {
    margin:0;
    font-size:16px;
}

.text-overlay {
    position: sticky;
    
}

.agb-back-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color:white;
    
}

.agb-icon {
    height: 32px; /* Adjust the size of the arrow as needed */
    width: auto;
    color:white;
    z-index:1;
    padding-left: 26px;
    transition: transform 0.3s ease;
}

.agb-icon:hover {
    transform: scale(1.1);
}
.agb-logo {
    height: 32px; /* Adjust the size of the logo as needed */
    width: auto;
    padding-right:60px;
}


.agb-main {
    padding-top: 64px;
    padding: 10px; /* Padding around the main content */
    font-size: 16px; /* Base font size */
    line-height: 1.5; /* Line height for better readability */
    
}

.agb-h1 {
    padding-top: 128px;
    color: white; /* Ensure the header text is visible */
    text-align: left;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom:32px;
    font-size: 24px;
}

.agb-p {
    font-size: 16px;
    padding-top:0px;
    margin-bottom: 16px; /* Space between paragraphs */
    color: white; /* Set text color for paragraphs */
    text-align: left;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 16px;
}




.agb-copy {
    margin-bottom: 16px; /* Space between paragraphs */
    color: white; /* Set text color for paragraphs */
    text-align: left;
    padding-left: 10px;
    padding-right: 10px;
}

.agb-bold{

    font-family: field gothic bold;
    color:white;
    font-size: 16px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 16px;
}
    .agb-main .button {
        margin-bottom:16px;
        margin-top:16px;
        font-size:28px;
    }

    .footercopyright {

        font-size: 8px;
        margin-top: 48px;
        color:white;
        text-align: center;
        padding-left: 10px;
        padding-right: 10px;
        bottom:0;
        line-height: 0.2;
    
    }

    .footercopyright .break {
        display: block;
        margin-top: 10px; /* Optional: adds a little space between the lines */
    }

    .datenschutz-text {
        font-size: 8px; /* Smaller font size for the paragraph text */
        color: #666; /* Color for the text, adjust as needed */
        margin-top: 8px; /* Space between the button and the text */
        text-align: center; /* Center align the text */
        padding-left:10px;
        padding-right:10px;
        margin-bottom: 16px;
    }

    .contact-form-container h2 {
        margin-top: 64px;
        margin-bottom: 16px;
        font-size: 30px;
        font-family: 'Field Gothic Bold', sans-serif; /* Ensure font consistency */
        position: relative; /* Required for positioning the pseudo-element */
        text-align: center; /* Center align text if desired */
    }

    .contact-form-container h2::after {
    content: "";
    position: absolute;
    bottom: -3px; /* Adjust as needed to place the box directly below the text */
    left: 50%; /* Center the box horizontally */
    transform: translateX(-50%); /* Shift the box left by 50% of its width to center it */
    width: 100%; /* Adjust width as needed */
    height: 26px; /* Height of the rectangle box */
    background-color: #007BFF; /* Blue color */
    z-index: -1; /* Ensure it is behind the heading text */
}

.contact-form-container {
    background-color: white;
    padding: 20px;
    border-radius: 0px;

    max-width: 500px;
    text-align: center;
    position: relative;
    z-index: 1;
}


.close-button {
    position: absolute;
    top: 48px;
    left: 16px;
    font-size: 0
; /* Reduce font size to make the X thinner */
    font-family: 'field gothic regular';
    line-height: 1; /* Ensure vertical alignment */
    cursor: pointer;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black; /* Set color of the X */
}

.close-button img {
    width: 32px; /* Make SVG fill the container */
    height: 100%; /* Make SVG fill the container */
    display: block; /* Remove any extra space below the image */
}



}

/* PHONE */
@media (max-width: 760px) {  
    :root {
        --nav-max: 90%;
        --nav-pad-x: 15px;   /* typical mobile gutter */
      }
    }
    
    .agb-header  {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0px;
        background-color: black;
        top:0;
        margin-top:0;
    }

    /* ANFAHRT */
    .content p {
        font-size: 16px;
        margin-top: 0px;
        margin-bottom: 0px;
        
    }

    p{

        font-size: 16px;
    }

    .navbar {
        display: none; /* Hide navbar */
    }

    .content {
        top: 30%;
        position: relative;
        z-index: 1;
        text-align: center; /* Center the text horizontally */
        color: white;
        margin: 0 auto; /* Center the content horizontally */
        padding: 0 15px; /* Add some horizontal padding for the content */
    }



    .footer-text {
        display: flex; /* Use flexbox to stack links vertically */
        flex-direction: column; /* Stack links in a column */
        font-size: 16px;
        
        
    }

    .svg-icon {
        width: 32px; /* Set icon size */
        height: 32px; /* Set icon size */
        transition: transform 0.2s ease, filter 0.2s ease; /* Animation for scale and lighting effect */
    }

    .keller {
        
        padding-left: 15px; /* Left padding */
        padding-right: 15px; /* Right padding */
        padding-bottom: 32px; /* Bottom padding to create space above the button */
        
    }

    .keller p {
        font-size: 16px; /* Text size */
        margin-top: 32px; /* No top margin, space below */
    }

    .keller .button {
        margin-top: 0px;
        margin-bottom: 0px;
        display: inline-block; /* Ensure button behaves like a block element for padding/margin adjustments */
        padding: 8px 30px; /* Add padding */
        width: 180px; /* Set a specific width */
        text-align: center; /* Center text inside the button */
        align-items: center;
        font-size:26px;
        justify-content: center;
    }
    

    .circle-overlay {
        background: radial-gradient(circle at center, transparent 30%, black 25%);

    }

    .image-wrapper:hover img {
        /* You can still keep the hover effect here */
        transform: scale(1.05);
    }

    .overlay .button {
        margin-top: 0px;
        margin-bottom: 0px;
        display: inline-block;
        padding: 8px 30px;
        width: 180px;
        text-align: center;
        align-items: center;
        font-size: 26px;
    }

 

    .merch-section {
        background-color: black;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column; /* Stack items vertically */
        position: relative;
        z-index: 1;
        height:auto;
        
    }
    
    .merch-container {
        display: flex;
        flex-wrap: wrap; /* Allows items to wrap to the next line */
        justify-content: center;
        align-items: center;
         /* Adjust padding as needed */
        gap: 64px;
        max-width: 1500px; /* Max width for better control */
        margin: 0 auto;
        
    }

    .overlay .headline {
        font-size: 40px;
        padding-top:32px;
    }

    .overlay .text {
        padding-top:300px;
        font-size:16px;
        text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
    }
    .sticky-text {
        margin-top:64px;
        position: sticky;
        
        top: 10
        0px;
        left: 0; /* Reset left positioning */
        right: 0; /* Add right positioning to cover full width */
        transform: none; /* Remove the transform for centering */
        width: 100%; /* Ensure the width is full */
        padding: 0 5%; /* Add padding on the sides */
        box-sizing: border-box; /* Include padding in the width */
        text-align: center; /* Center the text */
        padding-bottom: 64px;
    }
    .sticky-text h2 {
        
        text-align: center;
        
        margin: 0 auto; /* Center the text block */
        width: 102%; /* Ensure the container takes the full width */
        font-size: 30px;
        line-height: 1;


    }

    .sticky-text p {
        font-size:16px;
        text-align: center;
        padding-top:16px;
        margin:0%;
        width: 100%;
        
    }


    .footer-burger {
    align-items: center;
    text-align: center;
    justify-content: center;
    padding-top: 128px;
}
.footer-textburger {
    display: flex; /* Use flexbox to stack links vertically */
    flex-direction: column; /* Stack links in a column */
    font-size: 16px;
    text-align: center;
    padding-top:16px;
    padding-bottom:32px;
   
    
    
}

.svg-iconburger {
    
    padding-top:24px;
    transition: transform 0.2s ease, filter 0.2s ease; /* Animation for scale and lighting effect */
    
}



.footer-content {
    text-align: center; /* Center text */
    padding-top:32px;
   
}

.svg-icons {
    display: flex; /* Use flexbox for the icons */
    margin-bottom: 16px; /* Space between icons and text */
}

.svg-link {
    margin: 0 8px; /* Space around each icon */
}

.svg-icon {
    width: 36px; /* Set icon size */
    height: 36px; /* Set icon size */
    transition: transform 0.2s ease, filter 0.2s ease; /* Animation for scale and lighting effect */
}

.svg-link:hover .svg-icon {
    transform: scale(1.1); /* Scale up on hover */
    filter: brightness(1.7); /* Light up effect on hover */
}

.footer-text {
    display: flex; /* Use flexbox to stack links vertically */
    flex-direction: column; /* Stack links in a column */
    font-size: 18px;
    
    
}

.footer-link {
    display: inline-block; /* Allow padding around links */
    margin: 0px 0; /* Space between text items */
    text-decoration: none; /* Remove underline */
    color: #fff; /* Set link color */
    text-transform: uppercase; /* Uppercase text */
    transition: font-weight 0.2s ease, transform 0.2s ease; /* Animation for font weight and scaling */
}

.footer-link:hover {
    font-weight: bold; /* Change font weight on hover */
    transform: scale(1.1); /* Scale up on hover */
}

    

.ankauf-section h2 {
        
    text-align: center;
    
    margin: 0 auto; /* Center the text block */
    width: 100%; /* Ensure the container takes the full width */
    font-size: 32px;
    line-height: 1;
    white-space: nowrap;


}

.ankauf-section p {
    font-size:16px;
    text-align: center;
    padding-top:16px;
    margin:0%;
}

.ankauf-sticky-text {
    margin-top:64px;
    position: relative;
    
    
    top: 0;
    left: 0; /* Reset left positioning */
    right: 0; /* Add right positioning to cover full width */
    transform: none; /* Remove the transform for centering */
    width: 100%; /* Ensure the width is full */
    padding: 0 5%; /* Add padding on the sides */
    box-sizing: border-box; /* Include padding in the width */
    text-align: center; /* Center the text */
    padding-bottom: 64px;
}

.year-heading::after {
    content: "";
    position: absolute;
    bottom:0;
    left: 0;
    width: 100%;
    height: 42px;
    background-color: #007BFF; /* Blue color */
    z-index: -1;
    transition: width 0.3s ease;
}

.rabatte-heading::after {
    content: "";
    position: absolute;
    bottom:0;
    left: 0;
    width: 100%;
    height: 42px;
    background-color: #007BFF; /* Blue color */
    z-index: -1;
}

.ankauf-section p {
    margin:0;
    font-size:16px;
}


.agb-back-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color:white;
    
}

.agb-icon {
    height: 32px; /* Adjust the size of the arrow as needed */
    width: auto;
    color:white;
    z-index:1;
    padding-left: 26px;
    transition: transform 0.3s ease;
}

.agb-icon:hover {
    transform: scale(1.1);
}
.agb-logo {
    height: 32px; /* Adjust the size of the logo as needed */
    width: auto;
    padding-right:60px;
}


.agb-main {
    padding-top: 64px;
    padding: 10px; /* Padding around the main content */
    font-size: 16px; /* Base font size */
    line-height: 1.5; /* Line height for better readability */
    
}

.agb-h1 {
    padding-top: 128px;
    color: white; /* Ensure the header text is visible */
    text-align: left;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom:32px;
    font-size: 24px;
}

.agb-p {
    font-size: 16px;
    padding-top:0px;
    margin-bottom: 16px; /* Space between paragraphs */
    color: white; /* Set text color for paragraphs */
    text-align: left;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 16px;
}




.agb-copy {
    margin-bottom: 16px; /* Space between paragraphs */
    color: white; /* Set text color for paragraphs */
    text-align: left;
    padding-left: 10px;
    padding-right: 10px;
}

.agb-bold{

    font-family: field gothic bold;
    color:white;
    font-size: 16px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 16px;
}
    .agb-main .button {
        margin-bottom:16px;
        margin-top:16px;
        font-size:28px;
    }

    .footercopyright {

        font-size: 12px;
        margin-top: 48px;
        color:white;
        text-align: center;
        padding-left: 10px;
        padding-right: 10px;
        bottom:0;
        line-height: 0.2;
    
    }

    .footercopyright .break {
        display: block;
        margin-top: 10px; /* Optional: adds a little space between the lines */
    }

    .datenschutz-text {
        font-size: 8px; /* Smaller font size for the paragraph text */
        color: #666; /* Color for the text, adjust as needed */
        margin-top: 8px; /* Space between the button and the text */
        text-align: center; /* Center align the text */
        padding-left:10px;
        padding-right:10px;
        margin-bottom: 16px;
    }

    .contact-form-container h2 {
        margin-top: 64px;
        margin-bottom: 16px;
        font-size: 30px;
        font-family: 'Field Gothic Bold', sans-serif; /* Ensure font consistency */
        position: relative; /* Required for positioning the pseudo-element */
        text-align: center; /* Center align text if desired */
    }

    .contact-form-container h2::after {
    content: "";
    position: absolute;
    bottom: -3px; /* Adjust as needed to place the box directly below the text */
    left: 50%; /* Center the box horizontally */
    transform: translateX(-50%); /* Shift the box left by 50% of its width to center it */
    width: 100%; /* Adjust width as needed */
    height: 26px; /* Height of the rectangle box */
    background-color: #007BFF; /* Blue color */
    z-index: -1; /* Ensure it is behind the heading text */
}

.contact-form-container {
    background-color: white;
    padding: 20px;
    border-radius: 0px;

    max-width: 500px;
    text-align: center;
    position: relative;
    z-index: 1;
}


.close-button {
    position: absolute;
    top: 48px;
    left: 16px;
    font-size: 0
; /* Reduce font size to make the X thinner */
    font-family: 'field gothic regular';
    line-height: 1; /* Ensure vertical alignment */
    cursor: pointer;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black; /* Set color of the X */
}

.close-button img {
    width: 32px; /* Make SVG fill the container */
    height: 100%; /* Make SVG fill the container */
    display: block; /* Remove any extra space below the image */
}



}






.platten2-copy .button {
    margin-bottom: 64px;
}


  /* ===== Slider box ===== */
  .fc-slider{
    position: relative;
    width: 100%;
    border-radius: 28px;
    overflow: hidden;
    aspect-ratio: 4 / 5;                       /* tall look; change if you like */
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.14);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    backdrop-filter: blur(12px) saturate(120%);
    box-shadow: 0 10px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.25);
    isolation: isolate;
  }
  
  .fc-track{
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 520ms cubic-bezier(.2,.8,.2,1);
  }
  
  .fc-slide{
    min-width: 100%;
    height: 100%;
  }
  .fc-slide img{
    width: 100%;
    height: 100%;
    object-fit: cover;           /* always fills, nicely centered */
    display: block;
  }
  
  /* Round blue arrow buttons (match your button language) */
  .fc-nav{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px; height: 46px;
    border: 0; border-radius: 50%;
    background: #007BFF;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
    transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
    z-index: 2;
  }
  .fc-nav:hover{
    background: #006EE3;
    transform: translateY(-50%) scale(1.06);
    box-shadow: 0 10px 26px rgba(0,0,0,.45);
  }
  .fc-prev{ left: 12px; }
  .fc-next{ right: 12px; }
  
  /* Dots (auto-generated) */
  .fc-dots{
    position: absolute;
    bottom: 12px; left: 50%;
    transform: translateX(-50%);
    display: flex; gap: 8px;
    z-index: 2;
  }
  .fc-dots button{
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.45);
    border: 0;
  }
  .fc-dots button[aria-current="true"]{ background: #fff; }
  
  /* ===== Responsive ===== */
/* Mobile layout for the carousel */
@media (max-width: 1024px){
    .feature-carousel .fc-grid{
      grid-template-columns: 1fr;   /* stack text over slider */
      gap: 48px;
    }
    .fc-slider{
      aspect-ratio: 4 / 5;          /* <- make mobile 4:5 */
    }
  }
  
  @media (max-width: 600px){
    
    .fc-slider{
      border-radius: 22px;
      aspect-ratio: 4 / 5;          /* keep 4:5 on phone */
    }
  }
  
  /* Optional: fallback for older Safari that ignores aspect-ratio */
  @supports not (aspect-ratio: 1 / 1){
    .fc-slider{ position: relative; }
    .fc-slider::before{ content:""; display:block; padding-top:125%; } /* 4:5 */
    .fc-track{ position:absolute; inset:0; }
  }

/* ---------- PLATTEN: sticky text over full-height images ---------- */
/* Your global rule has: section { height: 100vh }.
   We only override that for PLATTEN so the 4 panels can scroll fully. */
   #PLATTEN.platten2-section {
    height:auto;
  isolation:isolate;
  background:#000;
  z-index:0;
  }
  /* Make the overlay not push content down; it stays sticky on top of the images */
  #PLATTEN .platten2-overlay {
    padding-left: 0px !important;
    position: sticky;             /* <-- no extra navbar math here */
    z-index: 10;
    height: auto;           /* ensure your JS can measure it */
    overflow: visible;
    width: 100%;
    max-width: var(--nav-max, 65%);
    margin: 0 auto;
    padding: 0 var(--nav-pad-x, 45px);
    box-sizing: border-box;
  }
  
  #PLATTEN .platten2-overlay .hero-copy {
    padding-top: calc(var(--navbar-height) + var(--navbar-offset-top) + 305px);
    width: min(var(--text-width-ch), 100%);
  }
  
  /* Panels keep being one viewport tall and scroll under the sticky copy */
  #PLATTEN .platten2-panels { position: relative; z-index: 1; }
  #PLATTEN .platten2-panel  { height: 100vh; }
  #PLATTEN .platten2-panel img { width: 100%; height: 100%; object-fit: cover; display: block; }
  
  /* Make sure the merch section below isn't affected by PLATTEN stacking */

  /* ---------- MERCH: keep its layout & stacking unaffected ---------- */
  #merch.merch-section {
    position: relative;
    isolation: isolate;    /* separate stacking context from sticky overlay above */
    z-index: 0;
    margin-top: 0px !important;
    margin-bottom: 128px;
  }

  /* ANKAUF hero as background image (no video) */

  /* Optional: subtle darkening for readability on bright images */

  /* keep text above image/overlay */
  #ankauf.ankauf-hero .page-container{ position: relative; z-index: 1; margin-top:256px; }
  
/* ===== Ankauf: mobile portrait card with visible text ===== */
@media (max-width:1024px){
  /* same gutters, smaller radius */
  .ankauf-banner{ padding-inline: 16px; padding-top:0px; }

  /* 9/16 portrait like a phone screen */
  .ankauf-card{
    border-radius: 24px;
    aspect-ratio: 9 / 16;
    position: relative;
    display: block; /* keep as block; we'll absolutely position the text */
  }

  /* stronger bottom scrim so text pops on bright photos */
  .ankauf-scrim{
    background: linear-gradient(
      180deg,
      rgba(0,0,0,.10) 0%,
      rgba(0,0,0,.18) 35%,
      rgba(0,0,0,.55) 78%,
      rgba(0,0,0,.70) 100%
    );
  }

  /* put the text inside the card, pinned to the bottom */
  #ankauf .page-container{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 16px;
    margin-top: 0;                   /* override desktop offset */
    z-index: 2;
  }

  /* keep your existing text styling but tighten for small screens */
  #ankauf .hero-copy{
    width: 100%;
  }
  #ankauf .hero-copy h2{
    font-size: clamp(22px, 6.4vw, 28px);
    line-height: 1.12;
    margin-bottom: 32px;
  }
  #ankauf .hero-copy .lead{
    font-size: 15px;
    line-height: 1.4;
    margin-bottom:32px;
  }

  /* buttons wrap nicely on narrow widths */
  #ankauf .hero-actions{
margin-top:0px;
    flex-wrap: wrap;
  }

  /* bottom safe area so it doesn’t collide with iOS home bar */
  #ankauf .page-container{ padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}

  /* ------------------ SAFE PATCHES ------------------ */

/* 0) Turn your text dividers into real comments
   Example:
   /* ____Ankauf * /  /* ----whats the keller * /  /* mini video * /  /* AGB * /
*/

/* 1) Sections that must NOT be clamped to 100vh */
#PLATTEN.feature-carousel{
  height: auto !important;
  overflow: visible;
}

/* 2) Fix undefined var in Ankauf text block */
.ankauf-sticky-text{
  /* fallback to your existing gutter var */
  left: var(--nav-pad-x, 25px);
  width: calc(100% - 2 * var(--nav-pad-x, 25px));
}
@media (max-width:1024px){
  .ankauf-sticky-text{
    left: 0;
    width: 100%;
    padding: 0 var(--nav-pad-x, 16px);
  }
  #merch.merch-section {
    
    margin-bottom: 64px;
  }
}


/* 4) Mobile sticky-text typo fix */
@media (max-width:760px){
  .sticky-text{ top: 100px; } /* was “10  0px” */
}

/* 5) Fonts: correct formats (only if you keep using .ttf files) */
/* Example corrections; change only if your sources are .ttf */
@font-face {
  font-family: 'Field Gothic Regular';
  src: url('fonts/Outfit/static/Outfit-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Field Gothic Demi';
  src: url('fonts/Outfit/static/Outfit-Medium.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}

.navbar { scale: 1 !important; zoom: 1 !important; }

/* 1) Never scale the navbar */
.navbar { scale: 1 !important; zoom: 1 !important; }

/* 2) Stop Safari from auto-enlarging text */
html { -webkit-text-size-adjust: 100%; }
.navbar, .navbar * { font-synthesis: none; }

/* 3) Predictable nav type sizing */
.navbar .nav-links a{
  font-size: clamp(15px, 1.05vw, 18px);
}

/* 4) Safety: neutralize any stray transforms on the nav container */
.navbar{
  transform: translateX(-50%) !important;  /* position fix only */
}

/* 5) Safari-only guard (optional) */
@supports (-webkit-appearance: none) {
  .navbar { scale: 1 !important; }
}
/* and make sure any `font-family: field gothic bold;` → 'Field Gothic Bold' */
/* --- FINAL OVERRIDES: mobile pill on, desktop off --- */
/* ====== FOOTER SHRINK KIT — put this LAST ====== */
/* ===== Vinylkeller minimal footer — v2 (rounded, blue card, arrow) ===== */
:root{
  --vk-blue:#007BFF;
  --vk-blue-dark:#006EE3;
  --vk-bg:#000;
  --vk-surface:#121212;
  --vk-text:rgba(255,255,255,.92);
  --vk-muted:rgba(255,255,255,.72);
  --vk-hair:#1f1f1f;
}

/* Footer shell */
.vk-min-footer{
  background: var(--vk-bg);
  color: var(--vk-text);
  margin-top: 28px;
  border: 1px solid var(--vk-hair);
  border-bottom: none;
  border-radius: 28px 28px 0 0;
  overflow: hidden;
}
.vk-min-wrap{ max-width: var(--nav-max,75%); margin:0 auto; padding:0 var(--nav-pad-x,24px); }

/* ===== Blue promo card (newsletter) ===== */
.vk-min-card{
  background: var(--vk-blue);
  border: 0;
  border-radius: 22px;
  padding: clamp(18px,4vw,28px);
  text-align:center;
  margin: 32px 0 32px;
  color:#fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.vk-min-card h3{
  font-family:'Field Gothic Regular',sans-serif;
  font-weight:700;
  font-size: clamp(20px,3.2vw,26px);
  line-height:1.15; margin:0 0 6px;
  color:#fff;
}
.vk-min-card-sub{ margin:0 0 12px; font-size:14px; color:rgba(255,255,255,.9); }

/* ===== Form ===== */
.vk-min-form{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.vk-min-hint{ font-size:13px; color:rgba(255,255,255,.92); }
.vk-min-hint a{ color:#fff; text-decoration:underline; text-underline-offset:2px; }

/* Input + arrow button */
.vk-min-input-wrap{ width:min(560px,100%); position:relative; display:block; }

/* Pill input */
.vk-min-input-wrap input{
  width:100%;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.0);
  background:#fff;
  color:#111;
  padding:12px 60px 16px 16px;     /* more room for the circle button */
  font-size:16px;
  outline:0;
  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background-size .7s ease,
    color .2s ease;
}
.vk-min-input-wrap input::placeholder{ color:#8a8a8a; }
.vk-min-input-wrap input:focus{
  border-color: var(--vk-blue-dark);
  box-shadow: 0 0 0 4px rgba(0,123,255,.35);
}

/* Keep Safari’s contact autofill icon away from our button */
#vk-news-email::-webkit-contacts-auto-fill-button{
  visibility:hidden; display:none; pointer-events:none; position:absolute; right:-9999px;
}

/* Arrow button (inside the pill) */
.vk-min-go{
  position:absolute; top:50%; right:6px !important; left:auto !important;
  transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%;
  border:0; background: var(--vk-blue-dark);
  color:#fff;                     /* spinner uses currentColor */
  display:grid; place-items:center;
  cursor:pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  transition: transform .15s ease, filter .15s ease, background-color .15s ease, opacity .15s ease;
  z-index:2; overflow:hidden;
}
.vk-min-go:hover{ transform:translateY(-50%) scale(1.06); filter:brightness(1.05); }
.vk-min-go:active{ transform:translateY(-50%) scale(0.97); }

/* Spinner while sending */
.vk-min-go.is-loading svg{ opacity:0; transition:opacity .15s ease; }
.vk-min-go.is-loading::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width:18px; height:18px; margin:-9px 0 0 -9px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.95);
  border-right-color: transparent;
  animation:vk-spin .8s linear infinite;
}
@keyframes vk-spin{ to{ transform:rotate(360deg) } }

/* Success: subtle inner glow */
.vk-min-input-wrap.success input{
  box-shadow:0 0 0 4px rgba(0,123,255,.35) inset;
}

/* Success: pill fills to brand blue + white text */
.vk-min-input-wrap.fill-start input{
  background-image:linear-gradient(90deg, var(--vk-blue-dark), var(--vk-blue-dark));
  background-repeat:no-repeat;
  background-position:left top;
  background-size:0% 100%;
}
.vk-min-input-wrap.fill-go input{
  background-size:100% 100%;
  color:#fff;
}

/* Success: little blue check bubble over the button */
.vk-min-success{
  position:absolute; right:6px; top:50%;
  transform:translateY(-50%) scale(.4);
  width:30px; height:30px; border-radius:999px;
  display:grid; place-items:center;
  background: var(--vk-blue-dark);
  color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  animation:vk-pop .42s cubic-bezier(.2,.9,.2,1) forwards;
}
.vk-min-success::after{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid rgba(0,123,255,.45);
  animation:vk-ripple .6s ease-out forwards;
}
@keyframes vk-pop{
  0%{ opacity:0; transform:translateY(-50%) scale(.4) }
  60%{ opacity:1; transform:translateY(-50%) scale(1.05) }
  100%{ opacity:1; transform:translateY(-50%) scale(1) }
}
@keyframes vk-ripple{
  from{ transform:translateY(-50%) scale(.6); opacity:.9 }
  to{   transform:translateY(-50%) scale(1.6); opacity:0 }
}

/* Status line under the form */
#vk-news-status{ min-height:1em; font-size:13px; color:rgba(255,255,255,.95); }

/* ===== Links / address grid below ===== */
.vk-min-grid{
  display:grid;
  grid-template-columns: 1.05fr 1fr 1fr;
  gap: 24px;
  padding: 8px 0 16px;
}
.vk-min-name{ margin:0 0 2px; font-weight:700; font-size:14px; }
.vk-min-lines{ margin:0 0 6px; font-size:13px; color:var(--vk-muted); line-height:1.45; }
.vk-min-lines a{ color:#fff; text-decoration:none; border-bottom:1px solid transparent; }
.vk-min-lines a:hover{ border-color:rgba(255,255,255,.35); }
.vk-min-hours{ margin:6px 0 0; font-size:12px; color:var(--vk-muted); }

.vk-min-col h4{ font-size:13px; color:var(--vk-muted); margin:0 0 8px; font-weight:600; }
.vk-min-col ul{ list-style:none; padding:0; margin:0; display:grid; gap:6px; }
.vk-min-col a{ color:var(--vk-text); text-decoration:none; font-size:14px; line-height:1.25; }
.vk-min-col a:hover{ filter:brightness(1.12); transform: translateX(2px); transition:.12s; }

/* Bottom */
.vk-min-bottom{
  border-top:1px solid var(--vk-hair);
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0 14px;
  font-size:12px; color:var(--vk-muted);
}
.vk-min-social{ display:flex; gap:12px; }
.vk-min-social .svg-icon{ width:22px; height:22px; }

/* Responsive */
@media (max-width:1024px){
  .vk-min-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width:600px){
  .vk-min-grid{ grid-template-columns: 1fr; gap:18px; }
  .vk-min-bottom{ flex-direction:column; align-items:flex-start; gap:6px; }
  .vk-min-input-wrap input{ font-size:15px; padding-right:58px; }
  .vk-min-go{ width:38px; height:38px; right:6px; }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .vk-min-go.is-loading::after,
  .vk-min-success,
  .vk-min-success::after{ animation:none }
}


/* Wrapper keeps aspect ratio & rounded corners */
.image-wrapper {
  position: relative;
  aspect-ratio: 4 / 5;   /* keep your 4:5 card */
  border-radius: 30px;
  overflow: hidden;
}

/* Make both img and video fill the card */
.image-wrapper > img,
.image-wrapper > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transform-origin: center;
  transition: transform 480ms cubic-bezier(.2,.8,.2,1);
  /* Prevent video controls (if ever shown) from spilling out */
  border: 0;
}

/* Hover / focus zoom (desktop & keyboard) */
@media (hover:hover) and (pointer:fine) {
  .image-wrapper:hover > img,
  .image-wrapper:hover > video { transform: scale(1.2); }
}
.image-wrapper:focus-within > img,
.image-wrapper:focus-within > video { transform: scale(1.2); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .image-wrapper > img,
  .image-wrapper > video { transition: none; }
}

/* ===== ABOUT SPLIT (no boxes) ===== */
/* ===== ABOUT SPLIT (non-sticky) ===== */
/* ===== SOUNDWERK ACCORDION ===== */
/* ===== SOUNDWERK – Accordion (Chevron) ===== */
#soundwerk-accordion.vk-steps{ height:auto !important; color:#fff; margin:96px 0 128px; }
@media (max-width:1024px){ #soundwerk-accordion.vk-steps{ margin:56px 0 64px; } }

.vk-steps__title{
  font-family:'Field Gothic Regular',sans-serif;
  font-size: clamp(30px, 5vw, 48px);
  line-height:1.12; margin:0;
}
.vk-steps__title .h2-outfit{ font-family:'Field Gothic Light'; font-weight:200; font-size:36px; }
.vk-steps__kicker{ margin:8px 0 22px; font-size:16px; opacity:.92; }

.vk-acc2{ margin:0; padding:0;  }
.vk-acc2 .acc-item{ list-style:none;  }

.acc-head{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:18px; padding:18px 0; background:transparent; border:0; color:#fff;
  cursor:pointer; text-align:left;
}
.acc-title{
  font-family:'Field Gothic Bold',sans-serif;
  font-size: clamp(22px, 3.8vw, 16px);
  line-height:1.1; letter-spacing:.01em; color:rgba(255,255,255,.95);
  transition: color .18s ease, transform .18s ease;
}
.acc-head:hover .acc-title{ color:#fff; }
.acc-icon{
  width:46px; height:46px; flex:0 0 46px;        /* reserve space to avoid layout shift */
  display:grid; place-items:center;
  border:0; background:transparent; box-shadow:none; border-radius:999px;
  transition: transform .35s cubic-bezier(.2,.8,.2,1),
              background-color .2s ease, box-shadow .2s ease, opacity .2s ease;
}
/* the chevron itself */
.acc-icon::before{
  content:""; width:18px; height:18px; display:block;
  background-repeat:no-repeat; background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  opacity:.9;
}

.acc-head:hover .acc-icon{ transform: translateY(-1px); }  /* no circle on hover */

.acc-item.is-open .acc-icon{
  background:#007BFF;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  transform: rotate(180deg);
}
/* Panel animation (height) */
.acc-panel{
  overflow:hidden; height:0;
  transition: height .46s cubic-bezier(.2,.8,.2,1);
}
.acc-inner{
  padding: 2px 0 22px 0;
  max-width: var(--text-width-ch, 60ch);
  opacity: 0; transform: translateY(-6px);
  transition: opacity .26s ease, transform .26s ease;
}
.acc-item.is-open .acc-inner{ opacity:1; transform:none; }

/* Body copy */
.acc-inner p{ margin:0 0 10px; font-size:16px; line-height:1.55; }

/* Focus */
.acc-head:focus-visible{ outline:2px solid #fff; outline-offset:4px; border-radius:8px; }

/* Mobile tweaks */
@media (max-width:600px){
  .acc-title{ font-size: clamp(18px,6vw,26px); }
  .acc-icon{ width:42px; height:42px; }
}
@media (prefers-reduced-motion: reduce){
  .acc-panel{ transition:none; }
  .acc-inner{ transition:none; }
  .acc-icon{ transition:none; }
}
/* ===== Big Testimonial Text Reveal ===== */
.vk-big-quote { color:#fff; margin-top:256px; margin-bottom: 128px;}
@media (max-width:1024px){.page-container bq-grid {
padding:0px;}.bq-copy {font-size: 32px!important;} .vk-big-quote{ margin-top:128px; margin-bottom: 64px; } }

.bq-grid{
  display:grid;
  grid-template-columns:minmax(90px,160px) 1fr;
  gap:32px;
  align-items:flex-start;
}
@media (max-width:720px){
  .bq-grid{ grid-template-columns:1fr; gap:18px; }
}

.bq-side{
  font-family:'Field Gothic Light', sans-serif;
  font-size:16px;
  line-height:1.2;
  color:#fff;
  letter-spacing:.02em;
  padding-top:.35em;
}

.bq-copy{
  font-family:'Field Gothic Regular', sans-serif;
  font-size:clamp(22px, 3.2vw, 40px);
  line-height:1.28;
  letter-spacing:.01em;
  margin:0;
}
.bq-copy strong{
  font-family:'Field Gothic Bold', sans-serif;
  font-weight:700;
  display:inline-block;
  margin-right:.35em;
}

/* Word reveal */
.bq-copy .reveal-word{
  display:inline-block;
  opacity:0;
  transform:translateY(.6em);
  transition:
    transform .6s cubic-bezier(.2,.8,.2,1),
    opacity .5s ease;
  transition-delay:var(--d,0ms);
}
.bq-copy.is-revealed .reveal-word{
  opacity:1;
  transform:none;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .bq-copy .reveal-word{ transition:none; opacity:1; transform:none; }
}
.bq-copy .reveal-word { display:inline-block; margin-right:0; }
.bq-copy { word-spacing:.02em; } /* optional */