/* =========================================================
   MIIGORANI – RESPONSIVE DESIGN
   ---------------------------------------------------------
   Breakpoints:
   1600+  = große Desktop-Bildschirme
   1400   = kleinere Desktop-Bildschirme / Notebooks
   1180   = Notebook / Tablet Landscape
   900    = Tablet Portrait
   700    = große Smartphones / kleine Tablets
   480    = Smartphones
   380    = kleine Smartphones
   340    = sehr kleine Smartphones
   ========================================================= */


/* =========================================================
   1. ALLGEMEINE RESPONSIVE GRUNDLAGEN
   ========================================================= */

@media (max-width: 1179px) {

    html {
        width: 100%;
        overflow-x: hidden;
    }

    body {
        min-width: 0;
        width: 100%;
        overflow-x: hidden;
    }

    img,
    svg,
    video {
        max-width: 100%;
        height: auto;
    }

    canvas {
        max-width: 100%;
    }

}


/* =========================================================
   2. GROSSE DESKTOPS
   1600px+
   ========================================================= */

@media (min-width: 1600px) {

    :root {
        --page-inline-space: 120px;
    }

    .hero-grid {
        gap: 100px;
    }

    .hero .globe-scene {
        width: 540px;
        height: 540px;
    }

    .hero .globe-3d {
        width: 350px;
        height: 350px;
    }

}


/* =========================================================
   3. KLEINERE DESKTOPS / NOTEBOOKS
   bis 1400px
   ========================================================= */

@media (max-width: 1400px) {

    :root {
        --page-inline-space: 64px;
        --space-13: 100px;
    }

    .nav-links {
        gap: 22px;
    }

    .nav-link {
        font-size: 13px;
    }

    .hero-grid {
        grid-template-columns:
            minmax(540px, 1.15fr)
            minmax(380px, 0.85fr);
        gap: 50px;
    }

    .hero-title {
        font-size: clamp(52px, 5vw, 74px);
    }

    .hero .globe-scene {
        width: 450px;
        height: 450px;
    }

    .hero .globe-3d {
        width: 290px;
        height: 290px;
    }

    .globe-ring {
        width: 380px;
        height: 380px;
    }

    .ring-2 {
        width: 420px;
        height: 420px;
    }

    .ring-3 {
        width: 460px;
        height: 460px;
    }

    .split-layout {
        gap: 60px;
    }

    .cta-panel {
        padding: 70px;
    }

}


/* =========================================================
   4. NOTEBOOK / TABLET LANDSCAPE
   bis 1180px
   ========================================================= */

@media (max-width: 1180px) {

    :root {
        --page-inline-space: 48px;
        --header-height: 80px;
        --space-13: 90px;
        --space-12: 80px;
        --space-11: 68px;
    }

    /* Typografie */

    h1 {
        font-size: clamp(48px, 6vw, 68px);
    }

    h2 {
        font-size: clamp(36px, 4.5vw, 52px);
    }

    h3 {
        font-size: clamp(24px, 2.8vw, 32px);
    }

    p {
        font-size: 17px;
    }

    /* Navigation */

    .nav-links {
        gap: 16px;
    }

    .nav-link {
        font-size: 12px;
    }

    .navbar .btn {
        min-height: 46px;
        padding: 12px 18px;
        font-size: 12px;
    }

    /* Hero */

    .hero-grid {
        grid-template-columns:
            minmax(480px, 1.1fr)
            minmax(340px, 0.9fr);
        gap: 36px;
    }

    .hero-title {
        font-size: clamp(46px, 5.6vw, 64px);
    }

    .hero-subtitle {
        font-size: 18px;
    }

    .hero .globe-scene {
        width: 390px;
        height: 390px;
    }

    .hero .globe-3d {
        width: 255px;
        height: 255px;
    }

    .globe-ring {
        width: 325px;
        height: 325px;
    }

    .ring-2 {
        width: 355px;
        height: 355px;
    }

    .ring-3 {
        width: 385px;
        height: 385px;
    }

    /* Grid */

    .grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Split Layout */

    .split-layout {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(350px, 0.9fr);
        gap: 50px;
    }

    /* Cards */

    .card {
        padding: 30px;
    }

    .service-card {
        min-height: 0;
    }

    /* CTA */

    .cta-panel {
        padding: 60px;
    }

    .cta-content {
        gap: 40px;
    }

    /* Footer */

    .footer-grid {
        grid-template-columns:
            1.3fr
            repeat(3, minmax(150px, 0.7fr));
        gap: 36px;
    }

}


