@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter/Inter-VariableFont_opsz,wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}



/* Designvariablen */
:root {

  --max-page-width: 1440px;
  --page-margin: 20px;

  --color-background: #f7f7f7;
  --color-card-bg: #ffffff;
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #5a5a5a;
  --color-border: #e5e5e5;
  --color-accent-primary: #3a7ca5;
  --color-accent-primary-hover: #2f6586;
  --color-accent-secondary: #f5a623;
  --color-accent-secondary-hover: #d58e1e;
  --font-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

}

*, *::before, *::after {
  box-sizing: border-box;
}

body, html {
  min-height: 101%;
  font-family: var(--font-base);
}

button, input, select, textarea, optgroup {
  font-family: inherit;
  font-size: inherit;    /* optional */
  font-weight: inherit;  /* optional */
}

/* Platzhalter-Text nicht vergessen */
::placeholder { font-family: inherit; }


body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text-primary);
  line-height: 1.6;
}

.page-wrapper-main {
  max-width: 1200px;
  width: 100%;
  padding: 0 var(--page-margin);
}

.chapter {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Header / Navigation */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--color-card-bg);
  border-bottom: 1px solid var(--color-border);
  padding-top: 10px;
  padding-bottom: 10px;
}

.navbar {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar-brand {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-accent-primary);
  text-decoration: none;
}

.navbar nav ul {
  list-style: none;
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
}

.navbar nav a {
  text-decoration: none;
  color: var(--color-text-primary);
  font-weight: 500;
  transition: color 0.2s ease;
}

.navbar nav a:hover {
  color: var(--color-accent-primary);
}

/* Hero */
.hero {
  padding-top: 60px;
  padding-bottom: 60px;
}

.hero-container { 
  display: flex;
  flex-direction: row;
  align-items: center; 
}

.hero-image {
  width: 30%;
  display: flex;
  align-content: center; 
  justify-content: flex-start;
}

.hero-image img {
  width: 80%;
}

.hero-text { 
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 60%;
}

.hero-text h1 {
  margin: 0;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  max-width: 24ch;
}

.hero-text p {
  color: var(--color-text-secondary);
  max-width: 60ch;
}

.main-text-input {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 20px;
}


/* Form / Optionen */
.generator-form {
  display: flex;
  flex-direction: row;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  margin-bottom: 0.25rem;
  font-weight: 600;
}

.form-group input[type="number"],
.form-group select {
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 1rem;
  background: var(--color-card-bg);
}

.text-options {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}

.text-options label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

/* Buttons */
.button-main {
  background: var(--color-accent-primary);
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 400;
  cursor: pointer;
  transition: background 0.2s ease;
  font-family: var(--font-base);
}

.button-style-primary {
  color: #fff;
}

.button-style-primary:hover  {
  background: var(--color-accent-primary-hover);
}



.result-actions button {
  background: var(--color-accent-secondary);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

.result-actions button:hover {
  background: var(--color-accent-secondary-hover);
}

/* Result Section */
.result-section {
  padding-bottom: 90px;
}

.result-card {
  background: var(--color-card-bg);
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
  border-radius: 0px 0px 6px 6px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.result-header {
  display: flex;
  gap: 1rem;       
  flex-wrap: wrap; 
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 58px;
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  padding: 12px;
  font-family: var(--font-base)!important;
}

.result-header h2 {
  margin: 0;
  font-size: 1.25rem;
}

.result-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1 auto;       /* nutzt den Platz zwischen Titel und Buttons */
  color: var(--color-text-secondary);
  font-size: 0.9rem;
}

.result-controls label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

#amount {
  width: 74px;
}

/* Einheit: so breit wie längste Option */
#unit {
  width: max-content;   /* passt sich dem längsten Wort an */
}

.result-content .formatted-output h1,
.result-content .formatted-output h2 {
  margin-top: 0;
  font-weight: 700;
}

.result-content .formatted-output p {
  color: var(--color-text-secondary);
}

.output {
  width: 100%;
  padding: 0.75rem;
  font-size: 1rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  min-height: 150px;
  resize: vertical;
  background: var(--color-background);
  color: var(--color-text-primary);
}

