/* Design & Programmierung: Lydia Kluge, 2024 */

/* Eric Meyer's Reset CSS v2.0 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section{
  display: block;
}
/* Reset Ende */

/* Einbinden der Schriftart Museo Sans */
@font-face{
  font-family: "Museo Sans";
  src: url("../font/museo-sans/museo-sans-500.eot");
  src: url("../font/museo-sans/museo-sans-500.eot?#iefix") format("embedded-opentype"),
       url("../font/museo-sans/museo-sans-500.woff") format("woff"),
       url("../font/museo-sans/museo-sans-500.woff2") format("woff2"),
       url("../font/museo-sans/museo-sans-500.ttf") format("truetype"),
       url("../font/museo-sans/museo-sans-500.svg#webfont") format("svg");
  font-style: normal;
  font-weight: 500;
}

@font-face{
  font-family: "Museo Sans";
  src: url("../font/museo-sans/museo-sans-700.eot");
  src: url("../font/museo-sans/museo-sans-700.eot?#iefix") format("embedded-opentype"),
       url("../font/museo-sans/museo-sans-700.woff") format("woff"),
       url("../font/museo-sans/museo-sans-700.woff2") format("woff2"),
       url("../font/museo-sans/museo-sans-700.ttf") format("truetype"),
       url("../font/museo-sans/museo-sans-700.svg#webfont") format("svg");
  font-style: normal;
  font-weight: 700;
}
/* Einbinden der Schriftart Museo Sans Ende */

html{
  scroll-behavior: smooth;
}

body{
  background: white;
  font-family: "Museo Sans";
  font-weight: 500;
  font-size: 1.25em;
  line-height: 1.5em;
  color: black;
}

/* Text */
h1{
  font-size: 1.1em;
}

h1, h2{
  font-weight: 700;
  margin-bottom: 1em;
}

h2{
  padding-top: 0.5em;
}

.big{
  font-size: 1.5em;
  line-height: 1.4em;
  font-weight: 500;
}

p, ol, ul{
  margin-bottom: 1em;
}

ol, ul {
  list-style: none;
}

.bullet-points{
  list-style-type: disc;
  list-style-position: outside;
  margin-left: 1em;
}

.horizontal li{
  float: left;
  margin-right: 1em;
}

.clear{
  clear: left;
}

figcaption, #transcript{
  font-size: 0.9em;
}

#transcript{
  margin-top: -1.4em;
  margin-bottom: 1.4em;
}

details summary{
  inline-size: max-content;
  list-style-type: "＋";
  cursor: pointer;
}

details[open] summary{
  list-style-type: "－";
  height: auto;
}

details p{
  margin-left: 1em;
}
/* Text Ende */

/* Links */
a{
  text-decoration: none;
  color: black;
}

a img{
  border: none;
}

.textlink{
  border-bottom: 1px dotted black;
}

.textlink:hover{
  background-color: lavender;
}
/* Links Ende */

/* Header, Main */
header, main, section, nav{
  margin-bottom: 1.5em;
}
/* Header, Main Ende */

/* Wrapper */
.wrapper{
  margin: 0 auto;
  max-width: 960px;
  padding: 3.5em 10% 0em;
}
/* Wrapper Ende */

/* Bilder, Bildergalerie & Teaser-Grid */
.fullscreen{
  position: relative;
  max-width: 100%;
  height: auto;
  margin-bottom: 1.4em;
}

.two-gallery{
  column-count: 2;
  align-content: left;
}

.three-gallery, .grid-teaser{
  column-count: 3;
  align-content: left;
}

.two-gallery li, .three-gallery li, .grid-teaser li{
  break-inside: avoid-column;
  margin-bottom: 1.4em;
}

.two-gallery img, .three-gallery img, .grid-teaser img{
  vertical-align: middle;
  max-width: 100%;
}

.grid-teaser img{
  margin-bottom: 0.4em;
}

.teaser li span:hover, .grid-teaser li span:hover{
  background: lavender;
}
/* Bild-Teaser & Galerie Ende */

/* Contact */
img.hello{
 width: 1.25em;
 vertical-align: text-bottom;
 margin-right: 0.25em;
}
/* Contact Ende */

/* Media Queries */
@media screen and (max-width: 1400px){              /* Breakpoint nach ästhetischen Gesichtspunkten gesetzt */   
  /* Grid */
  .grid-teaser, .three-gallery{
  column-count: 2;
  }
}

@media screen and (max-width: 750px){               /* Breakpoint nach ästhetischen Gesichtspunkten gesetzt */    
  /* Grid */
  .grid-teaser, .three-gallery, .two-gallery{
  column-count: 1;
  } 
}