/* cards.rossiktools.com - same look as the printed cards on card.rossiktools.com. */

*,*::before,*::after { box-sizing: border-box; }
:root {
  --rot: #A21A1A;
  --rot-dunkel: #7d1414;
  --text: #161616;
  --grau: #6b6b6b;
  --linie: #e4e2e2;
  --flaeche: #ffffff;
  --hintergrund: #f4f2f2;
  --gruen: #17663a;
}
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  /* White header on a light grey page, otherwise the card blurs into the header. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--hintergrund);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.huelle { max-width: 440px; margin: 0 auto; padding: 0 0 48px; }

/* --- Header ------------------------------------------------------------ */
.kopf {
  background: #fff;
  color: var(--text);
  padding: 20px 24px 16px;
  text-align: center;
  position: relative;
  border-bottom: 3px solid var(--rot);
}
.marke {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
  letter-spacing: .06em;
  color: var(--rot);
}
.marke img.logo {
  height: 30px; width: auto; display: block; margin: 0 auto;
  max-width: min(200px, calc(100% - 96px));   /* room for the language switch */
  object-fit: contain;
}
.claim {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--grau); margin-top: 7px;
}
.sprache {
  position: absolute; top: 14px; right: 14px;
  display: flex; gap: 2px;
  background: #f2efef; border: 1px solid var(--linie);
  border-radius: 999px; padding: 2px;
}
.sprache button {
  border: 0; background: transparent; color: var(--grau);
  font: inherit; font-size: 11px; font-weight: 600;
  padding: 4px 9px; border-radius: 999px; cursor: pointer; line-height: 1.4;
}
.sprache button[aria-pressed="true"] { background: var(--rot); color: #fff; }

/* --- Card ------------------------------------------------------------ */
.karte {
  background: var(--flaeche);
  margin: 16px 16px 0;
  border-radius: 16px;
  box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 12px 32px rgba(0,0,0,.09);
  padding: 0 22px 26px;
  text-align: center;
  /* .kopf is positioned and would otherwise sit above the avatar */
  position: relative;
  z-index: 1;
}
.avatar {
  width: 92px; height: 92px; border-radius: 50%;
  margin: 22px auto 14px;
  background: var(--rot); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: Georgia, serif; font-size: 34px; letter-spacing: .02em;
  border: 4px solid #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.14);
  object-fit: cover; overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
h1 { font-size: 23px; margin: 0 0 4px; letter-spacing: -.015em; }
.rolle { color: var(--grau); font-size: 14.5px; margin: 0 0 2px; }
.firma { color: var(--rot); font-size: 13px; font-weight: 600; margin: 0; }

/* --- Quick actions -------------------------------------------------- */
.aktionen {
  /* All actions must fit one row at 375 px, otherwise the row wraps badly */
  display: flex; justify-content: center; gap: 8px;
  margin: 22px 0 18px; flex-wrap: wrap;
}
.aktion {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #f6f4f4; color: var(--rot);
  border: 1px solid var(--linie);
  text-decoration: none;
  transition: background .15s, transform .15s;
}
.aktion:active { transform: scale(.94); background: #ece9e9; }
.aktion svg { width: 21px; height: 21px; fill: currentColor; }

.speichern {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 15px;
  background: var(--rot); color: #fff;
  border: 0; border-radius: 11px;
  font: inherit; font-size: 15.5px; font-weight: 600;
  text-decoration: none; cursor: pointer;
}
.speichern:active { background: var(--rot-dunkel); }
.speichern svg { width: 18px; height: 18px; fill: currentColor; }

.daten { margin-top: 20px; text-align: left; border-top: 1px solid var(--linie); }
.zeile {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 2px; border-bottom: 1px solid var(--linie);
  text-decoration: none; color: var(--text);
}
.zeile:last-child { border-bottom: 0; }
.zeile svg { width: 17px; height: 17px; fill: var(--grau); flex: 0 0 17px; }
.zeile span { font-size: 14.5px; word-break: break-word; }

/* --- Form ----------------------------------------------------------- */
/* On small phones the card ends with the last contact row and reads like the end of the
   page, so nobody sees the form below. This row says that there is more. */
.weiter {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 16px -22px -26px; padding: 13px;
  background: #faf7f7; border-top: 1px solid var(--linie);
  border-radius: 0 0 16px 16px;
  color: var(--rot); font-size: 13.5px; font-weight: 600; text-decoration: none;
}
.weiter svg { width: 14px; height: 14px; fill: currentColor; }

.block {
  background: var(--flaeche);
  margin: 16px 16px 0;
  border-radius: 16px;
  box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 12px 32px rgba(0,0,0,.09);
  padding: 24px 22px;
}
.block h2 { font-size: 17.5px; margin: 0 0 5px; letter-spacing: -.01em; }
.block p.intro { color: var(--grau); font-size: 13.5px; margin: 0 0 18px; }
label { display: block; font-size: 12.5px; font-weight: 600; color: #444; margin: 13px 0 5px; }
label .pflicht { color: var(--rot); }
label .freiwillig {
  color: var(--grau); font-weight: 400; font-size: 11.5px; letter-spacing: .01em;
}
/* Hint below a field, deliberately not a placeholder: a placeholder disappears on the
   first keystroke, which is exactly when the country code reminder is still needed. */
.autofill-tipp {
  background: #f4f6f4; border-left: 3px solid #9bb39b; border-radius: 6px;
  padding: 10px 12px; margin: 0 0 16px; font-size: 13px; line-height: 1.5;
  color: #3d523d;
}
/* While a lead still waits for a connection, a green tick would be a lie. Amber, so the
   stand staff can tell at a glance. */
.danke.wartet .haken-kreis { background: #b8860b; }
.danke.wartet .danke-nachtrag {
  background: #fff8e6; border-color: #e0c068; color: #6b5200; font-weight: 600;
}
.feldhinweis {
  display: block; color: var(--grau); font-size: 12px; line-height: 1.45;
  margin: 5px 0 0;
}
#formular textarea { resize: vertical; min-height: 44px; }
input[type=text], input[type=email], input[type=tel], textarea {
  width: 100%; padding: 12px 13px;
  border: 1.5px solid #8d8888; border-radius: 9px;   /* 1px #d8d5d5 gave 1.46:1, invisible in a bright hall */
  font: inherit; font-size: 16px; /* 16px stops iOS from zooming in */
  background: #fcfbfb; color: var(--text);
}
input:focus, textarea:focus {
  outline: 2px solid var(--rot); outline-offset: -1px;
  border-color: var(--rot); background: #fff;
}
textarea { resize: vertical; min-height: 66px; }

.haken { display: flex; gap: 11px; align-items: flex-start; margin: 16px 0 0; cursor: pointer; }
.haken input { width: 21px; height: 21px; margin: 1px 0 0; flex: 0 0 21px; accent-color: var(--rot); }
.haken span { font-size: 13px; line-height: 1.45; color: #333; }

.datenschutz {
  font-size: 11.5px; color: var(--grau); line-height: 1.5;
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--linie);
}
.datenschutz a { color: var(--rot); }

.rechtliches { margin-top: 14px; border-top: 1px solid var(--linie); padding-top: 12px; }
.rechtliches summary {
  font-size: 12px; color: var(--grau); cursor: pointer; padding: 4px 0;
  list-style: none; display: flex; align-items: center; gap: 6px;
}
.rechtliches summary::-webkit-details-marker { display: none; }
.rechtliches summary::before { content: "B8"; font-size: 10px; transition: transform .15s; }
.rechtliches[open] summary::before { transform: rotate(90deg); }
.rechtliches summary:hover { color: var(--rot); }
.rechttext {
  font-size: 11.5px; line-height: 1.6; color: #555;
  margin-top: 10px; max-height: 260px; overflow-y: auto;
  background: #fafafa; border: 1px solid var(--linie); border-radius: 8px; padding: 12px 14px;
}
.rechttext strong { color: var(--text); }

button.senden {
  width: 100%; margin-top: 18px; padding: 15px;
  background: var(--rot); color: #fff;
  border: 0; border-radius: 11px;
  font: inherit; font-size: 15.5px; font-weight: 600; cursor: pointer;
}
button.senden:disabled { background: #bdb8b8; cursor: not-allowed; }
button.senden:active:not(:disabled) { background: var(--rot-dunkel); }

.meldung { margin-top: 14px; padding: 13px 15px; border-radius: 9px; font-size: 13.5px; display: none; }
.meldung.gut { display: block; background: #e8f5ee; color: var(--gruen); border: 1px solid #b9e0cb; }
.meldung.warnung { display: block; background: #fdf3e2; color: #8a5a10; border: 1px solid #f0dcb8; }
.meldung.fehler { display: block; background: #fbeaea; color: #98201f; border: 1px solid #f0c9c8; }

.danke { text-align: center; }
.haken-kreis {
  width: 54px; height: 54px; border-radius: 50%;
  background: #e8f5ee; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
}
.haken-kreis svg { width: 28px; height: 28px; fill: var(--gruen); }
.danke h3 { font-size: 19px; margin: 0 0 6px; }
.danke-text { color: var(--grau); font-size: 13.5px; margin: 0 0 20px; }
.danke-nachtrag {
  background: #fdf3e2; border: 1px solid #f0dcb8; color: #8a5a10;
  border-radius: 8px; padding: 10px 13px; font-size: 12.5px;
  line-height: 1.5; margin: 0 0 18px; text-align: left;
}
.danke-karte {
  background: #fafafa; border: 1px solid var(--linie);
  border-radius: 12px; padding: 16px 16px 6px; margin-bottom: 18px; text-align: left;
}
.danke-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.danke-avatar {
  width: 46px; height: 46px; border-radius: 50%; flex: 0 0 46px;
  background: var(--rot); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: Georgia, serif; font-size: 17px; overflow: hidden;
}
.danke-avatar img { width: 100%; height: 100%; object-fit: cover; }
.danke-name strong { display: block; font-size: 15px; }
.danke-name span { color: var(--grau); font-size: 12.5px; }
.danke-daten .zeile { padding: 9px 0; font-size: 13.5px; }
.danke-daten .zeile:last-child { border-bottom: 0; }

.fuss { text-align: center; color: #9a9595; font-size: 11.5px; margin: 26px 20px 0; line-height: 1.6; }
.fuss a { color: #7e7979; }

.ohne-js {
  background: #fdf3e2; border: 1px solid #f0dcb8; color: #8a5a10;
  border-radius: 9px; padding: 12px 14px; font-size: 13px; line-height: 1.5;
}
/* One span per language, the one matching <html lang> is shown. English is the default. */
[data-de], [data-ro] { display: none; }
html[lang="de"] [data-de], html[lang="ro"] [data-ro] { display: revert; }
html[lang="de"] [data-en], html[lang="ro"] [data-en] { display: none; }

/* Until card.js runs, the form is replaced by the "use phone or e-mail" note. */
.ohne-js { display: none; }
html.no-js .ohne-js { display: block; }
html.no-js #formularkopf, html.no-js #formular { display: none; }

/* Romanian visitors see English legal text until the Romanian one is approved. */
.hinweis-sprache { font-size: 12px; color: var(--grau); font-style: italic; margin: 16px 0 0; }

/* Not found / unavailable */
.karte.leer { padding: 30px 22px; }
.karte.leer h1 { font-size: 20px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }