@charset utf-8;

/* This CSS resource incorporates links to font software which is the valuable copyrighted property of Monotype and/or its suppliers. You may not attempt to copy, install, redistribute, convert, modify or reverse engineer this font software. Please contact Monotype with any questions regarding Web Fonts: http://www.fontshop.com */
@font-face{
	font-family:"FetteMitD W03 Regular";
	src:url("/font/DIN1451.eot?#iefix");
	src:url("/font/DIN1451.eot?#iefix") format("eot"),url("/font/DIN1451.woff2") format("woff2"),url("/font/DIN1451.woff") format("woff"),url("/font/DIN1451.ttf") format("truetype");
}

@keyframes blinkmenue { 
   50% { background-color: #000000; } 
}

@media screen, projection
{
	html, body {
		margin: 0;
		padding: 0;
		font-family: 'FetteMitD W03 Regular';
		font-style: normal;
		font-size: 13pt;
		color: #000000;
	}
	body {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
	}
	:root {
		--fit-scale: 1;
	}
	ul{
		list-style: none;
		padding: 0;
		margin: 0;
	}
	
	a {
		text-decoration:none;
	}

	input[type=text] {
		font-family: 'FetteMitD W03 Regular';
		width: 50%;
		padding: 5px;
	}
	input[type=submit] {
		font-family: 'FetteMitD W03 Regular';
		background: #333333;
		color: #FFFFFF;
		padding:5px 25px;
		border-radius: 5px;
	}
	input[type=submit]:hover {
		background: #999999;
		color: #FFFFFF;
		cursor: pointer;
	}

	textarea{
		font-family: 'FetteMitD W03 Regular';
		width:98%;
	}
	
	#Hintergrund {
	    width: 100%; 
	    height: 100%; 
	    position: fixed;
	    left: 0px; 
	    top: 0px; 
	    z-index: -1;
	    background-size: 100%;
	}
	
	.BackgroundStretch {
	    width:100%;
	    height:100%;
	}
	
	#Haupt {
		position: fixed;
		top: 50%;
		left: 50%;
		margin: 0;
		width: 1022px;
		height: 776px;
		border: 1px solid black;
		background-color: #000000;
		z-index: 1;
		transform: translate(-50%, -50%) scale(var(--fit-scale));
		transform-origin: center center;
	}
	
	#Kopf {
		width: 1020px;
		height: 120px;
		border: 1px solid #535353;
		background-color: #000000;
		color: #FFFFFF;
		overflow: hidden;
	}
	
	#Menue {
		width: 1022px;
		height: 40px;
		border: 1px solid #535353;
		background-color: #000000;
		color: #FFFFFF;
		overflow: visible;
		table-layout: fixed;
	}

	.Menuepunkt {
		height: 40px;
		font-size: 11pt;
		border: 0px solid #535353;
		cursor: pointer;
		text-align: center;
	}
	
	.Menuepunkt a {

		top: 0px;
		color: #FFFFFF;
	}

	.Menuelink {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		padding-top: 1px;
		position: relative;
		width: 100%;
		height: 100%;
		color: #FFFFFF;
		text-decoration: none;
	}

	.album-card {
		display: block;
		color: inherit;
		text-decoration: none;
	}

	a.selectbox1 {
		display: block;
		color: inherit;
		text-decoration: none;
	}
	
	.Menuepunkt .Mod {
		
		top: 0px;
		color: #FF9900;
	}
	
	.Menuepunkt:hover {
		background-color: #767676;
	}

	.Menuepunkt .blink-bar {
		position: absolute;
		bottom: 2px;
		left: 50%;
		transform: translateX(-50%);
		width: 80px;
		height: 2px;
		display: flex;
		gap: 2px;
	}
	.Menuepunkt .blink-seg {
		flex: 1;
		height: 2px;
	}

	.blink_text {

    	1.5s blinker step-end infinite alternate animation;
	   1.5s blinker step-end infinite alternate -webkit-animation;
	   1.5s blinker step-end infinite alternate -moz-animation;

    }

    @-moz-keyframes blinker {  
     	0% { opacity: 1.0; }
    	50% { opacity: 0.0; }
    	100% { opacity: 1.0; }
    
    }

    @-webkit-keyframes blinker {  
    	0% { opacity: 1.0; }
    	50% { opacity: 0.0; }
    	100% { opacity: 1.0; }

    }

    @keyframes blinker {  
    	0% { opacity: 1.0; }
    	50% { opacity: 0.0; }
    	100% { opacity: 1.0; }
    }



	#K1 {
		width: 212px;
		height: 120px;
		float: left;
	}

	#K2 {
		width: 594px;
		height: 120px;
		border-left: 1px solid #535353;
		float: left;
	}
	
	#K3 {
		width: 212px;
		height: 120px;
		border-left: 1px solid #535353;
		float: left;
	}	
	
	#clock {
		display: block;
		margin: 8px auto 0;
	}
	
	#themearea {
     	width: 100%;
     	position: relative;
         left: -15px;
	}
	
	#Inhalt {
		width: 1020px;
		height: 534px;
		border: 1px solid #535353;
		background-color: #FFFFFF;
		color: #000000;
		overflow-y: auto;
		background-image: url('images/background.png');
	}
	
	#Inhaltbox {
		margin: 15px;
	}
	
	#Fuss1 {
		width: 1020px;
		height: 28px;	
		border: 1px solid #535353;
		background-color: #000000;
		color: #FFFFFF;
		padding-bottom: 3px;
	}
	
	#Fuss2 {
		width: 1020px;
		height: 28px;	
		border: 1px solid #535353;
		background-color: #000000;
		color: #FFFFFF;
		padding-bottom: 3px;
	}
	
	
	#clear {
		clear: both;
		float: none;
	}
	
	.red {
		color: #FF0000;
	}

	.orange {
		color: #FF9900;
	}

	.green {
		color: #00CC00;
	}
	
	#HINWEIS {
		position: relative;
		top: 100px;
		color: #FF0000;
		font-size: 24pt;
		text-align: center;
		
		
	}
	
	#copyright {
		width: 1024px;
		height: 15px; 
		color: #FFFFFF;
		border: 1px solid #535353;
		display: none;
	}
	
	.splitflap {
		margin: 4px auto;
		-webkit-perspective-origin: top center;
		-moz-perspective-origin: top center;
		-ms-perspective-origin: top center;
		perspective-origin: top center;
		-webkit-perspective: 1000px;
		-moz-perspective: 1000px;
		-ms-perspective: 1000px;
		perspective: 1000px;
		}
	.splitflap .char {
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
		-ms-transform-style: preserve-3d;
		transform-style: preserve-3d;
		}

	#liveview {
		width: 498px;
		float: left;
		border: 0px solid #000000;
	}

	#liveview img{
		width: 498px;
	}

	#livestatus {
		width: 450px;
		height: 360px;
		float: left;
		margin-left: 25px;
		border: 0px solid #000000;
	}

	#snapshot {
		height: 134px;
		padding: auto;
		padding-top: 8px;
		border: 1px solid #000000;
	}

	#livestatus #button {
		width: 230px;
		height: 25px;
		color: #000000;
		background-color: #888888;
		border: 1px solid #000000;
		padding: auto;
		padding-top: 3px;
		cursor: pointer;
		text-align: center;
	}

	#livestatus #button:hover {
		background-color: #FF9900;
	}

	#snaplist {
		border: 0px solid #000000;
		margin-top: 25px;

	}

	#stats {
	  margin-left: 50px;
	}

	.circle-container {
	  display: block;
	  float: left;
	  margin-right: 60px;
	  margin-bottom: 45px;
	}

	.circle-container h3 {
	  display: block;
	  text-align: center;
	  font-size: 23.6pt;
	  line-height: 1.4em;
	  color: #363636;
	  text-shadow: 1px 1px 0 #FFFFFF;
	}	
	
	.circliful {
		position: relative; 
	}

	.circle-text, .circle-info, .circle-text-half, .circle-info-half {
		width: 100%;
		position: absolute;
		text-align: center;
		display: inline-block;
	}

	.circle-info, .circle-info-half {
		color: #999999;
	}

	.circliful .fa {
		margin: -10px 3px 0 3px;
		position: relative;
		bottom: 4px;
	}
	

	form .counter {
		position: relative;
		right: 15px;
  		float: right;
	}
	form .warning{color:#FF0000;}
	form .exceeded{color:#FF0000;}


	
	}

	#sidebar {
		width: 208px;
		height: 445px;
		border: 1px solid #000000;
		background-color: #EEEEEE;
		float: right;
		-moz-box-shadow:    3px 3px 5px 6px #CCCCCC;
		-webkit-box-shadow: 3px 3px 5px 6px #CCCCCC;
		box-shadow:         3px 3px 5px 6px #CCCCCC;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 10px;
	}

	#sidebar_tools {
		width: 228px;
		height: 45px;
		border: 1px solid #000000;
		background-color: #EEEEEE;
		float: right;
		-moz-box-shadow:    3px 3px 5px 6px #CCCCCC;
		-webkit-box-shadow: 3px 3px 5px 6px #CCCCCC;
		box-shadow:         3px 3px 5px 6px #CCCCCC;
		padding-top: 5px;
		margin-top: 2px;
		text-align: center;

	}

}

