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: inherit;
  font-size: 100%;
  vertical-align: baseline; }

html {
  line-height: 1; }

ol, ul {
  list-style: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle; }

q, blockquote {
  quotes: none; }
  q:before, q:after, blockquote:before, blockquote:after {
    content: "";
    content: none; }

a img {
  border: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block; }

@font-face {
  font-family: 'pt';
  src: url("/cssfonts/PTS55F-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'pt';
  src: url("/cssfonts/PTS56F-webfont.woff") format("woff");
  font-weight: normal;
  font-style: italic; }
@font-face {
  font-family: 'pt';
  src: url("/cssfonts/PTS75F-webfont.woff") format("woff");
  font-weight: bold;
  font-style: normal; }
@font-face {
  font-family: 'pt';
  src: url("/cssfonts/PTS76F-webfont.woff") format("woff");
  font-weight: bold;
  font-style: italic; }
@font-face {
  font-family: 'ptcapt';
  src: url("/cssfonts/PTC55F-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'ptcapt';
  src: url("/cssfonts/PTC75F-webfont.woff") format("woff");
  font-weight: bold;
  font-style: normal; }
html {
  height: 100%;
  font-size: 100%; }

body {
  height: 100%;
  background: white;
  color: black;
  font-family: 'pt', Verdana, sans-serif;
  font-size: 1.063rem;
  line-height: 1.5rem; }

footer {
  width: 100%;
  background: black; }

main {
  width: 100%;
  background: #323232; }

p, ul {
  padding: 0 0 0.75rem 0; }

ul {
  list-style-type: none; }

strong, b {
  font-weight: bold; }

em, i {
  font-style: italic; }

a {
  text-decoration: none; }

h1 span, h2 span {
  display: block;
  witdh: 0;
  height: 0;
  overflow: hidden; }

figcaption {
  font-size: 0.9375rem;
  line-height: 1.125rem;
  font-style: italic;
  padding: 0.25rem 0 0 0; }

img {
  display: block; }

figure img {
  width: 100% !important;
  height: auto !important; }

div.bildmarke {
  position: fixed;
  z-index: 200;
  width: 60px;
  height: 80px;
  top: -200px;
  right: 20%;
  background: url(/cssgfx/logo_reinstoff_bildmarke.svg) 0 0 no-repeat;
  background-size: contain; }

div.bildmarke.show {
  top: 10px;
  animation: logoslide 0.5s; }

@keyframes smoothlogo {
  from {
    top: -200px; }
  to {
    top: -10px; } }
@keyframes logoslide {
  0% {
    top: -200px; }
  90% {
    top: 18px; }
  100% {
    top: 10px; } }
header {
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  min-height: 100px;
  position: fixed;
  transition: all 0.25s ease-in;
  z-index: 100; }

header.shrunk {
  min-height: 40px;
  background: rgba(0, 0, 0, 0.85);
  transition: all 0.25s ease-in; }

header nav {
  width: 94%;
  max-width: 1200px;
  margin: 0 auto;
  font-size: 1.125rem;
  line-height: 1.5rem; }
  header nav ul {
    padding: 0; }
    header nav ul li {
      display: inline-block;
      vertical-align: top;
      margin-right: 2.0rem; }
    header nav ul li a {
      display: block;
      height: 100%;
      color: rgba(255, 255, 255, 0.7);
      padding: 1.0rem 0 0.75rem 0;
      border-top: 4px solid transparent;
      transition: all 0.25s ease-in; }
    header nav ul li a:hover {
      color: white;
      border-color: white; }
    header nav ul li a.active, header nav ul li a.active:hover {
      border-color: #e1284b; }

header.shrunk nav ul li a {
  padding: 0.25rem 0 0.25rem 0;
  transition: all 0.25s ease-in; }

section.startpanel {
  height: 100vh;
  position: relative;
  color: white;
  background: center center no-repeat fixed;
  background-size: cover; }
  section.startpanel h2 {
    font-weight: bold;
    font-size: 1.375rem;
    line-height: 1.75rem;
    padding: 0 0 1.0rem 0;
    letter-spacing: 0.04rem; }
  section.startpanel p {
    font-size: 1.25rem;
    line-height: 1.625rem; }
  section.startpanel div.text {
    background: rgba(225, 40, 75, 0.85);
    color: white;
    padding: 2.0rem; }
    section.startpanel div.text a {
      color: white;
      border-bottom: 1px dotted; }
    section.startpanel div.text a:hover {
      border-style: solid; }
  section.startpanel div.scroll {
    position: absolute;
    bottom: 3.0rem;
    width: 40px;
    height: 40px;
    left: 50%;
    margin-left: -20px; }
    section.startpanel div.scroll a {
      display: block;
      width: 100%;
      height: 100%;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      -ms-border-radius: 50%;
      border-radius: 50%;
      background: #e1284b url(/cssgfx/scroll_down.svg) center center no-repeat;
      background-size: cover; }
    section.startpanel div.scroll a.tp {
      background-image: url(/cssgfx/scroll_top.svg); }
    section.startpanel div.scroll a:hover {
      background-color: black; }

section.startpanel#intro {
  background-image: url(/media/foto_02.jpg); }
  section.startpanel#intro div.text {
    width: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background: transparent; }
  section.startpanel#intro h1 {
    width: 100%;
    padding-top: 66.6666%;
    background: transparent url(/cssgfx/hd_reinstoff_weinbau.svg) 0 0 no-repeat;
    background-size: contain; }

section.startpanel#portrait {
  background-color: black; }
  section.startpanel#portrait div.grid {
    width: 100%;
    height: 100%; }
    section.startpanel#portrait div.grid div.grid-item {
      display: inline-block;
      vertical-align: top;
      width: calc((100% - 0.5rem) / 3);
      height: calc((100% - 0.5rem) / 3);
      margin: 0 0.25rem 0.25rem 0;
      background: black center center no-repeat;
      background-size: cover; }
    section.startpanel#portrait div.grid div.grid-item:nth-of-type(1) {
      background-image: url(/media/foto_01.jpg); }
    section.startpanel#portrait div.grid div.grid-item:nth-of-type(2) {
      background-image: url(/media/foto_02.jpg); }
    section.startpanel#portrait div.grid div.grid-item:nth-of-type(3) {
      background-image: url(/media/foto_03.jpg); }
    section.startpanel#portrait div.grid div.grid-item:nth-of-type(4) {
      background-image: url(/media/foto_04.jpg); }
    section.startpanel#portrait div.grid div.grid-item:nth-of-type(5) {
      background-image: url(/media/foto_01.jpg); }
    section.startpanel#portrait div.grid div.grid-item:nth-of-type(6) {
      background-image: url(/media/foto_05.jpg); }
    section.startpanel#portrait div.grid div.grid-item:nth-of-type(7) {
      background-image: url(/media/foto_06.jpg); }
    section.startpanel#portrait div.grid div.grid-item:nth-of-type(8) {
      background-image: url(/media/foto_01.jpg); }
    section.startpanel#portrait div.grid div.grid-item:nth-of-type(9) {
      background-image: url(/media/foto_02.jpg); }
    section.startpanel#portrait div.grid div.text {
      display: block;
      height: calc(100% - 4.0rem); }
    section.startpanel#portrait div.grid div.grid-item:nth-of-type(3n) {
      margin-right: 0; }

