/* Webdesignland — Kopfzeile und Fusszeile.
   Steht hier, weil beide als Theme-Builder-Layouts auf jeder Seite liegen
   und nicht mehr Teil einer einzelnen Seite sind. */

:root{--wdl-pad:clamp(22px,4.4vw,72px);--wdl-paper:#f2f0e9;--wdl-ink:#111411;--wdl-orange:#c24100;--wdl-orange-hoch:#c24100;--wdl-line:rgba(17,20,17,.18)}

/* Divis Grundabstaende (Sektion 60px, Reihe 5,5 %/40px, Spalte 30px) stehen
   als Variablen in style-static.css und sind nirgends einstellbar. Kopf, Fuss
   und Seiten fuehren ihre Abstaende selbst (die Rinne im Modul bleibt). Auf
   null gesetzt werden die Variablen, nicht gap: Abstaende, die am Modul
   unter Layout stehen, greifen weiter. */
:root{--section-gutter:0px;--row-gutter-horizontal:0px;--row-gutter-vertical:0px;--row-gutter-grid:0px}
.et_flex_column{--horizontal-gap:0px;--vertical-gap:0px}
.wdl-composed{font-family:Raleway,"Segoe UI",Arial,sans-serif}
.wdl-composed .et_pb_row{width:100%;max-width:100%;padding:0 var(--wdl-pad);margin-left:0;margin-right:0}
.wdl-composed .et_pb_column{margin-bottom:0}
.wdl-composed .et_pb_column .et_pb_module{margin-bottom:0}
.wdl-composed p{margin:0;line-height:inherit}
.wdl-composed a{color:inherit;text-decoration:none}
.wdl-composed .et_pb_text_inner{line-height:inherit}
.wdl-raster>.et_pb_column{width:auto;float:none;margin:0}

/* Schaltflaeche im Kopf. Der Praefix holt die Spezifitaet der Divi-Buttonregeln ein. */
.wdl-composed .et_pb_button_module_wrapper{display:inline-block;width:auto;vertical-align:top;margin:0}
/* Die orange Pille der Bildvorlage von Entwurf C (Michael, 06.09.2026). Nur im
   Kopf; die Seiten behalten ihre dunkle Grundform. Beim Zeigen aendert sich die
   Groesse nicht (SYSTEM.md §4), nur Farbe und Ort. */
body #page-container .et_pb_section a.wdl-btn-kopf:before{display:none!important;content:none}
/* Der Pfeil steht mit Abstand hinter dem Wort, wie im Bild. Die Grundlage
   (basis.css) schaltet Divis Pfeil-Pseudoelement an a.et_pb_button mit
   !important ab und laedt spaeter; die Klasse et_pb_button im Selektor holt
   das ein. */
body #page-container .et_pb_section a.et_pb_button.wdl-btn-kopf:after{content:""!important;display:inline-block!important;position:static!important;opacity:1!important;margin:0 0 0 14px!important;top:auto!important;width:16px;height:16px;flex:0 0 16px;background:currentColor;-webkit-mask:var(--wdl-pfeil) no-repeat center/contain;mask:var(--wdl-pfeil) no-repeat center/contain;transform:none!important;transition:translate .25s cubic-bezier(.23,1,.32,1)}
/* Die Grundlage der Seiten (basis.css) setzt jeder Schaltflaeche Radius 0 und
   laedt nach dieser Datei; die Klasse et_pb_button im Selektor holt das ein. */
body #page-container .et_pb_section a.et_pb_button.wdl-btn-kopf{display:inline-flex;flex-direction:row!important;align-items:center;justify-content:center;border-radius:999px;font-family:inherit;background:#c24100;color:var(--wdl-ink);padding:18px 30px;font-size:16px;font-weight:700;letter-spacing:.01em;border:0;line-height:1.2;transition:transform var(--wdl-druck,160ms) cubic-bezier(.23,1,.32,1),background .25s cubic-bezier(.23,1,.32,1)}
@media(hover:hover) and (pointer:fine){
  body #page-container .et_pb_section a.wdl-btn-kopf:hover{background:var(--wdl-ink);color:#fff;transform:translateY(-2px)}
  body #page-container .et_pb_section a.et_pb_button.wdl-btn-kopf:hover:after{translate:4px 0}
}
body #page-container .et_pb_section a.wdl-btn-kopf:active{transform:scale(.97)}
body #page-container .et_pb_section a.wdl-btn-kopf:focus-visible{outline:2px solid var(--wdl-ink);outline-offset:3px}

/* Kopfzeile */
.wdl-kopf{border-bottom:1px solid rgba(17,20,17,.07);position:relative;z-index:8}
/* Die Spalte muss ihre Breite ausdruecklich nehmen. Die Reihe ist ein
   Flex-Behaelter, und `.wdl-raster>.et_pb_column{width:auto}` weiter oben
   setzt Divis eigene 100 Prozent zurueck — eine Rasterspalte mit width:auto
   schrumpft dort auf ihren Inhalt. Der Kopf war deshalb bei 1920 px nur
   788 px breit: Logo, Menue und Schaltflaeche draengten sich auf der linken
   Haelfte, rechts lagen 1000 px nichts (Michael, 06.09.2026). Der Fuss war
   nie betroffen, seine Reihen tragen kein `wdl-raster`.
   Innenmasse aus der Leiter des Projekts (tokens.json, abstand). */
/* Seit dem 06.09.2026 zwei Zeilen links: Wortmarke und Zeile darunter. Menue
   und Schaltflaeche spannen beide Zeilen. */
.wdl-composed .et_pb_column.wdl-kopf-col{width:100%;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;align-items:center;column-gap:40px;row-gap:4px;min-height:120px}
.wdl-composed .wdl-kopf-col .wdl-logo{grid-area:1/1/2/2;align-self:end}
.wdl-composed .wdl-kopf-col .wdl-kopf-zeile{grid-area:2/1/3/2;align-self:start}
.wdl-composed .wdl-kopf-col .wdl-nav{grid-area:1/2/3/3}
.wdl-composed .wdl-kopf-col .et_pb_button_module_wrapper{grid-area:1/3/3/4}
/* Die Wortmarke ist seit dem 04.09.2026 ein SVG, seit dem 07.09.2026 in
   Kleinbuchstaben (Vorlage: 174 px bei 862, mal 1,67). Die Breite fuehrt die
   Groesse, die Hoehe folgt dem Seitenverhaeltnis der Datei. */
.wdl-logo{width:auto}
.wdl-logo .et_pb_image_wrap,.wdl-logo a{display:block}
.wdl-logo img{display:block;width:290px;height:auto}
.wdl-kopf-col .et_pb_button_module_wrapper{justify-self:end}

/* Navigation. Divis Menuemodul traegt ein echtes WordPress-Menue und bringt
   das Handy-Menue mit; hier wird nur seine Grundform auf die Vorlage gebracht:
   13 px, fett, Abstand 38, keine Divi-Unterstreichung, kein weisser Kasten. */
.wdl-composed .wdl-nav{justify-self:center;width:auto;background:transparent}
.wdl-nav .et_pb_menu_inner_container,.wdl-nav .et_pb_menu__wrap{justify-content:center}
.wdl-nav .et-menu{margin:0;gap:40px}
.wdl-nav .et-menu>li{padding:0;margin:0}
.wdl-nav .et-menu>li>a{padding:0;font-size:16px;font-weight:500;color:var(--wdl-ink);line-height:1.2;transition:color .25s ease}
.wdl-nav .et-menu>li>a:hover{opacity:1;color:#c24100}
.wdl-nav .et-menu>li>a{position:relative;padding-bottom:6px}
.wdl-nav .et-menu>li>a:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--wdl-orange-hoch);transform:scaleX(0);transform-origin:left;transition:transform .25s cubic-bezier(.23,1,.32,1)}
.wdl-nav .et-menu>li.current-menu-item>a{color:var(--wdl-ink)}
/* Unterstrichen ist der Punkt der aufgerufenen Seite, bei einer Unterseite
   (Shop, Wartung …) ihr Hauptpunkt. */
