/* ============================================================
   Hemmler GmbH — Entwurf 2, ausdrücklich beauftragte Abweichungen
   ============================================================
   Diese Datei ist die einzige Stelle im Entwurf, an der eine eigene
   CSS-Regel steht. Sie existiert nur für Wünsche, die die Vorlage
   nachweislich nicht hergibt und die Max ausdrücklich beauftragt hat.

   Jeder Eintrag nennt Auftrag, Fundstelle und warum der Vorlagenweg
   nicht trägt. Ohne diese drei Angaben gehört hier nichts hinein.

   `tokens.css` bleibt davon unberührt und setzt weiterhin
   ausschließlich Variablen. `pruefung-tokens.py` misst beide Dateien
   getrennt.
   ============================================================ */

/* Auftrag: Vorlagen-Review vom 04.09.2026, Anweisung 5 —
   "das möchte ich für die rezensionen haben aber die punkte möchte ich
   linksbündig haben".

   Warum nicht über die Vorlage: Das Chassis setzt `.owl-dots { text-align:
   center }` (style.css:8340). Die Punkte erzeugt owl.carousel per JavaScript,
   deshalb lässt sich keine Utility-Klasse ins Markup schreiben, und eine
   geerbte Ausrichtung greift nicht, weil das Element selbst einen Wert trägt.
   Eine linksbündige Variante gibt es in keiner der zwanzig Vorlagenseiten. */
#rezensionen .owl-dots {
  text-align: left;
}

/* Auftrag: Entwurfs-Review vom 04.09.2026, Anweisung 3 — "hier überschrift von
   entwurf 1 reinmachen", und Anweisung 17 — "bild bitte fast volle höhe machen
   bzw container aber einfach dass man mehr vom hintergrund sieht".

   Herkunft: beides steht so in Entwurf 1 (`entwurf/design-system/tokens.css`)
   und wird von dort übernommen, nicht neu erfunden. Die Vorlage hat für die
   zweizeilige Bühnenzeile kein Muster: ihre H1 ist eine Zeile, deutsche
   Versalien in zwei Zeilen brauchen eine Größe, die an der Breite hängt,
   damit keine der beiden umbricht. Gemessen an "ROLLLADEN & SONNENSCHUTZ". */
.buehne-titel { display: block; }
.buehne-titel .buehne-zeile { display: block; }
.buehne-titel .text-lg-end { text-align: left; }

@media (min-width: 992px) {
  .buehne-titel .buehne-zeile {
    font-size: clamp(44px, calc((100vw - 68px) / 14.2), 96px);
    white-space: nowrap;
  }
  .buehne-titel .text-lg-end { text-align: right; }
}

/* Anweisung 17: Die Bühne des Chassis ist auf 800px gedeckelt (`mh-800`).
   Volle Fensterhöhe zeigt mehr vom Bild. */
#section-intro .mh-800 { min-height: 100vh; }

/* Auftrag: Anweisung 2 — "bitte hier noch die animation aus entwurf eins
   reinmachen". Das Fenster-Signet der Wortmarke als Linienzeichnung, die sich
   beim Laden aufbaut. Markup und Regeln aus Entwurf 1 übernommen. */
.signet-buehne {
  position: absolute;
  right: 26px;
  /* Anweisung 1 vom 05.09.2026: "Animation mittig machen also rechts in
     der mitte". */
  top: 50%;
  transform: translateY(-50%);
  width: 25vw;
  max-width: 430px;
  height: auto;
  aspect-ratio: 900 / 787;
  z-index: 2;
  opacity: .58;
  pointer-events: none;
}

.signet-buehne .signet-linie {
  fill: none;
  stroke: #ffffff;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: signet-zeichnen 1.15s cubic-bezier(.36, .06, .22, 1) forwards;
}

.signet-buehne .signet-flaeche {
  fill: var(--primary-color);
  stroke: none;
  opacity: 0;
  animation: signet-fuellen 1.1s cubic-bezier(.22, .78, .3, 1) forwards;
}

@keyframes signet-zeichnen { to { stroke-dashoffset: 0; } }
@keyframes signet-fuellen  { to { opacity: .82; } }

@media (prefers-reduced-motion: reduce) {
  .signet-buehne .signet-linie { stroke-dashoffset: 0; animation: none; }
  .signet-buehne .signet-flaeche { opacity: .82; animation: none; }
}

