/* Mobile Anpassungen im GT-Stil, von breiten zu schmalen Ansichten. */
.header_suchbutton_text { display: none; }
.shop_seiten { min-width: 0; }
.shop_karte .shop_name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Tablet und kleinere Fenster: Grundlayout, Inhalt und Footer. */
@media (max-width: 1219px) {
	#inhalte .seitennavigation { flex-wrap: nowrap; gap: 3px; }
	#inhalte .seitennavigation .seiten_rand > span { display: none; }
	#inhalte .seitennavigation .seiten_rand .seiten_symbol { display: inline; }
	#inhalte .seitennavigation a[aria-label] { flex: 0 0 24px; padding-left: 0; padding-right: 0; }
	#inhalte .seitennavigation a, #inhalte .seitennavigation .aktuell { flex: 1; min-width: 0; max-width: 44px; padding: 8px 2px; font-size: 14px; }
	#wrapper, #site, #footer, #footer_oben, #footer_unten { width: 100%; }
	#startseite { width: auto; margin: 0 24px; }
	#header { height: auto; }
	#header_info { width: auto; height: auto; min-height: 33px; }
	#header_suche_sm { width: 100%; padding-left: 200px; }
	#header_suche_sm .header_suchtitel { font-size: 20px; }
	#header_bar { padding-left: 24px; padding-right: 24px; }
	#header_bar a { flex: 1; padding: 12px 18px; text-align: center; }
	#header_top div.banner { padding-left: 24px; }
	#logo { right: 135px; }
	#header_couch { right: 24px; }
	.start_gutscheinbereich { grid-template-columns: minmax(0, 1fr); }
	.start_empfehlungen { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
	#start_box_gutscheine_tag .gutschein { min-height: 60px; }
	.start_entdecken { grid-template-columns: minmax(0, 1fr) 302px; margin-left: 0; margin-right: 0; }
	.start_blogliste { grid-column: 1 / -1; }
	.shop_seite { grid-auto-flow: column; grid-template-columns: none; }
	#Splash { height: auto; padding: 20px; background: #37363e; border-radius: 6px; }
	#Splash:before { display: none; }
	#SplashTeaser { position: static; margin: 0 0 12px; font-size: 22px; line-height: 1.4; }
	#footer { height: auto; }
	#footer_oben { position: relative; box-sizing: border-box; height: auto; padding: 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; background: linear-gradient(#aa174b, #79042f); border-top: 5px solid #e8b328; }
	#footer_oben .copyright { display: none; }
	#footer_oben .box { float: none; width: auto; margin: 0; }
	#footer_oben .diver { display: none; }
	#footer_oben .box a { padding: 5px 6px; line-height: 22px; }
	#footer_unten { height: auto; min-height: 30px; background: #f1db90; }
	#footer_unten > div { padding: 10px 20px !important; }
	#inhalte { float: none; box-sizing: border-box; width: auto; margin: 0 24px; }
	#inhalte h1 { font-size: 25px; line-height: 1.35; }
	#inhalte h2 { font-size: 22px; line-height: 1.4; }
	#menu { float: none; box-sizing: border-box; width: auto; margin: 24px; padding: 0; background: #faf6e9; border: 1px solid #e0d7be; border-radius: 8px; }
	#menu > div { background: none !important; }
	#menu > div:first-child > div { padding: 0 !important; }
	#menu > div:last-child { height: 0 !important; }
	#menu .menubox, #menu .menubox_content, #menu .menubox_footer { width: auto; margin: 0; background: none; }
	#menu .menubox_header { box-sizing: border-box; width: 100%; height: auto; min-height: 48px; background: linear-gradient(#eec44c, #e5a800); border-radius: 7px 7px 0 0; text-align: left; }
	#menu .menubox_header > div { padding: 12px 20px !important; }
	#menu .menubox_content > div { padding: 5px 20px 15px !important; }
	#menu .menubox_content a.menu { padding-top: 10px; padding-bottom: 6px; overflow-wrap: anywhere; }
	#menu .menubox .diver { width: 100%; margin: 4px 0; background: none; border-bottom: 1px solid #e0d7be; }
	#menu .menubox_footer { height: 8px; background: linear-gradient(#b8446a, #8b0b3c); border-radius: 0 0 7px 7px; }
	#inhalte > center { padding: 12px 0; font-size: 16px; line-height: 2.8; }
	#inhalte > center a { display: inline-block; padding: 0 7px; }
	#inhalte img { max-width: 100%; height: auto; }
	#inhalte .shop_list ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#inhalte .shop_alphabet a.abc { min-width: 44px; min-height: 44px; padding: 8px; }
	.textseite_breit #inhalte { width: auto; margin: 0 24px; }
	.impressum_daten { gap: 20px; }
	.impressum_daten dl { grid-template-columns: 130px minmax(0, 1fr); }
	#logo img { clip-path: inset(0 5.6% 24.4% 3.1% round 8px); }
}

/* Rechte Navigation bleibt ab 900px neben dem Inhalt. */
@media (min-width: 900px) and (max-width: 1219px) {
	.mit_navigation #inhalte { float: left; width: calc(100% - 348px); margin: 0 0 0 24px; }
	.mit_navigation #menu { float: right; width: 280px; margin: 0 24px 24px 0; }
}

/* Header mit einzeiligem Menue. */
@media (min-width: 801px) and (max-width: 1219px) {
	#header_top { height: 166px; }
	#logo { top: 60px; left: 24px; right: auto; }
	#header_couch { top: 35px; right: 24px; }
	#header_top div.banner { display: none; }
}

/* Zweizeiliges Menue, einfache Suche und schmale Inhaltsraender. */
@media (max-width: 800px) {
	#startseite { margin: 0 16px; }
	#header_top { height: 166px; }
	#header_top div.banner, #startseite > .banner { display: none; }
	#logo { top: 60px; left: 16px; right: auto; width: 321px; height: 78px; }
	#logo img { width: 100%; height: auto; }
	#header_couch { width: 323px; height: 146px; top: 30px; right: 16px; }
	#header_bar { display: grid; grid-template-columns: repeat(3, 1fr); height: auto; padding: 0 16px; }
	#header_bar a { padding: 12px 5px; font-size: 16px; text-align: center; border-bottom: 1px solid #cb5a82; }
	#header_bar a:nth-child(3) { border-radius: 0 8px 0 0; border-right: 0; }
	#header_bar a:last-child { border-radius: 0; }
	#header_info { margin: 0 16px; padding: 8px 12px; border-radius: 0; line-height: 1.5; }
	#header_suche_sm { width: calc(100% - 32px); height: auto; margin: 0 16px 12px; padding: 10px; border: 1px solid #dccbd2; border-radius: 0 0 6px 6px; background: #f5eaf0; box-shadow: none; }
	#header_suche_sm .header_suchtitel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	#header_suche_sm #Gutschein_Search, #header_suche_sm #Gutschein_Search::placeholder { font-size: 16px; }
	#header_suche_sm button { flex-basis: 110px; width: 110px; border-radius: 0 5px 5px 0; height: 46px; display: flex; align-items: center; justify-content: center; background: #8b0b3c; color: #fff; font: bold 16px "Trebuchet MS", sans-serif; }
	#header_suche_sm button img { width: 110px; height: auto; display: none; }
	#header_suche_sm form { position: relative; }
	#header_suche_sm .header_suchfeld { position: static; }
	#header_suche_sm #Gutschein_Suche_Resultate { max-height: 45vh; left: 0; top: 46px; width: 100%; }
	.slogan h1 { font-size: 20px; line-height: 1.4; }
	.kategorien_liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.kategorien_seite .kategorien_liste { grid-template-columns: minmax(0, 1fr); }
	.kategorie_eintrag { gap: 8px; }
	.kategorie_anzahl small { display: none; }
	#site > .banner, #inhalte > .banner { display: none; }
	#inhalte { margin: 0 16px; }
	#menu { margin: 24px 16px; }
	.gutschein_fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#header_suche_sm:before, #header_suche_sm:after { display: none; }
	#header_suche_sm #Gutschein_Search { height: 46px; padding: 0 10px; border: 1px solid #cdbbc2; border-radius: 4px 0 0 4px; background: linear-gradient(#fff, #f0edf0); }
	#header_suche_sm .header_suchbutton_text { display: inline; }
	#inhalte .logos { float: none; width: auto; max-width: 100%; margin: 0 0 14px !important; }
	#inhalte .logos img { display: block; max-width: 100%; height: auto; }
	.ratgeber_text ul, .ratgeber_text ol { padding-left: 24px; }
	.ratgeber_text .ratgeber_tipp { padding: 12px 14px; }
	#inhalte .contentbox_zusatz { overflow-wrap: anywhere; }
	.textseite_breit #inhalte { margin: 0 16px; padding-top: 0; }
	.impressum_daten { grid-template-columns: minmax(0, 1fr); }
	#site { display: flow-root; padding-top: 0; }
	#site:before { inset: 0 16px; border: 0; border-image: none; border-radius: 8px 8px 0 0; background: #fff; box-shadow: 0 0 5px #76532433; }
	#site div.slogan { margin-top: 0; }
}

/* Ohne Platz fuer die Couch bleibt das Logo allein. */
@media (max-width: 720px) {
	#header_top { height: 104px; }
	#header_couch { display: none; }
	#logo { top: 22px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 16px); }
}

/* Handyansicht: Inhalt, Navigation und Layer. */
@media (max-width: 600px) {
	#startseite { margin: 0 8px; }
	#header_bar { padding: 0 8px; }
	#header_info { margin: 0 8px; font-size: 11px; }
	#header_suche_sm button, #header_suche_sm button img { width: 94px; }
	#header_suche_sm button { flex-basis: 94px; }
	#startseite_box_big_head { height: auto; min-height: 54px; background: linear-gradient(#eec44c, #e5a800); border-radius: 8px 8px 0 0; }
	#startseite_box_big_head .box_startseite_head { height: auto; min-height: 54px; padding: 7px 4px; font-size: 13px; line-height: 20px; }
	#startseite_box_big_content { padding: 4px 8px; }
	#startseite_box_big_content [role=tabpanel]:not([hidden]) { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: minmax(62px, auto); }
	.start_empfehlungen { grid-template-columns: minmax(0, 1fr); }
	#start_box_gutscheine_tag .gutschein { gap: 6px; }
	#start_box_gutscheine_tag .buttonsmall { padding-left: 10px; padding-right: 32px; font-size: 14px !important; }
	#Splash { padding: 16px; }
	#SplashTeaser { font-size: 20px; overflow-wrap: break-word; }
	#shop_slider { grid-template-columns: 24px minmax(0, 1fr) 24px; gap: 4px; padding: 6px; }
	.shop_seite { gap: 6px; }
	.shop_karte { font-size: 14px; min-height: 76px; }
	.start_entdecken { grid-template-columns: minmax(0, 1fr); gap: 22px; }
	.start_blogliste { grid-column: auto; min-width: 0; }
	.start_blogzeile { gap: 5px; padding: 0 6px; }
	.start_blogzeile time { flex-basis: 38px; font-size: 12px; }
	#wrapper .start_blogzeile .buttonsmall { font-size: 14px !important; padding-left: 10px; padding-right: 32px; }
	.start_blogwerbung { justify-self: center; width: 302px; max-width: 100%; margin: 0; }
	.start_blogwerbung .werbeplatz { display: block; }
	.start_blogwerbung .werberahmen { max-width: calc(100% - 2px); height: auto !important; aspect-ratio: 300 / 250; }
	.start_blogwerbung .werberahmen img { width: 100%; height: auto; }
	.kategorien_liste, .kategorien_seite .kategorien_liste { grid-template-columns: minmax(0, 1fr); }
	#footer_oben { padding: 18px 20px; grid-template-columns: minmax(0, 1fr); gap: 12px; }
	#inhalte { margin: 0 8px; }
	#inhalte h1 { font-size: 22px; }
	#inhalte h2 { font-size: 20px; }
	.contentbox > h2, .contentbox > a > h2 { padding: 12px 14px 5px; }
	.contentbox_content > div:first-child { padding-left: 14px !important; padding-right: 14px !important; }
	.contentbox_kats_content { padding-left: 12px; padding-right: 12px; }
	.gutschein_fakten, .gutschein_fakten_detail { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.gutschein_fakten .gutschein_infos, .gutschein_fakten .gutschein_infos_2 { min-height: 0; }
	.gutschein_direkt a { white-space: normal; }
	#menu { margin: 20px 8px; }
	#menu .menubox_content > div { padding-left: 16px !important; padding-right: 16px !important; }
	#menu .werbeplatz { display: table; max-width: 100%; margin: 0 auto; }
	#menu .werberahmen { max-width: 300px; }
	#wrapper .gutschein_hinweis { margin-left: 0; margin-right: 0; }
	#wait_box.gt_code_fenster { max-width: calc(100% - 16px); margin: 8px auto; }
	.gt_layer_kopf { flex-wrap: wrap; gap: 0; padding: 0 0 10px; }
	.gt_layer_logo { flex: 0 1 282px; }
	.gt_layer_schliessen { margin: 0 10px 0 auto; min-height: 44px; }
	.gt_layer_inhalt { padding: 14px; overflow-wrap: anywhere; }
	#wait_box .gt_layer_inhalt h1 { font-size: 20px; }
	.gt_layer_codeband { display: flex; flex-direction: column; align-items: stretch; padding: 12px; gap: 10px; }
	.gt_layer_codeband label { font-size: 17px; }
	#wait_box #gt_gutscheincode { width: 100%; min-width: 0; flex: none; }
	.gt_code_kopieren { min-height: 44px; align-self: center; max-width: 100%; }
	.gt_layer_infos { grid-template-columns: minmax(0, 1fr); }
	.gt_layer_einloesen { padding: 12px; }
	.gt_fehler_gutschein { padding: 10px; }
	#wait_box .gt_fehler_form input[type=email], #wait_box .gt_fehler_form textarea { margin-left: 0; margin-right: 0; }
	#inhalte .shop_alphabet { gap: 5px; padding: 0 6px 16px; }
	#inhalte .shop_list ul { grid-template-columns: minmax(0, 1fr); padding: 0 6px; }
	#inhalte .shop_list h2 { margin: 18px 6px 8px; font-size: 26px; }
	#inhalte .shop_list h2 a { padding: 10px 0 10px 12px; }
	#inhalte .shop_list ul li a { min-height: 36px; gap: 10px; }
	#inhalte .shop_list .shop_name { white-space: normal; overflow-wrap: anywhere; }
	#inhalte .shop_list .shop_anzahl { font-size: 12px; }
	.shop_gutschein { padding: 12px; }
	.shop_gutschein_infos { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.shop_gutschein .gutschein_aktionen { flex-direction: column; align-items: stretch; gap: 12px; }
	#wrapper .shop_gutschein .gutschein_aktionen a { box-sizing: border-box; max-width: 100%; text-align: center; white-space: normal; }
	.textseite_breit #inhalte { margin: 0 8px; }
	.impressum_daten dl { grid-template-columns: minmax(0, 1fr); gap: 4px; }
	.impressum_daten dd { margin-bottom: 12px; }
	.textseite_breit ul, .textseite_breit ol { padding-left: 24px; }
	.textseite_breit a { overflow-wrap: anywhere; }
	#header_suche_sm { width: calc(100% - 16px); margin-left: 8px; margin-right: 8px; }
	#site:before { left: 8px; right: 8px; }
}

/* Kompakter Suchbutton auf sehr schmalen Displays. */
@media (max-width: 420px) {
	#header_suche_sm button { flex-basis: 76px; width: 76px; font-size: 14px; }
	#header_suche_sm #Gutschein_Search { padding-left: 8px; }
	#header_suche_sm #Gutschein_Search::placeholder { font-size: 14px; }
}
