@charset "UTF-8";

/* Globale Festlegungen fuer Farben */
/* Hintergruende - Body=dunkelgrau=666 - Seite+Kopf+Formularausgabe=weiss=fff - Menue+Formular+Formularausgabe=mittelgrau=ddd - Textarea_Ausgabe+Button=hellgrau=eee */
/* Texte - Links+Button=balu==00f - Text=schwarz=000 */
/* Rahmen - Seite+Button+Formulareingabe=schwarz=000 - Formularausgabe=mittelgrau=ddd */

/* Font: Inter, Designer: Rasmus Andersson: Lizenz: Open Font License, Quelle: github.com/rsms/inter/tree/master/docs/font-files */
@font-face { font-family:'Inter'; font-style:normal; font-weight:normal; font-display:swap; src:url("../fonts/Inter-Regular.woff2?v=3.19") format("woff2"), url("../fonts/Inter-Regular.woff?v=3.19") format("woff"); } /* font-weight:400 als font-weight:normal verwenden */
@font-face { font-family:'Inter'; font-style:normal; font-weight:bold; font-display:swap; src:url("../fonts/Inter-SemiBold.woff2?v=3.19") format("woff2"), url("../fonts/Inter-SemiBold.woff?v=3.19") format("woff"); } /* font-weight:700 als font-weight:bold verwenden */

