/* add all special styles used for displaying the rules */

/* .rules: used for all elements loading rules (rules at main site, rules ingame, popup with rules extract 
   #rules: div with complete rules used at main site
   #rulesPage: ingame rules page display
   #panelRules: ingame rules sidepanel display
   #popup.rules: popup with rules extract only */

@font-face { font-family: 'Paris Forbel'; src: local('Paris Forbel'), url('/Games/Botanicus/') format('truetype'); }

/*für 2 spaltige Darstellung*/
.rules .container { display: flex; gap: 20px; /* Abstand zwischen Spalten */ }
.rules .column { flex: 1; /* beide gleich breit */ }
.rules .column.cleft { flex: 2; /* beide gleich breit */ }
.rules .column.cright { flex: 1; /* beide gleich breit */ }
.rules .column.cleft3 { flex: 3; /* beide gleich breit */ }
.rules .column.cright3 { flex: 1; /* beide gleich breit */ }
/* Ab einer bestimmten Breite (z. B. 768px) */

@media (max-width: 768px) {
    .rules .container { flex-direction: column; /* Spalten untereinander */ gap: 0; /* Abstand entfernen im Einspalten-Layout */ }
}

/*.sidepanel: immer einspaltig */
#panelRules .container { display: flex; flex-direction: column; /* immer untereinander */ gap: 0; /* kein Abstand */ }


