/* ═══════════════════════════════════════════════════════════════════════
   responsive.css – Spatzabrettle
   Breakpoints:
     ≤ 1023px  Tablet + Mobil (alles unter Desktop)
     ≤ 767px   Kleines Mobil
     ≤ 479px   Sehr kleines Mobil / iPhone SE
═══════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
   PAGE SPACING SYSTEM — Anwendungsregeln
   Variablen kommen aus style.css :root (Mobile-First).
   Hier: Desktop-Override ≥ 768px + Konsumenten-Regeln.
════════════════════════════════════════════════════════════════════════════ */

/* ── Desktop: mehr Atemraum (≥ 768px) ───────────────────────────────────── */
@media (min-width: 768px) {
  :root {
    --pg-banner-pad-v: 1.75rem; /*  28px */
    --pg-banner-pad-h: 2rem; /*  32px */
    --pg-content-top: 2rem; /*  32px */
    --pg-btn-top: 2rem; /*  32px */
    --pg-btn-bottom: 1.75rem; /*  28px */
    --pg-h2-top: 2.5rem; /*  40px */
    --pg-h2-bottom: 0.5rem; /*   8px */
    --pg-p-gap: 1.125rem; /*  18px */
  }
}

/* ── Desktop (≥ 768px): Container + Spacing ─────────────────────────────── */
@media (min-width: 768px) {
  /* content-wrapper: zentriert, max-width 800px, symmetrisches Padding        */
  .content-wrapper {
    max-width: 800px;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  /* grid-wrapper / page-intro / cta-center: kein seitliches Padding mehr,
     da übergeordneter content-wrapper / #content die Zentrierung übernimmt    */
  .grid-wrapper,
  .page-intro,
  .cta-center {
    padding-left: 0;
    padding-right: 0;
  }

  /* Vertikaler Rhythmus: mehr Luft auf Desktop                                */
  .grid-wrapper,
  .content-wrapper,
  .page-intro,
  .cta-center {
    margin-bottom: 5rem;
  }

  /* Primär-Button: Desktop – natürliche Breite, zentriert via .cta-center     */
  .btn-primary {
    width: auto;
    max-width: none;
    min-width: 240px;
  }
}

/* ── Banner: symmetrisches inneres Padding ───────────────────────────────── */
.site-header-title {
  padding: var(--pg-banner-pad-v) var(--pg-banner-pad-h);
}

/* ── Banner → erster Inhalt: Atemraum ───────────────────────────────────── */
#contentcontainercontainer {
  padding-top: var(--pg-content-top);
}

/* ── Kachel-Badges + Buttons: gleich breit (Mobil) ──────────────────────── */
@media (max-width: 991px) {
  .tile-bottom {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
  }
  .tile-date {
    align-items: stretch;
  }
  .tile-date-soldout-badge,
  .tile-avail {
    display: block;
    box-sizing: border-box;
  }
  .tile-btn-group {
    display: contents;
  }
  .tile-btn {
    display: block;
    box-sizing: border-box;
    text-align: center;
  }
  /* Verfügbarkeitsanzahl mobil inline (einzeilig mit " · ") */
  .tile-avail-count {
    display: inline;
  }
  .tile-avail-count::before {
    content: " · ";
    font-weight: 400;
    letter-spacing: 0;
  }
}

/* ── Kachel-Badges + Buttons: gleich breit (Desktop) ────────────────────── */
@media (min-width: 992px) {
  .tile-bottom {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
  }
  .tile-btn-group {
    display: contents;
  }
  .tile-btn {
    display: block;
    text-align: center;
    box-sizing: border-box;
  }
}

/* ── Desktop (≥ 992px): 4 Spalten nebeneinander ─────────────────────────── */
@media (min-width: 992px) {
  ul.teasertileframe {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 2rem !important;
  }
  ul.teasertileframe > li {
    width: 100% !important; /* Kassenbon-Fix: Siquando calc(25%-12px) override */
  }
}

