@charset "utf-8";

/* ==============================================================
   E&C MAP GENERATOR
   ============================================================== */


/* ==============================================================
   01 ROOT
   ============================================================== */

:root {

    --ec-color-primary:
        #20382f;

    --ec-color-accent:
        #d46f32;

    --ec-color-text:
        #25312c;

    --ec-color-text-muted:
        #7a817e;

    --ec-color-background:
        #f4f5f3;

    --ec-color-surface:
        #ffffff;

    --ec-color-border:
        #dfe3e0;

    --ec-color-border-light:
        #eceeec;

    --ec-color-map-background:
        #f7f7f5;


    --ec-font-headline:
        "Cormorant Garamond",
        Georgia,
        serif;


    --ec-font-body:
        "Montserrat",
        Arial,
        sans-serif;


    --ec-sidebar-width:
        390px;


    --ec-workspace-gap:
        28px;


    --ec-page-padding:
        clamp(
            20px,
            2.5vw,
            42px
        );


    --ec-radius-sm:
        5px;


    --ec-radius-md:
        8px;


    --ec-shadow:
        0 8px 30px rgba(
            32,
            56,
            47,
            0.07
        );

}


/* ==============================================================
   02 BASIS
   ============================================================== */

*,
*::before,
*::after {
    box-sizing:
        border-box;
}


body {

    min-width:
        320px;

    min-height:
        100vh;

    margin:
        0;

    font-family:
        var(--ec-font-body);

    font-size:
        15px;

    line-height:
        1.6;

    color:
        var(--ec-color-text);

    background:
        var(--ec-color-background);

}


button,
input,
select {
    font:
        inherit;
}


/* ==============================================================
   03 HEADER
   ============================================================== */

.ec-map-generator__header {

    min-height:
        92px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        18px
        var(--ec-page-padding);

    color:
        #ffffff;

    background:
        var(--ec-color-primary);

}


.ec-map-generator__branding {

    display:
        flex;

    align-items:
        baseline;

    gap:
        16px;

    flex-shrink:
        0;

}


.ec-map-generator__eyebrow {

    font-size:
        0.7rem;

    font-weight:
        600;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;

    color:
        rgba(
            255,
            255,
            255,
            0.65
        );

}


.ec-map-generator__title {

    margin:
        0;

    font-family:
        var(--ec-font-headline);

    font-size:
        clamp(
            2rem,
            2.4vw,
            2.8rem
        );

    font-weight:
        500;

    line-height:
        1;

}


.ec-map-generator__header-center {

    min-width:
        0;

    flex:
        1;

    text-align:
        center;

}


.ec-project-status {

    display:
        inline-block;

    max-width:
        100%;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    font-size:
        0.72rem;

    font-weight:
        500;

    letter-spacing:
        0.04em;

    color:
        rgba(
            255,
            255,
            255,
            0.65
        );

}


.ec-map-generator__header-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    flex-shrink:
        0;

}


/* ==============================================================
   04 WORKSPACE
   ============================================================== */

.ec-map-generator__workspace {

    display:
        grid;

    grid-template-columns:
        var(--ec-sidebar-width)
        minmax(
            0,
            1fr
        );

    gap:
        var(--ec-workspace-gap);

    padding:
        var(--ec-page-padding);

}


/* ==============================================================
   05 SIDEBAR
   ============================================================== */

.ec-map-generator__sidebar {

    display:
        flex;

    flex-direction:
        column;

    gap:
        18px;

}


/* ==============================================================
   06 PANEL / AUF- UND ZUKLAPPEN
   ============================================================== */

.ec-panel {

    padding:
        0;

    background:
        var(--ec-color-surface);

    border:
        1px
        solid
        var(--ec-color-border);

    border-radius:
        var(--ec-radius-md);

    box-shadow:
        var(--ec-shadow);

    overflow:
        hidden;

}


/* Standard-Marker von details entfernen */

.ec-panel > summary {

    list-style:
        none;

}


.ec-panel > summary::-webkit-details-marker {

    display:
        none;

}


/* ---------------------------------------------------------------
   Panel-Kopf
   --------------------------------------------------------------- */

.ec-panel__header {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin:
        0;

    padding:
        20px 24px;

    cursor:
        pointer;

    user-select:
        none;

}


.ec-panel__header:hover {

    background:
        #fafbfa;

}


.ec-panel__number {

    font-size:
        0.7rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;

    color:
        var(--ec-color-accent);

}


