/* ===========================================================================
   responsive.css - Mobil-Anpassung fuer das feste 960px-Raster
   ---------------------------------------------------------------------------
   Das Layout stammt aus dem Jahr 2011 (960 Grid System) und arbeitet
   durchgehend mit festen Pixelbreiten. Diese Datei wird ZULETZT geladen und
   ueberschreibt nur - style.css, 960mod.css, nivo.css und
   jquery.panorama.css bleiben unveraendert.

   Ab 1001px Bildschirmbreite greift der Mobilteil nicht: die Darstellung am
   Desktop bleibt wie bisher.

     bis 1000px  einspaltig, Navigation als aufklappbares Menue
     bis  620px  Schriftgroessen und Bildumfluss fuer Telefone

   Absichtlich NICHT angetastet: img.panorama auf restaurant.php ist mit
   2473px Breite gewollt breiter als der Bildschirm - das Panorama wird
   seitlich gescrollt. Nur sein Ausschnitt (.panorama-viewport) wird
   schmaler gemacht.
   =========================================================================== */


/* ---------------------------------------------------------------------------
   Fehlerkorrektur, die fuer ALLE Bildschirmbreiten gilt
   ---------------------------------------------------------------------------
   style.css setzt ".container_12 { background-color: #f7f6f1 !important }".
   Im Seitenfuss liegt der Inhalt aber in genau so einem Container, waehrend
   "footer { color: #efede7 }" eine helle Schrift vorgibt - helle Schrift auf
   hellem Grund, der Fusstext war praktisch unlesbar. Die Klasse
   "darkTexture" am <footer> ist in keinem Stylesheet definiert und bewirkt
   nichts. Hier wird der Container im Fuss wieder durchsichtig gemacht, damit
   der dunkle Hintergrund des <footer> durchscheint.
   --------------------------------------------------------------------------- */
footer .container_12 {
	background-color: transparent !important;
	border-left: none;
	border-right: none;
}


/* ---------------------------------------------------------------------------
   Hauptmenue: Punktbreite richtet sich nach dem Text (alle Bildschirmbreiten)
   ---------------------------------------------------------------------------
   style.css gibt jedem Menuepunkt feste 60px Breite. Das reicht fuer die
   kurzen Beschriftungen, nicht aber fuer "Reservieren": das braucht bei
   14px Kursivschrift rund 74px, waere auf zwei Zeilen umgebrochen und
   haette den nur 30px hohen Punkt verlassen. Sechs gleich breite Punkte in
   der Groesse des laengsten Wortes ergaeben ausserdem etwa 564px und
   passten nicht mehr in die 500px breite Menueleiste.

   Deshalb wachsen die Punkte jetzt mit ihrem Text. Mit min-width bleiben
   die kurzen Punkte bei rund 76px, nur "Reservieren" wird mit etwa 94px
   breiter - zusammen ungefaehr 474px. Die Leiste ist auf 540px verbreitert
   (siehe nav.php), damit auch bei abweichender Schriftbreite - etwa wenn
   "Droid Serif" nicht laedt und Georgia einspringt - nichts umbricht.
   --------------------------------------------------------------------------- */
/* Damit das aufgeht, muss das <li> mitgehen und nicht nur der Link:
   960mod.css gibt jedem li.grid_1 feste 50px Breite plus je 15px
   Aussenabstand - zusammen die 80px, die ein Punkt frueher belegte. Das
   passte nur, solange auch der Link genau 80px breit war. Bei
   textabhaengiger Breite entstehen daraus gruene Luecken zwischen den
   Punkten, und "Reservieren" laeuft aus seinem 50px-Feld heraus in den
   Nachbarpunkt hinein.

   Deshalb: das <li> ohne feste Breite und ohne Aussenabstand, der Link
   bringt seinen Innenabstand selbst mit. Die Punkte liegen damit wieder
   luecklos aneinander, getrennt nur durch die 1px-Linie aus style.css.
   min-width haelt die kurzen Punkte auf annaehernd der alten Breite,
   damit die Leiste so gleichmaessig aussieht wie vorher.

   text-align wird hier bewusst NICHT gesetzt: am Desktop zentriert
   bereits "nav > ul > li" aus style.css, mobil richtet der Mobilteil
   weiter unten linksbuendig aus. Ein text-align am Link selbst hat
   genau das ueberstimmt und die Mobilpunkte aus der Reihe tanzen
   lassen. */
.container_12 nav > ul > li {
	width: auto !important;
	margin-left: 0;
	margin-right: 0;
}

nav > ul > li > a {
	width: auto;
	min-width: 56px;
}