/* ── Tablet + Mobil (< 1024px) ──────────────────────────────────────── */
@media (max-width: 1023px) {
  /* Mobil-Slider auf index.html auf kleinen Bildschirmen ausblenden */
  #ngparatilepicturechanger-w7e761e0f0a14ad48724227710366851 {
    display: none !important;
  }

  /* Navplaceholder: kein Platz auf Mobil (Nav nicht fixed → kein Placeholder nötig) */
  #navplaceholder {
    height: 0;
    overflow: hidden;
    flex: 0 0 0;
  }

  /* Teaser: 1 Spalte auf Tablet (< 992px → unter dem Grid-Breakpoint) */
  ul.teasertileframe {
    gap: 1.25rem !important;
  }
  ul.teasertileframe > li {
    width: 100% !important;
    margin-bottom: 0;
  }

  /* CTA-Button: symmetrischer Abstand über/unter dem Button */
  .cta-center {
    margin-top: 0;
    margin-bottom: 3rem;
  }

  /* Mobile Intro-Text (index.php: sqrdesktophidden-Version des Einleitungstexts) */
  .mobile-intro-text {
    font-family: "Open Sans", Verdana, Helvetica, sans-serif;
    font-size: 15px;
    color: #5a5a5a;
    line-height: 1.7;
    padding: 0 4px 20px;
  }
  .mobile-intro-text p {
    margin: 0 0 14px 0;
    font-size: 15px;
    color: #5a5a5a;
    line-height: 1.7;
  }
  .mobile-intro-text p:last-child {
    margin-bottom: 0;
  }
  .mobile-intro-text strong {
    color: #464646;
  }
  .spatzabrettle-jahre {
    color: inherit;
  }

  /* Mobiler animierter Header */
  .animated-header-container {
    text-align: center;
    padding: 30px 15px;
    background: #ffffff;
    margin: 0 auto 20px auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    max-width: 100%;

    /* Animation: Startwerte */
    opacity: 0;
    transform: translateY(30px);
    animation: flyIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  }

  @keyframes flyIn {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animated-header-container .kicker-badge {
    display: inline-block;
    font-family: "Open Sans", Verdana, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #e31e24;
    background: rgba(227, 30, 36, 0.08);
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 12px;
  }

  .animated-header-container .gradient-heading {
    font-family: "Open Sans", Verdana, Helvetica, sans-serif;
    font-size: 24px;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0;
    letter-spacing: 0.02em;
    line-height: 1.3;

    /* Roter Verlauf für den Text */
    background: linear-gradient(135deg, #b01318 0%, #e31e24 50%, #ff4b4b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .animated-header-container .header-line {
    width: 50px;
    height: 4px;
    background: linear-gradient(90deg, #b01318, #ff4b4b);
    margin: 15px auto 0 auto;
    border-radius: 2px;
    transition: width 0.4s ease;
  }

  /* Interaktivität beim Antippen/Scrollen (Touch) */
  .animated-header-container:active .header-line {
    width: 120px;
  }
  /* ════════════════════════════════════════════════════════════════════════════
   PROGRAMM-KACHELN: Mobil – leichte Karte mit Trennung
════════════════════════════════════════════════════════════════════════════ */
  ul.teasertileframe > li {
    background: #fff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.07);
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 12px;
  }
  ul.teasertileframe > li > .teasertileframe-text {
    padding: 10px 14px 16px;
  }

  /* ════════════════════════════════════════════════════════════════════════════
       MOBILE HERO BANNER (Hoch, Weiß, animiert)
    ════════════════════════════════════════════════════════════════════════════ */
  .mobile-hero-banner {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: -40px;
    margin-bottom: 40px;
    /* Viel mehr Höhe oben und unten für den typischen "Huber-Veranstaltung" Look */
    padding: 80px 20px 70px 20px;

    background: linear-gradient(180deg, #ffffff 0%, #ffffff 60%, #fcebeb 100%);
    border-bottom: 2px solid #e31e24;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden; /* Verhindert, dass Animationen Ränder erzeugen */
  }

  /* Das Logo: Jetzt etwas kleiner (130px statt 180px) */
  .mobile-hero-banner .hero-logo {
    width: 130px;
    height: auto;
    margin-bottom: 30px;
    opacity: 0;
    transform: scale(0.95);
    transition:
      opacity 1s ease-out,
      transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  /* ... (Der Rest der Logo-Animation bleibt gleich) ... */

  /* Der neue CTA-Button */
  .mobile-hero-banner .hero-cta {
    display: inline-block;
    margin-top: 25px;
    background: #e31e24; /* Das typische Huber-Rot */
    color: #ffffff;
    font-family: "Open Sans", Verdana, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 14px 28px;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(227, 30, 36, 0.25); /* Roter, weicher Schatten */
    transition:
      transform 0.2s ease,
      background 0.2s ease;
  }

  /* Interaktiver Klick-Effekt für Touchscreens */
  .mobile-hero-banner .hero-cta:active {
    transform: scale(0.96);
    background: #b01318; /* Etwas dunkleres Rot beim Antippen */
    box-shadow: none;
  }

  /* Wenn das JS die Klasse setzt: Logo erscheint und beginnt danach zu schweben */
  .mobile-hero-banner .hero-logo.is-loaded {
    opacity: 1;
    transform: scale(1);
    /* 1s Verzögerung, damit es erst einfliegt und dann schwebt */
    animation: gentleFloat 4s ease-in-out 1s infinite;
  }

  @keyframes gentleFloat {
    0% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-8px);
    }
    100% {
      transform: translateY(0px);
    }
  }

  /* Der Text-Wrapper: Startet unten und unsichtbar */
  .mobile-hero-banner .hero-text-wrapper {
    opacity: 0;
    transform: translateY(30px);
    transition:
      opacity 0.8s ease-out 0.3s,
      transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s;
  }

  /* Wenn das JS die Klasse setzt: Text fliegt elegant hoch */
  .mobile-hero-banner .hero-text-wrapper.is-loaded {
    opacity: 1;
    transform: translateY(0);
  }

  .mobile-hero-banner .hero-kicker {
    display: block;
    font-family: "Open Sans", Verdana, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #e31e24;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 10px;
  }

  .mobile-hero-banner .hero-heading {
    font-family: "Open Sans", Verdana, Helvetica, sans-serif;
    font-size: 28px;
    font-weight: 800;
    color: #464646;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.2;
  }
  /* CTA-Button: volle Breite auf Mobile (überschreibt fit-content aus Normalizer) */
  a.cta-inline {
    width: 100%;
    min-width: unset;
    margin-left: 0;
    margin-right: 0;
    padding: 14px 20px;
    font-size: 14px;
  }

  /* Absätze: mehr Luft zwischen Zeilen */
  p {
    line-height: 1.5;
  }

  /* Inline-Span Größen skalieren */
  span[style*="font-size:28px"],
  span[style*="font-size: 28px"] {
    font-size: 22px !important;
  }
  span[style*="font-size:22px"],
  span[style*="font-size: 22px"] {
    font-size: 18px !important;
  }

  /* Formulare: iOS Zoom verhindern + Touch-Größen */
  .ngform input[type="text"],
  .ngform input[type="email"],
  .ngform input[type="tel"],
  .ngform input[type="password"],
  .ngform input[type="number"],
  .ngform input[type="date"],
  .ngform input[type="time"],
  .ngform select,
  .ngform textarea {
    font-size: 16px;
    min-height: 44px;
    box-sizing: border-box;
  }
  .ngform input[type="submit"],
  .ngform input[type="file"]::file-selector-button {
    min-height: 44px;
    width: 100%;
    box-sizing: border-box;
    font-size: 15px;
  }
  .ngform .ngformcolumn {
    float: none;
    width: 100%;
  }
  .ngform .ngformleft,
  .ngform .ngformright {
    width: 100%;
    float: none;
    display: block;
  }

  /* Buttons-Plugin: Touch-Größe */
  .sqwpluginbuttons a {
    padding: 12px 20px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Kalender-Button */
  .ngpluginparacalendarbutton a {
    min-height: 44px;
    padding: 12px 20px;
  }

  /* Vergangen-Badge */
  ul.teasertileframe > li.tileframe-past::after {
    font-size: 9px;
    padding: 2px 7px;
    top: 8px;
    right: 8px;
  }
}

/* ── Kleines Mobil (< 768px) ─────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Teaser: 1 Spalte, engeres Gap */
  ul.teasertileframe {
    gap: 1rem !important;
  }
  ul.teasertileframe > li {
    width: 100% !important;
    padding: 0;
  }
  /* aspect-ratio: global 3/4 aus style.css gilt auch mobil */
  .teasertileframe-text-main h3 {
    font-size: 17px;
    line-height: 1.3;
  }
  .teasertileframe-text-main p {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }
  .teasertileframe-text-link a {
    font-size: 14px !important;
    padding: 8px 10px !important;
  }

  /* Textpicturesplit: stacken, Bild oben */
  .ngparatextpicturesplit {
    flex-direction: column;
  }
  .ngparatextpicturesplitleft {
    flex-direction: column;
  }
  .ngparatextpicturesplitright {
    flex-direction: column;
  }
  .ngparatextpicturesplitpicture,
  .ngparatextpicturesplittext {
    width: 100%;
    min-height: unset;
  }
  .ngparatextpicturesplitpicture {
    height: 240px;
  }
  .ngparatextpicturesplittext > div {
    padding: 5% 6%;
  }

  /* Inline-Spans weiter deckeln */
  span[style*="font-size:28px"],
  span[style*="font-size: 28px"] {
    font-size: 18px !important;
  }
  span[style*="font-size:22px"],
  span[style*="font-size: 22px"] {
    font-size: 16px !important;
  }
  span[style*="font-size:20px"],
  span[style*="font-size: 20px"] {
    font-size: 15px !important;
  }

  /* Radio- / Checkbox-Touch-Ziele */
  .ngradiogroup,
  .ngcheckboxgroup {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
  }
  .ngform input[type="radio"],
  .ngform input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    cursor: pointer;
  }

  /* Schaltflächen: Blocklayout */
  .sqwpluginbuttons {
    flex-direction: column;
    align-items: stretch;
  }
  .sqwpluginbuttons a {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    margin: 6px 0;
  }

  /* Sitzplan-Bild auf Mobil */
  img.picture {
    max-width: 100%;
    height: auto;
  }

  /* Footer Nav: umbrechen */
  #footer ul {
    flex-wrap: wrap;
  }
}

