/* ════════════════════════════════════════
   GEMEINSAM: 769px – 1366px
════════════════════════════════════════ */
@media (max-width: 1400px) and (min-width: 769px) {

  body { zoom: 1; }

.navigation {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    gap: 10px;
  }

  .header.scrolled .navigation {
    position: absolute;
    left: auto;
    right: 0;
    transform: none;
  }

  .navigation a {
    font-size: clamp(11px, 1vw, 14px);
    padding: clamp(6px, 0.6vh, 9px) clamp(10px, 1.1vw, 18px);
    white-space: nowrap;
  }

  .logo {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity .6s, transform .6s;
  }

  .header.scrolled .logo {
    opacity: 1;
    transform: translateX(0);
  }

}


/* ════════════════════════════════════════
   1024px – 1366px
════════════════════════════════════════ */
@media (max-width: 1366px) and (min-width: 1024px) {

  /* ── ÜBER MICH ── */
  .about {
    padding: clamp(50px, 7vh, 90px) 0 40px;
    min-height: unset;
  }

  .about-grid {
    display: flex;
    flex-direction: column;
    max-width: 700px;
    margin-inline: auto;
    padding: 0 30px;
  }

  .about-text { display: contents; }

  .about-right {
    order: 1;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .about-icons { order: 2; }
  .about-copy  { order: 3; }
  .about-photo { order: 4; }

  .about-heading {
    position: relative;
    display: flex;
    justify-content: center;
    transform: none;
    margin: 0 0 6px 0;
    width: 100%;
  }

  .about-heading::before {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: clamp(380px, 55vw, 580px);
    height: clamp(100px, 12vw, 150px);
  }

  .about-heading h2 {
    position: relative;
    z-index: 2;
    font-size: clamp(48px, 5vw, 64px);
    text-align: center;
    padding: 14px clamp(50px, 8vw, 120px);
    width: 100%;
    margin: 0;
  }

  .about-icons {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 32px;
    height: auto !important;
    margin-top: 10px !important;
    margin-bottom: 24px !important;
    position: static !important;
    width: 100%;
    left: auto !important;
  }

  .about-icon {
    position: static !important;
    left: auto !important;
    top: auto !important;
  }

  .about-icon img {
    width: clamp(120px, 16vw, 180px);
    height: auto;
  }

  .about-copy {
    margin: 0 auto;
    max-width: 100%;
    padding: 0;
    text-align: center;
  }

  .about-copy p {
    font-size: clamp(16px, 1.8vw, 20px);
  }

  .about-photo {
    order: 4;
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .about-photo img {
    width: 70%;
    max-width: 380px;
    margin: 30px 0 0;
    display: block;
  }

  /* ── BRUSH ÜBERSCHRIFTEN ── */
  .offer-title {
    display: flex;
    justify-content: center;
  }

  .offer-title::before {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: clamp(300px, 45vw, 520px);
    height: clamp(100px, 12vw, 150px);
  }

  .offer {
    padding: clamp(100px, 12vh, 140px) 0 60px;
  }

  .tarife-title {
    display: flex;
    justify-content: center;
  }

  .tarife-title::before {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: clamp(360px, 50vw, 580px);
    height: clamp(110px, 13vw, 160px);
  }

  .praxis-title::before {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: clamp(380px, 60vw, 680px);
    height: clamp(100px, 12vw, 150px);
  }

  .kontakt-heading {
    display: flex;
    justify-content: center;
  }

  .kontakt-heading::before {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: clamp(280px, 50vw, 540px);
    height: clamp(100px, 12vw, 160px);
  }

  /* ── TARIFE ── */
  .tarife-row {
    flex-direction: column;
    align-items: center;
    gap: 36px;
    padding: 0 30px;
  }

  .tarife-sep { display: none; }

  .tarife-col {
    min-width: unset;
    width: 100%;
    max-width: 580px;
    text-align: center;
  }

  .tarife-left { padding-left: 0; }

  /* ── KONTAKT ── */
  .kontakt {
    padding: clamp(60px, 7vh, 90px) 0 80px;
  }

  .kontakt-container {
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 0 30px;
    text-align: center;
  }

  .kontakt-left {
    max-width: 100%;
    width: 100%;
  }

  .kontakt-heading {
    margin-bottom: clamp(40px, 5vh, 60px);
  }

  .kontakt-details {
    padding-left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .kontakt-row {
    justify-content: center;
    font-size: clamp(16px, 1.4vw, 20px);
  }

  .kontakt-text {
    padding-left: 0;
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: center;
    max-width: 560px;
    margin-inline: auto;
  }

  .kontakt-text p {
    font-size: clamp(20px, 1.8vw, 26px);
    line-height: 1.7;
    margin-bottom: 14px;
  }

  .kontakt-right {
    position: static;
    width: 100%;
    height: auto;
    margin: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
  }

  .kontakt-map {
    position: static;
  }

  .kontakt-map img {
    width: min(260px, 35vw);
    height: auto;
    display: block;
  }

  .termin-icon {
    position: static;
  }

  .termin-icon img {
    width: min(260px, 35vw);
    height: auto;
    display: block;
  }

}


/* ════════════════════════════════════════
   769px – 1023px
════════════════════════════════════════ */
@media (max-width: 1023px) and (min-width: 769px) {

  /* ── HERO ── */
  .hero-image {
    height: clamp(280px, 40vw, 400px);
  }

  .hero-values {
    font-size: clamp(18px, 2.2vw, 24px);
    gap: clamp(16px, 1.8vw, 28px);
  }

  .hero-values .dot {
    width: clamp(10px, 1vw, 14px);
    height: clamp(10px, 1vw, 14px);
  }

  /* ── ÜBER MICH ── */
  .about {
    padding: clamp(50px, 7vh, 90px) 0 40px;
    min-height: unset;
  }

  .about-grid {
    display: flex;
    flex-direction: column;
    max-width: 640px;
    margin-inline: auto;
    padding: 0 30px;
  }

  .about-text { display: contents; }

  .about-right {
    order: 1;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .about-icons { order: 2; }
  .about-copy  { order: 3; }
  .about-photo { order: 4; }

  .about-heading {
    position: relative;
    display: flex;
    justify-content: center;
    transform: none;
    margin: 0 0 6px 0;
    width: 100%;
  }

  .about-heading::before {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: clamp(300px, 70vw, 480px);
    height: clamp(80px, 12vw, 120px);
  }

  .about-heading h2 {
    position: relative;
    z-index: 2;
    font-size: clamp(42px, 6vw, 58px);
    text-align: center;
    padding: 14px clamp(40px, 8vw, 100px);
    width: 100%;
  }

  .about-icons {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 24px;
    height: auto !important;
    margin-top: 8px !important;
    margin-bottom: 20px !important;
    position: static !important;
    width: 100%;
    left: auto !important;
  }

  .about-icon {
    position: static !important;
    left: auto !important;
    top: auto !important;
  }

  .about-icon img {
    width: clamp(100px, 16vw, 140px);
    height: auto;
  }

  .about-copy {
    margin: 0 auto;
    max-width: 100%;
    padding: 0;
    text-align: center;
  }

  .about-copy p {
    font-size: clamp(15px, 2vw, 18px);
  }

  .about-photo {
    order: 4;
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .about-photo img {
    width: 75%;
    max-width: 340px;
    margin: 30px 0 0;
    display: block;
  }

  /* ── BRUSH ÜBERSCHRIFTEN ── */
  .offer-title {
    display: flex;
    justify-content: center;
  }

  .offer-title::before {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: clamp(280px, 65vw, 440px);
    height: clamp(90px, 12vw, 130px);
  }

  .tarife-title {
    display: flex;
    justify-content: center;
  }

  .tarife-title::before {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: clamp(300px, 68vw, 480px);
    height: clamp(90px, 13vw, 140px);
  }

  .praxis-title::before {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: clamp(320px, 72vw, 540px);
    height: clamp(90px, 12vw, 130px);
  }

  .kontakt-heading {
    display: flex;
    justify-content: center;
  }

  .kontakt-heading::before {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: clamp(260px, 65vw, 460px);
    height: clamp(90px, 12vw, 140px);
  }

  /* ── ANGEBOT ── */
  .offer {
    padding: clamp(80px, 10vh, 120px) 0 60px;
  }

  .offer-icons {
    gap: clamp(40px, 6vw, 80px);
  }

  .offer-item {
    width: clamp(240px, 30vw, 360px);
  }

  .offer-item img {
    transform: none !important;
  }

  /* ── TARIFE ── */
  .tarife {
    padding: clamp(60px, 7vh, 90px) 0 50px;
  }

  .tarife-row {
    flex-direction: column;
    align-items: center;
    gap: 36px;
    padding: 0 30px;
  }

  .tarife-sep { display: none; }

  .tarife-col {
    min-width: unset;
    width: 100%;
    max-width: 520px;
    text-align: center;
  }

  .tarife-left {
    text-align: center;
    padding-left: 0;
  }

  .tarife-col h3 {
    font-size: clamp(24px, 3vw, 32px);
    min-height: unset;
    margin-bottom: 16px;
  }

  .tarife-col p {
    font-size: clamp(15px, 1.8vw, 18px);
  }

  /* ── PRAXIS ── */
  .praxis {
    padding: clamp(60px, 7vh, 90px) 0;
    min-height: unset;
  }

  .praxis-viewport {
    width: min(900px, 92vw);
  }

  .praxis-card {
    flex: 0 0 calc((100% - clamp(16px, 2vw, 24px)) / 2);
  }

  /* ── KONTAKT ── */
  .kontakt {
    padding: clamp(60px, 7vh, 90px) 0 80px;
  }

  .kontakt-container {
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 0 30px;
    text-align: center;
  }

  .kontakt-left {
    max-width: 100%;
    width: 100%;
  }

  .kontakt-details {
    padding-left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .kontakt-row {
    justify-content: center;
    font-size: clamp(16px, 2vw, 20px);
  }

  .kontakt-text {
    padding-left: 0;
    margin-top: 40px;
    margin-bottom: 40px;
    text-align: center;
    max-width: 100%;
  }

  .kontakt-text p {
    font-size: clamp(17px, 2vw, 22px);
    line-height: 1.7;
    margin-bottom: 14px;
  }

  .kontakt-right {
    position: static;
    width: 100%;
    height: auto;
    margin: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
  }

  .kontakt-map {
    position: static;
  }

  .kontakt-map img {
    width: min(230px, 30vw);
    height: auto;
    display: block;
  }

  .termin-icon {
    position: static;
  }

  .termin-icon img {
    width: min(230px, 30vw);
    height: auto;
    display: block;
  }


/* UNTERSEITEN */

/*    UNTERSEITEN: 1024px – 1366px */

@media (max-width: 1366px) and (min-width: 1024px) {

  /* ── KINDER ── */
  .kinder-stage {
    padding: clamp(90px, 10vh, 120px) 0 clamp(70px, 8vh, 100px);
  }

  .kinder-copy {
    width: min(600px, 52vw);
    margin-left: 5vw;
  }

  .kinder-copy h1 {
    font-size: clamp(42px, 4vw, 58px);
  }

  .kinder-intro {
    font-size: clamp(16px, 1.3vw, 19px);
    margin-bottom: 36px;
  }

  .kinder-copy h2 {
    font-size: clamp(20px, 1.5vw, 24px);
  }

  .kinder-list {
    font-size: clamp(16px, 1.3vw, 19px);
  }

  .kinder-photo {
    width: clamp(260px, 24vw, 400px);
    right: 5vw;
    top: 90px;
  }

  .kinder-back {
    right: 28vw;
    bottom: 70px;
  }

  .kinder-back img {
    width: clamp(100px, 9vw, 140px);
  }

  /* ── ERWACHSENE ── */
  .erwachsene-stage {
    padding: clamp(90px, 10vh, 120px) 0 clamp(70px, 8vh, 100px);
  }

  .erwachsene-copy {
    width: min(600px, 52vw);
    margin-right: 5vw;
  }

  .erwachsene-copy h1 {
    font-size: clamp(42px, 4vw, 58px);
  }

  .erwachsene-intro {
    font-size: clamp(16px, 1.3vw, 19px);
    margin-bottom: 36px;
  }

  .erwachsene-copy h2 {
    font-size: clamp(20px, 1.5vw, 24px);
  }

  .erwachsene-list {
    font-size: clamp(16px, 1.3vw, 19px);
  }

  .erwachsene-photo {
    width: clamp(260px, 24vw, 400px);
    left: 5vw;
    top: 90px;
  }

  .subpage-erwachsene .erwachsene-stage .erwachsene-back {
    position: absolute !important;
    left: auto !important;
    right: 5vw !important;
    bottom: 70px !important;
  }

  .erwachsene-back img {
    width: clamp(100px, 9vw, 140px);
  }

  /* ── WERDEGANG ── */
  .werdegang-header {
    margin-top: 60px;
    margin-bottom: 80px;
  }

  .werdegang-header h1 {
    font-size: clamp(40px, 4vw, 58px);
  }

  .werdegang-header h1::before {
    height: 12px;
  }

  .timeline-image {
    width: 100vw;
    height: auto;
  }

  /* ── FORTBILDUNGEN ── */
  .fortbildungen-container {
    flex-direction: column;
    align-items: center;
    padding: 60px 40px 80px;
    gap: 20px;
    margin: 0 auto;
  }

  .fortbildungen-content {
    max-width: 640px;
    margin-left: 0;
    width: 100%;
    text-align: center;
  }

  .fortbildungen-header {
    margin-bottom: 40px;
    text-align: center;
  }

  .fortbildungen-header h1 {
    font-size: clamp(36px, 5vw, 52px);
  }

  .fortbildungen-header h1::before {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: clamp(280px, 60vw, 460px);
    height: 100px;
  }

  .fortbildungen-text {
    font-size: clamp(15px, 2vw, 18px);
  }

  .fortbildungen-text ul {
    text-align: left;
  }

  .kreis-umrandung {
    display: none;
  }

  .fortbildungen-logos {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .logos {
    position: static !important;
    top: auto !important;
    right: auto !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 40px;
  }

  .logos img {
    max-width: clamp(100px, 16vw, 160px);
    height: auto;
  }

}


/*    UNTERSEITEN: 769px – 1023px */

@media (max-width: 1023px) and (min-width: 769px) {

  /* ── KINDER ── */
  .subpage-kinder {
    background-attachment: scroll;
  }

  .kinder-stage {
    padding: 80px 32px 80px;
    display: grid;
    grid-template-areas:
      "title"
      "image"
      "intro"
      "subtitle"
      "list"
      "back";
    justify-items: center;
    text-align: center;
    min-height: unset;
  }

  .kinder-copy {
    display: contents;
  }

  .kinder-copy h1 {
    grid-area: title;
    font-size: clamp(38px, 6vw, 52px);
    margin-bottom: 24px;
    width: 100%;
  }

  .kinder-photo {
    grid-area: image;
    position: static !important;
    width: clamp(200px, 36vw, 300px);
    aspect-ratio: 1/1;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 28px;
  }

  .kinder-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
  }

  .kinder-intro {
    grid-area: intro;
    font-size: clamp(16px, 2.2vw, 19px);
    line-height: 1.65;
    margin-bottom: 28px;
    max-width: 580px;
  }

  .kinder-copy h2 {
    grid-area: subtitle;
    font-size: clamp(20px, 2.6vw, 24px);
    margin-bottom: 18px;
    width: 100%;
  }

  .kinder-list {
    grid-area: list;
    padding-left: 24px;
    text-align: left;
    font-size: clamp(16px, 2vw, 19px);
    margin-bottom: 40px;
    max-width: 560px;
    width: 100%;
  }

  .kinder-back {
    grid-area: back;
    position: static !important;
    justify-self: center;
    margin-top: 10px;
  }

  .kinder-back img {
    width: clamp(110px, 14vw, 150px);
  }

  /* ── ERWACHSENE ── */
  .subpage-erwachsene {
    background-attachment: scroll;
  }

  .erwachsene-stage {
    padding: 80px 32px 80px;
    display: grid;
    grid-template-areas:
      "title"
      "image"
      "intro"
      "subtitle"
      "list"
      "back";
    justify-items: center;
    text-align: center;
    min-height: unset;
  }

  .erwachsene-copy {
    display: contents;
  }

  .erwachsene-copy h1 {
    grid-area: title;
    font-size: clamp(38px, 6vw, 52px);
    margin-bottom: 24px;
    width: 100%;
  }

  .erwachsene-photo {
    grid-area: image;
    position: static !important;
    width: clamp(200px, 36vw, 300px);
    aspect-ratio: 1/1;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 28px;
  }

  .erwachsene-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
  }

  .erwachsene-intro {
    grid-area: intro;
    font-size: clamp(16px, 2.2vw, 19px);
    line-height: 1.65;
    margin-bottom: 28px;
    max-width: 580px;
  }

  .erwachsene-copy h2 {
    grid-area: subtitle;
    font-size: clamp(20px, 2.6vw, 24px);
    margin-bottom: 18px;
    width: 100%;
  }

  .erwachsene-list {
    grid-area: list;
    padding-left: 24px;
    text-align: left;
    font-size: clamp(16px, 2vw, 19px);
    line-height: 1.65;
    margin-bottom: 40px;
    max-width: 560px;
    width: 100%;
  }

  .erwachsene-list li {
    margin: 8px 0;
  }

  .erwachsene-back {
    grid-area: back;
    position: static !important;
    justify-self: center;
    margin-top: 10px;
  }

  .erwachsene-back img {
    width: clamp(110px, 14vw, 150px);
  }

  /* ── WERDEGANG ── */
  .werdegang-header {
    margin-top: 50px;
    margin-bottom: 60px;
    text-align: center;
  }

  .werdegang-header h1 {
    font-size: clamp(36px, 6vw, 52px);
  }

  .werdegang-header h1::before {
    width: 110%;
    height: 80px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: url("assets/brush-beruflicherwerdegang.png") center / 100% 100% no-repeat;
  }

  .timeline-image {
    width: 100vw;
    height: auto;
    margin-left: calc(50% - 50vw);
  }

  /* ── FORTBILDUNGEN ── */
  .fortbildungen-container {
    flex-direction: row;
    align-items: flex-start;
    padding: 60px 40px 80px;
    gap: 40px;
    margin: 0 auto;
  }

  .fortbildungen-content {
    flex: 1;
    max-width: 70%;
    margin-left: 0;
    text-align: left;
  }

  .fortbildungen-header {
    margin-bottom: 40px;
    text-align: left;
  }

  .fortbildungen-header h1 {
    font-size: clamp(34px, 6vw, 48px);
  }

  .fortbildungen-header h1::before {
    left: -60px;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(280px, 55vw, 480px);
    height: 120px;
  }

  .fortbildungen-text {
    font-size: clamp(16px, 2vw, 20px);
  }

  .fortbildungen-text ul {
    text-align: left;
  }

  .kreis-umrandung {
    display: none;
  }

  .fortbildungen-logos {
    position: static !important;
    width: auto !important;
    height: auto !important;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 100px;
  }

  .logos {
    position: static !important;
    top: auto !important;
    right: auto !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
  }

  .logos img {
    max-width: clamp(80px, 14vw, 130px);
    height: auto;
  }

}


/* ── IMPRESSUM ── */
@media (max-width: 1366px) and (min-width: 769px) {

  .impressum-container {
    padding: 80px 40px 100px;
  }

  .impressum-header {
    margin-bottom: 50px;
  }

  .impressum-header h1 {
    font-size: clamp(36px, 5vw, 52px);
  }

  .impressum-header h1::before {
    display: none;
  }

  .impressum-content {
    font-size: clamp(16px, 2vw, 18px);
    max-width: 100%;
  }

  /* ── LEGAL SECTION ── */
  @media (max-width: 1366px) and (min-width: 769px) {

    .legal-section {
      font-size: clamp(16px, 2vw, 18px);
      max-width: 100%;
    }

    .legal-section h2 {
      font-size: clamp(26px, 3.5vw, 36px);
    }

    .legal-section h3 {
      font-size: clamp(17px, 2vw, 21px);
    }

  }
}}