.ec-panel__title {

    flex:
        1;

    margin:
        0;

    font-family:
        var(--ec-font-headline);

    font-size:
        1.55rem;

    font-weight:
        500;

    line-height:
        1.1;

    color:
        var(--ec-color-primary);

}


/* ---------------------------------------------------------------
   Pfeil rechts
   --------------------------------------------------------------- */

.ec-panel__toggle {

    font-size:
        0.75rem;

    color:
        var(--ec-color-text-muted);

    transition:
        transform 180ms ease;

}


.ec-panel[open]
.ec-panel__toggle {

    transform:
        rotate(180deg);

}


/* ---------------------------------------------------------------
   Inhalt
   --------------------------------------------------------------- */

.ec-panel__content {

    padding:
        0 24px 24px;

    border-top:
        1px
        solid
        var(--ec-color-border-light);

    padding-top:
        20px;

}


/* ==============================================================
   07 FORMULAR
   ============================================================== */

.ec-field {

    margin-bottom:
        18px;

}


.ec-field:last-child {

    margin-bottom:
        0;

}


.ec-field__label {

    display:
        block;

    margin-bottom:
        7px;

    font-size:
        0.72rem;

    font-weight:
        600;

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;

    color:
        var(--ec-color-text-muted);

}


.ec-field__control {

    width:
        100%;

    height:
        44px;

    padding:
        0 12px;

    color:
        var(--ec-color-text);

    background:
        #ffffff;

    border:
        1px
        solid
        var(--ec-color-border);

    border-radius:
        var(--ec-radius-sm);

    outline:
        none;

}


.ec-field__control:focus {

    border-color:
        var(--ec-color-primary);

    box-shadow:
        0 0 0 3px
        rgba(
            32,
            56,
            47,
            0.08
        );

}


/* ==============================================================
   08 BUTTONS
   ============================================================== */

.ec-button {

    min-height:
        42px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        9px 14px;

    font-size:
        0.75rem;

    font-weight:
        600;

    border-radius:
        var(--ec-radius-sm);

    cursor:
        pointer;

}


.ec-button--primary {

    color:
        #ffffff;

    background:
        var(--ec-color-accent);

    border:
        1px
        solid
        var(--ec-color-accent);

}


.ec-button--secondary {

    color:
        var(--ec-color-primary);

    background:
        #ffffff;

    border:
        1px
        solid
        var(--ec-color-border);

}


.ec-button--full {

    width:
        100%;

}


.ec-button:disabled {

    opacity:
        0.55;

    cursor:
        not-allowed;

}


/* ==============================================================
   09 STATIONEN
   ============================================================== */

.ec-route-empty {

    min-height:
        110px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        16px;

    padding:
        20px;

    text-align:
        center;

    color:
        var(--ec-color-text-muted);

    border:
        1px
        dashed
        var(--ec-color-border);

    border-radius:
        var(--ec-radius-sm);

}


.ec-route-empty.is-hidden {

    display:
        none;

}


.ec-route-empty i {

    margin-bottom:
        10px;

    font-size:
        1.3rem;

    color:
        var(--ec-color-accent);

}


.ec-route-empty p {

    margin:
        0;

}


.ec-station-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;

    margin-bottom:
        16px;

}


.ec-station {

    padding:
        14px;

    background:
        #fafbfa;

    border:
        1px
        solid
        var(--ec-color-border);

    border-radius:
        var(--ec-radius-sm);

}


.ec-station__header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-bottom:
        12px;

}


.ec-station__number {

    width:
        28px;

    height:
        28px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        0.72rem;

    font-weight:
        700;

    color:
        #ffffff;

    background:
        var(--ec-color-accent);

    border-radius:
        50%;

}


.ec-station__actions {

    display:
        flex;

    gap:
        4px;

}


.ec-station__action {

    width:
        30px;

    height:
        30px;

    padding:
        0;

    color:
        var(--ec-color-text-muted);

    background:
        transparent;

    border:
        0;

    cursor:
        pointer;

}


.ec-station__action:disabled {

    opacity:
        0.3;

}


.ec-station__fields {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        10px;

}


.ec-station__field--name {

    grid-column:
        1 / -1;

}


.ec-station__label {

    display:
        block;

    margin-bottom:
        5px;

    font-size:
        0.62rem;

    font-weight:
        600;

    text-transform:
        uppercase;

    color:
        var(--ec-color-text-muted);

}


