/* ============================
 *   Tokens / Typography
 *   ============================ */

:root {
    --md-font-family: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --md-fw-light: 300;
    --md-fw-regular: 400;
    --md-fw-medium: 500;
    --md-fw-bold: 700;

    --md-fw-main: var(--md-fw-light);

    --md-color-text: #2f2f2f;
    --md-color-card: #ffffff;
    --md-color-accent: #1F3C55;
    --md-color-bg-soft: #E3D6C5;

    --md-radius: 8px;
    --md-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    --md-border: 1px solid rgba(0, 0, 0, 0.03);
    --md-shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* ============================
 *   Root
 *   ============================ */

.md-root {
    width: 60vw;
    max-width: 60vw;
    margin: 0 auto;

    font-family: var(--md-font-family);
    font-weight: var(--md-fw-main);

    font-size: clamp(1rem, 0.7rem + 1vw, 1.4rem);
    line-height: 1.6;
    color: var(--md-color-text);
}

@media (max-width: 1150px) {
    .md-root {
        width: 99.99vw;
        max-width: 99.99vw;
    }
}

@media (min-width: 1024px) {
    .md-root {
        font-size: clamp(1rem, 0.4rem + 0.8vw, 1.2rem);
    }
}

.md-root p { margin: 0 0 1.2rem; }

/* Überschriften */
.md-root h2 {
    font-weight: var(--md-fw-medium);
    font-size: clamp(1.8rem, 1.2rem + 2vw, 3.2rem);
    line-height: 1.2;
    margin: 0 0 1rem;
}

.md-root h3 {
    font-weight: var(--md-fw-medium);
    font-size: clamp(1.4rem, 1rem + 1.5vw, 2.4rem);
    line-height: 1.2;
    margin: 0 0 0.75rem;
}

.md-root h4 {
    font-weight: var(--md-fw-medium);
    font-size: 1.2em;
    line-height: 1.25;
    margin: 0 0 0.6rem;
}


/* Abstand */
.md-space { margin-top: 1.5rem; }

/* ============================
 *   Links (Inline)
 *   ============================ */

.md-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    transition: opacity 0.15s ease, font-weight 0.15s ease;
    font-weight: var(--md-fw-main);
}

.md-link:hover { opacity: 0.85; }

.md-link .link-icon {
    margin-left: 0.25em;
    font-size: 0.85em;
    display: inline-block;
    white-space: nowrap;
}

/* Hover-weight (wird bei dir genutzt via data-hover-weight) */
[data-hover-weight="light"]:hover   { font-weight: var(--md-fw-regular); }
[data-hover-weight="regular"]:hover { font-weight: var(--md-fw-medium); }
[data-hover-weight="medium"]:hover  { font-weight: var(--md-fw-bold); }
[data-hover-weight="bold"]:hover    { font-weight: var(--md-fw-bold); }

/* ============================
 *   Plain content (ohne Card)
 *   ============================ */

.md-plain {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;

    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--md-color-text);
}

.md-plain h2,
.md-plain h3 { margin-top: 0; }
.md-plain p,
.md-plain li,
.md-plain a{
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
}

/* ============================
 *   Grid + Cards
 *   ============================ */

.md-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    margin: 2.5rem 0;

    /* Start = Cards sind content-height (wie bei dir aktuell) */
    align-items: start;
}

@media (max-width: 768px) {
    .md-grid { grid-template-columns: 1fr; }
}

.md-card {
    background: var(--md-color-card);
    border-radius: var(--md-radius);
    box-shadow: var(--md-shadow);
    border: var(--md-border);

    padding: 1.5rem;
    font-weight: var(--md-fw-main);
    line-height: 1.5;
}

/* Textkarte */
.md-card--text p:last-child { margin-bottom: 0; }

/* Bildkarte (wirklich „clean“) */
.md-card--image {
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
}

.md-card--image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--md-radius);
}

/* Caption optional: standardmäßig aus */
.md-card-caption { display: none; }

/* ============================
 *   Spezial: Impressum Bild
 *   ============================ */

.impressum-image img {
    width: 65%;
    max-width: 420px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* ============================
 *   Spezial: Kontakt / Signal Card (nur dort blau!)
 *   ============================ */

[hidden]{ display: none !important; }


.contact-form-card.md-card--bottom,
.md-card--bottom.contact-signal-card {
        background: var(--md-color-accent) !important;
        }

        /* ============================
         *   Hover-Effekt für Kontakt Buttons
         * ============================ */

        /* Grund-Transition (auch wenn kein Hover vorhanden ist) */
        .contact-open-btn,
.sig-btn {
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

/* Hover nur auf Geräten, die wirklich hover können (Desktop) */
@media (hover: hover) and (pointer: fine) {
    .contact-open-btn:hover,
    .sig-btn:hover {
        transform: translateY(-3px);
        box-shadow: var(--md-shadow-hover);
        opacity: 0.92;
    }
}

/* Touch-Feedback */
.contact-open-btn:active,
.sig-btn:active {
    transform: translateY(-1px);
    opacity: 0.88;
}

/* Optional: Fokus sichtbar (Keyboard) */
.contact-open-btn:focus-visible,
.sig-btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}


/* Kontaktformular initial ausblenden (wird per JS eingeblendet) */
.contact-form-card.is-hidden {
    display: none;
}


/* ============================
 *   Order Utilities (wie bei dir genutzt)
 *   ============================ */

@media (min-width: 769px) {
    .md-order-d-1,
    .md-order-d-2 {
        align-self: end;
    }
}


@media (min-width: 769px) {
    .md-order-d-1 { order: 1; }
    .md-order-d-2 { order: 2; }
    .md-order-d-3 { order: 3; }
    .md-order-d-4 { order: 4; }
    .md-order-d-5 { order: 5; }
    .md-order-d-6 { order: 6; }
}

@media (max-width: 768px) {
    .md-order-m-1 { order: 1; }
    .md-order-m-2 { order: 2; }
    .md-order-m-3 { order: 3; }
    .md-order-m-4 { order: 4; }
    .md-order-m-5 { order: 5; }
    .md-order-m-6 { order: 6; }
}