/* =====================================================
   MISTUDIA ENGLISH TENSE TRAINER
===================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:Arial,Helvetica,sans-serif;
    background:#f5f6fa;
    color:#222;

}

.container{

    width:96%;
    max-width:1800px;
    margin:25px auto;

}

h1{

    text-align:center;
    margin-bottom:25px;
    color:#17365D;

}

h2{

    margin-bottom:15px;

}

#filter{

    background:white;

    border-radius:8px;

    padding:20px;

    margin-bottom:25px;

    box-shadow:0 3px 10px rgba(0,0,0,.12);

}

#tenseSelection{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));

    gap:8px;

    margin-bottom:20px;

}

#tenseSelection label{

    display:flex;

    align-items:center;

    gap:10px;

}

.filterButtons{

    display:flex;
    gap:15px;
    flex-wrap:wrap;
    margin-top:15px;

}

.exerciseButtons{
    position:relative;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    margin:25px 0;
    min-height:48px;
}

.exerciseButtons button{

    min-width:170px;

    padding:12px 22px;

    border:none;

    border-radius:12px;

    font-size:17px;

    font-weight:bold;

    color:white;

    cursor:pointer;

    box-shadow:0 4px 8px rgba(0,0,0,.15);

    transition:all .2s;

}

.exerciseButtons button:hover{

    transform:translateY(-2px);

}


button{

    padding:10px 18px;

    border:none;

    border-radius:6px;

    background:#1976D2;

    color:white;

    cursor:pointer;

    font-size:15px;

}

button:hover{

    background:#125EA8;

}

.tableWrapper{

    overflow:auto;

    border:1px solid #bbb;

    background:white;

    border-radius:8px;

    box-shadow:0 4px 12px rgba(0,0,0,.15);

}

#tenseTable{

    border-collapse:collapse;

    table-layout:fixed;

    width:max-content;

}

thead th{

    position:sticky;

    top:0;

    z-index:5;

    background:#FFFF00;

    border:1px solid #999;

    padding:10px;

    text-align:center;

}

tbody td{

    border:1px solid #ccc;

    padding:6px;

    text-align:center;

    background:white;

}

tbody td:first-child{

    position:sticky;

    left:0;

    background:#FFF2CC;

    z-index:4;

    text-align:left;

    font-weight:bold;

    min-width:220px;

}

#tenseTable input{

    width:110px;

    padding:6px;

    text-align:center;

    border:1px solid #999;

    border-radius:4px;

}

#tenseTable td:last-child input{
    width:190px;
}

select{

    width:130px;

    padding:6px;

}

.correct{

    background:#C6EFCE !important;

    border:2px solid #2E7D32 !important;

}

.wrong{

    background:#FFC7CE !important;

    border:2px solid #C62828 !important;

}

.solution{

    display:block;

    margin-top:3px;

    font-size:11px;

    color:#0B8043;

    font-weight:bold;

}

#statistics{

    margin-top:25px;

    padding:20px;

    background:white;

    border-radius:8px;

    box-shadow:0 3px 10px rgba(0,0,0,.12);

}

#statistics p{

    margin:8px 0;

    font-size:18px;

}

#score,
#percent{

    font-weight:bold;

}

@media(max-width:900px){

    input{

        width:90px;

    }

}

.languageSelection{

    display:flex;
    align-items:center;
    gap:10px;

    margin-bottom:20px;

}

.languageSelection label{

    font-weight:bold;

}

.languageSelection select{

    min-width:180px;

    padding:8px 32px 8px 10px;

    border:1px solid #999;

    border-radius:4px;

    background:white;

    font-size:15px;

    cursor:pointer;

}


.tenseDropdown{
    position:relative;
    display:inline-block;
    min-width:300px;
}

.tenseDropdownBtn{
    width:100%;
    text-align:left;
    background:white;
    color:#222;
    border:1px solid #999;
    border-radius:4px;
}

.tenseDropdownBtn:hover{
    background:#f2f2f2;
}

.tenseDropdownMenu{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    z-index:100;

    width:380px;
    max-height:500px;
    overflow-y:auto;

    padding:15px;

    background:white;
    border:1px solid #999;

    box-shadow:0 5px 15px rgba(0,0,0,.2);
}

.tenseDropdownMenu.open{
    display:block;
}

#tenseSelection{
    display:block;
    margin-bottom:15px;
}

#tenseSelection label{
    display:flex;
    align-items:center;
    gap:10px;
    padding:6px 4px;
}

.dropdownActions{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    padding-top:10px;
    border-top:1px solid #ddd;
}

.dropdownActions button{
    padding:6px 10px;
    font-size:13px;
}

#tenseTable tbody tr:not(:first-child) td:first-child {
    background: #FFFF00;
}

#tenseTable thead th {
    background: #4FADEA;
}

#tenseTable thead th:first-child {
    background: #FFFF00;
    color: #000000;
}

.pageHeader {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 25px;
}

.mistudiaLogo {
    width: 260px;
    height: auto;
    display: block;
}

.pageHeader h1 {
    flex: 1;
    margin: 0;
    text-align: center;
}

/* =====================================================
   STICKY FIRST COLUMN
===================================================== */