.ec-station__input {

    width:
        100%;

    height:
        38px;

    padding:
        0 9px;

    font-size:
        0.78rem;

    border:
        1px
        solid
        var(--ec-color-border);

    border-radius:
        4px;

}

/* ==============================================================
   10 ORIENTIERUNGSPUNKTE
   ============================================================== */

.ec-orientation-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;

    margin-bottom:
        16px;

}


.ec-orientation-item {

    padding:
        14px;

    background:
        #fafbfa;

    border:
        1px
        solid
        var(--ec-color-border);

    border-radius:
        var(--ec-radius-sm);

}


.ec-orientation-item__header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-bottom:
        12px;

}


.ec-orientation-item__number {

    width:
        28px;

    height:
        28px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        0.72rem;

    font-weight:
        700;

    color:
        #ffffff;

    background:
        #8b9490;

    border-radius:
        50%;

}


.ec-orientation-item__fields {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        10px;

}


.ec-orientation-item__field--name,
.ec-orientation-item__field--mode {

    grid-column:
        1 / -1;

}


/* ---------------------------------------------------------------
   SVG – Orientierung
   --------------------------------------------------------------- */

.ec-map__orientation-point {

    fill:
        #8b9490;

    stroke:
        #ffffff;

    stroke-width:
        2;

}


.ec-map__orientation-label {

    font-family:
        var(--ec-font-body);

    font-size:
        13px;

    font-weight:
        500;

    fill:
        #727b77;

    paint-order:
        stroke;

    stroke:
        var(--ec-color-map-background);

    stroke-width:
        4px;

    stroke-linejoin:
        round;

}

/* ---------------------------------------------------------------
   BESCHRIFTUNG – 3×3 FEINPOSITIONIERUNG
   --------------------------------------------------------------- */

.ec-label-position {

    grid-column:
        1 / -1;

    margin-top:
        4px;

    padding-top:
        12px;

    border-top:
        1px
        solid
        var(--ec-color-border-light);

}


/* ---------------------------------------------------------------
   Kopfzeile
   --------------------------------------------------------------- */

.ec-label-position__header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    margin-bottom:
        8px;

}


.ec-label-position__label {

    font-size:
        0.62rem;

    font-weight:
        600;

    letter-spacing:
        0.05em;

    text-transform:
        uppercase;

    color:
        var(--ec-color-text-muted);

}


.ec-label-position__value {

    font-size:
        0.6rem;

    font-weight:
        500;

    color:
        var(--ec-color-text-muted);

}


/* ---------------------------------------------------------------
   Steuerkreuz
   --------------------------------------------------------------- */

.ec-label-pad {

    width:
        102px;

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            34px
        );

    grid-template-rows:
        repeat(
            3,
            34px
        );

    gap:
        2px;

}


/* ---------------------------------------------------------------
   Richtungstaste
   --------------------------------------------------------------- */

.ec-label-pad__button {

    width:
        34px;

    height:
        34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

    font-family:
        Arial,
        sans-serif;

    font-size:
        16px;

    line-height:
        1;

    color:
        var(--ec-color-text-muted);

    background:
        #ffffff;

    border:
        1px
        solid
        var(--ec-color-border);

    border-radius:
        4px;

    cursor:
        pointer;

    transition:
        color 140ms ease,
        background-color 140ms ease,
        border-color 140ms ease,
        transform 100ms ease;

}


.ec-label-pad__button:hover {

    color:
        var(--ec-color-primary);

    border-color:
        var(--ec-color-primary);

    background:
        #f8f9f8;

}


.ec-label-pad__button:active {

    transform:
        scale(0.92);

}


/* ---------------------------------------------------------------
   Mittelpunkt / Reset
   --------------------------------------------------------------- */

.ec-label-pad__button--center {

    font-size:
        20px;

}


.ec-label-pad__button--center.is-active {

    color:
        #ffffff;

    background:
        var(--ec-color-accent);

    border-color:
        var(--ec-color-accent);

}

/* ---------------------------------------------------------------
   GEOMETRIE-EDITOR
   --------------------------------------------------------------- */

.ec-geometry-help,
.ec-geometry-keyboard-help {

    margin:
        0 0 16px;

    font-size:
        0.72rem;

    line-height:
        1.55;

    color:
        var(--ec-color-text-muted);

}


.ec-geometry-keyboard-help {

    margin:
        14px 0 0;

}


.ec-geometry-selected {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    margin-bottom:
        12px;

    padding:
        10px 12px;

    background:
        #f8f9f8;

    border:
        1px
        solid
        var(--ec-color-border);

    border-radius:
        4px;

}


