/* ============================================================
   PÖPPEL WKZ — Haupt-Styles
   Primärfarben: #d51030 (rot), #e49faa (rosa), #333 (dunkel)
   Font: Open Sans, tahoma, arial
   ============================================================ */

/* --- Reset & Basis --- */
html, body { height: 100%; }
body {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-family: 'Open sans', tahoma, arial;
    color: #666666;
    font-weight: 300;
    line-height: normal;
    -webkit-text-size-adjust: none;
}

h1 { font-size: 30px; line-height: 40px; font-family: 'Open sans', arial, tahoma; margin: 0; color: #333333; font-weight: 300; }
h2 { font-size: 24px; line-height: 30px; font-family: 'Open sans', arial, tahoma; margin: 0; color: #333333; font-weight: 700; text-transform: uppercase; }
h3 { font-size: 28px; line-height: 34px; font-family: 'Open sans', arial, tahoma; margin: 0; color: #666666; font-weight: 400; }

a                   { color: #d51030; text-decoration: none; font-size: 14px; font-weight: 400; }
a:hover             { color: #d51030; text-decoration: underline; }
a.fusszeile         { color: #666666; text-decoration: none; font-size: 15px; line-height: 14px; font-weight: 400; text-transform: none; }
a.fusszeile:hover   { color: #666666; text-decoration: underline; }
a.small             { color: #cccccc; text-decoration: none; }
a.small:hover       { color: #d51030; text-decoration: none; }
a.mobile            { color: #e49faa; text-decoration: none; font-size: 13px; font-weight: 400; }
a.mobile:hover      { color: #e49faa; text-decoration: none; }
a.smallgrey         { color: #999999; text-decoration: none; }
a.smallgrey:hover   { color: #999999; text-decoration: underline; }
a.breadcrumb        { color: #666666; text-decoration: none; }
a.breadcrumb:hover  { color: #d51030; text-decoration: none; }

/* --- Typografie Helfer --- */
.small      { color: #cccccc; font-weight: 400; font-size: 12px; line-height: 14px; }
.smallgrey  { color: #999999; font-weight: 400; font-size: 12px; line-height: 14px; }
.mini       { color: #999999; font-weight: 400; font-size: 11px; line-height: 11px; }
.weiss      { color: #ffffff; }
.rot        { color: #d51030; }
.grwh       { color: #333333; }

span.gross      { font-size: 16px; line-height: 18px; color: #666666; }
span.mittel     { font-size: 13px; line-height: 15px; color: #666666; }
span.klein      { font-size: 12px; line-height: 14px; color: #666666; }
span.weiss      { color: #ffffff; }
span.fusszeile  { font-size: 15px; line-height: 14px; font-weight: 400; text-transform: none; color: #666666; }
span.fussbig    { font-size: 14px; line-height: 16px; color: #999999; font-style: italic; text-transform: uppercase; }
span.prospekte  { font-size: 14px; line-height: 16px; color: #666666; }
span.redwindow  { font-size: 12px; line-height: 14px; color: #ffffff; font-weight: 700; text-transform: uppercase; }
span.topic      { font-size: 30px; line-height: 30px; color: #ffffff; }
span.topic2     { font-size: 20px; line-height: 20px; color: #ffffff; }
span.subheadline { font-size: 16px; line-height: 26px; color: #333333; font-weight: 300; text-transform: uppercase; }

/* --- Layout Helfer --- */
.nullpadding    { padding: 0; }
.abstand        { margin-bottom: 30px; }
.ausrichten     { text-align: center; }
.ausrichten2    { text-align: center; }
.abstandhalf    { margin-bottom: 15px; }
.abstandtop     { margin-top: 30px; }
.totop          { padding-top: 40px; padding-bottom: 40px; }
.totop2         { padding-top: 40px; padding-bottom: 40px; }
.totop3         { padding-top: 40px; padding-bottom: 0; }
.redpad         { padding: 0 5px; margin-bottom: 10px; }

/* Flexbox rows */
.row-flex, .row-flex > div[class*='col-'] {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
.ff { flex-wrap: wrap; }
.box-pack { justify-content: center !important; }
.box-pack-middle { display: flex; flex-wrap: wrap; align-items: center; }

/* --- Hintergrundfarben --- */
.coloring               { background-color: #ffffff; }
.coloring2              { background-color: #d51030; }
.coloring3              { background-color: #f5f5f5; }
.coloring-weiss         { background-color: transparent; }
.coloring-dunkelgrau    { background-color: #d4d4d4; }
.coloring-hellgrau      { background-color: #f5f5f5; }

/* --- Header / Logo-Bereich --- */
.position       { position: relative; z-index: 100; }
.logo img       { width: 100%; max-width: 250px; height: auto; padding-top: 15px; padding-bottom: 15px; padding-left: 15px; }

/* --- headerheight: Platzhalter unter dem fixed Header --- */
.headerheight   { height: 0; }

/* --- Top-Links --- */
.linktop        { padding-top: 5px; padding-bottom: 20px; }
.searchtop      { padding-top: 16px; }

/* --- yes/no Sichtbarkeit: yes = nur mobil, no = nur Desktop --- */
.yes { display: block; }
.no  { display: none; }

/* --- Kataloge / Prospekte: Basis (Mobile) --- */
.proswidth          { width: 50%; }

/* --- Panorama/iframe-Einbettung --- */
.mp { height: 300px; }

/* --- Footer --- */
.footer         { background-color: #ffffff; padding-top: 80px; padding-bottom: 30px; }
.footer2        { background-color: #f5f5f5; padding-top: 40px; padding-bottom: 10px; }
.iconfuss       { padding-left: 2px; padding-right: 2px; }
.textfuss       { padding-top: 30px; }
.partnerfuss    { padding-top: 0; }
.socialfuss     { padding-top: 0; }
.partnerwidth   { width: 90px; }

.fa-color1      {
    color: #999999;
    -webkit-transition: color 0.5s ease-in-out;
    -moz-transition: color 0.5s ease-in-out;
    -ms-transition: color 0.5s ease-in-out;
    -o-transition: color 0.5s ease-in-out;
    transition: color 0.5s ease-in-out;
}
.fa-color2      { color: #ffffff; font-size: 0.8em; }
.fa-stack:hover .fa-color1 { color: #d51030; }
.glyphheight    { font-size: 30px; }
.glyphheight2   { font-size: 20px; }

@media (min-width: 768px) {
    .mp { height: 400px; }
    .yes { display: none !important; }
    .no  { display: block !important; }
    .hidden-xs { display: block !important; }
    .ausrichten  { text-align: left; }
    .ausrichten2 { text-align: right; }

    /* Header auf Desktop: fixed + Schatten */
    .position {
        position: fixed;
        z-index: 100;
        -webkit-box-shadow: 0px 15px 40px 0px rgba(0,0,0,0.20);
        -moz-box-shadow: 0px 15px 40px 0px rgba(0,0,0,0.20);
        box-shadow: 0px 15px 40px 0px rgba(0,0,0,0.20);
    }
    .headerheight { height: 102px; }
    .linktop      { padding-top: 9px; padding-bottom: 0; }
    .searchtop    { padding-top: 5px; }

    body, td, p { font-size: 14px; }
    h1 { font-size: 42px; line-height: 52px; }
    h2 { font-size: 30px; line-height: 36px; }
    h3 { font-size: 38px; line-height: 44px; }

    .logo img { max-width: 235px; padding-top: 34px; padding-bottom: 15px; padding-left: 0; }

    span.gross      { font-size: 16px; line-height: 18px; }
    span.mittel     { font-size: 13px; line-height: 15px; }
    span.klein      { font-size: 12px; line-height: 14px; }
    span.fusszeile  { font-size: 15px; line-height: 14px; font-weight: 400; text-transform: none; }
    span.fussbig    { font-size: 14px; line-height: 16px; }
    span.prospekte  { font-size: 14px; line-height: 16px; }
    span.redwindow  { font-size: 12px; line-height: 14px; }
    a               { font-size: 14px; }
    .small          { font-size: 12px; line-height: 14px; }
    .smallgrey      { font-size: 12px; line-height: 14px; }
    a.smallgrey     { font-size: 12px; line-height: 14px; }
    .mini           { font-size: 11px; line-height: 11px; }

    .totop          { padding-top: 60px; padding-bottom: 60px; }
    .totop2         { padding-top: 0; padding-bottom: 60px; }
    .totop3         { padding-top: 60px; padding-bottom: 0; }

    .footer         { padding-top: 80px; padding-bottom: 30px; }
    .footer2        { padding-top: 40px; padding-bottom: 10px; }
    .textfuss       { padding-top: 36px; }
    .partnerwidth   { width: 100px; }
    .shoptop        { padding-top: 10px; }
    .glyphheight    { font-size: 30px; }

    .prospad        { padding: 0 15px; text-align: center; }
    .proswidth      { width: 85%; }

    a.buttoninverse > .btn { font-size: 12px; padding: 8px 15px; font-weight: 700; text-transform: uppercase; }
    a.buttonrot > .btn     { font-size: 12px; padding: 8px 15px; font-weight: 700; text-transform: uppercase; }
    a.button > .btn        { font-size: 12px; padding: 8px 15px; font-weight: 700; text-transform: uppercase; }
}

@media (min-width: 992px) {
    .mp { height: 500px; }
    .headerheight { height: 114px; }
    .only-xs-sm { display: none; }

    body, td, p { font-size: 16px; }
    h1 { font-size: 50px; line-height: 60px; }
    h2 { font-size: 32px; line-height: 38px; }
    h3 { font-size: 42px; line-height: 48px; }

    .logo img { max-width: 285px; padding-top: 34px; padding-bottom: 15px; }

    span.gross      { font-size: 20px; line-height: 22px; }
    span.mittel     { font-size: 15px; line-height: 17px; }
    span.klein      { font-size: 14px; line-height: 16px; }
    span.fusszeile  { font-size: 15px; line-height: 16px; font-weight: 400; text-transform: none; }
    a.fusszeile     { font-size: 15px; line-height: 16px; font-weight: 400; text-transform: none; }
    span.fussbig    { font-size: 18px; line-height: 20px; }
    span.prospekte  { font-size: 15px; line-height: 17px; }
    span.redwindow  { font-size: 11px; line-height: 11px; }
    a               { font-size: 16px; }
    .smallgrey      { font-size: 14px; line-height: 16px; }
    a.smallgrey     { font-size: 14px; line-height: 16px; }

    .footer         { padding-top: 100px; padding-bottom: 50px; }
    .footer2        { padding-top: 50px; padding-bottom: 20px; }
    .textfuss       { padding-top: 51px; }
    .partnerwidth   { width: 105px; }
    .shoptop        { padding-top: 17px; }
    .glyphheight    { font-size: 30px; }

    .prospad        { padding: 0; text-align: left; }
    .proswidth      { width: 100%; }

    a.buttoninverse > .btn { font-size: 13px; padding: 8px 15px; font-weight: 700; text-transform: uppercase; }
    a.buttonrot > .btn     { font-size: 13px; padding: 8px 15px; font-weight: 700; text-transform: uppercase; }
    a.button > .btn        { font-size: 13px; padding: 8px 15px; font-weight: 700; text-transform: uppercase; }
}

@media (min-width: 1200px) {
    .mp { height: 600px; }
    .headerheight { height: 117px; }

    body, td, p { font-size: 18px; }
    h1 { font-size: 60px; line-height: 70px; }
    h2 { font-size: 36px; line-height: 42px; }
    h3 { font-size: 48px; line-height: 54px; }

    .logo img { max-width: 300px; padding-top: 34px; padding-bottom: 15px; }

    span.gross      { font-size: 24px; line-height: 26px; }
    span.mittel     { font-size: 17px; line-height: 19px; }
    span.klein      { font-size: 16px; line-height: 18px; }
    span.fusszeile  { font-size: 15px; line-height: 17px; font-weight: 400; text-transform: none; }
    a.fusszeile     { font-size: 15px; line-height: 17px; font-weight: 400; text-transform: none; }
    span.fussbig    { font-size: 20px; line-height: 22px; }
    span.prospekte  { font-size: 17px; line-height: 19px; }
    span.redwindow  { font-size: 14px; line-height: 14px; }
    a               { font-size: 18px; font-weight: 400; }
    .small          { font-size: 13px; line-height: 15px; }
    a.small         { font-size: 13px; line-height: 15px; }
    .smallgrey      { font-size: 15px; line-height: 17px; }
    a.smallgrey     { font-size: 15px; line-height: 17px; }

    .footer         { padding-top: 100px; padding-bottom: 50px; }
    .footer2        { padding-top: 50px; padding-bottom: 20px; }
    .textfuss       { padding-top: 51px; }
    .partnerfuss    { padding-top: 27px; }
    .socialfuss     { padding-top: 23px; }
    .partnerwidth   { width: 125px; }
    .shoptop        { padding-top: 10px; }
    .glyphheight    { font-size: 34px; }
    .linktop        { padding-top: 13px; }

    a.buttoninverse > .btn { font-size: 14px; padding: 8px 15px; font-weight: 700; text-transform: uppercase; }
    a.buttonrot > .btn     { font-size: 18px; padding: 15px; font-weight: 700; text-transform: uppercase; }
    a.button > .btn        { font-size: 14px; padding: 8px 15px; font-weight: 700; text-transform: uppercase; }
}

/* --- Carousel / Slider --- */
.carousel       { width: 100%; }
.img-header     { width: 100%; height: auto; display: block; }
.img-fullresponsive { display: block; width: 100%; max-width: 100%; height: auto; }
.header { display: block; position: relative; height: auto; z-index: 1; }
.carousel .item { height: auto; }

/* Carousel indicators: always hidden (like live site) */
.carousel-indicators { display: none !important; }

/* Carousel controls: hidden on mobile, shown on desktop */
.carousel-control {
    display: none !important;
    height: auto;
    margin-top: 0;
    width: 10%;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
    filter: alpha(opacity=50);
    opacity: .5;
    background-color: transparent;
    border: 0;
    z-index: 20;
}
@media (min-width: 768px) {
    .carousel-control { display: block !important; }
}

/* Sliderpos: used to position controls at bottom of slider on desktop */
.sliderpos { position: relative; bottom: 0; }
@media (min-width: 768px) {
    .sliderpos { position: absolute; bottom: -1px; }
}

/* --- Hover-Kacheln (.halter/.over/.color) --- */
.halter         { position: relative; overflow: hidden; }
.over           { display: block; bottom: 0; width: 100%; z-index: 2; position: absolute; text-align: center; opacity: 1; }
.over-top       { top: 0; bottom: auto; }
.color          { font-size: 16px; font-family: 'PT Sans', tahoma, arial; color: #ffffff; padding: 10px; background-color: #d51030; opacity: 0.85; }
.divpointer     { cursor: pointer; }

/* --- Sortiment-Kacheln --- */
.box-red            { width: 100%; background-color: #d51030; text-align: center; position: relative; padding: 10px; border: 0; }
.box-red:hover      { background-color: #333333; }

/* --- Kataloge / Prospekte --- */
.prospad            { padding: 0 15px; text-align: center; }
.padnoxs            { padding: 0; }
.padnosm            { padding: 0; }
.padrightsm         { padding-right: 15px; }
.padrightmd         { padding-right: 15px; }
.padrightlg         { padding-right: 15px; }

/* --- Typografie-Helfer --- */
.linie          { width: 100%; height: 2px; margin-top: 15px; margin-bottom: 15px; display: block; }
.abstanddouble  { margin-bottom: 60px; }
.hyphens        { overflow-wrap: break-word; word-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.height100      { height: calc(100vh - 130px); }
.fullbgimage    { z-index: 1; background-position: center center; width: 100%; height: 100%; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; }
@media screen and (min-width: 768px) {
    .only-xs    { display: none; }
}

/* Webshop-Banner */
.coloring2 h3   { color: #ffffff; }
.shoptop        { padding-top: 50px; padding-bottom: 0; }

/* Shop-Button-Stil */
a.button > .btn {
    color: #d51030; background-color: #ffffff;
    border-radius: 20px; border: 1px solid #dadada; white-space: normal;
}
a.button:hover > .btn { color: #ffffff; background-color: #dadada; }

a.buttoninverse > .btn {
    color: #d51030; background-color: #ffffff;
    border-radius: 20px; border: 0; white-space: normal;
}
a.buttoninverse:hover > .btn { opacity: 0.8; }

a.buttonrot > .btn {
    color: #ffffff; background-color: #d51030;
    border-radius: 0; border: 0; white-space: normal; width: 100%;
}
a.buttonrot:hover > .btn { opacity: 0.8; }

input.button {
    font-size: 18px; color: #ffffff; font-weight: 400;
    background-color: #d51030; text-align: center;
    border: 0; margin: 0; padding: 15px 30px; cursor: pointer;
}
input.button:hover { opacity: 0.8; }

/* --- Scroll-To-Top Button --- */
.scroll-top-wrapper {
    position: fixed; opacity: 0; visibility: hidden; text-align: center;
    z-index: 9999998; background-color: #d51030; color: #ffffff;
    width: 50px; height: 48px; line-height: 40px;
    right: 30px; bottom: 30px; padding-top: 2px; border-radius: 10px;
    transition: all 0.5s ease-in-out;
}
.scroll-top-wrapper:hover   { background-color: #f5f5f5; color: #d51030; }
.scroll-top-wrapper.show    { visibility: visible; cursor: pointer; opacity: 1; }

/* --- Bild-Helfer --- */
.img-responsive { max-width: 100%; height: auto; display: block; }
.lefttocenter   { display: block; margin-right: auto; margin-left: auto; float: none; }
@media (min-width: 768px) {
    .lefttocenter { float: left !important; }
}
.center-block   { display: block; margin-left: auto; margin-right: auto; }
/* .images-container is semantic only — no width override (would break .container max-width) */

/* --- Boxen --- */
.box        { width: 100%; background-color: #f3f3f3; text-align: left; position: relative; padding: 30px; border: 1px solid #f3f3f3; }
.box:hover  { border-color: #cccccc; }

/* --- Breadcrumb --- */
.breadcrumb {
    padding: 10px 0; margin-bottom: 0; list-style: none;
    background-color: transparent; border-radius: 0;
    font-size: 13px; color: #999999;
}
.breadcrumb > li + li::before { padding: 0 5px; color: #cccccc; content: "/\00a0"; }

/* --- Seiteninhalte --- */
.page-content   { padding: 40px 0; }
.entry-content  { padding: 20px 0; }
.entry-content p { margin-bottom: 20px; line-height: 1.6; }

/* --- Custom Bootstrap Tiles (8 pro Zeile, aus Ascana def.css) --- */
.col-xs-8t, .col-sm-8t, .col-md-8t, .col-lg-8t {
    position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; float: left;
}
.col-xs-8t { width: 100%; }
@media (min-width: 768px)  { .col-sm-8t { width: 12.5%; } }
@media (min-width: 992px)  { .col-md-8t { width: 12.5%; } }
@media (min-width: 1200px) { .col-lg-8t { width: 12.5%; } }

/* --- Elementor-Integration ---
   Elementor-Section verhält sich wie container-fluid (full_width).
   Innerer elementor-container bekommt max-width 1170px wie Bootstrap .container.
   Kein extra Padding auf Widget-Ebene – Bootstrap col-* Klassen übernehmen das Gutter. */
.elementor-section > .elementor-container { max-width: 1170px; padding: 0; }
.elementor-section.elementor-section-boxed > .elementor-container { max-width: 1170px; }
.elementor-column > .elementor-widget-wrap { padding: 0; }
.elementor-widget-wrap > .elementor-element { width: 100%; }
.elementor-widget + .elementor-widget { margin-top: 0; }
.elementor-widget-text-editor .elementor-widget-container,
.elementor-widget-html .elementor-widget-container { padding: 0; }

/* --- Mobile versteckt --- */
@media (max-width: 767px) {
    .hidden-xs { display: none !important; }
    .footer { padding-top: 40px; padding-bottom: 20px; }
    .proswidth { width: 50%; }
}

/* --- Bildunterschriften (aus Original modul/border.css) --- */
.imgtitle {
  padding: 6px 0px 6px 0px;
  background-color: transparent;
  color: #999999;
  font-size: 14px;
  font-style: italic;
  text-align: center;
}
.picborder { border: 5px solid #999999; }

/* ── Elementor Native Widget Overrides ────────────────────────────────────── */

/* Heading: Standard-Textfarbe = Theme-Dunkel (explizit gesetzte Farben via inline-style überschreiben dies) */
.elementor-widget-heading .elementor-heading-title {
    color: #333333;
}

/* Button: Standard-Stil = Theme-Weißbutton mit Rotrand */
.elementor-widget-button .elementor-button.elementor-button-default {
    background-color: #ffffff;
    color: #d51030;
    border-radius: 20px;
    border: 1px solid #dadada;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 8px 15px;
    white-space: normal;
}
.elementor-widget-button .elementor-button.elementor-button-default:hover {
    background-color: #dadada;
    color: #ffffff;
    border-color: #dadada;
}