#tenseTable thead th:first-child,
#tenseTable tbody td:first-child {
    position: sticky;
    left: 0;
}

/* Tense oben links */

#tenseTable thead th:first-child {
    background: #FFFF00;
    color: #000000;
    z-index: 20;
}

/* Zeitformen links */

#tenseTable tbody tr:not(:first-child) td:first-child {
    background: #FFFF00;
    z-index: 10;
}

/* Infinitive links */

#tenseTable tbody tr:first-child td:first-child {
    background: #FFF2CC;
    z-index: 10;
}


/* =====================================================
   VERB OPTIONS
===================================================== */

.verbOptions {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 20px;
    margin: 25px 0;
}

.optionGroup {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.optionGroup label {
    font-weight: bold;
}

.optionGroup select {
    width: auto;
    min-width: 180px;
}

.verbChooser {
    position: relative;
}

.verbDropdownBtn {
    min-width: 220px;
    text-align: left;
    background: white;
    color: #222;
    border: 1px solid #999;
}

.verbDropdownBtn:hover {
    background: #f2f2f2;
}

.verbDropdownMenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 150;

    width: 320px;
    max-height: 450px;
    overflow-y: auto;

    padding: 15px;

    background: white;
    border: 1px solid #999;
    box-shadow: 0 5px 15px rgba(0,0,0,.2);
}

.verbDropdownMenu.open {
    display: block;
}

#verbSearch {
    width: 100%;
    margin-bottom: 10px;
    text-align: left;
}

#verbSelection label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px;
}


.topArea {
    background: #FFFF00;
    padding: 20px;
    margin-bottom: 25px;
    border-radius: 8px;
}

.jubelElefant{

    display:none;

    position:fixed;

    right:25px;

    bottom:20px;

    width:190px;

    z-index:10000;

    pointer-events:none;

}

#checkBtn{
    position:absolute;
    left:50%;
    transform:translateX(-50%);

    background:#2F63D8;
}

#checkBtn:hover{
    background:#2856BE;
}


/* Trennlinie Singular | Plural */

#tenseTable th.pluralStart,
#tenseTable td.pluralStart{

border-left:3px solid #9E9E9E !important;

}

/* Trennlinie bei neuem Verb */

#tenseTable th.verbStart,
#tenseTable td.verbStart{

border-left:4px solid #4A4A4A !important;

}

#tenseTable td:last-child,
#tenseTable th:last-child{

    background:#FFF9D6;

}

#tenseTable th,
#tenseTable td{
    width:160px;
    min-width:160px;
}

#tenseTable th:first-child,
#tenseTable td:first-child{
    width:260px;
    min-width:260px;
}

#tenseTable th:last-child,
#tenseTable td:last-child{
    width:220px;
    min-width:220px;
    background:#FFF9D6;
}

/* gesamte Infinitive-Zeile */

#tenseTable tbody tr:first-child td{
    background:#FFF2CC;
}

