/* Allgemein ================================================================== */ :root { --bgcol-form: rgba(0,0,0,0.5); /* Hintergrundfarbe Kontaktformular */ --bordercol-form: #aaa; /* Farbe des Rahmens um das Kontaktformular */ --footer-color: #666; /* Farbe der Schrift im Footer */ --color-list-item: var(--fed-navy); /* Farbe eines Listen-Punktes */ --color-main-text: #666; /* Textfarbe */ --color-background: white; /* Hintergrundfarbe gesamte Website */ --color-menuitem: #00CED1; /* Farbe aktive Menuepunkte und Footer */ --color-menuitem-hoover: #999; /* Farbe aktive Menuepunkte und Footer Hoover*/ --color-title: rgb(0,140,198); /* Farbe Überschriften */ --button-font-size: 100.01%; /* Schriftgrösse in Buttons */ --bgcol-search: rgba(0, 140, 198, 0.7); /* Hintergrundfarbe Kontaktformular */ /* Federation Light / Bundeswehr-Look */ --fed-bg: #F6F7F9; --fed-paper: #FFFFFF; --fed-text: #1C232B; --fed-navy: #0B2A4A; --fed-accent: #B21E2B; --fed-line: #D6DCE3; --fed-header-img: url("/data/Startseite/sample_pic_1.jpg"); /* Formular */ --bgcol-form: rgba(255, 255, 255, 0); --bordercol-form: var(--fed-line); /* Systemvariablen */ --color-background: var(--fed-bg); --color-main-text: var(--fed-text); --color-title: var(--fed-navy); --footer-color: #4B5563; } /* height 102% to force a scrollbar to prevent page jumping */ html { height:102%; margin: 0 0 0 0; padding:0 0 0 0; scroll-behavior: smooth !important; } @media (max-width: 1098px) { html { height:100%;} } /* * {margin:0;padding:0;} */ * {margin:0;} * {padding-top:0; padding-right:0; padding-bottom:0; } #background { width:100%; height:100%; position: absolute; z-index: -1; top: 0; left:0; } #adminbar {visibility:hidden;height:25px;position:fixed;z-index:105;top:0;} #preload { display: none; } #preload img { height: 0; width: 0; border: none; position: absolute; bottom: 0; left: 0; z-index: -30; } /* @font-face { font-family: 'arial-black'; src: url("../site_fonts/arial-black.eot"); src: url("../site_fonts/arial-black.otf") format("opentype"); src: url("../site_fonts/arial-black.eot?#iefix") format('embedded-opentype'), url("../site_fonts/arial-black.woff") format("woff"), url("../site_fonts/arial-black.ttf") format("truetype"); } */ @font-face { font-family: 'Oswald'; src: url("../site_fonts/Oswald-Regular.eot"); src: url("../site_fonts/Oswald-Regular.eot?#iefix") format('embedded-opentype'), url("../site_fonts/Oswald-Regular.woff") format("woff"), url("../site_fonts/Oswald-Regular.woff2") format("woff2"), url("../site_fonts/Oswald-Regular.ttf") format("truetype"); } .wichtig,.getinfo,.hide { display:none !important; } .show { display:block; } .block { text-align:justify; } .bold { font-weight: bold; } .normal { font-weight: normal; } .italic { font-style:italic; } .red { color: red; } .green { color: green; } .black { color: black; } .white { color: white; } .blue { color: blue; } .paypalblue { color: rgb(0,69,124); } /* Paypal blue */ .sbig { font-size: 110.01%; } .errmsg { color: #b5124b; font-weight: bold; } .grad img { height: 13px; width: 19px; border: 0; z-index: 0;} body[id="Administration"] #maincont_inner .errmsg { display:none; } body[id="Administration"] #maincont_inner div.textblock .errmsg { display:block; } .okmsg { color: green; font-weight: bold; } .filefmt { color: black; font-weight: normal; font-style:italic; } .aboutright { border: 0px solid blue; width:300px;margin-left:430px; } .aboutright2 { border: 0px solid blue; width:400px;margin-left:330px; } .aboutright3 { border: 0px solid blue; width:500px;margin-left:230px; } .tright { text-align:right; } .eeven { background-color:#eeeeee; } .thbg { background-color:#dddddd;padding-left:10px; } .delfile { width:600px; border: 0px solid blue; } .upld { width:400px; border: 0px solid blue; } .outlined { border: 2px solid #6F6F6F; } .frame_left, .left { text-align:left; float:left; margin: 15px 20px 20px 0px;} .frame_right, .right, .frame_right_mob { text-align:right; float:right; margin: 15px 0px 20px 20px;} .frame_center, .center { text-align:center; margin: 15px 0px 20px 0px;} input#country[readonly] { background: #f8f7ff !important; color: #888 !important; } @media (max-width: 1098px) {.frame_right_mob { text-align:left; float:left; margin: 15px 0px 20px 0px;}} #map_canvas { width:50%;height:300px; } @media (max-width: 1098px) { #map_canvas { width:100%;height:300px; }} body { margin: 0; padding: 0; font: 90.01% Verdana, arial, helvetica, sans-serif; color: var(--color-main-text); background-color: var(--color-background); text-align: center; } div { text-align: left; /* text-align:center wieder aufheben, damit DIV-Inhalte linksbündig ausgerichtet sind */} h1, h2, h3 {font-weight: normal; background-color:transparent;color: var(--color-title); /*dunkelgrau*/ font-family: Verdana, arial, helvetica, sans-serif; line-height: 1.4; } h1 {font-size: 140.01%; font-size: 2.25em; letter-spacing: .1em; ;padding-bottom:15px; font-weight:600; padding-top:20px; text-transform: uppercase; letter-spacing: 1.5px!important;} h2 {font-size: 130.01%; font-size: 1.75em; letter-spacing: .2em; text-transform: uppercase;} h3 {font-size: 110.01%; padding-bottom:7px; letter-spacing: .2em; } h4 {font-size: 110.01%; padding-bottom:7px; letter-spacing: .1em; color:black; font-weight:600;} a {background-color:transparent;color:var(--fed-navy); outline: none; font-weight: normal; } p {margin-bottom: 15px; } img {border: 0; } ul > li::marker {color:var(--color-list-item);} br {clear: left;} @media (max-width: 904px) { h1 {font-size:2.05em; } h2 {font-size:1.35em; }} @media (max-width: 565px) { h1 {font-size:1.35em; } h2 {font-size:1.15em; }} @media (max-width: 390px) { h1 {font-size:1.15em; padding-bottom:0 !important;} h2 {font-size:0.9em; } h3 {font-size:0.85em; padding-top:0 !important} div.textblock h2 {padding-top:0 !important} } @media (max-width: 325px) { h1 {font-size:1.0em; } h2 {font-size:0.8em; }} #container { margin: 0 auto; margin-top: 0px; background: transparent;} * html #container {height:1%; } #scroll { font-size: 1px; } .gesamt_breite_aussen { width: 1024px; min-width: 320px; } .dynamic .gesamt_breite_aussen { width: 100%; min-width: 320px;} .inner_width { width: 924px; } /* innerer Platz des Containers: gesamt_breite_aussen - rahmen dicke */ .dynamic .inner_width { width: 90%; } @media (max-width: 910px) {.dynamic .inner_width { width: 100%; }} /* ############################ [Rahmen-Definitionen] ######################### */ /* Rahmen: Breite */ /* hier rahmen breite links und rechts einstellen */ .left_border_width { margin-left: 0px; } .right_border_width { margin-right: 0px; } .border_high { height: 0px; } .border_corner_width{ width: 0px; } #wrap_header_area {} #wrap_main_and_left { background-color: var(--color-background); border: 0px solid #dddddd;} /* clearfix zum Aufheben der Floatumgebung */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ .header_mid_high { height: 123px; } @media (max-width: 1098px) {.header_mid_high { height: 72px; }} #header1 { position: fixed; width: 100%; z-index: 90; overflow: hidden; background: transparent; } /* Ebene 1: deine Headergrafik, halbtransparent */ #header1::before { content: ""; position: absolute; inset: 0; background: url(../site_images/head-grafik-bg.webp) center top no-repeat; background-size: 100% auto; opacity: 0.6; pointer-events: none; } /* Ebene 2: Blur für den darunter scrollenden Inhalt */ #header1::after { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,0.02); -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(3px) saturate(260%); pointer-events: none; } nav {height:123px;} /* um den header zu kompensieren */ @media (max-width: 1098px) {nav {height:72px;} } body[id="Startseite"] .header_mid_high { height:0;} /* für Startseite und Slideshow als Abstandhalter, gleiche Werte Höhe wie aus index.php 400, 320, 220 */ body[id="Startseite"] nav {height:0px; background-color:#666;} /* den 666 Hintergrund sieht man, wenn die Seite lädt oder JS abgeschaltet ist */ div.langswitch { position: fixed; right: 0; top: 5px; padding: 3px 8px; font-size: 80%; text-align: right; border: 0px solid white; float: right; display: inline; background: transparent url(../images/transp_grey.png) left top repeat-x; z-index: 99; } a.langswitch { display: inline; outline: none;} a.langswitch {color: #7d7d7d; text-decoration:none; font-weight: bold;outline: none;} a.langswitch:hover {color: #2D5EAE; /* blue */ text-decoration:none; font-weight: bold;} .spact, .spact:hover {color: #9d9d9d; text-decoration:none; font-weight: bold; text-transform: lowercase;cursor:default;} .spact {background: transparent url(../images/transp_grey.png) left top repeat-x;z-index:5;} img.langswitch { position:relative;float:left;padding-left:5px;border:0; } .DE { background: transparent url(../images/DE.gif) left top no-repeat; position:relative;width:19px;height:13px;display:inline;}.EN { background: transparent url(../images/EN.gif) left top no-repeat; position:relative;width:19px;height:13px;display:inline;}.RU { background: transparent url(../images/RU.gif) left top no-repeat; position:relative;width:19px;height:13px;display:inline;}.IT { background: transparent url(../images/IT.gif) left top no-repeat; position:relative;width:19px;height:13px;display:inline;} #headerrinc__ { position: relative; margin-left: 60px; width: 157px; height: 261px; z-index: 44; border: 0px solid yellow; float: left; } #logo, #slogo { background: transparent url(../site_images/raute-gd-schwarz.png) center top no-repeat; position: fixed; left: calc(50% - 25px); top: 0px; width: 50px; height: 75px; background-size: 50px 75px; z-index: 491; -webkit-filter: drop-shadow(-2px 5px 5px #222); filter: drop-shadow(-2px 5px 5px #222); background-size: 90%; } #logo:hover {filter: drop-shadow(-2px 2px 15px #fff);} #schrift { position: fixed; top: 10px; bottom: 0px; right: 0px; width: 500px; height: 50px; border: 0px solid red; z-index: 91; left: calc(50% - 250px); text-align: center; color: white; -webkit-filter: drop-shadow(-2px 3px 3px #222); filter: drop-shadow(-2px 3px 3px #222); font: 42px Verdana, arial, helvetica, sans-serif; } body[id="Startseite"] #schrift {position:absolute;} @media (max-width: 500px) { #schrift {width: 460px;left: calc(50% - 230px);} } @media (max-width: 460px) { #schrift {font-size: 35px; width: 400px;left: calc(50% - 200px);} } @media (max-width: 400px) { #schrift {font-size: 30px; width: 360px;left: calc(50% - 180px);} } #statusbar, #statusbar1 { /* Statusbar, optional */ position: relative; height: 25px; background-color: red; font-size: 14px; font-weight: bold; color: white; border-top: 2px solid black; border-bottom: 2px solid black; /* oben rechts unten links */ padding: 3px 20px 1px 20px; overflow: hidden; clear: both; } /* mleft (18) + menubar (822) + mright (186) = mwrap (1026) px */ #mwrap { background: rgba(0,0,0,0.45) url(../site_images/head-grafik-3.jpg) center top no-repeat; height: 90px; clear: both; overflow: hidden; border-top: 2px solid rgb(214,247,239); border-bottom: 2px solid rgb(0,140,198); top: 30px; z-index: 90; width: 100%; position: fixed; } body[id="Startseite"] #mwrap {background-image: none;} #mleft, #mright { background-color: transparent;} #menubar, #menubar2, #menubar_leer { /* menubar: Menu */ position: relative; border:0; padding:0; border-top: 0px solid gray; background-color: transparent; font-size: 0px; } #menubar2, #menubar_leer { background-color: transparent; } #menubar { padding-right:16%; padding-left:16%; padding-top:25px; height:65px;} @media (max-width: 1080px) {#menubar { padding-right:5%; padding-left:5%; }} @media (max-width: 1098px) {#mwrap {height:40px;} #menubar { padding-top:0; height:40px; }} #mainbox { border:0; margin:0; padding:0; height: 100%; background-color: transparent; } #contents { overflow: hidden; padding: 0; margin: 0; /* 3-COLUMN */ z-index: 4; width: 100%; } #inner { height:1%;} /* to avoid the IE6 3 pixel jog bug - sonst ist text nach float um 3px versetzt */ /* ######### begin: 3-column design main area */ /* column container */ .colmask { position: relative; /* This fixes the IE7 overflow hidden bug */ clear: both; float: left; width: 100%; /* width of whole page */ overflow: hidden; /* This chops off any overhanging divs */ z-index: 5; } /* common column settings */ .colright, .colmid, .colleft { float: left; width: 100%; /* width of page */ position: relative; } .maincont, .lfa, .rechts { float: left; position: relative; padding: 0 0 1em 0; /* no left and right padding on columns, we just make them narrower instead only padding top and bottom is included here, make it whatever value you need */ overflow: hidden; } .lfa, .maincont, #maincont_inner { z-index:4; top:0px; } /* Basis von: http://matthewjamestaylor.com/blog/perfect-3-column.htm */ /* 3 Column settings */ .threecol { background:var(--color-background); /* right column background colour */ } body[id="login"] .threecol, body[id="Administration"] .threecol { background:white; } /* Attention: the colum setting is found in the followings files: lfa.css - 2 columns, left:15%, middle: 85%, right:0% no_lfa.css - 1 column, left:0%, middle:100%, right:0% 3col.css - 3 columns, left:15%, middle: 70%, right:15% (this layout is not used) */ /* column setting for the 3col case */ .colmid { background:var(--color-background); /* center column background colour */ } body[id="login"] .colmid, body[id="Administration"] .colmid { background:white; } .threecol .colmid { right:10%; /* width of the right column */ } body[id="Startseite"] .threecol .colmid, body[id^="Shop_x_x"] .threecol .colmid {right:0;} body[id="basket"] .threecol .colmid {right:0;} body[id="datainput"] .threecol .colmid {right:0;} body[id="checkout"] .threecol .colmid {right:0;} body[id="receipt"] .threecol .colmid {right:0;} @media (max-width: 1098px) {.threecol .colmid {right:0;}} .threecol .colleft { right:80%; /* width of the middle column */ background:var(--color-background); /* left column background colour */ border-right: 0px solid #bbb; } body[id="login"] .threecol .colleft, body[id="Administration"] .threecol .colleft { background:white; } body[id="Startseite"] .threecol .colleft, body[id^="Shop_x_x"] .threecol .colleft {right:100%;} body[id="basket"] .threecol .colleft {right:100%;} body[id="datainput"] .threecol .colleft {right:100%;} body[id="checkout"] .threecol .colleft {right:100%;} body[id="receipt"] .threecol .colleft {right:100%;} @media (max-width: 1098px) {.threecol .colleft {right:100%;}} .threecol .maincont { width:80%; /* width of center column content (column width minus padding on either side) */ left:100%; /* 100% plus left padding of center column */ } body[id="Startseite"] .threecol .maincont, body[id^="Shop_x_x"] .threecol .maincont {width:100%;} body[id="basket"] .threecol .maincont {width:100%;} body[id="datainput"] .threecol .maincont {width:100%;} body[id="checkout"] .threecol .maincont {width:100%;} body[id="receipt"] .threecol .maincont {width:100%;} @media (max-width: 1098px) {.threecol .maincont {width:100%;}} .threecol .lfa { width:10%; /* Width of left column content (column width minus padding on either side) */ left:10%; /* width of (right column) plus (center column left and right padding) plus (left column left padding) */ } body[id="Startseite"] .threecol .lfa, body[id^="Shop_x_x"] .threecol .lfa {width:0;left:0;} body[id="basket"] .threecol .lfa {width:0;left:0;} body[id="datainput"] .threecol .lfa {width:0;left:0;} body[id="checkout"] .threecol .lfa {width:0;left:0;} body[id="receipt"] .threecol .lfa {width:0;left:0;} @media (max-width: 1098px) {.threecol .lfa {width:0;left:0;}} .threecol .rechts { width:10%; /* Width of right column content (column width minus padding on either side) */ left:90%; /* Please make note of the brackets here: (100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */ } body[id="Startseite"] .threecol .rechts, body[id^="Shop_x_x"] .threecol .rechts {width:0;left:100%;} body[id="basket"] .threecol .rechts {width:0;left:100%;} body[id="datainput"] .threecol .rechts {width:0;left:100%;} body[id="checkout"] .threecol .rechts {width:0;left:100%;} body[id="receipt"] .threecol .rechts {width:0;left:100%;} @media (max-width: 1098px) {.threecol .rechts {width:0;left:100%;}} /* ######### end: 3-column design main area */ #maincont_inner { position: relative; margin: 0 auto; height: 100%; width: 100%; /* if #lfa_ctl:3%, then here 97% */ float: left; padding: 0; display: inline-block; border: 0px solid green; color: var(--color-main-text); } div.textblock, div.textblock2, div.smid { /* oben rechts unten links */ margin: 0px 25px 20px 25px; display: block; padding: 0; text-align: left; /* wegen Anna */ -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto; hyphens: auto; } @media (max-width: 530px) { div.textblock { margin: 10px 5px 20px 5px;} } div.textblock2 { margin: 10px 0px 20px 0px; } div.textblock2 ul, div.textblock ul { line-height: 1.5em; text-indent: 2px; list-style-position: outside; /*list-style-type: disc;*/ margin-left: 15px; } div.textblock2 h2, div.textblock h2 { padding-bottom: 10px; padding-top: 15px; } /* Menue Definitionen ========================================================= */ /* Es gibt insgesamt 4 Menue-Arten: 1) Hauptmenu, oben, horizontal ==> (mainnav) 2) 2.Menue-Ebene, oben, horizontal, direkt unter Hauptmenue (wird zur Zeit nicht benutzt) ==> (mainnav2) 3) 3.Menue-Ebene, links, wird als Submenue benutzt, wenn Hauptmenue horizontal ist ==> (menu) 4) komplettes Accordeon-Menue links, beinihaltet Hauptmenue + Submenue (3.Ebene), hierfür gibt es 2 Anwendungsfaelle: ==> (cssmenu) A) in menu.php als 'mobiles Menue' B) fuer Webseiten mit vertikalem Menue */ /* ###################### Menue oben, Hauptmenue ################### */ /*.menubar_height { height: 25px; } */ /* .menu_item_width { width: 19%; } */ /* innere_width dividiert durch Anzahl der Menuepunkte, z.B. 800/5=160 */ div.mainnav, div.mainnav2 { position: relative; padding-top: 3px; padding-bottom: 0px; margin-right: 0px; margin-left: 0px; overflow: hidden; font-size: 16px; border: 0; display: flex; justify-content: center; align-items: center; } @media (max-width: 1098px) {div.mainnav {justify-content:left;}} /* Menue oben + 2.Ebene */ a.mainnav, a.mainnav2, #nav10 { /* oben rechts unten links */ margin: 0px 0 0px 0; /* oben/unten links/rechts */ padding: 8px 0px; font-size: 16px; font-weight: normal; font-family: veranda,Arial, Helvetica, sans-serif; font-family: Trebuchet MS, veranda, Arial, Helvetica, sans-serif; text-align: center; text-decoration:none; color: white; border: 0px solid black; float: left; display: inline; outline: none; text-transform: uppercase; } a.mainnav, #nav10 { top: 0px; margin-left: 5px; /* sorgt für gleichen Abstand */ margin-right: 5px; } a.mainnav { top: 0px; } a.mainnav:link, a.mainnav:visited { background-color: transparent; border-top: 0px solid #000066; border-bottom: 0px solid #000066; } #nav10:hover, a.mainnav:hover { border: 0px solid red; color: var(--color-menuitem-hoover); cursor:pointer;} #nav10 {user-select:none;} a.mainnav2 { padding-bottom: 4px; padding-top: 25px; width: auto; font-size: 100.01%; float: right; font-weight: normal; color: black; } a.mainnav2:link, a.mainnav2:visited { background-color: transparent; border-top: 0px solid #000066; border-bottom: 0px solid #000066; } a.mainnav2:hover { background-color: transparent; border: 0px solid black; color: var(--color-menuitem-hoover); /* orange */ } /* Menue-Tags, Ebene 1, oben - wenn selected */ #menu #nav10 a, body[id^="Startseite"] #nav11 a, body[id^="Wir_ueber_uns"] #nav12 a, body[id^="Service"] #nav13 a, body[id^="Projekte"] #nav14 a, body[id^="Shop"] #nav15 a, body[id^="Veranstaltungen"] #nav16 a, body[id^="Kontakt"] #nav17 a, body[id^="dummy02"] #nav18 a, body[id^="dummy02"] #nav19 a, body[id^="dummy02"] #nav110 a { color: var(--color-menuitem); /* DarkTurquoise */ background-color: transparent; cursor: default; float: left; } #nav10 { display: none; height: 30px; } @media (max-width: 1098px) { span[id^="nav1"] {display:none;} span[id^="lnav"] {display:none;} #nav10 {display:inline;} } #mobnav10 {display:none;} .mainnav #menu0 {padding-left:35px;} /* Menue-Tags, Ebene 2, oben - wenn selected */ #dummy #dummnav { color: #2D5EAE; /* blau */ background-color: transparent; cursor: default; /*width: 170px;*/ float: right; } /* ######################### Menue links, Submenue ########################## */ a.menu { font-family: veranda, Arial, Helvetica, sans-serif; text-align: right; text-decoration: none; font-weight: normal; display: block; outline: none; padding: 10px; color: rgb(99,99,99); font-size: 13px; text-transform: capitalize; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; background-color: #efefef; background-image: linear-gradient(to right, #efefef 0%, white 100%); background-image: -webkit-linear-gradient(right, #efefef 0%, white 100%); margin: 3px 10px 3px 10%; -moz-transition-property:all; -moz-transition-duration:500ms; -webkit-transition-property:all; -webkit-transition-duration:500ms; -o-transition-property:all; -o-transition-duration:500ms; -ms-transition-property:all; -ms-transition-duration:500ms; transition-property:all; transition-duration:500ms; } .left_sub {margin-top:80px;position:fixed;width:10%;} /* breite wie linke spalte */ body[id^="Shop_x_x"] .left_sub {display:none;} body[id="basket"] .left_sub {display:none;} .vis_no,.vis_no span, a.vis_no {height:0 !important;font-size:0;padding:0; } .vis_,.vis_ span, a.vis_ {height:0 !important;font-size:0;padding:0; } a.eodd { background: #f4f4f4; border:0; border-bottom: 1px solid #e0e0e0;} a.eeven { background: #fff; border:0; border-bottom: 1px solid #e0e0e0;} a.menu:hover { color:black;background-color: rgb(214,247,239)} /* Menue-Tags (Ebene 2 oder 3), links - wenn selected */ #Wir_ueber_uns_x_xGerman_Division #lnav01 a, #Wir_ueber_uns_x_xsub51 #lnav02 a, #Wir_ueber_uns_x_xsub52 #lnav03 a, #Wir_ueber_uns_x_xsub53 #lnav04 a, #Wir_ueber_uns_x_xsub54 #lnav05 a, #Wir_ueber_uns_x_xsub55 #lnav06 a, #Wir_ueber_uns_x_xsub56 #lnav07 a, #Wir_ueber_uns_x_xsub57 #lnav08 a, #Wir_ueber_uns_x_xsub58 #lnav09 a, #Wir_ueber_uns_x_xsub59 #lnav10 a, #Wir_ueber_uns_x_xsub60 #lnav11 a, #Wir_ueber_uns_x_xsub61 #lnav12 a, #Wir_ueber_uns_x_xsub62 #lnav13 a, #Wir_ueber_uns_x_xsub63 #lnav14 a, #Wir_ueber_uns_x_xsub64 #lnav15 a, #Wir_ueber_uns_x_xsub65 #lnav16 a, #Wir_ueber_uns_x_xsub66 #lnav17 a, #Wir_ueber_uns_x_xsub67 #lnav18 a, #Wir_ueber_uns_x_xsub68 #lnav19 a, #Wir_ueber_uns_x_xsub69 #lnav20 a, #Wir_ueber_uns_x_xsub70 #lnav21 a, #Wir_ueber_uns_x_xsub71 #lnav22 a, #Wir_ueber_uns_x_xsub72 #lnav23 a, #Wir_ueber_uns_x_xsub73 #lnav24 a, #Wir_ueber_uns_x_xsub74 #lnav25 a, #Wir_ueber_uns_x_xsub75 #lnav26 a, #Wir_ueber_uns_x_xsub76 #lnav27 a, #Wir_ueber_uns_x_xsub77 #lnav28 a, #Wir_ueber_uns_x_xsub78 #lnav29 a, #Wir_ueber_uns_x_xsub79 #lnav30 a, #Wir_ueber_uns_x_xsub80 #lnav31 a, #Wir_ueber_uns_x_xsub81 #lnav32 a, #Wir_ueber_uns_x_xsub82 #lnav33 a, #Wir_ueber_uns_x_xsub83 #lnav34 a, #Wir_ueber_uns_x_xsub84 #lnav35 a, #Wir_ueber_uns_x_xsub85 #lnav36 a, #Wir_ueber_uns_x_xsub86 #lnav37 a, #Wir_ueber_uns_x_xsub87 #lnav38 a, #Wir_ueber_uns_x_xsub88 #lnav39 a, #Wir_ueber_uns_x_xsub89 #lnav40 a, #Wir_ueber_uns_x_xsub90 #lnav41 a, #Wir_ueber_uns_x_xsub91 #lnav42 a, #Wir_ueber_uns_x_xsub92 #lnav43 a, #Wir_ueber_uns_x_xsub93 #lnav44 a, #Wir_ueber_uns_x_xsub94 #lnav45 a, #Wir_ueber_uns_x_xsub95 #lnav46 a, #Wir_ueber_uns_x_xsub96 #lnav47 a, #Wir_ueber_uns_x_xsub97 #lnav48 a, #Wir_ueber_uns_x_xsub98 #lnav49 a, #Wir_ueber_uns_x_xsub99 #lnav50 a, #Service_x_xUeberblick #lnav01 a, #Service_x_xsub101 #lnav02 a, #Service_x_xsub102 #lnav03 a, #Service_x_xsub103 #lnav04 a, #Service_x_xsub104 #lnav05 a, #Service_x_xsub105 #lnav06 a, #Service_x_xsub106 #lnav07 a, #Service_x_xsub107 #lnav08 a, #Service_x_xsub108 #lnav09 a, #Service_x_xsub109 #lnav10 a, #Service_x_xsub110 #lnav11 a, #Service_x_xsub111 #lnav12 a, #Service_x_xsub112 #lnav13 a, #Service_x_xsub113 #lnav14 a, #Service_x_xsub114 #lnav15 a, #Service_x_xsub115 #lnav16 a, #Service_x_xsub116 #lnav17 a, #Service_x_xsub117 #lnav18 a, #Service_x_xsub118 #lnav19 a, #Service_x_xsub119 #lnav20 a, #Service_x_xsub120 #lnav21 a, #Service_x_xsub121 #lnav22 a, #Service_x_xsub122 #lnav23 a, #Service_x_xsub123 #lnav24 a, #Service_x_xsub124 #lnav25 a, #Service_x_xsub125 #lnav26 a, #Service_x_xsub126 #lnav27 a, #Service_x_xsub127 #lnav28 a, #Service_x_xsub128 #lnav29 a, #Service_x_xsub129 #lnav30 a, #Service_x_xsub130 #lnav31 a, #Service_x_xsub131 #lnav32 a, #Service_x_xsub132 #lnav33 a, #Service_x_xsub133 #lnav34 a, #Service_x_xsub134 #lnav35 a, #Service_x_xsub135 #lnav36 a, #Service_x_xsub136 #lnav37 a, #Service_x_xsub137 #lnav38 a, #Service_x_xsub138 #lnav39 a, #Service_x_xsub139 #lnav40 a, #Service_x_xsub140 #lnav41 a, #Service_x_xsub141 #lnav42 a, #Service_x_xsub142 #lnav43 a, #Service_x_xsub143 #lnav44 a, #Service_x_xsub144 #lnav45 a, #Service_x_xsub145 #lnav46 a, #Service_x_xsub146 #lnav47 a, #Service_x_xsub147 #lnav48 a, #Service_x_xsub148 #lnav49 a, #Service_x_xsub149 #lnav50 a, #Projekte_x_xUeberblick #lnav01 a, #Projekte_x_xsub151 #lnav02 a, #Projekte_x_xsub152 #lnav03 a, #Projekte_x_xsub153 #lnav04 a, #Projekte_x_xsub154 #lnav05 a, #Projekte_x_xsub155 #lnav06 a, #Projekte_x_xsub156 #lnav07 a, #Projekte_x_xsub157 #lnav08 a, #Projekte_x_xsub158 #lnav09 a, #Projekte_x_xsub159 #lnav10 a, #Projekte_x_xsub160 #lnav11 a, #Projekte_x_xsub161 #lnav12 a, #Projekte_x_xsub162 #lnav13 a, #Projekte_x_xsub163 #lnav14 a, #Projekte_x_xsub164 #lnav15 a, #Projekte_x_xsub165 #lnav16 a, #Projekte_x_xsub166 #lnav17 a, #Projekte_x_xsub167 #lnav18 a, #Projekte_x_xsub168 #lnav19 a, #Projekte_x_xsub169 #lnav20 a, #Projekte_x_xsub170 #lnav21 a, #Projekte_x_xsub171 #lnav22 a, #Projekte_x_xsub172 #lnav23 a, #Projekte_x_xsub173 #lnav24 a, #Projekte_x_xsub174 #lnav25 a, #Projekte_x_xsub175 #lnav26 a, #Projekte_x_xsub176 #lnav27 a, #Projekte_x_xsub177 #lnav28 a, #Projekte_x_xsub178 #lnav29 a, #Projekte_x_xsub179 #lnav30 a, #Projekte_x_xsub180 #lnav31 a, #Projekte_x_xsub181 #lnav32 a, #Projekte_x_xsub182 #lnav33 a, #Projekte_x_xsub183 #lnav34 a, #Projekte_x_xsub184 #lnav35 a, #Projekte_x_xsub185 #lnav36 a, #Projekte_x_xsub186 #lnav37 a, #Projekte_x_xsub187 #lnav38 a, #Projekte_x_xsub188 #lnav39 a, #Projekte_x_xsub189 #lnav40 a, #Projekte_x_xsub190 #lnav41 a, #Projekte_x_xsub191 #lnav42 a, #Projekte_x_xsub192 #lnav43 a, #Projekte_x_xsub193 #lnav44 a, #Projekte_x_xsub194 #lnav45 a, #Projekte_x_xsub195 #lnav46 a, #Projekte_x_xsub196 #lnav47 a, #Projekte_x_xsub197 #lnav48 a, #Projekte_x_xsub198 #lnav49 a, #Projekte_x_xsub199 #lnav50 a, #Shop_x_xUeberblick #lnav01 a, #Shop_x_xsub201 #lnav02 a, #Shop_x_xsub202 #lnav03 a, #Shop_x_xsub203 #lnav04 a, #Shop_x_xsub204 #lnav05 a, #Shop_x_xsub205 #lnav06 a, #Shop_x_xsub206 #lnav07 a, #Shop_x_xsub207 #lnav08 a, #Shop_x_xsub208 #lnav09 a, #Shop_x_xsub209 #lnav10 a, #Shop_x_xsub210 #lnav11 a, #Shop_x_xsub211 #lnav12 a, #Shop_x_xsub212 #lnav13 a, #Shop_x_xsub213 #lnav14 a, #Shop_x_xsub214 #lnav15 a, #Shop_x_xsub215 #lnav16 a, #Shop_x_xsub216 #lnav17 a, #Shop_x_xsub217 #lnav18 a, #Shop_x_xsub218 #lnav19 a, #Shop_x_xsub219 #lnav20 a, #Shop_x_xsub220 #lnav21 a, #Shop_x_xsub221 #lnav22 a, #Shop_x_xsub222 #lnav23 a, #Shop_x_xsub223 #lnav24 a, #Shop_x_xsub224 #lnav25 a, #Shop_x_xsub225 #lnav26 a, #Shop_x_xsub226 #lnav27 a, #Shop_x_xsub227 #lnav28 a, #Shop_x_xsub228 #lnav29 a, #Shop_x_xsub229 #lnav30 a, #Shop_x_xsub230 #lnav31 a, #Shop_x_xsub231 #lnav32 a, #Shop_x_xsub232 #lnav33 a, #Shop_x_xsub233 #lnav34 a, #Shop_x_xsub234 #lnav35 a, #Shop_x_xsub235 #lnav36 a, #Shop_x_xsub236 #lnav37 a, #Shop_x_xsub237 #lnav38 a, #Shop_x_xsub238 #lnav39 a, #Shop_x_xsub239 #lnav40 a, #Shop_x_xsub240 #lnav41 a, #Shop_x_xsub241 #lnav42 a, #Shop_x_xsub242 #lnav43 a, #Shop_x_xsub243 #lnav44 a, #Shop_x_xsub244 #lnav45 a, #Shop_x_xsub245 #lnav46 a, #Shop_x_xsub246 #lnav47 a, #Shop_x_xsub247 #lnav48 a, #Shop_x_xsub248 #lnav49 a, #Shop_x_xsub249 #lnav50 a, #Veranstaltungen_x_xUeberblick #lnav01 a, #Veranstaltungen_x_xsub251 #lnav02 a, #Veranstaltungen_x_xsub252 #lnav03 a, #Veranstaltungen_x_xsub253 #lnav04 a, #Veranstaltungen_x_xsub254 #lnav05 a, #Veranstaltungen_x_xsub255 #lnav06 a, #Veranstaltungen_x_xsub256 #lnav07 a, #Veranstaltungen_x_xsub257 #lnav08 a, #Veranstaltungen_x_xsub258 #lnav09 a, #Veranstaltungen_x_xsub259 #lnav10 a, #Veranstaltungen_x_xsub260 #lnav11 a, #Veranstaltungen_x_xsub261 #lnav12 a, #Veranstaltungen_x_xsub262 #lnav13 a, #Veranstaltungen_x_xsub263 #lnav14 a, #Veranstaltungen_x_xsub264 #lnav15 a, #Veranstaltungen_x_xsub265 #lnav16 a, #Veranstaltungen_x_xsub266 #lnav17 a, #Veranstaltungen_x_xsub267 #lnav18 a, #Veranstaltungen_x_xsub268 #lnav19 a, #Veranstaltungen_x_xsub269 #lnav20 a, #Veranstaltungen_x_xsub270 #lnav21 a, #Veranstaltungen_x_xsub271 #lnav22 a, #Veranstaltungen_x_xsub272 #lnav23 a, #Veranstaltungen_x_xsub273 #lnav24 a, #Veranstaltungen_x_xsub274 #lnav25 a, #Veranstaltungen_x_xsub275 #lnav26 a, #Veranstaltungen_x_xsub276 #lnav27 a, #Veranstaltungen_x_xsub277 #lnav28 a, #Veranstaltungen_x_xsub278 #lnav29 a, #Veranstaltungen_x_xsub279 #lnav30 a, #Veranstaltungen_x_xsub280 #lnav31 a, #Veranstaltungen_x_xsub281 #lnav32 a, #Veranstaltungen_x_xsub282 #lnav33 a, #Veranstaltungen_x_xsub283 #lnav34 a, #Veranstaltungen_x_xsub284 #lnav35 a, #Veranstaltungen_x_xsub285 #lnav36 a, #Veranstaltungen_x_xsub286 #lnav37 a, #Veranstaltungen_x_xsub287 #lnav38 a, #Veranstaltungen_x_xsub288 #lnav39 a, #Veranstaltungen_x_xsub289 #lnav40 a, #Veranstaltungen_x_xsub290 #lnav41 a, #Veranstaltungen_x_xsub291 #lnav42 a, #Veranstaltungen_x_xsub292 #lnav43 a, #Veranstaltungen_x_xsub293 #lnav44 a, #Veranstaltungen_x_xsub294 #lnav45 a, #Veranstaltungen_x_xsub295 #lnav46 a, #Veranstaltungen_x_xsub296 #lnav47 a, #Veranstaltungen_x_xsub297 #lnav48 a, #Veranstaltungen_x_xsub298 #lnav49 a, #Veranstaltungen_x_xsub299 #lnav50 a, #dumm #dummxx a { color: var(--fed-navy) !important; background: rgba(11, 42, 74, 0.08) !important; background-image: none !important; border: 1px solid rgba(11, 42, 74, 0.14) !important; border-left: 3px solid var(--fed-accent) !important; border-radius: 0 !important; box-shadow: none !important; font-weight: 700 !important; cursor: default; } /* ######################### Menue links, Accordeon-Menue ########################## */ /* design of left jquery accordeon menu ==> Gesamtmenü, welche links genutzt wird für menu.php und für verticales Seitemenü */ /* design ist ähnlich wie linkes Menü bei horizontalen Seiten */ #cssmenu { width: 100%;} #cssmenu, #cssmenu ul, #cssmenu li, #cssmenu a { margin: 0; padding: 0; border: 0; list-style: none; font-weight: normal; text-decoration: none; line-height: 1; font-size: 14px; position: relative; } #cssmenu a { line-height: 1.3; -moz-transition-property:all; -moz-transition-duration:500ms; -webkit-transition-property:all; -webkit-transition-duration:500ms; -o-transition-property:all; -o-transition-duration:500ms; -ms-transition-property:all; -ms-transition-duration:500ms; transition-property:all; transition-duration:500ms; } #cssmenu > ul > li > a { padding-right: 40px; font-size: 25px; font-weight: bold; display: block; background: #444; /* noch dunkleres rot von 'Nummern-Box', rechts im 1st level menu */ color: white; border-bottom: 1px solid #5e071b; /* dunkles lila, Linie unten 1st level menu */ text-transform: uppercase; position: relative; } #cssmenu > ul > li > a > span { background: rgb(0,140,198); /* dunkles rot, left 1st level menu */ background: rgba(11,42,74,0.55); padding: 10px; display: block; font-size: 13px; font-weight: 300; } #cssmenu > ul > li > a:hover { text-decoration: none; } #cssmenu > ul > li > a > span:hover { color:black; background-color: rgb(255,255,255,0.5); font-weight: 700; } #cssmenu > ul > li.active { border-bottom: none; } #cssmenu > ul > li.active > a { color: white; } #cssmenu > ul > li.active > a span { background: #444; /* dunkleres rot, wie Nummern-Box */ } #cssmenu span.cnt { position: absolute; top: 8px; right: 15px; padding: 0; margin: 0; background: none; } #cssmenu ul ul { display: none; background-color:#ddd;} #cssmenu ul ul li { border: 0px solid #e0e0e0; border-top: 0;} #cssmenu ul ul a { padding: 10px; display: block; color: rgb(0,140,198); /* dunkles rot, wie von left 1st level menu */ font-size: 13px; text-transform: capitalize; } #cssmenu ul ul a:hover { color: white; background-color: rgb(214,247,239); /* altrosa fuer hover, 2nd level menu */ } #cssmenu ul ul li.odd { background: #f4f4f4; } #cssmenu ul ul li.even { background: white; } body[id^="Startseite"] #mobnav11 > span, body[id^="Wir_ueber_uns"] #mobnav12 > span, body[id^="Service"] #mobnav13 > span, body[id^="Projekte"] #mobnav14 > span, body[id^="Shop"] #mobnav15 > span, body[id^="Veranstaltungen"] #mobnav16 > span, body[id^="Kontakt"] #mobnav17 > span, body[id^="impressum"] #mobnav18 > span, /* Achtung: hier irgendwo noch impressum + datenschutz eintragen statt dummy02 */ body[id^="datenschutz"] #mobnav19 > span, body[id^="agb"] #mobnav20 > span, body[id^="dummy02"] #mobnav110 > span { color: red; /* LightPink2 */ cursor: default; background: #444; /* dunkleres rot, wie Nummern-Box */ } /*sphider search*/ .ssearchbox { position:relative; height:39px; width:185px; border:0px solid red; padding-top:12px; padding-left:42px; cursor:pointer; } .input1 { color:white; font-size: 14px; line-height: 1.5; border: 0px solid black; background-color: #777777; } /* die Class 'button' wird auch im CMS verwendet, nicht nur auf der Website selbst */ .ui-dialog-buttonset .ui-button, .ui-dialog-buttonset .ui-button:hover, .button, .button:hover { border: none; padding: 2px 8px; width: 180px; height: 35px; text-align: center; font-size: var(--button-font-size); color: white !important; background-image: linear-gradient(to bottom, #2e434f 0%, #4a6c7f 100%) !important; background-image: -webkit-linear-gradient(top, #2e434f 0%, #4a6c7f 100%) !important; border-radius: 5px !important; border: 1px solid #dadae5 !important; } .ui-widget .ui-widget { font-size: var(--button-font-size) !important; } .ui-dialog-buttonset .ui-button:hover, .button:hover { background-image: linear-gradient(to top, #2e434f 0%, #afc4d0 100%) !important; background-image: -webkit-linear-gradient(bottom, #2e434f 0%, #afc4d0 100%) !important; cursor: pointer; font-weight: 400; } .ui-dialog-buttonset .ui-button:active, .ui-dialog-buttonset .ui-button:focus, .button:active, .button:focus { background-image: linear-gradient(to top, #2e434f 0%, #66a3ff 100%) !important; background-image: -webkit-linear-gradient(bottom, #2e434f 0%, #66a3ff 100%) !important; color: #ccc; } .button::-moz-focus-inner {border: 1px dotted transparent;} /* column classes for markdown tables */ .mrktab { width:800px; border-spacing: 5px; margin-left:5%; } .colcl_0 { width:20%; } .colcl_1 { width:80%; } /* alignment for markdown tables */ .align_left { text-align:left; } .align_right { text-align:right; } .align_center { text-align:center; } /* contact form */ .cont_form form { background-color: var(--bgcol-form); margin: 10px auto; width: 90%; } .cont_form > noscript > p { color: #b5124b; font-weight: bold; } @media (max-width: 948px) { .cont_form form {width:100%; } } #myForm fieldset { border: 2px solid var(--bordercol-form); min-width: 290px; background-color: var(--bgcol-form); position: relative; margin: 0; padding: 5px; border-radius: 5px; } #myForm fieldset .fbody { background-color : transparent; padding: 22px; margin: 15px 0 0; } #myForm fieldset.okmsg2 { border: 2px solid #99CC00;} #myForm fieldset.errmsg2 { border: 2px solid #FF8181;} #myForm legend { background-color:transparent;position : absolute;} #myForm ol { list-style-type: none; margin: 0; padding: 0; } #myForm li { float: left; padding: 0; width:100%; } #myForm li.last { float: none; clear: both; text-align: center; } #myForm label { display: block; cursor: pointer; font-weight: bold; line-height: 24px; text-align: left; } #myForm input[id='company'], #myForm input[id='phone'], #myForm input[id='phone_wide'], #myForm input[id='firstname'], #myForm input[id='lastname'], #myForm input[id='captcha'], #myForm input[id='address'], #myForm input[id='email'], #myForm input[id='fupld'], #myForm textarea { background-color: #fff; color: #4d4d4d; border: 1px solid #c4c4c4; font: 13px Helvetica, Arial, "Nimbus Sans L", FreeSans, sans-serif; padding: 5px 8% 5px 2%; width: 90%; border-radius: 5px; box-shadow: 2px 2px 5px #e2e2e2, inset 2px 2px 5px #e2e2e2; } #myForm textarea { overflow:auto;} #myForm input.valid, #myForm textarea.valid { border-color: #99CC00; /* green */ box-shadow: 1px 1px 3px #99CC00, inset 1px 1px 3px #99CC00; background: #fff url(../images/tick.png) 98% 3px no-repeat; } #myForm input[id='company'].valid, #myForm input[id='phone'].valid, #myForm input[id='phone_wide'].valid, #myForm input[id='firstname'].valid, #myForm input[id='lastname'].valid, #myForm input[id='fupld'].valid {background-position: 97% 3px;} #myForm input.error, #myForm textarea.error { border-color: #FF8181; /* red */ box-shadow: 1px 1px 3px #FF8181, inset 1px 1px 3px #FF8181; background: #fff url(../images/wrong.png) 98% 3px no-repeat; } #myForm label.error { color: #c50a1f; /* red */ font-weight:normal; padding:0;margin:0; width:89%;float:left; line-height: 12px; font-size:10px; overflow:hidden;white-space:nowrap;} #myForm label[id='datenschutz-error'].error {float:none; width:auto;} #myForm label[id='datenschutz-error'].valid {float:left !important; } #dslink {text-decoration:none;color:green; font-weight:bold;} #myForm input[id='company'].error, #myForm input[id='phone'].error, #myForm input[id='phone_wide'].error, #myForm input[id='firstname'].error, #myForm input[id='lastname'].error, #myForm input[id='fupld'].error {background-position: 97% 3px;} #myForm input[id='company']:focus, #myForm input[id='phone']:focus, #myForm input[id='phone_wide']:focus, #myForm input[id='firstname']:focus, #myForm input[id='lastname']:focus, #myForm input[id='captcha']:focus, #myForm input[id='address']:focus, #myForm input[id='email']:focus, #myForm input[id='fupld']:focus, #myForm textarea:focus { border-color: #3399FF; /* blue */ box-shadow: 1px 1px 3px #3399FF, inset 1px 1px 3px #3399FF; background-image: none; } #myForm input[id='company'], #myForm input[id='phone'], #myForm input[id='phone_wide'], #myForm label[for='company'], #myForm label[for='phone'], #myForm label[for='phone_wide'], #myForm input[id='firstname'], #myForm input[id='lastname'], #myForm label[for='firstname'], #myForm label[for='lastname'] {width:100%;} #myForm li[id='comp'], #myForm li[id='phon'], #myForm li[id='fname'], #myForm li[id='lname'] {width:49%;} #myForm input[id='captcha'] {width:60px;position:relative;float:left;} #myForm label[for='captcha'] {clear:both;padding-top:5px;} #myForm li[id='phon'], #myForm li[id='lname'] {padding-left:2%;} @media (max-width: 948px) { #myForm li, #myForm li[id='comp'], #myForm li[id='phon'], #myForm li[id='fname'], #myForm li[id='lname'] {width:100%;min-width:270px;} #myForm li[id='phon'], #myForm li[id='lname'] {padding-left:0%;} } .place_holder1 {width:1%;height:24px;} .place_holder2 {width:1%;height:65px;} /* fileupload form */ .fileUpload { background: rgb(38, 115, 38); background: -webkit-linear-gradient(167deg, rgba(151,242,121,1) 0%, rgba(12,156,15,1) 27%, rgba(18,145,21,1) 37%, rgba(2,28,2,1) 73%); background: -moz-linear-gradient(167deg, rgba(151,242,121,1) 0%, rgba(12,156,15,1) 27%, rgba(18,145,21,1) 37%, rgba(2,28,2,1) 73%); background: -o-linear-gradient(167deg, rgba(151,242,121,1) 0%, rgba(12,156,15,1) 27%, rgba(18,145,21,1) 37%, rgba(2,28,2,1) 73%); background: linear-gradient(167deg, rgba(151,242,121,1) 0%, rgba(12,156,15,1) 27%, rgba(18,145,21,1) 37%, rgba(2,28,2,1) 73%); -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; color: #ccc; font-size: 1em; text-transform: uppercase; font-weight: bold; margin: 1.25em auto;/*20px/16px 0*/ margin-left: 0; overflow: hidden; padding: 8px 20px; position: relative; text-align: center; width: max-content; cursor: pointer; border: 2px solid #ccc; -webkit-transition: 2s; -moz-transition: 2s; -o-transition: 2s; transition: 2s; } .fileUpload:hover, .fileUpload:active, .fileUpload:focus { background: rgb(51, 153, 51); background: -webkit-linear-gradient(167deg, rgba(81,200,42,1) 10%, rgba(47,99,48,1) 29%, rgba(2,28,2,1) 63%, rgba(20,212,20,1) 93%); background: -moz-linear-gradient(167deg, rgba(81,200,42,1) 10%, rgba(47,99,48,1) 29%, rgba(2,28,2,1) 63%, rgba(20,212,20,1) 93%); background: -o-linear-gradient(167deg, rgba(81,200,42,1) 10%, rgba(47,99,48,1) 29%, rgba(2,28,2,1) 63%, rgba(20,212,20,1) 93%); background: linear-gradient(167deg, rgba(81,200,42,1) 10%, rgba(47,99,48,1) 29%, rgba(2,28,2,1) 63%, rgba(20,212,20,1) 93%); cursor: pointer; color: white; border: 2px solid white; box-shadow: inset 0 0 20px 1px #00a7d1; } .fileUpload #fupld2 { position: absolute; top: 0; right: 0; margin: 0; padding: 0; font-size: 20px; cursor: pointer; opacity: 0; filter: alpha(opacity=0); width: 148px; height: 46px; cursor: pointer; } input[type="file"] { position: fixed; right: 100%; bottom: 100%; } body[id="Administration"] input[type="file"] { position:unset;} #showdown_wrap input[type="file"] { position:unset;} /* footer area ############################################################# */ /* potentielle footer Links, wenn aktiv */ #agb #navagb a, #banner #navban a, #partner #navpart a, #about4 #navjobs a, #impressum #navimpr a, #datenschutz #navdat a { color: var(--color-menuitem); font-weight: bold; text-decoration:none; cursor: default; } #footer, #footer_pre { clear: both; height: 45px; border-top: 1px solid gray; font-weight: bold; font-size: 11px; font-family: veranda, Arial,Helvetica; text-decoration:none; text-align: center; color: var(--footer-color); padding-top: 3px; padding-right: 15px; padding-left: 15px; padding-bottom: 5px; overflow: hidden; z-index: 3; } #footer_pre { border-top: 0px solid gray; padding: 0; /* 3-COLUMN */ height: 0px; } #footer { position: relative; top: 0px; border-top: 0px solid gray; background-color: transparent; } @media (max-width: 910px) { #footer { top:15px; height:95px;} } @media (max-width: 1098px) { #footer { visibility: hidden; } } #footer a, #footer_left a { outline: none; font-weight: bold; font-family: Veranda,Arial,Helvetica; text-decoration: none; background-color: transparent; color: var(--footer-color); vertical-align: bottom; } #footer a:hover, #footer_left a:hover { background-color: transparent; color: var(--color-menuitem-hoover); /* DarkTurquoise */ font-weight: bold; } #footer_left { float: left; text-align: left; padding-left: 15px; padding-bottom: 5px; } #jumpback {position: absolute; right: 0; padding: 20px; font-size: 50px;} /* Facebook plugin */ .fb_post { clear: both; overflow: hidden; border: 2px solid #aaa; margin: 10px; padding: 10px; background-color: #eee; border-radius: 5px; } /* für Kalendereintrag */ .calentry > i { font-size:200%; color:#ff9900;position:relative;float:left;line-height:75px;padding:0 25px 0 0; clear:both;margin-left:20%;} @media (max-width: 500px) { .calentry > i {margin-left:0;}} @media (max-width: 400px) { .calentry > h3 {font-size:90.01%;} .caladdress {font-size:80.01%;} } @media (max-width: 370px) { .calentry > h3 {font-weight:normal;font-size:80.01%;} .calentry > i {padding:0 10px 0 0;line-height:70px;} .caladdress {font-size:70.01%;}} h3 { padding-top:20px;} .caladdress { position: relative; top:5px; } /* Openstreetmap */ iframe { border: none; overflow: hidden; margin-top: 0; margin-bottom: 0; } /* eingebettetes Youtube-Video via CMS Editor eingefuegt */ .embedvideo-wrapper { max-width: 100%; left: 0; right: 0; margin: auto; } @media only screen and (max-width: 600px) { .embedvideo-wrapper {width:100% !important;}} div.embedvideo { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; box-shadow: 0px 10px 12px 0px rgba(49, 49, 49, 0.4); border: 0; } .embedvideo iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } #mob_menu {display:none;position:fixed;z-index:199;width:100%;top:120px;} @media only screen and (max-width: 640px) {#mob_menu {top:70px;}} .fversion {font-size:12px;margin-left:15px;} /* shop definitions */ /* see custom last, it must fit to the camera css definitions */ .item_show {width:50%;float:left;position:relative;} .item_func {width:calc( 50% - 20px );float:right;position:relative;padding: 10px 10px 20px 10px;} .item_descr {width:calc( 100% - 40px );clear:both;padding: 10px 20px 20px 20px;} @media (max-width: 814px) { .item_show, .item_func {width:100%;padding: 0px 5% 20px 5%;} } .price, .cent {font-family:arial;font-size:28px;color:black;line-height:60px;font-weight: 600;letter-spacing: .05em;} .cent {font-size:14px;vertical-align:super;font-weight:300;} .avail {color:#007600;font-size:18px;line-height:40px} .soldout {background-color:#a31553;color:white;font-size:18px;line-height:40px;padding:5px 25px 5px 25px;font-weight:700;width: 150px; text-align: center; transform: rotate(-10deg); user-select:none;} h3.shopitem {color:black;font-size:26px;letter-spacing: .02em;} .unit {font-size:26px;} .sitem {width:300px;border-radius:15px;} .subbutton { background-color: #ffcc00; color: black; padding: 10px 30px 10px 30px; margin-top: 25px; position: relative; top: 0; border-radius: 30px; font-style: normal; font-weight: normal; font-size: 20px; text-transform: uppercase; display: block; width: max-content; transition: 2s; text-decoration: none; } .subbutton:hover { background-color: #990033; color: white; transform: scale(1.1); filter: drop-shadow(-4px 4px 10px #fff); cursor: pointer; user-select: none; } @media (max-width: 674px) { .avail {font-size:16px;} .sitem {width:200px;} .subbutton {font-size:14px;} h3.shopitem {font-size:20px;} } @media (max-width: 508px) { .avail {font-size:14px;} .sitem {width:100px;} body[id="Shop_x_xUeberblick"] .subbutton {font-size:12px;left:-50%;} body[id="Shop_x_xUeberblick"] h3.shopitem {font-size:18px;left:-50%;position:relative;width: 125%;} } @media (max-width: 392px) { div.dataTables_length>label {font-size: 14px; display: inline-flex; line-height: 26px; position: relative;} div.dataTables_length>label>select {width:50px;margin-right: 5px;} } .hcart { position: fixed; top: 0; right: 100px; z-index: 100; color: black; font-size: 24px; float: right; background-color: transparent; border: 0; } .hcart:hover {cursor: pointer;color:#444;} .lnbut, .llnbut { position: fixed; top: 0; z-index: 100; color: black; font-size: 16px; float: right; background-color: transparent; border: 0; } .lnbut:hover {cursor: pointer;color:#444;} #de {right: 50px;} #en {right: 20px;} #item_nb { color: white; position: relative; left: -40%; top: -8px; font-size: 14px; } #mycheckout fieldset { margin-top: 10px; background-color: #fff; padding: 10px; border: 1px solid #dadae5; border-radius: 3px; background-clip: padding-box; line-height: 24px; position: relative; } #mycheckout li { float: left; padding: 0; width: 100%; } #mycheckout ol { list-style-type: none; margin: 0; padding: 0; } #mycheckout input, #mycheckout label {display:block;width:100%;} #mycheckout label {padding-top:10px;} #mycheckout li[id='fname'], #mycheckout li[id='lname'] {width:49%;} #mycheckout li[id='postco'], #mycheckout li[id='cty'] {width:49%;} #mycheckout li[id='lname'], #mycheckout li[id='cty'] {float:right;} #mycheckout li[id='cntry'] {width:49%;} #mycheckout li[id='addr'] {width:100%;} /* --- PayPal Checkout Subline (nur dieser eine Button) --- */ button.pp-paypal-btn{ position: relative; overflow: hidden; } button.pp-paypal-btn .pp-main { position: relative; top: -5px; } /* kleine Zeile unten: Icon + PayPal Checkout */ button.pp-paypal-btn .pp-sub{ position: absolute; left: 50%; transform: translateX(-50%); bottom: 2px; font-size: 8px; line-height: 10px; color: rgb(0,69,124); font-weight: 600; white-space: nowrap; pointer-events: none; } button.pp-paypal-btn .pp-sub i{ color: rgb(0,69,124); margin-right: 4px; } /* Pfeil bleibt rechts mittig */ button.pp-paypal-btn .pp-arrow{ position: absolute !important; right: 10px; top: 18px; transform: translateY(-50%); } /* Banner-Wrapper */ #add_design_oben_2{ aspect-ratio: 3 / 1; /* ~ 1:3 (Höhe:Breite) => Banner */ overflow: hidden; /* falls das Bild gecroppt wird */ width: calc(100% - 50px); left: 25px; position: relative; margin-top: 1px; } @media (max-width: 530px) { #add_design_oben_2{ width: calc(100% + 25px); left: 0px;} } /* Bild füllt den Wrapper */ #add_design_oben_2 > img{ display: block; width: 100%; height: 100%; object-fit: cover; } #add_design_oben_2 iframe{ width: 100%; height: 100%; border: 0; display: block; } /* Ab 1170px: Höhe maximal 400px */ @media (min-width: 1170px){ #add_design_oben_2{ max-height: 400px; } } /* Datenschutzformatierung */ body[id="datenschutz"] p, body[id="datenschutz"] li { line-height: 1 !important; font-size: 14px !important; margin-bottom: 0 !important; } /* Downloadbox / PDF Download */ .download-box { margin: 1.25rem 0 1.75rem 0; padding: 0.9rem 1rem; border: 1px solid var(--fed-line); border-left: 4px solid var(--fed-accent); border-radius: 3px; background: rgba(255, 255, 255, 0.85); box-shadow: 0 2px 8px rgba(11, 42, 74, 0.06); } .download-box p { margin: 0; } .download-button { display: inline-block; padding: 0.55rem 0.85rem; border: 1px solid rgba(11, 42, 74, 0.22); border-radius: 3px; background: rgba(11, 42, 74, 0.055); color: var(--fed-navy) !important; font-size: 0.95em; font-weight: 600; line-height: 1.25; text-decoration: none; letter-spacing: 0.01em; } .download-button:hover { background: var(--fed-navy); color: #ffffff !important; border-color: var(--fed-navy); text-decoration: none; } .download-button::before { content: "\f019"; font-family: "FontAwesome"; margin-right: 0.45em; font-size: 0.9em; font-weight: normal; color: var(--fed-accent); } .download-button:hover::before { color: #ffffff; } @media (max-width: 530px) { .download-box { padding: 0.8rem; } .download-button { display: block; text-align: center; } } /* =========================================================================== Startseite: Grid + We. Serve. / Federation Statement =========================================================================== */ /* Die Startseite nutzt im Inhaltsbereich ein 3-Spalten-Grid. .we_serve ist ein gleichrangiges Grid-Item zu .sleft/.smid/.sright und wird deshalb über alle Grid-Spalten gespannt. */ body[id="Startseite"] #maincont_inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row; gap: 0; float: none; width: 100%; overflow: visible; align-items: stretch; } body[id="Startseite"] .sleft, body[id="Startseite"] .smid, body[id="Startseite"] .sright { min-width: 0; } body[id="Startseite"] .we_serve { grid-column: 1 / -1; position: relative; width: 100%; max-width: none; box-sizing: border-box; overflow: visible; isolation: isolate; margin: 46px 0 34px 0; padding: 0; color: #ffffff; background-color: #102438; border-top: 1px solid rgba(255, 255, 255, 0.16); border-bottom: 4px solid var(--fed-accent); box-shadow: 0 18px 36px rgba(11, 42, 74, 0.28); } /* CSS-only Federation / AT-Digital Camo Pattern */ body[id="Startseite"] .we_serve::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-color: #102438; background-image: /* feines digitales Raster */ linear-gradient(90deg, rgba(255,255,255,0.030) 0 1px, transparent 1px 18px), linear-gradient(0deg, rgba(255,255,255,0.022) 0 1px, transparent 1px 18px), /* große AT-/Digital-Camo-Flächen */ linear-gradient(135deg, transparent 0 8%, rgba(54, 78, 101, 0.55) 8% 16%, transparent 16% 100% ), linear-gradient(45deg, transparent 0 14%, rgba(8, 24, 40, 0.78) 14% 26%, transparent 26% 100% ), linear-gradient(135deg, transparent 0 22%, rgba(118, 142, 162, 0.22) 22% 30%, transparent 30% 100% ), linear-gradient(45deg, transparent 0 34%, rgba(24, 51, 75, 0.72) 34% 46%, transparent 46% 100% ), /* harte kleine Digitalblöcke */ repeating-linear-gradient( 90deg, rgba(255,255,255,0.040) 0 7px, transparent 7px 22px, rgba(0,0,0,0.13) 22px 34px, transparent 34px 58px ), repeating-linear-gradient( 0deg, rgba(255,255,255,0.025) 0 6px, transparent 6px 26px, rgba(0,0,0,0.10) 26px 38px, transparent 38px 76px ), /* leichte diagonale "Arachnid"-/Invasion-Anmutung */ linear-gradient(120deg, transparent 0 42%, rgba(177, 30, 43, 0.10) 42% 43%, transparent 43% 100% ), linear-gradient(60deg, transparent 0 58%, rgba(255,255,255,0.055) 58% 59%, transparent 59% 100% ); background-size: 18px 18px, 18px 18px, 420px 260px, 520px 320px, 360px 240px, 460px 300px, 190px 120px, 230px 160px, 620px 360px, 740px 420px; background-position: 0 0, 0 0, 0 0, 90px 40px, 210px 80px, 340px 120px, 0 0, 45px 20px, 0 0, 180px 40px; opacity: 1; } /* Verlauf: links maximale Lesbarkeit, rechts Raum für den Trooper-Freisteller */ body[id="Startseite"] .we_serve::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 90deg, rgba(4, 14, 24, 0.98) 0%, rgba(11, 42, 74, 0.94) 34%, rgba(11, 42, 74, 0.70) 58%, rgba(11, 42, 74, 0.26) 100% ); } /* Innencontainer: Textbereich reserviert rechts bewusst Platz für das Bild */ body[id="Startseite"] .we_serve-inner { position: relative; z-index: 2; width: min(1180px, calc(100% - 64px)); min-height: 386px; margin: 0 auto; padding: 58px clamp(500px, 45vw, 680px) 58px 0; box-sizing: border-box; } body[id="Startseite"] .we_serve-copy { position: relative; z-index: 3; width: 100%; max-width: 660px; min-width: 0; padding: 0; color: #ffffff; } body[id="Startseite"] .we_serve-title { margin: 0 0 22px 0; color: #ffffff; font-family: 'Oswald', Verdana, Arial, Helvetica, sans-serif; font-size: clamp(1.9rem, 3.8vw, 4.4rem); line-height: 1.02; font-weight: 500; letter-spacing: -2px; text-transform: uppercase; white-space: nowrap; text-shadow: 0 3px 8px rgba(0,0,0,0.48); } body[id="Startseite"] .we_serve-title::after { content: ""; display: block; width: 104px; height: 4px; margin-top: 18px; background: var(--fed-accent); } body[id="Startseite"] .we_serve p { margin: 0 0 15px 0; color: rgba(255,255,255,0.92); font-size: 1.03rem; line-height: 1.65; text-shadow: 0 2px 5px rgba(0,0,0,0.42); } body[id="Startseite"] .we_serve .we_serve-claim { margin-top: 20px; margin-bottom: 0; color: #ffffff; font-weight: 800; letter-spacing: 0.018em; } /* dezente Licht-/Kantenstruktur hinter dem Freisteller */ body[id="Startseite"] .we_serve-inner::after { content: ""; position: absolute; right: 0; bottom: 0; z-index: 2; width: 48%; height: 100%; pointer-events: none; background: radial-gradient(circle at 70% 62%, rgba(255,255,255,0.10), transparent 0 32%), linear-gradient(135deg, transparent 0 42%, rgba(255,255,255,0.055) 42% 43%, transparent 43% 100%); } /* Trooper-Freisteller rechts/unten: langsam und weich einschweben */ body[id="Startseite"] .we_serve-troopers { position: absolute; right: 0; bottom: 0; z-index: 4; width: clamp(500px, 48vw, 700px); height: calc(100% + 74px); overflow: visible; pointer-events: none; opacity: 0; transform: translate3d(160px, 0, 0) scale(0.985); transition: opacity 1700ms cubic-bezier(0.16, 1, 0.30, 1), transform 2300ms cubic-bezier(0.16, 1, 0.30, 1); will-change: opacity, transform; } body[id="Startseite"] .we_serve.is-visible .we_serve-troopers { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } body[id="Startseite"] .we_serve-trooper-img { position: absolute; right: 0; bottom: 0; width: auto; height: 100%; max-width: 100%; object-fit: contain; object-position: right bottom; filter: drop-shadow(-22px 20px 24px rgba(0, 0, 0, 0.48)); user-select: none; } @media (prefers-reduced-motion: reduce) { body[id="Startseite"] .we_serve-troopers { transition: none; transform: none; } } /* Breakpoint: unter 1024px Text oben volle Breite, Trooper darunter */ @media (max-width: 1024px) { body[id="Startseite"] .we_serve-inner { width: min(100%, calc(100% - 48px)); min-height: 0; padding: 44px 0 12px 0; } body[id="Startseite"] .we_serve-copy { width: 100%; max-width: 940px; min-width: 0; } body[id="Startseite"] .we_serve-title { white-space: normal; letter-spacing: -1px; } body[id="Startseite"] .we_serve-inner::after { display: none; } body[id="Startseite"] .we_serve-troopers { position: relative; right: auto; bottom: auto; display: block; width: min(100%, 920px); height: clamp(330px, 62vw, 585px); margin: -4px 0 0 auto; transform: translate3d(130px, 0, 0) scale(0.99); transition: opacity 1600ms cubic-bezier(0.16, 1, 0.30, 1), transform 2200ms cubic-bezier(0.16, 1, 0.30, 1); } body[id="Startseite"] .we_serve-trooper-img { height: 100%; max-width: 100%; } } /* Mobile: Grid einspaltig, Trooper bleibt unter dem Text sichtbar */ @media (max-width: 700px) { body[id="Startseite"] #maincont_inner { grid-template-columns: 1fr; } body[id="Startseite"] .we_serve, body[id="Startseite"] .sleft, body[id="Startseite"] .smid, body[id="Startseite"] .sright { grid-column: 1 / -1; } body[id="Startseite"] .we_serve { margin-bottom: 26px; border-bottom-width: 3px; } body[id="Startseite"] .we_serve::after { background: linear-gradient( 90deg, rgba(4, 14, 24, 0.97) 0%, rgba(11, 42, 74, 0.91) 100% ); } body[id="Startseite"] .we_serve-inner { width: calc(100% - 36px); padding: 34px 0 8px 0; } body[id="Startseite"] .we_serve-troopers { width: 100%; height: clamp(250px, 70vw, 470px); margin-top: 0; } body[id="Startseite"] .we_serve p { font-size: 0.96rem; line-height: 1.55; } } /* Sehr schmal */ @media (max-width: 420px) { body[id="Startseite"] .we_serve-inner { width: calc(100% - 28px); padding-top: 28px; } body[id="Startseite"] .we_serve-title { font-size: 23px; letter-spacing: 0; } body[id="Startseite"] .we_serve-troopers { height: clamp(220px, 76vw, 360px); } } /* =========================================================================== Startseite: ZFinal / Social + Community Abschlussblock =========================================================================== */ body[id="Startseite"] .zfinal { grid-column: 1 / -1; position: relative; width: 100%; max-width: none; box-sizing: border-box; margin: 0 0 42px 0; padding: 0; } body[id="Startseite"] .zfinal-inner { width: min(1180px, calc(100% - 64px)); margin: 0 auto; box-sizing: border-box; } body[id="Startseite"] .zfinal-panel { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(300px, 0.9fr) minmax(420px, 1.1fr); gap: 34px; align-items: stretch; box-sizing: border-box; padding: 34px; border: 1px solid rgba(11, 42, 74, 0.16); border-left: 5px solid var(--fed-accent); background: linear-gradient(135deg, rgba(255,255,255,0.96) 0%, rgba(246,247,249,0.92) 100%), linear-gradient(90deg, rgba(11,42,74,0.035) 0 1px, transparent 1px 20px), linear-gradient(0deg, rgba(11,42,74,0.025) 0 1px, transparent 1px 20px); background-size: auto, 20px 20px, 20px 20px; box-shadow: 0 12px 30px rgba(11, 42, 74, 0.12); } body[id="Startseite"] .zfinal-panel::before { content: ""; position: absolute; right: -80px; top: -120px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(0,140,198,0.18) 0%, rgba(0,140,198,0.00) 62%); pointer-events: none; } body[id="Startseite"] .zfinal-panel::after { content: ""; position: absolute; right: 24px; bottom: 20px; width: 110px; height: 4px; background: var(--fed-accent); opacity: 0.95; pointer-events: none; } body[id="Startseite"] .zfinal-copy, body[id="Startseite"] .zfinal-linkgrid { position: relative; z-index: 1; } body[id="Startseite"] .zfinal-copy { display: flex; flex-direction: column; justify-content: center; min-width: 0; } body[id="Startseite"] .zfinal-kicker { margin: 0 0 10px 0; color: var(--fed-accent); font-size: 0.78rem; font-weight: 800; line-height: 1.2; letter-spacing: 0.12em; text-transform: uppercase; } body[id="Startseite"] .zfinal-title { margin: 0 0 16px 0; color: var(--fed-navy); font-family: 'Oswald', Verdana, Arial, Helvetica, sans-serif; font-size: clamp(2.0rem, 3.5vw, 4.1rem); line-height: 1.02; font-weight: 500; letter-spacing: -1.6px; text-transform: uppercase; } body[id="Startseite"] .zfinal-title::after { content: ""; display: block; width: 86px; height: 4px; margin-top: 15px; background: var(--fed-accent); } body[id="Startseite"] .zfinal p { margin: 0 0 14px 0; color: var(--fed-text); font-size: 1.0rem; line-height: 1.58; } body[id="Startseite"] .zfinal .zfinal-claim { margin-top: 6px; margin-bottom: 0; color: var(--fed-navy); font-weight: 800; letter-spacing: 0.01em; } body[id="Startseite"] .zfinal-linkgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-content: center; } body[id="Startseite"] .zfinal-card { position: relative; display: flex; align-items: flex-start; gap: 13px; min-height: 92px; box-sizing: border-box; padding: 16px 15px; color: var(--fed-navy) !important; text-decoration: none; border: 1px solid rgba(11, 42, 74, 0.16); border-left: 4px solid rgba(177, 30, 43, 0.82); background: rgba(255,255,255,0.88); box-shadow: 0 4px 12px rgba(11, 42, 74, 0.06); transition: transform 260ms ease, box-shadow 260ms ease, background-color 260ms ease, border-color 260ms ease; } body[id="Startseite"] .zfinal-card:hover, body[id="Startseite"] .zfinal-card:focus { color: #ffffff !important; background: var(--fed-navy); border-color: var(--fed-navy); box-shadow: 0 12px 22px rgba(11, 42, 74, 0.22); transform: translateY(-3px); outline: none; } body[id="Startseite"] .zfinal-icon { flex: 0 0 42px; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; color: #ffffff; background: var(--fed-navy); border: 1px solid rgba(255,255,255,0.18); box-shadow: inset 0 -2px 0 rgba(255,255,255,0.08); font-size: 1.25rem; } body[id="Startseite"] .zfinal-card:hover .zfinal-icon, body[id="Startseite"] .zfinal-card:focus .zfinal-icon { color: #ffffff; background: var(--fed-accent); } body[id="Startseite"] .zfinal-card-text { display: block; min-width: 0; } body[id="Startseite"] .zfinal-card-title { display: block; margin: 0 0 5px 0; color: inherit; font-family: 'Oswald', Verdana, Arial, Helvetica, sans-serif; font-size: 1.2rem; line-height: 1.15; font-weight: 500; letter-spacing: 0.01em; text-transform: uppercase; } body[id="Startseite"] .zfinal-card-desc { display: block; color: rgba(28, 35, 43, 0.82); font-size: 0.86rem; line-height: 1.35; } body[id="Startseite"] .zfinal-card:hover .zfinal-card-desc, body[id="Startseite"] .zfinal-card:focus .zfinal-card-desc { color: rgba(255,255,255,0.82); } @media (max-width: 980px) { body[id="Startseite"] .zfinal-inner { width: min(100%, calc(100% - 48px)); } body[id="Startseite"] .zfinal-panel { grid-template-columns: 1fr; gap: 24px; padding: 30px 28px; } body[id="Startseite"] .zfinal-copy { max-width: 760px; } } @media (max-width: 640px) { body[id="Startseite"] .zfinal { margin-bottom: 30px; } body[id="Startseite"] .zfinal-inner { width: calc(100% - 36px); } body[id="Startseite"] .zfinal-panel { padding: 26px 20px; } body[id="Startseite"] .zfinal-linkgrid { grid-template-columns: 1fr; gap: 11px; } body[id="Startseite"] .zfinal-card { min-height: 0; padding: 14px 13px; } } @media (max-width: 420px) { body[id="Startseite"] .zfinal-inner { width: calc(100% - 28px); } body[id="Startseite"] .zfinal-title { font-size: 2rem; letter-spacing: -0.8px; } body[id="Startseite"] .zfinal-kicker { font-size: 0.7rem; letter-spacing: 0.08em; } } /* ========================================================================== Shop: vorbereitete Order-Modes / Batch-Made-to-Measure ========================================================================== */ body[id^="Shop"] .avail.batch { display: inline-block; color: var(--fed-navy); font-weight: 700; line-height: 1.45; margin: 4px 0 8px 0; } body[id^="Shop"] .subbutton.disabled, body[id^="Shop"] .subbutton.disabled:hover { opacity: 0.62; cursor: not-allowed; transform: none; filter: none; background-color: #d7dce2; color: #4b5563; } body[id^="Shop"] .batch-complete { display: inline-block; background-color: #2f7d3b; color: #ffffff; font-size: 18px; line-height: 40px; padding: 5px 25px; font-weight: 700; width: 190px; text-align: center; border-radius: 4px; user-select: none; } /* ========================================================================== Shop: Maß-/Sammelbestellformular (Magnoli / made-to-measure) ========================================================================== */ body[id^="Shop_x_x"] .custom-order-form { grid-column: 1 / -1; clear: both; width: calc(100% - 50px); margin: 18px 25px 34px 25px; padding: 0; box-sizing: border-box; border: 1px solid rgba(11, 42, 74, 0.18); border-left: 5px solid var(--fed-accent); background: rgba(255, 255, 255, 0.92); box-shadow: 0 12px 28px rgba(11, 42, 74, 0.10); } body[id^="Shop_x_x"] .custom-order-head { padding: 22px 26px 14px 26px; background: linear-gradient(90deg, rgba(11,42,74,0.08), rgba(255,255,255,0.0)), rgba(246,247,249,0.96); border-bottom: 1px solid var(--fed-line); } body[id^="Shop_x_x"] .custom-order-kicker { display: inline-block; margin-bottom: 6px; color: var(--fed-accent); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; } body[id^="Shop_x_x"] .custom-order-title { margin: 0 0 8px 0; color: var(--fed-navy); font-family: 'Oswald', Verdana, Arial, Helvetica, sans-serif; font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 500; letter-spacing: -0.6px; text-transform: uppercase; line-height: 1.12; } body[id^="Shop_x_x"] .custom-order-head p { margin: 0; max-width: 980px; color: var(--fed-text); line-height: 1.55; } body[id^="Shop_x_x"] .custom-order-fieldset { margin: 0; padding: 20px 26px 24px 26px; border: 0; border-bottom: 1px solid var(--fed-line); background: rgba(255,255,255,0.72); } body[id^="Shop_x_x"] .custom-order-fieldset legend { padding: 0 0 12px 0; color: var(--fed-navy); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; } body[id^="Shop_x_x"] .custom-order-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 18px; } body[id^="Shop_x_x"] .custom-order-field { display: block; position: relative; min-width: 0; } body[id^="Shop_x_x"] .custom-order-field > span { display: block; margin-bottom: 6px; color: var(--fed-navy); font-size: 0.92rem; font-weight: 700; } body[id^="Shop_x_x"] .custom-order-field input, body[id^="Shop_x_x"] .custom-order-field select { width: 100%; height: 42px; box-sizing: border-box; padding: 8px 42px 8px 10px; border: 1px solid rgba(11, 42, 74, 0.24); border-radius: 3px; background: #fff; color: var(--fed-text); font-size: 1rem; box-shadow: inset 0 1px 3px rgba(11,42,74,0.08); } body[id^="Shop_x_x"] .custom-order-field select { padding-right: 10px; } body[id^="Shop_x_x"] .custom-order-field input:focus, body[id^="Shop_x_x"] .custom-order-field select:focus { outline: none; border-color: rgb(0,140,198); box-shadow: 0 0 0 3px rgba(0,140,198,0.14), inset 0 1px 3px rgba(11,42,74,0.08); } body[id^="Shop_x_x"] .custom-order-field input:valid, body[id^="Shop_x_x"] .custom-order-field select:valid { border-color: rgba(47, 125, 59, 0.55); } body[id^="Shop_x_x"] .custom-order-field em { position: absolute; right: 10px; bottom: 11px; color: #6b7280; font-style: normal; font-size: 0.9rem; pointer-events: none; } body[id^="Shop_x_x"] .custom-order-confirmations { background: rgba(11,42,74,0.035); } body[id^="Shop_x_x"] .custom-order-check { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 10px 0; color: var(--fed-text); line-height: 1.45; } body[id^="Shop_x_x"] .custom-order-check input { flex: 0 0 auto; margin-top: 3px; } body[id^="Shop_x_x"] .custom-order-status { margin: 0; padding: 15px 26px; border-bottom: 1px solid var(--fed-line); background: rgba(178, 30, 43, 0.08); color: var(--fed-navy); font-weight: 700; line-height: 1.45; } body[id^="Shop_x_x"] .custom-order-status.is-ready { background: rgba(47, 125, 59, 0.10); color: #245c2d; } body[id^="Shop_x_x"] .custom-order-status.is-added { background: rgba(47, 125, 59, 0.16); color: #245c2d; } body[id^="Shop_x_x"] .custom-order-status.is-error { background: rgba(178, 30, 43, 0.13); color: #8f1722; } body[id^="Shop_x_x"] .custom-order-submit { border: 0; } body[id^="Shop_x_x"] .custom-order-submit-bottom { margin: 18px 26px 26px 26px; } body[id^="Shop_x_x"] .custom-data-info { color: var(--fed-navy); } @media (max-width: 980px) { body[id^="Shop_x_x"] .custom-order-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { body[id^="Shop_x_x"] .custom-order-form { width: calc(100% - 10px); margin: 12px 5px 26px 5px; } body[id^="Shop_x_x"] .custom-order-head, body[id^="Shop_x_x"] .custom-order-fieldset, body[id^="Shop_x_x"] .custom-order-status { padding-left: 16px; padding-right: 16px; } body[id^="Shop_x_x"] .custom-order-grid { grid-template-columns: 1fr; gap: 13px; } body[id^="Shop_x_x"] .custom-order-submit-bottom { margin: 16px; width: calc(100% - 32px); max-width: none; } } /* Maßformular: bei inkompatiblem Warenkorb nicht erst ausfüllen lassen */ body[id^="Shop_x_x"] .custom-order-form.is-blocked .custom-order-fieldset, body[id^="Shop_x_x"] .custom-order-form.is-blocked .custom-order-submit-bottom { display: none; } body[id^="Shop_x_x"] .custom-order-form.is-pending .custom-order-fieldset, body[id^="Shop_x_x"] .custom-order-form.is-pending .custom-order-submit-bottom { opacity: 0.42; pointer-events: none; } body[id^="Shop_x_x"] .custom-order-status.is-blocked { border-bottom: 0; background: rgba(178, 30, 43, 0.13); color: #8f1722; } /* Custom order validation feedback */ body[id^="Shop_x_x"] .custom-order-field.is-invalid > span, body[id^="Shop_x_x"] .custom-order-check.is-invalid span { color: #8f1722; } body[id^="Shop_x_x"] .custom-order-field.is-invalid input, body[id^="Shop_x_x"] .custom-order-field.is-invalid select { border-color: rgba(178, 30, 43, 0.75); box-shadow: 0 0 0 3px rgba(178,30,43,0.10), inset 0 1px 3px rgba(11,42,74,0.08); } /* Warenkorb-Mischlogik: Hinweis direkt am Lagerware-Button */ body[id^="Shop_x_x"] .shop-stock-add.is-loading { opacity: 0.65; pointer-events: none; } body[id^="Shop_x_x"] .shop-add-status { display: block; margin: 9px 0 4px 0; padding: 9px 11px; max-width: 520px; border-left: 4px solid rgba(11, 42, 74, 0.55); background: rgba(11, 42, 74, 0.08); color: var(--fed-navy); font-size: 13px; line-height: 1.35; white-space: normal; } body[id^="Shop_x_x"] .shop-add-status.is-error { border-left-color: #b21e2b; background: rgba(178, 30, 43, 0.13); color: #8f1722; } body[id^="Shop_x_x"] .shop-add-status.is-success { border-left-color: #2f6f3a; background: rgba(47, 111, 58, 0.13); color: #245c2d; } body[id^="Shop_x_x"] .shop-add-status.is-pending { border-left-color: rgba(11, 42, 74, 0.55); background: rgba(11, 42, 74, 0.08); color: var(--fed-navy); }