/* ── Sehr kleines Mobil (< 480px) ────────────────────────────────────── */
@media (max-width: 479px) {
  /* Teaser: 1 Spalte, minimaler Gap */
  ul.teasertileframe {
    gap: 0.875rem !important;
  }
  ul.teasertileframe > li {
    width: 100% !important;
  }
  /* aspect-ratio: global 3/4 aus style.css gilt auch hier */
  .teasertileframe-text-main h3 {
    font-size: 17px;
  }
  .teasertileframe-text-main p {
    font-size: 16px !important;
  }

  /* Innenabstand reduzieren */
  #content .sqrallwaysboxed,
  #content .sqrmobileboxed {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Inline-Spans weiter deckeln */
  span[style*="font-size:28px"],
  span[style*="font-size: 28px"] {
    font-size: 17px !important;
  }
  span[style*="font-size:22px"],
  span[style*="font-size: 22px"] {
    font-size: 15px !important;
  }
  span[style*="font-size:20px"],
  span[style*="font-size: 20px"] {
    font-size: 15px !important;
  }
  span[style*="font-size:18px"],
  span[style*="font-size: 18px"] {
    font-size: 14px !important;
  }

  /* Nav: kompakte Einrückung */
  #nav ul li li > a {
    padding-left: 28px;
  }
  #nav ul li li li > a {
    padding-left: 44px;
  }

  /* Textpicturesplit: Bild etwas höher für Hochformat */
  .ngparatextpicturesplitpicture {
    height: 200px;
  }
}