/* =========================================================
   5. TABLET PORTRAIT
   bis 900px
   ========================================================= */

@media (max-width: 900px) {

    :root {
        --page-inline-space: 40px;
        --header-height: 76px;
        --space-13: 80px;
        --space-10: 52px;
    }

    /* Header */

    .brand {
        flex-shrink: 0;
    }

    .brand-logo {
        width: 58px;
        height: 58px;
        flex: 0 0 58px;
    }

    .brand-name {
        font-size: 28px;
    }

    .brand-tagline {
        font-size: 10px;
    }

    .menu-toggle {
        width: 58px;
        height: 58px;
        flex: 0 0 58px;
    }

    .main-navigation {
        max-width: min(
            340px,
            calc(100vw - var(--page-inline-space))
        );
    }

    /* Hero */

    .hero {
        min-height: auto;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        min-height: auto;
        gap: 60px;
        padding-top: 90px;
        padding-bottom: 80px;
    }

    .hero-content {
        max-width: 760px;
    }

    .hero-title {
        max-width: 760px;
        font-size: clamp(48px, 8vw, 68px);
    }

    .hero-subtitle {
        max-width: 680px;
    }

    .hero .globe-scene {
        width: 430px;
        height: 430px;
        justify-self: center;
    }

    .hero .globe-3d {
        width: 280px;
        height: 280px;
    }

    .globe-ring {
        width: 355px;
        height: 355px;
    }

    .ring-2 {
        width: 395px;
        height: 395px;
    }

    .ring-3 {
        width: 430px;
        height: 430px;
    }

    /* Hintergrundstädte reduzieren */

    .capital-cloud {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 22px;
        opacity: 0.065;
    }

    .capital-cloud span:nth-child(n + 41) {
        display: none;
    }

    /* Sections */

    .section-heading {
        display: block;
        margin-bottom: 48px;
    }

    .section-heading-content {
        max-width: 100%;
    }

    .section-title {
        max-width: 780px;
    }

    .section-intro {
        max-width: 700px;
    }

    /* Grids */

    .grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Split Layouts */

    .split-layout {
        grid-template-columns: 1fr;
        gap: 56px;
        align-items: start;
    }

    /* Prozess */

    .process {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 50px 36px;
    }

    .process::before {
        display: none;
    }

    /* Quote */

    .quote-card {
        padding: 55px;
    }

    .quote-text {
        font-size: 25px;
    }

    /* CTA */

    .cta-content {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Kontaktformular */

    #kontakt .split-layout {
        gap: 48px;
    }

    /* Footer */

    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   6. GROSSE SMARTPHONES / KLEINE TABLETS
   bis 700px
   ========================================================= */

@media (max-width: 700px) {

    :root {
        --page-inline-space: 32px;
        --header-height: 92px;
        --space-13: 68px;
        --space-12: 64px;
        --space-11: 58px;
        --space-10: 48px;
        --space-9: 40px;
        --space-8: 32px;
    }

    /* Header */

    .site-header {
        height: var(--header-height);
        min-height: var(--header-height);
    }

    .navbar {
        min-height: var(--header-height);
    }

    .brand {
        gap: 12px;
    }

    .brand-logo {
        width: 58px;
        height: 58px;
        flex: 0 0 58px;
    }

    .brand-name {
        font-size: 27px;
    }

    .brand-tagline {
        font-size: 10px;
    }

    .menu-toggle {
        width: 58px;
        height: 58px;
        flex: 0 0 58px;
    }

    .menu-toggle-text {
        font-size: 16px;
    }

    .main-navigation {
        top: 100%;
        left: calc(-1 * var(--page-inline-space));
        right: calc(-1 * var(--page-inline-space));
        width: auto;
        max-width: none;
        min-width: 0;
        padding: 24px var(--page-inline-space) 28px;
        border-radius: 0 0 20px 20px;
    }

    .main-navigation .nav-link {
        font-size: 14px;
        white-space: normal;
    }

    /* Typografie */

    h1 {
        font-size: clamp(42px, 10vw, 58px);
    }

    h2 {
        font-size: clamp(32px, 8vw, 44px);
    }

    h3 {
        font-size: 25px;
    }

    p {
        font-size: 16px;
    }

    .section-intro {
        font-size: 17px;
        line-height: 1.65;
    }

    /* Hero */

    .hero-grid {
        gap: 45px;
        padding-top: 72px;
        padding-bottom: 64px;
    }

    .hero-title {
        font-size: clamp(42px, 10vw, 58px);
        line-height: 1.02;
        letter-spacing: -0.045em;
    }

    .hero-title-line + .hero-title-line {
        margin-top: 10px;
    }

    .hero-subtitle {
        font-size: 17px;
    }

    .hero .pulse-badge {
        flex-wrap: wrap;
        white-space: normal;
        line-height: 1.5;
    }

    .hero .globe-scene {
        width: 360px;
        height: 360px;
    }

    .hero .globe-3d {
        width: 235px;
        height: 235px;
    }

    .globe-ring {
        width: 295px;
        height: 295px;
    }

    .ring-2 {
        width: 325px;
        height: 325px;
    }

    .ring-3 {
        width: 355px;
        height: 355px;
    }

    .capital-cloud {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        padding-inline: 3%;
    }

    .capital-cloud span:nth-child(n + 29) {
        display: none;
    }

    /* Buttons auf Mobile konsequent vollbreit */

    main .btn {
        width: 100%;
        min-height: 52px;
        justify-content: center;
        padding: 14px 22px;
        text-align: center;
    }

    main .btn-group,
    main .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        gap: 14px;
    }

    .hero-actions {
        margin-bottom: 24px;
    }

    .cta-content > div:last-child {
        width: 100%;
    }

    #contact-form button[type="submit"] {
        width: 100%;
    }

    /* Alle Grids einspaltig */

    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }

    /* Cards */

    .card {
        padding: 28px;
        border-radius: 20px;
    }

    .card:hover {
        transform: none;
    }

    .card-title {
        font-size: 23px;
    }

    .card-number {
        top: 22px;
        right: 22px;
        font-size: 36px;
    }

    /* Feature Listen */

    .feature-item {
        padding: 20px;
    }

    /* Prozess */

    .process {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .process-step {
        display: grid;
        grid-template-columns: 64px 1fr;
        column-gap: 20px;
    }

    .process-number {
        grid-row: 1 / 3;
        margin-bottom: 0;
    }

    .process-title {
        align-self: end;
        margin-bottom: 8px;
    }

    /* Quote */

    .quote-card {
        padding: 42px 32px;
        border-radius: 24px;
    }

    .quote-mark {
        top: 20px;
        right: 24px;
        font-size: 110px;
    }

    .quote-text {
        font-size: 22px;
        line-height: 1.55;
    }

    /* CTA */

    .cta-panel {
        padding: 45px 32px;
        border-radius: 24px;
    }

    .cta-title {
        font-size: clamp(32px, 8vw, 44px);
    }

    .cta-description {
        font-size: 17px;
    }

    /* Formular */

    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-group,
    .form-group-full {
        grid-column: 1;
    }

    /* Footer */

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 14px;
        padding-block: 24px;
    }

}


