/* Responsive Ergänzungen zu standard.css und content.css.
   Diese Datei NACH beiden Desktop-Stylesheets laden.
   Voraussetzung im HTML: <meta name="viewport" content="width=device-width, initial-scale=1"> */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; }
}

/* Kleine Desktops und große Tablets. */
@media (max-width: 1399px) {
    :root { --breite-inhalt: 1060px; }
    body { font-size: 16px; line-height: 1.625; }
    h1, h2 { font-size: 52px; line-height: 1.1; }
    h3, h4 { font-size: 19px; line-height: 1.45; }
    .header_inner { padding: 18px 36px; }
    .header_logo { width: 250px; margin-top: 0; }
    .header_logo .brand_logo { height: 70px; }
    .smaller .header_logo, .is_scrolled .header_logo { width: 205px; margin-top: 10px; }
    .site_menu { width: 380px; }

    /* Vertikale Abstände nur einmal vergeben, nicht auf beiden Innencontainern. */
    .content_inner { padding: 0 48px; }
    .content_inner2 { padding: 80px 0; }
    .content_kompakt .content_inner { padding-top: 0; padding-bottom: 0; }
    .content_kompakt .content_inner2 { padding-top: 65px; padding-bottom: 65px; }
    .content_split .content_inner2 { gap: 40px; }
    .content_bild_links .content_text { padding-left: 20px; }
    .content_hero .content_inner2 { min-height: 580px; padding: 0; }
    /* Live-CSS enthält teils gestreckte Bilder bzw. ungültiges object-fit. */
    .hero_bild, .content_kreis { object-fit: cover; }
    #content_1100, #content_1200, #content_1300,
    #content_1400, #content_1500, #content_1600 { background-size: cover; }
    .hero_text h1 { font-size: 85px; line-height: 1.05; }
    .content_hero_start .content_inner2 { min-height: 630px; }
    .content_hero_start .hero_text h1 { font-size: 98px; }
    .content_hero_start .hero_text .hero_klein { font-size: 32px; margin-bottom: 0; padding-left: 0; }
    .content_karten { gap: 36px; }
    .content_karte { padding: 36px; border-radius: 45px; }
    .karten_titel { gap: 18px; }
    .karten_titel img { width: 80px; flex-shrink: 0; }
    .accordion_titel { font-size: 21px; line-height: 1.45; }
    #content_1200 .hero_text { width: 43%; margin-left: 54%; padding: 60px 24px 90px; }
    #content_1200 .hero_text h1 { font-size: 72px; line-height: 1.0; }
    #content_1005 .content_inner { padding: 70px 0; }
    #content_1005 .hero_text { width: 48%; padding: 60px 30px; }
    #content_1102 img { position: static; max-width: 100%; }
    #content_1402 .content_inner2 { padding: 70px 0 80px; }
    #content_1402 .content_karten { margin: 0; gap: 36px; }
    #content_1402 .content_karten > .content_karte { flex: 0 0 calc((100% - 36px) / 2); }
    #content_1402 .content_karten > .content_karte_breit { flex-basis: 100%; }
    #content_1402 .angebote_logo_text,
    #content_1402 .angebote_touchlife_layout { grid-template-columns: minmax(180px, 32%) minmax(0, 1fr); gap: 28px; }
    #content_1402 .angebote_termine { padding: 28px; border-radius: 36px; }
    #content_1005 .hero_text { padding: 30px; }
    #kontaktformular { gap: 28px 4%; }
    #kontaktformular > .jr_kontakt_feld,
    #kontaktformular > .jr_kontakt_block { flex-basis: 48%; width: 48%; }
    #kontaktformular > .jr_kontakt_breit { flex-basis: 100%; width: 100%; }
    #kontaktformular .jr_kontakt_label { padding: 0 24px; font-size: 18px; }
    #kontaktformular input:not([type="hidden"]):not([type="checkbox"]),
    #kontaktformular select, #kontaktformular textarea { padding-left: 24px; padding-right: 24px; }
    #kontaktformular select { padding-right: 54px; background-position: right 24px center; }
}

