label {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Von Haus aus markiert Firefox Eingaben falsch. Das will ich auch bei anderen Browsern (Chrome) so */
input:invalid { /* es gibt auch :invalid, welches sich zusaetzlich auf form:invalid bezieht */
border: 0;
box-shadow: 0 0 1.5px 1px red;
}
input:focus:invalid { /* relevant in Chrome: Waehrend der Eingabe (:focus) brauchen wir unfertige Zahlen noch nicht markieren. Ausserdem haetten wir da den :focus UND den :invalid style */
box-shadow: none;
}
input[type=number] {
-moz-appearance: textfield; /* Beim Firefox-Browser 41 sehen die Spin-Buttons nicht schoen aus - ausserdem haben wir eigene Spin-Buttons (+ / -) */
}
input[type=number]::-webkit-inner-spin-button, /* fuer den Chrome - die Spin-Buttons nehmen so viel Platz weg, dass bei einem Input-Feld der Breite 3ch nur Platz guer eine Ziffer ist (ohne Spin-Buttons passen 3 Ziffern rein) */
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.link { /* Elemente (z.b: <span>) die wie Links aussehen sollen (wenn ihnen z.B. per Javascript ein Ereignis zugeordnet wurde) - z.B. Bei der Dachfenster-Typen-Wahl wenn Hersteller mit Plissee-System nicht zusammen passt */
cursor: pointer;
text-decoration: underline;
}
.clear {
clear: both;
height: 0;
width: 0;
overflow: hidden;
}
.icon {
/* Vector-Grafik (SVG) braucht immer Breiten-/Hoehenangabe */
width: 22px;
height: 22px;
}
.btnPfeil {
background-image: url(pfeile/pfeil_rechts_weiss.svg);
background-repeat: no-repeat;
background-position: 96% center;
padding-right: 2em !important;
display: inline-block;
background-color: #357dbc;
color: #ffffff;
padding-left: 0.5em;
padding-top: 0.5em;
padding-bottom: 0.5em;
text-decoration: none;
}
.listStyleTypeRaquo ul, ul.listStyleTypeRaquo {
list-style-type: none;
}
.listStyleTypeRaquo ul > li:before, ul.listStyleTypeRaquo > li:before {
content: "\00BB\0020";
}
.listStyleTypeRaquo ul > li, ul.listStyleTypeRaquo > li {
text-indent: -1em;
margin-left: 1em;
}
#konfigurator {
position: relative;
display: block;
}
#konfigurator, .extrafenster {
color: #444444;
}
.stoff {
overflow: auto;
display: inline-block;
max-width: 700px;
margin: auto;
text-align: left;
padding-right: 1em; /* Platz zwischen Text und evtl. eingeblendetem Scrollbalken */
}
.stoff_bild img {
display: inline-block;
max-width: 100%;
}
.stoff_ueberschrift {
color: #444444;
margin-bottom: 1em;
text-align: left;
}
.stoff_group {
display: flex;
}
.ansichtStoff.elemLt600 .stoff_group {
display: block;
}
.stoff_bild {
text-align: left;
flex: 0 0 300px;
overflow: hidden;
}
.ansichtStoff.elemLt600 .stoff_bild {
text-align: center;
}
.stoff_space {
flex: 0 1 45px;
}
.ansichtStoff.elemLt600 .stoff_space {
flex: 0 1 2em;
}
.stoff_box {
text-align: left;
flex: 1 1 370px;
overflow: auto;
padding-right: 1em; /* Abstand zu eventuellem Scrollbalken */
}
.ansichtStoff.elemLt600 .stoff_box {
max-width: 370px;
margin-left: auto;
margin-right: auto;
margin-top: 1em;
}
@media (max-width: 800px) { /* Layout einspaltig */
.stoff_box {
max-height: 400px
}
}
.stoff_box_ueberschrift {
margin-top: 2em;
margin-bottom: 2em;
}
.stoff_box_ueberschrift:first-child {
margin-top: 0;
}
.stoff_box_ueberschrift img {
vertical-align: middle;
margin-right: 1em;
}
.stoff_box_eigenschaften {
}
.stoff_box_eigenschaften, .stoff_box_eigenschaften a {
color: #444444;
}
.stoff_box_eigenschaften ul {
list-style: none;
margin: 0;
padding: 0;
}
.stoff_box_eigenschaften ul li:before {
content: "\002D \0020";
}
.stoff_box_eigenschaften ul li {
margin-bottom: 2px;
}
.stoff_box_highlights {
}
.stoff_box_highlights > * {
display: inline-block;
margin-left: 2em;
margin-right: 0;
vertical-align: top;
}
.stoff_box_highlights > * > * {
text-align: center;
font-size: 65%;
width: 40px;
max-width: 100%;
hyphens: auto; /* aktuell (08.10.2020 nur firefox) */
overflow: hidden; /* fuer die Browser, die hyphens nicht unterstuetzen (Chrome / Edge) */
}
.stoff_box_highlights img {
width: 100%;
}
.stoff_box_stoffprobe {
font-weight: bold;
text-decoration: underline;
}
.stoff_box_stoffprobe span {
text-decoration: none;
}
.stoff_box_beschr {
max-height: 600px;
overflow: auto;
line-height: 1.6em;
}
#ansicht3dInteraktion {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
white-space: nowrap;
}
#ansicht3dInteraktion > * {
border-radius: 16px;
color: #ffffff;
cursor: pointer;
display: inline-block;
}
#ansicht3dInteraktionOn {
background-color: #0082c0;
}
#ansicht3dInteraktionOff {
background-color: #434343;
}
#ansicht3dInteraktion > * > * {
vertical-align: middle;
}
#ansicht3dInteraktion > * img {
margin-top: 1px;
margin-left: 1px;
margin-bottom: 1px;
}
#ansicht3dInteraktion > * span {
margin-left: 0.5em;
margin-right: 0.5em;
}
#ansicht3dHinweis {
color: #ffffff;
text-align: center;
height: 130px;
width: 300px;
position:absolute;
background-color: rgba(80, 80, 80, 0.9);
left: 0;
right:0;
top: 0;
bottom:0;
border-radius: 5px;
margin: auto;
display: none; /* wird per Javascript eingeschalten */
}
#ansicht3dHinweis * {
box-sizing: border-box;
}
#ansicht3dHinweis svg {
width: 89%;
height: auto;
margin-top: 1em;
display:none;
}
#ansicht3dHinweis svg > g > g {
position:relative;
display:inline-block;
border: 2px solid orange;
}
#ansicht3dHinweis .hinweistext {
display:inline-block;
width:90px;
padding:1em;
text-align:center;
background-image: url("bilder/overlay-touch.svg");
background-repeat: no-repeat;
background-position: center 10px;
background-size: 280px 80px;
padding-top: 90px;
}
#ansicht3dHinweis .hinweistext#dreiDzoominfo {
background-position: 5px 10px;
}
#ansicht3dHinweis .hinweistext#dreiDmoveinfo {
background-position: -200px 10px;
}
#modellbild_preview .modellbild_preview_img {
margin-right: 10px;
margin-bottom: 5px;
height: 73px;
cursor: pointer;
box-shadow: 0px 3px 6px #00000042;
}
#modellbild_preview .modellbild_preview_img.active {
outline: 1px solid #454545;
box-shadow: none;
}
#modellbild_steuerung {
color: #888888;
font-size: 11px;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-around;
}
#modellbild_steuerung_left {
flex: 0 1 15%;
}
#modellbild_steuerung_animation {
cursor: pointer;
}
#modellbild_preview {
flex: 1 1 auto;
}
#modellbild_steuerung_right {
flex: 0 1 15%;
}
.graphSetBackground {
cursor: pointer;
height: 54px;
}
#link_save {
text-decoration: none;
}
#link_save .icon {
font-size: 24px;
}
#link_save .icon {
}
#link_save_data {
display: none;
}
.gruppe_warenkorb {
background-color: #E7E7E7;
padding: 10px;
position: fixed;
bottom: 0;
right: 0;
/* width: 100%; */
box-sizing: border-box; /* ist auch wichtig bei 1 Spalten-Responsive-Layout, wenn width 100% gesetzt ist (wegen dem Padding) */
border-radius: 3px;
margin-top: 1em;
display: flex;
justify-content: space-between;
flex-direction: row;
align-items: center;
}
.gruppe_warenkorb > * {
vertical-align: middle;
padding-left: 0.5em;
padding-right: 0.5em;
}
.gruppe_warenkorb > *:first-child {
padding-left: 0;
}
.gruppe_warenkorb > *:last-child {
padding-right: 0;
}
.sonderwunsch {
flex: 1 1 280px;
}
.sonderwunsch textarea {
width: 100%;
height: 50px;
border: 1px solid #e6e6e6;
box-sizing: border-box;
padding: 2px; /* ist bei wf.de sonst zu gross */
}
.box_menge {
text-align: right;
flex: 3 0 auto;
}
.menge {
text-align: center;
display: inline-block;
}
.menge input[type="text"], .menge input[type="number"] {
border: 1px solid #cccccc;
border-radius: 2px;
width: 40px;
color: #444444;
text-align: center;
margin-bottom: 0.2em;
padding: 2px; /* ist bei wf.de sonst zu gross */
}
.box_preis {
flex: 1 0 auto;
text-align: right;
}
.box_warenkorb {
flex: 1 0 auto;
text-align: right;
}
/* Stoffmuster Button */
#button_stoffmuster {
display: none;
}
/* Warenkorb Button */
.warenkorb_konfi {
cursor: pointer;
display: flex;
align-items: center;
}
.warenkorb_konfi .warenkorb_text, .warenkorb_konfi .warenkorb_symbol {
height: 43px;
line-height: 43px;
padding-left: 12px;
padding-right: 12px;
}
.warenkorb_konfi > * {
color: #ffffff;
}
.warenkorb_konfi .warenkorb_text {
text-transform: uppercase;
border-right: 1px solid #ffffff;
background-color: #888888;
white-space: nowrap;
}
@media (min-width: 599px) {
#eingabe.elemLt850 .warenkorb_text {
display: none;
}
}
.warenkorb_konfi .warenkorb_symbol {
background-color: #bf0008;
width: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.warenkorb_konfi .warenkorb_symbol img {
width: 30px;
}
.warenkorb_extrafenster {
cursor: pointer;
flex: 1 0 auto;
text-align: right;
}
.warenkorb_extrafenster .warenkorb_text, .warenkorb_extrafenster .warenkorb_symbol {
display: inline-block;
height: 43px;
line-height: 43px;
padding-left: 12px;
padding-right: 12px;
}
.warenkorb_extrafenster > * {
color: #444444;
}
.warenkorb_extrafenster .warenkorb_text {
text-transform: uppercase;
border-right: 1px solid #ffffff;
}
.warenkorb_extrafenster .warenkorb_text {
background-color: #e6e6e6;
}
.warenkorb_extrafenster .warenkorb_symbol {
width: 40px;
display: flex;
align-items: center;
justify-content: center;
background-color: #e6e6e6;
}
.warenkorb_extrafenster .warenkorb_symbol img {
width: 30px;
}
@media (max-width: 600px) {
.gruppe_warenkorb {
flex-wrap: wrap;
}
.gruppe_warenkorb > * {
text-align: right;
margin-top: 1em;
margin-bottom: 1em;
padding-left: 0;
padding-right: 0;
}
.gruppe_warenkorb .sonderwunsch {
flex: 0 0 100%;
}
.gruppe_warenkorb .box_menge {
flex: 0 0 50%;
}
.gruppe_warenkorb .box_preis {
flex: 0 0 50%;
}
.gruppe_warenkorb .box_stoffmuster {
flex: 0 0 100%;
}
.gruppe_warenkorb .box_stoffmuster > * {
justify-content: right;
}
.gruppe_warenkorb .box_warenkorb {
flex: 0 0 100%;
}
.gruppe_warenkorb .box_warenkorb > * {
justify-content: right;
}
}
#spalten2 {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: stretch;
}
#spalten2 > * {
overflow: auto;
}
#spalten2 #visualisierung {
flex: 1 0 0;
text-align: center;
position: relative;
padding-left: 2%;
}
@media (max-width: 800px) {
#spalten2 #visualisierung {
padding-left: 0;
}
}
.ajax_lade {
position: absolute;
right: 0;
top: 0;
visibility: hidden;
width: 50px;
height: 50px;
}
#modellbild_kopf {
margin-bottom: 1em;
display: flex;
justify-content: space-between;
}
#modellbild_ueberschrift {
flex: 1 1 0;
text-align: left;
}
#modellbild_kopf_mitte {
flex: 0 0 110px;
display: none;
}
#modellbild_kopf_rechts {
flex: 1 1 0;
display: none;
}
#paper {
margin: auto;
width: 100% !important; /* fuer Skalierung in der Visualisierung wichtig */
}
.modellbild { /* das Ganze als Klasse definieren, nicht als ID, weil beim Zoom, die Elemente geklont werden und dort die ID umbennat ist, die Klasse aber nicht */
position: relative;
}
.modellbild > * {
display: none;
}
#spalten2 #visualisierung .ueberschrift1 {
font-size: 16px;
}
#spalten2 #visualisierung .ueberschrift2 {
font-weight: bold;
font-size: 16px;
}
#visualisierung svg {
max-width: 100%;
}
#spalten2 #trenner {
flex: 0 0 10px;
background-color: #cdcdcd;
cursor: col-resize;
/* visibility: hidden; hover on hidden element funktioniert nicht (mit einem extra div haette es zwar wieder funktionier, aber ich mache es jitzt mit opacit) */
opacity: 0;
margin-left: 1%;
margin-right: 1%;
}
#spalten2 #trenner:hover {
opacity: 1;
}
#spalten2 #eingabe {
flex: 1 0 0;
position: relative;
padding-right: 2%;
}
#eingabe .bereichsueberschrift {
background-color: #444444;
color: #ffffff;
font-size: 16px;
font-weight: normal;
padding: 1em;
text-align: left;
margin-top: 0;
margin-bottom: 0;
}
#accordion {
overflow: auto;
padding-top: 8px;
}
#eingabe .eingabeBox {
margin-top: 1em;
margin-left: 2em;
margin-bottom: 1em;
display: none;
overflow: hidden; /* fuer die Animation */
}
#eingabe .accordion_zwischenueberschrift {
font-weight: normal;
margin-top: 0;
margin-bottom: 1em;
}
#eingabe .erklaerung {
font-size: 90%;
color: #888888;
}
#formen ul {
list-style-type: none;
padding: 0;
margin: 0;
/*
display: flex;
flex-wrap: wrap;
geht mit der letzten Zeile nicht so richtig
*/
display: grid;
grid-template-columns: repeat(auto-fit,minmax(170px, 1fr)); /* auto-fit, statt auto-fill - fit nutzt zur verfuegung stehenden Platz aus, fit nimmt den Mnidest-Platz */
grid-column-gap: 30px;
}
#formen ul li {
}
#formen ul li label {
}
#formen ul li img {
margin-bottom: 1em;
}
.formBildVorauswahl {
/* height: 80px; */
width: 100%;
max-width: 200px;
}
#formen ul li {
/* flex: 1 0 100px; */
padding: 1em;
}
#formen ul li {
}
#formen ul li label {
display: flex;
flex-direction: column;
align-items: center;
/* radio buttons auf eine Hoehe bringen */
height: 100%;
justify-content: space-between;
}
#formen ul li label > * {
text-align: center;
}
#formen ul li .input {
}
#formen ul li .bezeichnung {
padding-bottom: 1em;
}
#formen ul li .bezeichnung .zusatz {
color: #888888;
display: block;
}
#formen ul li .price {
text-align: left;
padding-left: 1em;
padding-right: 1em;
}
#formen ul li .info {
width: 47px;
cursor: pointer;
text-align: center;
}
/* #eingabe Element kleiner als 450 (lower than (lt)) */
/* die Klassen werden per Javascript gesetzt */
/* margins und paddings verkleinern */
/*
#eingabe.elemLt650 #formen ul li .input {
margin: 0;
}
*/
.groupButtonsBottom {
text-align: right;
margin-top: 1em;
margin-bottom: 1em;
}
.groupButtonsBottom > * {
margin-right: 1em;
}
.btnNextBox {
padding-top: 0.5em;
padding-bottom: 0.5em;
padding-left: 2em;
padding-right: 2em;
display: inline-block;
cursor: pointer;
border: 1px solid #000000;
border-radius: 2px;
background-color: #000000;
color: #ffffff;
}
#linkDesignwahl {
display: inline-block;
}
#group_masseingabe {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 3em;
}
.inputs_mass label {
display: block;
margin-top: 1.5em;
}
.inputs_mass label:first-child {
margin-top: 2px; /* eigentlich 0px, aber der Firefox (Chrome nicht) macht beim focused input (welches sich in diesem label befindet) ein outline von 2px standardmaessig dran, was sonst abgeschnitten wuerde */
}
.inputs_mass label > * {
vertical-align: middle;
}
.mass_bez {
display: inline-block;
min-width: 90px; /* Das alles gleichmaessig untereinander ist. bei laengeren Begriffen (wie "Durchmesser" bei Tischdecke rund) eben mehr Platz */
}
.mass_input_unit {
white-space: nowrap;
}
.mass_grenze {
font-size: 80%;
color: #888888;
margin-left: 1em;
white-space: nowrap;
}
.inputs_mass input[type=number], .inputs_mass input[type=text] { /* number oder text - je nachdem was es letztendlich fuer ein Feld wird */
background-color: #ececec;
border: 1px solid #cecece;
padding: 6px;
text-align: right;
width: 60px;
font-size: 16px; /* Mindestgroesse, dass IPhone nicht reinzoomt in das Feld */
}
#eingabe.elemLt450 #masseingabe {
margin-left: auto;
margin-right: auto;
}
#eingabe.elemLt450 .mass_grenze {
display: none;
}
#masseingabe_drehbare_formen {
width: 100%;
}
#hinweisMasseingabe {
display: none;
}
.boxIconLeft {
display: flex;
align-items: stretch;
margin-top: 2em;
max-width: 480px;
}
.boxIconLeft:first-child {
margin-top: 0;
}
.boxIconLeft > .left {
flex: 0 0 34px;
padding: 1em;
display: flex;
justify-content: center;
}
.boxIconLeft.achtung > .left {
background-color: #ffde0e;
}
.boxIconLeft.achtung > .left img {
width: 100%;
}
.boxIconLeft > .right {
flex: 1 1 0;
padding: 1em;
}
.boxIconLeft > .left img {
vertical-align: middle;
}
.boxIconLeft.achtung > .right {
background-color: #F5F5F5;
}
.boxIconLeft.achtung > .right, .boxIconLeft.achtung > .right li {
font-size: 90%;
}
.boxIconLeft.messen {
background-color: #357dbc;
cursor: pointer;
}
.hinweisMasseingabeUeberschrift {
font-weight: bold;
}
#hinweisMasseingabeList {
margin-left: 0;
padding-left: 0.6em;
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
list-style-type: '- ';
}
#masseingabe_soforthinweise {
display: none;
margin-top: 1em;
margin-left: 2em;
padding: 1em;
border: 1px solid #bb0000;
}
.eingabeBox .preis_einzel {
text-align: right;
}
.eingabeBox .preis_gesamt {
text-align: right;
color: #1a73ff;
}
.label_drehen img {
vertical-align: middle;
margin-left: 0.5em;
margin-right: 0.5em;
}
#linkartikel {
display: none; /* wird per Javascript angeschalten */
}
#linkartikel_list .linkartikel_box {
}
#linkartikel_list .linkartikel_box a {
text-align: center;
display: block;
text-decoration: none;
color: #444444;
font-size: 0.9em;
border: 1px solid #ddd;
padding: 10px;
}
#linkartikel_list .linkartikel_box a:hover {
box-shadow: 0px 3px 6px #00000029;
}
#linkartikel_list .linkartikel_box a img {
height: 100px;
display: block;
margin-left: auto;
margin-right: auto;
}
#linkartikel_list .linkartikel_box a .title {
display: block;
margin-top: 10px;
padding-top: 8px;
padding-bottom: 8px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#linkartikel_list .linkartikel_box a:hover .title {
padding-top: 0;
padding-bottom: 0;
white-space: normal;
text-overflow: initial;
}
.last_element {
/*
schafft Platz nach unten
Extra Element, weil wir nicht wissen, was sonst das letzte Element ist (Masse oder Drehen oder Passend-Dazu-Artikel, je nach Konfiguration)
letztes Element vom uebergeordneten Div aus waere die Warenkorb-Box. Die ist aber absolute platziert und faellt aus dem Fluss raus
*/
margin-bottom: 18em;
}
@media (max-width: 800px) {
/* einspaltig untereinander (und nicht mehr 2 Spalten) */
/* Die Pixelbreite zur Aenderung sind auch in javascript eingebaut! */
#spalten2 {
flex-direction: column;
margin-top: 2em;
position: static;
}
#spalten2 > *{
flex: none !important;
}
#modellbild_steuerung {
position: static;
margin-top: 1em;
margin-bottom: 2em;
}
#spalten2 #trenner {
display: none;
}
#spalten2 #eingabe {
padding-left: 2%;
}
#accordion {
margin-bottom: 2em;
}
.last_element {
/* bei einspaltigem Layout stoert das wieder */
margin-bottom: 0;
}
.gruppe_warenkorb {
margin-top: 5em;
margin-left: 0;
margin-right: 0;
margin-bottom: 1em;
border-left: none;
border-right: none;
border-bottom: none;
position: static;
}
}
@media (max-width: 600px) {
#modellbild_steuerung {
display: block;
}
}
@media (max-width: 500px) {
#eingabe .eingabeBox {
margin-left: 1em; /* statt 2em */
}
}
#extrafenster {
display: none;
}
.extrafenster {
background-color: #ffffff;
height: 100%;
box-sizing: border-box;
}
@media (max-width: 800px) {
.extrafenster {
padding: 1em;
}
}
.fensterDesign {
display: flex;
flex-direction: column;
}
.fensterDesign input[type="checkbox"] {
vertical-align: middle;
}
.fensterZweiSpalten {
display: flex;
height: 100%;
}
.fensterZweiSpalten > .buttonAusklapp {
display: none;
position: absolute;
left: 0px;
z-index: 2;
font-weight: bold;
cursor: pointer;
top: 100px;
}
.fensterZweiSpalten > .buttonAusklapp img {
height: 40px;
display: block;
}
.fensterZweiSpalten > .left {
border-right: 1px solid #cecece;
overflow: auto;
}
.fensterZweiSpalten > .right {
overflow: auto;
position: relative; /* fuer die absolut positionierten Ausblend-Balken */
}
.fensterZweiSpalten > .right:before {
/* Uebergang ins Transparente */
position: absolute;
z-index: 1;
top: 2em;
left: 0;
background-color: transparent;
background-image: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
width: 100%;
height: 10px;
content: ' ';
}
.fensterZweiSpalten > .right:after {
/* Uebergang ins Transparente */
position: absolute;
z-index: 1;
bottom: 0;
left: 0;
background-color: transparent;
background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
width: 100%;
height: 10px;
content: ' ';
}
.fensterDesign .fensterZweiSpalten > .left {
flex: 0 1 290px;
}
.fensterDesign .fensterZweiSpalten > .right {
flex: 4.8 1 0;
display: flex;
flex-direction: column;
padding-bottom: 1em;
}
@media (max-width: 1000px) {
/* ab hier die links Spalte zum einklappen */
.fensterDesign .fensterZweiSpalten {
display: block;
position: relative;
}
.fensterDesign .fensterZweiSpalten > .buttonAusklapp {
display: block;
}
.fensterDesign .fensterZweiSpalten > .left {
position: absolute;
left: 0;
top: 0;
background-color: #ffffff;
width: 0;
padding-right: 0;
z-index: 10;
}
}
.fensterZweiSpalten > .left .ueberschrift {
color: #ffffff;
background-color: #444444;
font-size: 18px;
text-align: center;
padding: 0.5em;
}
.fensterZweiSpalten > .left h3 {
font-size: 16px;
border-bottom: 2px solid #000000;
padding-bottom: 0.5em;
margin-top: 2em;
margin-bottom: 1em;
text-transform: uppercase;
}
.fensterZweiSpalten > .right .ueberschrift {
text-align: center;
margin: 0;
font-size: 16px;
font-weight: 400;
padding: 0.5em;
color: #000000;
}
.extrafensterDetailsBottom {
text-align: right;
}
.extrafensterDetailsBottom .abpreis {
font-size: 16px
}
.extrafenster .buttons {
margin-top: 1em;
}
.extrafenster .buttons button {
margin-left: 1em;
border: none;
padding: 0.5em;
font-size: 13px;
cursor: pointer;
}
.extrafenster .buttons .stoffprobe {
background-color: #cecece;
color: #444444;
}
.extrafenster .buttons .stoffprobe:hover {
background-color: #bebebe;
}
.extrafenster .buttons .uebernehmen {
background-color: #357dbc;
color: #ffffff;
}
.extrafenster .buttons .uebernehmen:hover {
background-color: #458dcc;
}
.listDesigns {
overflow: auto;
position: relative; /* fuer die Positionsbesteimmung eines Stoffes mit offsetLeft - fuer die Position des Pfeils */
margin-left: 3%;
padding-right: 2%;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 30px;
}
.listDesigns .notFound {
margin-top: 5em;
font-style: italic;
text-align: center;
color: #999999;
}
.listDesigns .listDesignsDesign {
border: 1px solid #cccccc;
vertical-align: top;
}
.listDesigns .listDesignsGroupBilder {
display: flex;
}
.listDesigns .listDesignsGroupBilder > * {
/* flex: 0 0 50%; */
width: 50%;
}
.listDesigns .listDesignsIcons {
display: flex;
align-items: center;
margin: 20px 1em 0 1em;
justify-content: space-between
}
.listDesigns .listDesignsIcons .icons {
text-align: center;
}
.listDesigns .listDesignsIcons .icons img {
height: 20px;
margin: 5px;
vertical-align: middle;
}
.listDesigns .listDesignsIcons .icons span {
font-size: 12px;
}
.listDesigns .listDesignsDesign .details {
font-size: small;
text-decoration: underline;
}
.listDesigns .listDesignsBoxDetailsWrap {
overflow: hidden; /* fuer die Animation height: 0 */
margin-bottom: 2em;
grid-column: 1/-1;
}
.listDesigns .listDesignsBoxDetails {
display: flex;
flex-direction: row;
border: 2px solid #cecece;
padding: 1.8%;
position: relative;
box-sizing: border-box;
}
.listDesigns .listDesignsBoxDetails.elemLt500 {
flex-direction: column;
}
.listDesigns .listDesignsBoxDetails .schliessen {
position: absolute;
top: 1em;
right: 1em;
cursor: pointer;
}
.listDesigns .pfeilOben {
position: absolute;
height: 12px;
font-size: 20px;
}
.listDesigns .listDesignsBoxDetails > .left {
flex: 1 0 auto;
margin-right: 4%;
}
.listDesigns .listDesignsBoxDetails > .left img.boxDetailsDesignbild {
width: 100%;
display: block; /* wegen dem Space unter der Baseline */
}
.listDesigns .listDesignsBoxDetails > .right {
flex: 10 5 auto;
}
.listDesigns .listDesignsBoxDetails > .right h3 {
font-size: 15px;
}
/*
.listDesigns .listDesignsBoxDetails > .right .versand {
color: #00900a;
font-size: 13px;
}
.listDesigns .listDesignsBoxDetails > .right .versand .haken {
font-size: 16px;
font-weight: bold;
}
*/
.listDesigns .listDesignsBoxDetails .eigenschaften {
column-width: 200px;
line-height: 20px;
padding-left: 5%; /* das spiegelt die Standardeinsteellung im Firefox 44 wider (40px), verkleinert sich jetzt aber passenderweise bei kleinen Layouts */
}
.listDesigns .listDesignsBoxDetails .boxPDFDatenblatt {
margin-left: 3em;
margin-top: 2em;
}
.listDesigns .listDesignsBoxDetails .boxPDFDatenblatt a {
}
.listDesigns .listDesignsBoxDetails .boxPDFDatenblatt img {
vertical-align: middle;
}
.listDesigns .listDesignsBoxDetails .licht {
line-height: 20px;
}
.listDesigns .listDesignsBoxDetails .design_big_bildbox {
position: relative;
width: 250px;
margin-left: 1em;
}
.listDesigns .listDesignsBoxDetails.elemLt550 .design_big_bildbox {
width: 180px;
}
.listDesigns .listDesignsBoxDetails.elemLt500 .design_big_bildbox {
/* hier jetzt untereinander */
margin-left: auto;
margin-right: auto;
margin-bottom: 1em;
width: 200px;
}
.listDesigns .listDesignsBoxDetails .design_big_bild {
}
.listDesigns .listDesignsBoxDetails .design_big_lupe {
position: absolute;
top: 15px;
right: -1px;
cursor: pointer;
}
.listDesigns .listDesignsBoxDetails .design_big_nav_left, .listDesigns .listDesignsBoxDetails .design_big_nav_right {
position: absolute;
top: 160px;
cursor: pointer;
width: 12px;
}
.listDesigns .listDesignsBoxDetails .design_big_nav_left {
left: -20px;
}
.listDesigns .listDesignsBoxDetails .design_big_nav_right {
right: -20px;
}
.listDesigns .listDesignsBoxDetails .design_big_preview {
margin-top: 7px;
margin-left: 1em;
}
.listDesigns .listDesignsBoxDetails .design_big_preview > img {
border: 1px solid #cccccc;
margin-right: 3px;
width: 30px;
height: 40px;
/* cursor: pointer; -- solange es mouseover, statt click triggert, hier vielleicht kein cursor: pointer */
}
.listDesigns .listDesignsBoxDetails .design_big_preview > img.active {
border: 1px solid #454545;
}
.extrafenster .tabsDesign {
margin-top: 1em;
}
.extrafenster .tabsDesign.elemLt700 .bez {
display: none;
}
#tabFensterDesign ul {
padding-left: 1em;
}
#tabFensterDesignKunden {
max-height: 202px;
overflow: auto;
}
.meinung_text {
font-style: italic;
margin-bottom: 1em;
}
.meinung_keine {
font-style: italic;
text-align: center;
margin-top: 2em;
}
.kundenmeinungen {
max-height: 220px;
overflow: auto;
}
.listDesigns .listDesignsAreaActivateDetails {
cursor: pointer;
}
.listDesigns .listDesignsBez, .listDesigns .listDesignsErsetztbez {
font-size: 11px;
color: #888888;
font-weight: 600;
text-align: center;
display: flex;
flex-flow: column;
gap: .25em;
margin: 0 1.25em .5em 1.25em;
min-height: 3em;
align-items: center;
justify-content: center;
}
.listDesigns .listDesignsErsetztbez {
font-style: italic;
}
.listDesigns .listDesignsDesign .listDesignsGroupBottom {
display: flex;
align-items: center;
margin: 1em;
font-weight: 400;
gap: 1em;
}
.listDesignsGroupBottom .uebernehmen {
padding-top: 0.5em;
padding-bottom: 0.5em;
background-color: #edf3f5;
color: #0082c0;
flex: 2 0 0;
transition-duration: 0.2s;
text-align: center;
cursor: pointer;
}
.listDesignsGroupBottom .uebernehmen:hover {
background-color: #0082c0;
color: #fff;
}
.listDesignsGroupBottom .haken {
width: 0px;
display: inline-block;
overflow: hidden;
text-align: right;
transition-duration: 0.2s;
vertical-align: bottom;
}
.listDesignsGroupBottom .uebernehmen:hover .haken {
width: 16px;
}
.fensterDesign input[type="checkbox"] {
margin-right: 7px;
}
.fensterDesign .icon {
vertical-align: middle;
width: 22px;
height: 22px;
margin-left: 0;
margin-right: 7px;
}
.extrafenster .close {
position: absolute;
top: 0.6em;
right: 0.7em;
cursor: pointer;
font-size: 16px;
}
.fensterDesign .check label {
display: block;
text-indent: -2em;
margin-left: 2em;
margin-top: 5px;
margin-bottom: 5px;
}
#formDesign {
padding: 1em;
}
#wrapFormSuche {
text-align: right;
margin-bottom: 1em;
}
.suche {
background-image: url(icons/lupe.svg);
background-repeat: no-repeat;
background-position: 5% center;
background-size: 18px 18px;
padding-left: 40px;
padding-right: 1em;
padding-top: 0.7em;
padding-bottom: 0.7em;
border: none;
box-sizing: border-box;
width: 100%;
background-color: #f1f1f1;
border-radius: 2em;
font-size: 16px;
margin-top: 1em;
}
.group_color_boxes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(25px, 1fr));
column-gap: 25px;
row-gap: 15px;
}
.group.color label {
display: inline-block;
}
.farbbox {
display: block;
width: 25px;
height: 25px;
line-height: 25px;
float: left;
border: 1px solid #f1f1f1;
text-align: center;
font-weight: bold;
cursor: pointer;
font-size: 15px;
}
.farbbox.beige { background-color: #d4be8d; color: #ffffff; }
.farbbox.blau { background-color: #3485ff; color: #ffffff; }
.farbbox.braun { background-color: #6f3e18; color: #ffffff; }
.farbbox.gelb { background-color: #fffc00; color: #888888; }
.farbbox.gruen { background-color: #73b525; color: #ffffff; }
.farbbox.orange { background-color: #ff6501; color: #ffffff; }
.farbbox.rosa { background-color: #ed008c; color: #ffffff; }
.farbbox.rot { background-color: #ea0001; color: #ffffff; }
.farbbox.schwarz { background-color: #000000; color: #ffffff; }
.farbbox.violett { background-color: #9349aa; color: #ffffff; }
.farbbox.weiss { background-color: #ffffff; color: #888888; }
.farbbox.grau { background-color: #838383; color: #ffffff; }
.farbbox.transparent { background-color: #ffffff; background: linear-gradient(to bottom right, #e1e1e1 0%, #e1e1e1 50%, #ffffff 50%, #ffffff 100%); color:#888888; }
#fensterWarenkorb {
}
#fensterWarenkorb #fensterWarenkorb_top {
/* padding: 40px; */
padding: 8%;
}
#fensterWarenkorb #fensterWarenkorb_top_left {
float: left;
width: 34%;
position: relative;
}
#fensterWarenkorb #warenkorb_box_produktbild {
/* width: 161px; */ /* es kam vor, dass die Bilder zu gross waren und hier nicht reingepasst haben */
max-height: 340px;
max-width: 161px;
}
#fensterWarenkorb #warenkorb_icon_hinzugefuegt {
position: absolute;
top: 50%;
margin-top: -27px;
left: 50%;
margin-left: -27px;
display: none;
}
#fensterWarenkorb #fensterWarenkorb_top_right {
float: right;
width: 64%;
}
#fensterWarenkorb #warenkorb_box_status {
border-bottom: 1px solid #e6e6e6;
padding-bottom: 7px;
margin-bottom: 20px;
font-size: 1.2em;
}
#fensterWarenkorb #warenkorb_box_titel {
font-size: 1.1em;
font-weight: bold;
}
#fensterWarenkorb #warenkorb_box_groesse {
}
#fensterWarenkorb #warenkorb_box_preis {
color: #888888;
}
#fensterWarenkorb #warenkorb_box_sonderwunsch_ueberschrift {
display: none; /* wird ueber Javascript angeschalten */
margin-top: 2em;
}
#fensterWarenkorb #warenkorb_box_sonderwunsch {
font-style: italic;
color: #888888;
}
#fensterWarenkorb_top_buttons {
margin-top: 28px;
}
#fensterWarenkorb_top_buttons .left {
float: left;
display: block;
text-transform: uppercase;
border: 2px solid #bf0008;
height: 39px; /* so hat es mit seinen bordern die gleiche Hoehe wie das Warnkorb-Icon */
line-height: 39px;
color: #bf0008;
padding-left: 1em;
/* padding-right: 46px; */
padding-right: 8%;
cursor: pointer;
}
#fensterWarenkorb_top_buttons .right {
float: right;
display: flex;
text-decoration: none;
}
@media (max-width: 530px) {
#fensterWarenkorb_zurueck_einkaufen {
display: none;
}
}
#fensterWarenkorb #fensterWarenkorb_bottom {
display: none;
border-top: 5px solid #e6e6e6;
padding: 2em;
}
.fensterWarenkorb_bottom_ueberschrift {
margin-bottom: 1em;
font-size: 13pt;
}
.warenkorbAehnlichArtikel {
display: inline-block;
width: 161px;
vertical-align: top;
margin-right: 1em;
color: #444444;
text-decoration: none;
}
.warenkorbAehnlichArtikel img {
width: 161px;
border: none;
}
.warenkorbAehnlichArtikelTitel {
font-size: 85%;
text-align: center;
}
.warenkorbAehnlichArtikelPreis {
font-size: 85%;
font-weight: bold;
text-align: center;
}
@media (max-width: 650px) {
#fensterWarenkorb {
width: auto;
}
#fensterWarenkorb_top_left {
display: none;
}
#fensterWarenkorb #fensterWarenkorb_top_right {
width: auto;
float: none;
}
#fensterWarenkorb_top_buttons .left {
margin-bottom: 1em;
}
}
/* ehemals shop.css */
.preis {
font-size: 0.45cm;
font-weight: bold;
}
#anbieterkennzeichnung {
text-align: right;
cursor: pointer;
text-decoration: underline;
font-size: 11px;
}
/* Ende ehemals shop.css */