/* ── Shared Touch Improvements (alle mobilen Breakpoints) ───────────── */
@media (hover: none) and (pointer: coarse) {
  /* Tap-Highlight unterdrücken für native App-Feel */
  a,
  button,
  input[type="submit"],
  label {
    -webkit-tap-highlight-color: transparent;
  }

  /* Hover-Effekte deaktivieren (ungewolltes Sticky-Hover auf Touch) */
  a.cta-inline:hover {
    background: #e31e24;
  }
  .sqwpluginbuttons a:hover {
    background: #464646;
    border-color: #464646;
  }
  ul.teasertileframe-hover
    > li
    > .teasertileframe-picture:hover
    > picture
    > img {
    filter: none;
  }
}

/* ── Grauer Kontaktbalken (#filltop) auf Mobil ausblenden ───────────────── */
@media (max-width: 1023px) {
  #contactcontainer {
    display: none;
  }
}

/* ── Footer: Desktop ────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  #commoncontainer {
    background: #e31e24;
    padding: 1.75rem 0;
  }
  #common {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    text-align: left;
    background: #e31e24;
  }
  #common::before {
    content: "SPATZABRETTLE";
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.6);
    flex-shrink: 0;
  }
  #common::after {
    display: none;
  }
  #common ul.sqrcommonnav {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0 1.75rem;
    justify-content: flex-end;
  }
  #common ul.sqrcommonnav li {
    display: block !important;
  }
  #common ul.sqrcommonnav li a {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: color 0.15s;
  }
  #common ul.sqrcommonnav li a:hover {
    color: #fff;
  }
}

/* ── Footer: Mobil ───────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  #commoncontainer {
    background: #e31e24;
    border-top: none;
    padding: 1.25rem 0;
    margin-top: 0;
  }
  #common {
    background: #e31e24;
    padding: 0 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  #common::before {
    content: "SPATZABRETTLE";
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.5);
  }
  #common::after {
    content: "© 2026 Huber Veranstaltung + Catering";
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.03em;
    display: block !important;
  }
  #common ul.sqrcommonnav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 20px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  #common ul.sqrcommonnav li {
    display: none !important;
  }
  #common ul.sqrcommonnav li:has(a[href="impressum.php"]),
  #common ul.sqrcommonnav li:has(a[href="datenschutzerklaerung.php"]) {
    display: block !important;
  }
  #common ul.sqrcommonnav li a {
    display: inline-block;
    padding: 4px 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
  }
  #common ul.sqrcommonnav li a:hover {
    color: #fff;
  }
}

/* ── Footer: Mobile ─────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .minimal-footer { padding: 2.5rem 5% 2rem; }
  .footer-grid { margin-bottom: 1rem; }
  .footer-mobile-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0;
    margin-bottom: 1.25rem;
    font-size: 0.85rem;
  }
  .footer-mobile-contact a,
  .minimal-footer .footer-col a {
    color: #94a3b8 !important;
    text-decoration: none;
  }
  .footer-mobile-contact a:hover,
  .minimal-footer .footer-col a:hover { color: #fff !important; }
}

/* ── Mobile Nav: Icon-only (Text ausblenden) ─────────────────────────────── */
@media (max-width: 1023px) {
  #nav a.sqrnavshow,
  #nav a.sqrnavhide {
    font-size: 0;
    color: transparent;
    /* Kein display-Override – Layout-CSS steuert show/hide der Buttons */
  }
}