/* Die Untermenues hingen mit "left: -80px" genau eine Punktbreite links
   vom eigenen Punkt - das ging nur auf, solange alle Punkte exakt 80px
   breit waren. Bei textabhaengiger Breite werden sie stattdessen an der
   linken Kante ihres Punktes ausgerichtet. */
nav > ul > li > ul {
	left: 0;
}


/* Am Desktop komplett unsichtbar: die Umschalter der Mobilnavigation und das
   statische Kopfbild, das dort den Nivo-Slider ersetzt. Die Checkboxen
   bleiben auch mobil unsichtbar - geschaltet wird ueber ihre <label>. */
.navToggleCheckbox,
.navToggleLabel,
.subToggle,
.subToggleLabel,
.mobileHero {
	display: none;
}


@media screen and (max-width: 1000px) {

	/* --- Grundgeruest ---------------------------------------------------- */

	html {
		/* verhindert das Aufblasen der Schrift beim Drehen des Geraets */
		-webkit-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
	}

	body {
		font-size: 15px;
		line-height: 23px;
	}

	.container_12,
	.headerShadow {
		width: auto !important;
		max-width: 100%;
		box-sizing: border-box;
	}

	.container_12 {
		padding-left: 18px;
		padding-right: 18px;
	}

	/* Die Inhaltsbereiche brauchen oben Luft, sonst kleben sie direkt am
	   Schattenstreifen unter dem Kopfbereich. Gezielt nur <section>, damit
	   Kopf (header.container_12) und Fuss (div.container_12) unberuehrt
	   bleiben. */
	section.container_12 {
		padding-top: 18px;
		padding-bottom: 10px;
	}

	/* Die Logo-/Menuezeile soll randlos sein.
	   #mainHeader behaelt seinen Innenabstand - auf menu.php steht dort
	   Text ("Tageskarte") und kein Bild, der wuerde sonst am Rand kleben.
	   Kopfbilder brechen stattdessen weiter unten gezielt aus. */
	header.container_12.nav {
		padding-left: 0;
		padding-right: 0;
	}

	/* Rasterinhalt untereinander statt nebeneinander. width braucht
	   !important, weil ".container_12 .grid_4" staerker gewichtet ist als
	   ein einfacher Klassenselektor. */
	[class*="grid_"]:not(nav),
	[class*="cont_"] {
		float: none;
		display: block;
		width: auto !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		left: auto !important;
		box-sizing: border-box;
	}

	[class*="prefix_"],
	[class*="suffix_"] {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	[class*="push_"],
	[class*="pull_"] {
		left: auto !important;
	}

	/* Der schmale Schatten unter dem Kopf wirkt auf dem Telefon wie ein
	   zufaelliger grauer Streifen. Ohne Innenabstand, damit er ueber die
	   volle Breite laeuft. */
	.headerShadow {
		height: 12px;
		padding-left: 0;
		padding-right: 0;
		background-size: 100% auto;
	}


	/* --- Kopfzeile mit Logo --------------------------------------------- */

	/* Der Schriftzug ist in style.css naeherungsweise weiss (#efede7) mit
	   dunklem Schlagschatten - gedacht fuer den gruenen Hintergrundstreifen
	   der Seite. "header.container_12" gibt dem Kopf aber ein weisses
	   Hintergrundweiss, wodurch weiss auf weiss stand.
	   Loesung: der Kopf wird durchsichtig, dadurch scheint der gruene
	   Markenstreifen (.bgMain, liegt mit z-index:-1 dahinter, 400px hoch)
	   durch und der weisse Schriftzug sitzt wieder auf Gruen. */
	header.container_12.nav {
		background-color: transparent !important;
		border: none;
		padding-top: 8px;
		padding-bottom: 0;
	}

	/* Breite steht als style="width: 400px" im HTML, daher !important */
	header.nav .grid_4 {
		width: auto !important;
		text-align: center;
		padding: 0 14px;
	}

	header.nav h1,
	header.nav a:hover h1 {
		margin: 2px 0 14px;
		font-size: 32px;
		line-height: 42px;
		color: #fff;
		/* engerer, dunklerer Schatten: der alte 5px-Weichzeichner wirkte auf
		   kleinen Schirmen wie ein Schmutzfleck */
		text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
	}

	header.nav h1 span {
		font-size: 22px;
	}


	/* --- Mobilnavigation ------------------------------------------------ */

	.navToggleLabel {
		display: block;
		cursor: pointer;
		margin: 0;
		padding: 15px 18px;
		font: italic normal 17px/20px "Droid Serif", Georgia, serif;
		color: #efede7;
		background-color: #383833;
		background-image: url('../images/background/bg_dark_feint.png');
		-webkit-user-select: none;
		user-select: none;
	}

	.navToggleIcon {
		font-style: normal;
		padding-right: 6px;
	}

	.navToggleCheckbox:checked + .navToggleLabel {
		border-bottom: 3px solid #48962c;
	}

	header.nav nav {
		float: none;
		width: auto !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		display: none;
		background-color: #fff;
	}

	.navToggleCheckbox:checked ~ nav {
		display: block;
	}

	nav > ul {
		float: none;
		height: auto;
		margin: 0;
		padding: 0;
		border-bottom: 1px solid #dedcd5;
	}

	nav > ul > li {
		display: block;
		text-align: left;
		border-top: 1px solid #e7e5de;
	}

	nav > ul > li:first-child {
		border-top: none;
	}

	/* Erste Ebene: ruhige Zeilen mit grosszuegiger Tippflaeche.
	   ------------------------------------------------------------------
	   Wichtig sind hier die drei Zusaetze :hover, :focus und .hovering.
	   Ein Antippen loest auf Touchgeraeten ein mouseover aus, ein
	   mouseout aber nie - der angetippte Punkt behielt dadurch dauerhaft
	   den dunklen Hover-Zustand. Zusaetzlich haengt hoverIntent per
	   jQuery die Klasse "hovering" an; die ist als Klassenselektor
	   staerker gewichtet als "nav > ul > li > a" und hat deshalb
	   gewonnen. Beides wird hier ausdruecklich mit ueberschrieben.
	   Der alte Hover verschob die Zeile ausserdem um 4px nach oben
	   (margin-top:-4px), was beim Tippen wie ein Springen wirkte. */
	nav > ul > li > a,
	nav > ul > li > a:hover,
	nav > ul > li > a:focus,
	nav > ul > li > a.hovering {
		width: auto;
		height: auto;
		margin-top: 0;
		padding: 15px 18px;
		border-right: none;
		color: #383833;
		background: none;
		background-color: #fff;
		text-shadow: none;
	}

	/* Kurze Rueckmeldung beim Antippen - das ersetzt den Hover */
	nav > ul > li > a:active,
	nav > ul > li > ul > li a:active {
		background-color: #efede7;
	}

	/* --- Untermenues: eingeklappt, per Pfeil aufklappbar ---------------- */

	/* Standard zu, das !important schlaegt die Inline-Styles, die
	   hoverIntent per jQuery setzt (slideDown/slideUp). */
	/* Zusaetzliche Absicherung gegen die jQuery-Animationen: slideDown,
	   slideUp und hide schreiben Hoehe, Breite, Deckkraft und overflow
	   direkt ins style-Attribut. Ein "display" allein zu ueberschreiben
	   genuegt nicht - das Untermenue wuerde bei display:block auf Hoehe 0
	   zusammengefahren. Greift, wenn das Fenster von Desktopbreite
	   verkleinert wird und hoverIntent bereits gebunden war. */
	nav > ul > li > ul {
		display: none !important;
		height: auto !important;
		width: auto !important;
		opacity: 1 !important;
		overflow: visible !important;
		position: static;
		top: auto;
		left: auto;
		border-right: none;
		background-color: #f2f0ea;
		background-image: none;
	}

	/* Hoehere Spezifitaet als die Regel darueber, gewinnt daher */
	.subToggle:checked ~ ul {
		display: block !important;
	}

	/* Platz fuer die Pfeilflaeche rechts - auch in den Hover-Zustaenden,
	   sonst rutscht der Text beim Antippen unter den Pfeil */
	nav > ul > li.hasSub > a,
	nav > ul > li.hasSub > a:hover,
	nav > ul > li.hasSub > a:focus,
	nav > ul > li.hasSub > a.hovering {
		padding-right: 64px;
	}

	.subToggleLabel {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		width: 60px;
		height: 51px;
		cursor: pointer;
		border-left: 1px solid #e7e5de;
	}

	/* Text nur fuer Screenreader, sichtbar ist der Pfeil darunter */
	.subToggleLabel > span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.subToggleLabel:after {
		content: '';
		position: absolute;
		top: 20px;
		left: 24px;
		width: 8px;
		height: 8px;
		border-right: 2px solid #7a7a72;
		border-bottom: 2px solid #7a7a72;
		transform: rotate(45deg);
	}

	.subToggle:checked + .subToggleLabel:after {
		top: 22px;
		transform: rotate(-135deg);
	}

	nav > ul > li > ul > li {
		border-top: 1px solid #e7e5de;
	}

	/* Der alte Hover setzte hier eine feste Breite von 144px - auf dem
	   Telefon riss das die Zeile aus dem Layout. */
	nav > ul > li > ul > li a,
	nav > ul > li > ul > li a:hover,
	nav > ul > li > ul > li a:focus,
	nav > ul > li > ul > li a.hovering {
		width: auto;
		padding: 13px 18px 13px 34px;
		color: #4a4a44;
		font-size: 14px;
		background-color: transparent;
		background-image: none;
		text-shadow: none;
	}


	/* --- Restliche Hover-Effekte beruhigen ------------------------------ */

	/* Ueberschriften-Links tauschen im Hover den gestrichelten gegen einen
	   2px starken Rahmen und nehmen 1px Innenabstand weg. Am Telefon
	   bleibt der Hover nach dem Antippen haengen, die Zeile verschiebt
	   sich dann sichtbar. Deshalb bleibt die Darstellung hier konstant. */
	h2 a:hover,
	h3 a:hover,
	h4 a:hover {
		padding-bottom: 1px;
		border-bottom-width: 1px;
		border-bottom-style: dashed;
	}

	/* --- Kopfbild und Adressblock --------------------------------------- */

	#mainHeader {
		padding-top: 0;
		padding-bottom: 0;
	}

	#mainHeader > .grid_8 {
		line-height: 0;
	}

	/* Kopfbilder ueber die volle Breite: sie brechen mit negativen
	   Aussenabstaenden aus dem 14px-Innenabstand des Containers aus.
	   Bewusst nur direkte Kindbilder - der kleine Teller-Icon auf
	   menu.php liegt eine Ebene tiefer und bleibt unangetastet. */
	/* Die ID im Selektor ist Absicht: sonst gewinnt die allgemeinere Regel
	   img:not(.panorama) weiter unten mit max-width:100% und der
	   Randausbruch verpufft. */
	#mainHeader > .grid_8 > img,
	#mainHeader > img.mobileHero {
		display: block;
		/* muss zum Innenabstand von .container_12 (18px) passen */
		width: calc(100% + 36px);
		max-width: none;
		height: auto;
		margin: 0 -18px;
	}

	/* .panorama darf nicht mitskaliert werden, sie wird gescrollt */
	img:not(.panorama) {
		max-width: 100%;
		height: auto;
	}

	.panorama-viewport {
		width: 100% !important;
	}

	.address {
		padding: 18px 0 20px;
		text-align: center;
		font-size: 15px;
		line-height: 25px;
	}

	/* Logo mittig und nicht zu wuchtig */
	.address img {
		display: block;
		max-width: 210px;
		margin: 0 auto 12px;
	}

	.address > div[align="left"] {
		text-align: center;
	}

	/* Die Telefon-/E-Mail-Tabelle traegt width="280" im HTML */
	.address table {
		width: auto !important;
		margin: 0 auto;
		text-align: left;
	}

	.address table td {
		padding: 1px 4px;
	}

	/* Oeffnungszeiten optisch abgesetzt */
	.address > span,
	.address > div > span {
		display: block;
	}

	.address span.focus {
		display: block;
		padding-bottom: 8px;
	}


	/* --- Karten und iframes --------------------------------------------- */

	iframe {
		max-width: 100%;
	}

	/* Google-Karte auf kontakt.php: feste 930x360 im HTML */
	.headerGoogle iframe {
		width: 100% !important;
		height: 300px !important;
	}

	/* Der Nivo-Slider berechnet seine Bildstreifen beim Start in Pixel und
	   rechnet sie nie wieder um - fluid ist er nicht zu bekommen. Auf
	   kleinen Schirmen tritt ein statisches Bild an seine Stelle. */
	#slider {
		display: none !important;
	}


	/* --- Inhaltsbloecke ------------------------------------------------- */

	/* .white und .black sind die farbigen Kaesten im Inhalt. Sie sassen mit
	   ihren 15px aus style.css sehr dicht am Rand. */
	.white,
	.black {
		padding: 18px 18px 10px;
		margin-bottom: 16px;
	}

	/* Bilder in diesen Kaesten sind haeufig der einzige Inhalt. Als
	   Inline-Element erzeugen sie unten eine Leerzeile aus der
	   Zeilenhoehe, wodurch der Kasten unsymmetrisch wirkt. */
	.white > img,
	.black > img {
		display: block;
	}

	article {
		margin-bottom: 16px;
	}

	p {
		margin-bottom: 18px;
	}

	/* Der schwarze Balken als Seitenueberschrift */
	.grid_12.black h3,
	.black > h3 {
		margin: 4px 0;
	}


	/* --- Tabellen ------------------------------------------------------- */

	/* Mehrere Tabellen tragen width="280" / "500" / "600" im HTML */
	table {
		max-width: 100% !important;
	}


	/* --- Formulare ------------------------------------------------------ */

	.reservationForm input,
	.reservationForm select,
	.reservationForm textarea {
		width: 100% !important;
		box-sizing: border-box;
	}

	#newsForm input#newsName,
	#newsForm input#newsEmail {
		width: 100% !important;
		box-sizing: border-box;
	}

	/* Fehlermeldungen sassen absolut positioniert rechts und ragten
	   dadurch aus dem Bild */
	div.error {
		position: static;
		right: auto;
		margin-top: 4px;
	}

	.thanksRes {
		margin-top: 60px;
		margin-bottom: 60px;
	}

	.thanksResMulti {
		margin-top: 40px;
		margin-bottom: 40px;
	}


	/* --- Reservierungs-Widget ------------------------------------------- */

	/* Das Widget braucht auf dem Telefon weniger Buehne als am Desktop,
	   sonst klafft unter dem Formular eine grosse weisse Flaeche. */
	.reservierungWidget {
		padding: 0 0 10px;
	}

	.reservierungWidget .widgetBuehne,
	.reservierungWidget iframe {
		min-height: 540px;
	}


	/* --- Seitenfuss ----------------------------------------------------- */

	/* Der Glaeser-Streifen ueber dem Fuss ist auf dem Telefon nur eine
	   leere Flaeche mit zwei winzigen Grafiken */
	.footerTop {
		height: 14px;
		background: none;
	}

	footer {
		padding-top: 6px;
		padding-bottom: 24px;
	}

	/* Die drei Fussspalten sauber voneinander trennen */
	footer .container_12 > .grid_4,
	footer .container_12 > div,
	footer .container_12 > article {
		padding: 18px 0 4px;
		border-top: 1px dashed #5c5c55;
	}

	footer .container_12 > *:first-child {
		border-top: none;
		padding-top: 6px;
	}

	footer h3 {
		margin-bottom: 4px;
	}

	footer blockquote {
		margin-bottom: 16px;
	}

	footer blockquote p {
		margin-bottom: 6px;
	}

	/* Die Zitatgrafik nimmt auf dem Telefon zu viel Raum */
	footer blockquote p > img {
		display: none;
	}

	footer blockquote p.author {
		margin-top: 0;
		font-size: 16px;
	}

	/* Sitemap als ruhige Liste mit klaren Tippflaechen */
	footer ul li a,
	footer .grid_4 > a {
		display: block;
		padding: 4px 0;
		line-height: 19px;
	}

	/* Die Sitemap-Links stehen alle zusammen in EINEM <li> und sind im HTML
	   mit <br /> getrennt; in den Quicklinks ebenso. Da die Links hier zu
	   Blockelementen werden, erzeugt jedes <br /> zusaetzlich eine leere
	   Zeile - daher die doppelt so grossen Abstaende. Die Umbrueche sind
	   jetzt ueberfluessig. */
	footer br {
		display: none;
	}

	footer ul.social {
		padding-top: 6px;
	}

	footer ul.social li a {
		display: inline-block;
		padding: 0;
	}
}


@media screen and (max-width: 620px) {

	/* --- Schriftgroessen ------------------------------------------------ */

	h1 {
		font-size: 30px;
		line-height: 40px;
	}

	h1 span {
		font-size: 21px;
	}

	h2 {
		font-size: 21px;
		line-height: 32px;
	}

	h3 {
		font-size: 19px;
		line-height: 29px;
	}

	/* --- Fliesstext ----------------------------------------------------- */

	/* Umflossene Bilder lassen neben sich zu wenig Platz fuer Text */
	p img {
		float: none;
		display: block;
		margin: 0 0 12px 0;
	}

	/* Preis stand rechts neben der Bezeichnung - untereinander lesbarer */
	.menuItem .price {
		float: none;
		display: block;
	}

	a.button {
		display: inline-block;
		margin-bottom: 6px;
	}

	.headerGoogle iframe {
		height: 240px !important;
	}

	.reservierungWidget .widgetBuehne,
	.reservierungWidget iframe {
		min-height: 580px;
	}

	/* Grosse Abstandshalter zusammenziehen */
	.spacer_40px,
	.spacer_50px,
	.spacer_60px,
	.spacer_70px,
	.spacer_80px {
		height: 24px;
	}
}