/* Hoya-Steckbrief zum Drucken, A4 quer (Sandra, 07.10.2026) – templates/katalog/steckbrief_druck.html.
   Every size is in rem: a small script in the page steps the base font (html) down from 10 pt to 7.5 pt
   until the sheet fits one page. Information never hangs on a background colour alone: the scale steps
   differ in stroke colour, documented months are bold with a strong frame, icons are strokes. */
@page { size: A4 landscape; margin: 9mm; }

html { font-size: 10pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body.druck-a4 {
  --d-rose: #C2457E;        /* fine lines, small caps headings */
  --d-rose-hell: #EBB3CB;
  --d-gruen: #3E8A4F;
  --d-gruen-hell: #CFE6CF;
  --d-tinte: #2A2333;
  --d-titel: #2E2C55;       /* trait titles: calm dark blue as in the mockup */
  --d-name: #173B33;        /* the Hoya name, deep green-black like the label */
  --d-karte: #FFFDFE;
  --d-rand: #F1DCE5;
  margin: 0; padding: 0; background: #EFE9F1; color: var(--d-tinte);
  font-family: var(--body); font-size: 1rem; line-height: 1.38;
}

/* screen: the sheet in its real size, with a print button above it */
.druck-leiste { display: flex; align-items: center; gap: 14px; max-width: 297mm; margin: 0 auto; padding: 14px 0; font-size: 13px; color: var(--muted); }
.blatt {
  position: relative; box-sizing: content-box; width: 279mm; min-height: 190mm; margin: 0 auto 24px; padding: 9mm;
  background: #fff; box-shadow: 0 6px 30px -10px rgba(60,30,70,.35);
  display: flex; flex-direction: column; overflow: hidden;
}
html.messen .blatt { padding: 0; min-height: 0; }
@media print {
  body.druck-a4 { background: #fff; }
  .blatt { width: 279mm; margin: 0; padding: 0; box-shadow: none; overflow: visible; }
  html.zwei-seiten .blatt { min-height: 0; }
  html.zwei-seiten .ranke { display: none; }
  /* on two pages a text box moves whole to the next page (break-inside: avoid above); only a box taller than a
     page is split by the browser itself – then never a heading alone at the bottom */
  .tb-inhalt h2, .tb-inhalt h3 { break-after: avoid; }
  .tb-inhalt p, .tb-inhalt li { orphans: 2; widows: 2; }
}

/* decorative tendrils, behind everything */
.ranke { position: absolute; pointer-events: none; z-index: 0; overflow: visible; }
.ranke .st { fill: none; stroke: var(--d-rose-hell); stroke-width: 1.1; stroke-linecap: round; }
.ranke .bl { fill: #EAF4E8; stroke: #9CC79E; stroke-width: .7; }
.ranke-unten .bl:nth-of-type(even), .ranke-oben .bl:nth-of-type(3n) { fill: #FCEFF4; stroke: var(--d-rose-hell); }
.ranke-oben { top: 26mm; right: 0; width: 20mm; height: 47mm; }
.ranke-unten { left: 0; bottom: 0; width: 24mm; height: 29mm; }

/* head: line – HOYA-STECKBRIEF with a small heart – line; the name very large; the logo on the right */
.kopf { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 6mm; margin-bottom: .9rem; }
.kopf-zeile { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: .6em; margin: 0 0 .1rem; color: var(--d-rose); font-size: .82rem; letter-spacing: .3em; font-weight: 700; }
.kopf-zeile::before, .kopf-zeile::after { content: ""; flex: 1; border-top: 1px solid var(--d-rose-hell); }
.kopf-zeile span { margin-right: -.3em; }
.kopf-herz { width: 1.2em; height: 1.2em; color: var(--d-rose); stroke-width: 1.6; }
.kopf-name { margin: 0; font-family: var(--display); font-style: italic; font-weight: 600; font-size: 3.9rem; line-height: 1.02; color: var(--d-name); letter-spacing: -.015em; font-variation-settings: "SOFT" 100, "opsz" 144; }
.kopf-logo { padding-bottom: .3rem; }

/* the logo with the heart (partial _logo_herz.html) */
.logo-herz { display: inline-flex; align-items: flex-end; white-space: nowrap; line-height: 1; }
.logo-herz-wort { font-family: "Great Vibes", "Snell Roundhand", cursive; font-weight: 400; letter-spacing: 0; }
.logo-herz-zug { width: 1.5em; height: 1em; margin-left: -.07em; margin-bottom: .02em; overflow: visible; }
.logo-herz-zug path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* two columns: traits 58 %, photo and texts 42 % */
.spalten { position: relative; z-index: 1; flex: 1; display: grid; grid-template-columns: 58fr 42fr; gap: 5mm; align-items: start; }

.karten { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; padding: .55rem; border: 1px solid var(--d-rand); border-radius: 4mm; background: #FFFBFC; }
.karte { display: flex; gap: .6rem; align-items: center; padding: .45rem .6rem; min-height: 3.4rem; border: 1px solid var(--d-rand); border-radius: 3mm; background: var(--d-karte); break-inside: avoid; }
.karte-ic { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--sym, #eee) 26%, #fff); color: var(--sym-ink, var(--d-titel)); }
.karte-ic .ic { width: 1.55rem; height: 1.55rem; fill: var(--sym, transparent); fill-opacity: .55; stroke-width: 1.7; }
.karte-ic .ic .wz { stroke: #fff; }
.karte-inhalt { min-width: 0; display: flex; flex-direction: column; gap: .12rem; }
.karte-titel { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--d-titel); }
.karte-wert { font-size: .95rem; line-height: 1.25; }
.karte-skala { display: flex; align-items: center; gap: .1rem; }
.karte .symbole { flex: none; margin-right: .5rem; }
.karte .symbole svg { width: 1.3rem; height: 1.3rem; }
/* Blütezeit: in the right-hand column 6 × 2 months, alone in a row it spans both columns with 12 in a line */
.karte-zeit .karte-inhalt { flex: 1; }
.karte-zeit .monate { grid-template-columns: repeat(6, 1fr); gap: .2rem; margin: .2rem 0 0; }
.karten > .karte-zeit:nth-child(odd) { grid-column: 1 / -1; }
.karten > .karte-zeit:nth-child(odd) .monate { grid-template-columns: repeat(12, 1fr); }
/* month states readable without background colours: neutral = grey hairline, estimated = coloured frame,
   documented = bold with a double-strength dark frame */
.druck-a4 .monate i { font-size: .72rem; padding: .28rem 0; border-radius: 1.5mm; border: 1px solid #CFC6D9; color: #7A7186; background: #fff; }
.druck-a4 .monate i.on { background: #FDEAF1; border-color: #E07FA6; color: var(--sym-ink); font-weight: 700; }
.druck-a4 .monate i.dok { background: #F7C6D9; border: 2px solid var(--sym-ink); color: var(--sym-ink); font-weight: 700; padding: calc(.28rem - 1px) 0; }
.druck-a4 .monate-legende { font-size: .72rem; margin-top: .25rem; gap: .1rem 1rem; color: #6B6376; }
.druck-a4 .monate-legende i { width: .85rem; height: .85rem; border-radius: 1mm; }
.druck-a4 .monate-legende i.on { background: #FDEAF1; border: 1px solid #E07FA6; }
.druck-a4 .monate-legende i.dok { background: #F7C6D9; border: 2px solid var(--sym-ink); }
.leer { color: var(--muted); }
.dicht .karten { gap: .3rem; padding: .4rem; }
.dicht .karte { min-height: 0; padding: .3rem .5rem; }
.dicht .karte-ic { width: 2.2rem; height: 2.2rem; }
.dicht .rechts, .dicht .links-texte { gap: .35rem; }
.dicht .textbox { padding: .35rem .6rem .3rem; }
.dicht .tb-inhalt { line-height: 1.28; }
.dicht .tb-inhalt p, .dicht .tb-inhalt ul { margin-bottom: .2rem; }
.links-texte { display: flex; flex-direction: column; gap: .5rem; }
.links-texte:not(:empty) { margin-top: .5rem; }

/* right: the square photo, then the text boxes */
.rechts { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.foto { margin: 0 0 .2rem; width: min(100%, 25rem); aspect-ratio: 1; border-radius: 4mm; overflow: hidden; border: 1px solid var(--d-rand); break-inside: avoid; }
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-leer { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; border: 1px solid var(--d-rose-hell); background: #FFF9FB; color: var(--d-rose); }
.foto-leer .ic { width: 3.4rem; height: 3.4rem; stroke-width: 1.4; }
.foto-leer b { font-family: var(--display); font-style: italic; font-weight: 500; font-size: 1.7rem; }

.textbox { display: flex; gap: .65rem; align-items: flex-start; padding: .5rem .7rem .45rem; border: 1px solid var(--d-rand); border-radius: 3mm; background: #FFFCFD; break-inside: avoid; }
.tb-ic { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--tb-hell); color: var(--tb); margin-top: .1rem; }
.tb-ic .ic { width: 1.45rem; height: 1.45rem; stroke-width: 1.8; }
.tb-beschreibung, .tb-kulturbedingungen { --tb: #3E8A4F; --tb-hell: #E6F3E5; }
.tb-bluetenbildung, .tb-fun_fact { --tb: #C2457E; --tb-hell: #FBE7EE; }
.tb-besonderheiten { --tb: #B98700; --tb-hell: #FFF4D2; }
.tb-besonderheiten .ic { fill: #F2B705; stroke: #C99500; }
.tb-fun_fact .ic { fill: #F6CBDB; }
.tb-beschreibung .ic, .tb-kulturbedingungen .ic { fill: #CFE6CF; }
.tb-bluetenbildung .ic { fill: #FBE7EE; }
.tb-inhalt { min-width: 0; font-size: .9rem; line-height: 1.36; }
.tb-inhalt h2 { margin: 0 0 .1rem; font-family: var(--display); font-style: italic; font-weight: 600; font-size: 1.3rem; color: var(--d-name); letter-spacing: -.005em; }
.tb-inhalt h3 { margin: .35rem 0 .1rem; font-size: .92rem; }
.tb-inhalt p { margin: 0 0 .3rem; }
.tb-inhalt p:last-child, .tb-inhalt ul:last-child { margin-bottom: 0; }
.tb-inhalt ul { margin: 0 0 .3rem; padding-left: 1.1em; }
.tb-inhalt a { color: inherit; text-decoration: none; }

/* footer: logo · motto · web address, between two fine lines */
.fuss { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: .8rem; padding-top: .15rem; color: var(--d-rose); font-size: .74rem; letter-spacing: .24em; break-inside: avoid; }
.fuss::before, .fuss::after { content: ""; flex: 1; border-top: 1px solid var(--d-rose-hell); }
.fuss-trenner { letter-spacing: 0; color: var(--d-rose-hell); }