/* ==========================================================
   responsive.css -- angelegt am 15.09.2026

   Wird NACH style.css geladen und aendert dort nichts, solange das
   Fenster breit genug ist. Die Seite ist auf ein festes 900er Raster
   gebaut (2014); unterhalb davon wird es hier aufgeloest.

   Bewusst klein gehalten: keine neue Gestaltung, nur die festen
   Breiten weich machen und die Navigation umbrechen lassen. Am
   Desktop sieht alles aus wie vorher.
   ========================================================== */


/* ----------------------------------------------------------
   Bis 960 Pixel: das 900er Raster aufloesen
   ---------------------------------------------------------- */
@media (max-width: 960px)
{
	/* Alles, was auf 900 oder 880 Pixel festgenagelt ist. #pagesub ist
	   der Balken mit dem Seitentitel - er hat keine eigene Klammer und
	   schob deshalb die ganze Seite seitwaerts. */
	.nav_wrapper,
	#content,
	.bigone,
	#login_container,
	#login_container2,
	#pagesub
	{
		width: auto;
		max-width: 900px;
		padding-right: 12px;
		padding-left: 12px;

		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		        box-sizing: border-box;
	}

	/* Die Spalten des Rasters stehen untereinander statt nebeneinander.
	   .grids ist die Textspalte der About-Seite - sie steht auf 560 Pixel
	   fest, dadurch lief der Text aus dem Kasten. */
	.grid05,
	.grid1,
	.grid2,
	.grid25,
	.grid3,
	.grids,
	.justifyabout
	{
		float: none;

		width: auto;
		margin-right: 0;
		margin-left: 0;
	}

	/* Das Bild auf der About-Seite: 400 Pixel Mindesthoehe bei freier
	   Breite verzerren es auf schmalen Schirmen in die Laenge. Ueber die
	   volle Breite wirkte es erschlagend, deshalb 80 Prozent und mittig. */
	.aboutimg
	{
		display: block;
		float: none;

		width: 80%;
		height: auto !important;
		min-height: 0 !important;

		/* Unten Luft, sonst sitzt das Bild auf der Kastenkante. */
		margin: 0 auto 16px;
	}

	/* Der graue Balken hat 40 Pixel feste Hoehe, die Ueberschrift darin
	   eine feste Zeilenhoehe von 40 Pixeln und steht links angeschlagen.
	   Bricht ein Titel auf zwei Zeilen um - "PREMIERE ..." auf der
	   Startseite, "Bookings / Remix Anfragen / Anliegen" unter Kontakt -,
	   stand die zweite Zeile unterhalb des Balkens im Weissen. */
	.newsheader
	{
		height: auto;
		min-height: 40px;
		overflow: hidden;
	}

	.news h2,
	.newse h2,
	#about h2
	{
		font-size: 14pt;
		line-height: 1.35;

		float: none;

		padding: 9px 10px;
	}

	/* Der Textspalte der About-Seite kam ihr seitlicher Abstand aus dem
	   Aussenrand von 10 Pixeln - den setzt die Regel darueber auf null,
	   weil die uebrigen Rasterspalten die Kaesten selbst sind. Hier also
	   als Innenabstand zurueck, sonst klebt der Text am Kastenrand. */
	.grids,
	.justifyabout
	{
		padding-right: 10px;
		padding-left: 10px;

		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		        box-sizing: border-box;
	}

	/* Das Logofeld neben den News ist reine Zierde und faellt weg,
	   bevor es unter dem Text einen leeren Block hinterlaesst. */
	.grid05.newspic
	{
		display: none;
	}

	/* Bilder und eingebettete Player bleiben im Rahmen */
	img,
	iframe
	{
		max-width: 100%;
	}

	/* Formularfelder ueber die volle Breite - die 860 Pixel stehen in
	   style.css mit !important, deshalb hier ebenfalls. */
	.linput2,
	.linput3
	{
		width: 100% !important;

		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		        box-sizing: border-box;
	}

	/* 200 Pixel Abstand ueber dem Kontaktformular sind auf einem
	   schmalen Schirm eine leere Seite - 20 waren dann aber zu knapp,
	   das Formular klebte am Kasten darueber. 32 am 16.09.2026. */
	.topme
	{
		margin-top: 32px !important;
	}

	/* Hier schwimmt der Kasten nicht mehr, also wirkt .topme wie
	   gedacht - der Zuschlag von der Desktopfassung waere doppelt. */
	#login_container2 .news
	{
		margin-bottom: 0;
	}

	/* Die Zeilen des Kontaktformulars stehen auf 880 Pixel fest und
	   werden zusaetzlich 30 Pixel nach links gezogen - dadurch lief das
	   Formular rechts aus dem Bild. */
	#login_container2 ul
	{
		padding-left: 0;
	}

	#login_container2 li
	{
		width: auto;
		margin-left: 0;
	}

	/* Den Abstand zur Fusszeile setzt die Fusszeile selbst, siehe
	   .copyright in style.css. Hier nur etwas knapper. */
	.copyright
	{
		/* Auch hier bringt der letzte Beitrag 10 Pixel eigenen Rand mit. */
		padding-top: 8px;
		padding-bottom: 18px;
	}

	/* ----------------------------------------------------------
	   Der Adminbereich unter /l/

	   Die Seiten dort binden dieselbe Stilvorlage ein, waren aber nie
	   fuer schmale Schirme gedacht: Anmeldefeld 400 Pixel, Titelfeld
	   860, Liste 800, die beiden Felder der Releasezeile 420 und 629.
	   ---------------------------------------------------------- */
	#login_container
	{
		max-width: 400px;
		height: auto;
	}

	/* Auch das Anmeldeformular ist eine Aufzaehlung: Die 40 Pixel
	   Einrueckung des Browsers schoben es nach rechts aus der Mitte. */
	#login_container ul
	{
		margin: 0;
		padding-left: 0;
	}

	.linput,
	.spaceli
	{
		width: 100%;

		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		        box-sizing: border-box;
	}

	.lsubmit
	{
		width: 100%;
		margin-left: 0;
	}

	/* Titel-, Text- und Releasefelder der Bearbeitungsseiten */
	.news_titlelinput,
	.news_titlelinput2,
	.news_titlelinput5,
	.news_titlelinput6,
	.news_titlelinput7,
	.news_textinput,
	.admin_input2,
	.admin_file2
	{
		float: none;

		width: 100%;

		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		        box-sizing: border-box;
	}

	/* Die Felderlisten sind Aufzaehlungen. Der Browser rueckt die um
	   40 Pixel ein - die Felder standen dadurch nach rechts versetzt und
	   nicht unter dem grauen Balken. */
	.admin_post
	{
		margin: 0;
		padding: 0 10px;
	}

	/* Die beiden Felder der Bilddateizeile liegen frei ueber ihrer
	   Zeile. Ohne linke Kante beginnen sie an der Innenkante und ragen
	   um das Polster nach rechts hinaus - die Zeile war 8 Pixel
	   breiter als die Felder darueber. */
	.admin_input2,
	.admin_file2
	{
		left: 0;
	}

	.admin_input,
	.admin_input2,
	.admin_text,
	.admin_file,
	.admin_submit
	{
		width: 100%;

		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		        box-sizing: border-box;
	}

	/* Die Trennstriche zwischen den beiden Sprachverweisen. Stehen die
	   Verweise untereinander, trennen sie nichts mehr. */
	.nurbreit
	{
		display: none;
	}

	/* Untereinander zaehlt die Reihenfolge: erst die Datei waehlen,
	   dann hochladen. Nebeneinander ergab die Quelltextfolge von
	   selbst das richtige Bild, weil beide nach rechts schwimmen. */
	.newse .newsheader
	{
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;

		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
	}

	.newse .newsheader .prettysubmit
	{
		-webkit-box-ordinal-group: 3;
		    -ms-flex-order: 2;
		        order: 2;
	}

	/* Untereinander gestapelt klebten die vier Zeilen - Englisch,
	   Deutsch, Datei, Hochladen - zu einem einzigen grauen Block
	   zusammen und sahen nicht mehr nach vier Moeglichkeiten aus.
	   Also den Balken durchsichtig machen und jede Zeile fuer sich
	   einfaerben; dazwischen steht dann der Seitenhintergrund. */
	.newse .newsheader
	{
		background: none;
	}

	.newse .newsheader > a
	{
		display: block;

		background: #444;
	}

	.newse .newsheader > a + a
	{
		margin-top: 6px;
	}

	/* Hochladen: zwei rechtsbuendige Kloetzchen von 100 Pixeln, die im
	   Balken uebereinanderrutschen. Untereinander ueber die volle
	   Breite ist auf einem Telefon das Richtige. */
	.prettysubmit,
	.prettysubmit1
	{
		display: block;
		float: none;

		width: 100%;
		margin-top: 6px;
	}

	/* Dateiwahl und Hochladen gehoeren zusammen - zwischen ihnen nur
	   ein Spalt, nicht derselbe Abstand wie zu den Verweisen darueber. */
	.newse .newsheader .prettysubmit
	{
		margin-top: 2px;
	}

	.prettysubmit1 input,
	.prettysubmit1 p
	{
		width: 100%;
	}

	.prettysubmit1 p
	{
		line-height: 40px;

		margin: 0;
		padding-left: 0;

		text-align: center;
	}

	/* Die Liste der Beitraege und Releases */
	.newtable
	{
		width: auto;
		margin: 10px;
	}

	.newtable td
	{
		padding: 6px 8px;
	}

	/* Die Releasekacheln sind 120 Pixel breit und schwimmen nach links.
	   Auf ein Telefon passen zwei nebeneinander - die letzte Reihe blieb
	   dann links stehen und der ganze Block sass aus der Mitte. Ohne
	   Schwimmen lassen sie sich mittig setzen. */
	#releaseliste
	{
		text-align: center;
	}

	#releaseliste .release
	{
		float: none;

		display: inline-block;
		margin: 12px;
	}

	/* Die Titelliste bleibt seitwaerts scrollbar - auf einem Telefon
	   ist das eine Wischgeste und damit richtig. Nur die einzelnen
	   Kacheln werden schmaler. */
	.track
	{
		width: 300px;
		margin: 16px;
	}
}


