/* immobilien-schier.de – Maße an der bisherigen Seite gemessen (2026-10-13), Code neu geschrieben. */
@font-face { font-family: Montserrat; font-weight: 300; font-display: swap; src: url(../fonts/montserrat-300-normal.woff2) format("woff2"); }
@font-face { font-family: Montserrat; font-weight: 300; font-style: italic; font-display: swap; src: url(../fonts/montserrat-300-italic.woff2) format("woff2"); }
@font-face { font-family: Montserrat; font-weight: 400; font-display: swap; src: url(../fonts/montserrat-400-normal.woff2) format("woff2"); }
@font-face { font-family: Montserrat; font-weight: 500; font-display: swap; src: url(../fonts/montserrat-500-normal.woff2) format("woff2"); }
@font-face { font-family: Montserrat; font-weight: 700; font-display: swap; src: url(../fonts/montserrat-700-normal.woff2) format("woff2"); }
@font-face { font-family: Montserrat; font-weight: 800; font-display: swap; src: url(../fonts/montserrat-800-normal.woff2) format("woff2"); }

:root {
  --gruen: #8dc045;
  --blau: #0771b8;
  --dunkel: #1c222b;
  --grau: #eee;
  --link: #0f2676;
  --rand: max(10px, calc((100% - 1058px) / 2));
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font: 300 16px/1.5 Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #000; background: var(--dunkel); }
h1, h2, h3, p, ul, figure, blockquote, fieldset { margin: 0; padding: 0; }
h1, h2, h3 { font-weight: 700; line-height: 1.2; }
h1 { font-size: 41.6px; }
h2 { font-size: 32px; }
h3 { font-size: 17.6px; }
p { margin-bottom: 14.4px; }
strong { font-weight: 700; }
a { color: var(--link); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
img { max-width: 100%; height: auto; }
.zeichen { width: 1em; height: 1em; fill: currentColor; vertical-align: -.125em; }
.sprung { position: absolute; left: -999px; }
.sprung:focus { left: 10px; top: 10px; z-index: 5; padding: 8px; background: #fff; }

.kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 0 var(--rand) 29px; border-top: 1px solid #cfcfcf; background: #fff; }
.marke { width: 27.9%; }
.marke img { display: block; margin-top: 19px; }
.anruf { display: none; }
.erreichbar .zeichen:last-of-type { width: .8em; }
.erreichbar { margin: 38px 2px 0 0; font-size: 19.2px; text-align: right; }

.navigation { padding: 0 max(10px, calc((100% - 1121px) / 2)); background: var(--gruen); }
.navigation ul { display: flex; justify-content: flex-end; list-style: none; }
.navigation li { margin: 8px 4px 8px 0; }
.navigation a { display: block; padding: 8px; border-radius: 3.84px; font-size: 19.2px; font-weight: 500; line-height: 1; color: #fff; }
.navigation a[aria-current] { color: var(--blau); }
.menue { display: none; }

main { background: #fff; }
main > section { padding-inline: var(--rand); }

.haken { list-style: none; padding-left: 25px; }
.haken li { position: relative; }
.haken li::before { content: ""; position: absolute; left: -24px; top: 5px; width: 13px; height: 7px; border: solid #4caf50; border-width: 0 0 3px 3px; rotate: -45deg; }

.knopf { display: inline-block; padding: 15px; border: 1px solid #fff; border-radius: 3.2px; background: linear-gradient(#fc9b2c, #e6881b); font: 800 16px/1.25 Montserrat, sans-serif; color: #fff; cursor: pointer; }
.knopf:hover, .knopf:focus-visible { background: #e6881b; text-decoration: none; }
.knopf.gruen { background: linear-gradient(#80c027, #6ea621); }
.knopf.gruen:hover, .knopf.gruen:focus-visible { background: #6ea621; }
.knopf .zeichen { margin-right: 8px; }

.einstieg { display: grid; grid-template-columns: minmax(0, 508fr) minmax(0, 519fr); gap: 42px; padding-right: max(10px, calc(var(--rand) - 11px)); overflow: hidden; background: linear-gradient(#ffffff6b, #ffffff6b), url(../img/hintergrund-fensterfront.jpg) center top / cover; }
.einstieg-text { padding-top: 126px; }
.einstieg .haken { margin: 19px 0 31px; }
.einstieg-text p { margin: 16px 0 0; }
.einstieg img { width: 100%; height: 605px; margin: 31px 0 -35px; object-fit: none; object-position: left top; }

.leistungen { display: grid; grid-template-columns: 1fr 1fr; column-gap: 42px; padding-block: 50px 62px; background: var(--blau); color: #fff; }
.leistungen h2 { grid-column: 1 / -1; margin-bottom: .3em; text-align: center; }

.staerken { padding-block: 44px 84px; background: var(--gruen); color: #fff; text-align: center; }
.staerken ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px 42px; list-style: none; }
.staerken li { width: calc((100% - 84px) / 3); }
.staerken .zeichen { width: 72px; height: 56px; margin: 6px 0 8px; }
.staerken h3 { margin-bottom: 14.08px; }

.referenzen { padding-block: 50px 87px; background: var(--grau); text-align: center; }
.referenzen h2 { margin-bottom: 23px; font-size: 41.6px; color: var(--gruen); text-align: left; }
.referenzen figure + figure { margin-top: 41px; }
.sterne { margin-bottom: 18px; font-size: 15px; line-height: 1; }
.referenzen blockquote { font-style: italic; }
.referenzen blockquote p { margin-bottom: 12px; }
.referenzen blockquote p:last-child { margin-bottom: 10px; }

.kontakt { padding-block: 50px 88px; }
.rechtstext { padding-block: 50px; }
.kontakt h1, .rechtstext h1 { color: var(--gruen); }
.kontakt h2 { margin: 19px 0 14.08px; font-size: 17.6px; color: #141313; }
.kontakt p, .rechtstext p { margin-bottom: 12px; }
.kontakt .formular { margin-top: 19px; }
.kontakt .formular + h2 { margin-top: 111px; }
.anfahrt { display: grid; grid-template-columns: 719fr 296fr; gap: 42px; align-items: start; }
.anfahrt address { padding: 23.86px 23.86px 17px; background: #efefef; font-style: normal; color: #3b3b3b; }
.anfahrt address h2 { margin-top: 0; color: #3b3b3b; }
.anfahrt address p:last-child { margin-top: 31px; }
.karte { display: grid; place-items: center; height: 345px; background: var(--grau); }
.karte iframe { width: 100%; height: 100%; border: 0; }

.rechtstext h2 { margin-bottom: .3em; color: var(--blau); }
.rechtstext h3 { margin-bottom: 14.08px; color: #141313; }
.rechtstext ul { margin: 0 0 12px 16px; padding-left: 12px; }
.rechtstext a { overflow-wrap: anywhere; }

.formular label, .formular legend { display: block; padding: 3px 3px 3px 1px; font-weight: 400; }
.formular input:not([type=radio]), .formular select, .formular textarea { display: block; width: 100%; height: 32px; margin-bottom: 15px; padding: 6px; border: 1px solid #d0d0d0; border-radius: 3.5px; background: #fdfdfd; font: 14px/18px Tahoma, Arial, Helvetica, sans-serif; color: #222; }
.formular textarea { height: 158px; resize: vertical; }
.frage::before { content: "?"; display: inline-grid; place-items: center; width: 14px; height: 14px; margin-left: 4px; border-radius: 50%; background: var(--link); font: 700 11px/1 Arial, sans-serif; color: #fff; }
.formular [aria-invalid=true] { border-color: #c00; }
.formular .hinweis { display: none; margin: -10px 0 15px; font-size: 14px; color: #c00; }
.formular [aria-invalid=true] + .hinweis { display: block; }
.rolle { margin-bottom: 15px; border: 0; }
.rolle label { padding: 4px 12px; border: solid #d0d0d0; border-width: 0 1px; background: #fdfdfd; font: 14px/18px Tahoma, Arial, Helvetica, sans-serif; color: #222; }
.rolle label:first-of-type { border-top-width: 1px; border-radius: 3.5px 3.5px 0 0; }
.rolle label:last-of-type { border-bottom-width: 1px; border-radius: 0 0 3.5px 3.5px; }
.falle { position: absolute; left: -999em; }
.daten { margin: 15px 0 0; font-size: 14px; font-weight: 400; }
.meldung { margin: 15px 0 0; font-weight: 400; }
.meldung:empty { display: none; }

.fuss { position: relative; padding: 44px var(--rand) 15px; background: var(--dunkel); font-weight: 400; color: #fff; }
.fuss p { margin-bottom: 12px; }
.fuss a { color: #fff; }
.nach-oben { position: absolute; right: calc(var(--rand) + 22px); top: 44px; font-size: 47px; line-height: 1; }

.anfrage { width: min(1058px, 100% - 20px); max-height: calc(100% - 60px); margin-top: 50px; padding: 30px; border: 0; box-shadow: 0 0 20px #0006; }
.anfrage::backdrop { background: #0009; }
.anfrage h2 { margin-bottom: .3em; color: var(--blau); text-align: center; }
.anfrage > p { text-align: center; }
.schliessen::before { content: "×"; }
.schliessen { position: absolute; right: 8px; top: 4px; border: 0; background: none; font-size: 32px; line-height: 1; cursor: pointer; }

@media (max-width: 480px) {
  h1, .referenzen h2 { font-size: 28.8px; }
  h2 { font-size: 24px; }
  .kopf { flex-direction: column; align-items: center; gap: 0; padding: 8px 10px 18px; }
  .marke { width: auto; }
  .marke img { margin-top: 0; }
  .erreichbar { display: none; }
  .anruf { display: grid; place-items: center; align-self: flex-end; width: 41px; height: 43px; margin-right: -2px; border-radius: 6px; background: var(--link); font-size: 27px; color: #fff; }
  .menue { display: block; width: 100%; padding: 16px 8px; border: 0; background: none; font: 400 19.2px/1 Montserrat, sans-serif; letter-spacing: .5px; text-transform: uppercase; color: #fff; cursor: pointer; }
  .menue::after { content: ""; display: inline-block; width: 19px; height: 13px; margin-left: 6px; border-block: 3px solid; background: linear-gradient(currentColor, currentColor) center / 100% 3px no-repeat; vertical-align: -1px; }
  .navigation ul { display: none; flex-direction: column; padding-bottom: 33px; text-align: center; }
  .navigation ul.offen { display: flex; padding-top: 12px; }
  .fuss { padding: 44px 20px 22px; }
  .nach-oben { position: static; display: block; text-align: center; }
  .navigation li { margin: 0 0 4px; }
  .einstieg, .leistungen, .anfahrt { grid-template-columns: 1fr; }
  .einstieg { gap: 11px; }
  .einstieg-text { padding-top: 32px; }
  .einstieg { padding-right: 10px; }
  .einstieg img { height: auto; margin-top: 0; object-fit: fill; }
  .leistungen ul + ul { margin-top: 12px; }
  .staerken li { width: 100%; }
  .anfahrt { gap: 24px; }
  .anfrage { padding: 30px 14px; }
}

/* Liste der Dienste, die CCM19 in die Datenschutzerklärung schreibt – gestaltet nach dem Muster von wiegand-buchhaltung.de. */
.ccm-cookie-declaration { max-width: 46rem; }
.ccm-cookie-declaration p { margin: 0; }
.ccm-cookie-declaration a { overflow-wrap: anywhere; }
.ccm-cookie-declaration--change-consent { margin-top: 20px; padding: 18px 22px; background: var(--grau); border-left: 3px solid var(--blau); }
.ccm-cookie-declaration--change-consent p:first-child { line-height: 1.9; }
.ccm-cookie-declaration--change-consent p:first-child span span, .ccm-cookie-declaration--change-consent time { font-weight: 600; }
.ccm-cookie-declaration--change-consent p + p { margin-top: 14px; }
.ccm-cookie-declaration--change-consent a { display: inline-block; padding: 10px 18px; border-radius: 4px; background: var(--blau); color: #fff; font-weight: 600; text-decoration: none; }
.ccm-cookie-declaration--change-consent a:hover, .ccm-cookie-declaration--change-consent a:focus-visible { background: var(--link); }
.ccm-cookie-declaration--purpose { margin-top: 44px; }
.ccm-cookie-declaration--purpose--title { margin: 0; padding-bottom: 10px; border-bottom: 3px solid var(--blau); }
.ccm-cookie-declaration--embedding { margin-top: 18px; padding: 6px 24px 20px; border: 1px solid #ddd; background: #fff; }
.ccm-cookie-declaration--embedding--title { margin: 0; padding: 16px 0 14px; font-size: 1.2rem; color: var(--blau); }
.ccm-cookie-declaration--embedding > p { padding: 12px 0; border-top: 1px solid #ddd; }
.ccm-cookie-declaration--embedding p > strong:first-child { display: block; margin-bottom: 2px; font-size: .85rem; font-weight: 600; color: #666; }
.ccm-cookie-declaration--embedding p > strong:first-child + br { display: none; }
.ccm-cookie-declaration--table-wrapper { margin: 0 0 6px; overflow-x: auto; }
.ccm-cookie-declaration--table-cookie { width: 100%; border-collapse: collapse; font-size: .95rem; }
.ccm-cookie-declaration--table-cookie th { padding: 9px 12px; background: var(--grau); text-align: left; font-size: .85rem; font-weight: 600; color: #666; }
.ccm-cookie-declaration--table-cookie td { padding: 10px 12px; border-bottom: 1px solid #ddd; vertical-align: top; }
@media (max-width: 480px) {
  .ccm-cookie-declaration--embedding { padding: 4px 16px 16px; }
}