/* ── GUT NaturForum — Willkommensseite ───────────────────────────────────── */

.gut-welcome-root {
    font-family: 'DM Sans', sans-serif;
    color: #2a2a2a;
    padding: 0;
}

.gut-welcome-root * { box-sizing: border-box; }
.gut-welcome-root p,
.gut-welcome-root h1,
.gut-welcome-root h2,
.gut-welcome-root h3 { margin: 0; padding: 0; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.gut-welcome-root .gut-hero {
    background: #f6f8f0;
    padding: 0 20px 40px;
    text-align: center !important;
}

.gut-welcome-root .gut-hero-logo {
    margin: 0 auto 40px !important;
    max-width: 260px;
    width: 100%;
}
.gut-welcome-root .gut-hero-logo img { width: 100%; height: auto; display: block; }

.gut-welcome-root .gut-hero-tagline {
    font-family: 'Lora', serif;
    font-size: 26px;
    font-weight: 600;
    color: #2d4a1e;
    line-height: 1.35;
    margin: 0 auto 16px !important;
    max-width: none;
    white-space: nowrap;
    text-align: center !important;
}

.gut-welcome-root .gut-hero-sub {
    font-size: 16px;
    color: #6a7060;
    line-height: 1.65;
    max-width: 480px;
    margin: 0 auto !important;
    text-align: center !important;
}

/* ── Philosophie ──────────────────────────────────────────────────────────── */
.gut-welcome-root .gut-phil-section {
    max-width: 680px !important;
    margin: 0 auto !important;
    padding: 0 20px 64px;
    text-align: center !important;
}

/* Einheitliche, symmetrische Trennlinie zwischen allen Sektionen.
   Volle Breite, damit margin:auto sauber zentriert. */
.gut-welcome-root .gut-phil-section::before,
.gut-welcome-root .gut-features::before {
    content: "";
    display: block;
    width: 120px;
    height: 1px;
    background: #c0d4a0;
    margin: 0 auto 64px;
}

.gut-welcome-root .gut-phil-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8aac5a;
    margin-bottom: 14px;
    text-align: center;
}

.gut-welcome-root .gut-phil-title {
    font-family: 'Lora', serif;
    font-size: 26px;
    font-weight: 600;
    color: #2d4a1e;
    line-height: 1.35;
    margin: 0 auto 20px;
    max-width: 480px;
    text-align: center;
}

.gut-welcome-root .gut-phil-text {
    font-size: 16px;
    color: #6a7060;
    line-height: 1.8;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}
.gut-welcome-root .gut-phil-text p + p { margin-top: 16px; }

/* ── Weiterführender Verweis am Ende eines Haltungs-Abschnitts ────────────
   Sitzt zwischen dem Textblock und der Trennlinie des naechsten Abschnitts —
   die Linie ist ein ::before am folgenden Block, deshalb genuegt es, hier
   ans Ende zu schreiben.

   Bewusst kein Knopf: Der Abschnitt endet in einer Haltung, nicht in einer
   Handlungsaufforderung. Ein Knopf wuerde neben den beiden echten Knoepfen
   im naechsten Block um Aufmerksamkeit buhlen. Ein Verweis mit Pfeil sagt
   „hier steht mehr", ohne sich vorzudraengen.                              */
.gut-welcome-root .gut-phil-more {
    margin: 26px 0 0;
    font-size: 14.5px;
}
/* Ohne Unterstreichung. Die Linie darunter war als dezenter Hinweis gedacht,
   wirkt im ruhigen Satz des Abschnitts aber wie ein Fremdkoerper — und die
   Marke setzt Verweise ohnehin ohne Unterstreichung (siehe die globale Regel
   in gut-core.php). Der Pfeil allein sagt schon, dass es weitergeht. */
.gut-welcome-root .gut-phil-more a {
    color: #5c7a3e;
    font-weight: 500;
    border-bottom: none;
    text-decoration: none;
    transition: color .15s;
}
.gut-welcome-root .gut-phil-more a:hover { color: #2d4a1e; }
/* Beim Ueberfahren rueckt der Pfeil ein Stueck nach rechts — eine Rueckmeldung,
   die ohne Linie auskommt. */
.gut-welcome-root .gut-phil-more a::after { transition: margin-left .15s; }
.gut-welcome-root .gut-phil-more a:hover::after { margin-left: 4px; }
.gut-welcome-root .gut-phil-more a::after {
    content: " →";
    white-space: nowrap;
}

/* ── Features ─────────────────────────────────────────────────────────────── */
.gut-features {
    background: #f6f8f0;
    padding: 0 20px 64px;
}
.gut-welcome-root .gut-features-inner { max-width: 760px !important; margin: 0 auto !important; }

.gut-welcome-root .gut-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 36px;
}

.gut-welcome-root .gut-feature-card {
    background: #fff;
    border: 1px solid #c0d4a0;
    border-radius: 16px;
    padding: 28px 22px;
    text-align: center;
    transition: all 0.18s;
}
.gut-welcome-root .gut-feature-card:hover {
    border-color: #8aac5a;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(44,74,30,.07);
}

