/* ==========================================================================
   Textseite Styles – Philosophie, Technik, Umwelt, Qualitaet
   Visuelles Pattern analog zu Unternehmen (unt-) mit txt- Prefix
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Banner-Bild (wie unt-banner)
   -------------------------------------------------------------------------- */

.txt-banner {
    min-height: 333px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    margin-top: -30px;
}


/* --------------------------------------------------------------------------
   2. Magenta-Streifen Hero (wie unt-hero)
   -------------------------------------------------------------------------- */

.txt-hero {
    background-image: url('../images/SD-BG-Magenta-Streifen-lang.svg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: -64px;
    padding: 20px 0;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
    transform: scaleX(-1);
}

.txt-hero__inner {
    display: flex;
    align-items: center;
    gap: 20px;
    transform: scaleX(-1);
    justify-content: flex-end;
}

.txt-hero__icon-col {
    flex: 0 0 10%;
    display: flex;
    justify-content: center;
}

.txt-hero__icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: 32px;
}

.txt-hero__text-col {
    flex: 0 0 auto;
    padding-left: 0;
    text-align: right;
}

.txt-hero__title {
    font-family: var(--font-primary);
    font-size: 3em;
    font-weight: 500;
    color: var(--color-white);
    margin: 0;
    line-height: 1.2;
}

.txt-hero__subtitle {
    font-family: var(--font-primary);
    font-size: 2em;
    font-weight: var(--fw-light);
    color: var(--color-white);
    text-transform: uppercase;
    letter-spacing: 0;
    line-height: 1.3;
    margin: 0 0 10px 0;
    text-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
}


/* --------------------------------------------------------------------------
   3. Content-Bereich
   -------------------------------------------------------------------------- */

.txt-content {
    padding: var(--spacing-lg) 0 0 0;
}

.txt-body {
    font-family: var(--font-primary);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-text);
}


/* --------------------------------------------------------------------------
   4. Einleitungstext
   -------------------------------------------------------------------------- */

.txt-intro {
    margin-bottom: var(--spacing-lg);
}

.txt-intro p {
    font-family: var(--font-primary);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-text);
    margin: 0;
}


/* --------------------------------------------------------------------------
   5. Badge-Labels (wie unt-badge)
   -------------------------------------------------------------------------- */

.txt-badge {
    display: inline-block;
    font-family: var(--font-primary);
    font-size: 1.5em;
    font-weight: 100;
    color: var(--color-white);
    background-color: var(--color-primary);
    padding: 8px 20px;
    border-radius: 4px;
    margin-bottom: 12px;
    margin-top: 20px;
    line-height: 1.4;
}

.txt-badge:first-child {
    margin-top: 0;
}

.txt-badge i {
    margin-right: 8px;
}


/* --------------------------------------------------------------------------
   5b. Technik-Blöcke (Original Elementor-Layout: bg-image + gradient overlay)
   -------------------------------------------------------------------------- */

.txt-technik {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.txt-technik-block {
    position: relative;
    min-height: 320px;
    display: flex;
    align-items: stretch;
    background-repeat: no-repeat;
    background-size: contain;
    margin: 20px 0;
    overflow: hidden;
}

/* Gradient overlay via ::before — fades SVG on the list side */
.txt-technik-block::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.95;
    z-index: 1;
    pointer-events: none;
}

.txt-technik-block__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* --- Per-section overlay gradients + bg positions --- */