/* ----------------------------------------------------------
   Bis 600 Pixel: Telefon
   ---------------------------------------------------------- */
@media (max-width: 600px)
{
	/* Die Kopfleiste hat feste Hoehen - sobald das Menue umbricht,
	   wuerde es darunter abgeschnitten. */
	nav,
	#nav_top,
	#nav_bot,
	.nav_wrapper
	{
		height: auto;
		min-height: 0;
	}

	#nav_top
	{
		overflow: visible;
		padding-bottom: 8px;
	}

	/* Schriftzug und Symbole untereinander statt nebeneinander */
	h1
	{
		font-size: 20pt;
		line-height: 50px;

		float: none;

		padding-top: 4px;

		text-align: center;
	}

	/* Das Logo neben dem Schriftzug - nur hier, am Rechner bleibt es
	   beim reinen Schriftzug.

	   Rund zugeschnitten: img/logo.png ist ein Quadrat ohne
	   Alphakanal, und sein Dunkel (24 bis 33) ist dunkler als die
	   Kopfleiste (46). Ungeschnitten stuende dort ein sichtbares
	   Kaestchen. Das Emblem selbst ist ein Kreis, der Zuschnitt
	   nimmt also nur den Hintergrund weg.

	   Es haengt in der bestehenden Zeile: 40 Pixel neben einer
	   Zeilenhoehe von 50 - die Kopfleiste wird dadurch keinen Pixel
	   hoeher. Ergaenzt am 16.09.2026. */
	h1::before
	{
		content: "";

		display: inline-block;
		vertical-align: middle;

		width: 40px;
		height: 40px;
		margin-right: 10px;

		border-radius: 50%;
		background: url(../img/logo.png?v=1421584204) center / contain no-repeat;
	}

	.social_buttons
	{
		float: none;

		height: auto;
		padding-bottom: 6px;

		text-align: center;
	}

	.social_buttons a
	{
		display: inline-block;
	}

	/* Das Menue bricht um und bleibt mittig */
	#main_menu
	{
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;

		float: none;

		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		-webkit-box-pack: center;
		   -ms-flex-pack: center;
		 justify-content: center;

		height: auto;
		padding: 4px 0;
	}

	#main_menu li
	{
		float: none;

		height: auto;
		padding: 0 10px;
	}

	#main_menu li a
	{
		line-height: 36px;
	}

	.login_btn
	{
		float: none;

		margin-top: 0;
		margin-right: 0;
		padding-bottom: 6px;

		text-align: center;
	}

	/* Die Titelkacheln fast auf Schirmbreite */
	.track
	{
		width: 86vw;
		margin: 12px;
	}

	/* Die Titelliste startet zugeklappt. Ein Tippen auf den Pfeil
	   oeffnet sie. */
	header
	{
		display: none;
	}

	/* Der Pfeil zeigt sofort nach unten. Bis 16.09.2026 setzte ihn erst
	   das JavaScript - sichtbar als kurzes Umspringen nach dem Laden. */
	#player
	{
		background-image: url(../img/pd.png?v=1403798903);
	}

	.copyright
	{
		/* Nur seitlich - oben und unten stehen schon in der 960er Stufe. */
		padding-right: 12px;
		padding-left: 12px;
	}
}