.gut-welcome-root .gut-feature-icon {
    margin-bottom: 16px;
    line-height: 1;
    display: flex;
    justify-content: center;
}
.gut-welcome-root .gut-feature-icon svg { width: 32px; height: 32px; }
.gut-welcome-root .gut-feature-title { font-size: 15px; font-weight: 600; color: #2d4a1e; margin-bottom: 10px; }
.gut-welcome-root .gut-feature-text { font-size: 13.5px; color: #6a7060; line-height: 1.65; }

/* ── CTA-Block ────────────────────────────────────────────────────────────── */
.gut-welcome-root .gut-cta-block::before {
    content: "";
    display: block;
    width: 120px;
    height: 1px;
    background: #c0d4a0;
    margin: 0 auto 64px;
    grid-column: 1 / -1;
}
.gut-welcome-root .gut-cta-block {
    max-width: 760px !important;
    margin: 0 auto !important;
    padding: 0 20px 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Dezente Trust-/Datenschutz-Zeile unter den CTAs */
.gut-welcome-root .gut-cta-trust {
    max-width: 760px;
    margin: 0 auto !important;
    padding: 0 20px 64px;
    text-align: center;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    color: #8aac5a;
    letter-spacing: 0.01em;
}

.gut-cta-card {
    border: 1.5px solid #c0d4a0 !important;
    border-radius: 16px !important;
    padding: 36px 28px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    transition: all 0.18s;
    background: #fff !important;
    box-shadow: none !important;
}
.gut-cta-card:hover {
    border-color: #5c7a3e !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(44,74,30,.08) !important;
}

.gut-welcome-root .gut-cta-card-icon {
    margin-bottom: 16px;
    line-height: 1;
    display: flex;
    justify-content: center;
}
.gut-welcome-root .gut-cta-card-icon svg { width: 34px; height: 34px; }
.gut-welcome-root .gut-cta-card-title { font-size: 17px; font-weight: 600; color: #2d4a1e; margin-bottom: 10px; }
.gut-welcome-root .gut-cta-card-text { font-size: 14px; color: #6a7060; line-height: 1.6; margin-bottom: 4px; max-width: 280px; }
.gut-welcome-root .gut-cta-card-link {
    display: inline-block;
    margin-top: 20px;
    font-size: 14px;
    font-weight: 500;
    color: #fff !important;
    background: #5c7a3e !important;
    padding: 12px 26px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    transition: background 0.15s;
    align-self: center;
}
.gut-welcome-root .gut-cta-card-link:hover { background: #2d4a1e !important; color: #fff !important; }

/* ── Tablet (max 768px) ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .gut-welcome-root .gut-hero { padding: 32px 20px 48px; }
    .gut-welcome-root .gut-hero-logo { max-width: 240px; margin: 0 auto 20px !important; }
    .gut-welcome-root .gut-hero-tagline { font-size: 24px; white-space: normal; max-width: 560px; }
    .gut-welcome-root .gut-hero-sub { font-size: 16px; }
    .gut-welcome-root .gut-features-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
    .gut-welcome-root .gut-cta-block { grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 20px 48px; }
    .gut-welcome-root .gut-cta-card { padding: 24px 20px; }
    .gut-welcome-root .gut-phil-section { padding: 0 20px 48px; }
    .gut-welcome-root .gut-features { padding: 0 20px 48px; }
    .gut-welcome-root .gut-phil-section::before,
    .gut-welcome-root .gut-features::before,
    .gut-welcome-root .gut-cta-block::before { margin-bottom: 48px; }
}

/* ── Mobile (max 540px) ───────────────────────────────────────────────────── */
@media (max-width: 540px) {
    .gut-welcome-root .gut-hero { padding: 28px 16px 40px; }
    .gut-welcome-root .gut-hero-logo { max-width: 200px; margin: 0 auto 18px !important; }
    .gut-welcome-root .gut-hero-tagline { font-size: 21px; white-space: normal; max-width: 320px; }
    .gut-welcome-root .gut-hero-sub { font-size: 15px; }
    .gut-welcome-root .gut-phil-section { padding: 0 16px 40px; }
    .gut-welcome-root .gut-phil-title { font-size: 19px; }
    .gut-welcome-root .gut-phil-text { font-size: 14px; }
    .gut-welcome-root .gut-features { padding: 0 16px 40px; }
    .gut-welcome-root .gut-features-grid { grid-template-columns: 1fr; gap: 12px; }
    /* Kachel auf dem Handy in zwei Zeilen statt drei Spalten nebeneinander:
       oben Symbol und Ueberschrift auf einer Linie, darunter der Text ueber die
       volle Breite. Als Flex-Reihe standen Symbol, Ueberschrift und Text
       nebeneinander — die Ueberschrift bekam eine schmale Spalte, der Text eine
       zweite, und beides wirkte gequetscht. */
    .gut-welcome-root .gut-feature-card {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas: "symbol titel" "text text";
        align-items: center;
        column-gap: 12px;
        row-gap: 10px;
        padding: 20px 18px;
        text-align: left;
    }
    .gut-welcome-root .gut-feature-icon  { grid-area: symbol; margin: 0; display: flex; }
    .gut-welcome-root .gut-feature-title { grid-area: titel;  margin: 0; font-size: 16px; }
    .gut-welcome-root .gut-feature-text  { grid-area: text;   margin: 0; font-size: 14px; line-height: 1.6; }
    .gut-welcome-root .gut-cta-block { grid-template-columns: 1fr; gap: 10px; padding: 0 16px 40px; }
    .gut-welcome-root .gut-cta-card { padding: 22px 18px; }
    .gut-welcome-root .gut-phil-section::before,
    .gut-welcome-root .gut-features::before,
    .gut-welcome-root .gut-cta-block::before { margin-bottom: 40px; }
}