/* 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)); }
}