/* ── Textpicturesplit: Bildposition Mobil (Fix für verschobene Bilder) ───── */
@media (max-width: 767px) {
  .ngparatextpicturesplitpicture {
    position: relative;
    overflow: hidden;
  }
  .ngparatextpicturesplitpicture img.picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transform: none;
  }
}

/* ── Mobil: Logo IN Navbar (absolut) + Navbar volle Breite ──────────────── */
@media (max-width: 1023px) {
  /* filltop: normaler Block, relativ positioniert als Anker fürs Logo */
  #filltop {
    display: block;
    position: relative;
    background: #ffffff;
  }

  /* Logo: absolut über dem Navcontainer, linksbündig */
  #logocontainer {
    position: absolute;
    top: 0;
    left: 0;
    height: 80px;
    display: flex;
    align-items: center;
    padding: 0 0 0 14px;
    background: transparent;
    z-index: 10;
    pointer-events: none; /* damit Klicks auf die Nav-Links darunter gehen */
  }
  #logocontainer a {
    pointer-events: auto;
  }
  #logo {
    padding: 0;
    margin: 0;
  }
  #logo img {
    max-width: 60px; /* Vorher 68px - probiere hier z.B. 40px oder 45px */
    width: 60px; /* Hier exakt den gleichen Wert eintragen! */
    height: auto;
    margin: 0;
  }

  /* Navcontainer: volle Breite */
  #navcontainer {
    display: block;
    width: 100%;
    padding: 0;
    background: #ffffff;
    border-bottom: 2px solid #e31e24;
    box-sizing: border-box;
  }
  #nav {
    padding: 0;
    background: #ffffff;
  }

  /* Hamburger-Toggle-Zeile: 80px hoch, links Platz für Logo */
  #nav > div {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 16px 0 96px;
    box-sizing: border-box;
  }

  /* Hamburger-Icon größer */
  #nav a.sqrnavshow,
  #nav a.sqrnavhide {
    background-size: 30px 30px;
    min-width: 48px;
    min-height: 48px;
  }
}

/* ── Fix: JS setzt flexrfixed → Nav wird fixed → Logo verschwindet ───────── */
@media (max-width: 1023px) {
  html.flexrfixed #navcontainer {
    position: static;
    top: auto;
    width: 100%;
  }
  html.flexrfixed #navplaceholder {
    height: 0;
    overflow: hidden;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   FORMS — Modernes Design (Desktop + Mobil)
════════════════════════════════════════════════════════════════════════════ */

/* Consent-Checkbox: Text als Fließtext, Link rot */
.ngform label.ngformright > span {
  display: inline;
}
.ngform label.ngformright > span a {
  color: #e31e24;
  text-decoration: underline;
}

/* Pflichtfeld-Indikator: roter Punkt via ::after auf .ngmandatory */
.ngformlabel.ngmandatory::after {
  content: " ●";
  color: #e31e24;
  font-size: 8px;
  vertical-align: super;
  margin-left: 2px;
  line-height: 1;
}

/* Pflichtfelder-Hinweis: dezent, linksbündig — float-Kontext explizit brechen */
.ngform .clearfix > p {
  display: block;
  float: none;
  width: 100%;
  clear: both;
  padding: 0;
  margin: 8px 0 0;
  font-size: 11px;
  color: #bbb;
  text-align: left;
}

/* Formular-Container: Grau raus, weißes Panel mit Schatten */
.paragraphborder_default {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
  padding: 20px;
}

/* Inputs + Textarea + Select: sauber, helles Grau, roter Fokus */
.ngform input[type="text"],
.ngform input[type="password"],
.ngform input[type="email"],
.ngform input[type="tel"],
.ngform input[type="number"],
.ngform input[type="date"],
.ngform input[type="time"],
.ngform select,
.ngform textarea {
  background: #fafafa;
  border: 1.5px solid #e8e8e8;
  border-radius: 4px;
  color: #333;
  outline: none;
  transition:
    border-color 0.2s,
    background 0.2s;
}

