/* HGK Elementor Widgets – Styles der Custom-Widgets
   Design-System: IBM Plex Sans (H), Inter (Text), IBM Plex Mono (Label)
   Ink #14201a · Paper #f7f6f1 · Grün #359647 · Grün-Ink #14622f
   Fonts werden im Plugin via wp_enqueue_style geladen (kein @import mehr). */

/* ============================================================
   hgk_seiten_titel – Seiten-Titel-Hero
   ============================================================ */
.hgk-page-title {
    position: relative;
    overflow: hidden;
    padding: 64px 0 56px;
    background: #f7f6f1;
    border-bottom: 1px solid #e4e2d8;
}
.hgk-page-title--dark {
    background: radial-gradient(120% 140% at 15% 0%, #1d2c25 0%, #14201a 55%);
    border-bottom: none;
}
.hgk-page-title__inner {
    max-width: 1180px;
    margin: 0 auto;
    /* Gutter wie .hgk-block .wrap und wie Header/Footer, sonst steht der
       Seitentitel 24px weiter aussen als der Fliesstext darunter. */
    padding: 0 24px;
    position: relative;
    z-index: 2;
}
@media (max-width: 400px) {
    .hgk-page-title__inner { padding-left: 18px; padding-right: 18px; }
}
.hgk-page-title__eyebrow {
    font-family: "IBM Plex Mono", monospace;
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #14622f;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
}
.hgk-page-title--dark .hgk-page-title__eyebrow { color: #7fd394; }
.hgk-page-title__eyebrow svg { width: 22px; height: 14px; flex: none; }
.hgk-page-title__eyebrow svg path {
    stroke: #359647;
    stroke-width: 2.6;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.hgk-page-title--dark .hgk-page-title__eyebrow svg path { stroke: #7fd394; }
.hgk-page-title__h1 {
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.015em;
    color: #14201a;
    font-size: clamp(32px, 4.4vw, 52px);
    margin: 0;
}
.hgk-page-title--dark .hgk-page-title__h1 { color: #fff; }
.hgk-page-title__subline {
    margin: 16px 0 0;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: #5b6a62;
    max-width: 60ch;
}
.hgk-page-title--dark .hgk-page-title__subline { color: #a9bcb0; }
.hgk-page-title__roof {
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 280px;
    z-index: 1;
}
.hgk-page-title__roof path {
    stroke: rgba(53, 150, 71, .22);
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.hgk-page-title--dark .hgk-page-title__roof path { stroke: rgba(127, 211, 148, .16); }

@media (max-width: 768px) {
    .hgk-page-title { padding: 44px 0 40px; }
    .hgk-page-title__roof { width: 170px; opacity: .6; }
}

/* ============================================================
   Header/Footer (Elementor-Templates) – Responsive-Korrekturen
   Footer-Template ID 38, Spaltenreihe = Element 19e179a0.
   Tablet-Stufe bewusst hier statt in Elementor: Elementor gibt die
   Tablet-Breiten nach dem Mobile-Block aus, dadurch würden die
   Tablet-Werte auf dem Handy gewinnen. min-width vermeidet das.
   ============================================================ */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Markenspalte über die volle Breite, darunter die drei Link-Spalten nebeneinander */
    .elementor-location-footer .elementor-element-4e027f69 { --width: 100%; }
    .elementor-location-footer .elementor-element-7653cff7,
    .elementor-location-footer .elementor-element-3c709ddb,
    .elementor-location-footer .elementor-element-3b4635aa { --width: 30%; }
}

/* ------------------------------------------------------------
   Zentrale Ausrichtung Header/Footer zu den Seiteninhalten
   Boxed-Container zentrieren ihre .e-con-inner auf 1180px. Padding auf
   dem Boxed-Wrapper wird dabei vom Zentrieren geschluckt und hat keine
   Wirkung. Das Gutter muss deshalb auf .e-con-inner sitzen, exakt wie
   .hgk-block .wrap (24px, unter 640px 18px). Sonst stehen Logo, Menue
   und Footer 24px weiter aussen als jeder Seiteninhalt.
   ------------------------------------------------------------ */
/* Gilt fuer ALLE boxed Container, also auch fuer den Inhalt der Legal- und
   Textseiten. Ohne das steht deren Fliesstext bei 363 und damit 24px weiter
   aussen als Seitentitel, Logo und Footer. */
.e-con-boxed > .e-con-inner {
    padding-left: 24px;
    padding-right: 24px;
}

/* Die aeussersten Wrapper duerfen KEIN Gutter bekommen. Sie tragen die
   durchgehenden Hintergrundbaender (dunkle Topbar, helle Kopfzeile).
   Bekommen sie Padding, ruecken die Baender ein und es entsteht links
   und rechts ein sichtbarer Spalt. Nur die inneren Container, die den
   1180er Inhalt fuehren, brauchen das Gutter. */
.elementor-location-header > .e-con-boxed > .e-con-inner,
.elementor-location-footer > .e-con-boxed > .e-con-inner {
    padding-left: 0;
    padding-right: 0;
}

/* Breakpoint exakt wie .hgk-block .wrap in blocks.css (dort 400px, nicht 640px) */
@media (max-width: 400px) {
    .e-con-boxed > .e-con-inner {
        padding-left: 18px;
        padding-right: 18px;
    }
    .elementor-location-header > .e-con-boxed > .e-con-inner,
    .elementor-location-footer > .e-con-boxed > .e-con-inner {
        padding-left: 0;
        padding-right: 0;
    }
}

/* ============================================================
   Kontaktformular (Elementor-Pro-Form-Widget)
   Der Container traegt die Klassen "hgk-block hgk-formblock". Ueber
   .hgk-block gelten dort bereits die Design-Tokens, Inter als Schrift und
   der Paper-Hintergrund. Das Styling sitzt bewusst hier und nicht in den
   Widget-Einstellungen, damit es auch dann passt, wenn im Editor Felder
   hinzukommen, wegfallen oder umbenannt werden.
   ============================================================ */
.hgk-formblock .elementor-widget-heading h2 {
    font-size: clamp(28px, 3.6vw, 42px);
    margin-bottom: 12px;
}
.hgk-formblock .elementor-widget-text-editor {
    color: var(--muted);
    font-size: 17px;
    max-width: 60ch;
    margin-bottom: 34px;
}

/* Feldraster */
.hgk-formblock .elementor-form-fields-wrapper { row-gap: 4px; }
.hgk-formblock .elementor-field-group { margin-bottom: 18px; }

/* Labels wie die Eyebrows im restlichen Design */
.hgk-formblock .elementor-field-label {
    font-family: "IBM Plex Mono", monospace;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--green-ink);
    margin-bottom: 9px;
    font-weight: 400;
}
.hgk-formblock .elementor-field-required .elementor-field-label::after {
    content: " *";
    color: var(--green);
}

/* Eingabefelder */
.hgk-formblock .elementor-field-textual {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    padding: 14px 16px;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--text);
    transition: var(--d);
    min-height: 52px;
}
.hgk-formblock textarea.elementor-field-textual { min-height: 150px; resize: vertical; }
.hgk-formblock .elementor-field-textual::placeholder { color: #9aa8a0; }
.hgk-formblock .elementor-field-textual:focus {
    border-color: var(--green);
    outline: none;
    box-shadow: 0 0 0 3px rgba(53, 150, 71, .16);
}

/* Zustimmungs-Checkbox */
.hgk-formblock .elementor-field-type-acceptance .elementor-field-label { display: none; }
.hgk-formblock .elementor-field-type-acceptance .elementor-field-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    color: var(--muted);
    line-height: 1.5;
}
.hgk-formblock .elementor-field-type-acceptance input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    accent-color: var(--green);
    flex: none;
}
.hgk-formblock .elementor-field-type-acceptance a {
    color: var(--green-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Absende-Button im Stil der .btn-primary */
.hgk-formblock .elementor-button[type="submit"] {
    background: var(--ink);
    color: #fff;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 14px 28px;
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: var(--d);
}
.hgk-formblock .elementor-button[type="submit"]:hover,
.hgk-formblock .elementor-button[type="submit"]:focus {
    background: #0c1611;
    color: #fff;
    transform: translateY(-1px);
}
.hgk-formblock .elementor-button-align-stretch .elementor-field-type-submit:not(.e-form__buttons__wrapper) .elementor-button {
    width: auto;
}

/* Button nicht ueber die volle Breite ziehen. Elementor setzt beim Widget
   die Ausrichtung "stretch", das laesst den Pill-Button unruhig wirken. */
.hgk-formblock .elementor-button-align-stretch .elementor-field-type-submit .elementor-button,
.hgk-formblock .elementor-field-type-submit .elementor-button {
    width: auto;
    flex: 0 0 auto;
}
.hgk-formblock .elementor-field-type-submit {
    justify-content: flex-start;
    margin-top: 8px;
}

/* Meldungen */
.hgk-formblock .elementor-message {
    font-size: 15px;
    margin-top: 14px;
}
.hgk-formblock .elementor-message.elementor-message-success { color: var(--green-ink); }

@media (max-width: 640px) {
    .hgk-formblock .elementor-field-group { margin-bottom: 14px; }
}

/* ------------------------------------------------------------------
   Siegel "Oekologisch und laermreduziert" (Footer, Markenspalte)
   Aufbau wie ein klassisches Pruefsiegel: gezackte Plakette links,
   Ribbon nach rechts mit Schwalbenschwanz am Ende.
   Der Ribbon-Rahmen entsteht ueber zwei Ebenen mit gleichem clip-path:
   aussen die Randfarbe, innen 1px kleiner die Fuellung. Ein echter
   border wuerde vom clip-path abgeschnitten.
   Bewusst als Selbstaussage gestaltet ("Unsere Arbeitsweise"),
   nicht als Pruefsiegel einer Zertifizierungsstelle.
------------------------------------------------------------------ */
.hgk-seal {
    --seal-green: #359647;
    --seal-line: rgba(120, 200, 140, .55);
    --seal-fill: rgba(53, 150, 71, .13);
    --seal-tail: 14px;

    display: inline-flex;
    align-items: center;
    margin-top: 24px;
    text-decoration: none;
}

/* --- Plakette --- */

.hgk-seal-disc {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    width: 66px;
    height: 66px;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .45));
}

.hgk-seal-disc svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.hgk-seal-scallop {
    fill: var(--seal-green);
}

.hgk-seal-ring {
    fill: none;
    stroke: rgba(247, 246, 241, .55);
    stroke-width: 1.4;
}

.hgk-seal-ring2 {
    stroke-width: .8;
    stroke-dasharray: 2.6 3.4;
    stroke-linecap: round;
}

.hgk-seal-leaf {
    fill: none;
    stroke: #f7f6f1;
    stroke-width: 3.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- Ribbon --- */

.hgk-seal-ribbon {
    margin-left: -22px;
    padding: 1px;
    background: var(--seal-line);
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--seal-tail)) 50%, 100% 100%, 0 100%);
}

.hgk-seal-inner {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px calc(var(--seal-tail) + 18px) 10px 32px;
    background: #16271f;
    background-image: linear-gradient(var(--seal-fill), var(--seal-fill));
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--seal-tail)) 50%, 100% 100%, 0 100%);
}

.hgk-seal-main {
    font-size: 13px;
    line-height: 1.2;
    font-weight: 600;
    color: #f7f6f1;
}

.hgk-seal-sub {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #8fbf9c;
}

@media (max-width: 480px) {
    .hgk-seal { --seal-tail: 11px; }
    .hgk-seal-disc { width: 56px; height: 56px; }
    .hgk-seal-ribbon { margin-left: -18px; }
    .hgk-seal-inner { padding: 9px calc(var(--seal-tail) + 14px) 9px 26px; }
    .hgk-seal-main { font-size: 12px; }
    .hgk-seal-sub { font-size: 9px; }
}