/* Verbesserungen ueber der 1:1-Kopie (17.10.2026). Eingebunden von erfassung/kopie-verbessern.mjs
   als letztes Stilblatt. Je Abschnitt: was, warum, und woran gemessen. */

/* --- Lesbarkeit auf Fotos -------------------------------------------------------------------
   Deckblatt: die Fotos sind teils hell (Papier, Fassade); Logo, Menue, die Versalzeile und die
   mintgruene Ueberschrift standen darauf bei 1,5 bis 2,6 : 1. Verlauf in der Grundfarbe der Seite,
   oben dichter (Kopfzeile), unten dichter (Fliesstext), in der Mitte bleibt das Foto sichtbar. */
section.deckblatt .con-kit-organism-background1 > .con-kit-organism-background::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(180deg, rgba(11, 36, 48, .62) 0, rgba(11, 36, 48, .3) 240px, rgba(11, 36, 48, .3) 55%, rgba(11, 36, 48, .6) 100%);
}
/* Karten mit Foto hinter weisser oder mintgruener Schrift (Fusszeile "Danke fuer Ihr Interesse",
   "25+", "5+", "Bereit fuer Ihr Renovierungsprojekt"): alle tragen helle Schrift, daher ein Schleier. */
.con-kit-molecule-textBlock > .con-kit-component-bg-image::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, rgba(11, 36, 48, .42), rgba(11, 36, 48, .62));
}

/* --- Logo in der Kopfzeile -------------------------------------------------------------------
   Duenne Linien in gedecktem Tuerkis, auf Navy kaum zu lesen. Heller in derselben Farbe statt
   weiss, damit die Marke ihre Farbe behaelt. Die Fusszeile zeigt es auf weisser Karte: unveraendert. */
.kopfzeile .con-kit-component-logo__image,
.con-kit-component-burger-menu__logo .con-kit-component-logo__image { filter: brightness(1.75) saturate(1.15); }

/* --- E-Mail-Adresse im Kontaktblock ---------------------------------------------------------
   Brach als "info@mainbaudesi / gn.de" (Handy und Tablet). 371 px Text bei 32 px: die Schrift folgt
   der Breite des Textkastens (Containereinheit), hoechstens 32 px wie im Original, eine Zeile.
   Ohne Containerabfragen (aeltere Browser) greift die Handy-Naeherung ueber die Fensterbreite. */
.con-kit-component-header:has(> [data-v-mail]) { container-type: inline-size; }
@media (max-width: 768px) {
  section.kontakt .con-kit-component-header .con-kit-quark-paragraph[data-v-mail] { font-size: min(32px, calc((100vw - 96px) * .0837)) !important; }
}
section.kontakt .con-kit-component-header .con-kit-quark-paragraph[data-v-mail] { font-size: min(32px, 8.37cqw) !important; }

/* --- Silbentrennung in Ueberschriften --------------------------------------------------------
   Nur wo verhalten.js ein mitten im Wort gebrochenes Wort findet (Klasse v-trennen); die Seite
   ist lang="de", der Browser trennt nach deutschem Woerterbuch mit Strich. */
.v-trennen { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4; -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4; }

/* --- Trefferflaechen am Handy -----------------------------------------------------------------
   Apple: 44 x 44 pt. verhalten.js markiert kleinere Knoepfe und Links mit v-ziel; die Flaeche ist
   unsichtbar und aendert kein Mass der Seite. */
@media (pointer: coarse) {
  .v-ziel::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
}

/* --- Rueckmeldung beim Druecken ---------------------------------------------------------------
   Im Original zeigten 27 von 30 Bedienelementen der Startseite beim Halten nichts. Jetzt sofort:
   gefuellte Knoepfe werden um 3 % kleiner (eigene Eigenschaft scale, damit ein vorhandenes transform
   bleibt), Text-Links und Menuepunkte blassen ab wie unter iOS. Der graue Tipp-Kasten entfaellt dort,
   wo es eine eigene Rueckmeldung gibt. */
.con-kit-component-button, .con-kit-link-button, .con-kit-atom-menu-v2-item-inside, .con-kit-quark-link,
.con-kit-component-list-item-accordion__head { -webkit-tap-highlight-color: transparent; }
.con-kit-component-button--type-solid:active { scale: .97; transition: scale .1s ease-out, box-shadow .3s ease, background-color .3s ease, color .3s ease; }
.con-kit-component-button--type-transparent:active, [class*="con-kit-atom-menu-v2-item"]:active, .con-kit-quark-link:active,
.con-kit-component-list-item-accordion__head:active { opacity: .6; }

/* --- Formular ---------------------------------------------------------------------------------
   Felder am Handy mit 16 px: darunter zoomt iOS beim Antippen hinein (seit Zoomen erlaubt ist).
   Meldung nach dem Absenden unter dem Knopf (verhalten.js), Fehler mit Rand in der Fehlerfarbe. */
@media (max-width: 768px) {
  .one-kit-form-element input, .one-kit-form-element textarea, .one-kit-form-element select { font-size: 16px !important; }
}
.v-formular-meldung:empty { display: none; }
.v-formular-meldung { font-family: Manrope, system-ui, sans-serif; margin-top: 16px; padding: 12px 16px; border-left: 3px solid rgb(0, 236, 190); border-radius: 4px; background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .92); font-size: 15px; line-height: 1.5; text-align: left; }
.v-formular-meldung--fehler { border-left-color: rgb(var(--color-error, 255, 107, 107)); }
.v-formular-meldung a { color: rgb(0, 236, 190); text-decoration: underline; text-underline-offset: 3px; }