@media (max-width: 1023px) {
    .content_inner { padding-left: 32px; padding-right: 32px; }
    .content_split .content_inner2 { gap: 30px; }
    .content_bild_links .content_text { padding-left: 0; }
    .content_karte { padding: 30px; border-radius: 40px; }
    .karten_titel { align-items: flex-start; flex-direction: column; }
    .hero_text { margin-left: 4%; width: 65%; padding-left: 30px; padding-right: 30px; }
    .content_hero_start .content_inner2 { min-height: 570px; }
    .content_hero_start .hero_text { width: 52%; margin-left: 44%; }
    .content_hero_start .hero_text h1 { font-size: 82px; }
    .content_hero_start .hero_text .hero_klein { font-size: 28px; }
    .content_hero_start .hero_icons { width: 235px; right: 12%; }
    .content_fotoband .hero_text { width: 64%; margin-left: 4%; }
    .ueber_mich_begruessung { margin-left: 0; max-width: 100%; font-size: 19px; line-height: 1.6; }
    #content_1005 { background: url('../images/JenniferRoppel_IchbinJenny_responsiv.png') center / cover no-repeat; margin-top: 0; }
    #content_1005 .hero_text { width: 100%; }
	#content_1005 .content_inner {  padding: 0; }
    /* Das absolute Desktop-Bild darf die nächste Sektion nicht überlagern. */
    #content_1102 img { position: static; }
    #content_1500 .hero_text { width: 60%; margin-left: 38%; padding-left: 24px; padding-right: 24px; }
    #content_1605 .content_text { padding-right: 0; padding-bottom: 95px; background-size: 80px; }
    #content_1402 .angebote_logo_text,
    #content_1402 .angebote_touchlife_layout { grid-template-columns: minmax(0, 1fr); }
    #content_1402 .angebote_touchlife_logo { gap: 24px; }
    #content_1402 .angebote_touchlife_logo > img { flex-basis: 25%; width: 25%; max-width: 200px; }
    #content_1402 .angebote_terminliste { gap: 24px; }
}

