/* Responsive-Ergänzung js-hildburghausen.de (Auftrag tk 04.11.2026). Das Original-CSS bleibt unverändert; über 1020 px wirkt diese Datei nicht.
   Alt: unter 800 px feste Breite 760 px, darunter abgeschnitten; Menü zwischen 769 und 800 px immer offen. */

.jsh-auf { display: none; }

@media only screen and (max-width: 1020px) {

  /* Kopf: Logo oben, darunter Funktionsmenü und Menü-Knopf; ein Raster statt fester 1000 px */
  /* Kopf bleibt beim Rollen oben; sticky statt fixed, weil die Höhe mit dem Logo schwankt. overflow-x: clip, sonst greift sticky nicht */
  html, body { overflow-x: clip; }
  .page-wrapper-oben { position: sticky; top: 0; height: auto; background: #fff; border-bottom: 4px solid #136900; }
  header { width: auto; height: auto; border-bottom: 0; margin: 0; padding: 8px 12px 6px; }
  header::after { content: ""; display: block; clear: both; }
  #logo { position: static; width: 100%; margin: 0 0 4px; }
  #logo img { display: block; width: 100%; max-width: 640px; height: auto; margin: 0 auto; }
  #startseite, #datum { display: none; }
  #funktion { float: left; margin: 7px 0 0; padding: 0; border-bottom: 0; }
  #funktion ul li { font-size: 12px; }
  #funktion a { padding: 0 3px; }
  #navigation { position: static; float: none; clear: none; width: auto; margin: 0; }
  #menuTrigger { display: block; float: right; width: auto; margin: 0; padding: 0 0 0 68px; line-height: 32px; font-size: 18px; background: url("/fileadmin/images/hg_trigger_02.jpg") no-repeat left center; }
  #menuTrigger a { color: #136900; font-size: 18px; }

  /* Hauptmenü als Liste unter dem Kopf, eigener Bildlauf bei langen Listen */
  .mainMenu, .mainMenu.offen { float: none; clear: both; width: 100%; margin: 0; padding: 0; font-size: 18px; }
  .mainMenu { display: none !important; }
  .mainMenu.offen { display: block !important; max-height: calc(100vh - 130px); max-height: calc(100dvh - 130px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
  ul.dropdown { background: #fff; }
  ul.dropdown li { float: none; padding: 0; text-align: left; position: relative; }
  ul.dropdown li#ebene1 a { font-size: 18px; text-transform: none; border-right: 0; border-top: 1px solid #c8cfc2; padding: 11px 52px 11px 4px; }
  ul.dropdown ul { display: none; position: static; visibility: visible; width: auto; margin: 0; padding: 0; border: 0; }
  ul.dropdown li.aufgeklappt > ul { display: block; }
  ul.dropdown li#ebene2 { width: auto; font-size: 16px; }
  ul.dropdown li#ebene2 a { float: none; width: auto; font-size: 16px; font-weight: normal; border: 0; border-top: 1px solid #e7eae3; padding: 9px 8px 9px 20px; background: #f6f8f0; }
  .jsh-auf { display: block; position: absolute; top: 0; right: 0; width: 48px; height: 44px; border: 0; border-left: 1px solid #e7eae3; background: transparent; cursor: pointer; }
  .jsh-auf::before { content: ""; display: block; width: 9px; height: 9px; margin: -4px auto 0; border-right: 2px solid #136900; border-bottom: 2px solid #136900; transform: rotate(45deg); }
  li.aufgeklappt > .jsh-auf::before { margin-top: 3px; transform: rotate(-135deg); }

  /* Bildstreifen: Slider skaliert statt 1410 px breit zu bleiben, Schriftzug auf dem Bild */
  .page-wrapper-bild { margin-top: 0; }
  .page-wrapper-bild #inner { left: 0; width: 100%; margin: 0; overflow: hidden; }
  /* Schriftzug-PNG läuft wie am Desktop rechts aus dem Bild; Lage und Breite als Anteil der 1410 px (left 685, top 230, Breite 1163) */
  .page-wrapper-bild #schrift { left: 48.6%; top: 58%; width: 100%; margin: 0; text-align: left; }
  .page-wrapper-bild #schrift img { width: 82.5%; max-width: none; height: auto; }
  .flexslider .slides img { width: 100%; height: auto; }

  /* Inhalt */
  .page-wrapper-inhalt { margin-top: 0; padding-top: 0; background-image: none; }
  .page-wrapper-inhalt #inner { width: auto; margin: 0 15px; font-size: 19px; }
  .page-wrapper-inhalt #inner #links { width: 28%; }
  .page-wrapper-inhalt #inner #mitte { width: 68%; padding-left: 3%; background: none; min-height: 0; }
  #subNav { font-size: 18px; margin-left: 0; }
  /* weißes Band hinter den Überschriften: alt Hintergrundbild mit fester Höhe, bricht bei mehrzeiligem Titel */
  #links h2, #mitte h2 { font-size: 26px; background: #fff; border-bottom: 1px solid #b9c2ae; margin: 0 -15px 14px; padding: 8px 15px 9px; }
  #mitte h2 { margin-left: 0; }
  #links h2 { margin-right: 0; }
  #seite1 .page-wrapper-inhalt h2, #seite1 .page-wrapper-inhalt-startseite-veranstaltungen h2 { left: auto; width: auto; margin: 0 -15px 16px; padding: 8px 15px 9px; background: #fff; border-bottom: 1px solid #b9c2ae; font-size: 24px; }
  .page-wrapper-inhalt h3, #seite1 .page-wrapper-inhalt h3 { font-size: 21px; }

  /* Tabellen und eingebettete Medien bleiben in der Spalte */
  .page-wrapper-inhalt table { max-width: 100%; }
  .page-wrapper-inhalt iframe, .page-wrapper-inhalt video, .page-wrapper-inhalt object { max-width: 100%; }
  .csc-textpic-imagewrap, .csc-textpic-center-outer, .csc-textpic-center-inner { max-width: 100%; }

  /* Startseite: Bereiche unter dem Inhalt */
  /* c226: alt liegt der Text auf dem Hintergrundbild (grüner Kasten + Hirschkreis, 1333 x 600), das sich nicht mit dem Text skalieren lässt.
     Hier Kasten als CSS um den Text, vom Bild nur der Hirschkreis (x 684-1170, y 18-588) als Ausschnitt daneben bzw. darunter. */
  .page-wrapper-inhalt-startseite-veranstaltungen { background: #fff; padding: 20px 0 10px; }
  .page-wrapper-inhalt-startseite-veranstaltungen #inner { display: flex; align-items: center; gap: 20px; left: 0; width: auto; margin: 0 15px; font-size: 19px; }
  .page-wrapper-inhalt-startseite-veranstaltungen #inner > .csc-default { flex: 1 1 auto; min-width: 0; padding: 18px 20px 2px; border: 5px solid #84a901; border-radius: 12px; background: linear-gradient(#e6efcd, #fbfcf6); }
  .page-wrapper-inhalt-startseite-veranstaltungen #inner::after { content: ""; flex: 0 0 34%; aspect-ratio: 486 / 570; background: url("/fileadmin/images/hg_inhalt_veranst.jpg") no-repeat 80.8% 60%; background-size: 274.3% auto; }
  .page-wrapper-inhalt-startseite-kontakt #inner { left: 0; width: auto; margin: 0 15px; font-size: 18px; }
  .page-wrapper-inhalt-startseite-kontakt h3 { font-size: 28px; }
  .csc-frame-frame1, .csc-frame-frame2 { left: 0; width: auto; margin-left: 0; }
  .csc-frame-frame1 .csc-textpic-text, .csc-frame-frame2 .csc-textpic-text { width: auto; }

  /* Fuß */
  /* Fußmenü als Raster statt Floats: das beige Feld umschließt die Spalten */
  .page-wrapper-bottom #inner { width: auto; margin: 0 15px; font-size: 16px; min-height: 0; }
  ul.bottom { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 12px; background: transparent; hyphens: manual; }
  ul.bottom li, ul.bottom li:first-child, ul.bottom li:nth-child(2), ul.bottom li:nth-child(3) { float: none; width: auto; }
  .page-wrapper-copy #inner { width: auto; margin: 0 15px; }
  ul.bottom li#ebene2 a { font-size: 17px; }
  /* eigener Knopf: das Original-PNG ist ein 184 px breiter Schriftzug */
  #nach_oben { left: auto; right: 10px; bottom: 15px; width: 44px; height: 44px; border-radius: 4px; background: #136900; }
  #nach_oben::before { content: ""; position: absolute; left: 15px; top: 19px; width: 12px; height: 12px; border-left: 3px solid #fff; border-top: 3px solid #fff; transform: rotate(45deg); }
  #nach_oben a { position: absolute; inset: 0; z-index: 1; }
  #nach_oben img { width: 44px; height: 44px; }
  /* solange der Cookie-Hinweis steht, darf er Knopf und Menüende nicht verdecken */
  body:has(.cc_banner-wrapper) #nach_oben { bottom: 135px; }
  body:has(.cc_banner-wrapper) .mainMenu.offen { padding-bottom: 130px; }
}

@media only screen and (max-width: 800px) {
  /* eine Spalte; das Untermenü folgt nach dem Inhalt (alt ausgeblendet) */
  .page-wrapper-inhalt #inner { display: flex; flex-direction: column; font-size: 18px; }
  .page-wrapper-inhalt #inner #links { display: block; order: 2; float: none; width: auto; margin-top: 20px; }
  .page-wrapper-inhalt #inner #mitte { order: 1; float: none; width: auto; padding: 0; }
  #subNav { float: none; }
  /* Bilder im Text stehen über dem Text, nicht daneben */
  .page-wrapper-inhalt div.csc-textpic-intext-right div.csc-textpic-imagewrap, .page-wrapper-inhalt div.csc-textpic-intext-left div.csc-textpic-imagewrap { float: none; margin: 0 0 12px; }
  .page-wrapper-inhalt div.csc-textpic-intext-right div.csc-textpic-text, .page-wrapper-inhalt div.csc-textpic-intext-left div.csc-textpic-text { margin: 0; }
  #mitte h2 { margin-left: -15px; }
  #links h2 { margin-right: -15px; }
  ul.bottom { grid-template-columns: repeat(2, 1fr); }
  /* Seiten ohne Untermenü: keine leere Überschrift nach dem Inhalt */
  .page-wrapper-inhalt #inner #links:not(:has(#subNav)) { display: none; }
  .page-wrapper-inhalt-startseite-veranstaltungen #inner { flex-direction: column; }
  .page-wrapper-inhalt-startseite-veranstaltungen #inner > .csc-default { align-self: stretch; }
  .page-wrapper-inhalt-startseite-veranstaltungen #inner::after { flex: none; width: 62%; max-width: 300px; }
  .page-wrapper-copy #inner div[style*="float"] { float: none !important; }
  .page-wrapper-copy #inner p { text-align: left !important; margin: 0 0 6px; }
}

@media only screen and (max-width: 700px) {
  /* Obmänner: dreispaltige Tabelle mit fester Breite 714 px im Inhalt, je Zeile ein Block */
  #seite131 #mitte table, #seite131 #mitte tbody, #seite131 #mitte tr, #seite131 #mitte td { display: block; width: auto !important; height: auto !important; }
  #seite131 #mitte tr { padding: 8px 0; border-bottom: 1px solid #84a901; }
  #seite131 #mitte td { padding: 1px 0; border: 0; }
  #seite131 #mitte td p { padding: 0; }
}

@media only screen and (max-width: 520px) {
  /* Schriftzug größer, sonst unleserlich klein */
  .page-wrapper-bild #schrift { left: 30%; top: 33%; }
  .page-wrapper-bild #schrift img { width: 135%; }
  #funktion ul li { font-size: 11px; }
  #funktion a { padding: 0 1px; }
  /* nur Symbol, sonst bricht der Knopf unter das Funktionsmenü */
  #menuTrigger { width: 60px; height: 32px; padding: 0; }
  #menuTrigger a { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .page-wrapper-inhalt #inner { font-size: 17px; margin: 0 12px; }
  #links h2, #mitte h2 { font-size: 23px; }
  .page-wrapper-inhalt h3, #seite1 .page-wrapper-inhalt h3 { font-size: 19px; padding-left: 8px; padding-right: 8px; width: auto; }
  /* lange Adressen und geschützte Leerzeichen dürfen nicht hinter dem Rand verschwinden (overflow: hidden im Original) */
  #mitte, .page-wrapper-inhalt-startseite-kontakt #inner { overflow-wrap: anywhere; }
  #seite1 .page-wrapper-inhalt h3 { padding-left: 0; }
  .page-wrapper-inhalt-startseite-veranstaltungen #inner { font-size: 17px; }
  .page-wrapper-inhalt-startseite-veranstaltungen #inner > .csc-default { padding: 14px 14px 0; }
  #c226 br { display: none; }
  .page-wrapper-inhalt-startseite-veranstaltungen #inner span[style*="font-size"], .page-wrapper-inhalt-startseite-kontakt #inner span[style*="font-size"] { font-size: 20px !important; }
  .page-wrapper-inhalt-startseite-kontakt #inner { font-size: 16px; }
  .page-wrapper-inhalt .contenttable td { padding-left: 6px; }
  ul.bottom { grid-template-columns: 1fr; }
  .page-wrapper-copy { margin-bottom: 70px; }
}