.ec-geometry-selected strong {

    font-size:
        0.76rem;

    color:
        var(--ec-color-primary);

}


.ec-geometry-selected span {

    flex-shrink:
        0;

    font-size:
        0.64rem;

    color:
        var(--ec-color-text-muted);

}


.ec-geometry-pad {

    margin-bottom:
        14px;

}


.ec-geometry-edit-button {

    margin-bottom:
        8px;

}


.ec-geometry-edit-button.is-active {

    color:
        #ffffff;

    background:
        var(--ec-color-accent);

    border-color:
        var(--ec-color-accent);

}


/* ---------------------------------------------------------------
   SVG – Geometrieauswahl
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------
   GEOMETRIE – AUSWAHL

   Die Auswahl verändert bewusst NICHT die Kartenkontur.
   Die aktive Geometrie wird ausschließlich über das Bedienfeld
   kenntlich gemacht.
   --------------------------------------------------------------- */

.ec-map__land--geometry-selected {

    /*
     * Keine zusätzliche Kontur.
     *
     * Kartenrandfarbe und Kartenrandstärke werden ausschließlich
     * über den Style-Editor gesteuert.
     */

}


/*
 * Im normalen Kartenmodus bleibt die Karte
 * rein visuell.
 */

#ec-map-layer-base {

    pointer-events:
        none;

}


/*
 * Im Bearbeitungsmodus können Inseln
 * mit Maus und Touch gegriffen werden.
 */

.ec-map--geometry-editing
#ec-map-layer-base {

    pointer-events:
        all;

}


.ec-map--geometry-editing
.ec-map__land {

    pointer-events:
        all;

    cursor:
        grab;

    touch-action:
        none;

}


.ec-map--geometry-editing
.ec-map__land:active {

    cursor:
        grabbing;

}


/* ---------------------------------------------------------------
   DARSTELLUNG – EINSTELLUNGSGRUPPEN
   --------------------------------------------------------------- */

.ec-settings-group {

    padding:
        0 0 20px;

    margin:
        0 0 20px;

    border-bottom:
        1px
        solid
        var(--ec-color-border-light);

}


.ec-settings-group:last-child {

    margin-bottom:
        0;

    padding-bottom:
        0;

    border-bottom:
        0;

}


.ec-settings-group__title {

    margin:
        0 0 16px;

    font-size:
        0.68rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

    color:
        var(--ec-color-primary);

}


/* ---------------------------------------------------------------
   KARTENAUSSCHNITT – STATUS
   --------------------------------------------------------------- */

.ec-map-view-status {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        8px;

    margin-bottom:
        14px;

}


.ec-map-view-status > div {

    padding:
        9px 10px;

    background:
        #f8f9f8;

    border:
        1px
        solid
        var(--ec-color-border);

    border-radius:
        4px;

}


.ec-map-view-status span {

    display:
        block;

    margin-bottom:
        3px;

    font-size:
        0.58rem;

    font-weight:
        600;

    letter-spacing:
        0.05em;

    text-transform:
        uppercase;

    color:
        var(--ec-color-text-muted);

}


.ec-map-view-status strong {

    font-size:
        0.72rem;

    font-weight:
        600;

    color:
        var(--ec-color-primary);

}


/* ---------------------------------------------------------------
   ZOOM
   --------------------------------------------------------------- */

.ec-map-view-zoom {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        14px;

}


.ec-map-view-zoom .ec-button {

    width:
        40px;

    height:
        36px;

    padding:
        0;

    justify-content:
        center;

}


.ec-map-view-zoom__label {

    min-width:
        48px;

    text-align:
        center;

    font-size:
        0.7rem;

    font-weight:
        600;

    color:
        var(--ec-color-text-muted);

}


/* ---------------------------------------------------------------
   POSITIONSPAD
   --------------------------------------------------------------- */

.ec-map-view-pad {

    margin-bottom:
        14px;

}


/* ---------------------------------------------------------------
   DIREKTBEDIENUNG
   --------------------------------------------------------------- */

.ec-map-view-edit-button {

    margin-bottom:
        10px;

}


.ec-map-view-edit-button.is-active {

    color:
        #ffffff;

    background:
        var(--ec-color-accent);

    border-color:
        var(--ec-color-accent);

}


.ec-map-view-help {

    margin:
        0;

    font-size:
        0.68rem;

    line-height:
        1.55;

    color:
        var(--ec-color-text-muted);

}