.ngform input[type="text"]:focus,
.ngform input[type="password"]:focus,
.ngform input[type="email"]:focus,
.ngform input[type="number"]:focus,
.ngform input[type="date"]:focus,
.ngform input[type="time"]:focus,
.ngform select:focus,
.ngform textarea:focus {
  border-color: #e31e24;
  background: #fff;
}

/* Radio / Checkbox: Akzentfarbe Rot */
.ngform input[type="radio"],
.ngform input[type="checkbox"] {
  accent-color: #e31e24;
}

/* Radio-Gruppen: leichte Karte */
.ngform .ngradiogroup {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #f7f7f7;
  border: 1.5px solid transparent;
  border-radius: 4px;
  padding: 10px 12px;
  margin-bottom: 6px;
  cursor: pointer;
  line-height: 1.45;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.ngform .ngradiogroup:has(input:checked) {
  border-color: #e31e24;
  background: #fff5f5;
}

/* Submit-Button: Rot */
.ngform input[type="submit"],
.ngform input[type="file"]::file-selector-button {
  background: #e31e24;
  border-color: #e31e24;
  color: #fff;
  border-radius: 4px;
  transition:
    background 0.2s,
    transform 0.1s;
  cursor: pointer;
}
.ngform input[type="submit"]:hover,
.ngform input[type="file"]::file-selector-button:hover {
  background: #b01318;
  border-color: #b01318;
}
.ngform input[type="submit"]:active {
  transform: scale(0.98);
}

/* ── Mobil (< 1024px): gestapeltes Layout ───────────────────────────────── */
@media (max-width: 1023px) {
  /* Container-Wrapper transparent, Form selbst ist die Karte */
  .paragraphborder_default {
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
    border-radius: 0;
  }
  .ngform {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.07);
    padding: 24px 20px 28px;
  }

  /* Zeilenabstand */
  .ngform .clearfix {
    margin-bottom: 0;
  }
  .ngform .clearfix + .clearfix {
    margin-top: 18px;
  }
  .ngform .ngformspacer {
    display: none;
  }

  /* Labels: kompakt, uppercase, über dem Feld */
  .ngform .ngformlabel {
    display: block;
    float: none;
    width: 100%;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: #999;
    text-transform: uppercase;
    padding: 0 0 6px 2px;
    margin: 0;
  }
  .ngform .ngformlabel.ngmandatory {
    color: #777;
  }

  /* Inputs: volle Breite, größerer Radius */
  .ngform input[type="text"],
  .ngform input[type="email"],
  .ngform input[type="number"],
  .ngform textarea {
    display: block;
    float: none;
    width: 100%;
    box-sizing: border-box;
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 16px;
    -webkit-appearance: none;
  }

  /* ngformright: volle Breite, kein Float */
  .ngform .ngformright {
    float: none;
    width: 100%;
    display: block;
    margin: 0;
    padding: 0;
  }

  /* Textarea */
  .ngform textarea {
    min-height: 88px;
    resize: vertical;
  }

  /* Radio-Gruppen mobil: etwas größer */
  .ngform .ngradiogroup {
    border-radius: 10px;
    padding: 13px 14px;
    margin-bottom: 8px;
    font-size: 14px;
    min-height: auto;
  }
  .ngform .ngradiogroup input[type="radio"] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    flex-shrink: 0;
    margin: 2px 0 0;
  }

  /* Checkbox-Zeilen (Newsletter, Datenschutz) */
  .ngform label.ngformright {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 13px;
    color: #555;
    line-height: 1.5;
    cursor: pointer;
    padding: 6px 0;
  }
  .ngform label.ngformright input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    flex-shrink: 0;
    margin: 1px 0 0;
  }

  /* Radio-Label: kompakt damit Titel + Datum + Preis auf eine Zeile passen */
  .ngform .ngradiogroup {
    font-size: 13px;
  }

  /* Pflichtfelder-Hinweis */
  .ngform .clearfix > p {
    font-size: 11px;
    color: #bbb;
    margin: 6px 0 0;
    text-align: left;
    padding-left: 0;
  }

  /* Submit-Button: volle Breite */
  .ngform input[type="submit"] {
    display: block;
    float: none;
    width: 100%;
    border-radius: 10px;
    padding: 17px 24px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    -webkit-appearance: none;
    margin-top: 8px;
    box-shadow: 0 4px 16px rgba(227, 30, 36, 0.22);
  }
  .ngform input[type="submit"]:active {
    box-shadow: none;
  }
}

