html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,u,i,center,dl,dt,dd,ol,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
form { display:inline; }
textarea, select, input, button { outline: none; }

html
{
 font-size:15px;
}

@font-face {
  font-family: "vocabularytrainer";
  src: url("../fonts/monospace.ttf") format("truetype");
}

body
{
 line-height: 1.55;
 font-weight: 400;
 font-family: var(--lg-font);
 color: #272727;
 background-color: var(--lg-bg);
 position:relative;
}

h1,h2,h3,h4,h5, .h1_style, .h2_style, .h3_style, .h4_style { margin:0; padding:0; display:block; font-family: var(--lg-font-heading); font-weight: var(--lg-font-weight-heading);  }
h1, .h1_style { font-size:1.4em; margin-bottom:0.1em; }
h2, .h2_style { font-size:1.3em; margin-bottom:0.2em; }
h3, .h3_style { font-size:1.2em; margin-bottom:0.5em; }
h4, .h4_style { font-size:1.2em; margin-bottom:0.5em; }
p {  margin-bottom:0.7em; font-size: var(--lg-font-size-p); }
.h4_style { padding-top:0.5rem; }

.leader h1 { font-size:1.7em; }
.leader .main-text { font-size:1.1em;  line-height:1.5; color: #505050}

a, .a-style { color:#E55853; cursor:pointer; text-decoration:underline; }
a:hover, .a-style:hover { text-decoration:underline; text-decoration:underline;  }

td, th
{
 text-align:left;
 padding-top:6px;
 padding-bottom:6px;
 padding-right:6px;
 border-bottom:1px solid #E8E8E8;
}

th { font-size:13px; color:#5E5E5E; padding-bottom:3px; padding-top:0px; }



info, error, success, error2, open, restricted
{
 margin-bottom:0px;
 padding:0px;
 padding-left:26px;
 display:block;
 background-repeat:no-repeat; background-position:left center;
}

error { background-image:url('../images/wrong.png'); }
error2 { background-image:url('../images/error.png'); font-size:1.1em; }
success { background-image:url('../images/correct.png'); }
info { background-image:url('../images/info2.gif'); }
open { background-image:url('../images/open1.gif'); }
restricted { background-image:url('../images/open0.gif'); margin-bottom:10px; padding-top:4px; }

/* START Bereiche */

.header
{
 display:block;
 height:auto;
 background-color:#FFFFFF;
 border-bottom:1px solid var(--lg-border);
 position:sticky;
 top:0;
 z-index:6;
 width:100%;
}

.leader
{
 display:block;
 background-color:#EBEBEB;
 border-bottom:1px solid var(--lg-border);
 z-index:2;
 background: linear-gradient(90deg, transparent 50%, #EBEBEB 50%);
}

.sub-header
{
 display:block;
 background-color:#EBEBEB;
 border-bottom:1px solid var(--lg-border);
 z-index:2;
 display:none;
 width:100%;
}

.sub-header .container { padding-left:0; padding-right:0; }
.sub-header .content { background-color:#EBEBEB; padding-bottom:0.4rem }

.main
{
 background-color: var(--lg-bg);
 border-bottom:1px solid var(--lg-border);
}

.footer
{
 background-color:#EBEBEB;
 font-size:0.9em;
}

/* ENDE Bereiche */

/* START Container */

.container
{
 margin: 0 auto;
 max-width:1150px;
 background-color: var(--lg-bg);
}

.header .container { background-color:#FFFFFF; position:relative; padding:0%; }
/* Background comes from the .main rule above. This used to override it to
   #FFFFFF, which is what made the main band white while its content column
   was grey; both are now var(--lg-bg). Only the header stays white. */
.main  { padding-bottom:0; }
.container.container-grey { background-color: var(--lg-bg); }

.container:after {
    content: '';
    display: block;
    clear: both;
}

/* ENDE Container */

/* START Backgrounds (sind Teil vom Container im .leader) */

.include-background {
    background-repeat: no-repeat;
    background-size: 48% auto;
    background-position: 100% center;
}
.background-index {
    background-image: url(../images/student.jpg);
}


/*
.background-index { background-image:url('../images/student.jpg'); }
.background-index { background-image:url('../images/background-student2.jpg'); }


.include-background.background-index {
	background-size: auto 900px;
    background-position: 100% -30px;
}
*/


.leader-background { position:absolute; top:0; right:0; background-color:#DDDDDD; bottom:0; height:100%; }
.leader-background img { height:100%; }

.background-english { background-image:url('../images/background-index-english.jpg'); }
.background-german { background-image:url('../images/background-index2.jpg'); }
.background-french { background-image:url('../images/background-index2.jpg'); }
.background-italian { background-image:url('../images/background-index2.jpg'); }
.background-spanish { background-image:url('../images/background-index2.jpg'); }
.background-portuguese { background-image:url('../images/background-index2.jpg'); }

.include-background.background-speaking { background-image:url('../images/speaking.jpg'); background-size: auto 100%; background-position:110% center; }
.include-background.background-teachers { background-image:url('../images/teachers.jpg'); background-size: 50% auto; background-position:100% top; }
.include-background.background-desk { background-image:url('../images/premium-background.jpg'); background-position:left top; background-size: 100% auto; background-repeat:no-repeat }
/* .background-englisch { background-image:url('../images/background-index-english.jpg'); } */

.background-lightgrey {  background-color: var(--lg-bg);}
.background-grey {  background-color:#EBEBEB;}


/* ENDE Backgrounds */



/* Modal START */


.modal {
	position:absolute;
	background-color:rgba(180, 180, 180, 0.75);
	min-height:1000px;
	top:0; left:0; right:0; bottom:0; z-index:6;}

.modal-box, .modal-content {
	margin:0 auto;
	text-align:center;
	position:relative;
	padding:12px;
	width:90%;
	width: calc(98% - 36px);
	max-width:360px;
	background-color:#FFFFFF;
	box-shadow:0px 2px 17px 0px rgba(var(--lg-shadow-rgb, 120, 98, 72), 0.51);
	border-radius:8px;
}

.modal-close, .bugdesk-close {
	border-radius:50%;
	border: 5px solid #D4D4D4;
	width:20px;
	height:20px;
	padding:4px;
	position:absolute;
	top:10px;
	right:10px;
	text-align:center;
	font-weight:bold;
	background-color:#FFFFFF;
	cursor:pointer;
	background-image: url("../images/modal-close.png");
	background-position:center center;
	background-repeat:no-repeat;
	opacity:0.7;
	}

.modal-close img {   }
.modal-close:hover, .bugdesk-close:hover { opacity:1; }

.modal-text
{
 margin-right:50%;
 display:block;
}

.modal .h2-style
{
 font-size:1.3em;
 display:block;
 font-weight:bold;
 padding-bottom:5px;
}



.modal-body
{
 padding:1em;
 text-align:left;
}

.modal-header
{
 background-color:#F4F4F4;
 padding:20px;
 padding-right:40px;
 padding-bottom:15px;
}

.modal-h1
{
 font-weight:bold;
 font-size:1.2em;
 margin-bottom:1%;
}

.modal-h2
{
 font-weight:bold;
 font-size:1.1em;
 margin-bottom:1%;
}

.modal-content .button { margin-right:6px; }

.modal-content.modal-content-login, .modal-content.modal-content-invoice, .modal-content.modal-content-register, .modal-content.modal-content-password-forgotten, .data-consent-modal .modal-content
{
 max-width: 400px;
 width:95%;
 margin-top:120px;
}

.modal-content.modal-content-login {
	max-width: 380px;

}


.data-consent-modal .modal-content { margin-top:20px; }



@media (max-width: 620px)
{
 .modal-text { margin-right:0%; }
}

	 .modal-deny, .modal-deny:hover, .modal-button-grau, .modal-button-grau:hover
	  {
	  background-color:#EEEEEE;
	  border-color:#EEEEEE;
      color:#313131;
	 }



/* Modal END */



/* Modal v2 (German.net-style auth + upsell) - START
   ----------------------------------------------------------------------------
   Two carriers share these inner styles:
     1. .modal-overlay  → persistent shell used by upsell + login-required
                         (built once on DOM-ready, switches panels via JS)
     2. .modal.modal-v2 → legacy-wrapped auth modal (login / signup / forgot),
                         built on click and inserted via insertAfter('.header').
                         Reuses every legacy submit-handler DOM contract
                         (.modal-content-login, .modal-content-register,
                         .modal-content-password-forgotten, .modal-close).
   BOTH carriers get class="modal-v2", so the shared look is written ONCE under
   .modal-v2 instead of being duplicated as ".modal-overlay .x, .modal-v2 .x".
   That duplication is what let the two drift apart - a value changed on one
   half and not the other. Only two kinds of rule stay .modal-overlay:
   the shell mechanics (overlay, box, panel switching) and the upsell-only bits.
   Anything that should look the same in both belongs under .modal-v2.
   ========================================================================= */

/* --- Overlay carrier (upsell / login-required) -------------------------- */

.modal-overlay {
	display:none;
	position:fixed;
	inset:0;
	z-index:200;
	background:rgba(26,26,46,0.55);
	backdrop-filter:blur(4px);
	align-items:flex-start;
	justify-content:center;
	padding:1.5rem;
	overflow-y:auto;
}
.modal-overlay.active { display:flex; }

.modal-overlay .modal__box {
	position:relative;
	background:#fff;
	width:100%;
	/* 440px is what .modal.modal-v2 .modal-content caps the auth modals at.
	   This was 420px, so on desktop the upsell sat 20px narrower than the login
	   box for no reason anyone recorded. Same number, same visual weight. */
	max-width:440px;
	border-radius:16px;
	box-shadow:0 8px 32px rgba(var(--lg-shadow-rgb, 120, 98, 72), 0.30);
	padding:0;
	overflow:hidden;
	animation:ml-modalIn 0.25s ease;
	margin:auto 0;
	flex-shrink:0;
}
@keyframes ml-modalIn {
	from { opacity:0; transform:translateY(16px) scale(0.97); }
	to   { opacity:1; transform:translateY(0)    scale(1);    }
}

.modal-overlay .modal__panel { display:none; }
.modal-overlay .modal__panel.active { display:block; }

/* --- Legacy-wrapped carrier (auth modals) ------------------------------- */

/* Override legacy .modal-content padding so the new design owns its spacing.
   Legacy .modal-content has padding:12px and max-width:360px; we want flush
   modal__top / modal__shade against the rounded edges. */
.modal.modal-v2 .modal-content { padding:0; overflow:hidden; }
/* Desktop only. These three selectors are 4 classes deep, so an unqualified
   max-width:none in the phone block below could never beat them - the auth
   modals would stay 440px wide while the upsell went edge to edge. Capping
   only where a cap makes sense is the fix; raising specificity to fight it
   would just move the problem to whoever writes the next rule. */
@media (min-width: 621px) {
	.modal.modal-v2 .modal-content.modal-content-login,
	.modal.modal-v2 .modal-content.modal-content-register,
	.modal.modal-v2 .modal-content.modal-content-password-forgotten {
		max-width:440px;
	}
}

/* Success state inside .modal-v2 — built by form-register and form-password-forgotten
   submit handlers using <div class="modal__top">…<div class="modal__shade">…. The
   shade hosts body copy + secondary headline; .h2-style for the secondary heading. */
.modal-v2 .modal__shade > p { margin:0 0 0.75rem; line-height:1.5; color:#3a3a4a; }
.modal-v2 .modal__shade > p:last-child { margin-bottom:0; margin-top:1rem }
.modal-v2 .modal__shade > .h2-style {
	display:block;
	font-size:1.05rem;
	font-weight:700;
	color:#1a1a2e;
	margin:1rem 0 0.4rem;
}

/* --- Shared inner styling (apply to both carriers) ---------------------- */

.modal-v2 .modal__top { padding:2.5rem 2.25rem 1.25rem; text-align:center; max-width:450px; margin:0 auto; }

.modal-v2 .modal__shade { background:rgb(252, 250, 246); padding:0.5rem 2.25rem 2rem; max-width:450px; margin:0 auto; }

.modal-v2 .modal__header { text-align:center; margin-bottom:0.5rem; }

.modal-v2 .modal__title {
	font-size:1.3rem;
	font-weight:800;
	color:#1a1a2e;
	margin:0 0 0.35rem;
	padding:0;
}
.modal-v2 .modal__subtitle {
	font-size:1rem;
	color:#6b6b7b;
	margin:0;
	padding:0 0 0.5rem;
}
.modal-v2 .modal__submit {
	width:100%;
	margin-top:0.25rem;
	padding:0.85rem 2rem;
	font-size:1rem;
	border-radius:10px;
	cursor:pointer;
	border:0;
}
.modal-v2 .button-cta {
	border:none;
	width:100%;
	box-sizing:border-box;
	text-align:center;
	border-radius:5px;
	color:#fff;
	background-color:#e55853;
	display:block;
	/* Vertical padding carries the weight these buttons used to get from the
	   browser's own button face. A <button> does not inherit font-family from
	   body, so before font-family:inherit below, the CTA in a modal rendered in
	   the UA font while an <a> beside it rendered in the body face - same box,
	   two different-looking buttons. The body face (DM Sans, Open Sans before
	   it) is the right one; it just sits lighter, so the box grew to
	   compensate. */
	padding:0.95rem 1.5rem;
	cursor:pointer;
	margin-bottom:5px;
	line-height:1em;
	font-family:inherit;
	font-size:1rem;
	text-decoration:none;
	text-shadow:1px 1px 1px #94332f;
	transition:background-color 0.5s ease;
}
.modal-v2 .button-cta:hover { background-color:#d93c36; }

/* Upsell-specific (only ever rendered inside the overlay) */
.modal-overlay .modal__upsell-icon { display:flex; justify-content:center; margin-bottom:0.75rem; }
.modal-overlay .modal__upsell-list { font-size:0.92rem; color:#3a3a4a; text-align:left; }
.modal-overlay .modal__upsell-list ul { margin:0; padding-left:1.25rem; padding-bottom:0.7rem; line-height:1.45; }
.modal-overlay .modal__upsell-list li { margin:0.6rem 0; line-height:1.4; }
.modal-overlay .modal__upsell-intro { font-size:0.92rem; color:#3a3a4a; text-align:left; padding:0.2rem 0 0.7rem; }

/* Google + Apple sign-in buttons.

   One shared rule rather than two: the two buttons sit directly on top of each
   other in .modal__top, and App Store guideline 4.8 requires Sign in with Apple
   to be no less prominent than any other third-party login — identical size,
   weight and shape is the simplest way to keep that true as this rule changes.
   Apple's own guidelines permit the white-with-outline treatment used here, so
   the pair does not need two different looks. */
.modal-v2 .modal__google,
.modal-v2 .modal__apple {
	display:flex;
	align-items:center;
	justify-content:center;
	gap:0.6rem;
	padding:0.7rem 1rem;
	border:1px solid #e3e3ea;
	border-radius:10px;
	background:#fff;
	color:#1a1a2e;
	text-decoration:none;
	font-size:0.95rem;
	font-weight:bold;
	transition:background 0.15s, border-color 0.15s;
	margin-top:0.25rem;
}
.modal-v2 .modal__google:hover,
.modal-v2 .modal__apple:hover { background:rgb(252, 250, 246); border-color:#d6d6dd; }

/* Slightly more air above the Apple button, which always follows the Google
   one — 0.25rem alone reads as a single mis-sized element rather than two. */
.modal-v2 .modal__apple { margin-top:0.6rem; }

.modal-v2 .modal__google-icon { width:18px; height:18px; flex-shrink:0; }

/* 17px, not 18: the Apple glyph fills its 24x24 viewBox top to bottom while the
   Google mark is inset, so matching the box sizes would leave the Apple logo
   visibly the larger of the two. */
.modal-v2 .modal__apple-icon { width:17px; height:17px; flex-shrink:0; }

/* Divider with text */
.modal-v2 .modal__divider {
	display:flex;
	align-items:center;
	gap:0.75rem;
	color:#94949e;
	font-size:0.82rem;
	margin:1rem 0 0.85rem;
	text-transform:uppercase;
	letter-spacing:0.04em;
}
.modal-v2 .modal__divider::before,
.modal-v2 .modal__divider::after { content:""; flex:1; height:1px; background:#e3e3ea; }

/* Form fields */
.modal-v2 .modal__field { margin-bottom:0.65rem; }

.modal-v2 .modal__field .input-text {
	width:100%;
	padding:0.8rem 1rem;
	font-size:0.95rem;
	border:1px solid #d6d6dd;
	border-radius:8px;
	background:#fff;
	outline:none;
	transition:border-color 0.15s, box-shadow 0.15s;
	box-sizing:border-box;
	font-family:inherit;
}

/* "Forgot your password?" link inside login form */
.modal-v2 .modal__forgot {
	display:block;
	text-align:right;
	font-size:0.85rem;
	color:#6b6b7b;
	text-decoration:none;
	margin:0.1rem 0 0.85rem;
	cursor:pointer;
}
.modal-v2 .modal__forgot:hover { color:#e55853; text-decoration:underline; }

/* Panel-switch line ("Don't have an account? Sign up") */
.modal-v2 .modal__switch {
	text-align:center;
	font-size:0.9rem;
	color:#6b6b7b;
	margin:1rem 0 0;
	padding:0;
}
.modal-v2 .modal__switch a,
.modal-v2 .modal__switch .a-style {
	color:#e55853;
	text-decoration:none;
	cursor:pointer;
	font-weight:500;
}
.modal-v2 .modal__switch a:hover,
.modal-v2 .modal__switch .a-style:hover { text-decoration:underline; }

/* Checkboxes (terms / newsletter) */
.modal-v2 .modal__checkbox {
	display:flex;
	align-items:flex-start;
    text-align:left;
	gap:0.55rem;
	font-size:0.87rem;
	color:#3a3a4a;
	line-height:1.4;
	margin:0.6rem 0;
	cursor:pointer;
	font-weight:normal;
}
.modal-v2 .modal__checkbox input[type=checkbox] { margin-top:0.2rem; flex-shrink:0; }

/* Terms-of-service note (auto-checked variant for non-DE/NL signup) */
.modal-v2 .modal__terms {
	font-size:0.78rem;
	color:#6b6b7b;
	line-height:1.4;
	margin:0.85rem 0 1.25rem 0;
	padding:0;
	text-align:left;
}
.modal-v2 .modal__terms a { color:#6b6b7b; text-decoration:underline; }

/* Loading spinner inside submit buttons */
.modal-v2 .form-status { display:inline-block; margin-left:0.4rem; vertical-align:middle; }
.modal-v2 .form-status img { vertical-align:middle; }

/* Form error banner (prepended on submission failure) */
.modal-v2 .form-error-message {
	background:#fff0ef;
	color:#d93c36;
	border:1px solid #f7c4c1;
	border-radius:8px;
	padding:0.6rem 0.8rem;
	font-size:0.85rem;
	margin-bottom:0.8rem;
	line-height:1.35;
    text-align:left;
}

/* The phone rules live LAST in this section on purpose. A media query adds no
   specificity, so at equal weight it is pure source order that decides: sitting
   further up, this block was losing "overflow-y:auto" to the plain
   ".modal.modal-v2 .modal-content { overflow:hidden }" below it, and a
   full-screen modal that cannot scroll hides its own button. Keep new base
   rules above this block. */
/* Phones get the modal edge to edge.
   This used to be setFullScreenModal(), which writes the same declarations as
   inline styles onto .modal-content - and the overlay's box is .modal__box, not
   .modal-content, which is exactly why the login modal went full-screen and the
   upsell did not. No stylesheet could reach it, because inline styles were the
   only thing doing the job.
   Stated here it covers both carriers at once and a third would inherit it.
   setFullScreenModal() stays where it is: the legacy modals (.modal-premium and
   the generic openModal path) still call it, and it also does the scroll lock,
   which CSS cannot do. */
@media (max-width: 620px) {

	.modal-overlay.modal-v2 { padding:0; }

	.modal-overlay.modal-v2 .modal__box,
	.modal.modal-v2 .modal-content {
		position:fixed;
		top:0; left:0; right:0; bottom:0;
		width:100%;
		height:100dvh;
		max-width:none;
		margin:0;
		border-radius:0;
		overflow-x:hidden;
		overflow-y:auto;
		-webkit-overflow-scrolling:touch;
		box-sizing:border-box;
		z-index:12;
		/* iOS repaint hint, carried over from the JS this replaces. */
		transform:translate3d(0,0,0);
	}
}

/* Modal v2 - END */

/* Formular START */


.form label
{
 display:block;
 font-weight:bold;
 padding-bottom:5px;
}

.form label.label-terms
{
 font-weight:normal;
 padding-bottom:5px;
 font-size:0.95em;
 padding-left:1.4rem;
 position:relative;
}

.form label.label-terms input {
	position:absolute;
	left:0.05rem;
	top:0.35rem;
}

.form input.input-text
{
 display:block;
 width:calc(100% - 26px);
 border:1px solid #CCCCCC;
 padding:12px;
 margin-bottom:1rem;
 border-radius:5px;
 outline: none;
}

.form select.input-select
{
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 border: 3px solid #DBDBDB;
 padding: 0.7rem;
 padding-right: 35px;
 margin-bottom: 10px;
 border-radius: 8px;
 outline: none;
 background-color: #FFFFFF;
 background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23CCCCCC%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
 background-repeat: no-repeat;
 background-position: right 12px center;
 background-size: 10px auto;
 cursor: pointer;
 font-size: 0.9rem;
}

.form select.input-select::-ms-expand {
 display: none;
}

.form input[type="submit"]
{
 display:inline-block;
 vertical-align:middle;
 margin:0;
 outline: none;
}

.form .form-status
{
 display:inline-block;
 vertical-align:middle;
 margin:0;
 margin-left:10px;
 width:20px;
 height:20px;
}

.form .form-status img
{
 width:100%; height:auto; display:inline-block; vertical-align:top; margin:0;
}

.form-error-message
{
 background-image: url("../images/warning.gif");
 background-repeat:no-repeat;
 background-position:10px 12px;
 font-size: 0.95rem;
 min-height:27px;
 padding-left:42px;
 padding-top:12px;
 padding-bottom:8px;
 background-color:#EEEEEE;
 border-radius:5px;
 margin-bottom:8px;
 padding-right:12px;
}

.form .form-error-message ul
{
 padding:0;
 margin-bottom: 0;
}

.form .form-error-message li
{
 margin-left:17px; padding-bottom:7px; line-height:1.3em; font-size:0.95em;
}

.a-style.form-password-forgotten
{
 margin-left:5px; font-size:0.85em; font-weight:normal;
}

/* Formular END */






/* START Content */

.content
{
 padding-left:2rem;
 padding-right:2rem;
 padding-top:0.7rem;
 padding-bottom:0.7rem;
}


.content_left, .content_right
{
 box-sizing:border-box;
 width:50%;
 padding-top:0.7rem;
 padding-bottom:0.7rem;
}

.content_left { float:left; padding-left:2rem; padding-right:1.5rem; }
.content_right { float:right; padding-right:2rem; padding-left:1.5rem; }

.leader-content
{
 position:relative;
 width:55%;
 z-index:5;
 min-height:400px;
 padding-bottom: 1.2rem;
}

.header .content { padding-top:0; padding-bottom:0 }


h2.content-h2
{
 padding-left:2rem;
 clear:both;
 margin-bottom:0.1em;

}



/* Ende Content */





.padding-top-none { padding-top:0; }
.padding-bottom-none { padding-bottom:0; }


.panel_navigation
{
 display:block;
 margin-bottom:-5px;
}

.panel_navigation_button
{
 display:inline-block;
 border: 5px solid #E8E8E8;
 border-top-left-radius: 8px;
 border-top-right-radius: 8px;
 border-bottom:0;
 background-color:#FFFFFF;
 padding:8px 10px 12px 10px;
 text-decoration:none;
 color:#222;
 margin-right:7px;
}

.panel_navigation_button_inactive
{
 display:inline-block;
 border: 5px solid #EDEDED;
 border-bottom: 5px solid #E8E8E8;
 border-top-left-radius: 8px;
 border-top-right-radius: 8px;
 border-bottom-left-radius: 0px;
 border-bottom-right-radius: 0px;
 background-color:#FFFFFF;
 padding:8px 10px 7px 10px;
 margin-right:7px;
}

.panel, .small_panel, .word_panel
{
 border-radius: 8px;
 padding:2rem;
 background-color:#FFFFFF;
 display:block;
 border: 5px solid #E8E8E8;
}

.panel.panel-with-navigation { border-top-left-radius: 0px; }
.panel-header { padding:1rem; padding-bottom:1.5rem; background-color:#E8E8E8; margin-bottom:1rem; margin-left:-2rem; margin-top:calc(-2rem - 1px); width:calc(100% + 1px); padding-left:2rem; padding-right:2rem; }



.small_panel { border: 0px solid #E8E8E8;
 box-shadow: 0px 1px 7px 1px rgba(var(--lg-shadow-rgb, 120, 98, 72), 0.17);
 padding:15px; padding-top:5px; margin-top:5px; }
.word_panel { border: 0px solid #E8E8E8; margin-bottom:5px; padding:0; margin-right:6px; width: calc(33.3% - 6px); display:inline-block;
 box-shadow: 0px 1px 7px 1px rgba(var(--lg-shadow-rgb, 120, 98, 72), 0.17); border-radius: 6px; }

.word_panel_left  { width:41%; padding:2.5%; padding-left:4%; display:inline-block; vertical-align:middle; line-height:1.2em; }
.word_panel_right  { width:43%; padding:2.5%; padding-left:6%; display:inline-block; vertical-align:middle; line-height:1.2em; background-image:url('../images/arrow.gif'); background-repeat:no-repeat; background-position:0px center; }

@media (max-width: 1050px)
{
 .word_panel { width: calc(50% - 6px); border-radius: 5px; }
}

@media (max-width: 600px)
{
 .word_panel { width: 100%; }
}


.change-version {
	display:inline-block; cursor:pointer;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.change-version__flag {
	display:inline-block; width:30px; height:auto; vertical-align:middle; margin-right:6px
}

.change-version__text {
	display:inline-block; vertical-align:middle
}

.change-version__arrow {
	display:inline-block; padding:8px 4px; margin-right:5px; vertical-align:bottom; height:20px; width:15px; background-image:url('../images/down.gif'); background-repeat:no-repeat; background-size:15px 9px; background-position: center center;
}

.button-index-show-more, .button-back-to-languages {
	background-image:url('../images/down.png');
	background-repeat:no-repeat; background-position:0.3rem center;
	background-size:0.8rem auto;
	padding-left:1.4rem;
	text-decoration:none;
	padding-bottom:0.1rem;
	color:#E55853; cursor:pointer; text-decoration:underline;
	display:block;
    margin-top: 0.5rem;
}

.button-back-to-languages {
	display:none;
	background-image:url('../images/left.png');
	background-size:auto 0.8rem;
	background-position:0.5rem 0.3rem;
}

.headline-which-discipline {
	display:none;
}


.button_flag, .button_icon
{
    background-color:#FFFFFF;
    vertical-align:top;
    display:inline-block;
    box-shadow: 0px 8px 9px 0px rgba(var(--lg-shadow-rgb, 120, 98, 72), 0.17);
    border: 0;
    border-radius: 8px;
    background-color: #FFFFFF;
    margin-right: 0.7rem;
    margin-bottom: 0.7rem;
    text-decoration: none;
    font-size:1.05rem;
    color: #272727;
    background-repeat: no-repeat;
    background-position: 0.7rem center;
    width: 33%;
    padding: 0.9rem;
    padding-left: 4.2rem;
    padding-right: 0.2rem;
    background-size: 2.8rem auto;
    cursor:pointer;
    overflow: hidden;
    white-space: nowrap;
}

.choose-language--dashboard .button_flag {
    box-sizing:border-box;
    width: calc(25% - 0.7rem);
}



.button_icon__stats {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

.button_icon {
    background-size: 2.1rem auto;
    background-position: 1rem center;
}

.button_flag b, .button_icon b {
    font-size: 1.05rem;
    line-height: 1rem;
}
.button_flag p, .button_icon p {
    font-size: 0.9rem;
    line-height: 0.95rem;
    margin-bottom: 0;
}


.button_flag_small
{
 border-radius: 8px;
 background-color:#FFFFFF;
 display:inline-block;
 vertical-align:top;
 box-sizing: border-box;
 text-decoration:none;
 color:#544F4E;
 width:24%;
 width:calc(25% - 0.6rem);
 max-width:250px;
 background-repeat:no-repeat; background-position:0.4rem center;
 padding-left:3.6rem; background-size:2.6rem auto;

 overflow: hidden;
 white-space: nowrap;

 margin-right:0.6rem;
 margin-bottom:0.6rem;
 padding-top: 0.55rem;
 padding-bottom: 0.55rem;
}

.button_flag_small__stats {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

.button-stats
{
 background-color:#E55853; height:25px; font-size:0.9em; padding:5px 7px; border-radius:3px; color:#FFFFFF; margin-right:3px; width:60px; text-align:center
}

.button-stats.button-stats-table
{
 display:inline-block;
 margin:0;
 height:auto;
 font-size:1em;
 letter-spacing:0.04em;
 padding:7px 7px;
 width:28px;
 border-radius:4px;
}

.button-stats-green { background-color:#5fba7d; }
.button-stats-pale { background-color:#E7E7E7; color:#B0B0B0;  }

.button-captions
{

}

.button_flag:hover, .button_icon:hover, .button_flag_small:hover
{
 background-color:#FFF1E3;
 text-decoration:none;
 color:#000000;
}

.flag_en { background-image:url('../images/en.svg'); }
.flag_de { background-image:url('../images/de.svg'); }
.flag_fr { background-image:url('../images/fr.svg'); }
.flag_es { background-image:url('../images/es.svg'); }
.flag_pt { background-image:url('../images/pt.svg'); }
.flag_it { background-image:url('../images/it.svg'); }
.flag_ben { background-image:url('../images/en.svg'); }
.flag_pl { background-image:url('../images/pl.svg'); }
.flag_nl { background-image:url('../images/nl.svg'); }
.flag_cz { background-image:url('../images/cz.png'); }
.flag_se { background-image:url('../images/se.svg'); }
.flag_no { background-image:url('../images/no.svg'); }
.flag_fi { background-image:url('../images/fi.svg'); }
.flag_dk { background-image:url('../images/dk.svg'); }
.flag_ru { background-image:url('../images/ru.svg'); }
.flag_ar { background-image:url('../images/8.png'); }
.flag_tr { background-image:url('../images/tr.svg'); }
.flag_he { background-image:url('../images/he.svg'); }
.flag_arabic { background-image:url('../images/arabic.png'); }
.flag_blabu { width:auto; background-image:url('../images/bubble.png'); background-size:auto 55%; padding-left:2.8rem; padding-right:0.7rem; background-position:0.4rem 0.7rem; }
.flag_discipline { background-image:url('../images/arrow-index.png'); background-size:1.2rem auto; background-position:1.6rem 0.8rem }



.sub-header-headline {
	font-weight: 600;
	margin-bottom: 0.7%;
	color: #232323;
	font-size:1.05em;
	padding:0.6rem 0;
}

.hover
{
 display:inline-block;
 vertical-align:middle;
 margin-right:10px;
 font-size:1.1em;
}

td.first-td
{
 width:60%; vertical-align:middle
}

a.reading-link { padding-right:4px; }

span.label
{
 display:inline-block; vertical-align:top; background-color:#E55853; font-size:10px; padding:2px 3px; border-radius:3px; color:#FFFFFF; margin-right:3px; margin-top:1px;
}

span.label.label-blue { background-color:#656565; }


select, input
{
 margin:0px;
}

input[type=text]:focus {

}


/* Mobile first Start */

.logo {
    display:inline-block;
    width:110px;
    height:auto;
    padding:0.5rem 0;
    padding-left:1.2rem;
}

.logo img {
    display:inline-block;
    vertical-align:middle;
    width:100%;
    height:auto;
}

.versionselector {
    display:inline-block;
    vertical-align:middle;
    position:absolute;
    right:0px;
    top:0.7rem;
}


@media (min-width: 576px) {
	.logo {
		width:120px;
        padding-left:1.5rem;
	}
}


@media (min-width: 768px) {
	.logo {
        padding:0.7rem 0;
		width:150px;
        padding-left:0;
	}
}

@media (min-width: 992px) {
	.logo {
		width:160px;
        padding-left:0;
	}
}

@media (min-width: 1200px) {
	.logo {
		width:190px;
	}
}

@media (min-width: 1400px) {
	.logo {
        padding:0.8rem 0;
        padding-top:0.8rem;
        max-width:210px;
	}
}







/* HEADER Start */



/* Hide mobile navigation elements */
.navigation-circle, .navigation-toggle, .navigation-login { display:none; }





.navi-text  {
	margin-top:8px;
	padding:8px;
	padding-left:0;
	display:inline-block;
	vertical-align:bottom;
	margin-bottom:-1px;
	text-decoration:none;
	color:#544F4E;
	font-size:0.95em;
}

.overlay {
	display:none;
}

.overlay-dark {
	position:absolute;
	left:0; right:0;
	top:0; bottom:0;
	background-color:#b4b4b4;
	opacity:0.75;
	z-index:1;
}

.navi
{
 border:4px solid #E8E8E8;
 border-bottom:0px;
 padding:8px;
 display:inline-block;
 vertical-align:bottom;
 margin-bottom:-1px;
 text-decoration:none;
 color:#544F4E;
 font-size:0.95em;
 border-top-left-radius:10px;
 border-top-right-radius:10px;
 margin-right:-4px;
 cursor:pointer;
}

.navi img
{
 display:inline-block;
 vertical-align:middle;
 width:30px;
 height:auto;
}

.extra-navi-distance {
	margin-left:1.5rem;
}

@media (min-width: 650px) {
	.navigation {
		display:block !important;
	}

    .logo {
        padding-left:0;
    }
}


@media (max-width: 650px) {


	.change-version {
		font-size:0.95em;
	}


	.navigation { display:none; padding:1.5rem; background-color:#ffffff; border-bottom-left-radius:8px; z-index:2; position:relative;
		background-image: url(../images/top-shadow.png);
		background-position: top;
		background-repeat: repeat-x;
		position: absolute;
		top:70px;
		right:0;
		width:70%;
		max-width:280px
	}


	.navi.navi-button {
		border:4px solid #E8E8E8;
		background-color:#ffffff;
		border-radius:10px;
	}

	.header .content {
		padding:0;
	}
	.header .navi-text {
		padding-left:1.5rem;
		padding-right:0;
		margin-right:-1rem;
	}
	.navi.navi-native-language {
		display:inline-block;
		margin-left:1.5rem;
	}

	.button-circle {
		box-sizing:border-box;
		display:inline-block;
		vertical-align:middle;
		padding:7px;
		font-size:12px;
		color:#544F4E;
		height:44px;
		width:44px;
		border:4px solid #c7c7c7;
		text-align:center;
		border-radius:50%;
		background-color:#FFFFFF;
		text-decoration:none;
		background-position:center center;  opacity:0.6;
		cursor:pointer;
	}

	.button-circle--login {
		/* width:38px;
		padding:5px;
		height:38px; */
		background-size:48%;
		background-image:url('../images/user.png'); background-repeat:no-repeat;
	}

	.button-circle--toggle {
		background-size:60%;
		background-image:url('../images/burger.svg'); background-repeat:no-repeat;
		margin-left:3px;
	}

	.button-circle--toggle[data-toggle="1"] {
		background-image:url('../images/modal-close.png');
		background-size:auto;
	}

	.change-version {
		margin-left:1.5rem;
		margin-bottom:0.5rem;
	}

	.navigation .navi {
		padding-left:1.5rem;
		display:block;
		border-radius:0;
		border-left:0;
		border-right:0;
		border-bottom:0;
		margin:0;
	}

}




@media (max-width: 576px) {
	.navigation {
		top:65px;
		left:0;
		right:0;
		width:100%;
		max-width:none;
	}

	.change-version__arrow {
		margin-right:0px;
	}
	/*
	.navi {
		border:3px solid #E8E8E8; margin-right:-3px; padding:6px;
		border-top-left-radius:8px;
		border-top-right-radius:8px;
		border-bottom:0px;
	}
	*/
	.header .container .content { padding-right:0; }


}


/* HEADER Ende */


/* STARTSEITE Start */

.content_right.content-screen
{
 box-shadow: inset 126px 9px 298px -153px rgba(var(--lg-shadow-rgb, 120, 98, 72), 0.16);
 padding-right:0;
 padding-left:0;
 width:48.5%;
}

.screen
{
 border-radius:10px;
 border:15px solid #D6D6D6;
 width:85%;
 margin:2% auto;
 background-color:#ffffff;
 max-width:500px;
}

.screen img
{
 width:100%;
 height:auto;
 display:inline-block;
 vertical-align:top;
 margin:0;
}

/* STARTSEITE Ende */



/* SPRACHENSTARTSEITE Start */

.content.content-triple
{
 margin-left:-2%; width:98%; padding-right:4%
}

.content-triple-box
{
 display:inline-block; width:31.33%; margin-left:2%; vertical-align:top
}

.screen.screen-triple-box
{
 width:auto; margin:2% 0 3% 0%
}

/* SPRACHENSTARTSEITE Ende */



/* NOCH BENÖTIGT?


.advice { background-color:#ffffff;  }

*/







.navi:hover
{
 color:#544F4E; background-color:#FFF1E3; text-decoration:none;
}






.circle
{
 display:inline-block;
 vertical-align:middle;
 padding:8px;
 font-size:12px;
 height:17px;
 width:17px;
 color:#544F4E;
 border:4px solid #E8E8E8;
 text-align:center;
 border-radius:50%;
 background-color:#FFFFFF;

 margin-right:3px;

 text-decoration:none;
}

.circle:hover
{
 color:#E55853;
}

.globe {
    display:inline-block;
    vertical-align:middle;
    padding:0px;
    font-size:12px;
    height:33px;
    width:33px;
    text-align:center;
    border-radius:50%;
    background-color:#E8E8E8;
    border:4px solid #E8E8E8;
    margin-right:3px;
    color:#544F4E;
    text-decoration:none;
    transition: background-color 0.3s ease-in-out;

}

.globe:hover {
    background-color:#D9D9D9;
    border:4px solid #D9D9D9;
}

.header .button.button--premium-status {
    display:inline-block; background-color:#E8E8E8; padding:6px 12px; height:29px; line-height:0.9rem; border:none; font-size:0.8rem
}

/* Dark mode toggle button */
.dark-mode-toggle {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  width: 24px;
  height: 24px;
  margin-right: 10px;
  padding: 5px;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.dark-mode-toggle svg {
  display: block;
  width: 100%;
  height: 100%;
  stroke: #544F4E;
}

.dark-mode-toggle:hover {
  background-color: #E8E8E8;
}




.versionleft {
    border-right:1px solid #E8E8E8; padding-right:3px; margin-right:8px; display:inline-block; vertical-align:top;
}

.versionright {
    display:inline-block;
}

.navbox {
    display:inline-block;
    padding-right:0.5rem;
    border-left:1px solid #E8E8E8;
    padding-left:0.4rem;
    margin-left:0.5rem;
}



.desc_de, .desc_en, .desc_fr, .desc_es, .desc_it {
    display:none;
    color:#544F4E; padding-top:7px; padding-left:38px; font-size:0.9em;
    background-image:url('../images/info2.gif'); background-repeat:no-repeat; background-position:10px 6px; line-height:22px;
}

@media (min-width: 780px) {
    .de:hover ~ .desc_de, .en:hover  ~ .desc_en, .fr:hover  ~ .desc_fr, .es:hover  ~ .desc_es, .it:hover  ~ .desc_it {
    display: inline-block;
    }
}

@media (max-width: 900px) {
    .circle {
        display:none;
    }
    .globe {
        margin-right:0.7rem;
    }
}
@media (max-width: 650px) {

    .versionleft {
        display:none;
    }
}
@media (max-width: 400px) {
    .navbox {
        padding-right:0.2rem;
        border-left:0px;
        padding-left:0;
        margin-left:0.3rem;
    }
}





.trainer_left, .sixty_left, .fifty_left  { display:inline-block; vertical-align:top; width:63%; }
.trainer_right, .fourty_right, .fifty_right  { display:inline-block; vertical-align:top; width:33%; margin-left:1.5%; padding-left:2%; border-left:3px solid #E8E8E8; border-style: dotted; }

.sixty_left { width:58%; }
.fourty_right  { width:38%; }
.fifty_left { width:48%; }
.fifty_right  { width:48%; }


@media (max-width: 850px) {

    .fifty_left, .fifty_right {
        width:100%;
        max-width: 600px;
        margin:0 auto; padding:0;
        display:block;
    }

    .fifty_right {
        border-left:0px; border-top:3px solid #E8E8E8; border-style: dotted; padding-top:2%; margin-top:2%;
    }
}


@media (max-width: 750px) {

    .trainer_left, .trainer_right, .sixty_left, .fourty_right {
        width:100%;
        margin:0; padding:0;
        display:block;
    }

    .trainer_right {
        border-left:0px; border-top:3px solid #E8E8E8; border-style: dotted; padding-top:2%; margin-top:2%;
    }

    .fourty_right {
        margin-top:10px;
        border:0px;
    }
}



@media (max-width: 600px)
{
 .content {
  padding-left:1rem; padding-right:1rem;
 }


}

input[type="text"], input[type="email"], input[type="password"], textarea, select
{
 border: 3px solid #E8E8E8;
 padding: 0.5rem;
 font-size:0.9rem;
 border-radius:8px
}

input[type="text"]:hover, input[type="password"]:hover, textarea:hover, select:hover
{

}

input[type="text"]:focus {outline:0;}

 .question-box
 {
  border-top:3px solid #E8E8E8; border-style: dotted; padding-top:10px; padding-bottom:10px;
 }

 .questions_line
 {
  display:table-row;
  width:100%;
 }

 .exercise-box
 {
  position:relative;
    display: table-cell;
    margin: 0em;
    height: auto;
    vertical-align:top;
	width:50%;
	box-sizing:border-box;
	padding:0.5rem 0 0.5rem 0;
 }

 .exercise-box.exercise-box-full
 {
  border-bottom:3px dotted #E8E8E8;
  padding:4px 0;
  padding-bottom:1px;
  width:auto;
  display:block;
 }

 .exercise-box.exercise-box-left
 {
  box-sizing:border-box;
  border-bottom:3px dotted #E8E8E8;
  border-right:3px dotted #E8E8E8;
  width:50%;
  padding-right:0.8rem;
 }

 .exercise-box.exercise-box-right
 {
  box-sizing:border-box;
  border-bottom:3px dotted #E8E8E8;
  width:50%;
  padding-left:0.8rem;
 }

 #questions
 {
  display:table;
  width:100%;
 }



.keypad {
	position:absolute; top:0.4rem; display:inline-block; box-sizing:border-box; border-radius:6px;
}
.keypad:hover {

}
.keypad .button {
	vertical-align:top; margin-bottom:0;
}


 .exercise-hint
 {
  color: #878787;
 }

 input.exercise-input
 {
  padding:5px;
  border-radius:5px;
  font-size:1em;
  color:#272727;
  margin-bottom:3px;
 }

.player-box {
    background-color:#e8e8e8; border-radius:8px; padding:1rem; position:relative; padding-right:0.5rem;
}

.wrapper-lingua-speakers { display:inline }
.wrapper-lingua-player { display:inline-block; vertical-align:top }

.exercise-listening .wrapper-lingua-player {
    display: block;
    max-width: 870px;
}

.exercise-listening .wrapper-lingua-speakers { display:block }
.exercise-listening .speaker-box { margin-top:1rem; margin-left:1rem; }
.exercise-listening .speaker-box:nth-child(1) { margin-left:0; }




.speaker-box {
	position:relative; padding:8px; width:190px; margin-left:1rem; display:inline-block; vertical-align:top; height:40px; border-radius:4px; background-color:#ffffff; box-shadow: 0 4px 16px 0 rgba(var(--lg-shadow-rgb, 120, 98, 72), 0.12);
}

.speaker-box.speaker-box-listening {

}

.speaker-box.speaker-box-reading {
	margin-top:0.5rem; margin-right:0.5rem; margin-left:0;
	width:calc(50% - 0.5rem);
	box-sizing:border-box;
	height:56px;
}

.speaker-box .button-play {
    position:absolute; right:30px; top:6px;
    background-image: url(../images/icon-play.svg);
    background-repeat:no-repeat;
    background-size: 18px auto;
    background-position: center center;
    display:block;
    width:22px;
    height:25px;
    cursor:pointer;
    opacity:0.75;

}
.speaker-box .button-download {
    position:absolute; right:6px; top:6px;
    background-image: url(../images/icon-download.svg);
    background-repeat:no-repeat;
    background-size: 18px auto;
    background-position: center center;
    display:block;
    width:22px;
    height:25px;
    cursor:pointer;
    opacity:0.75;
}


.speaker-box img {
	width:auto; height:44px; position:absolute; left:6px; top:6px;
}
.speaker-box div {
	margin-left:52px; display:inline-block
}

.inactive-speaker {
   opacity:0.7;
   cursor:pointer;
   transition: all 0.5s ease;
}




.inactive-speaker:hover {
	opacity:1;
}

.inactive-speaker img {
   -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
   filter: grayscale(100%);
   transition: all 0.5s ease;
}


.inactive-speaker:hover img {
   -webkit-filter: grayscale(0%);
   -moz-filter: grayscale(0%);
   filter: grayscale(0%);
}


@media (max-width: 1000px) {
	.wrapper-lingua-speakers { display:block }
	.wrapper-lingua-player { display:block }
	.speaker-box { margin-top:1rem; }
	.speaker-box:nth-child(odd) { margin-left:0; }

    .exercise-listening .speaker-box { margin-left:1rem; }
    .exercise-listening .speaker-box:nth-child(1) { margin-left:0; }

	.lingua-player.green-audio-player { width:auto; }
}






@media (max-width: 980px) {
    .exercise-listening .speaker-box { width: calc( 33.3% - 0.66rem - 16px ) }
	.exercise-listening .speaker-box:nth-child(4) { margin-left:0; }
}

@media (max-width: 600px) {
	.speaker-box { margin-top:1rem; }
	.speaker-box.first-speaker-box { margin-left:0; }
	.speaker-box, .exercise-listening .speaker-box {
		box-sizing:border-box;
		width:calc(50% - 0.25rem);
		height:48px;
		padding:6px;
		margin-top:0.5rem !important;
		margin-left:0.5rem;
	}

    .speaker-box.speaker-box-reading {
        height:48px;
    }


	.exercise-listening .speaker-box:nth-child(4) { margin-left:0.5rem; }
	.exercise-listening .speaker-box:nth-child(3) { margin-left:0; }

	.speaker-box img {
		width:auto; height:40px; position:absolute; left:4px; top:4px;
	}
	.speaker-box div {
		margin-left:44px; display:inline-block
	}
}

@media (max-width: 380px) {
	.speaker-box.speaker-box-reading {
		width:auto;
		display:block;
	}
}


 /*
 .exercise-box
 {
  padding-top:10px; padding-bottom:10px;
 }

 .exercise-box.exercise-box-left
 {
  box-sizing:border-box;
  border-bottom:3px solid #E8E8E8;
  border-right:3px solid #E8E8E8; border-style: dotted;
  width:50%;
  display:inline-block;
  vertical-align:top;
  padding-right:6px;

 }

 .exercise-box.exercise-box-right
 {
  box-sizing:border-box;
  border-bottom:3px solid #E8E8E8; border-style: dotted;
  width:50%;
  display:inline-block;
  vertical-align:top;
  padding-left:6px;
 }
 */

 .question-number
  {
  font-size:0.8em;
  font-weight:600;
  margin-left:4px;
  margin-top:4px;
  background-color:#e55853; color:#ffffff; font-weight:400; border-radius:4px; padding:0.5rem; display:inline-block; margin-bottom:0.6rem; margin-top:0rem
 }

 .question
  {
  display:block; margin-bottom:10px; font-size:1.1em; margin-left:4px;
 }


 .answers
  {
  display:table; width:100%; border-spacing: 4px;
 }

 .answers-row
  {
  display:table-row;
 }

.answers.very-long-answers, .answers.very-long-answers .answers-row, .answers.very-long-answers .answer
{
 display:block;
 width:auto;
 margin-right:0;
 margin-left:0;
}


.result-modal .percentage {  }

.rate-the-text, .text-rated { display:inline-block; cursor:pointer; background-image:url('../images/radio0.png'); background-position:0px 4px; background-repeat:no-repeat; padding:4px 3px 8px 31px; margin-left:8px; margin-right:5px; min-height:25px; }
.rate-the-text:hover, .rate-the-text-chosen { background-image:url('../images/radio1.png'); border-radius:3px; }
.rate-the-text.rate-the-text-level { display:inline-block; text-align:left; margin: 0 auto; padding:4px 0px 3px 33px; }
.text-rated { cursor:auto; background-image:url('../images/correct.png'); padding-left:26px; }


a.link--grey {
    color:#878787;
    font-size:0.9rem;
    text-decoration:underline;
}

a.button--white, .button--white {
    background-color:#ffffff;
    color:#544F4E;
    padding:0.5rem 1rem;
    border-radius:5px;
    text-decoration:none;
    font-size:1rem;
    display:inline-block;
    margin-top:0rem;
    margin-bottom:0.8rem;
    margin-right:0.8rem;
    box-shadow:3px 3px 4px 0px rgba(var(--lg-shadow-rgb, 120, 98, 72), 0.09)
}

a.button--white:hover {
    background-color:#fAfAfA;
    color:#272727;
    text-decoration:none;
    box-shadow:2px 3px 3px 0px rgba(var(--lg-shadow-rgb, 120, 98, 72), 0.19);
    transition: background-color 0.3s ease;
}


 .button, .answer, .corrected-result
  {
  -webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;
  border: 3px solid #E8E8E8;
  background:linear-gradient(to bottom, white 0%, white 20%, #F3F3F3 100%);
  padding:6px;
  TEXT-DECORATION: none;
  color: #222;
  font-size:1.0em;
  margin-right:5px; margin-bottom:5px;
  background-color:#F3F3F3;
  cursor:pointer;
 }

 .button:hover { TEXT-DECORATION: none; border-color:#DBDBDB  }
 .button:focus { TEXT-DECORATION: none; border-color:#D2D2D2; background:linear-gradient(to bottom, white 0%, white 20%, #F0F0F0 100%);
    }

 .button.button--dummy:hover { TEXT-DECORATION: none; border-color:#f3f3f3 }

 .button--orange {
	border-color:#e55853; background:#e55853; margin:0 auto; color:#ffffff;
 }
 .button--orange:hover {
	border-color:#e55853;
 }

 .button--smaller, .button--smaller:hover {
	  -webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;
	  padding:3px;
	  font-size:0.9em;
 }




    /* Legacy .modal container - same two changes as the .modal-overlay rule
       above, so the old and the new modal do not drift apart. */
    .modal .button-cta {
        border: none;
        width: 100%;
        text-align:center;
        border-radius: 5px;
        color: #ffffff;
        background-color: #e55853;
        display: block;
        padding: 0.95rem 1.5rem;
        cursor: pointer;
        margin-bottom:5px;
        line-height:1em;
        font-family:inherit;
        font-size: 1rem;
        text-decoration:none;
        text-shadow: 1px 1px 1px #94332f;
        transition: background-color 0.5s ease;
    }
    .modal .button-cta:hover {
        background-color:#d93c36;
    }



 .corrected-result
 {
  display:inline-block;
  margin-bottom:3px;
  margin-right:0px;
  font-size:1.0em;
  padding:3px 12px;
  padding-right:6px;
  -webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;
 }

 .corrected-result .mc_icon
 {
  margin-right:5px;
 }

 .corrected-result del { text-decoration: line-through; opacity:0.8em; }

 .modal .corrected-result
 {
  padding:1px 10px;
  padding-right:4px;
  border-width:2px;
  line-height:16px;
 }

 .modal .corrected-result .mc_icon
 {
  margin-right:5px;
  display:inline-block; vertical-align:middle; margin-top:-3px; margin-left:-6px; margin-right:2px; width:16px; height:16px; line-height:16px;
 }

 .modal .corrected-result del { color:#FF0000; }


 .button, .active-answer
 {
  cursor:pointer;
 }

 /* Gated to hover-capable pointers so the darker border doesn't stick on
    touch devices after tapping an option (mobile sticky-hover bug). */
 @media (hover: hover) and (pointer: fine) {
    .active-answer:hover { border:3px solid #DBDBDB }
    .active-answer:hover > .mc_number
    {
     color:#FFFFFF; background-color:#B0B0B0; font-weight:600;
    }
 }

 .mc_number.mc_number_chosen
 {
  color:#FFFFFF; background-color:#B0B0B0; font-weight:600;
 }

 .mc_number.mc_number_chosen {  background-image:url('../images/spinner2.gif');
  background-repeat:repeat-x; }

  input[type=submit] { padding:9px; }
 .button {  padding-right:10px; display: inline-flex;
  align-items: center;      /* Vertically center content */
  justify-content: center;  /* Optional: center text and icon horizontally */
 }
 .answer { display:block; font-size:1.05em; padding:0.6rem 6px; padding-left:12px; min-height:1.5em;  }

 .answers .answer { display:table-cell; width:50%; box-sizing:border-box; }
 .answers.short-answers .answer { width:33.3%; }


 .header .button
   {
  background:#FFFFFF;
  padding:8px;
  font-size:12px;
  height:17px;
  color:#544F4E;
  border:4px solid #E8E8E8;
  vertical-align:top;
 }



    .button.button--vocabulary-list {
        margin-right:0;
    }

    /* Locked variant — shown to guests / basic members. Same layout as the
       active button so the row keeps its size, but desaturated with a
       padlock trailing the label. Click still goes through (it opens the
       vocabulary:lists upsell modal via [data-action="show-modal"]). */
    .button.button--vocabulary-list.button--locked {
        opacity: 0.65;
        position: relative;
        padding-right: 1.8rem;
    }
    .button.button--vocabulary-list.button--locked i { filter: grayscale(1); }
    .button.button--vocabulary-list.button--locked::after {
        content: "";
        position: absolute;
        right: 0.5rem;
        top: 50%;
        transform: translateY(-50%);
        width: 0.95rem;
        height: 0.95rem;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>");
        opacity: 0.85;
    }
    .button.button--vocabulary-list.button--locked:hover { opacity: 0.85; cursor: pointer; }

  .button i {
    display: inline-block;
    width:1.2rem;
    height:1.2rem;
    margin-right:4px;
    background-size:auto 1.2rem;
    background-repeat:no-repeat;
    background-position:center center;
    position:relative;
    top:0px;
    opacity:0.8;
  }

 .option
  {
  display:inline-block;
  width:50%;
 }

 .options.options__vocabulary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.3rem; /* Abstand zwischen Buttons */
 }
 .options.options__vocabulary .option {
    width: 100%;
    display:block;
    box-sizing: border-box;
 }
 .options.options__vocabulary .answer {
    box-sizing:border-box;
    height:100%;
    margin:0;
 }

 @media (max-width: 480px) {
    .options.options__vocabulary {
        gap: 0.2rem; /* Abstand zwischen Buttons */
     }
    .options.options__vocabulary .answer {
        box-sizing:border-box;
        height:100%;
        margin:0;
        padding-left:0.3rem;
        padding-right:0.1rem;
     }
     .options.options__vocabulary {
        margin-right:-0.5rem;
    }
    .options.options__vocabulary .answer .mc_number {
        margin-right:0;
        font-size:0.7rem;
        margin-left:0;
        width:18px;
        height:18px;
        line-height:18px;
    }

 }

@media (max-width: 380px) {
    .options.options__vocabulary .answer .mc_number {
        display:none;
    }

    .options.options__vocabulary.test {
        margin-left:-0.8rem;
        margin-right:-0.9rem;
    }

    .options.options__vocabulary.test .answer {
        padding-left:0.7rem;
    }
}

/* Phones: single column with full-width tap targets.
   Placed AFTER the 480px/380px rules so it wins on narrow screens —
   overrides the badge-shrinking and negative-margin hacks that only
   made sense when we were still squeezing 2 columns. */
@media (max-width: 600px) {
    .options.options__vocabulary,
    .options.options__vocabulary.test {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        margin-left: 0;
        margin-right: 0;
    }
    .options.options__vocabulary .answer,
    .options.options__vocabulary.test .answer {
        min-height: 48px;
        display: flex;
        align-items: center;
        padding: 0.75rem 0.75rem;
    }
    .options.options__vocabulary .answer .mc_number {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        line-height: 1;
        font-size: 0.8rem;
        margin-right: 0.6rem;
        margin-left: 0;
        flex-shrink: 0;
    }
}




 .vc
  {
  display:inline-block;
  vertical-align:middle;

 }

 .vc-correct
 {
  display:inline-block; background-image:url('../images/correct.png'); background-position:3px 0px; background-repeat:no-repeat; padding-left:29px; margin-top:3px;
 }

 .vc-wrong
 {
  display:inline-block; background-image:url('../images/wrong.png'); background-position:3px 0px; background-repeat:no-repeat; padding-left:29px; margin-top:3px;
 }


.input
{
 position:relative; display:inline-block; vertical-align:middle; margin-right:9px; vertical-align:top;  border: 3px solid #E8E8E8;  border-radius:8px
}

.input .answerbox, .input .hintbox
{
 font-family: "TrainerFont", Lucida, Monospace;
 font-size:19px;
 letter-spacing: 14.5px;
 -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;
}

.input .hintbox
{
 background: url(../images/trainerback.gif) top left repeat-x;
 z-index:0;
 border:0;
 padding:7px;
 background-color:#FFFFFF;
 color:#C2C2C2;
}

.input .answerbox
{
 z-index:1;
 position:absolute;top:0px;left:0px;
 background-color: transparent;
 padding:7px;
 border:0;
 outline: none;
}




.button--sc {
	position:relative; margin-right:3px; display:inline-block; padding:4px; padding-left:9px; padding-right:12px; background-color:#eeeeee; border-width:2px;
}

.button--sc__letter {
	display:inline-block;
}
.button--sc__shortcut {
	position:absolute; right:10%; bottom:5%; font-size:0.7em; color:#7F7F7F;
}

@media (max-width: 680px) {
	.extra-navi { display:none }
}

@media (max-width: 600px) {



	.button--sc {
		 padding:3px 8px;
	}

	.button--sc__shortcut {
		display:none;
	}
}




.button--specialcharacter, .specialcharacter, .button--specialcharacter__small
{
 position:relative; display:inline-block; padding:6px; padding-left:10px; padding-right:16px; background-color:#eeeeee
}

.button--specialcharacter__small {
	 padding:4px; padding-left:8px; padding-right:12px; margin-right:0.1rem; border-width:1px;
}

@media (max-width: 600px) {
    .button.specialcharacter
    {
        padding:6px; padding-left:10px; padding-right:12px; margin-right:3px; margin-bottom:3px;
    }
}

.sc_letter
{
 display:inline-block;
}

.sc_shortcut
{
 position:absolute; right:10%; bottom:5%; font-size:0.7em; color:#7F7F7F;
}


#stats
{
 display:none; color:#717171;
}

.headline
{
 font-size:1.1em; font-weight:600; color:#717171;
}

.stats_subhead
{
 font-size:0.85em; font-weight:600; color:#9a9a9a;
 margin-top:10px; margin-bottom:2px;
 display:inline;
}

#stats_bar, .stats_bar
{
 width:70%; max-width:250px; display:inline-block; vertical-align:middle; border-radius:5px; height:25px; background: url(../images/bar.gif) top left no-repeat; background-size: 50% 100%; background-color:#eeeeee;
 transition: background-size 0.4s ease;
}

#stats_percentage, .stats_percentage
{
 display:inline-block;  color:#717171; vertical-align:middle; margin-left:2%;
}

#stats_percentage, .stats_percentage
{
 font-weight:600;
 font-size:1.25em;
}

#stats_attempts, .stats_attempts, #stats_words, #stats_last_right, #stats_last_wrong, #stats_learned
{
 display:inline; width:20px; font-weight:600;
}


.trainer
{
 border-bottom:3px solid #E8E8E8; border-style: dotted; padding-bottom:15px;
}

.trainer--example {
    padding:0.2rem;
    font-size:0.93rem;
    background-image: url(../img/icon-bulb.svg);
    background-repeat:no-repeat;
    background-size: 18px auto; padding-left:1.3rem;
    background-position:-0.1rem 0.3rem
}

#result .trainer--example {
    margin-left:-2rem;
    margin-top:6px;
    padding-bottom:2px;
    padding-left: 1.55rem;
}

/* Audio play button styles */
.audio-play-button {
    width: 15px;
    height: 15px;
    margin-left: 5px;
    cursor: pointer;
    vertical-align: middle;
    display: inline-block;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: #eeeeee;
    padding: 3px;
    position:relative;
    top:-1px;
}

/* Locked variant — shown to basic users when a word/example exists but no
   audio (premium feature). Click triggers the vocabulary-audio upsell modal
   via data-action on the SVG itself. Paler fill + softer background so it
   reads as "inactive but tappable". */
.audio-play-button--locked {
    background-color: #f5f5f5;
    opacity: 0.9;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}
.audio-play-button--locked:hover,
.audio-play-button--locked:focus {
    opacity: 1;
    background-color: #ffe9e8;
    outline: none;
}

/* Clickable example box styles */
.trainer--example[data-audio] {
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.trainer--example[data-audio]:hover {
    background-color: #f5f5f5;
}

#result {
    margin-top:-0.5rem;
    padding:0.5rem 0;
    display:none; margin-bottom:3px; border-bottom:3px solid #E8E8E8; background-repeat:no-repeat; border-style: dotted; padding-bottom:7px; margin-bottom:9px;
}

#result.result__wrong {
    background-image: url(../images/wrong.png); background-position:0px 0.6rem; padding-left:29px;
}
#result.result__correct {
    background-image: url(../images/correct.png); background-position:0px 0.6rem; padding-left:29px;
}
#result.result__waiting {
    background-image: url(../images/spin.gif); background-position:0px 0.6rem; padding-left:29px;
}

@media (max-width: 600px) {
    .trainer
    {
        border-bottom:0px;
        padding-bottom:0px;
    }
    .trainer_right {
        margin-top:0px;
    }
}



.smaller
{
 font-size:0.8em;
}


.info
{
 background: url(../images/info.gif) 0 0 no-repeat;
 padding-left:31px;
}

.keyboard
{
 background: url(../images/keyboard.gif) top left no-repeat;
 padding-left:36px;
}

.informus
{
 background: url(../images/send.gif) top left no-repeat; background-position:3px 0px;
 padding-left:36px; display:none;
}

.mc_number
{
 display:inline-block; vertical-align:middle; margin-top:-3px;  text-align:center; font-weight:600; color:#8C8C8C; font-size:0.9em; margin-left:-6px; margin-right:2px; border-radius:50%; width:22px; height:22px; line-height:22px; background-color:#E9E9E9;
}

.mc_icon
{
 display:inline-block; vertical-align:middle; margin-top:-3px; margin-left:-6px; margin-right:2px; width:22px; height:22px; line-height:22px;
}



@media (max-width: 628px)
{

 .versionleft
 {
  padding-bottom:0px; margin-bottom:4px;
 }

  .versionright  { padding-right:2px; }

 .header .button
   {
  background:#FFFFFF;
  padding:5px;
  font-size:12px;
  height:17px;
  color:#544F4E;
  border:3px solid #E8E8E8;
  vertical-align:top;
  margin-right:1px;
 }

 .globe
 {
  display:none;
 }

}


@media (max-width: 880px)
{
 .exercise-box
 {

 }



 .exercise-box.exercise-box-left,
 .exercise-box.exercise-box-right
 {
  display:block;
  width:auto;
  border-right:none;
  padding-left:0;
  padding-right:0;
 }

}


/* Breakpoint 4 */
@media (max-width: 576px)  {

    h1, .h1_style { font-size:1.25em; margin-bottom:7px; }
    h2, .h2_style { font-size:1.1em; margin-bottom:2px; }
    h4, .h4_style { font-size:1.1em; }

    .sub-header { margin-top:-8px; padding-top:1.5%; }

    .leader h1 { font-size:1.25em; }
    .leader .main-text { font-size:1em; }

    .answers.long-answers, .answers.long-answers .answers-row, .answers.long-answers .answer {
        display:block;
        width:auto;
        margin-right:0;
        margin-left:0;
    }

    .panel { border-radius:0px; border-left:0px; border-right:0px; margin-left:-1.5rem; margin-right:-1.5rem; padding-top:1rem; }
    .panel-header { margin-top:calc(-1rem - 1px); padding-top:0; padding-bottom:1rem; }

    .panel--idea.panel {
        background-color: #E8E8E8;
        font-size: 1rem;
        padding: 1rem 1.2rem;
        border: 0;
        transition: background-color 0.5s ease;
        background-image: url("../images/icon-idea.png");
        background-repeat: no-repeat;
        background-size: 1.5rem auto;
        padding-left: 3rem;
        background-position: 1rem 1rem;
        margin-bottom: 1rem;
    }



    .question, .question-number { margin-left:0; }
    .question { margin-bottom:3px; font-size:1em; }
    .answer { font-size:1em; padding:0.6rem 0; padding-left:12px; }
    .answers { margin-left:-4px; width:calc(100% + 8px) }

    .panel_navigation_button {
        padding:5px 7px 9px 7px;
    }
    .panel_navigation_button_inactive {
        padding:5px 7px 4px 7px;
    }

    .flag_index
    {
    border: 3px solid #E8E8E8;
    padding:1%;
    margin-right:1.5%;
    margin-bottom:1.5%;
    width:44%;
    }

    .hover
    {
    font-size:1.1em;
    }



    .button-circle--toggle {
        width:42px;
        height:42px;
    }

    .button-circle--login {
        width:42px;
        height:42px;
    }


    .circle:hover
    {
    color:#E55853;
    }

    .keyboard
    {
    display:none;
    }

    .main .container, .leader .container
    {
    padding:0;
    }

}




.list ul
{
 padding-left:15px;
    list-style-type: disc;
   list-style-position: inside;
}

.list li
{
 padding-left:15px;
}



/* Anmeldeformular Start */

/*
.form, .topline
{
 padding-top:10px; border-top:3px dotted #DBDBDB;
}
*/

.topline { margin-top:8px; }

.form input, .form select
{
 border-color:#DBDBDB;
}

.form label
{
 font-weight:600;
 display:block;
}

.form fieldset
  {
   border: 0px;
   padding: 0px;
   margin: 0px;
  }

.form legend
  {
   display:none;
  }


.form error
{
 color:#DD0000;
 font-weight:600;
}

.form .importance_info
{
 color:#505050;
 font-size:12px;
 font-weight:normal;
}

.form .inputbox
{
 width:98%;
 padding:0.7rem;
 display:block;
 box-sizing: border-box;
 margin-bottom:12px;
 min-width:200px;
 max-width:300px;
}

.form .codebox
{
 width:70%;
 padding:1%;
 display:inline-block;
 vertical-align:center;
 min-width:80px;
 max-width:150px;
}

.form .inputerror
{
 background: url("../images/warning.gif") 5px center no-repeat;
 background-color:#FFFFFF;
 padding-left:33px;
}

.form .innerbox
{
 display:inline-block;
 vertical-align:top;
 width:50%;
 max-width:300px;
 margin-bottom:5px;
}

@media (max-width: 600px)
{
 .form .innerbox
 {
  width:100%;
  max-width:300px;
 }
}



.form .loginbox
{
 padding:10px;
 display:block;
 font-size:1.1em;
 margin-bottom:6px;
 width:85%;
}

.separator-with-caption {
    display: block;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    margin:0.5rem 0;
}

.separator-with-caption > span {
    position: relative;
    display: inline-block;
    color:#acacac;
    font-size:0.8rem;
}

.separator-with-caption > span:before,
.separator-with-caption > span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9999px;
    height: 1px;
    background: #acacac;
}

.separator-with-caption > span:before {
    right: 100%;
    margin-right: 15px;
}

.separator-with-caption > span:after {
    left: 100%;
    margin-left: 15px;
}

.login-with-google {
    background-image:url('../images/google-icon.svg');
    height: 30px;
    width: 100%;
    background-color: #eeeeee;
    border-radius: 5px;
    display: block;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 7px 0;
}


.form .codeimage
{
 display:inline-block;
 vertical-align:center;
 padding-left:10px;
}

.terms
{
 padding-top:10px; padding-bottom:10px; margin-bottom:10px; margin-top:10px; padding-left:32px; border-top:3px dotted #DBDBDB; border-bottom:3px dotted #DBDBDB;  background-image:url('../images/info.gif'); background-position:0px 10px; line-height:25px; background-repeat:no-repeat;
}

/* Anmeldeformular Ende */

.index-flag-hidden { display:none; }

.photo
{
 -webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;
 border: 2px solid #E8E8E8;
 padding:8px;
 background-color:#FFFFFF;
 max-width:400px;
 width:34%;
 float:left;
 margin-right:2%;
 margin-bottom:2%;
 box-shadow: 0px 6px 9px 0px rgba(var(--lg-shadow-rgb, 120, 98, 72), 0.08);
}

.photo.photo--right {
	float:right;
	margin-left:2%;
	margin-right:0;
}

/* START Responsive Leader und Content */

@media (max-width: 1000px)
{
.include-background { background-repeat:no-repeat; background-position:100% center; }
.include-background.background-index { background-image:url('../images/student-small.jpg'); background-position:100% center; }
.include-background.background-speaking, .include-background.background-teachers { background-position:120% center; background-size: auto 100% }
.leader-content { width:62%; }
.leader-background { opacity:0.25}


    .choose-language--dashboard .button_flag {
        box-sizing:border-box;
        width: calc(33.33% - 0.7rem);
    }
}

@media (max-width: 900px)
{
.include-background, .include-background.background-speaking { background-repeat:no-repeat; background-size: auto 100%; background-position:140% center; }
.include-background.background-index { background-position:100% center; }
.include-background.background-speaking, .include-background.background-teachers { background-position:140% center; }
}


@media (max-width: 800px)
{
    .include-background { background:none; } .include-background.background-teachers, .include-background.background-speaking, .include-background.background-index { background:none; }

    .leader-background { display:none; }
    .content.leader-content { width:auto; min-height:0; padding-right: 0.2rem }
    .leader { background: transparent; }
    .main-text { padding-right:0.3rem }

        .button_flag_small
        {
        width:32.3%;
        width:calc(33.3% - 0.7rem);
        }


    .content_left, .content_right
    {
    width:auto; display:block; float:none;
    padding-left:2rem; padding-right:2rem;
    }



    .content_right.content-screen { display:none; }

    .content_right_table_th { display:none; }

    .content_text_left, .content_text_right
    {
    padding-top:0; padding-bottom:0;
    }

    .content_text_left  { padding-top:1%; }
    .content_text_right { padding-bottom:2%; }



    .button-index-show-more { display:none !important; }



    .button_flag, .button_icon
    {
    box-shadow: 0px 8px 9px 0px rgba(var(--lg-shadow-rgb, 120, 98, 72), 0.14);
    border-radius: 8px;
    background-color:#FFFFFF;
    display:inline-block;
    width:31.8%;
    margin-right:1.5%;
    margin-bottom:1.5%;
    box-sizing: border-box;
    text-decoration:none;
    color:#544F4E;
    background-repeat:no-repeat; background-position:0.4rem center;
    border:0;
    padding-left:3.6rem; background-size:2.6rem auto;
    }




}

@media (max-width: 750px)
{
 .content, .content_left, .content_right, h2.content-h2, .panel {
  padding-left:1.5rem; padding-right:1.5rem;
 }
 .panel-header { margin-left:-1.5rem; padding-left:1.5rem; padding-right:1.5rem; }




}


@media (max-width: 680px)
{


    .choose-language--dashboard .button_flag {
        box-sizing:border-box;
        width: calc(50% - 0.7rem);
    }


.photo
{
 -webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;
 border: 1px solid #E8E8E8;
 padding:4px;
 background-color:#FFFFFF;
 max-width:400px;
 width:34%;
 float:left;
 margin-right:2%;
 margin-bottom:2%;
 box-shadow: 0px 6px 9px 0px rgba(var(--lg-shadow-rgb, 120, 98, 72), 0.08);
}




}


@media (max-width: 620px) {
 .button_flag, .button_icon {
  width:48%; margin-right:2%; margin-bottom:2%;
 }
 .button_flag:nth-child(2), .button_icon:nth-child(2) {
  margin-right:0;
 }



 .hide620 { display:none; }

}

@media (max-width: 576px)
{
 .button_flag_small
 {
 width:48.8%;
 width:calc(50% - 0.7rem);
 font-size:1em
 }

 .sub-header .container .content {
	 padding-right:0;
 }

}






@media (max-width: 576px)
{

    .main .container, .leader .container
    {
    padding-top:1.5%;
    }



    .hide480 { display:none; }


 .button_flag, .button_icon { background-size:2.3rem auto; padding-left:3.2rem; }


 td.first-td { width:70%; }
 .hide420 { display:none; }

 .content, .content_left, .content_right, h2.content-h2, .panel {
  padding-left:1rem; padding-right:1rem;
 }
 .panel { margin-left:-1rem; margin-right:-1rem; }

 .header .button.button--premium-status { padding:6px 8px;  }
}


@media (max-width: 360px)
{
 .button_flag_small {
  width:auto;
  display:block;
  max-width:none;
 }
 .button_flag, .button_icon { width:96%; margin:0; margin-bottom:2%; }
 .hide360 { display:none; }
 td.first-td { width:auto; }
}



/* ENDE Responsive Leader und Content  */



/* START Dialgue in Texts */

.dialogue .dialogue-person1,
.dialogue .dialogue-person2
{
 padding:10px;
}


.dialogue .dialogue-person1
{
 background-color:#F2F2F2;
}

.dialogue .dialogue-name { display:inline-block; vertical-align:top; width:120px; }
.dialogue .dialogue-text { display:inline-block; vertical-align:top; width:calc(100% - 120px); }

/* Ende Dialgue in Texts */




@media (min-width: 800px)
{
 .jump-to-button { display:none; }
}

#bugdesk .bugdesk {
	box-sizing:border-box;
	width:90%;
	position:fixed; bottom:1rem; right:1rem; padding:1.2rem; max-width:250px; background-color:#ffffff; box-shadow: 0px 8px 13px 7px rgba(var(--lg-shadow-rgb, 120, 98, 72), 0.34); border-radius:8px
}

.error-report .bugdesk {
	box-sizing:border-box;
	width:90%;
	position:absolute; left:-1.5rem; top:-0.3rem; z-index:6;padding:1.2rem; width:310px; background-color:#ffffff; box-shadow: 0px 8px 13px 7px rgba(var(--lg-shadow-rgb, 120, 98, 72), 0.34); border-radius:8px
}

.error-report-app {
    position:relative;
    display:inline-block;
    vertical-align:top;
}


.button.bugdesk-submit-button2026:focus {
    background:none;
    background-color:#e55853 !important;
    border-color:#e55853 !important;
}


#bugdesk .bugdesk-minified {
	position:fixed; bottom:0.7rem; right:0.7rem;

	border-radius:50%;
	border: 3px solid #D4D4D4;
	width:20px;
	height:20px;
	padding:3px;
	box-shadow: 3px 3px 3px 0px rgba(var(--lg-shadow-rgb, 120, 98, 72), 0.08);
	text-align:center;
	font-weight:bold;
	background-color:#FFFFFF;
	cursor:pointer;
	background-image: url("../images/exclamation.gif");
	background-position:center center;
	background-repeat:no-repeat;
	background-size:70% auto;
	opacity:0.7;
	cursor:pointer;
}

.bugdesk textarea {
	box-sizing:border-box;
	width:100%;
	padding:0.6rem;
	margin:0.5rem 0;
	min-height:4.5rem;
	line-height:1.3rem;
	font-family: var(--lg-font);
}

.bugdesk p { margin-right:25px; }

.bugdesk .bugdesk-close {
	top:0.6rem;
	right:0.6rem;
	width:15px;
	height:15px;
	background-size:60% auto;
}



/* Lingua Trainer Start */






/* Lingua Trainer End */




/* Basics 2023 Start */

.cta-button {
    border-radius: 8px;
    color: #ffffff;
    background-color: #e55853;
    display: inline-block;
    padding: 0.8rem 1.5rem;
    cursor: pointer;
    border: 0;
}

ul.boxgrid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
ul.boxgrid li {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 2rem;
    padding-bottom: 1rem;
    margin: 0;
    display: flex;
    margin-bottom: 0.5rem;
    box-shadow: 5px 7px 6px 0px rgba(var(--lg-shadow-rgb, 120, 98, 72), 0.09);
    background-size: 2.8rem auto;
    background-repeat: no-repeat;
    background-position: 2rem 2rem;
    padding-left: 5.7rem;
}

ul.boxgrid li div {
    width: 100%;
    display: inline-block;
}

.icon-connect { background-image: url("../images/teachers-connect.svg"); }
.icon-track { background-image: url("../images/teachers-track.svg"); }
.icon-share { background-image: url("../images/teachers-share.svg"); }
.icon-noads { background-image: url("../images/teachers-noads.svg"); }
.icon-premium { background-image: url("../images/teachers-premium.svg"); }
.icon-report { background-image: url("../images/teachers-report.svg"); }
.icon-edit { background-image: url("../images/teachers-edit.svg"); }
.icon-tools { background-image: url("../images/teachers-tools.svg"); }
.icon-teacher { background-image: url("../images/teachers-teacher.svg"); }
.icon-reading { background-image: url("../images/icon-reading.svg"); }
.icon-listening { background-image: url("../images/icon-listening.svg"); }
.icon-grammar { background-image: url("../images/icon-grammar.svg"); }
.icon-dictation { background-image: url("../images/icon-dictation.svg"); }
.icon-vocabulary { background-image: url("../images/icon-vocabulary.svg"); }
.icon-translation { background-image: url("../images/icon-translation.svg"); }
.icon-list-correct { background-image: url("../images/icon-list-correct.svg"); }
.icon-list-last-wrong { background-image: url("../images/icon-list-wrong.svg"); }
.icon-list-last-correct { background-image: url("../images/icon-list-correct.svg"); }
.icon-list-last { background-image: url("../images/icon-list-last.svg"); }
.icon-list-learned { background-image: url("../images/icon-list-learned.svg"); }
.icon-list-problematic { background-image: url("../images/icon-list-problematic.svg"); }
.icon-list-bookmarks { background-image: url("../images/icon-list-bookmarks.svg"); }
.icon-bookmark { background-image: url("../images/icon-list-bookmark.svg"); }
.icon-premium { background-image: url("../images/icon-premium.svg"); }




@media (max-width: 1150px) {
    ul.boxgrid li {
        padding: 1rem;
        padding-bottom: 0.5rem;
        background-size: 1.8rem auto;
        background-position: 1rem 1rem;
        padding-left: 3.5rem;
    }
}

@media (max-width: 800px) {
    ul.boxgrid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 540px) {
    ul.boxgrid {
        grid-template-columns: repeat(1, 1fr);
    }
    ul.boxgrid li {
        padding: 1.2rem;
        padding-bottom: 0.5rem;
        background-size: 2.2rem auto;
        background-position: 1.2rem 1.2rem;
        padding-left: 4.2rem;
        margin-bottom: 0;
    }

}


.premium-upsell {
    background-color: #E8E8E8;
    border-radius: 8px;
    padding: 1rem 1.2rem;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    background-image: url('../img/audio.png');
    background-repeat: no-repeat;
    background-position: -1rem -1rem;
    background-size: 120px 120px;
    padding-left:122px !important;
    padding-right:2rem !important;
    position: relative;
}

.premium-upsell .close-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 24px;
    height: 24px;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    color: #666;
    transition: all 0.2s ease;
    border: 1px solid #ddd;
}

.premium-upsell .close-btn:hover {
    background-color: rgba(255, 255, 255, 1);
    color: #333;
}

.premium-upsell p {
    padding-top:0.5rem;
}

.error-report {
    display:inline-block; vertical-align:top; margin-top:3px; margin-left:5px;
}

.button--error-report {
   display:inline-block; background-color:#eeeeee; border-radius:50%; width:30px; height:30px; line-height:30px; text-align:center; background-image:url(../images/icon-error-report2.svg); cursor:pointer; background-size:16px auto; opacity:0.6; background-repeat:no-repeat; background-position:center center;
    -webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}

.button--error-report:hover {
    opacity:0.8;
}