.rules .border { border: none; background-color: #edf6ed; border-radius: 12px; }
.rules .border_setup { border: none; background-color: #d6e295; border-radius: 12px; padding: 5px; box-shadow: 5px 5px 10px rgba(0,0,0,0.3); margin-right: 1%; }
.rules .border_blue { border: none; background-color: #cfe0e0; border-radius: 12px; padding: 5px; box-shadow: 5px 5px 10px rgba(0,0,0,0.3); margin-right: 1% ; margin-left: 1%;}

.rules .border_small_grey { border: solid 0.2vw grey; border-radius: 0.3vw; }
#panelRules .border_small_grey { border: solid 0.02vw grey; border-radius: 0.3vw; }

/*.rules h1 { font-family: "Paris Forbel", serif; border: none; color: black; font-size: 2vw; padding: 0px 0px 0px 10px; text-shadow: none; text-transform: uppercase;  border-bottom: 0.3vw solid #98bda4; border-top: 0.3vw solid #98bda4; text-align: center; margin-top: 4%; padding-top: 1%; padding-bottom: 1%; }*/
/*.rules h1 { font-family: "Paris Forbel", serif; border: none; color: black; font-size: 2vw; padding: 0px 0px 0px 10px; text-shadow: none; text-transform: uppercase;  border-bottom: 0.3vw solid #98bda4; border-top: 0.3vw solid #98bda4; text-align: center; margin-top: 4%; padding-top: 1%; padding-bottom: 1%; }*/
.rules h1 { font-family: "Paris Forbel", serif; border: none; color: black; /* Farbe*/ font-size: clamp(1em, 2vw, 2.1em ); padding: 0px 0px 0px 10px; text-shadow: none; text-transform: uppercase; /*Großschrift*/ border-bottom: 0.3vw solid transparent; border-top: 0.3vw solid transparent; text-align: center; margin-top: 4%; padding-top: 1%; padding-bottom: 1%; border-image: linear-gradient(to right, transparent, #98bda4, transparent) 1; }
#panelRules h1 { font-family: "Paris Forbel", serif; border: none; color: black; /* Farbe*/ font-size: clamp(0.8em, 1.4vw, 1.1em ); padding: 0px 0px 0px 10px; text-shadow: none; text-transform: uppercase; /*Großschrift*/ border-bottom: 0.3vw solid #98bda4; border-top: 0.3vw solid transparent; text-align: center; margin-top: 2%; padding-top: 1%; padding-bottom: 1%; border-image: linear-gradient(to right, transparent, #98bda4, transparent) 1; }
.rules h1 .icon { width: 3vw; /* Breite entspricht der Schriftgröße */ height: auto; /* Höhe passt sich proportional an */ }
#panelRules h1 .icon { width: 1.2vw; /* Breite entspricht der Schriftgröße */ height: auto; /* Höhe passt sich proportional an */ }
.rules h2 { font-family: "Paris Forbel", serif; text-indent: 1.3vw; text-align: left; font-size: clamp(0.8em, 1.4vw, 1.1em ); text-shadow: none; background: linear-gradient( to right, rgba(196,224,193,0) 0, /* ganz links transparent */ #c4e0c1 2vw, /* ab 2vw volle Farbe */ #c4e0c1 10%, /* bis 10% volle Farbe */ rgba(196,224,193,0) 100% /* nach rechts auslaufen */ ); font-weight: bold; margin-top: 2%; padding-top: 0.5%; padding-bottom: 0.5%; }
#panelRules h2 { font-family: "Paris Forbel", serif; text-align: left; font-size: clamp(0.8em, 1.2vw, 1.1em ); text-shadow: none; background: linear-gradient( to right, rgba(196,224,193,0) 0, /* ganz links transparent */ #c4e0c1 2vw, /* ab 2vw volle Farbe */ #c4e0c1 70%, /* bis 70% volle Farbe */ rgba(196,224,193,0) 100% /* nach rechts auslaufen */ ); font-weight: bold; padding-left: 0.5vw; text-indent: 0vw; }
.rules h3 { font-family: "Paris Forbel", serif; text-align: left; font-size: clamp(0.8em, 1.4vw, 1.1em ); color: black; text-shadow: none; padding: 1%; font-weight: bold; text-transform: uppercase; /*Großschrift*/ border-bottom: 0.2vw solid transparent; border-image: linear-gradient(to right, #98bda4, #98bda4, transparent) 1; }
#panelRules h3 { font-family: "Paris Forbel", serif; text-align: left; font-size: clamp(0.8em, 1.1vw, 1.1em ); color: black; text-shadow: none; padding: 1%; font-weight: bold; text-transform: uppercase; /*Großschrift*/ border-bottom: 0.2vw solid transparent; border-image: linear-gradient(to right, #98bda4, #98bda4, transparent) 1; }

.rules p { font-size: clamp(0.8em, 1.4vw, 1.1em ); color: black; text-shadow: none; padding-top: 0.2vw; padding-left: 1%; margin-left: 0.5vw; margin-right: 1%; }
#panelRules p { font-size: clamp(0.8em, 1vw, 1.1em ); color: black; text-shadow: none; padding-top: 0.2vw; padding-left: 1%; margin-left: 0.5vw; }
.rules ul {  color: black; text-shadow: none; margin-left: 1.3vw; margin-top: 0.2vw; margin-bottom: 0vw; }
#panelRules ul {  color: black; text-shadow: none; margin-left: 1.3vw; margin-top: 0.2vw; margin-bottom: 0vw; }
.rules .text_small { font-size: clamp(0.8em, 0.9vw, 1.1em ); color: black; text-shadow: none; padding: 1%; text-wrap: nowrap; }
#panelRules .text_small { font-size: clamp(0.8em, 0.9vw, 1.1em ); color: black; text-shadow: none; padding: 1%; text-wrap: nowrap; }
.rules .text_small_2 { font-size: clamp(0.8em, 1.2vw, 1.1em ); color: black; text-shadow: none; padding: 1%; }
#panelRules .text_small_2 { font-size: clamp(0.8em, 0.7vw, 1.1em ); color: black; text-shadow: none; padding: 1%; }
.rules table { margin-left: 1.2vw;  }
#panelRules table {  color: black; text-shadow: none; margin-left: 0.5vw }

.rules .center { text-align: center; }
.rules .right { text-align: right; }
.rules .left { text-align: left; }
.rules .margin_top20 { margin-top: 20% }
.rules .margin_top1 { margin-top: 1% }
.rules .margin_bottom1 { margin-bottom: 1% }
.rules .margin_right1 { margin-right: 1% }
.rules .margin_left40 { margin-left: 40% }
.rules .margin_left20 { margin-left: 3.5vw }
.rules .margin_left18 { margin-left: 3vw }
.rules .margin_left0 { margin-left: 0 }
#panelRules .margin_left0 { margin-left: 0 }
.rules .top { vertical-align: top; }
.rules .bottom { vertical-align: bottom; }
.rules .middle { vertical-align: middle }
.rules .padding_left_2 { padding-left: 2%; }
.rules .padding_right_2 { padding-right: 2%; }

.rules .label { display: inline-block; border-radius: 50%; height: 1.5em; width: 1.5em; background: black; border: 2px solid #666; color: white; text-align: center; font-size: 0.8333em; }

.rules .border_radius_40 {border-radius: 40%}

/*tables*/
.rules .cell_picture_70 { width: 70%; vertical-align: top; }
.rules .cell_picture_50_middle { width: 50%; vertical-align: middle; }
.rules .cell_picture_50 { width: 50%; vertical-align: top; }
.rules .cell_picture_30 { width: 30%; vertical-align: top; }
.rules .cell_picture_25 { width: 19%; vertical-align: top; }
.rules .cell_picture_20 { width: 20%; vertical-align: top; }
.rules .cell_picture_15 { width: 15%; vertical-align: top; }
.rules .cell_picture_10 { width: 10%; }
.rules .cell_picture_7 { width: 7%; vertical-align: top; }
.rules .cell_picture_5 { width: 5%; vertical-align: top; }

/*Images*/
.rules .img_100 { width: 100%; }
.rules .img_80 { width: 80%; }
.rules .img_70 { width: 70%; }
.rules .img_h_70 { width: 70%; max-width: none; }
.rules .img_50 { width: 50%; }
.rules .img_40 { width: 40%; }
.rules .img_30 { width: 30%; }
.rules .img_20 { width: 20%; }
.rules .img_20_h { height: 1.5em; }
.rules .img_25_h { height: 2em; }
.rules .img_25 { width: 20%; }
.rules .img_15 { width: 15%; }
.rules .img_10 { width: 10%; }
.rules .img_7 { width: 7%; }
.rules .img_5 { width: 5%; }
.rules .img_3 { width: 3%; }
.rules .img_2_5 { width: 2.5%; }
.rules .img_2_5_h { width: 1.3em; }
#panelRules .img_2_5 { height: 1.5vw; width: auto; }
.rules .img_2 { width: 2%; }

#rules .float_left { float: left; text-align: left; margin-right: 1em }
#rules .float_right { float: right; text-align: right; margin-right: 1em }

.rules .red { color: #be173a; text-shadow: none; font-weight: bold; }
.rules .green { color: #68981b; text-shadow: none; font-weight: bold; }
.rules .yellow { color: #cab910; text-shadow: none; font-weight: bold; }
.rules .blue { color: #4d72af; text-shadow: none; font-weight: bold; }

.rules .background_white { background-color: white ; }

/*ab hier von P'achakuna und Skymines kopiert, was nicht gebraucht wird -> löschen*/

.rules a { text-shadow: none; }

.rules ol { font-size: 1em; color: black; text-shadow: none; padding: 5px; list-style-type: lower-roman; }
.rules .green_malik { color: #729e78; /* Farbe*/ text-shadow: none; }
.rules .grey { color: #615354; /* Farbe Titan*/ text-shadow: none; }


/*tables*/




.rules .sidebaronly { display: none; }

#panelRules .sidebaronly { display: inherit; }