/* PREPRESS: image left, list right */
.txt-technik-block--prepress {
    background-position: center center;
}
.txt-technik-block--prepress::before {
    background: linear-gradient(90deg, #FA92CB64 0%, #FF82C6 100%);
    opacity: 0.9;
}

/* PRESS DIGITAL: image left, list left, heading right */
.txt-technik-block--digital {
    background-position: bottom left;
}
.txt-technik-block--digital::before {
    background: linear-gradient(90deg, #B2EDFF 30%, #4BD6FF65 100%);
}

/* PRESS UV: image right, heading left, list right */
.txt-technik-block--uv {
    background-position: bottom right;
}
.txt-technik-block--uv::before {
    background: linear-gradient(90deg, #4BD6FF65 0%, #B2EDFF 70%);
}

/* PRESS OFFSET: image left, list left, heading right */
.txt-technik-block--offset {
    background-position: bottom left;
}
.txt-technik-block--offset::before {
    background: linear-gradient(90deg, #B2EDFF 30%, #4BD6FF65 100%);
}

/* POSTPRESS Schneiden: image left, heading left */
.txt-technik-block--schneiden {
    background-position: 0px 65px;
}
.txt-technik-block--schneiden::before {
    background: linear-gradient(90deg, #A2EEAC65 0%, #A2EEAC 70%);
}

/* Zusammentragen: image right */
.txt-technik-block--zusammentragen {
    background-position: center right;
}
.txt-technik-block--zusammentragen::before {
    background: linear-gradient(90deg, #A2EEAC 30%, #A2EEAC65 100%);
}

/* Kaschieren: no image */
.txt-technik-block--kaschieren::before {
    background: linear-gradient(90deg, #A2EEAC65 0%, #A2EEAC 70%);
}

/* Klebebinden: image right */
.txt-technik-block--klebebinden {
    background-position: center right;
}
.txt-technik-block--klebebinden::before {
    background: linear-gradient(90deg, #A2EEAC 30%, #A2EEAC65 100%);
}

/* Stanzen: image left */
.txt-technik-block--stanzen {
    background-position: center left;
}
.txt-technik-block--stanzen::before {
    background: linear-gradient(90deg, #A2EEAC65 0%, #A2EEAC 70%);
}

/* Konfektionieren: image right */
.txt-technik-block--konfektionieren {
    background-position: center right;
}
.txt-technik-block--konfektionieren::before {
    background: linear-gradient(90deg, #A2EEAC 30%, #A2EEAC65 100%);
}


/* --- Heading column --- */
.txt-technik-block__heading {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px 20px;
}

.txt-technik-block__title {
    font-family: 'Roboto', Sans-serif;
    font-size: 6em;
    font-weight: 900;
    line-height: 1;
    margin: 0;
    text-transform: uppercase;
    color: #FFFFFF;
    text-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}

.txt-technik-block__subtitle {
    font-family: 'Roboto', Sans-serif;
    font-size: 4em;
    font-weight: 600;
    line-height: 1;
    margin: 5px 0 0;
    text-transform: uppercase;
    color: #FFFFFF;
    text-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}

/* Smaller subtitle for POSTPRESS sections */
.txt-technik-block--schneiden .txt-technik-block__subtitle,
.txt-technik-block--zusammentragen .txt-technik-block__subtitle,
.txt-technik-block--kaschieren .txt-technik-block__subtitle,
.txt-technik-block--klebebinden .txt-technik-block__subtitle,
.txt-technik-block--stanzen .txt-technik-block__subtitle,
.txt-technik-block--konfektionieren .txt-technik-block__subtitle {
    font-size: 2em;
}


/* --- List column --- */
.txt-technik-block__list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 40px 40px;
}

.txt-technik-block .txt-list {
    margin-bottom: 0;
}

.txt-technik-block .txt-list li {
    font-family: 'Roboto', Sans-serif;
    font-size: 1em;
    font-weight: 400;
    line-height: 1.7;
    color: #000000;
}

.txt-technik-block .txt-list li::before {
    content: "\2022";
    font-family: inherit;
    font-weight: 900;
    color: #000000;
    font-size: 1.2em;
}

/* Datenblatt button */
.txt-technik-block__btn {
    display: inline-block;
    align-self: flex-start;
    width: auto;
    margin-top: 16px;
    padding: 12px 32px;
    background-color: var(--color-accent, #4BD6FF);
    color: #fff;
    font-family: 'Roboto', Sans-serif;
    font-weight: 600;
    font-size: 0.95em;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s, color 0.3s;
}

.txt-technik-block__btn:hover {
    background-color: #fff;
    color: var(--color-accent, #4BD6FF);
}


/* --------------------------------------------------------------------------
   6. 2-Spalten Grid (Philosophie, Technik, Qualitaet)
   -------------------------------------------------------------------------- */

.txt-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
}

.txt-grid__col {
    padding: 0 10px;
}

.txt-grid__col p {
    font-family: var(--font-primary);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-text);
    margin: 0 0 16px 0;
}


/* --------------------------------------------------------------------------
   7. 1-Spalten Layout (Umwelt)
   -------------------------------------------------------------------------- */

.txt-single-col {
    max-width: 900px;
}

.txt-section-heading {
    font-family: var(--font-primary);
    font-size: 1.5em;
    font-weight: var(--fw-medium);
    color: var(--color-secondary);
    margin: 0 0 var(--spacing-md) 0;
}


/* --------------------------------------------------------------------------
   8. Listen-Styling
   -------------------------------------------------------------------------- */

/* Ungeordnete Liste (Technik etc.) */
.txt-list {
    list-style: none;
    padding-left: 0;
    margin: 0 0 16px 0;
}

.txt-list li {
    font-family: var(--font-primary);
    font-size: var(--fs-body);
    line-height: 1.7;
    color: var(--color-text);
    padding-left: 20px;
    position: relative;
}

.txt-list li::before {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--color-accent);
    position: absolute;
    left: 0;
    top: 0;
    font-size: 0.85em;
}

/* Umwelt Intro mit Logo */
.txt-umwelt-intro {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
}

.txt-umwelt-intro__text {
    flex: 1;
    font-size: 1.15em;
    line-height: 1.8;
    color: var(--color-text);
}

.txt-umwelt-intro__text p {
    margin: 0;
}

.txt-umwelt-intro__logo {
    flex-shrink: 0;
}

.txt-umwelt-intro__logo img {
    display: block;
    width: 280px;
    height: auto;
}


/* ==========================================================================
   Umwelt Scroll-Sektionen – Fullwidth alternierend
   ========================================================================== */

.umwelt-scroll {
    /* Kein Container – jede Section geht fullwidth */
}

.umwelt-block {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
    min-height: 340px;
    display: flex;
    align-items: center;
}

/* Alternierende Hintergrundfarben */
.umwelt-block--odd {
    background: linear-gradient(135deg, #f0faf1 0%, #e8f5e9 100%);
}

.umwelt-block--even {
    background: #fff;
}

/* Riesiges Icon als Wasserzeichen im Hintergrund */
.umwelt-block__bg-icon {
    position: absolute;
    right: -40px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 280px;
    color: rgba(97, 206, 112, 0.06);
    pointer-events: none;
    z-index: 0;
    line-height: 1;
}

.umwelt-block--even .umwelt-block__bg-icon {
    right: auto;
    left: -40px;
}

/* Inner Layout: Icon + Text nebeneinander */
.umwelt-block__inner {
    display: flex;
    align-items: center;
    gap: 60px;
    position: relative;
    z-index: 1;
}

/* Icon-Kreis */
.umwelt-block__icon {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, #61CE70 0%, #3da64d 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    box-shadow: 0 8px 32px rgba(97, 206, 112, 0.35);
}

/* Text-Bereich */
.umwelt-block__text {
    flex: 1;
}

.umwelt-block__number {
    display: inline-block;
    font-family: var(--font-primary);
    font-size: 3em;
    font-weight: 900;
    color: rgba(97, 206, 112, 0.2);
    line-height: 1;
    margin-bottom: 8px;
}

.umwelt-block__text h3 {
    font-family: var(--font-primary);
    font-size: 1.6em;
    font-weight: var(--fw-bold, 700);
    color: #2d8a3e;
    margin: 0 0 12px 0;
}

.umwelt-block__text p {
    font-family: var(--font-primary);
    font-size: 1.05em;
    line-height: 1.8;
    color: var(--color-text);
    margin: 0;
    max-width: 640px;
}

/* Even blocks: Icon rechts → Text rechtsbündig */
.umwelt-block--even .umwelt-block__text {
    text-align: right;
}

.umwelt-block--even .umwelt-block__text p {
    margin-left: auto;
}

/* Scroll Reveal: Basis-Styles jetzt in main.css (global) */


/* ==========================================================================
   Technik Scroll-Sektionen – Umwelt-Stil mit Farbkategorien
   ========================================================================== */

.technik-scroll {
    /* Fullwidth Container */
}

.technik-block {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
    min-height: 340px;
    display: flex;
    align-items: center;
}

/* Alternierende Hintergruende – Prepress (Magenta) */
.technik-block--prepress.technik-block--odd {
    background: linear-gradient(135deg, #fdf0f6 0%, #fce4ef 100%);
}
.technik-block--prepress.technik-block--even {
    background: #fff;
}

/* Press (Cyan) */
.technik-block--press.technik-block--odd {
    background: linear-gradient(135deg, #eef9fd 0%, #e0f4fc 100%);
}
.technik-block--press.technik-block--even {
    background: #fff;
}

/* Postpress (Gruen) */
.technik-block--postpress.technik-block--odd {
    background: linear-gradient(135deg, #f0faf1 0%, #e8f5e9 100%);
}
.technik-block--postpress.technik-block--even {
    background: #fff;
}

/* Grosses Maschinen-Bild als opakes Wasserzeichen – angeschnitten am Rand */
.technik-block__bg-img {
    position: absolute;
    right: -120px;
    top: 50%;
    transform: translateY(-50%);
    width: 650px;
    height: 350px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.15;
}

.technik-block__bg-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.technik-block--even .technik-block__bg-img {
    right: auto;
    left: -120px;
}

/* Inner Layout */
.technik-block__inner {
    display: flex;
    align-items: center;
    gap: 60px;
    position: relative;
    z-index: 1;
}

/* Text-Bereich – gegenueber vom Bild */
.technik-block__text {
    flex: 1;
    max-width: 60%;
}

/* Odd: Bild rechts → Text links */
.technik-block--odd .technik-block__text {
    margin-right: auto;
}

/* Even: Bild links → Text rechts */
.technik-block--even .technik-block__text {
    margin-left: auto;
}

.technik-block__number {
    display: inline-block;
    font-family: var(--font-primary);
    font-size: 3em;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 8px;
}

.technik-block--prepress .technik-block__number {
    color: rgba(229, 0, 125, 0.15);
}
.technik-block--press .technik-block__number {
    color: rgba(75, 214, 255, 0.2);
}
.technik-block--postpress .technik-block__number {
    color: rgba(97, 206, 112, 0.2);
}

.technik-block__text h3 {
    font-family: var(--font-primary);
    font-size: 1.6em;
    font-weight: var(--fw-bold, 700);
    margin: 0 0 16px 0;
}

.technik-block--prepress .technik-block__text h3 {
    color: #b3005f;
}
.technik-block--press .technik-block__text h3 {
    color: #1a8ab8;
}
.technik-block--postpress .technik-block__text h3 {
    color: #2d8a3e;
}

/* Liste innerhalb der Technik-Blocks */
.technik-block__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.technik-block__list li {
    font-family: var(--font-primary);
    font-size: 1.05em;
    line-height: 1.8;
    color: var(--color-text);
    padding-left: 24px;
    position: relative;
    margin-bottom: 4px;
}

.technik-block__list li::before {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 0.8em;
}

.technik-block--prepress .technik-block__list li::before {
    color: #E5007D;
}
.technik-block--press .technik-block__list li::before {
    color: #4BD6FF;
}
.technik-block--postpress .technik-block__list li::before {
    color: #61CE70;
}

/* Datenblatt Button */
.technik-block__btn {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 32px;
    background-color: #E5007D;
    color: #fff;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 0.95em;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s, transform 0.2s;
}

.technik-block__btn:hover {
    background-color: #b3005f;
    transform: translateY(-2px);
}


/* --------------------------------------------------------------------------
   9. Bilder im Content
   -------------------------------------------------------------------------- */

.txt-image-block {
    margin-top: var(--spacing-md);
}

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

/* (removed: txt-environment-icon - no longer used) */


/* --------------------------------------------------------------------------
   10. Ansprechpartner-Box (Qualitaet-Seite)
   -------------------------------------------------------------------------- */

.txt-contact {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
}

.txt-contact__title {
    font-family: var(--font-primary);
    font-size: 1.5em;
    font-weight: var(--fw-medium);
    color: var(--color-secondary);
    margin: 0 0 var(--spacing-md) 0;
}

.txt-contact__card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: var(--spacing-md);
    background-color: var(--color-bg-light);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--border-radius-card);
}

.txt-contact__icon {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.txt-contact__info {
    flex: 1;
}

.txt-contact__name {
    font-family: var(--font-primary);
    font-size: 1.1em;
    font-weight: var(--fw-bold);
    color: var(--color-secondary);
    margin: 0 0 4px 0;
}

.txt-contact__role {
    font-family: var(--font-primary);
    font-size: var(--fs-body);
    color: var(--color-text-light);
    margin: 0 0 var(--spacing-sm) 0;
}

.txt-contact__phone,
.txt-contact__email {
    font-family: var(--font-primary);
    font-size: var(--fs-body);
    margin: 0 0 var(--spacing-xs) 0;
    color: var(--color-text);
}

.txt-contact__phone i,
.txt-contact__email i {
    color: var(--color-primary);
    margin-right: 8px;
    width: 16px;
    text-align: center;
}

.txt-contact__phone a,
.txt-contact__email a {
    color: var(--color-link);
    text-decoration: none;
}

.txt-contact__phone a:hover,
.txt-contact__email a:hover {
    text-decoration: underline;
    color: var(--color-primary-hover);
}


/* --------------------------------------------------------------------------
   10b. Qualitaet: Sidebar-Layout + Kontakt-Sidebar + Wald-Sektion
   -------------------------------------------------------------------------- */

.txt-grid--sidebar {
    grid-template-columns: 1fr 340px;
    gap: 40px;
}

.txt-section-heading--cyan {
    color: #4BD6FF;
    font-size: 1.5em;
    font-weight: 400;
    margin: 24px 0 12px 0;
}

.txt-section-heading--cyan:first-child {
    margin-top: 0;
}

.txt-grid__col--main .txt-list {
    margin: 16px 0;
}

.txt-grid__col--main p {
    margin: 0 0 16px 0;
}

/* Kontakt-Sidebar */
.txt-contact-sidebar {
    text-align: left;
}

.txt-contact-sidebar__img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 16px;
    border-radius: 4px;
}

.txt-contact-sidebar__name {
    font-family: var(--font-primary);
    font-size: 1.9em;
    font-weight: 400;
    color: #4BD6FF;
    margin: 0 0 8px 0;
}

.txt-contact-sidebar__role {
    font-family: var(--font-primary);
    font-size: var(--fs-body);
    color: var(--color-text);
    margin: 0 0 4px 0;
}

.txt-contact-sidebar__phone,
.txt-contact-sidebar__email {
    font-family: var(--font-primary);
    font-size: var(--fs-body);
    color: var(--color-text);
    margin: 0 0 4px 0;
}

.txt-contact-sidebar__email a {
    color: var(--color-text);
    text-decoration: none;
}

.txt-contact-sidebar__email a:hover {
    text-decoration: underline;
}

/* Collage-Sektion (Philosophie: grüner Hintergrund) */
.txt-collage-section {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 40px 0;
}

.txt-collage-section__img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* ==========================================================================
   Philosophie – Scroll-Sektionen (Magenta-Farbschema)
   ========================================================================== */

.phil-intro {
    max-width: 800px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.1em;
    line-height: 1.8;
}

.phil-block {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
    min-height: 300px;
    display: flex;
    align-items: center;
}

.phil-block--magenta {
    background: linear-gradient(135deg, #fdf0f6 0%, #fce4ef 100%);
}

.phil-block--white {
    background: #fff;
}

/* Wasserzeichen-Icon */
.phil-block__bg-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 280px;
    color: rgba(229, 0, 125, 0.04);
    pointer-events: none;
    z-index: 0;
    line-height: 1;
    right: -40px;
}

.phil-block--white .phil-block__bg-icon {
    right: auto;
    left: -40px;
}

/* Inner Layout */
.phil-block__inner {
    display: flex;
    align-items: center;
    gap: 60px;
    position: relative;
    z-index: 1;
}

/* Icon-Kreis */
.phil-block__icon {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, #E5007D 0%, #b3005f 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    box-shadow: 0 8px 32px rgba(229, 0, 125, 0.3);
}

/* Nummer */
.phil-block__number {
    display: inline-block;
    font-family: var(--font-primary);
    font-size: 3em;
    font-weight: 900;
    color: rgba(229, 0, 125, 0.15);
    line-height: 1;
    margin-bottom: 8px;
}

.phil-block__text {
    flex: 1;
}

.phil-block__text h3 {
    font-family: var(--font-primary);
    font-size: 1.6em;
    font-weight: var(--fw-bold, 700);
    color: #b3005f;
    margin: 0 0 12px 0;
}

.phil-block__text p {
    font-family: var(--font-primary);
    font-size: 1.05em;
    line-height: 1.8;
    color: var(--color-text);
    margin: 0;
    max-width: 640px;
}

/* White blocks: Icon rechts → Text rechtsbündig */
.phil-block--white .phil-block__text {
    text-align: right;
}

.phil-block--white .phil-block__text p {
    margin-left: auto;
}


/* ==========================================================================
   Qualität – Scroll-Sektionen (wie Umwelt/Technik Stil)
   ========================================================================== */

.qual-intro {
    max-width: 800px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.1em;
    line-height: 1.8;
}

.qual-block {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
    min-height: 300px;
    display: flex;
    align-items: center;
}

.qual-block--cyan {
    background: linear-gradient(135deg, #eef9fd 0%, #e0f4fc 100%);
}

.qual-block--white {
    background: #fff;
}

/* Wasserzeichen-Icon */
.qual-block__bg-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 280px;
    color: rgba(75, 214, 255, 0.05);
    pointer-events: none;
    z-index: 0;
    line-height: 1;
    right: -40px;
}

.qual-block--white .qual-block__bg-icon {
    right: auto;
    left: -40px;
}

/* Inner Layout */
.qual-block__inner {
    display: flex;
    align-items: center;
    gap: 60px;
    position: relative;
    z-index: 1;
}

/* Icon-Kreis */
.qual-block__icon {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4BD6FF 0%, #2D5064 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    box-shadow: 0 8px 32px rgba(75, 214, 255, 0.3);
}

/* Nummer */
.qual-block__number {
    display: inline-block;
    font-family: var(--font-primary);
    font-size: 3em;
    font-weight: 900;
    color: rgba(75, 214, 255, 0.18);
    line-height: 1;
    margin-bottom: 8px;
}

.qual-block__text {
    flex: 1;
}

.qual-block__text h3 {
    font-family: var(--font-primary);
    font-size: 1.6em;
    font-weight: var(--fw-bold, 700);
    color: #1a8ab8;
    margin: 0 0 12px 0;
}

.qual-block__text p {
    font-family: var(--font-primary);
    font-size: 1.05em;
    line-height: 1.8;
    color: var(--color-text);
    margin: 0 0 16px 0;
    max-width: 640px;
}

/* White blocks: Icon rechts → Text rechtsbündig */
.qual-block--white .qual-block__text {
    text-align: right;
}

.qual-block--white .qual-block__text p {
    margin-left: auto;
}

.qual-block--white .qual-block__list {
    text-align: right;
}

.qual-block--white .qual-block__list li {
    padding-left: 0;
    padding-right: 24px;
}

.qual-block--white .qual-block__list li::before {
    left: auto;
    right: 0;
}

/* Checkliste */
.qual-block__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.qual-block__list li {
    font-family: var(--font-primary);
    font-size: 1.05em;
    line-height: 1.8;
    color: var(--color-text);
    padding-left: 24px;
    position: relative;
    margin-bottom: 4px;
}

.qual-block__list li::before {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #4BD6FF;
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 0.8em;
}


/* ==========================================================================
   Qualität – Ansprechpartner Card
   ========================================================================== */

.qual-contact-section {
    padding: 60px 0;
    background:
        radial-gradient(circle at 80% 50%, rgba(75, 214, 255, 0.05) 0%, transparent 40%),
        var(--color-bg-light, #f5f5f5);
}

.qual-contact-card {
    display: flex;
    align-items: center;
    gap: 32px;
    max-width: 800px;
    margin: 0 auto;
    background: var(--color-white, #fff);
    border-radius: 16px;
    padding: 32px 40px;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.04),
        0 8px 32px rgba(45, 80, 100, 0.08);
    position: relative;
}

.qual-contact-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 3px;
    background: linear-gradient(90deg, #4BD6FF, #E5007D);
    border-radius: 0 0 3px 3px;
}

.qual-contact-card__avatar {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4BD6FF 0%, #2D5064 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 4px 16px rgba(75, 214, 255, 0.3);
}

.qual-contact-card__info {
    flex: 1;
}

.qual-contact-card__label {
    display: block;
    font-size: 0.7em;
    font-weight: var(--fw-bold, 700);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #E5007D;
    margin-bottom: 4px;
}

.qual-contact-card__name {
    font-family: var(--font-primary);
    font-size: 1.5em;
    font-weight: var(--fw-bold, 700);
    color: var(--color-secondary, #54595F);
    margin: 0 0 4px 0;
}

.qual-contact-card__role {
    font-size: 0.95em;
    color: var(--color-text, #7A7A7A);
    margin: 0;
}

.qual-contact-card__links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.qual-contact-card__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9em;
    color: var(--color-text, #7A7A7A);
    text-decoration: none;
    transition: color 0.3s ease;
}

.qual-contact-card__link:hover {
    color: #E5007D;
}

.qual-contact-card__link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(229, 0, 125, 0.07);
    color: #E5007D;
    font-size: 12px;
    flex-shrink: 0;
    transition: background 0.3s ease, color 0.3s ease;
}

.qual-contact-card__link:hover .qual-contact-card__link-icon {
    background: #E5007D;
    color: #fff;
}


/* Wald-Bild Dekorative Sektion */
.txt-wald-section {
    min-height: 370px;
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
}


/* --------------------------------------------------------------------------
   11. Job-Teaser (wie auf allen Seiten)
   -------------------------------------------------------------------------- */

.txt-job-teaser {
    background-color: var(--color-bg-light);
    padding: var(--spacing-lg) 0;
    margin-top: var(--spacing-xl);
    text-align: center;
}

.txt-job-teaser__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.txt-job-teaser__title {
    font-family: var(--font-primary);
    font-size: var(--fs-large);
    font-weight: var(--fw-bold);
    color: var(--color-secondary);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.txt-job-teaser__position {
    font-family: var(--font-primary);
    font-size: var(--fs-medium);
    font-weight: var(--fw-normal);
    color: var(--color-text);
    margin: 0 0 var(--spacing-sm) 0;
}


/* --------------------------------------------------------------------------
   12. Entry Content (Fallback fuer the_content())
   -------------------------------------------------------------------------- */

.txt-body .entry-content h2 {
    font-size: 1.5em;
    font-weight: var(--fw-medium);
    color: var(--color-secondary);
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
}

.txt-body .entry-content h3 {
    font-size: 1.25em;
    font-weight: var(--fw-medium);
    color: var(--color-secondary);
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.txt-body .entry-content p {
    margin-bottom: var(--spacing-sm);
}

.txt-body .entry-content a {
    color: var(--color-link);
    text-decoration: underline;
}

.txt-body .entry-content a:hover {
    color: var(--color-primary-hover);
}

.txt-body .entry-content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: var(--spacing-md) 0;
    border-radius: var(--border-radius-card);
}

.txt-body .entry-content ul {
    list-style: disc;
    padding-left: 1.5em;
    margin-bottom: var(--spacing-md);
}

.txt-body .entry-content ol {
    list-style: decimal;
    padding-left: 1.5em;
    margin-bottom: var(--spacing-md);
}

.txt-body .entry-content li {
    margin-bottom: var(--spacing-xs);
    line-height: var(--lh-body);
}


/* ==========================================================================
   13. Responsive
   ========================================================================== */

/* Tablet */
@media (max-width: 1024px) {
    .txt-hero {
        margin-top: -110px;
    }

    .txt-hero__title {
        font-size: 2.5em;
    }

    .txt-hero__subtitle {
        font-size: 1.5em;
    }

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

/* Mobile */
@media (max-width: 767px) {
    .txt-banner {
        display: none;
    }

    .txt-hero {
        min-height: auto;
        margin-top: 0;
        background-image: none;
        background-color: #E5007D;
        transform: none;
    }

    .txt-hero__inner {
        flex-direction: column;
        text-align: center;
        gap: 10px;
        transform: none;
        justify-content: center;
    }

    .txt-hero__text-col {
        text-align: center;
    }

    .txt-hero__icon-col {
        flex: none;
    }

    .txt-hero__icon-circle {
        width: 60px;
        height: 60px;
        font-size: 24px;
        margin-top: -35px;
    }

    .txt-hero__text-col {
        padding-left: 0;
    }

    .txt-hero__title {
        font-size: 1.6em;
    }

    .txt-hero__subtitle {
        font-size: 1.2em;
    }

    .txt-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .txt-grid__col {
        padding: 0;
    }

    .txt-badge {
        font-size: 1.2em;
    }

    .txt-grid--sidebar {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .txt-grid__col--sidebar {
        order: -1;
    }

    .txt-wald-section {
        min-height: 200px;
    }

    /* Technik blocks: stack vertically on mobile */
    .txt-technik-block {
        min-height: auto;
        background-size: 50%;
        background-position: center bottom;
    }

    .txt-technik-block__inner {
        grid-template-columns: 1fr;
        padding: 0 16px;
    }

    .txt-technik-block__heading {
        padding: 24px 16px 12px;
    }

    .txt-technik-block__title {
        font-size: 2.5em;
    }

    .txt-technik-block__subtitle {
        font-size: 1.6em;
    }

    .txt-technik-block__list {
        padding: 12px 16px 24px;
    }

    /* Technik Scroll-Sektionen mobil */
    .technik-block {
        padding: 40px 0;
        min-height: auto;
    }

    .technik-block__inner {
        flex-direction: column;
        gap: 24px;
        text-align: center;
    }

    .technik-block__bg-img {
        width: 200px;
        height: 200px;
        right: -20px;
    }

    .technik-block--even .technik-block__bg-img {
        left: -20px;
    }

    .technik-block__number {
        font-size: 2em;
    }

    .technik-block__text h3 {
        font-size: 1.25em;
    }

    .technik-block__list li {
        font-size: 0.95em;
        text-align: left;
    }

    .txt-umwelt-intro {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .txt-umwelt-intro__logo img {
        width: 180px;
    }

    /* Umwelt Scroll-Sektionen mobil */
    .umwelt-block {
        padding: 40px 0;
        min-height: auto;
    }

    .umwelt-block__inner {
        flex-direction: column;
        gap: 24px;
        text-align: center;
    }

    .umwelt-block__icon {
        width: 72px;
        height: 72px;
        font-size: 28px;
    }

    .umwelt-block__bg-icon {
        font-size: 140px;
        right: -20px;
    }

    .umwelt-block--even .umwelt-block__bg-icon {
        left: -20px;
    }

    .umwelt-block__number {
        font-size: 2em;
    }

    .umwelt-block__text h3 {
        font-size: 1.25em;
    }

    .umwelt-block__text p {
        font-size: 0.95em;
    }

    .txt-contact__card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .txt-contact__phone i,
    .txt-contact__email i {
        display: none;
    }

    .txt-job-teaser__title {
        font-size: 1.5em;
    }

    /* Philosophie Blocks mobil */
    .phil-block {
        padding: 40px 0;
        min-height: auto;
    }

    .phil-block__inner {
        flex-direction: column;
        gap: 24px;
        text-align: center;
    }

    .phil-block__icon {
        width: 72px;
        height: 72px;
        font-size: 28px;
    }

    .phil-block__bg-icon {
        font-size: 140px;
        right: -20px;
    }

    .phil-block--white .phil-block__bg-icon {
        left: -20px;
    }

    .phil-block__number {
        font-size: 2em;
    }

    .phil-block__text h3 {
        font-size: 1.25em;
    }

    .phil-block__text p {
        font-size: 0.95em;
    }

    /* Qualität Blocks mobil */
    .qual-block {
        padding: 40px 0;
        min-height: auto;
    }

    .qual-block__inner {
        flex-direction: column;
        gap: 24px;
        text-align: center;
    }

    .qual-block__icon {
        width: 72px;
        height: 72px;
        font-size: 28px;
    }

    .qual-block__bg-icon {
        font-size: 140px;
        right: -20px;
    }

    .qual-block--white .qual-block__bg-icon {
        left: -20px;
    }

    .qual-block__number {
        font-size: 2em;
    }

    .qual-block__text h3 {
        font-size: 1.25em;
    }

    .qual-block__text p {
        font-size: 0.95em;
    }

    .qual-block__list li {
        font-size: 0.95em;
        text-align: left;
    }

    .qual-contact-card {
        flex-direction: column;
        text-align: center;
        padding: 28px 24px;
        gap: 20px;
    }

    .qual-contact-card__links {
        align-items: center;
    }
}