/* ---------------------------------------------------------------
   SVG – KARTENAUSSCHNITT BEARBEITEN
   --------------------------------------------------------------- */

.ec-map--view-editing {

    cursor:
        grab;

    touch-action:
        none;

}


.ec-map--view-editing:active {

    cursor:
        grabbing;

}

/* ---------------------------------------------------------------
   DARSTELLUNG – KARTENSTIL
   --------------------------------------------------------------- */

.ec-style-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        16px 14px;

}


.ec-style-grid .ec-field {

    margin:
        0;

}


.ec-field__control--hex {

    font-family:
        "Montserrat",
        sans-serif;

    text-transform:
        lowercase;

}


.ec-settings-group__title--spaced {

    margin-top:
        24px;

    padding-top:
        20px;

    border-top:
        1px
        solid
        var(--ec-color-border-light);

}


/* ---------------------------------------------------------------
   SVG – DEFAULT-DARSTELLUNG

   Diese Werte gelten bereits beim Laden.
   Der Style-Editor kann sie anschließend direkt überschreiben.
   --------------------------------------------------------------- */

#ec-map {

    background:
        #f6f4ed;

}


#ec-map .ec-map__land {

    fill:
        #e8e2d5;

    stroke:
        #ffffff;

    stroke-width:
        1;

    stroke-linejoin:
        round;

    stroke-linecap:
        round;

}


#ec-map .ec-map__station {

    fill:
        #d97435;

}


#ec-map .ec-map__orientation-point {

    fill:
        #859188;

}


#ec-map .ec-map__label {

    fill:
        #18231f;

    font-size:
        16px;

}


#ec-map .ec-map__label-number {

    fill:
        #d97435;

}


#ec-map .ec-map__orientation-label {

    fill:
        #859188;

    font-size:
        13px;

}


#ec-map .ec-map__route {

    stroke:
        #18231f;

    stroke-width:
        2.5;

}


/* ---------------------------------------------------------------
   DARSTELLUNG – RESPONSIVE
   --------------------------------------------------------------- */

@media (
    max-width:
        575.98px
) {

    .ec-style-grid {

        grid-template-columns:
            1fr;

    }

}

/* ==============================================================
   11 PREVIEW
   ============================================================== */

.ec-map-generator__preview {

    min-width:
        0;

    padding:
        28px;

    background:
        var(--ec-color-surface);

    border:
        1px
        solid
        var(--ec-color-border);

    border-radius:
        var(--ec-radius-md);

    box-shadow:
        var(--ec-shadow);


    /* ----------------------------------------------------------
       Sticky Preview

       Die komplette Kartenansicht bleibt beim Scrollen
       im sichtbaren Bereich des Browsers.
       ---------------------------------------------------------- */

    position:
        sticky;

    top:
        20px;

    align-self:
        start;


    /*
     * Falls ein sehr hohes Kartenformat gewählt wird,
     * bleibt der Preview-Bereich trotzdem erreichbar.
     */

    max-height:
        calc(
            100vh - 40px
        );

    overflow:
        auto;

}


/* ---------------------------------------------------------------
   Preview Header
   --------------------------------------------------------------- */

.ec-preview-header {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        24px;

}


.ec-preview-header__eyebrow {

    display:
        block;

    margin-bottom:
        4px;

    font-size:
        0.68rem;

    font-weight:
        600;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;

    color:
        var(--ec-color-accent);

}


.ec-preview-header__title {

    margin:
        0;

    font-family:
        var(--ec-font-headline);

    font-size:
        2rem;

    font-weight:
        500;

    color:
        var(--ec-color-primary);

}


.ec-preview-header__meta {

    display:
        flex;

    gap:
        8px;

}


.ec-preview-header__meta span {

    padding:
        5px 9px;

    font-size:
        0.68rem;

    font-weight:
        600;

    color:
        var(--ec-color-text-muted);

    background:
        var(--ec-color-background);

    border-radius:
        4px;

}


/* ==============================================================
   12 MAP
   ============================================================== */

.ec-map-canvas {

    width:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    background:
        var(--ec-color-map-background);

    border:
        1px
        solid
        var(--ec-color-border-light);

}


.ec-map {

    width:
        100%;

    height:
        auto;

    display:
        block;

    aspect-ratio:
        12 / 7;

}


.ec-map__land {

    fill:
        #dedfdd;

    stroke:
        #ffffff;

    stroke-width:
        1;

}