@media (max-width: 1023px) {
  /* Geöffnete Nav: helles Panel */
  #nav.sqrnavopen {
    background: #ffffff;
  }

  /* Öffnungs-Animation */
  #nav.sqrnavopen > ul {
    animation: navSlideDown 0.2s ease both;
  }
  @keyframes navSlideDown {
    from {
      opacity: 0;
      transform: translateY(-6px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Top-Level Nav-Links (Dunkle Schrift statt weiß) */
  #nav.sqrnavopen > ul > li > a {
    color: #464646;
    font-size: 15px;
    letter-spacing: 0.06em;
    padding: 17px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    transition: background 0.15s;
  }
  #nav.sqrnavopen > ul > li > a:hover {
    background: rgba(0, 0, 0, 0.03);
    color: #e31e24;
  }

  /* Aktive Seite rot */
  #nav.sqrnavopen > ul > li.active > a {
    color: #e31e24;
    font-weight: 700;
    border-bottom-color: rgba(227, 30, 36, 0.15);
  }

  /* HOME-Icon dunkelgrau (%23464646) */
  #nav.sqrnavopen ul li.sqrnavhome > a {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23464646' d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; /* Verhindert das Kacheln */
    background-position: 20px center; /* Setzt das Icon schön nach links */
    background-size: 20px 20px; /* Kontrolliert die Größe */
    padding-left: 54px; /* Schiebt den Text "HOME" aus dem Icon heraus */
  }

  /* Chevron-Icons grau (bleibt) */
  #nav.sqrnavopen li.sqrnavmore > a {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23888888' d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E");
    background-size: 10px 10px;
  }
  #nav.sqrnavopen li.sqrnavopen > a {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23888888' d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z'/%3E%3C/svg%3E");
    background-size: 10px 10px;
  }

  /* Sub-Items (PROGRAMM-Untermenü) - helles Grau */
  #nav.sqrnavopen > ul > li > ul {
    background: #fcfcfc;
  }
  #nav.sqrnavopen > ul > li > ul > li > a {
    color: #5a5a5a;
    font-size: 13px;
    padding: 13px 20px 13px 36px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    letter-spacing: 0.04em;
  }
  #nav.sqrnavopen > ul > li > ul > li > a:hover {
    color: #e31e24;
  }

  /* Vergangen in heller Nav */
  #nav.sqrnavopen li.nav-past > a {
    opacity: 0.5;
  }

  /* X-Icon wenn Nav offen (Dunkelgrau: %23464646 statt weiß) */
  #nav.sqrnavopen a.sqrnavhide {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23464646' d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
    background-size: 24px 24px;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   TYPOGRAFIE-SKALIERUNG — Responsive Overrides
   h2/h3/.section-heading → fluid via clamp() in style.css (kein Override nötig)
   Hier: nur h1, .gradient-heading, .site-header-title (Sonderfälle)
════════════════════════════════════════════════════════════════════════════ */

/* ── Tablet (768–1023px) ─────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  h1 {
    font-size: 2.4rem;
  } /* 38px */
  h4 {
    font-size: 1.15rem;
  } /* 18px */
  .gradient-heading {
    font-size: 2.2rem;
  } /* 35px */

  .site-header-title {
    font-size: 2.2rem;
    letter-spacing: 0.05em;
  }
  .mobile-logo img {
    height: 36px;
    max-width: 80px;
  }
}

/* ── Mobil (≤767px) ─────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  h1 {
    font-size: 1.6rem;
  } /* 26px */
  .gradient-heading {
    font-size: 1.5rem;
  } /* 24px */

  .site-header-title {
    font-size: 1.35rem;
    letter-spacing: 0.04em;
  }
  .site-header {
    padding-bottom: 44%;
  }
}

/* ── Sehr klein (≤479px) ────────────────────────────────────────────────── */
@media (max-width: 479px) {
  h1 {
    font-size: 1.4rem;
  } /* 22px */
  .gradient-heading {
    font-size: 1.3rem;
  } /* 21px */

  .site-header-title {
    font-size: 1.1rem;
    letter-spacing: 0.03em;
  }
}

/* ── Mobil (≤767px): Nav-ul mit position:fixed aus overflow:hidden befreien ─
   huber-init.js setzt #navcontainer auf height:0 / overflow:hidden.
   display:block vom Siquando-CSS reicht nicht – das ul wird geclipt.
   position:fixed positioniert das ul relativ zum Viewport → kein Clipping.
   top wird dynamisch von huber-init.js per navUl.style.top gesetzt.
────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  #nav.sqrnavopen > ul {
    position: fixed;
    left: 0;
    right: 0;
    /* top: per JS (huber-init.js: bar.getBoundingClientRect().bottom) */
    z-index: 9997;
    background: #fff;
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
    margin: 0;
    padding: 0;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE — Header, Kacheln, Typografie (≤ 767px)
