/* iPad (tablet) */
@media (max-width:1230px) {

    html,
    body {
        overscroll-behavior: none;
    }

    #logo {
        position: relative;
    }

    .header,
    .content,
    .footer {
        width: 100%;
        box-sizing: border-box;
    }

    .header {
        display: none;
    }

    .content {
        width: 66vw;
    }

    .hamburger {
        appearance: none;
        height: fit-content;
        border: 0;
        background: transparent;
        padding: 0;
        cursor: pointer;
        display: grid;
        place-items: start;
        /* start → center, so SVG sits nicely */
    }

    /* === base lines === */
    .hamburger-icon .line {
        stroke: black;
        stroke-width: 1.2;
        stroke-linecap: square;
        transform-origin: 12px 12px;
        transition:
            transform 0.25s ease,
            opacity 0.2s ease;
    }

    body.angebot h1 {
        margin-left: calc(-1 * 1.25em);
    }

    h1[data-cloned="true"] {
        transition: color 0.2s ease;
        color: var(--kiwi-gold);
    }

    /* DELETE */
    h1#laufbahnberatung {
        color: black;
    }


    h1[data-cloned="true"].active {
        color: black;
    }


    /* default positions */
    .hamburger-icon .top,
    .hamburger-icon .middle,
    .hamburger-icon .bottom {
        transform: rotate(0deg);
        opacity: 1;
    }

    /* reduce motion option */
    @media (prefers-reduced-motion: reduce) {
        .hamburger-icon .line {
            transition: none;
        }
    }

    body.menu-active {
        overflow: hidden;
    }

    /* active state keeps button visible */
    body.menu-active .hamburger {
        display: block;
        opacity: 1;
        z-index: 6000;
    }

    /* === ANIMATION magic ✨ === */

    /* 1️⃣ middle fades away */
    body.menu-active .hamburger-icon .middle {
        opacity: 0;
        transform: scaleX(0.5);
    }

    /* 2️⃣ top + bottom slide to middle first (no rotation yet) */
    body.menu-active .hamburger-icon .top,
    body.menu-active .hamburger-icon .bottom {
        transition:
            transform 0.2s ease,
            opacity 0.2s ease;
    }

    /* move top down (y7→y12 = +5px) */
    body.menu-active .hamburger-icon .top {
        transform: translateY(5px);
    }

    /* move bottom up (y17→y12 = -5px) */
    body.menu-active .hamburger-icon .bottom {
        transform: translateY(-5px);
    }

    /* 3️⃣ rotation phase — kicks in after a short delay */
    body.menu-active .hamburger-icon .top {
        transform: translateY(3.8px) rotate(45deg);
        transition:
            transform 0.25s ease 0.1s,
            /* ← delay rotation by 0.2s */
            opacity 0.2s ease;
    }

    body.menu-active .hamburger-icon .bottom {
        transform: translateY(-3.8px) rotate(-45deg);
        transition:
            transform 0.25s ease 0.1s,
            opacity 0.2s ease;
    }

    /* optional smoother reverse motion */
    body:not(.menu-active) .hamburger-icon .top,
    body:not(.menu-active) .hamburger-icon .bottom,
    body:not(.menu-active) .hamburger-icon .middle {
        transition-delay: 0s;
        stroke-width: 1.2;
        /* ensures it slides back cleanly */
    }

    body.menu-active .whole-page {
        pointer-events: none;
    }

    .mobile-header {
        z-index: 2000;
        background-color: white;
        display: flex;
        justify-content: space-between;
        position: absolute;
        top: 0;
        left: 0;
        padding: 2em 2em 0 2em;
        width: 100vw;
        box-sizing: border-box;
        transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease;
        transform: translateY(0);


    }

    .mobile-header.hide {
        top: -100px;
        /* or header height */
        opacity: 0;
    }

    .mobile-header.fixed {
        position: fixed;
        top: 0;
    }

    img {
        max-width: 800px;
        max-height: 700px;
    }

    img {
        width: auto;
        height: auto;

    }

    figure>img {
        max-width: 100%;
    }

    .whole-page {
        display: grid;
        grid-template-columns: 1fr 2fr;
        position: relative;
        /* gives us a coordinate system */
    }


    .unworter {
        display: none;
        height: 50vh;
        margin-top: 7.4em;
        grid-column: 1;
    }

    .page {
        grid-column: 2 / 3;
        position: relative;
        /* we’ll use THIS as the anchor */
        display: flex;
        flex-direction: column;
        min-height: calc(100vh - 1em);
    }

    .un-wort-mobile {
        display: none;
        position: fixed;
        height: 50vh;
        align-items: flex-start;
        justify-content: flex-end;
        font-size: var(--larger-text-size);
        font-family: var(--suisse-med);
    }



    body.menu-active .mobile-menu {
        background: white;
        z-index: 5000;
        position: absolute;
        top: 0;
        left: 0;
        height: 100dvh;
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }


    body.menu-active .hamburger {
        opacity: 1;
    }

    body.menu-active #logo {
        opacity: 0;
    }

    body.menu-active form {
        opacity: 0;
    }

    body.menu-active .un-wort-mobile {
        opacity: 0;
    }



    .mobile-menu {
        display: block;
        padding: 8.5em 4em;
        position: absolute;
        inset: 0;
        justify-content: left;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.4s ease, transform 0.4s ease;
    }

    .mobile-menu>a {
        text-transform: lowercase;
        line-height: 1.3em;
        font-size: 2.6em;
        display: block;
    }

    .mobile-menu>a.Impressum {
        margin-top: 3em;
    }

    .mobile-menu>a.Impressum,
    .mobile-menu>a.AGB,
    .mobile-menu>a.Datenschutz {
        font-size: var(--text-size);
        line-height: 1.5em;
    }
}