section.startpanel#weingut {
  background-image: url(/media/foto_04.jpg); }
  section.startpanel#weingut div.text {
    width: calc(((100% - 0.5rem) / 3) - 4.0rem);
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }

section.startpanel#kontakt {
  background-image: url(/cssgfx/luftbild_stadtmessungsamt.jpg); }
  section.startpanel#kontakt div.pos {
    height: 100%;
    background: transparent url(/cssgfx/luftbild_pos.png) center center no-repeat;
    background-size: cover;
    position: relative; }
  section.startpanel#kontakt div.text {
    width: calc(25% - 4.0rem);
    position: absolute;
    left: 20%;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%); }

section.startpanel div.text:not(.intro) {
  opacity: 0;
  transition: opacity 0.5s ease-in; }
section.startpanel div.text.visible {
  opacity: 1.0;
  transition: opacity 0.5s ease-in; }

footer {
  height: auto;
  background: rgba(0, 0, 0, 0.85);
  position: relative;
  font-size: 0.9375rem;
  line-height: 1.125rem; }

footer ul {
  width: 94%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.0rem 0 3.0rem 0;
  color: rgba(255, 255, 255, 0.5); }
  footer ul li {
    display: inline-block;
    width: 20%;
    vertical-align: top;
    margin-right: 2.0rem; }
  footer ul li a {
    color: rgba(255, 255, 255, 0.5); }
  footer ul li a:hover {
    color: rgba(255, 255, 255, 0.7); }
  footer ul li h3 {
    font-weight: bold;
    font-size: 1.0rem;
    line-height: 1.125rem;
    letter-spacing: 0.02rem;
    padding: 0 0 0.125rem 0;
    margin: 0; }

@media only screen and (max-width: 1366px) {
  section.startpanel {
    background-attachment: scroll; } }
@media only screen and (max-width: 1280px) {
  html {
    font-size: 90%; }

  div.bildmarke {
    width: 48px;
    height: 64px; }

  background: url(/cssgfx/logo_reinstoff_bildmarke.svg) 0 0 no-repeat;
  background-size: contain;
  header {
    min-height: 70px; }

  header.shrunk {
    min-height: 35px; }

  section.startpanel h2 {
    font-size: 1.25rem;
    line-height: 1.5rem;
    padding-bottom: 0.25rem; }
  section.startpanel p {
    font-size: 1.125rem;
    line-height: 1.375rem; }
  section.startpanel div.text {
    padding: 1.0rem; }
  section.startpanel div.scroll {
    bottom: 2.0rem;
    width: 34px;
    height: 34px;
    margin-left: -17px; }

  section.startpanel#portrait div.grid div.text {
    height: calc(100% - 2.0rem); } }