/* --- Einfahrt der Sektionen -------------------------------------------------------------------
   Gemessen am Handy (390): die Hauptzeile im Deckblatt war 0,7 s unsichtbar und erst nach 1,44 s
   ganz da, Knopf und Telefonnummer nach 1,64 s. Bewegung und Reihenfolge bleiben (40 px von unten,
   Teil fuer Teil), nur kuerzer: 0,5 s statt 1 s, Abstand 0,08 s statt 0,2 s. Die Kurve ist die kritisch
   gedaempfte Feder mit Antwort 0,4 s, in 25-ms-Schritten abgetastet (bei 500 ms auf 99,7 %); Browser
   ohne linear() nehmen ease. Den Abstand nur, wo die Sektion ihn selbst setzt (FAQ hat keinen).
   Start ohne Wartezeit: verhalten.js. */
:root { --v-feder: linear(0, .06, .186, .329, .466, .584, .682, .76, .821, .868, .903, .929, .949, .963, .973, .981, .986, .99, .993, .995, 1); }
section[data-kit-animation] { --one-kit-animation-duration: 500 !important; --one-kit-animation-timing: var(--v-feder) !important; }
section[data-kit-animation][style*="--one-kit-animation-atom-delay"] { --one-kit-animation-atom-delay: .08 !important; }

/* --- Kopfzeile am Handy beim Rollen -----------------------------------------------------------
   Fest stand sie 183 px hoch (ein Fuenftel von 844 px), weil das Logo eine 3:2-Flaeche von 250 x 167 px
   ist, deren Bild nur 29 px hoch in der Mitte sitzt. Sobald sie fest wird (verhalten.js setzt
   v-kopf-klein), schrumpft die Flaeche auf die 56 px des Burger-Knopfs, mittig beschnitten wie bisher
   (object-fit cover): Leiste 72 px, 111 px mehr Inhalt. Oben auf der Seite bleibt sie, wie sie war. */
.kopfzeile .con-kit-molecule-header-v2-mobile-view__logo .con-kit-fade-box { height: var(--v-logo-h, 100%); transition: height .5s var(--v-feder); }
.kopfzeile.v-kopf-klein .con-kit-molecule-header-v2-mobile-view__logo .con-kit-fade-box { height: 56px; }
@media (prefers-reduced-motion: reduce) { .kopfzeile .con-kit-molecule-header-v2-mobile-view__logo .con-kit-fade-box { transition: none; } }

/* --- Fusszeile am Tablet ----------------------------------------------------------------------
   Die Zeile mit Menue und Kontakt ragt per margin -40 px ueber ihren Rahmen hinaus. Bei 768 px
   (iPad mini hochkant), 800 px und 992 px ist daneben weniger Platz: Text stand bis zu 16 px
   ausserhalb des Bildes, links wie rechts ("Menue" als "enue"; gemessen 17.10.2026, im Original
   genauso). Die Zeile haelt jetzt mindestens die 24 px Seitenrand, die jede andere Sektion hat; wo
   genug Platz ist, bleibt es bei -40 px. 100% ist hier die Breite des Rahmens. (\0000df ist das
   scharfe s im Klassennamen, damit die Datei ASCII bleibt.) */
@media (min-width: 768px) and (max-width: 992px) {
  section.fu\0000dfzeile .con-kit-layout { margin-left: max(-40px, calc((100% - 100vw) / 2 + 24px)); margin-right: max(-40px, calc((100% - 100vw) / 2 + 24px)); }
}

/* --- Zeitstrahl am Handy (1:1-Fehler der Kopie) ---------------------------------------------------
   Onepage begrenzt die Zahlkaesten des Zeitstrahls bei Geraet "mobil" (bis 768 px und genau 992 px,
   main.bundle getMedia) auf 40 px (commons.bundle TIMELINE_ICON_SIZE_MAX, getIconSize). Die Kopie trug
   die 56 px vom Desktop: Kaesten und Ziffern groesser, Text 16 px schmaler, Ueberschriften eine Zeile
   laenger (b2c, b2b, leistungen; gemessen 07.11.2026 bei 390 px). */
@media (max-width: 768px), (width: 992px) {
  .con-kit-component-grid-timeline, .con-kit-component-grid-timeline [style*="--media-item--size"] { --media-item--size: 40px !important; }
}

/* --- Bilder unter dem Wellentrenner -----------------------------------------------------------------
   Verbessert: Atome mit "volle Groesse" (Laufband der Startseite, b2b) reichten oben bis an den Rand
   ihrer Sektion, und die liegt um die Ueberlappung des Trenners (--section-gap-top, Start 215 px) unter
   dem Deckblatt: von 344 px hohen Fotos waren nur die unteren 129 px zu sehen, Koepfe abgeschnitten, im
   Original genauso. Jetzt endet der Ueberstand an der Unterkante des Deckblatts. Ohne Trenner davor ist
   --section-gap-top 0, dort aendert sich nichts. */
.con-kit-organism:not(.con-kit-modal) .con-kit-container--style-transparent { --base-top: calc(var(--layout-padding-top) - var(--section-gap-top, 0px)); }