/* Tablets im Hochformat und Smartphones. */
@media (max-width: 809px) {
    :root { --breite-inhalt: 100%; }
    html { scroll-padding-top: 110px; }
    h1, h2 { font-size: 40px; line-height: 1.1; }
    h3, h4 { font-size: 18px; line-height: 1.5; }
    .header_inner { padding: 14px 20px; gap: 15px; }
    .header_logo { width: 180px; min-width: 0; }
    .header_logo .brand_logo { height: 52px; }
    .smaller .header_inner, .is_scrolled .header_inner { padding-top: 7px; padding-bottom: 7px; }
    .smaller .header_logo, .is_scrolled .header_logo { width: 155px; }
    .smaller .header_logo .brand_logo,
    .is_scrolled .header_logo .brand_logo { height: 45px; }
    .header_tools { gap: 8px; flex-shrink: 0; }
    .header_tools .header_social, .header_tools .social_link { width: 28px; height: 28px; flex-basis: 28px; }
    .header_tools .some { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; }
    .header_tools .some li { display: block; margin: 0; padding: 0; line-height: 1; }
    .header_tools #link8-800, .header_tools #link8-801 { width: 28px; height: 28px; background-size: 24px auto; }
    .menu_toggle { font-size: 0; padding: 0 0 12px; gap: 0; border-left: 0; }
    .menu_symbol { font-size: 28px; width: 44px; height: 44px; }
    /* Tatsächlicher Menüknoten aus standard.css, einschließlich Scroll-Zustand. */
    #click_menu, .smaller #click_menu {
        width: 44px; min-width: 44px; height: 44px; padding: 0;
        background-size: 44px 44px; font-size: 0; letter-spacing: 0;
    }
    .site_header::after { height: 18px; }
    .smaller .site_header::after, .is_scrolled .site_header::after { height: 14px; }
    .xsmaller.site_header::after { height: 14px !important; }
    .site_menu {
        width: 360px; max-width: 100%; min-height: 0;
        height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh;
        padding: 20px 24px calc(30px + env(safe-area-inset-bottom, 0px));
        overflow-y: auto; overscroll-behavior: contain;
    }
    .site_menu ul { margin-top: 70px; }
    .site_menu a { font-size: 17px; line-height: 24px; padding: 11px 0; gap: 16px; overflow-wrap: anywhere; }
    #kontakt, .scroller { scroll-margin-top: 110px; }
    .site_footer { padding: 60px 22px 28px; overflow-wrap: anywhere; }
    .footer_logo.brand_logo { height: 105px; }
    .footer_legal { max-width: 100%; margin-top: 35px; }
    .scroll_top, .scrollicon { width: 44px; height: 44px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }

    .content_inner { padding: 0 24px; }
    .content_inner2 { padding: 60px 0; }
    .content_kompakt .content_inner { padding-top: 0; padding-bottom: 0; }
    .content_kompakt .content_inner2 { padding-top: 45px; padding-bottom: 45px; }
    .content_split .content_inner2 { flex-direction: column; align-items: stretch; gap: 28px; }
    .content_split .content_text, .content_split .content_bild { flex: 0 0 auto; width: 100%; }
    .content_bild_links .content_bild, .content_bild_links .content_text { order: initial; }
    .content_bild_links .content_text { padding-left: 0; }
    .content_text p { max-width: 100%; }
    .content_inner2 h1, .content_inner2 h2 { text-wrap: balance; }
    .content_inner2 h3 { hyphens: auto; }
    .content_bild img, .content_split .content_bild img { max-width: 400px; }
    .content_icon .content_bild img { max-width: 220px; }
    .content_signatur { background-size: 85% auto; }
    .content_welle::after, #content_1702::after { height: 22px; }
    .content_welle_oben::before, .content_hero_start + .content_sand::before { height: 28px; }
    .content_welle_oben .content_inner2 { padding-top: 30px; }
    .ueber_mich_begruessung { max-width: 400px; margin: 0 auto; font-size: 18px; }
    .ueber_mich_begruessung span { font-size: clamp(36px, 10vw, 48px); white-space: nowrap; }
    /* Bildmotive im schmalen Ausschnitt erhalten; keine Verzerrung. */
    .content_hero_start .hero_bild { object-position: 25% center; }
    #content_1700 .hero_bild { object-position: 75% center; }
    #content_1100 { background-position: 72% center; }
    #content_1500 { background-position: 25% center; }
    #content_1300 { background-position: 60% center; }

    .content_hero .content_inner2 { min-height: 540px; padding: 0; align-items: flex-end; }
    .hero_text,
    .content_hero_start .hero_text,
    .content_fotoband .hero_text,
    #content_1005 .hero_text,
    #content_1200 .hero_text,
    #content_1500 .hero_text {
        width: 100%; max-width: none; margin: 0; padding: 180px 24px 100px;
        background: linear-gradient(transparent, rgba(26, 42, 57, .85));
        color: var(--farbe-hell); text-align: left; overflow-wrap: anywhere;
    }
    .hero_text .hero_klein,
    .content_hero_start .hero_text .hero_klein { font-size: 25px; line-height: 0.75; padding-left: 0; margin-bottom: 8px; }
    .content_hero_start .hero_text p { margin: 16px 0 0; text-wrap: pretty; }
    /* Der Desktop-Zeilenwechsel erzeugt mobil unnötig kurze Einzelzeilen. */
    .content_hero_start .hero_text p br { display: contents; }
    .content_hero_start .hero_text p br::after { content: " "; }
    #content_1000 .hero_text, #content_1700 .hero_text p { font-size: 18px; line-height: 1.6; }
    .hero_label { left: 24px; right: 24px; bottom: 26px; font-size: 16px; line-height: 1.4; letter-spacing: 1px; }
    .hero_icons, .content_hero_start .hero_icons { width: 180px; max-width: 42%; right: 22px; bottom: -22px; }
    .content_hero_start .content_inner2 { min-height: 590px; }
    .content_fotoband .content_inner { padding: 0; }
    .content_fotoband .hero_text { padding-top: 220px; padding-bottom: 60px; }
    .content_hero_start + .content_sand .content_inner { padding-top: 0; padding-bottom: 0; }
    .content_hero_start + .content_sand .content_inner2 { max-width: 100%; padding-top: 60px; padding-bottom: 60px; }

    /* ID-Regeln gezielt überschreiben: Klassen allein verlieren die Kaskade. */
    #content_703 .content_inner, #content_704 .content_inner,
    #content_705 .content_inner, #content_706 .content_inner { padding: 0 24px; }
    #content_703 .content_inner2, #content_704 .content_inner2,
    #content_705 .content_inner2, #content_706 .content_inner2 { padding: 45px 0 65px; }
    /* Die ID-Regel padding:0 schlägt sonst die allgemeine Intro-Regel. */
    #content_1001 .content_inner2 { padding: 60px 0 45px; }
    #content_1002 .content_bild::before { left: 0; bottom: 10%; width: 76px; height: 80px; }
    #content_1004 .content_inner2, #content_1006 .content_inner2 { padding: 60px 0; }
    #content_1005 { margin-top: 0; }
    #content_1005 .content_inner { padding: 0; }
    #content_1005::after { height: 22px; }
    #content_1006 .content_inner { background-size: 85%; }
    #content_1007 .content_inner2 { padding-bottom: 60px; }
    #content_1102 img { position: static; max-width: 100%; }
    #content_1104 h2, #content_1303 h2 { line-height: 1.1; }
    #content_1303 .content_inner { padding-top: 0; padding-bottom: 0; }
    #content_1007 .content_inner2, #content_1104 .content_inner2,
    #content_1203 .content_inner2, #content_1303 .content_inner2,
    #content_1501 .content_inner2, #content_1505 .content_inner2,
    #content_1603 .content_inner2, #content_1605 .content_inner2 { align-items: stretch; }
    #content_1500 .content_inner2 { align-items: flex-end; }
    /* Desktop setzt diese flex-Werte bereits mit !important. */
    #content_1201 .content_text, #content_1501 .content_text,
    #content_1505 .content_bild { flex: 0 0 auto !important; }

    .content_spalten, .content_karten { gap: 22px; }
    .karten_titel { flex-direction: row; align-items: center; gap: 15px; margin-bottom: 24px; }
    .karten_titel img { width: 65px; }
    .karten_titel h3 { min-width: 0; font-size: 18px; line-height: 1.4; overflow-wrap: anywhere; }
    .accordion_titel { padding: 20px 24px; font-size: 17px; line-height: 1.45; border-radius: 32px; gap: 10px; overflow-wrap: anywhere; }
    .accordion_titel::before { flex-basis: 12px; }
    .accordion_titel::after { width: 32px; height: 32px; }
    .accordion_inhalt { padding: 25px 8px; }
    .accordion_inhalt img { float: none; display: block; width: 100%; margin: 0 auto 25px; }
    .content_hinweis { padding: 28px; border-radius: 30px; }
    .content_button { max-width: 100%; min-width: 0; padding: 12px 28px; overflow-wrap: anywhere; }

    /* Angebote: Karten, Logo-/Text-Raster und Termine. */
    #content_1402 .content_inner2 { padding: 60px 0; }
    #content_1402 .content_inner2 > h2 { margin-bottom: 30px; }
    #content_1402 .content_karten { margin: 0; gap: 24px; }
    #content_1402 .content_karten > .content_karte,
    #content_1402 .content_karten > .content_karte_breit { flex: 0 0 100%; }
    #content_1402 .karten_titel > img.rund { width: 65px; height: 65px; flex-basis: 65px; }
    #content_1402 .angebote_touchlife_logo .karten_titel { margin-bottom: 24px; }
    #content_1402 .angebote_termine { margin-top: 24px; padding: 24px; border-radius: 28px; }
    #content_1402 .angebote_termine h4 { font-size: 20px; }
    #content_1402 .angebote_terminliste { grid-template-columns: minmax(0, 1fr); gap: 22px; }

    /* Beide vorhandenen Formularvarianten. */
    .kontakt_form { gap: 18px; }
    .kontakt_form > *, .kontakt_form .form_breit { flex-basis: 100%; }
    .kontakt_form input:not([type='checkbox']), .kontakt_form select,
    .kontakt_form textarea { font-size: 16px; padding-left: 20px; padding-right: 20px; }
    #kontaktform_inner { margin-top: 35px; }
    #kontaktformular { gap: 24px; }
    #kontaktformular > .jr_kontakt_feld,
    #kontaktformular > .jr_kontakt_block,
    #kontaktformular > .jr_kontakt_breit { flex-basis: 100%; width: 100%; }
    #kontaktformular .jr_kontakt_label { padding: 0 20px; font-size: 16px; line-height: 1.5; }
    #kontaktformular input:not([type="hidden"]):not([type="checkbox"]),
    #kontaktformular select, #kontaktformular textarea {
        min-height: 52px; padding: 12px 20px; border-radius: 28px; font-size: 16px; line-height: 1.625;
    }
    #kontaktformular select { padding-right: 50px; background-position: right 20px center; }
    #kontaktformular textarea { min-height: 220px; padding-top: 20px; padding-bottom: 20px; }
    #kontaktformular .jr_kontakt_block { padding-top: 0; }
    #kontaktformular .jr_kontakt_block h3 { font-size: 20px; line-height: 1.4; margin-bottom: 18px; }
    #kontaktformular .jr_kontakt_block p,
    #kontaktformular .jr_kontakt_checkbox { font-size: 16px; line-height: 1.625; overflow-wrap: anywhere; }
    #kontaktformular .jr_kontakt_checkbox { gap: 12px; }
    #kontaktformular .jr_kontakt_button { max-width: 100%; padding: 12px 28px; white-space: normal; }
    #kontaktformular #kontakt_fehler { padding: 20px; overflow-wrap: anywhere; }
}