/* Auftrag: Anweisung 8 — "die dinger sind vertikal nicht zentriert genug".
   Die Pfeile der Karussell-Navigation. Das Chassis gibt dem Pseudoelement
   40px Höhe und 20px Schrift, aber keine line-height (style.css:6739ff),
   deshalb sitzt das Zeichen zu hoch. Über Variablen nicht erreichbar. */
.de-custom-nav .d-prev:before,
.de-custom-nav .d-next:before {
  padding: 0;
  line-height: 40px;
}

/* ------------------------------------------------------------
   Entwurfs-Review vom 04.09.2026, Block Mobil.
   Die Vorlage hat für diese Feinmaße keine Utility-Klassen; alle
   Regeln greifen nur unterhalb der jeweiligen Bruchstelle.
   ------------------------------------------------------------ */

/* Anweisung 19 — "hier ist bei mobile zwischen den spalten noch ein
   zwischenabstand". Die beiden Fragenspalten stapeln bei mobile und erben
   dabei den Zeilenabstand von `g-4`. */
@media (max-width: 991px) {
  #fragen .row.g-4 > [class*="col-lg-6"] + [class*="col-lg-6"] {
    margin-top: 0;
    padding-top: 0;
  }
}

/* Anweisung 20 — "das bild auch noch größer machen bei mobile". Das
   Vollbreite-Bild ist 1920x800; bei 390px Breite bleiben davon 162px Höhe. */
@media (max-width: 767px) {
  .bild-vollbreite img {
    height: 300px;
    object-fit: cover;
  }
}

/* Anweisung 21 — "der button hier ist viel zu groß". Der Abspielknopf des
   Videos misst bei mobile 154px. */
@media (max-width: 767px) {
  .player {
    width: 72px;
    height: 72px;
    font-size: 18px;
  }
}

/* Anweisung 23 — "das ist für mobile noch zu groß". Die Überschrift im
   Fußbereich steht bei mobile auf 36px. */
@media (max-width: 767px) {
  footer h2 { font-size: 26px; line-height: 1.15; }
}

/* ------------------------------------------------------------
   Entwurfs-Review vom 05.09.2026
   ------------------------------------------------------------ */

/* Anweisung 5 — "text ist für mobile zu groß" und "animation ist zu klein
   könnte ruhig etwas größer sein und unten rechts über text bitte machen". */
@media (max-width: 991px) {
  .buehne-titel .buehne-zeile { font-size: clamp(28px, 7.4vw, 44px); }
  .signet-buehne {
    top: auto;
    /* über der Überschrift, aber ohne in sie hineinzulaufen */
    bottom: 30%;
    right: 14px;
    transform: none;
    width: 46vw;
    max-width: 260px;
  }
}

/* Anweisung 7 — "weniger beispiele aber dafür größere bilder so 50vh bei
   mobile", und Anweisung 3 — "die bilder noch höher machen". */
@media (max-width: 767px) {
  #projects-carousel .item img.w-100,
  #services-carousel .item img.w-100 {
    height: 50vh;
    object-fit: cover;
  }
}
@media (min-width: 768px) {
  /* Lauf v5, Anweisung 9 — "die bilder sogar noch ein bisschen groesser".
     Vorher 420px aus Lauf v4. */
  #projects-carousel .item img.w-100 { height: 520px; object-fit: cover; }
}

/* Anweisung 8 — "bitte linsbündig machen und zwischen denen eine günne
   helle linie". Die Schritte stehen im Chassis zentriert (style.css:9582)
   und tragen bei mobile einen Pfeil als Trenner, der dort nicht passt. */
#ablauf .de-step { text-align: left; }
#ablauf .de-step + .de-step { border-left: solid 1px rgba(255, 255, 255, .18); }
@media (max-width: 767px) {
  /* Lauf v5, Anweisung 3 — "hier ist links eine linie zu viel", markiert am
     Schritt "Montage". Bei mobile stehen die Schritte zweispaltig; die Linie
     trennt dort die beiden Spalten, gehoert also nur an den rechten Schritt
     einer Reihe. Der bisherige Nuller auf `#ablauf .de-step` (1,1,0) kam
     gegen `#ablauf .de-step + .de-step` (1,2,0) nicht an, weil eine
     Media-Query keine Spezifitaet hinzufuegt. */
  #ablauf .row > .de-step:nth-child(odd) { border-left: 0; }
  #ablauf .de-step + .de-step { border-top: solid 1px rgba(255, 255, 255, .18); }
  #ablauf .row > .de-step:nth-child(2) { border-top: 0; }
}
/* Die Regel `#ablauf .de-step-arrow::after { display: none }` ist mit Lauf v5,
   Anweisung 7 ("bitte die pfeile unbedingt rausmachen") entfallen. Die Klasse
   `de-step-arrow` steht seither nicht mehr im Markup, damit ist der Pfeil auf
   allen Breiten weg und nicht nur unter 768px. */