.formatted-output {
  width: 100%;
  text-align: left;
}

/* Features */
.features {
  background: var(--color-card-bg);
  padding: 4rem 1rem;
}

.features-container {
  width: 100%;
  margin: 0 auto;
}

.features h2 {
  text-align: center;
  margin-top: 0;
  font-size: 2rem;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.feature-card {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.feature-card h3 {
  margin-top: 0;
  font-size: 1.25rem;
  color: var(--color-accent-primary);
}

.feature-card p {
  color: var(--color-text-secondary);
}

/* About */
.about {
  max-width: 1200px;
  margin: 4rem auto;
  padding: 0 1rem;
}

.about h2 {
  text-align: center;
  margin-bottom: 1rem;
  font-size: 2rem;
}

.about p {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  color: var(--color-text-secondary);
}

/* Contact */
.contact {
  background: var(--color-card-bg);
  padding: 4rem 1rem;
  border-top: 1px solid var(--color-border);
}

.contact-container {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.contact h2 {
  text-align: center;
  margin: 0;
  font-size: 1.75rem;

}

.contact p {
  color: var(--color-text-secondary);
  text-align: center;
  max-width: 340px;
  margin: 0;
}

.contact a {
  color: var(--color-accent-primary);
  text-decoration: none;
}

/* Footer */
.footer {
  background: var(--color-background);
  border-top: 1px solid var(--color-border);
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.footer-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-top: 30px;
  padding-bottom: 30px;
}

.footer a {
  color: var(--color-text-secondary);
  text-decoration: none;
  margin-left: 1rem;
}


.legal-page {
  background-color: var(--color-card-bg);
  padding-top: 60px;
  padding-bottom: 60px;
  min-height: 100%;
}



/* === Icon-Toggles === */
.icon-toggle{
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: #fff center/20px 20px no-repeat;
  cursor: pointer; position: relative;
  transition: box-shadow .15s, border-color .15s, background-color .15s;
}
.icon-toggle:hover{ box-shadow: 0 0 0 3px rgba(58,124,165,.15); }
.icon-toggle.is-active{
  background-color: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
}

/* Default: AUS → text-off.svg */
.icon-format    { background-image: url('../../images/icons/generator/text-off.svg'); }
.icon-headings  { background-image: url('../images/icons/generator/text-off.svg'); }
.icon-paragraphs{ background-image: url('../images/icons/generator/text-off.svg'); }

/* Aktiv-Icons */
.icon-format.is-active    { background-image: url('../images/icons/generator/text-format.svg'); }
.icon-headings.is-active  { background-image: url('../images/icons/generator/text-headlines.svg'); }
.icon-paragraphs.is-active{ background-image: url('../images/icons/generator/text-paragraph.svg'); }

/* Tooltip */
.icon-toggle::after{
  content: attr(data-tooltip);
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(100% + 8px);
  white-space: nowrap; pointer-events: none;
  background: rgba(0,0,0,.85); color:#fff; font-size:12px; line-height:1;
  padding:6px 8px; border-radius:4px; opacity:0; transition: opacity .12s;
}
.icon-toggle:hover::after{ opacity:1; }

/* etwas Abstand in der Kopfzeile */
.result-controls{ gap: .5rem; }


/* Responsive */
@media (max-width: 768px) {
  /* .hero-container {
    flex-direction: column;
    text-align: center;
  }
  .hero-image {
    display: none;
  }
  .navbar nav ul {
    gap: 1rem;
  }
  .footer {
    flex-direction: column;
    gap: 0.5rem;
  } */

  .hero-text {
    width: 100%;
  }

.hero-text h1 {
    margin: 0;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.2;
    max-width: 24ch;
}

  .hero-image {
    display: none;
  }


.main-text-input {
    width: 100%;
    justify-content: space-between;
}

.footer-content {
  flex-direction: column;
  align-items: center;
}
/* Responsive */
/* @media (max-width: 480px) {

  .button-main {
    width: 100%;
  }
*/
}