#solutionBtn{
    margin-left:auto;

    background:transparent;
    color:#555;
    border:1px solid #999;
    box-shadow:none;

    padding:8px 14px;
    font-size:14px;
}

#solutionBtn:hover{

    background:#f2f2f2;
    color:#222;

}



.sentencePlus{
    color:#2e7d32;
}

.sentenceMinus{
    color:#c62828;
}

.sentenceQuestion{
    color:#1565c0;
}



/* ===== Segmented control (Verb selection) ===== */

.segmented{
    display:flex;
    gap:0;
    border:1px solid #bcd;
    border-radius:8px;
    overflow:hidden;
    width:fit-content;
}

.segmented .segmentBtn{
    padding:8px 14px;
    font-size:14px;
    border:none;
    background:#f2f6fa;
    color:#234;
    cursor:pointer;
    border-radius:0;
}

.segmented .segmentBtn + .segmentBtn{
    border-left:1px solid #bcd;
}

.segmented .segmentBtn:hover{
    background:#e2ecf6;
}

.segmented .segmentBtn.active{
    background:#4FADEA;
    color:#fff;
    font-weight:600;
}

/* ===== Done button in dropdowns ===== */

.dropdownActions .doneBtn{
    margin-left:auto;
    background:#4FADEA;
    color:#fff;
    border:none;
    border-radius:6px;
    font-weight:600;
    cursor:pointer;
}

.dropdownActions .doneBtn:hover{
    background:#3894cf;
}


/* =====================================================
   MODERN UI LAYER  (überschreibt ältere Regeln)
===================================================== */

:root{
    --brand:#1f7ae0;
    --brand-dark:#155fb0;
    --ink:#16233a;
    --muted:#5b6b83;
    --line:#e2e8f0;
    --surface:#ffffff;
    --radius:14px;
    --shadow-sm:0 1px 2px rgba(16,32,64,.06), 0 2px 8px rgba(16,32,64,.06);
    --shadow-md:0 4px 16px rgba(16,32,64,.10);
    --shadow-lg:0 12px 32px rgba(16,32,64,.16);
}

body{
    font-family:"Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background:
        radial-gradient(900px 500px at 10% -10%, #e8f1ff 0%, transparent 60%),
        radial-gradient(900px 500px at 110% 0%, #fff7d9 0%, transparent 55%),
        #f4f6fb;
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
}

h1{
    color:var(--ink);
    font-weight:800;
    letter-spacing:-.02em;
}

h2{
    font-weight:700;
    font-size:19px;
    color:var(--ink);
    letter-spacing:-.01em;
}

/* ---------- Karten ---------- */

.topArea{
    background:linear-gradient(135deg,#fff8cc 0%, #ffe98a 100%);
    border:1px solid rgba(0,0,0,.05);
    border-radius:20px;
    box-shadow:var(--shadow-md);
    padding:22px 26px;
}

#filter,
#statistics{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:20px;
    box-shadow:var(--shadow-sm);
    padding:24px 26px;
}

/* ---------- Formularfelder / Menüs ---------- */

select,
.languageSelection select,
.optionGroup select{
    appearance:none;
    -webkit-appearance:none;
    padding:10px 38px 10px 14px;
    border:1px solid var(--line);
    border-radius:12px;
    background-color:#fff;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6b83' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat:no-repeat;
    background-position:right 12px center;
    font-family:inherit;
    font-size:15px;
    font-weight:600;
    color:var(--ink);
    cursor:pointer;
    box-shadow:var(--shadow-sm);
    transition:border-color .15s, box-shadow .15s, transform .15s;
}

select:hover{
    border-color:#c7d5e8;
}

select:focus-visible,
input:focus-visible,
button:focus-visible{
    outline:none;
    border-color:var(--brand);
    box-shadow:0 0 0 3px rgba(31,122,224,.20);
}

.optionGroup label,
.languageSelection label,
#filter h2{
    font-weight:700;
}

.optionGroup label{
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--muted);
}

/* ---------- Buttons ---------- */