/* Schmale Smartphones: keine festen Spaltenbreiten und genügend Platz für Text. */
@media (max-width: 479px) {
    h1, h2 { font-size: 40px; }
    .header_inner { padding-left: 16px; padding-right: 16px; gap: 12px; }
    .header_logo { width: 165px; }
    .header_logo .brand_logo { height: 48px; }
    .content_inner { padding-left: 20px; padding-right: 20px; }
    .content_inner2 { padding-top: 45px; padding-bottom: 45px; }
    .content_spalten > *, .content_karten > * { flex-basis: 100%; }
    .content_karte { padding: 24px 20px; border-radius: 30px; }
    .content_hinweis { padding: 24px 20px; }
    .karten_titel { align-items: flex-start; }
    .karten_titel img { width: 54px; }
    .accordion_titel { padding: 18px; border-radius: 24px; font-size: 16px; }
    .accordion_titel::before { display: none; }
    .accordion_titel::after { margin-left: auto; width: 28px; }
    .hero_text, .content_hero_start .hero_text, .content_fotoband .hero_text,
    #content_1005 .hero_text, #content_1200 .hero_text, #content_1500 .hero_text { padding-left: 20px; padding-right: 20px; }
    .hero_text .hero_klein, .content_hero_start .hero_text .hero_klein { font-size: 22px; }
    .hero_label { left: 20px; right: 20px; font-size: 14px; }
    .hero_icons, .content_hero_start .hero_icons { width: 135px; right: 16px; }
    #content_1402 .karten_titel > img.rund { width: 54px; height: 54px; flex-basis: 54px; }
    #content_1402 .angebote_touchlife_logo { flex-direction: column; gap: 20px; }
    #content_1402 .angebote_touchlife_logo > img { flex: 0 0 auto; width: 150px; max-width: 100%; margin-top: 0; }
    #content_1402 .angebote_touchlife_logo > div { width: 100%; }
    #content_1402 .angebote_termine { padding: 22px 18px; }
    #kontaktformular .jr_kontakt_button { width: 100%; }
    .footer_contact, .footer_legal { flex-direction: column; align-items: center; gap: 12px; }
    ul.footer_contact li + li::before, ul.footer_legal li + li::before { content: none; }
    .hero_icons, .content_hero_start .hero_icons { bottom: -5px; }
    #content_1005 { background-position: right center; }
    #content_1005 .hero_text { padding-top: 40px; padding-bottom: 40px; }
    #content_1200 .hero_text h1, .hero_text h1 { font-size: 54px; }
    #content_1001 h3 { hyphens: none !important; }
    .karten_titel h3 {hyphens: none !important; }
    .karten_titel { align-items: center; }
}