/* =========================================================
   7. SMARTPHONES
   bis 480px
   ========================================================= */

@media (max-width: 480px) {

    :root {
        --page-inline-space: 22px;
        --header-height: 88px;
        --space-13: 58px;
        --space-11: 50px;
        --space-10: 42px;
    }

    /* Header / Mobile Navigation */

    .navbar {
        gap: 14px;
    }

    .brand {
        min-width: 0;
        gap: 11px;
    }

    .brand-logo {
        width: 58px;
        height: 58px;
        flex: 0 0 58px;
    }

    .brand-text {
        min-width: 0;
    }

    .brand-name {
        font-size: 25px;
    }

    .brand-tagline {
        font-size: 9px;
    }

    .menu-toggle {
        width: 58px;
        height: 58px;
        flex: 0 0 58px;
    }

    /* Hero */

    .hero-grid {
        padding-top: 60px;
        padding-bottom: 54px;
    }

    .hero .pulse-badge {
        gap: 8px;
        padding: 9px 12px;
        font-size: 11px;
    }

    .badge-separator {
        display: none;
    }

    .hero .eyebrow {
        margin-bottom: 18px;
    }

    .eyebrow {
        font-size: 11px;
        letter-spacing: 0.15em;
    }

    .eyebrow::before {
        width: 24px;
    }

    .hero-title {
        margin-bottom: 24px;
        font-size: clamp(38px, 11vw, 50px);
        line-height: 1.03;
    }

    .hero-subtitle {
        margin-bottom: 28px;
        font-size: 16px;
        line-height: 1.65;
    }

    /* Globe */

    .hero .globe-scene,
    .globe-scene {
        width: min(320px, 90vw);
        height: min(320px, 90vw);
    }

    .hero .globe-3d,
    .globe-3d {
        width: 205px;
        height: 205px;
    }

    .globe-ring {
        width: 255px;
        height: 255px;
    }

    .ring-2 {
        width: 280px;
        height: 280px;
    }

    .ring-3 {
        width: 305px;
        height: 305px;
    }

    /* Hintergrundstädte */

    .capital-cloud {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px 10px;
        opacity: 0.045;
        transform: rotate(-4deg) scale(1.12);
    }

    .capital-cloud span {
        font-size: 9px;
    }

    .capital-cloud span:nth-child(n + 19) {
        display: none;
    }

    /* Sections */

    .section-heading {
        margin-bottom: 38px;
    }

    .section-title {
        margin-bottom: 18px;
        font-size: clamp(30px, 8.5vw, 40px);
        line-height: 1.12;
    }

    .section-intro {
        font-size: 16px;
    }

    /* Cards */

    .card {
        padding: 24px 22px;
        border-radius: 18px;
    }

    .card-icon {
        width: 50px;
        height: 50px;
        margin-bottom: 20px;
    }

    .card-title {
        padding-right: 30px;
        font-size: 21px;
    }

    .card-text {
        font-size: 15px;
    }

    .card-number {
        top: 20px;
        right: 20px;
        font-size: 31px;
    }

    .service-card-list {
        gap: 10px;
        margin-top: 20px;
    }

    .service-card-list li {
        font-size: 14px;
        line-height: 1.55;
    }

    /* Feature List */

    .feature-item {
        grid-template-columns: 42px 1fr;
        gap: 16px;
        padding: 18px;
    }

    .feature-index {
        width: 42px;
        height: 42px;
    }

    .feature-title {
        font-size: 17px;
    }

    .feature-text {
        font-size: 14px;
        line-height: 1.6;
    }

    /* Prozess */

    .process-step {
        grid-template-columns: 54px 1fr;
        column-gap: 16px;
    }

    .process-number {
        width: 54px;
        height: 54px;
        font-size: 14px;
    }

    .process-title {
        font-size: 19px;
    }

    .process-text {
        font-size: 14px;
    }

    /* Quote */

    .quote-card {
        padding: 36px 24px;
    }

    .quote-text {
        font-size: 19px;
    }

    .quote-mark {
        right: 18px;
        font-size: 90px;
    }

    /* CTA */

    .cta-panel {
        padding: 36px 24px;
    }

    .cta-title {
        font-size: 32px;
    }

    .cta-description {
        font-size: 16px;
    }

    /* Tags */

    .tag-list {
        gap: 8px;
    }

    .badge {
        padding: 7px 10px;
        font-size: 10px;
        letter-spacing: 0.06em;
    }

    /* Formular */

    .form-grid {
        gap: 20px;
    }

    .form-control {
        min-height: 52px;
        padding: 13px 14px;
        font-size: 16px;
    }

    /*
       16px verhindert auf iOS Safari das automatische
       Hineinzoomen beim Fokus eines Formularfeldes.
    */

    textarea.form-control {
        min-height: 145px;
    }

    .form-label {
        font-size: 12px;
    }

    .privacy-consent {
        gap: 12px;
        font-size: 14px;
    }

    .privacy-consent input[type="checkbox"] {
        width: 21px;
        height: 21px;
    }

    /* Buttons */

    main .btn {
        min-height: 50px;
        padding-inline: 20px;
        font-size: 13px;
    }

    /* Footer */

    .site-footer {
        padding-top: 52px;
    }

    .footer-grid {
        padding-bottom: 44px;
    }

    .footer-brand-text,
    .footer-link {
        font-size: 14px;
    }

    .footer-legal {
        flex-wrap: wrap;
        gap: 18px;
    }

}