button{
    font-family:inherit;
    font-weight:700;
    border-radius:12px;
    padding:10px 18px;
    background:var(--brand);
    color:#fff;
    box-shadow:var(--shadow-sm);
    transition:background .15s, transform .12s, box-shadow .15s;
}

button:hover{
    background:var(--brand-dark);
}

button:active{
    transform:translateY(1px);
}

#startBtn{
    margin-top:22px;
    padding:14px 28px;
    font-size:16px;
    border-radius:14px;
    background:linear-gradient(135deg,var(--brand) 0%, #38a1f5 100%);
    box-shadow:0 6px 18px rgba(31,122,224,.35);
}

#startBtn:hover{
    filter:brightness(1.05);
}

.exerciseButtons button{
    border-radius:14px;
}

#checkBtn{
    background:linear-gradient(135deg,#2f63d8 0%, #4a86f0 100%);
    box-shadow:0 6px 18px rgba(47,99,216,.32);
}

#solutionBtn{
    border:1px solid var(--line);
    border-radius:12px;
    color:var(--muted);
    background:#fff;
    box-shadow:var(--shadow-sm);
}

#solutionBtn:hover{
    background:#f5f8fc;
    color:var(--ink);
}

/* ---------- Dropdown-Menüs ---------- */

.tenseDropdownBtn,
.verbDropdownBtn{
    border:1px solid var(--line);
    border-radius:12px;
    background:#fff;
    color:var(--ink);
    font-weight:600;
    padding:10px 14px;
    box-shadow:var(--shadow-sm);
}

.tenseDropdownBtn:hover,
.verbDropdownBtn:hover{
    background:#f5f8fc;
    border-color:#c7d5e8;
}

.tenseDropdownMenu,
.verbDropdownMenu{
    margin-top:8px;
    border:1px solid var(--line);
    border-radius:16px;
    box-shadow:var(--shadow-lg);
    padding:14px;
}

#tenseSelection label,
#verbSelection label{
    border-radius:10px;
    padding:8px 10px;
    font-weight:600;
    cursor:pointer;
    transition:background .12s;
}

#tenseSelection label:hover,
#verbSelection label:hover{
    background:#f1f6fc;
}

#tenseSelection input[type="checkbox"],
#verbSelection input[type="checkbox"]{
    width:17px;
    height:17px;
    accent-color:var(--brand);
    cursor:pointer;
}

.dropdownActions{
    border-top:1px solid var(--line);
    padding-top:12px;
    margin-top:8px;
}

.dropdownActions button{
    background:#eef3fa;
    color:var(--ink);
    box-shadow:none;
    border-radius:10px;
    font-size:13px;
    font-weight:700;
}

.dropdownActions button:hover{
    background:#e0e9f6;
}

.dropdownActions .doneBtn,
.dropdownActions .doneBtn:hover{
    color:#fff;
}

.dropdownActions .doneBtn{
    background:var(--brand);
    box-shadow:var(--shadow-sm);
}

.dropdownActions .doneBtn:hover{
    background:var(--brand-dark);
}

#verbSearch{
    padding:10px 12px;
    border:1px solid var(--line);
    border-radius:10px;
    font-family:inherit;
    font-size:14px;
}

/* ---------- Segmented control ---------- */

.segmented{
    border:1px solid var(--line);
    border-radius:12px;
    background:#eef3fa;
    padding:4px;
    gap:4px;
    box-shadow:var(--shadow-sm);
}

.segmented .segmentBtn{
    background:transparent;
    border-radius:9px;
    padding:8px 16px;
    font-weight:700;
    color:var(--muted);
    box-shadow:none;
}

.segmented .segmentBtn + .segmentBtn{
    border-left:none;
}

.segmented .segmentBtn:hover{
    background:#e2ecf8;
    color:var(--ink);
}

.segmented .segmentBtn.active{
    background:#fff;
    color:var(--brand-dark);
    box-shadow:var(--shadow-sm);
}

/* ---------- Tabelle ---------- */

.tableWrapper{
    border:1px solid var(--line);
    border-radius:16px;
    box-shadow:var(--shadow-md);
    scrollbar-width:thin;
}

#tenseTable thead th{
    font-weight:800;
    letter-spacing:.01em;
    border-color:#d7e2ee;
}

