/*
 * style-cards.css – fünf Stilrichtungen + "Ich bin unsicher".
 *
 * Jede Karte zeigt dieselben Inhalte (Musterbetrieb, gleiche Überschrift,
 * gleiche Handlungsaufforderung). Es ändern sich Raster, Schrift, Bildsprache,
 * Farbe und Stimmung. Die Vorschauen haben bewusst eigene Farben, weil sie
 * Beispiele sind und nicht Teil der Oberfläche.
 */

.style-grid { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .style-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1600px) { .style-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.style-card {
  position: relative;
  display: grid; grid-template-rows: auto 1fr; min-width: 0;
  background: var(--surface); border: var(--border-w) solid var(--border-strong); border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease);
}
.style-card:hover { border-color: var(--text-2); box-shadow: var(--shadow); transform: translateY(-2px); }
.style-card:focus-within { border-color: var(--text-2); }
.style-card[data-state="liked"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), var(--shadow-accent); }
.style-card[data-state="liked"]:hover { transform: translateY(-2px); }
.style-card[data-state="rejected"] { border-style: dashed; background: var(--surface-2); box-shadow: none; }
.style-card[data-state="rejected"]:hover { transform: none; }
.style-card[data-dim="true"] .style-preview { opacity: 0.55; }

.style-preview {
  position: relative; aspect-ratio: 16 / 10; max-width: 100%;
  border-bottom: var(--border-w) solid var(--border); container-type: inline-size; overflow: hidden;
  transition: opacity var(--dur) var(--ease);
}
.style-preview .mini { transition: transform var(--dur-slow) var(--ease-out), filter var(--dur) var(--ease); }
.style-card:hover .style-preview .mini { transform: scale(1.03); }
.style-card[data-state="rejected"] .style-preview .mini { filter: grayscale(1) contrast(0.85); opacity: 0.4; transform: none; }

.style-badge {
  position: absolute; z-index: 3; top: 10px; right: 10px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px 5px 8px; border-radius: var(--radius-full);
  font-size: var(--text-2xs); font-weight: 700;
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 4px 14px -4px rgb(0 0 0 / 0.35);
  animation: badge-in 260ms var(--ease-out) both;
}
.style-badge .icon { width: 0.85rem; height: 0.85rem; }
.style-badge.is-reject { background: var(--surface); color: var(--danger); border: var(--border-w) solid color-mix(in srgb, var(--danger) 45%, transparent); }
.style-badge.is-open { background: var(--surface); color: var(--accent-text); border: var(--border-w) solid var(--accent-line); }
@keyframes badge-in { from { transform: scale(0.85); opacity: 0; } to { transform: none; opacity: 1; } }

.style-body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-5) var(--space-5); }
.style-name { font-size: var(--text-lg); letter-spacing: var(--tracking-snug); }
.style-text { font-size: var(--text-sm); color: var(--muted); line-height: 1.5; }
.style-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin-top: auto; padding-top: var(--space-3); }
.style-actions .toggle { justify-content: center; padding-inline: var(--space-3); white-space: nowrap; }
.style-actions .toggle:only-child { grid-column: 1 / -1; }

.toggle {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--control-h-sm); padding: 0 var(--space-4);
  border-radius: var(--radius-sm); border: var(--border-w) solid var(--border-strong);
  background: var(--field); color: var(--text); font-size: var(--text-sm); font-weight: 700;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
}
.toggle .icon { width: 0.95rem; height: 0.95rem; }
.toggle:hover:not(:disabled) { border-color: var(--text-2); }
.toggle[aria-pressed="true"].is-like { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.toggle.is-quiet { border-color: var(--border); background: transparent; color: var(--muted); font-weight: 400; }
.toggle.is-quiet:hover:not(:disabled) { color: var(--text); background: var(--overlay); }
.toggle[aria-pressed="true"].is-reject { border-color: color-mix(in srgb, var(--danger) 45%, transparent); color: var(--danger); background: var(--danger-soft); font-weight: 700; }
.toggle:disabled { opacity: 0.4; cursor: not-allowed; }

.style-summary { font-size: var(--text-sm); color: var(--muted); padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--surface-2); }
.style-summary strong { color: var(--text); }

/* ---------- Mini-Websites ---------- */
.mini { position: absolute; inset: 0; overflow: hidden; }
.mini i { display: block; }
.mini .m-bar { height: 1cqw; border-radius: 99px; background: currentColor; opacity: 0.18; }
.mini .m-bar.w70 { width: 70%; }
.mini .m-bar.w50 { width: 50%; }