.sucheBox {
	display: block;
	background: #333;
	padding:15px;
	margin-bottom:10px;
	border-radius: 5px;
	color:#FFF;
}

{
    scrollbar-width: 6px; /* Für Firefox */
    scrollbar-color: #000000, #FF9900; /* Für Firefox */
}

/* Für Chrome, Edge und Safari */
::-webkit-scrollbar {
    width:6px; /* Breite der gesamten Scrollbar */
}

::-webkit-scrollbar-track {
    background: #000000; /* Hintergrund der Scroll-Leiste */
}

::-webkit-scrollbar-thumb {
    background: #FF9900; /* Farbe des Scrollbalkens */
}

::-webkit-scrollbar-thumb:hover {
    background: #FF0000; /* Farbe des Scrollbalkens beim Hover */
}


/* === Einheitlicher Scrollbalken für das Kommentar-Textfeld === */
/* Firefox */
#comment {
    scrollbar-width: thin;
    scrollbar-color: #ff9900 #000;      /* Thumb orange, Track schwarz */
}

/* Chrome, Edge, Safari */
#comment::-webkit-scrollbar {
    width: 10px;
}

#comment::-webkit-scrollbar-track {
    background: #000;                   /* schwarze Schiene */
    border-radius: 10px;                /* runde Kanten */
}

