﻿.legal {
  max-width: 720px;
  margin: 0 auto;
  display: grid;
  gap: 2rem;
}

.legal section {
  padding: 1.5rem;
  border-radius: 1.2rem;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  box-shadow: var(--shadow);
}

.legal section a.link {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--accent-soft);
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.legal section a.link:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

.legal section ul {
  margin: 0.75rem 0;
  padding-left: 1.5rem;
}

.legal section li {
  margin: 0.5rem 0;
}

/* Kontaktformular Toggle Button */
.contact-toggle {
  margin-top: 2rem;
  padding: 1rem 2rem;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 1rem;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer !important;
  pointer-events: auto !important;
  transition: all 0.3s ease;
  width: 100%;
  text-align: center;
  box-shadow: 0 4px 15px rgba(108, 92, 231, 0.3);
  z-index: 1;
  position: relative;
}

.contact-toggle:hover {
  background: var(--accent);
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(108, 92, 231, 0.4);
}

.contact-toggle:active {
  transform: translateY(0);
}

.contact-toggle[aria-expanded="true"] {
  border-radius: 1rem 1rem 0 0;
  margin-bottom: 0;
}

/* Kontaktformular */
.contact-form {
  margin-top: 0;
  padding: 0 2rem;
  display: grid;
  gap: 1.5rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 1rem 1rem;
  box-shadow: var(--shadow);
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-10px);
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
              opacity 0.4s ease 0.1s, 
              padding 0.4s ease,
              transform 0.4s ease;
}

.contact-form.contact-form-hidden {
  max-height: 0;
  opacity: 0;
  padding: 0 2rem;
  margin-top: 0;
  transform: translateY(-10px);
}

.contact-form:not(.contact-form-hidden) {
  max-height: 2000px;
  opacity: 1;
  padding: 2rem;
  margin-top: 0;
  transform: translateY(0);
}

.encryption-notice {
  margin: 0;
  padding: 0.75rem 1rem;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  text-align: center;
  border: 1px solid var(--accent-soft);
}

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

.form-group label {
  font-weight: 500;
  color: var(--text);
  font-size: 0.95rem;
}

.form-group .required {
  color: var(--accent);
}

.form-group input,
.form-group textarea {
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-group input:disabled,
.form-group textarea:disabled,
.form-group input[readonly],
.form-group textarea[readonly] {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--bg);
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.submit-btn {
  padding: 0.875rem 2rem;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 0.5rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
  justify-self: start;
}

.submit-btn:hover {
  background: var(--accent);
  opacity: 0.9;
  transform: translateY(-1px);
}

.submit-btn:active {
  transform: translateY(0);
}

.submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.form-message {
  padding: 1rem;
  border-radius: 0.5rem;
  font-size: 0.95rem;
  display: none;
}

.form-message.success {
  display: block;
  background: rgba(46, 213, 115, 0.1);
  color: #2ed573;
  border: 1px solid rgba(46, 213, 115, 0.2);
}

.form-message.error {
  display: block;
  background: rgba(255, 71, 87, 0.1);
  color: #ff4757;
  border: 1px solid rgba(255, 71, 87, 0.2);
}

/* Cookie-Einstellungen */
.cookie-status {
  margin: 1rem 0;
}

.cookie-status__text {
  margin: 0;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.95rem;
  font-weight: 500;
}

.cookie-status__text--accepted {
  background: rgba(46, 213, 115, 0.1);
  color: #2ed573;
  border: 1px solid rgba(46, 213, 115, 0.2);
}

.cookie-status__text--rejected {
  background: rgba(255, 71, 87, 0.1);
  color: #ff4757;
  border: 1px solid rgba(255, 71, 87, 0.2);
}

.cookie-revoke-btn {
  margin-top: 1rem;
  padding: 0.875rem 2rem;
  background: #ff4757;
  color: white;
  border: none;
  border-radius: 0.5rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
}

.cookie-revoke-btn:hover {
  background: #ff3742;
  transform: translateY(-1px);
}

.cookie-revoke-btn:active {
  transform: translateY(0);
}