/* =========================================================
   8. KLEINE SMARTPHONES
   bis 380px
   ========================================================= */

@media (max-width: 380px) {

    :root {
        --page-inline-space: 18px;
    }

    .brand {
        gap: 9px;
    }

    .brand-logo {
        width: 54px;
        height: 54px;
        flex: 0 0 54px;
    }

    .brand-name {
        font-size: 23px;
    }

    .brand-tagline {
        font-size: 8px;
    }

    .menu-toggle {
        width: 54px;
        height: 54px;
        flex: 0 0 54px;
    }

    .hero-title {
        font-size: 36px;
    }

    .hero .pulse-badge > span:nth-child(2) {
        font-size: 10px;
    }

    .hero .globe-scene,
    .globe-scene {
        width: 285px;
        height: 285px;
    }

    .hero .globe-3d,
    .globe-3d {
        width: 180px;
        height: 180px;
    }

    .globe-ring {
        width: 225px;
        height: 225px;
    }

    .ring-2 {
        width: 250px;
        height: 250px;
    }

    .ring-3 {
        width: 275px;
        height: 275px;
    }

    .card {
        padding: 22px 18px;
    }

    .card-title {
        font-size: 20px;
    }

    .quote-card {
        padding-inline: 20px;
    }

    .cta-panel {
        padding-inline: 20px;
    }

}