@media only screen and (max-width: 1024px) {
  html {
    font-size: 80%; }

  section.startpanel#kontakt div.text {
    width: auto; } }
/*

// ++++ Text-/Bild-Modul ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

.c-float { 
	float: left; margin-right: 20px;
	figure { width: 100%;
		a.fancy { // -> span wird in functions.js angehängt
			display: block; position: relative; width: 100%; height: 100%; border: none !important;
 			span { @include font(txt,bd,24,24); color: $white; position: absolute; bottom: 5px; right: 5px; z-index: 10; }
 		}
 		img { display: block; width: 100% !important; height: auto !important; }
	}
}
.c-float.col-2 { width: calc((100% - 1.0rem) / 2); }
.c-float.col-3 { width: calc((100% - 2.0rem) / 3); }
.c-float + h2, .c-float + h3 { padding-top: 0; }
.c-clear { clear: both; }


// ++++ Bilderalben und -sequenzen ++++++++++++++++++++++++++++++++++++++++++++++++++++++

.c-gal { 
	position: relative; width: 100%; //margin: 0 0 1.0rem 0;
	figure img { display: block; max-width: 100% !important; height: auto !important; }
	a.fancy { // -> span wird in functions.js angehängt
		display: block; position: relative; width: 100%; height: 100%; border: none !important;
 		span { @include font(txt,bd,24,24); color: $white; position: absolute; bottom: 10px; right: 15px; z-index: 10; }
 	}
}

// ---- 1-Spalter ----------------------------------------------------------------------
.c-gal.col-1 figure { width: 100%; height: auto; }
//.c-gal.col-1 figure:nth-child(n+1) { margin-top: 0.5rem; } // alle außer dem ersten

// ---- Mehr-Spalter, Matrix ------------------------------------------------------------
.c-gal.mat { // Standard: 2 Spalten
	@include flex(); @include flex-wrap(wrap); @include flex-align(flex-start); @include flex-just(space-between);
	figure { width: calc((100% - 1.0rem) / 2) !important;  } // margin-top: 1.0rem;
	//figure:nth-child(-n+2) { margin-top: 0; } // erste zwei Kinder
}

.c-gal.mat.col-3 figure { width: calc((100% - 2.0rem) / 3) !important; }
//.c-gal.mat.col-3 figure:nth-child(-n+3) { margin-top: 0; } // erste 3 Kinder

.c-gal.mat.col-4 figure { width: calc((100% - 3.0rem) / 4) !important; }
//.c-gal.mat.col-4 figure:nth-child(-n+4) { margin-top: 0; } // erste 4 Kinder

// ---- Bildlegenden --------------------------------------------------------------------
.c-gal.col-1 figcaption, 
.c-gal.mat figcaption { padding: 0.5rem 0 0 0; }
.c-gal figcaption span.copyright { @include font(txt,rg,12,12); text-transform: uppercase; color: rgba($black, 0.7); font-style: normal; }
.c-gal figcaption.sammel { margin: -1.0rem 0 1.0rem 0; }

// ---- Sequenz-Navi --------------------------------------------------------------------
span.next, span.prev { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; display: table; z-index: 300; border: none; cursor: pointer; }
span.next::before, span.prev::before { 
	display: table-cell; width: 100%; height: 100%; @include font(icn,rg,32,32); content: '\e907'; 
	color: rgba($white, 1.0); text-align: center; vertical-align: middle; 
}
span.prev { left: 10px; }
span.next { right: 10px; }
span.prev::before { content: '\e908'; }
span.prev:hover::before, span.next:hover::before { color: $black; }

// ---- Sequenz-Pager -------------------------------------------------------------------
span.cycle-pager {
	display: block; position: absolute; right: 14px; top: 20px; z-index: 300; cursor: pointer;
	span { color: $black; display: block; float: left; width: 10px; height: 10px; @include radius(50%); margin-right: 8px; border: 2px solid $white; }
	span.cycle-pager-active { background: $white; }
	span:hover, span.cycle-pager-active:hover { background: $black; border-color: $black; }
}

// ++++ Downloads +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

div.c-download {
	h2 { }
	ul li { @include font(txt,rg,17,22); margin-bottom: 0.5rem; padding: 0 0 0.25rem 1.5rem; position: relative;
		a span { @include font(txt,rg,16,22); color: $black; }
		//a { color: $black; }
	}
	ul li:last-child { padding-bottom: 0; }
	ul li::before { @include font(icn,rg,17,24); content: '\e90e'; position: absolute; left: 0; top: 0; color: rgba($black, 0.7); }
	ul.weit { padding-bottom: 1.25rem; }
}

.clear { clear: both; }
*/