.wdl-nav .et-menu>li.current-menu-item>a:after,.wdl-nav .et-menu>li.current-menu-ancestor>a:after{transform:scaleX(1)}
/* Punkte mit Untermenue: Divi setzt dort sein Pfeilzeichen (oben, mit 20 px
   Platz rechts); die Linie unten gilt auch fuer sie. */
.wdl-nav .et-menu>li.menu-item-has-children>a{padding-right:0}
.wdl-nav .et-menu>li.menu-item-has-children>a:after{content:"";top:auto;bottom:0;font-size:0;line-height:0}
/* Aufklappfeld: Farben und Linie stehen am Menuemodul (menuDropdown); die
   Schriftgroesse dort gibt Divi 5.13.1 nicht aus (gemessen 24.09.2026). */
.wdl-nav .nav li ul.sub-menu a{font-size:16px}

/* Pfeil als Maske in der Schriftfarbe. Raleway fuehrt kein Pfeilzeichen; die
   Ersatzschrift setzte "→" zu hoch und zu duenn (23.09.2026). */
:root{--wdl-pfeil:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E")}

/* Fusszeile: acht Gruppen der bestehenden Website in zwei Reihen zu vier. */
.wdl-composed .wdl-fuss-gruppen{display:grid;grid-template-columns:repeat(4,1fr);column-gap:32px}
.wdl-composed .wdl-fuss-gruppen>.et_pb_column{width:auto;margin:0}
.wdl-fuss-liste ul{margin:0;padding:0;list-style:none}
.wdl-fuss-liste li{position:relative;padding-left:24px;margin:0 0 10px}
.wdl-fuss-liste li:before{content:"";position:absolute;left:0;top:.35em;width:14px;height:14px;background:var(--wdl-orange-hoch);-webkit-mask:var(--wdl-pfeil) no-repeat center/contain;mask:var(--wdl-pfeil) no-repeat center/contain}
.wdl-fuss a{transition:color .2s cubic-bezier(.23,1,.32,1)}
.wdl-fuss a:hover,.wdl-fuss a:focus-visible{color:#fff!important}
.wdl-fuss a:focus-visible{outline:2px solid var(--wdl-orange-hoch);outline-offset:2px}
.wdl-composed .wdl-fuss-unten{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.wdl-composed .wdl-fuss-unten>.et_pb_column{width:auto;margin:0}
.wdl-fuss-hand p{font-family:Caveat,"Segoe Script",cursive}

/* Bewegung */
@keyframes wdl-fade-down{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}
@keyframes wdl-fade{from{opacity:0}to{opacity:1}}
.wdl-logo,.wdl-kopf-col .wdl-btn-kopf{opacity:0;animation:wdl-fade-down .72s cubic-bezier(.2,.75,.25,1) forwards}
/* Die Navigation faellt nur ein, sie faehrt nicht. Ein transform am Modul —
   auch der Endwert none — macht es zum Bezugsrahmen fuer alles Absolute
   darin; die Klappliste war dadurch 44 px schmal statt so breit wie der Kopf. */
.wdl-nav{opacity:0;animation:wdl-fade .72s .12s ease forwards}
.wdl-kopf-col .wdl-btn-kopf{animation-delay:.2s}

/* Handy-Menue: Divis Klappliste, in der Typografie des Entwurfs.
   Der Praefix body #page-container holt die Spezifitaet ein, mit der Divi
   seine eigenen Menuefarben schreibt — sein Seiten-CSS laedt spaeter als
   diese Datei (V2-71). */
.wdl-nav .et_mobile_nav_menu{margin:0;float:none;display:none;align-items:center}
/* Die Klappliste soll unter der ganzen Kopfzeile liegen, nicht unter dem
   44 px schmalen Schalter. Dafuer wird der Schalter zum statischen Kasten;
   Bezugsrahmen ist dann .wdl-kopf. */
body #page-container .et_pb_section .wdl-nav,
.wdl-nav .et_pb_menu_inner_container,.wdl-nav .et_pb_menu__wrap,
.wdl-nav .et_mobile_nav_menu,.wdl-nav .mobile_nav{position:static;background:none}
body #page-container .wdl-nav .mobile_menu_bar{display:flex;align-items:center;justify-content:center;width:44px;height:44px}
body #page-container .wdl-nav .mobile_menu_bar:before{color:var(--wdl-ink);font-size:28px;line-height:1;top:0}
/* Die Liste laeuft ueber die ganze Breite. Bezugsrahmen ist die Reihe:
   die Spalte wird dafuer statisch gestellt. */
.wdl-composed .et_pb_column.wdl-kopf-col{position:static}
body #page-container .wdl-nav .et_mobile_menu{position:absolute;left:0;right:0;width:auto;top:100%;background:var(--wdl-paper);border-top:3px solid var(--wdl-ink);padding:0;box-shadow:0 26px 60px rgba(17,20,17,.18)}
body #page-container .wdl-nav .et_mobile_menu li a{font-size:22px;font-weight:900;letter-spacing:-.03em;line-height:1.1;color:var(--wdl-ink);padding:20px var(--wdl-pad);border-bottom:1px solid var(--wdl-line)}
body #page-container .wdl-nav .et_mobile_menu li:last-child a{border-bottom:0}

/* Divi schaltet sein Handy-Menue schon ab 980 px ein. Der Entwurf wechselt
   erst bei 760 px, also bleibt die Leiste bis dahin stehen. */
@media(max-width:980px){
  .wdl-nav .et_pb_menu__menu{display:flex}
}
/* Sechs Menuepunkte in Grossbuchstaben brauchen 678 px. In voller Groesse
   passen sie erst ab 1380 px neben Logo und Schaltflaeche. Dazwischen ruecken
   Logo und Abstaende zusammen, unter 1200 px steht das Klappmenue. */
@media(min-width:1201px) and (max-width:1379px){
  .wdl-composed .et_pb_column.wdl-kopf-col{column-gap:24px}
  .wdl-composed .wdl-kopf-col .wdl-logo img{width:260px}
  .wdl-nav .et-menu{gap:16px}
}
@media(max-width:1200px){
  .wdl-composed .et_pb_column.wdl-kopf-col{grid-template-columns:1fr auto auto;column-gap:24px}
  .wdl-nav .et_pb_menu__menu{display:none!important}
  .wdl-nav .et_mobile_nav_menu{display:flex}
  .wdl-composed .wdl-kopf-col .wdl-logo{justify-self:start}
  .wdl-composed .wdl-kopf-col .wdl-logo img{width:260px!important;max-width:100%}
}
@media(max-width:760px){
  .wdl-composed .et_pb_column.wdl-kopf-col{grid-template-columns:1fr auto auto;grid-template-rows:auto;column-gap:12px;min-height:64px}
  .wdl-composed .wdl-kopf-col .wdl-logo{grid-area:auto;align-self:center}
  .wdl-composed .wdl-kopf-col .wdl-kopf-zeile{display:none}
  .wdl-composed .wdl-kopf-col .wdl-nav,.wdl-composed .wdl-kopf-col .et_pb_button_module_wrapper{grid-area:auto}
  .wdl-nav .et_pb_menu__menu{display:none}
  .wdl-nav .et_mobile_nav_menu{display:flex}
  .wdl-logo img{width:170px}
  body #page-container .et_pb_section a.et_pb_button.wdl-btn-kopf{padding:10px 12px;font-size:16px;white-space:nowrap}
  body #page-container .et_pb_section a.et_pb_button.wdl-btn-kopf:after{display:none!important}
  .wdl-composed .wdl-kopf-col .wdl-logo img{width:170px!important}
}
/* Schmale Handys: Schaltflaeche und Abstand kleiner, damit das Logo Platz bekommt. */
@media(max-width:480px){
  .wdl-composed .et_pb_column.wdl-kopf-col{column-gap:8px}
  body #page-container .et_pb_section a.et_pb_button.wdl-btn-kopf{padding:9px 10px;font-size:14px}
}
@media(max-width:980px){
  .wdl-composed .wdl-fuss-gruppen{grid-template-columns:repeat(2,1fr)}
  .wdl-composed .wdl-fuss-gruppen>.et_pb_column:nth-child(n+3){margin-top:48px}
  .wdl-composed .wdl-fuss-gruppen+.wdl-fuss-gruppen{padding-top:48px!important}
}
@media(max-width:560px){
  .wdl-composed .wdl-fuss-gruppen{display:block}
  .wdl-composed .wdl-fuss-gruppen>.et_pb_column+.et_pb_column,.wdl-composed .wdl-fuss-gruppen>.et_pb_column:nth-child(n+3){margin-top:40px}
  .wdl-composed .wdl-fuss-gruppen+.wdl-fuss-gruppen{padding-top:40px!important}
}

@media(prefers-reduced-motion:reduce){
  .wdl-kopf *,.wdl-fuss *{animation:none!important;transition:none!important}
  .wdl-logo,.wdl-nav,.wdl-kopf-col .wdl-btn-kopf{opacity:1;transform:none}
}

/* Winkel des Lichtstreifens um die Paketkarten (Seiten-CSS von 334). */
@property --wdl-lauf{syntax:"<angle>";inherits:false;initial-value:0deg}

/* ---------- Projektseiten (/project/<slug>/) ------------------------------
   Die Projekte stehen im Standardeditor und tragen kein Seiten-CSS; ihr
   Body-Layout (bau/projekt-vorlage.mjs) braucht die Regeln der Unterseiten,
   die Divi nicht als Wert fuehrt. */
body.single-project{--wdl-aus:cubic-bezier(.23,1,.32,1)}
.single-project .et-l--body{counter-reset:wdl-abschnitt}
.single-project .wdl-c-eyebrow span{counter-increment:wdl-abschnitt}
.single-project .wdl-c-eyebrow span:before{content:counter(wdl-abschnitt,decimal-leading-zero)}
.single-project .wdl-c-eyebrow p{display:flex;align-items:center;gap:0}
.single-project .wdl-c-eyebrow span:after{content:"";display:inline-block;width:24px;height:1px;background:var(--wdl-orange-hoch);vertical-align:middle;margin:0 14px}
.single-project .wdl-composed a.et_pb_button:after{transition:translate .25s var(--wdl-aus)}
@media(hover:hover) and (pointer:fine){.single-project .wdl-composed a.et_pb_button:hover:after{translate:6px 0}}
.wdl-p-punkt p{position:relative;padding-left:26px}
.wdl-p-punkt p:before{content:"";position:absolute;left:0;top:.3em;width:15px;height:15px;background:var(--wdl-orange-hoch);-webkit-mask:var(--wdl-pfeil) no-repeat center/contain;mask:var(--wdl-pfeil) no-repeat center/contain}
.wdl-p-sterne p{display:flex;align-items:center;gap:12px}
.wdl-p-sterne .wdl-c-sterne{display:inline-block;width:110px;height:20px;background:var(--wdl-orange-hoch);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 20'%3E%3Cpath d='M11 1l2.9 6 6.6.8-4.9 4.5 1.3 6.5L11 15.6l-5.9 3.2 1.3-6.5L1.5 7.8l6.6-.8z'/%3E%3C/svg%3E") repeat-x left center/22px 20px;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 20'%3E%3Cpath d='M11 1l2.9 6 6.6.8-4.9 4.5 1.3 6.5L11 15.6l-5.9 3.2 1.3-6.5L1.5 7.8l6.6-.8z'/%3E%3C/svg%3E") repeat-x left center/22px 20px}
/* Leere Felder blenden ihren Block aus: ohne Kunde kein Label, ohne
   Bewertung keine Karte, ohne Beschreibung kein Abschnitt, ohne Link kein Knopf. */
.wdl-p-feld:not(:has(.wdl-p-wert .et_pb_text_inner)),.wdl-p-wert:not(:has(.et_pb_text_inner)){display:none}
.wdl-p-karte .wdl-p-feld+.wdl-p-feld{margin-top:28px}
.wdl-p-bewertung:not(:has(.wdl-p-bew-name .et_pb_text_inner)){display:none}
.wdl-p-beschreibung:not(:has(.wdl-p-inhalt :is(p,ul,ol,h2,h3))){display:none}
.et_pb_button_module_wrapper:has(a.wdl-p-knopf:not([href]),a.wdl-p-knopf[href=""]){display:none}
.wdl-p-inhalt h2{font-size:clamp(24px,2.2vw,32px);line-height:1.2;font-weight:700;color:var(--wdl-ink);margin:40px 0 16px}
.wdl-p-inhalt h2:first-child{margin-top:0}
.wdl-p-inhalt p{margin:0 0 1em}
.wdl-p-inhalt ul{padding-left:1.2em;margin:0 0 1em}
.wdl-p-inhalt li{margin-bottom:6px}
.wdl-p-inhalt li ul{margin:6px 0 0}
.single-project .wdl-c-formular .et_contact_bottom_container{align-items:center}
.single-project .wdl-composed .wdl-c-formular .et_pb_contact_field input:focus,.single-project .wdl-composed .wdl-c-formular .et_pb_contact_field textarea:focus{border-color:var(--wdl-orange-hoch)!important;outline:0}
.single-project .wdl-composed .wdl-c-formular .et_pb_contact_right .et_pb_contact_captcha{padding-top:10px!important;padding-bottom:10px!important;line-height:1.7em!important}

/* ---------- Referenzkarten (Seite 419 und globale Sektion Referenzen) -------
   Wie auf webdesignland.at: der orange Kreis sitzt in einer ausgesparten Ecke
   mit gerundeten Uebergaengen (Maske in der Farbe des Abschnitts). Beim Zeigen
   waechst der Kreis und dreht sich, die Ecke waechst mit. */
.wdl-r-bildrahmen:after{content:"";position:absolute;right:-1px;bottom:-1px;width:81px;height:86px;z-index:1;pointer-events:none;background:var(--gcid-wdl-nebel,#f4f4f2);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 81 86'%3E%3Cpath d='M81 0Q81 23 64 25A37 37 0 0 0 20 69Q18 86 0 86H81Z'/%3E%3C/svg%3E") no-repeat center/contain;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 81 86'%3E%3Cpath d='M81 0Q81 23 64 25A37 37 0 0 0 20 69Q18 86 0 86H81Z'/%3E%3C/svg%3E") no-repeat center/contain;transition:transform .3s ease-in-out}
.wdl-r-pfeil{transition:transform .35s ease-in-out}
@media(hover:hover) and (pointer:fine){
  .wdl-r-karte:hover .wdl-r-pfeil{transform:scale(1.2) rotate(-30deg)}
  .wdl-r-karte:hover .wdl-r-bildrahmen:after{transform:scale(1.2) translate(-5px,-5px)}
}