#comment::-webkit-scrollbar-thumb {
    background: #ff9900;                /* orange Scrollbalken */
    border-radius: 10px;                /* rund */
    border: 2px solid #000;             /* sauberer Abstand, keine Ecken */
}

#comment::-webkit-scrollbar-thumb:hover {
    background: #ff7f00;                /* etwas dunkler beim Hover */
}


/* ============================================================
   INFOSEITE – modernes Layout
   Wird in Admin per Class-Markup eingebaut (ohne <style>-Block,
   da TinyMCE inline styles strippt).
   ============================================================ */
.info-page { max-width: 880px; margin: 0 auto; color: #222; line-height: 1.7; font-size: 13pt; }
.info-page p { margin: 0 0 1rem 0; }
.info-page strong { color: #222; font-weight: 700; }
.info-page .orange { color: #ff9900; font-weight: 700; }
.info-page .danger { color: #d9342b; font-weight: 700; }
.info-page a { color: #ff9900; text-decoration: underline; text-underline-offset: 3px; }
.info-page a:hover { background: #fff5e6; text-decoration: none; }

/* Intro */
.info-page .info-intro {
    background: #fff5e6;
    border-left: 4px solid #ff9900;
    padding: 1.25rem 1.5rem;
    border-radius: 6px;
    margin: 0 0 2.5rem 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.info-page .info-intro p { margin: 0; font-size: 1.05rem; }

/* Inhaltsverzeichnis — ausgeblendet (vom Nutzer nicht gewünscht) */
.info-page .info-toc { display: none; }
.info-page .info-toc-off {
    border: 1px solid #e5e5e5;
    background: #fafafa;
    padding: 1.5rem 1.75rem;
    border-radius: 6px;
    margin: 0 0 3rem 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.info-page .info-toc-title {
    margin: 0 0 1rem 0;
    color: #ff9900;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.info-page .info-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    columns: 2;
    column-gap: 2.5rem;
}
.info-page .info-toc-list li { margin: 0.3rem 0; break-inside: avoid; }
.info-page .info-toc-list a {
    color: #222;
    text-decoration: none;
    display: block;
    padding: 0.25rem 0.5rem 0.25rem 0;
    border-radius: 3px;
}
.info-page .info-toc-list a:hover { color: #ff9900; background: transparent; }
.info-page .info-toc-list .num {
    display: inline-block;
    width: 1.9rem;
    color: #ff9900;
    font-weight: 700;
}

/* Abschnitte – als Karten-Boxen */
.info-page .info-section {
    position: relative;
    background: #ffffff;
    border: 1px solid #ececec;
    border-left: 4px solid #ff9900;
    border-radius: 8px;
    padding: 1.75rem 2rem;
    margin: 0 0 1.5rem 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.05);
    scroll-margin-top: 1rem;
}
/* Icon-Badge: aktiv wenn data-icon Attribut gesetzt ODER ID #pNN (Infoseite) */
.info-page .info-section[data-icon],
.info-page :is(#p01,#p02,#p03,#p04,#p05,#p06,#p07,#p08,#p09,#p10,#p11,#p12,#p13,#p14,#p15,#p16,#p17,#p18,#p19,#p20) {
    padding-left: 5rem;
}
.info-page .info-section[data-icon]::before,
.info-page :is(#p01,#p02,#p03,#p04,#p05,#p06,#p07,#p08,#p09,#p10,#p11,#p12,#p13,#p14,#p15,#p16,#p17,#p18,#p19,#p20)::before {
    content: "";
    position: absolute;
    left: 1.25rem;
    top: 1.75rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: #fff5e6;
    color: #ff9900;
    font-size: 1.3rem;
    line-height: 2.5rem;
    text-align: center;
    border: 1px solid #ffe3bf;
}
.info-page .info-section[data-icon]::before { content: attr(data-icon); }
.info-page .info-section h2 {
    color: #ff9900;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 1rem 0;
    padding: 0;
    border: 0;
    line-height: 1.3;
}
.info-page .info-section h2 .num {
    display: block;
    color: #bdbdbd;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 0.35rem 0;
}
.info-page .info-section > p:last-of-type,
.info-page .info-section > div:last-child { margin-bottom: 0; }

/* Icon-Mapping pro Punkt */
.info-page #p01::before { content: "\2139"; }      /* ℹ Info */
.info-page #p02::before { content: "\1F6A6"; }     /* 🚦 Ampel */
.info-page #p03::before { content: "\23F3"; }      /* ⏳ Sanduhr */
.info-page #p04::before { content: "\1F4A1"; }     /* 💡 Idee */
.info-page #p05::before { content: "\1F3A8"; }     /* 🎨 Design */
.info-page #p06::before { content: "\1F524"; }     /* 🔤 Sprache */
.info-page #p07::before { content: "\1F5A5"; }     /* 🖥 Monitor */
.info-page #p08::before { content: "\1F512"; }     /* 🔒 Datenschutz */
.info-page #p09::before { content: "\2709"; }      /* ✉ E-Mail */
.info-page #p10::before { content: "\1F4D6"; }     /* 📖 Gästebuch */
.info-page #p11::before { content: "\1F4CA"; }     /* 📊 Umfrage */
.info-page #p12::before { content: "\1F4F7"; }     /* 📷 Webcam */
.info-page #p13::before { content: "\1F5BC"; }     /* 🖼 Fotos */
.info-page #p14::before { content: "\2699"; }      /* ⚙ PHP-Version */
.info-page #p15::before { content: "\1F576"; }     /* 🕶 Zensur */
.info-page #p16::before { content: "\1F4F6"; }     /* 📶 Daten */
.info-page #p17::before { content: "\23F1"; }      /* ⏱ Zeit */
.info-page #p18::before { content: "\1F4AC"; }     /* 💬 Chat */
.info-page #p19::before { content: "\1F50D"; }     /* 🔍 Suche */
.info-page #p20::before { content: "\1F44B"; }     /* 👋 Abschluss */

/* Ampel-Farbbalken */
.info-page .info-ampel {
    display: inline-block;
    width: 44px;
    height: 14px;
    border-radius: 2px;
    vertical-align: middle;
    margin-right: 0.6rem;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
}
.info-page .info-ampel-r { background: #ff0000; }
.info-page .info-ampel-y { background: #ff9900; }
.info-page .info-ampel-g { background: #00cc00; }
.info-page .info-ampel-b { background: #000000; }
.info-page .info-ampel-row { margin: 0.9rem 0; }
.info-page .info-ampel-row .desc {
    margin: 0.3rem 0 0.3rem 3.3rem;
    font-size: 0.95rem;
    color: #555;
}

/* Kontakt-Block */
.info-page .info-contact {
    background: #fafafa;
    border-left: 3px solid #ff9900;
    padding: 0.75rem 1rem;
    margin: 1.25rem 0 0 0;
    border-radius: 4px;
    font-size: 0.95rem;
}
.info-page .info-contact strong { color: #ff9900; }

/* Outro */
.info-page .info-outro {
    background: #fff5e6;
    border-left: 4px solid #ff9900;
    padding: 1.5rem 1.75rem;
    border-radius: 6px;
    margin: 2rem 0 0 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.info-page .info-outro p:last-child { margin-bottom: 0; }

/* Rote Hinweis-Card innerhalb einer Section */
.info-page .info-alert {
    background: #fdecea;
    border: 1px solid #f5c6c0;
    border-left: 4px solid #d9342b;
    color: #d9342b;
    padding: 1rem 1.25rem;
    border-radius: 6px;
    margin: 1.25rem 0;
    font-weight: 500;
    box-shadow: 0 2px 6px rgba(217,52,43,0.08);
}
.info-page .info-alert,
.info-page .info-alert *,
.info-page .info-alert strong,
.info-page .info-alert .danger,
.info-page .info-alert .orange {
    color: #d9342b !important;
}
.info-page .info-alert strong { font-weight: 700; }

/* Specs-Box (Webcam) – 2-Spalten-Grid, Labels und Werte sauber ausgerichtet */
.info-page .info-specs {
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin: 0.75rem 0 1rem 0;
}
.info-page .info-specs dl {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 1.5rem;
    row-gap: 0.4rem;
    align-items: baseline;
}
.info-page .info-specs dt {
    color: #ff9900;
    font-weight: 700;
    margin: 0;
}
.info-page .info-specs dd {
    margin: 0;
    color: #222;
}


/* === ÜBER MICH === */
.um-wrap {
    max-width: 880px;
    margin: 0 auto;
    padding: 0.75rem 0.5rem 2rem;
}

.um-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: #111;
    border-left: 4px solid #ff9900;
    border-radius: 8px;
    padding: 1rem 1.5rem;
    margin-bottom: 1.75rem;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}

.um-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid #ff9900;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}

.um-name {
    font-size: 1.45rem;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 0.3rem;
}

.um-tagline {
    font-size: 0.85rem;
    color: #999;
    letter-spacing: 0.04em;
}

/* === ÜBER MICH – BUTTONS === */
.um-btn-row {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-items: center;
    margin: 2.5rem auto;
}

.um-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 130px;
    height: 130px;
    background: #e8e8e8;
    border: 2px solid #cccccc;
    border-radius: 12px;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0,0,0,0.12);
}

.um-btn:hover {
    background: #ff9900;
    border-color: #ff9900;
    box-shadow: 0 6px 18px rgba(255,153,0,0.35);
}

.um-btn img {
    max-width: 70px;
    max-height: 70px;
    display: block;
}


/* ============================================================
   WEBARCHIV
   ============================================================ */
#webarchiv-page {
    max-width: 880px;
    margin: 0 auto;
    padding: 0.5rem 0 1.5rem;
    font-size: 0.92rem;
    color: #222;
}

/* Monats-Überschriften (h2/h3) – nur wenn nicht leer */
#webarchiv-page h2:not(:empty),
#webarchiv-page h3:not(:empty) {
    margin: 1.4rem 0 0.6rem;
    padding: 0.45rem 0.85rem;
    background: #f4f4f4;
    border-left: 4px solid #ff9900;
    border-radius: 5px;
    font-size: 1rem;
    color: #111;
    letter-spacing: 0.03em;
}
#webarchiv-page h2:empty,
#webarchiv-page h3:empty { display: none; }

/* Jahres-Überschriften (h1) */
#webarchiv-page h1 {
    font-size: 1.15rem;
    color: #ff9900;
    border-bottom: 2px solid #ff9900;
    padding-bottom: 0.3rem;
    margin: 1.5rem 0 0.75rem;
}

/* Einzel-Einträge */
#webarchiv-page p {
    margin: 0 0 0 0;
    padding: 0.3rem 0.7rem 0.3rem 0.9rem;
    border-left: 2px solid #e0e0e0;
    border-bottom: 1px solid #f0f0f0;
    line-height: 1.55;
}
#webarchiv-page p:empty { display: none; }

/* Fettgedruckte Datumsangaben */
#webarchiv-page strong,
#webarchiv-page b {
    color: #ff9900;
}

/* Links */
#webarchiv-page a {
    color: #ff9900;
    text-decoration: underline;
    text-underline-offset: 2px;
}
#webarchiv-page a:hover { color: #e07700; }

/* Tabellen (falls vorhanden) */
#webarchiv-page table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.75rem 0;
    font-size: 0.88rem;
}
#webarchiv-page td,
#webarchiv-page th {
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid #ececec;
    vertical-align: top;
}
#webarchiv-page td:first-child {
    color: #ff9900;
    white-space: nowrap;
    width: 110px;
}

/* Dunkle Info-Box (Galerie-Stil) – global verfügbar */
.page-info-box {
    background: linear-gradient(135deg, #2c3e50 0%, #000000 100%);
    border-radius: 10px;
    padding: 5px 20px;
    margin-bottom: 20px;
    color: white;
    text-align: center;
}
.page-info-box img {
    width: 22px;
    height: 22px;
}