/* Anweisung 9 — "button ist komplett verkackt und video kann auch so 50vh
   einnehmen". Der Abspielknopf des Chassis ist ein dunkler Kreis auf
   hellem Standbild und geht darin unter. Gelb mit dunklem Zeichen ist die
   Hausregel und hebt ihn heraus. */
.player {
  background: var(--primary-color) !important;
  color: var(--btn-color);
}
@media (max-width: 767px) {
  .popup-youtube img.w-100 { height: 50vh; object-fit: cover; }
}

/* Anweisung 10 — "mit besseren feldern anpassen". Das Chassis gibt den
   Feldern eine Umrandung in rgba(0,0,0,.05); auf dem hellen Grund des
   Entwurfs ist das Formular dadurch ein leerer Kasten. */
#contact_form .form-control {
  background: var(--bg-light);
  border: solid 1px var(--border-color);
  border-radius: 0;
}
#contact_form .form-control:focus {
  border-color: var(--accent-ink, #1c1e21);
  outline: solid 2px rgba(var(--primary-color-rgb), .45);
  outline-offset: 0;
}

/* ------------------------------------------------------------
   Entwurfs-Review vom 05.09.2026, Lauf v5
   ------------------------------------------------------------ */

/* Anweisung 1 — "bitte unten rechts einbauen damt man mit dem daumen besser
   rankommt also unter den bilder aber nur auf mobile", markiert an der
   Karussell-Navigation in Sortiment und Referenzen.

   Warum nicht ueber die Vorlage: Alle zwoelf Fundstellen von `de-custom-nav`
   in der Intrio-Vorlage (index.html, index-2/3/4.html, about.html,
   project-single.html) setzen die Navigation in die Kopfspalte ueber das
   Karussell. Eine Fassung unter dem Karussell gibt es dort nicht, und
   umhaengen laesst sich das Element nicht, weil Kopf und Karussell im
   Sortiment in zwei getrennten Containern liegen. Deshalb bleibt das Markup
   unangetastet und die Navigation wird bei mobile an den unteren Rand der
   Sektion gesetzt, also unter die Bilder. */
@media (max-width: 767px) {
  #sortiment,
  #referenzen { position: relative; padding-bottom: 84px; }

  #sortiment .col-lg-4 > .relative,
  #referenzen .col-lg-4 > .relative { position: static; }

  #sortiment .col-lg-4 .spacer-20,
  #referenzen .col-lg-4 .spacer-20 { display: none; }

  #sortiment .de-custom-nav,
  #referenzen .de-custom-nav {
    position: absolute;
    right: 20px;
    bottom: 24px;
  }
}

/* Anweisung 2 — "bild bitte 100vh hoch machen", markiert am Overlay der
   Rezensionssektion bei 390px. Die Sektion war dort 518px hoch, das Bild
   dahinter also nur ein Streifen. Dieselbe Loesung wie bei der Buehne
   (`#section-intro .mh-800`), nur fuer mobile.

   Ohne `display: flex`, obwohl die Rezension damit mittig im Bild staende:
   Die Sektion traegt das owl-Karussell der Bewertungen, und owl legt bei
   `loop: true` Klone an, von denen zwei auf derselben x-Position liegen.
   Im Blockfluss liegen sie ausserhalb des sichtbaren Ausschnitts der Buehne
   des Karussells, im Flexkontext rutschen sie hinein, und
   `pruefung-breiten.py` meldet bei 375px eine Textueberlappung. Die
   Doppelposition ist Verhalten des Chassis und wird hier nicht repariert. */
@media (max-width: 767px) {
  #rezensionen {
    min-height: 100vh;
  }
}

/* ------------------------------------------------------------
   Entwurfs-Review vom 06.09.2026, Lauf mobile-letzte-aenderung
   ------------------------------------------------------------ */

