:root{--color-book-cloth: #cc785c;--color-cactus: #bcd1ca;--color-clay: #d97757;--color-cloud-dark: #87867f;--color-cloud-light: #d1cfc5;--color-cloud-medium: #b0aea5;--color-coral: #ebcece;--color-dark: #0f0f0e;--color-fig: #c46686;--color-heather: #cbcadb;--color-ivory-light: #faf9f5;--color-ivory-medium: #f0eee6;--color-ivory-dark: #e8e6dc;--color-kraft: #d4a27f;--color-light: #fff;--color-manilla: #ebdbbc;--color-manilla-light: #f1e6d0;--color-oat: #e3dacc;--color-olive: #788c5d;--color-sky: #6a98bc;--color-slate-dark: #141413;--color-slate-light: #5e5d59;--color-slate-medium: #3d3d3a;--main-font: "Noto Serif", "Noto Serif Fallback";--font-heading: "Bebas Neue", "Bebas Neue Fallback"}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--main-font);background-color:var(--color-ivory-medium);line-height:1.6;color:var(--color-dark)}.app{margin:0 auto;padding:0 20px}.navbar{display:flex;justify-content:center;align-items:center;padding:1rem 0;border-bottom:1px solid #eee}.menu-button{background:none;border:none;font-size:1.5rem;cursor:pointer}.nav-links{display:flex;gap:2rem}.nav-links a{text-decoration:none;color:var(--text-color)}.brand a{text-decoration:none;color:var(--primary-color);font-weight:500;font-size:1.3rem;font-family:var(--main-font);letter-spacing:.025em}.download-button{background:var(--primary-color);color:#fff;border:none;padding:.5rem 1rem;border-radius:4px;cursor:pointer}.content{display:flex;flex-direction:column;gap:4rem;padding:2rem 0}.article-container{display:grid;grid-template-columns:1fr;gap:2rem}.text-content-title{font-size:2.5rem;font-weight:800;margin-bottom:1rem;line-height:1.2;font-family:var(--font-heading)}.text-content-subtitle{font-size:1.5rem;font-weight:400;margin-bottom:1rem;line-height:1.2;font-family:var(--main-font)}.german-text{display:flex;flex-direction:column;gap:1rem}.text-generator{max-width:650px;margin:0 auto;padding:2rem}.generator-form{width:100%;background-color:var(--color-ivory-light);border:1px solid var(--color-ivory-dark);border-radius:.75rem;padding:.5rem}.input-container{display:flex;flex-direction:column;gap:1rem}.input-row{display:flex;gap:.5rem;align-items:center}.main-input{flex:1;width:100%;padding:.25rem;font-size:1.125rem;color:var(--color-dark);font-family:var(--main-font);background-color:var(--color-ivory-light);border:none}.main-input::placeholder{color:var(--color-cloud-medium)}.main-input:focus{outline:none;border-color:var(--color-cloud-medium)}.submit-button{background-color:var(--color-clay);border:none;border-radius:.5rem;width:2rem;height:2rem;font-size:1.25rem;cursor:pointer;transition:all .2s ease;color:var(--color-light);display:flex;align-items:center;justify-content:center;margin-left:auto}.submit-button:hover:not(:disabled){opacity:.8}.submit-button:disabled{opacity:.5;cursor:not-allowed}.animate-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.select-container{display:flex;flex-direction:row;align-items:flex-end}.custom-dropdown{position:relative;min-width:fit-content;height:fit-content}.dropdown-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.2rem .5rem;border:1px solid transparent;background-color:var(--color-ivory-light);border-radius:.5rem;color:var(--color-dark);font-size:1rem;cursor:pointer;transition:all .2s ease;font-family:var(--main-font)}.dropdown-trigger:hover{border:1px solid var(--color-ivory-dark);background-color:var(--color-ivory-medium)}.dropdown-chevron{transition:transform .2s ease}.dropdown-chevron.open{transform:rotate(180deg)}.dropdown-menu{position:absolute;top:calc(100% + .5rem);left:0;right:0;background-color:var(--color-light);border:1px solid var(--color-ivory-dark);color:var(--color-dark);border-radius:.5rem;padding:.15rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;z-index:50;width:fit-content}.dropdown-item{width:100%;display:grid;grid-template-columns:45px 1fr auto;align-items:center;gap:1rem;padding:.5rem .75rem;white-space:nowrap;border:none;background:none;color:var(--color-dark);font-size:.875rem;text-align:left;cursor:pointer;border-radius:.25rem;transition:all .2s ease}.dropdown-item-label{font-weight:500;width:fit-content}.dropdown-item-description{font-size:.8rem;color:var(--color-cloud-medium);text-align:left}.dropdown-item:hover{background-color:var(--color-ivory-light)}.dropdown-item.selected{background-color:var(--color-ivory-medium);font-weight:500}.error-message{color:var(--color-clay);margin-top:1rem;font-size:.875rem}.generated-content{margin-top:1.5rem}.text-paragraph{font-size:1.25rem}.text-paragraph .underline{text-decoration:underline;text-decoration-style:dotted;text-underline-offset:4px;position:relative;transition:all .2s ease}.text-paragraph .underline:hover{text-decoration-color:var(--primary-color)}.text-paragraph .cursor-help{cursor:help}.text-paragraph .tooltip{position:absolute;top:-40px;left:50%;transform:translate(-50%);background-color:var(--color-dark);color:var(--color-light);font-family:var(--main-font);padding:4px 8px;border-radius:4px;white-space:nowrap;z-index:1000;opacity:0;animation:tooltipFadeIn .2s ease forwards}.text-paragraph .single-word{display:inline-block;padding:1px 2px;margin:-1px -2px;line-height:1.2;border-radius:3px;transition:background-color .2s ease}.text-paragraph .single-word:hover{background-color:var(--color-cloud-light);cursor:pointer}@keyframes tooltipFadeIn{0%{opacity:0;transform:translate(-50%) translateY(10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.word-pairs-table{margin-top:2rem;padding:1.5rem;background-color:var(--color-ivory-light);border-radius:.75rem}.word-pairs-table h2{font-family:var(--font-heading);font-size:1.5rem;margin-bottom:1.5rem;color:var(--color-dark)}.word-pairs-table table{width:100%;border-collapse:collapse}.word-pairs-table th,.word-pairs-table td{padding:.25rem .5rem;text-align:left;border-bottom:1px solid var(--color-ivory-dark)}.word-pairs-table th{font-family:var(--font-heading);font-size:1.1rem;color:var(--color-slate-medium)}.word-pairs-table td{font-family:var(--main-font);font-size:1.1rem;color:var(--color-dark)}.word-pairs-table tr:last-child td{border-bottom:none}.word-pairs-table tr:hover td{background-color:var(--color-ivory-medium)}