#tenseTable input{
    width:120px;
    padding:8px;
    border:1px solid #d7dfea;
    border-radius:9px;
    font-family:inherit;
    font-size:14px;
    transition:border-color .12s, box-shadow .12s;
}

#tenseTable td:last-child input{
    width:190px;
}

/* ---------- Obere Scrollleiste ---------- */

.topScroll{
    display:none;
    overflow-x:auto;
    overflow-y:hidden;
    margin-bottom:6px;
    border-radius:10px;
    scrollbar-width:thin;
}

.topScroll::-webkit-scrollbar,
.tableWrapper::-webkit-scrollbar{
    height:12px;
    width:12px;
}

.topScroll::-webkit-scrollbar-thumb,
.tableWrapper::-webkit-scrollbar-thumb{
    background:#b9c7da;
    border-radius:999px;
    border:3px solid transparent;
    background-clip:content-box;
}

.topScroll::-webkit-scrollbar-thumb:hover,
.tableWrapper::-webkit-scrollbar-thumb:hover{
    background:#8fa3bd;
    background-clip:content-box;
}

.topScroll::-webkit-scrollbar-track,
.tableWrapper::-webkit-scrollbar-track{
    background:#eef2f7;
    border-radius:999px;
}

#topScrollInner{
    height:1px;
}

/* ---------- Statistik ---------- */

#statistics p{
    font-size:17px;
    color:var(--muted);
}

#score,
#percent{
    color:var(--ink);
    font-weight:800;
}

.topScroll{
    height:14px;
    background:#eef2f7;
}

/* =====================================================
   FEINSCHLIFF: Logo-Gelb, Dropdown-Raster, Farbfelder
===================================================== */

/* Logo-Feld wieder im ursprünglichen Gelb */
.topArea{
    background:#FFFF00;
    border:1px solid rgba(0,0,0,.08);
}

/* Zeitauswahl: alle 13 Tenses ohne Scrollen sichtbar */
.tenseDropdownMenu{
    width:min(760px, 92vw);
    max-height:none;
    overflow:visible;
    background:#f7faff;
}

#tenseSelection{
    display:grid;
    grid-template-columns:repeat(2, minmax(200px, 1fr));
    gap:2px 16px;
}

#tenseSelection label{
    padding:6px 10px;
    font-size:14px;
}

@media (max-width:640px){
    #tenseSelection{ grid-template-columns:1fr; }
    .tenseDropdownMenu{ max-height:70vh; overflow-y:auto; }
}

/* Trennlinie Singular | Plural nur gestrichelt */
#tenseTable th.pluralStart,
#tenseTable td.pluralStart{
    border-left:2px dashed #9E9E9E !important;
}

/* Auswahlfelder & Buttons oben modern farbig statt weiß */
select,
.languageSelection select,
.optionGroup select{
    background-color:#e8f0fe;
    border-color:#c3d7f5;
    color:var(--brand-dark);
}

select:hover{
    background-color:#dbe8fd;
}

.tenseDropdownBtn,
.verbDropdownBtn{
    background:linear-gradient(135deg,#e8f0fe 0%, #d7e6fd 100%);
    border-color:#c3d7f5;
    color:var(--brand-dark);
}

.tenseDropdownBtn:hover,
.verbDropdownBtn:hover{
    background:linear-gradient(135deg,#dbe8fd 0%, #c8dcfb 100%);
    border-color:#a9c6f0;
}

#solutionBtn{
    background:#fff;
    border:1px solid var(--line);
    color:var(--muted);
    box-shadow:var(--shadow-sm);
}

#solutionBtn:hover{
    background:#f5f5f5;
    color:var(--ink);
}

.segmented{
    background:#dfeafc;
    border-color:#c3d7f5;
}

.segmented .segmentBtn{
    color:var(--brand-dark);
}

.segmented .segmentBtn.active{
    background:linear-gradient(135deg,var(--brand) 0%, #38a1f5 100%);
    color:#fff;
    box-shadow:0 4px 12px rgba(31,122,224,.30);
}

#verbSearch{
    background:#f2f7ff;
    border-color:#c3d7f5;
}