/* Anweisung 1, erster und zweiter und vierter Teil — "mache die striche
   duenner", "mach da eine animation hinzu" und "die animation die wir im menue
   noch oben haben machst auch bei mobile menue". Markiert am `#menu-btn`
   bei 390px.

   Vorgefunden: Der mobile Menueknopf ist ein FontAwesome-Zeichen
   (`#menu-btn:before { content: "\f0c9" }`, style.css:883), also drei fette
   Balken ohne jede Bewegung; im geoeffneten Zustand wird daraus ein Minus
   (`\f068`). Oben im Kopf sitzt dagegen `#btn-extra` (style.css:894ff): zwei
   Linien aus `border-bottom: solid 2px`, die bei Hover auf 70 Prozent
   einlaufen, die obere von rechts, die untere von links. Das ist die
   Animation, die gemeint ist.

   Warum eine eigene Regel: Die Vorlage kennt genau diese beiden Knoepfe, und
   `#btn-extra` haengt am eigenen Bezeichner. Uebernehmen liesse er sich nur,
   indem der Menueknopf seine ID bekommt, dann greift aber die Menuemechanik
   in `designesia.js` nicht mehr. Die Werte unten sind deshalb die des
   Chassis, nur auf `#menu-btn` uebertragen: 2px Linie, 24px Breite, 70
   Prozent im Hover, dieselbe Uebergangszeit. Der Kasten bleibt 32x32, damit
   die Trefferflaeche fuer den Daumen nicht schrumpft.

   Die Bruchstelle ist 992px und nicht 767px: Das Chassis zeigt den
   Menueknopf bis einschliesslich 992px (style.css:9702), bei 767px waere
   zwischen Handy und Notebook wieder der fette Balken zu sehen. */
@media (max-width: 992px) {
  #menu-btn { position: relative; }

  #menu-btn:before,
  #menu-btn:after {
    content: "";
    display: block;
    position: absolute;
    left: 4px;
    right: 4px;
    height: 0;
    border-bottom: solid 2px #ffffff;
    transition: .5s;
  }
  #menu-btn:before { top: 10px; }
  #menu-btn:after  { top: 20px; }

  /* Wie `#btn-extra:hover span`: die obere Linie laeuft von rechts ein,
     die untere von links. */
  #menu-btn:hover:before { right: 30%; }
  #menu-btn:hover:after  { left: 30%; }

  /* Offener Zustand: aus den beiden Linien wird ein Kreuz. Das Chassis
     tauscht hier das Zeichen gegen ein Minus, was mit den gezeichneten
     Linien nicht mehr passt. */
  #menu-btn.menu-open:before,
  #menu-btn.menu-open:after {
    content: "";
    top: 15px;
    left: 4px;
    right: 4px;
  }
  #menu-btn.menu-open:before { transform: rotate(45deg); }
  #menu-btn.menu-open:after  { transform: rotate(-45deg); }
}

/* Anweisung 1, dritter Teil — "mache noch schnelle buttons unten auf die
   seite". Zum zweiten Mal gewuenscht; in Lauf v4 stand die Anweisung als
   `blocked`, weil offen war, wohin die Knoepfe fuehren. Angenommen sind die
   zwei Wege, die der Bestand hergibt und die auf der Seite ohnehin stehen:
   anrufen und zum Anfrageformular.

   Warum eine eigene Regel: Die Vorlage hat fuer eine feste Leiste am unteren
   Rand kein Muster. Die Knoepfe selbst sind `btn-main btn-small` und
   `btn-dark` aus dem Chassis, nur die Leiste ist eigen.

   Zwei Sackgassen davor, damit sie niemand noch einmal geht: `btn-dark-trans`
   setzt nur den Grund und behaelt `--btn-color` als Schrift, also Anthrazit
   auf Anthrazit. Und `btn-white` traegt in `coloring.css` ausdruecklich
   `color: var(--primary-color)`, was in der Vorlage mit ihrem Braun aufgeht,
   mit dem Gelb dieses Entwurfs aber Gelb auf Weiss ergibt. Deshalb helle
   Leiste, gelber Hauptknopf und anthrazitfarbener Zweitknopf. Nur unter
   768px; `#back-to-top` ist dort ohnehin ausgeblendet (style.css:9930),
   es kollidiert also nichts. */
.schnellzugriff { display: none; }