.ec-map__route {

    fill:
        none;

    stroke:
        var(--ec-color-primary);

    stroke-width:
        2.3;

    stroke-dasharray:
        8 7;

    stroke-linecap:
        round;

}


.ec-map__station {

    fill:
        var(--ec-color-accent);

    stroke:
        #ffffff;

    stroke-width:
        3;

}


.ec-map__label {

    font-family:
        var(--ec-font-body);

    font-size:
        15px;

    font-weight:
        600;

    fill:
        var(--ec-color-primary);

    paint-order:
        stroke;

    stroke:
        var(--ec-color-map-background);

    stroke-width:
        4px;

}


.ec-map__label-number {

    fill:
        var(--ec-color-accent);

}


/* ==============================================================
   13 PROJECT DIALOG
   ============================================================== */

.ec-project-dialog {

    width:
        min(
            620px,
            calc(
                100vw - 40px
            )
        );

    max-height:
        80vh;

    padding:
        0;

    color:
        var(--ec-color-text);

    background:
        #ffffff;

    border:
        1px
        solid
        var(--ec-color-border);

    border-radius:
        var(--ec-radius-md);

    box-shadow:
        0 20px 80px
        rgba(
            0,
            0,
            0,
            0.2
        );

}


.ec-project-dialog::backdrop {

    background:
        rgba(
            22,
            34,
            29,
            0.55
        );

}


.ec-project-dialog__header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        22px 24px;

    border-bottom:
        1px
        solid
        var(--ec-color-border-light);

}


.ec-project-dialog__header h2 {

    margin:
        0;

    font-family:
        var(--ec-font-headline);

    font-size:
        1.8rem;

    font-weight:
        500;

    color:
        var(--ec-color-primary);

}


.ec-project-dialog__close {

    width:
        34px;

    height:
        34px;

    color:
        var(--ec-color-text-muted);

    background:
        transparent;

    border:
        0;

    cursor:
        pointer;

}


.ec-project-dialog__list {

    max-height:
        60vh;

    overflow-y:
        auto;

    padding:
        16px;

}


.ec-project-item {

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        auto;

    gap:
        8px;

    margin-bottom:
        8px;

}


.ec-project-item__open {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    padding:
        13px 15px;

    text-align:
        left;

    color:
        var(--ec-color-text);

    background:
        #f8f9f8;

    border:
        1px
        solid
        var(--ec-color-border);

    border-radius:
        5px;

    cursor:
        pointer;

}


.ec-project-item__open strong {

    margin-bottom:
        2px;

}


.ec-project-item__open span {

    font-size:
        0.7rem;

    color:
        var(--ec-color-text-muted);

}


.ec-project-item__delete {

    width:
        44px;

    color:
        var(--ec-color-text-muted);

    background:
        #ffffff;

    border:
        1px
        solid
        var(--ec-color-border);

    border-radius:
        5px;

    cursor:
        pointer;

}


.ec-project-dialog__empty,
.ec-project-dialog__loading {

    margin:
        0;

    padding:
        30px;

    text-align:
        center;

    color:
        var(--ec-color-text-muted);

}


/* ==============================================================
   14 RESPONSIVE
   ============================================================== */

@media (max-width: 1200px) {

    .ec-map-generator__header {

        flex-wrap:
            wrap;

    }


    .ec-map-generator__header-center {

        order:
            3;

        flex-basis:
            100%;

        text-align:
            left;

    }

}


@media (max-width: 1100px) {

    :root {

        --ec-sidebar-width:
            330px;

    }

}


@media (max-width: 820px) {

    .ec-map-generator__workspace {

        grid-template-columns:
            1fr;

    }


    .ec-map-generator__preview {

        order:
            1;

        position:
            static;

        top:
            auto;

        max-height:
            none;

        overflow:
            visible;

    }


    .ec-map-generator__sidebar {

        order:
            2;

    }


    .ec-map-generator__header-actions {

        flex-wrap:
            wrap;

    }

}


@media (max-width: 575.98px) {

    .ec-map-generator__header {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .ec-map-generator__header-actions {

        width:
            100%;

        flex-direction:
            column;

    }


    .ec-map-generator__header-actions .ec-button {

        width:
            100%;

    }


    .ec-station__fields {

        grid-template-columns:
            1fr;

    }


    .ec-station__field--name {

        grid-column:
            auto;

    }

}


/* eof E&C MAP GENERATOR */