════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* ── Nav: ALLE Trennlinien entfernen (nahtloser Übergang zu Header) ──────── */
  #navcontainer,
  #nav,
  #filltop {
    border-bottom: none;
    border-top: none;
  }

  /* ── Site-Header: reinweiß, alle Pseudo-Elemente weg ────────────────────── */
  .site-header {
    height: auto;
    padding-bottom: 0;
    background: #ffffff;
    overflow: visible;
    border: none;
  }
  .site-header img {
    display: none;
  }
  .site-header::after {
    display: none;
  } /* rote Bodenlinie */
  .site-header::before {
    display: none;
  } /* Scroll-Pfeil   */

  /* ── Titelbereich: Theater-Plakat-Typografie ─────────────────────────────── */
  .site-header-title {
    position: relative;
    inset: auto;
    /* Gradient-Text deaktivieren → plakatives Dunkelgrau */
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: #1a202c;
    color: #1a202c;
    /* Typografie: massiv, plakativ */
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-align: center;
    /* Großzügiger Weißraum */
    padding: 3rem 1.5rem 2.5rem;
    opacity: 1;
    animation: none;
  }

  /* Roter Akzentblock entfernt */


  /* ── Content-Bereich: dezentes Grau als Kontrast zum weißen Header ──────── */
  #contentcontainercontainer {
    background: #f4f5f7;
  }

  /* ── Kacheln: reinweiß → hebt sich klar vom grauen Hintergrund ab ─────────  */
  ul.teasertileframe > li {
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 0;
    box-shadow: none;
  }
  ul.teasertileframe > li > .teasertileframe-picture > picture > img {
    border-radius: 0;
  }

  /* ── Typografie-Hierarchie in Kacheln ───────────────────────────────────── */
  /* Künstlername (h3): leichtes Grau, klein → tritt zurück */
  ul.teasertileframe .teasertileframe-text-main h3 {
    font-size: 0.6rem;
    font-weight: 600;
    color: #aaa;
    letter-spacing: 0.14em;
    margin-bottom: 5px;
  }
  /* Show-/Event-Titel: dunkelste Farbe, dominant */
  ul.teasertileframe .teasertileframe-text-main .tile-title {
    color: #1a202c;
    font-weight: 700;
    font-size: 0.95rem;
  }
  /* Beschreibung: mittleres Grau */
  ul.teasertileframe
    .teasertileframe-text-main
    p:not(.tile-title):not(.tile-date) {
    color: #666;
    font-size: 0.8rem;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE — Globale Typografie & Layout aller Textbereiche (≤ 767px)
════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* ── Seiten-Hintergrund: frisches Off-White statt Grau ──────────────────── */
  #contentcontainercontainer {
    background: #f8f9fa;
  }

  /* ── Fließtext: linksbündig, Anthrazit, luftig ──────────────────────────── */
  /* Scope: .content-wrapper → trifft Texte auf Unterseiten, NICHT Kacheln  */
  .content-wrapper p,
  .content-wrapper li,
  .content-wrapper address {
    text-align: left;
    color: #1f2937;
    line-height: 1.6;
  }

  /* ── Überschriften: zentriert bleiben ──────────────────────────────────── */
  .content-wrapper h2,
  .content-wrapper h3,
  .content-wrapper .page-subtitle,
  .content-wrapper .section-heading {
    text-align: center;
  }

  /* ── Abstände: Luft zwischen Blöcken ───────────────────────────────────── */
  .content-wrapper p {
    margin-bottom: 1rem;
  }
  .content-wrapper h2,
  .content-wrapper h3 {
    margin-bottom: 0.75rem;
  }

  /* ── Padding: Text klebt nicht am Rand ─────────────────────────────────── */
  .content-wrapper {
    padding-left: 1.5rem; /* 24px – gleichmäßig auf allen Seiten */
    padding-right: 1.5rem;
  }
}

/* ── Kontaktleiste: Rot wie Footer (Desktop) ────────────────────────────── */
@media (min-width: 1024px) {
  #contactcontainer {
    background: #e31e24;
  }
  #contact {
    background: #e31e24;
    padding: 10px 2rem;
  }
  #contact a,
  #contact span {
    color: rgba(255, 255, 255, 0.75);
    font-size: 12px;
    letter-spacing: 0.03em;
  }
  #contact svg {
    color: rgba(255, 255, 255, 0.6);
  }
  #contact a:hover {
    color: #fff;
  }
}