/* =========================================================
   9. SEHR KLEINE BILDSCHIRME
   bis 340px
   ========================================================= */

@media (max-width: 340px) {

    :root {
        --page-inline-space: 15px;
    }

    .brand-name {
        font-size: 21px;
    }

    .brand-tagline {
        font-size: 7.5px;
    }

    .brand-logo {
        width: 50px;
        height: 50px;
        flex: 0 0 50px;
    }

    .menu-toggle {
        width: 50px;
        height: 50px;
        flex: 0 0 50px;
    }

    .hero-title {
        font-size: 33px;
    }

    .section-title {
        font-size: 29px;
    }

    .hero .globe-scene,
    .globe-scene {
        width: 260px;
        height: 260px;
    }

    .hero .globe-3d,
    .globe-3d {
        width: 165px;
        height: 165px;
    }

    .globe-ring {
        width: 205px;
        height: 205px;
    }

    .ring-2 {
        width: 228px;
        height: 228px;
    }

    .ring-3 {
        width: 250px;
        height: 250px;
    }

}


/* =========================================================
   10. TOUCH-GERÄTE
   Hover-Effekte reduzieren
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

    .card:hover {
        transform: none;
    }

    .feature-item:hover {
        transform: none;
    }

    .footer-link:hover {
        transform: none;
    }

    .btn:hover {
        transform: none;
    }

}


/* =========================================================
   11. LANDSCAPE AUF SMARTPHONES
   ========================================================= */

@media
    (max-height: 600px)
    and (orientation: landscape)
    and (max-width: 950px) {

    .hero {
        min-height: auto;
    }

    .hero-grid {
        grid-template-columns: 1fr 0.65fr;
        gap: 30px;
        padding-top: 50px;
        padding-bottom: 40px;
    }

    .hero-title {
        font-size: clamp(36px, 6vw, 50px);
    }

    .hero-subtitle {
        font-size: 15px;
    }

    .hero .globe-scene {
        width: 270px;
        height: 270px;
    }

    .hero .globe-3d {
        width: 170px;
        height: 170px;
    }

    .globe-ring {
        width: 210px;
        height: 210px;
    }

    .ring-2 {
        width: 235px;
        height: 235px;
    }

    .ring-3 {
        width: 260px;
        height: 260px;
    }

}


/* =========================================================
   12. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .globe-ring,
    .pulse-dot::before,
    .pulse-dot::after,
    .pulse-card,
    .capital-cloud span {
        animation: none !important;
    }

    .globe-3d {
        transition: none !important;
    }

}