/* Hintergrund */
body { width:640px; background-color:#888; margin:0px; padding:0px; transform:scale(1.0); transform-origin:0 0; }

/* Kopfbereich und Fusszeile einspaltig mit Rand */
div.kopf { width:554px; height:54px; background-color:#ddd; margin:0px; padding:6px 15px 7px 15px; border-width:1px; border-style:solid; border-color:#000; }
div.kopf2 { width:554px; height:19px; background-color:#ddd; margin:0px; padding:6px 15px 7px 15px; border-width:1px; border-style:solid; border-color:#000; }
/* Fusszeile einspaltig mit Rand */
div.fuss { width:554px; height:19px; background-color:#ddd; margin:0px; padding:6px 15px 7px 15px; border-width:1px; border-style:solid; border-color:#000; }
p.menue_text { text-align:justify; font-family:Inter,Verdana,sans-serif; font-weight:normal; font-size:14px; line-height:18px; color:#000; margin:0px; padding:0px; }
img.bild_logo0  { float:left; margin:-7px 15px 0px -16px; padding:0px; border-width:1px; border-style:solid; border-color:#000; width:32px; height:32px; }
img.bild_logo1  { float:left; margin:-7px 15px 35px -16px; padding:0px; border-width:1px; border-style:solid; border-color:#000; width:32px; height:32px; }
/* fuer Menuebereich, Inhalt und Fusszeile */
span.text_rechts_rand { text-align:right; float:right; margin:0px; }
span.text_links_rand { text-align:left; float:left; margin:0px; }

.linie { margin:8px 0px 5px 0px; padding:0px; border-width:0px; height:1px; width:554px; }
.linie540 { margin:8px 0px 5px 0px; padding:0px; border-width:0px; height:1px; width:540px; }

/* gesamter Inhalt ohne Kopfbereich, Menuebereich und Fusszeile mit Rand */
div.inhalt { width:554px; background-color:#fff; margin:0px; padding:9px 15px 11px 15px; border-width:0px 1px; border-style:solid; border-color:#000; }
.mit_strich { column-rule-width:1px; column-rule-color:#000; column-rule-style:solid; } /* nicht mehr verwendet */
.ohne_strich { column-rule-width:1px; column-rule-color:#fff; column-rule-style:solid; }
.zweispaltig { column-count:2; column-width:258px; column-gap:30px; column-fill:balance; }
.dreispaltig { column-count:3; column-width:164px; column-gap:30px; column-fill:balance; }
.siebenspaltig { column-count:7; column-width:50px; column-gap:30px; column-fill:balance; } /* fuer s12_05.htm */

/* Seiteninhalt Text einspaltig */
p { text-align:justify; font-family:Inter,Verdana,sans-serif; font-weight:normal; font-size:14px; line-height:18px; color:#000; margin:0px; padding:0px; }
p.text_block { text-align:justify; font-family:Inter,Verdana,sans-serif; font-weight:normal; font-size:14px; line-height:18px; color:#000; margin:0px; padding:0px; }
p.text_links { text-align:left; font-family:Inter,Verdana,sans-serif; font-weight:normal; font-size:14px; line-height:18px; color:#000; margin:0px; padding:0px; }
p.text_rechts { text-align:right; font-family:Inter,Verdana,sans-serif; font-weight:normal; font-size:14px; line-height:18px; color:#000; margin:0px; padding:0px; }
p.text_mitte { text-align:center; font-family:Inter,Verdana,sans-serif; font-weight:normal; font-size:14px; line-height:18px; color:#000; margin:0px; padding:0px; }
h1 { font-weight:bold; text-align:left; font-family:Inter,Verdana,sans-serif; font-weight:bold; font-size:18px; line-height:22px; color:#000; margin:0px; padding:0px; }

/* Seitenrahmen fuer Texte zweispaltig */
div.spalte_10_90_links { float:left; width:50px; background-color:#fff; margin:0px; padding:0px; border-width:0px; }
div.spalte_10_90_rechts { width:486px; background-color:#fff; margin:0px 0px 0px 70px; padding:0px; border-width:0px; }
div.spalte_20_80_links { float:left; width:106px; background-color:#fff; margin:0px; padding:0px; border-width:0px; }
div.spalte_20_80_rechts { width:430px; background-color:#fff; margin:0px 0px 0px 126px; padding:0px; border-width:0px; }
div.spalte_50_50_links_linie { float:left; width:268px; background-color:#fff; margin:5px 0px 0px 0px; padding:0px 10px 0px 0px; border-style:solid; border-color:fff; border-width:0px 1px 0px 0px; }
div.spalte_50_50_rechts_linie { width:268px; background-color:#fff; margin:5px 0px 0px 278px; padding:0px 0px 0px 10px; border-style:solid; border-color:fff; border-width:0px 0px 0px 1px; }
div.spalte_70_30_links { float:left; width:372px; background-color:#fff; margin:5px 0px 0px 0px; padding:0px 10px 0px 0px; border-width:0px; }
div.spalte_70_30_rechts { width:160px; background-color:#fff; margin:5px 0px 0px 372px; padding:0px 0px 0px 10px; border-width:0px; }

/* Seitenrahmen fuer alle Formulare */
div.formular { width:534px; background-color:#ddd; margin:10px 0px; padding:5px 10px; border-width:1px; border-style:solid; border-color:#000; }
/* fuer Gaestebuch und Logbuch */
div.formular_20_80_links { float:left; background-color:#ddd; width:106px; margin:5px 0px 0px 0px; padding:0px; border-width:1px; }
div.formular_20_80_rechts { background-color:#ddd; width:426px; margin:5px 0px 0px 106px; padding:0px; border-width:1px; }
/* fuer Berechnungen */
div.formular_50_50_links { float:left; background-color:#ddd; width:266px; margin:5px 0px 0px 0px; padding:0px; border-width:0px; }
div.formular_50_50_rechts { background-color:#ddd; width:266px; margin:5px 0px 0px 266px; padding:0px; border-width:0px; }
/* fuer Bakenfahrplan */
div.formular_70_30_links { float:left; background-color:#ddd; width:372px; margin:5px 0px; padding:0px; border-width:0px; }
div.formular_70_30_rechts { background-color:#ddd; width:160px; margin:5px 0px 5px 372px; padding:0px; border-width:0px; }
/* fuer Hinweiskaesten */
div.formular_100 { background-color:#ddd; width:532px; margin:5px 0px; padding:0px; border-width:0px; }

/* Panorama-Inhalt */
input.panoramaslider { width:550px; max-width:100%; margin:0px 0px 5px 0px; padding:0px; }
img.panoramabild { width:550px; max-width:100%; height:412px; border-width:2px; border-style:solid; border-color:#00f; margin:5px 0px; padding:0px; object-fit:cover; object-position:calc(var(--percentage, 0)*1%); }

/* alle Textareas linksbuendig */
textarea.feld { background-color:#fff; text-align:left; font-family:Inter,Verdana,sans-serif; font-weight:normal; font-size:14px; line-height:18px; color:#000; margin:0px 0px 5px 0px; padding:2px 4px; border-width:1px; border-style:solid; border-color:#000; resize:none; }
textarea.feld_aus { background-color:#eee; text-align:left; font-family:Inter,Verdana,sans-serif; font-weight:normal; font-size:14px; line-height:18px; color:#000; margin:0px 0px 5px 0px; padding:2px 4px; border-width:1px; border-style:solid; border-color:#000; resize:none; }

/* allgemeine Formatierungen */
br.absatz { clear:both; }

/* Bilder rechts und links im Inhalt */
img.links0 { float:left; margin:5px 10px 5px 0px; border-width:0px; } /* ohne Rand fuer Logos, nicht fuer Button in der Zeile */
img.links1 { float:left; margin:5px 10px 5px 0px; border-width:1px; border-style:solid; } /* mit 1px in der Regel schwarzen Rand */
img.links2 { float:left; margin:5px 10px 5px 0px; border-width:2px; border-style:solid; } /* mit 2px fuer Bildlinks */
img.rechts0 { float:right; margin:5px 0px 5px 10px; border-width:0px; } /* ohne Rand fuer Logos, nicht fuer Button in der Zeile */
img.rechts1 { float:right; margin:5px 0px 5px 10px; border-width:1px; border-style:solid; } /* mit 1px in der Regel schwarzen Rand */
img.rechts2 { float:right; margin:5px 0px 5px 10px; border-width:2px; border-style:solid; } /* mit 2px fuer Bildlinks */
img.mitte2 { margin:5px 0px 5px 0px; border-width:2px; border-style:solid; } /* mit 2px fuer Bildmitte */

/* Einzelbilder - fuer bild.htm */
img.anzeige2 { margin:0px 0px -5px 0px; padding:0px; border-width:2px; border-style:solid; }

/* Panorama - fuer bildp.htm */
img.anzeigep2 { margin:0px 0px -5px 0px; padding:0px; border-width:2px; border-style:solid; }

img.formel0 { margin:10px 10px 10px 0px; border-width:0px; }

/* alle kleinen Bilder-Buttons in Text Menue und Impressum, die in der Zeile liegen, Hoehe immer 14px, Breite proportional */
img.img_button0 { margin:0px 0px -2px 0px; padding:0px; border-width:0px; height:14px; }
/* fuer Adress-Bild in s1_00.htm, Breite proportional */
img.img_button0a { margin:0px 0px -3px 0px; padding:0px; border-width:0px; height:14px; }

/* alte noch verwendete Panorama-Ansicht mit 3 Bildern nebeneinander */
img.panorama3_links2 { float:left; margin:10px 0px 10px 40px; border-width:2px 0px 2px 2px; border-style:solid; }
img.panorama3_mitte2 { float:left; margin:10px 0px 10px 0px; border-width:2px 0px; border-style:solid; }
img.panorama3_rechts2 { float:left; margin:10px 40px 10px 0px; border-width:2px 2px 2px 0px; border-style:solid; }

/* alte noch verwendete Panorama-Ansicht mit 2 Bildern nebeneinander */
img.panorama2_links2 { float:left; margin:10px 0px 10px 124px; border-width:2px 0px 2px 2px; border-style:solid; }
img.panorama2_rechts2 { float:left; margin:10px 124px 10px 0px; border-width:2px 2px 2px 0px; border-style:solid; }

/* Eingabe-Button ueberall */
input.button { height:24px; background-color:#eee; font-family:Inter,Verdana,sans-serif; font-weight:normal; font-size:14px; line-height:16px; color:#00f; margin:0px; padding:3px 7px; border-width:1px; border-style:solid; border-color:#00f; border-radius:14px; }

b { font-weight:bold; }
u { text-decoration:underline; }
i  { font-style:normal; } /* keine Unterstuetzung fuer kursive Schrift */
sup { font-size:9px; font-weight:bold; vertical-align:4px; padding-left:1px; }
sub { font-size:9px; font-weight:bold; vertical-align:0px; padding-left:1px; }

/* Breite fuer Ein- und Ausgabefelder, Textareas, Auswahllisten */
.w25 { width:25px; }
.w50 { width:50px; }
.w75 { width:75px; }
.w100 { width:100px; }
.w150 { width:150px; }
.w200 { width:200px; }
.w250 { width:250px; }
.w300 { width:300px; }
.w350 { width:350px; }
.w400 { width:400px; }
.w416 { width:416px; }

/* alle Auswahllisten */
select.auswahl { height:24px; background-color:#fff; font-family:Inter,Verdana,sans-serif; font-weight:normal; font-size:14px; line-height:18px; color:#000; margin:0px; padding:2px 4px; border-width:1px; border-style:solid; border-color:#000; }

/* fuer Ein- und Ausgabefelder */
.rechts { text-align:right; }
.links { text-align:left; }

/* alle Eingabefelder links- oder rechtsbuendig */
input.text { background-color:#fff; font-family:Inter,Verdana,sans-serif; font-weight:normal;
font-size:14px; line-height:18px; color:#000; margin:0px; padding:2px 4px; border-width:1px; border-style:solid; border-color:#000; }

/* alle Ausgabefelder links- oder rechtsbuendig */
input.text_aus { background-color:#ddd; font-family:Inter,Verdana,sans-serif; font-weight:normal;
font-size:14px; line-height:18px; color:#000; margin:0px; padding:2px 4px; border-width:1px; border-style:solid; border-color:#ddd; }

/* Ausgabefelder Fliesstext rechtsbuendig */
input.text_fliess { background-color:#fff; text-align:right; font-family:Inter,Verdana,sans-serif; font-weight:normal;
font-size:14px; line-height:18px; color:#000; margin:0px; padding:0px; border-width:0px; }

/* alle Links, auch Bilder mit Rand */
a, a:link, a:active, a:visited, a:focus, a:hover { font-family:Inter,Verdana,sans-serif; font-weight:normal; font-size:14px; line-height:18px; color:#00f; text-decoration:none; }

/* Links im Menue */
a.ohneumbruch { white-space: nowrap; }

/* Kennzeichnung externer Link auf weiß, nicht fuer Bilder verwenden da sonst Grafik irgendwo */
a:link.ex, a:active.ex, a:visited.ex, a:focus.ex, a:hover.ex { font-family:Inter,Verdana,sans-serif; font-weight:normal; font-size:14px; line-height:18px; color:#00f; text-decoration:none; background-image:url("../b/extern.gif"); background-position:right; background-repeat:no-repeat; background-size:14px 14px; margin:0px 0px -2px 0px; padding:0px 17px 0px 0px; }
a:link.dl, a:active.dl, a:visited.dl, a:focus.dl, a:hover.dl { font-family:Inter,Verdana,sans-serif; font-weight:normal; font-size:14px; line-height:18px; color:#00f; text-decoration:none; background-image:url("../b/download.gif"); background-position:right; background-repeat:no-repeat; background-size:14px 14px; margin:0px 0px -2px 0px; padding:0px 17px 0px 0px; }

/* fuer Spiele */
canvas.standard { margin:5px 0px 0px 0px; padding:0px; border-width:1px; border-style:solid; border-color:#000; };