@media (max-width: 767px) {
  .schnellzugriff {
    display: flex;
    gap: 10px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1010;
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--bg-light);
    border-top: solid 1px var(--border-color);
  }
  .schnellzugriff .btn-main {
    flex: 1 1 0;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  /* Die Leiste liegt fest ueber dem Seitenende, deshalb bekommt der
     Fussbereich denselben Betrag als Luft darunter. */
  footer { padding-bottom: 76px; }
}

/* Entwurfs-Review vom 07.09.2026 — "es fehlen noch immer die inhalte die wir
   auch im desktop menue haben das mobile menue ist ausserhalb des menues noch
   leer".

   Vorgefunden: Am Notebook oeffnet das Zeichen rechts oben (`#btn-extra`) das
   Panel `#extra-wrap` mit Oeffnungszeiten, Anschrift, Mailadresse und den
   drei Kanaelen. Bei mobile ist `#btn-extra` ausgeblendet (style.css:9702ff),
   das Panel damit unerreichbar, und unter den vier Menuepunkten stehen rund
   550px leere Flaeche.

   Warum nicht ueber die Vorlage: Das Chassis fuellt sein mobiles Menue mit
   nichts als `#mainmenu`; keine der zwanzig Vorlagenseiten legt dort einen
   zweiten Block ab. Der Block haengt deshalb als letzter Punkt IN `#mainmenu`,
   damit er dem Menue folgt, wenn ein Untermenue aufklappt. Inhalt und Klassen
   (`table table-dark`, `social-icons`, `icofont-*`, `id-color`) sind die des
   Panels, nichts davon ist neu erfunden. */
/* Der Bezeichner muss auch hier mit hinein: `#mainmenu li` ist (1,0,1) und
   setzt `display: block`, eine blosse Klassenregel kaeme dagegen nicht an und
   der Block stuende am Notebook mitten im waagerechten Menue. */
#mainmenu .menue-kontakt { display: none; }

@media (max-width: 992px) {
  header.menu-open #mainmenu .menue-kontakt { display: block; }

  /* Das Chassis richtet Menuelinks mittig aus und gibt ihnen 25px Luft nach
     oben und unten (style.css:641ff). Fuer Telefon und Mailadresse in einer
     Textzeile passt beides nicht. Der Bezeichner muss mit in den Selektor,
     `#mainmenu a` ist (1,0,1) und schlaegt sonst jede Klassenregel. */
  #mainmenu .menue-kontakt a {
    display: inline;
    padding: 0;
    text-align: left;
  }
  /* Ueberschriften wie im Panel, nur kleiner: der Platz im Menue ist
     begrenzt und die Liste soll ohne Scrollen auskommen. */
  .menue-kontakt h4 {
    font-size: 15px;
    letter-spacing: 0;
    margin: 14px 0 8px;
  }

  /* Die vier Referenzen des Panels als Streifen statt als 2x2-Raster.
     Ein Raster braucht rund 200px Hoehe, der Streifen 70px; nur so bleibt
     die Liste bei 390x844 ohne Scrollen. */
  .menue-referenzen {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 4px;
  }
  #mainmenu .menue-referenzen a { display: block; padding: 0; }
  .menue-referenzen img {
    width: 100%;
    height: 58px;
    object-fit: cover;
    display: block;
  }

  .menue-kontakt .table { margin-bottom: 12px; }
  .menue-kontakt .table td { padding-top: 6px; padding-bottom: 6px; }
  .menue-kontakt .social-icons { margin-top: 10px; }
  #mainmenu .menue-kontakt .social-icons a {
    display: inline-block;
    margin-right: 18px;
    font-size: 18px;
  }

  /* Mit aufgeklapptem Untermenue wird die Liste hoeher als das Fenster, und
     der Kopf schneidet sie ab (`header.header-mobile { overflow: hidden }`,
     style.css:9933). Deshalb scrollt die Liste selbst. */
  header.menu-open #mainmenu {
    /* 90px sind der Abstand von der Fensterkante bis zum ersten Menuepunkt. */
    max-height: calc(100vh - 90px);
    overflow-y: auto;
  }
}

/* Unter 768px liegt zusaetzlich die Schnellzugriff-Leiste fest ueber dem
   unteren Rand. Ohne diese Luft bliebe der letzte Eintrag der Menueliste
   dauerhaft dahinter, auch nach dem Scrollen. */
@media (max-width: 767px) {
  header.menu-open #mainmenu { padding-bottom: 76px; }
}