/* 1 Klar & sachlich – 12er-Raster, viel Weiß, Linien, nüchterne Grotesk */
.mini.is-clear { background: #fbfcfd; color: #1b2430; font-family: "Heros", Helvetica, Arial, sans-serif; padding: 4cqw 5cqw; display: grid; grid-template-rows: auto 1fr auto; gap: 3.5cqw; }
.is-clear .m-nav { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #dfe4ea; padding-bottom: 2.5cqw; font-size: 3.2cqw; font-weight: 700; }
.is-clear .m-links { display: flex; gap: 3cqw; font-size: 2.2cqw; font-weight: 400; color: #5a6675; }
.is-clear .m-hero { display: grid; grid-template-columns: 7fr 5fr; gap: 4cqw; align-items: center; }
.is-clear .m-kicker { font-size: 2.1cqw; color: #2f6db3; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.is-clear .m-h { font-size: 5.6cqw; line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; margin: 1.5cqw 0 2.5cqw; }
.is-clear .m-btn { display: inline-block; font-size: 2.2cqw; font-weight: 700; padding: 1.4cqw 2.8cqw; background: #2f6db3; color: #fff; border-radius: 2px; margin-top: 2.5cqw; }
.is-clear .m-img { aspect-ratio: 4 / 3; background: linear-gradient(180deg, #e8edf2 0 62%, #d3dbe4 62%); position: relative; }
.is-clear .m-img::after { content: ""; position: absolute; left: 22%; right: 22%; top: 24%; height: 30%; background: #fff; border: 1px solid #c9d2dc; }
.is-clear .m-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; border-top: 1px solid #dfe4ea; padding-top: 2.5cqw; font-size: 2cqw; color: #5a6675; }

/* 2 Warm & persönlich – zentriert, runde Formen, warme Töne, freundliche Schrift */
.mini.is-warm { background: #fbf4ea; color: #3c2a1f; font-family: "Poppins", "Heros", sans-serif; padding: 3.5cqw 5cqw; display: grid; grid-template-rows: auto 1fr; gap: 2cqw; text-align: center; }
.is-warm .m-nav { display: flex; justify-content: center; font-size: 3cqw; }
.is-warm .m-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; align-items: center; text-align: left; }
.is-warm .m-img { aspect-ratio: 1; border-radius: 50%; background: radial-gradient(100% 100% at 30% 20%, #f8dcbb, #e3ae82 55%, #c4845e); position: relative; }
.is-warm .m-img::before, .is-warm .m-img::after { content: ""; position: absolute; border-radius: 50%; }
.is-warm .m-img::before { width: 30%; height: 30%; left: 22%; top: 34%; background: #fde9d3; }
.is-warm .m-img::after { width: 26%; height: 26%; right: 20%; top: 40%; background: #8f5a3d; opacity: .6; }
.is-warm .m-kicker { font-size: 2.1cqw; color: #b26a46; }
.is-warm .m-h { font-size: 5.4cqw; line-height: 1.08; margin: 1cqw 0 2cqw; }
.is-warm .m-btn { display: inline-block; font-size: 2.2cqw; padding: 1.6cqw 3.2cqw; background: #c06a45; color: #fff; border-radius: 99px; margin-top: 2.5cqw; }
.is-warm .m-tiles { display: none; }

/* 3 Modern & markant – dunkel, riesige schmale Versalien, ein Leuchtakzent */
.mini.is-bold { background: #111219; color: #f3f3f6; font-family: "Heros Condensed", "Arial Narrow", sans-serif; padding: 4cqw 5cqw; display: grid; grid-template-rows: auto 1fr auto; gap: 2cqw; }
.is-bold .m-nav { display: flex; justify-content: space-between; font-size: 2.8cqw; letter-spacing: .08em; text-transform: uppercase; }
.is-bold .m-links { font-size: 2.2cqw; color: #8b8fa3; }
.is-bold .m-kicker { font-size: 2.2cqw; color: #8ea2ff; letter-spacing: .12em; text-transform: uppercase; }
.is-bold .m-h { font-size: 11cqw; line-height: .86; text-transform: uppercase; letter-spacing: -0.01em; margin-top: 1cqw; }
.is-bold .m-row { display: flex; align-items: center; justify-content: space-between; gap: 3cqw; }
.is-bold .m-btn { font-size: 2.4cqw; padding: 1.4cqw 3cqw; background: #4b6bff; color: #fff; text-transform: uppercase; letter-spacing: .06em; }
.is-bold .m-img { flex: 1; height: 7cqw; background: linear-gradient(100deg, #262a3d 0 40%, #4b6bff 40% 43%, #262a3d 43%); }

/* 4 Hochwertig & elegant – Serife kursiv, Leere, feine Linie, gedeckte Töne */
.mini.is-premium { background: #f2efe9; color: #23201b; font-family: "Heros", sans-serif; padding: 4cqw 7cqw; display: grid; grid-template-rows: auto 1fr auto; gap: 2cqw; text-align: center; }
.is-premium .m-nav { font-size: 2cqw; letter-spacing: .3em; text-transform: uppercase; border-bottom: 1px solid #cfc8bb; padding-bottom: 2cqw; }
.is-premium .m-copy { align-self: center; }
.is-premium .m-kicker { font-size: 1.9cqw; letter-spacing: .3em; text-transform: uppercase; color: #8a8273; }
.is-premium .m-h { font-family: "Lora", Georgia, serif; font-style: italic; font-weight: 500; font-size: 7cqw; line-height: 1; margin: 2cqw 0; }
.is-premium .m-btn { display: inline-block; font-size: 1.9cqw; letter-spacing: .2em; text-transform: uppercase; padding: 1.2cqw 3cqw; border: 1px solid #23201b; }
.is-premium .m-img { height: 8cqw; background: linear-gradient(90deg, #b9b09f, #8c8374 60%, #a59c8b); }

/* 5 Bodenständig & solide – Kopfband, kräftige Serife, kastige Module */
.mini.is-solid { background: #ffffff; color: #13233b; font-family: "Bonum", Georgia, serif; display: grid; grid-template-rows: auto 1fr auto; }
.is-solid .m-nav { background: #1d3b62; color: #fff; display: flex; justify-content: space-between; align-items: center; padding: 2.4cqw 5cqw; font-size: 3cqw; }
.is-solid .m-links { font-family: "Heros", sans-serif; font-size: 2cqw; opacity: .75; }
.is-solid .m-hero { display: grid; grid-template-columns: 5fr 6fr; gap: 4cqw; padding: 3.5cqw 5cqw; align-items: center; }
.is-solid .m-img { aspect-ratio: 4 / 3; background: linear-gradient(180deg, #bcd3e8 0 55%, #1d3b62 55%); border: 3px solid #13233b; position: relative; }
.is-solid .m-img::after { content: ""; position: absolute; left: 38%; width: 24%; bottom: 45%; height: 14%; background: #c8352b; }
.is-solid .m-kicker { font-family: "Heros", sans-serif; font-size: 2cqw; font-weight: 700; color: #c8352b; text-transform: uppercase; letter-spacing: .06em; }
.is-solid .m-h { font-size: 5.6cqw; line-height: 1.05; margin: 1.2cqw 0 2cqw; }
.is-solid .m-btn { display: inline-block; font-family: "Heros", sans-serif; font-size: 2.2cqw; font-weight: 700; padding: 1.4cqw 2.8cqw; background: #c8352b; color: #fff; margin-top: 2cqw; }
.is-solid .m-tiles { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 3px solid #13233b; }
.is-solid .m-tiles i { height: 7cqw; border-right: 1px solid #d5dbe4; background: #eef2f7; }
.is-solid .m-tiles i:last-child { border-right: 0; }

/* 6 Ich bin unsicher – leeres Blatt mit offenen Varianten */
.mini.is-unsure { background: var(--surface-2); display: grid; place-items: center; }
.unsure-stack { position: relative; width: 56%; aspect-ratio: 16 / 10; }
.unsure-stack span { position: absolute; inset: 0; border: 1px dashed var(--border-strong); border-radius: 8px; background: var(--surface); }
.unsure-stack span:nth-child(1) { transform: rotate(-5deg) translate(-7%, 5%); }
.unsure-stack span:nth-child(2) { transform: rotate(4deg) translate(6%, 2%); }
.unsure-stack span:nth-child(3) { border-style: solid; border-color: var(--accent-line); display: grid; place-items: center; font-weight: 700; font-size: 9cqw; color: var(--accent-text); box-shadow: var(--shadow); }

.style-picker { display: grid; gap: var(--space-4); }