/* ===== Inline sentence mode marker ===== */

.cellInline{
    display:flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;
}

.cellInline .sentenceMode{
    font-weight:700;
    font-size:14px;
    flex:0 0 auto;
}

.cellInline input{
    flex:1 1 auto;
    min-width:0;
}

/* ===== Signal / Usage columns ===== */

th.signalCell,
th.usageCell{
    background:#fff3d6;
    color:#7a5200;
}

td.signalCell,
td.usageCell{
    background:#fffaf0;
}

th.signalCell,
td.signalCell{
    border-left:2px solid #e0b355;
}

/* ===== Klammern-Abstand, Lösungen unter dem Feld ===== */

.cellInline{
    flex-wrap:wrap;
    gap:0;
}

.cellInline .sentenceMode{
    margin:0 8px 0 4px;
}

.cellInline .solution{
    flex:1 0 100%;
    width:100%;
    margin-top:4px;
    text-align:center;
}

td.signalCell .solution,
td.usageCell .solution{
    margin-top:4px;
    text-align:center;
}

/* ===== Signal / Usage in Gelb wie die Zeitformen ===== */

#tenseTable thead th.signalCell,
#tenseTable thead th.usageCell{
    background:#FFFF00;
    color:#000000;
}

#tenseTable tbody tr:not(:first-child) td.signalCell,
#tenseTable tbody tr:not(:first-child) td.usageCell{
    background:#FFFF00;
}

#tenseTable tbody tr:first-child td.signalCell,
#tenseTable tbody tr:first-child td.usageCell{
    background:#FFF2CC;
}

/* ===== Kurzes Aufleuchten beim Feldwechsel ===== */

@keyframes flashOk{
    0%{ background:#b9f6ca; box-shadow:0 0 0 3px rgba(11,128,67,.35); }
    100%{ background:#ffffff; box-shadow:none; }
}

@keyframes flashBad{
    0%{ background:#ffcdd2; box-shadow:0 0 0 3px rgba(198,40,40,.35); }
    100%{ background:#ffffff; box-shadow:none; }
}

#tenseTable input.flashOk{
    animation:flashOk .9s ease-out;
}

#tenseTable input.flashBad{
    animation:flashBad .9s ease-out;
}

/* ===== Feinschliff: Ausrichtung, gleiche Feldhöhen, Klammern inline ===== */

/* Labels der Optionsgruppen auf gleicher Höhe */
.verbOptions{
    align-items:flex-start;
}

.verbOptions .optionGroup{
    justify-content:flex-start;
}

/* Klammern immer links neben dem Feld, nie darüber */
.cellInline{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    white-space:nowrap;
}

.cellInline .sentenceMode{
    flex:0 0 auto;
    margin:0 8px 0 4px;
}

.cellInline input{
    flex:1 1 60px;
    min-width:60px;
    width:auto;
}

/* Einheitliche Eingabefelder in der ganzen Tabelle */
#tenseTable td input[type="text"]{
    height:38px;
    box-sizing:border-box;
    padding:6px 10px;
    font-size:15px;
    line-height:1.2;
    vertical-align:middle;
}

#tenseTable td.signalCell input[type="text"],
#tenseTable td.usageCell input[type="text"]{
    width:100%;
    min-width:150px;
}

#tenseTable td{
    vertical-align:top;
}

/* Zelle direkt unter Signal word / Usage ebenfalls kräftig gelb */
#tenseTable tbody tr:first-child td.signalCell,
#tenseTable tbody tr:first-child td.usageCell{
    background:#FFFF00;
}


/* ===== Lösungen mittig, Zeitformen zentriert ===== */

.solution{
    text-align:center;
}

#tenseTable tbody td:first-child,
#tenseTable thead th:first-child{
    text-align:center;
    vertical-align:middle;
}


/* ===== Dicke schwarze Trennlinie vor Signal word ===== */

#tenseTable th.signalCell,
#tenseTable td.signalCell{
    border-left:4px solid #000000 !important;
}