/* Mobile */
@media (max-width: 600px) {
    :root {
        --text-size: 19.5px;
        --larger-text-size: 1.7em;
        --text-line-height: 1.2em;
        --mobile-margin: 2em;
    }


    html,
    body {
        height: 100%;
        overscroll-behavior: none;

        scroll-snap-type: y proximity;
        scroll-padding-top: 11.65em;

        margin: 0;
        padding: 0;
    }

    .text-block-angebot section {
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    h1[id^="laufbahnberatung"] {
        scroll-margin-top: 11.65em;
    }

    h1[id^="positionierungsberatung"] {
        scroll-margin-top: 5.635em;
    }

    h1[id^="bewerbungscoaching"] {
        scroll-margin-top: 5.635em;
    }

    h1[id^="sinnerfllt-arbeiten-und-leben"] {
        scroll-margin-top: 5.635em;
    }

    h1[id^="gelingendes-lterwerden"] {
        scroll-margin-top: 5.635em;
    }

    #logo {
        position: relative;
    }

    .mobile-header {
        z-index: 2000;

        background-color: white;
        display: flex;
        justify-content: space-between;
        position: absolute;
        top: 0;
        padding: 1em 1em 0 1em;
        width: 100vw;
        box-sizing: border-box;
        transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease;
        transform: translateY(0);
    }

    .mobile-header.hide {
        top: -100px;
        /* or header height */
        opacity: 0;
    }

    .mobile-header.fixed {
        position: fixed;
        top: 0;
    }

    body.menu-active .hamburger {
        opacity: 1;
    }

    .hamburger {
        appearance: none;
        border: 0;
        background: transparent;
        padding: 0;
        cursor: pointer;
        display: grid;
        place-items: start;
        /* start → center, so SVG sits nicely */
    }

    /* === base lines === */
    .hamburger-icon .line {
        stroke: black;
        stroke-width: 1.2;
        stroke-linecap: square;
        transform-origin: 12px 12px;
        transition:
            transform 0.25s ease,
            opacity 0.2s ease;
    }

    /* default positions */
    .hamburger-icon .top,
    .hamburger-icon .middle,
    .hamburger-icon .bottom {
        transform: rotate(0deg);
        opacity: 1;
    }

    /* reduce motion option */
    @media (prefers-reduced-motion: reduce) {
        .hamburger-icon .line {
            transition: none;
        }
    }

    /* active state keeps button visible */
    body.menu-active .hamburger {
        display: block;
        opacity: 1;
        z-index: 6000;
    }

    /* === ANIMATION magic ✨ === */

    /* 1️⃣ middle fades away */
    body.menu-active .hamburger-icon .middle {
        opacity: 0;
        transform: scaleX(0.5);
    }

    /* 2️⃣ top + bottom slide to middle first (no rotation yet) */
    body.menu-active .hamburger-icon .top,
    body.menu-active .hamburger-icon .bottom {
        transition:
            transform 0.2s ease,
            opacity 0.2s ease;
    }

    /* move top down (y7→y12 = +5px) */
    body.menu-active .hamburger-icon .top {
        transform: translateY(5px);
    }

    /* move bottom up (y17→y12 = -5px) */
    body.menu-active .hamburger-icon .bottom {
        transform: translateY(-5px);
    }

    /* 3️⃣ rotation phase — kicks in after a short delay */
    body.menu-active .hamburger-icon .top {
        transform: translateY(3.8px) rotate(45deg);
        transition:
            transform 0.25s ease 0.1s,
            /* ← delay rotation by 0.2s */
            opacity 0.2s ease;
    }

    body.menu-active .hamburger-icon .bottom {
        transform: translateY(-3.8px) rotate(-45deg);
        transition:
            transform 0.25s ease 0.1s,
            opacity 0.2s ease;
    }

    /* optional smoother reverse motion */
    body:not(.menu-active) .hamburger-icon .top,
    body:not(.menu-active) .hamburger-icon .bottom,
    body:not(.menu-active) .hamburger-icon .middle {
        transition-delay: 0s;
        stroke-width: 1.2;
        /* ensures it slides back cleanly */
    }




    /* menu default state = hidden */
    .mobile-menu {
        display: block;
        padding: 6.2em 1em;
        position: absolute;
        inset: 0;
        justify-content: left;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.4s ease, transform 0.4s ease;

        overflow: hidden;
    }

    .mobile-menu>a {
        text-transform: lowercase;
        line-height: 1.3em;
        font-size: 2.6em;
        display: block;
    }

    .mobile-menu>a.Impressum {
        margin-top: 3em;
    }

    .mobile-menu>a.Impressum,
    .mobile-menu>a.AGB,
    .mobile-menu>a.Datenschutz {
        font-size: var(--text-size);
        line-height: 1.5em;
    }

    body.menu-active {
        overflow: hidden;
    }

    /* active state */
    body.menu-active .mobile-menu {
        background: white;
        z-index: 5000;
        position: absolute;
        top: 0 !important;
        left: 0;
        height: 100dvh;
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    body.menu-active #logo {
        opacity: 0;
    }

    body.menu-active form {
        opacity: 0;
    }

    body.menu-active .un-wort-mobile {
        opacity: 0;
    }

    /* you can replace "X" / "☰" via pseudo-elements later */


    body {
        font-family: var(--suisse-reg);
        font-size: var(--text-size);
        -webkit-font-smoothing: antialiased;
    }

    img {
        max-width: 800px;
        max-height: 700px;
        padding-left: var(--mobile-margin);
    }

    img {
        width: auto;
        height: auto;
    }

    figure>img {
        max-width: 100%;
    }

    /* your global frame */
    .whole-page {
        display: grid;
        grid-template-columns: 1fr;
        min-height: 100vh;
        padding: 1em;
        padding-top: 6.5em;

        box-sizing: border-box;
        gap: 0;
    }

    .unworter {
        display: none;
    }

    /* let the page fill inside that padding */
    .page {
        display: flex;
        flex-direction: column;
        min-height: 100%;
        width: 100%;
        margin-left: 0;
    }

    /* standardize inner widths */
    .header,
    .content,
    .footer {
        width: 100%;
        box-sizing: border-box;
    }

    .header {
        display: none;
    }

    ul {
        line-height: var(--text-line-height);
    }

    ul>li {
        margin-left: var(--mobile-margin) !important;
    }

    body.angebot h2:not([class*="cloned-"]) {
        margin-left: var(--mobile-margin) !important;
    }

    ul.publikationen-list li {
        margin-left: 0 !important;
    }

    .footer {
        opacity: 0;
        margin-top: 2em;
        margin-bottom: 0em;
    }

    #logo>img {
        width: 10em;
        padding-left: 0em;

    }


    section.intro>p {
        font-size: 1.2em;
        line-height: 1.15em;

        margin-top: 4em;
        margin-left: 0em;
        margin-right: 1em;

        margin-bottom: 1.5em;
    }

    .text-block-angebot {
        width: 100%;
    }

    .text-block-angebot li {
        margin-left: calc(1.2em + var(--mobile-margin));
    }

    .text-block-angebot h2:not([class*="cloned-"]) {
        margin-left: calc(2 * var(--mobile-margin));
    }



    h1[data-cloned="true"] {
        transition: color 0.2s ease;
        color: var(--kiwi-gold);
    }

    /* DELETE */
    h1#laufbahnberatung {
        color: black;
    }


    h1[data-cloned="true"].active {
        color: black;
    }

    .un-wort-mobile {
        grid-column: 1;
        justify-self: start;
        display: block;
        position: fixed !important;
        margin-left: 0;
        margin-top: 1.5em;
        font-size: var(--larger-text-size);
        font-family: var(--suisse-med);
    }

    h1 {
        margin-left: 0em;
        margin-top: 2.7em;
    }

    body.angebot h1 {
        margin-left: 1.2em;
    }

    h1[data-cloned="true"] {
        margin-left: 1.2em;
        margin-top: 2.7em;
    }

    h2 {
        margin-left: var(--mobile-margin);
    }

    form {
        margin-left: var(--mobile-margin);
    }

    input,
    textarea {
        width: 88%;
    }

    input[name=firstName],
    input[name=lastName] {
        width: 43.5%;
    }

    select {
        width: 100%;
    }

    textarea {
        padding-top: 0.8em;
        height: 6em;
    }

    .outro {
        margin-left: 0;
        margin-top: 3.5em;
        margin-bottom: 4em;
    }

    button {
        margin-left: -0.2em;
    }

    span {
        display: inline !important;
    }

    .block-lauftext>p {
        margin-left: var(--mobile-margin);
    }

    .blocks {
        margin-top: -5em;
    }

    .kontakt-block>p,
    .address-block>p {
        margin-left: var(--mobile-margin);
    }

    .address-block>a {
        display: block;
        margin-left: var(--mobile-margin)
    }

    .address-block a p {
        margin: 0;
        /* still needed to kill default vertical gaps */
    }


    li {
        margin-left: 1.2em;
    }

    .imprint-block>p {
        margin-left: var(--mobile-margin);
    }

    .publikationen-list {
        list-style: none;
        margin-left: var(--mobile-margin);
    }
}



@media (min-width: 1650px) {


    .header {
        max-width: 1452px;
    }

    nav>span {
        white-space: nowrap;
        margin-right: 132px;
    }

    .whole-page {
        max-width: 1550px;
    }
}