/* zusätzliches Farbschema blau */ :root { --r: min(2vw,2vh); --dg: #ddf; --mg: #ccd; } p, li { text-align: left; line-height: 1.3; font-size: 120%; } #eintragunginfopost form.infopost { background-color: inherit; } .kalschr { font-family: 'Kalam'; } .fett { font-weight: 700; } img.vorschau { display: none; } /* Vorschaubild für Sozial Media */ @media (min-width:601px) { body { font-size: min(2.3vw,2.3vh) } } @media (max-width:600px) { body { font-size: 16px } } li { margin-bottom: 0.5em; } [type='text'], [type='tel'], [type='email'], [type='password'], [type='num'], textarea { font-size: 1.3em; margin-bottom:0.2em; } header { display: none; } h1 { text-align: center; margin: var(--r); font-size: 200%; } h2 { text-align: center; font-size: 160%; margin-bottom: var(--s); margin-top: var(--s); } h3 { text-align: center; font-size: 130%; margin-bottom: var(--s); margin-top: var(--s); } /* Linkleiste unten */ footer { background: #008; border-top: white 1px solid; } a, a:link, a:visited { text-decoration: none; color: #00f; } a:hover, a:focus { color: #0c0; } footer a, footer a:link, footer a:visited { color: white; } footer a:hover, footer a:focus { color: #0ff; } footer a.hier { color: #0cc ; font-weight:700 ; } /* Allgemeine Einrichtungen */ button { background-color: #008; color: white; font-family: kalam; border-width: 0; margin: var(--r) auto; font-size: 110%; } #eintragunginfopost button, #gelber { background-color: #fc0; color: #333; font-family: inherit; border-width: 0; margin: var(--r) auto; } #verabschiedung { display: block; max-width: 30em; width: 90vw; margin: 0.5em 0.5em 0 5vw; } #schilf { display: block; max-width: var(--g); width: 90vw; margin: var(--s) auto; } main.kachel { width: 100%; max-width: 100%; margin: 0; } img, video { border-radius: var(--r); margin: 0; } #para1 { margin: var(--s); padding: var(--s); } #para2 img, #para7 img { margin: 0; } #para2 p, #para7 p { margin: 0; padding: 0; } #para4, #para3 { margin: var(--s); padding: var(--s); } #para4 { color:white; background-image: url(../bilder/elemente/kommern-geschichtenstein-polyzoides-com.jpg); background-repeat: repeat-y; background-size: 100% auto; } #para4 h2 { color:white;} section.kachel h3, section.kachel h2 { background-color: #fffc; margin: 0 var(--r); padding: calc(var(--r)/4); } section.kachel p { background-color: #fff9; margin: 0 var(--r); padding: calc(var(--r)/4); font-size: 70%; } section.kachel h2, section.kachel h3 { color: inherit; } /* Große Viewports - Desktop oder Landscape-Mobile */ @media (min-width: 600px) { section.kachel p.extern { position: absolute; background-color: inherit; top: var(--s); left: -1em; z-index:1; } /* Größenangaben */ :root { --k: calc(14 * var(--r)); /*kleine Kachelgröße*/ --g: calc(30 * var(--r)); /*große Kachelgröße*/ --a: calc(46 * var(--r)); /*Breite gesamtes Kachel-Feld*/ --s: calc(2 * var(--r)); /*Abstand der Kacheln*/ --abstandoben: calc(4.5em + var(--s)); /*Abstand über Kachelfeld*/ --rand0: calc(46vw - (var(--a) / 2) + var(--r)); /*Start 1. Spalte*/ --rand1: calc(var(--rand0) + var(--k) + var(--s)); /*Start 2. Spalte*/ --rand2: calc(var(--rand1) + var(--k) + var(--s)); /*Start 3. Spalte*/ --oben0: calc(var(--r) + var(--abstandoben)); /*Start 1. Zeile*/ --oben1: calc(var(--oben0) + var(--k) + var(--s)); /*Start 2. Zeile*/ --oben2: calc(var(--oben1) + var(--k) + var(--s)); /*Start 3. Zeile*/ --oben3: calc(var(--oben2) + var(--k) + var(--s)); /*Start 4. Zeile*/ --oben4: calc(var(--oben3) + var(--k) + var(--s)); /*Start unter Kachelfeld*/ } /* Kachelstruktur */ section.kachel { width: var(--a); margin: 0 auto calc(2em - var(--abstandoben)) auto; height: var(--oben4); } section.kachel a { position: absolute; } section.kachel a div { display: block; border-radius: var(--r); margin: var(--r); width: var(--k); height: var(--k); } section.kachel img, section.kachel video { position: relative; right: 0; bottom: 0; width: var(--k); height: var(--k); z-index:-1; } section.kachel h2 { position: relative; top: -3em; font-size:100% } section.kachel h3 { position: relative; top: -9em; font-size:90%; } section.kachel p { position: relative; top: 5em; margin-left: 3em; z-index:1; } section.kachel a:nth-child(1) { width: var(--g); left: var(--rand0); top: var(--oben0); } section.kachel a:nth-child(2) { left: var(--rand2); top: var(--oben0); } section.kachel a:nth-child(3) { left: var(--rand0); top: var(--oben1); } section.kachel a:nth-child(4) { width: var(--g); height: var(--g); left: var(--rand1); top: var(--oben1); } section.kachel a:nth-child(5) { height: var(--g); left: var(--rand0); top: var(--oben2); } section.kachel a:nth-child(6) { left: var(--rand1); top: var(--oben3); } section.kachel a:nth-child(7) { left: var(--rand2); top: var(--oben3); } section.kachel a:nth-child(4) img, section.kachel a:nth-child(4) div { width: var(--g); height: var(--g); } section.kachel a:nth-child(5) img, section.kachel a:nth-child(5) div { height: var(--g); } section.kachel a:nth-child(1) video { width: var(--g); clip-path: polygon(0 0,0 var(--k),var(--g) var(--k),var(--g) 0); overflow: visible clip; max-width: inherit; } section.kachel a:nth-child(1) div { width: var(--g); } section.kachel a:nth-child(2) h2 { top: -5em; } section.kachel a:nth-child(3) h2, section.kachel a:nth-child(6) h2, section.kachel a:nth-child(7) h2 { top: -11.5em; } section.kachel a:nth-child(4) h2:nth-of-type(1) { top: -17em; } section.kachel a:nth-child(4) h2:nth-of-type(2) { top: -7em; } section.kachel a:nth-child(5) h2 { top: -25.5em; } section.kachel a:nth-child(6) img { position: relative; top: calc(var(--k)*(-0.84)); } section.kachel a:nth-child(6) video { position: relative; top: var(--r); width: calc(var(--k)*0.84); height: calc(var(--k)*0.42); margin: calc(var(--k)*0.08) ; border-radius: calc(var(--k)*0.42) calc(var(--k)*0.42) 0 0; z-index: 0; } section.kachel a:nth-child(6) p { position: relative; top: 0; background-color:inherit; font-family: kalam; text-align: center; margin: 0 calc(var(--k) * (0.1));; border-radius: 0 0 calc(var(--k)*0.4) calc(var(--k)*0.4); } /* Inhalt-Abschnitte */ /* Hintergrundbilder */ #para2 { background-image: url(../bilder/geschichtensteine/lp/unser-holzhaus-polyzoides-com.jpg); padding: var(--r) 0; background-size: auto 100%; background-repeat: no-repeat; background-color: var(--dg); } #eintragunginfopost { background-image: url(../bilder/elemente/holz-weiss-detail.jpg); background-repeat: repeat-y; background-size: 100% auto; padding: 3em 0; } /* Anordnung der einzelnen Elemente */ #para2 { display: grid; gap: var(--r); align-items: center; grid-template-columns: 7fr 2fr 2fr 2fr 1fr; grid-template-rows: repeat(10, auto); padding: 0; margin: var(--r) 0; } #para2 h2 { text-align: center; grid-column: 2 / 5; grid-row: 1 / 2; } #para2 div:nth-of-type(1) { background-image: linear-gradient(to right, transparent calc(45vw - var(--k)), var(--dg) calc(60vw - var(--k))); grid-column: 1 / -1; grid-row: 1 / -1; height: 100%; } #para2 img.unterschrift { display: inline-block; max-width: 8em; margin-left: 3em; } #para2 img.angela { grid-column: 4 / 5; grid-row: 3 / 4; } #para2 img.haus { display: none; } #para2 p { margin: 0.7em 0; } #para2 p:nth-of-type(1) { grid-column: 2 / 5; grid-row: 2 / 3; } #para2 p:nth-of-type(2) { grid-column: 2 / 4; grid-row: 3 / 4; } #para2 p:nth-of-type(3) { grid-column: 2 / 5; grid-row: 4 / 5; } #para2 p:nth-of-type(4) { grid-column: 2 / 5; grid-row: 5 / 6; } #para2 p:nth-of-type(5) { grid-column: 2 / 5; grid-row: 6 / 7; } #para2 p:nth-of-type(6) { grid-column: 2 / 5; grid-row: 7 / 8; } #para2 p:nth-of-type(7) { grid-column: 2 / 5; grid-row: 8 / 9; } #para2 p:nth-of-type(8) { grid-column: 2 / 5; grid-row: 9 / 10; } #para2 a { grid-column: 2 / 5; grid-row: 10 / -1; } #para3 video, #para6 video { margin: calc(2*var(--s)) auto; max-height: 70vh; height:auto; min-height: 30vw; width: auto; max-width: 1080px; } #para3 p, #para6 p { margin-bottom: 5em; } #para5 { display: grid; gap: 0; grid-template-columns: repeat(3, auto); grid-template-rows: repeat(10, auto); padding: var(--s); background-color: var(--dg); } #para5 img { grid-column: 1 / 2; grid-row: 2 / 5; margin: var(--s) auto; max-height: 40vh; } #para5 h2 { grid-column: 1 / -1; grid-row: 1 / 2; } #para5 p:nth-of-type(1) { grid-column: 2 / -1; grid-row: 2 / 3; } #para5 p:nth-of-type(2) { grid-column: 2 / -1; grid-row: 3 / 4; } #para5 p:nth-of-type(3) { grid-column: 2 / -1; grid-row: 4 / 5; } #para5 p:nth-of-type(4) { grid-column: 1 / -1; grid-row: 5 / 6; } #para5 p:nth-of-type(5) { grid-column: 1 / -1; grid-row: 6 / 7; } #para5 p:nth-of-type(6) { grid-column: 1 / -1; grid-row: 7 / 8; } #para5 p:nth-of-type(7) { grid-column: 1 / -1; grid-row: 8 / 9; } #para5 a { grid-column: 1 / -1; grid-row: 9 / -1; } #eintragunginfopost { display: grid; gap: 0; grid-template-columns: auto auto; grid-template-rows: repeat(7, auto); padding: var(--s); } #eintragunginfopost h2 { grid-column: 1 / 2; grid-row: 1 / 2; } #eintragunginfopost p.infoposteintragung:first-of-type { grid-column: 1 / 2; grid-row: 2 / 3; } #eintragunginfopost p.infoposteintragung:nth-of-type(2) { grid-column: 1 / 2; grid-row: 4 / 5; } #eintragunginfopost ul { grid-column: 1 / 2; grid-row: 3 / 4; } #eintragunginfopost form { grid-column: 1 / 2; grid-row: 5 / -1; } #eintragunginfopost img { grid-column: 2 / -1; grid-row: 1 / 6; margin: var(--s); max-height: 80vh; max-width: 50em; } #eintragunginfopost a { grid-column: 2 / -1; grid-row: 5 / -1; } } /* Kleine Viewports - Mobile */ @media (max-width:599px) { /* Größenangaben */ :root { --r: 3vw; --s: calc(2 * var(--r)); --k: calc(14 * var(--r)); --g: calc(30 * var(--r)); --a: var(--g); } /* Kachelstruktur */ section.kachel { display: grid; gap: var(--s); grid-template-columns: var(--k) var(--k); grid-template-rows: var(--k) var(--k) var(--g) var(--k); padding: 0; margin: var(--s) auto; width: var(--a); } section.kachel a { display: block; width: var(--k); height: var(--k); margin: 0; padding: 0; } section.kachel div { display: block; border-radius: var(--r); margin: 0; width: var(--k); height: var(--k); } section.kachel img, section.kachel video { position: relative; right: 0; bottom: 0; width: var(--k); height: var(--k); z-index:-1; } section.kachel h2 { position: relative; top: -4.6em; background-color:rgb(255 255 255 /0.7); margin: 0 var(--r); padding: calc(var(--r)/4); font-size:100% } section.kachel h3 { position: relative; top: -9em; font-size:80%; } section.kachel p { position: relative; top: -7em; margin-left: 4em; } section.kachel p.extern { position: relative; background-color: inherit; top: calc(var(--r)*(-13)); left: var(--r); z-index:1; margin-left: 0; } section.kachel a:nth-child(1) { grid-column: 1 / -1; grid-row: 1 / 2; height: var(--k); } section.kachel a:nth-child(2) { grid-column: 1 / 2; grid-row: 2 / 3; } section.kachel a:nth-child(3) { grid-column: 2 / -1; grid-row: 2 / 3; } section.kachel a:nth-child(4) { grid-column: 1 / -1; grid-row: 3 / 4; } section.kachel a:nth-child(5) { grid-column: 1 / 2; grid-row: 4 / -1; } section.kachel a:nth-child(6) { grid-column: 2 / -1; grid-row: 4 / 5; } section.kachel a:nth-child(7) { grid-column: 2 / -1; grid-row: 5 / -1; } section.kachel a:nth-child(1) video, section.kachel a:nth-child(1) div { width: var(--g); height: var(--k); max-width: inherit; } section.kachel a:nth-child(4) div, section.kachel a:nth-child(4) img { width: var(--g); height: var(--g); } section.kachel a:nth-child(5) img, section.kachel a:nth-child(5) div { height: var(--g); } section.kachel a:nth-child(3) h2 { top: -9.5em; } section.kachel a:nth-child(3) h3 { top: -9.5em; font-size: 71% } section.kachel a:nth-child(3) p.extern { top: calc(var(--r)*(-21.8)); } section.kachel a:nth-child(4) h2:nth-of-type(1) { top: -13.5em; } section.kachel a:nth-child(4) h2:nth-of-type(2) { top: -7.3em; } section.kachel a:nth-child(4) p.extern { top: calc(var(--r)*(-34)); } section.kachel a:nth-child(5) h2 { top: -20em; } section.kachel a:nth-child(7) h2 { top: -9em; } section.kachel a:nth-child(6) img { position: relative; top: calc(var(--k)*(-0.87)); } section.kachel a:nth-child(6) video { position: relative; top: calc(var(--k)*0.08); width: calc(var(--k)*0.84); height: calc(var(--k)*0.42); margin: 0 calc(var(--k)*0.08) ; border-radius: calc(var(--k)*0.42) calc(var(--k)*0.42) 0 0; z-index: 0; } section.kachel a:nth-child(6) p { position: relative; top: calc(var(--k)*(0.1)); background-color:inherit; font-family: kalam; text-align: center; margin: 0 calc(var(--k) * (0.1));; border-radius: 0 0 calc(var(--k)*0.4) calc(var(--k)*0.4); height: calc(var(--k)*0.42); font-size: 60%; } /* Inhalt-Abschnitte */ /* Hintergrundbilder */ #eintragunginfopost { background-image: url(../bilder/elemente/holz-weiss-detail.jpg); background-repeat: repeat-y; background-size: 100% auto; } /* Anordnung der einzelnen Elemente */ #para2 { display: grid; gap: var(--r); align-items: center; grid-template-columns: 1fr 1fr 1fr; background-color: var(--dg); grid-template-rows: repeat(10, auto); padding: 0 var(--r) 2em var(--r); margin: var(--r) 0; } #para2 div:nth-of-type(1) { display: none; } #para2 h2 { grid-column: 1 / -1; grid-row: 1 / 2; text-align: center; } #para2 img.unterschrift { display: inline-block; max-width: 8em; margin-left: 3em; } #para2 img.angela { grid-column: 3 / -1; grid-row: 3 / 4; } #para2 img.haus { grid-column: 1 / 2; grid-row: 4 / 5; } #para2 p:nth-of-type(1) { grid-column: 1 / -1; grid-row: 2 / 3; } #para2 p:nth-of-type(2) { grid-column: 1 / 3; grid-row: 3 / 4; } #para2 p:nth-of-type(3) { grid-column: 2 / -1; grid-row: 4 / 5; } #para2 p:nth-of-type(4) { grid-column: 1 / -1; grid-row: 5 / 6; } #para2 p:nth-of-type(5) { grid-column: 1 / -1; grid-row: 6 / 7; } #para2 p:nth-of-type(6) { grid-column: 1 / -1; grid-row: 7 / 8; } #para2 p:nth-of-type(7) { grid-column: 1 / -1; grid-row: 8 / 9; } #para2 p:nth-of-type(8) { grid-column: 1 / -1; grid-row: 9 / 10; } #para2 a { grid-column: 1 / -1; grid-row: 10 / -1; display: block; } #para3, #para6 { margin: 2em 1em; padding: 0; } #para3 video, #para6 video { margin: 2em 0; width: 100%; max-width: inherit; } #para3 a:nth-of-type(2), #para3 a:nth-of-type(2) { display: none; } #para5 { background-color: var(--dg); padding-bottom: 2em } #para5 p { margin: 0; padding: var(--r); border-radius: var(--r); } #para5 img { max-width: 90vw; margin: var(--r) auto; display: block; } #para5 a { text-align: center; grid-column: 1 / -1; grid-row: 3 / -1; } #eintragunginfopost { padding: var(--s); } #eintragunginfopost h2 { text-align: center; } }