/* Hoya-Steckbrief zum Drucken, A4 hoch nach Sandras Vorlage (12.10.2026; vorher A4 quer, 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 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 portrait; margin: 9mm; }

html { font-size: 10pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
/* the page declares dark support (see the meta tag) so Samsung Internet does not darken it, and stays light anyway:
   page background and text colour are set here, not left to the browser */
:root { color-scheme: light dark; background: #EFE9F1; color: #2A2333; }
@media (prefers-color-scheme: dark) { :root { background: #EFE9F1; color: #2A2333; } }
body.druck-a4 {
  --d-rose: #C2457E;        /* fine lines, hearts */
  --d-rose-hell: #EBB3CB;
  --d-tinte: #2A2333;
  --d-wert: #4A4256;        /* trait values, a little softer than the titles */
  --d-name: #1F1A2B;        /* the Hoya name and the box headings */
  --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; flex-direction: column; align-items: center; gap: 8px; margin: 0; padding: 14px 8px; }
.druck-status { margin: 0; max-width: 34em; text-align: center; font-size: 15px; color: var(--d-tinte); }
.druck-status:empty { display: none; }
.druck-leiste .btn { min-height: 54px; padding: 0 28px; font-size: 17px; }
/* screen only: narrow screens see the whole sheet scaled down (--passt from the page script) */
@media screen { .blatt { zoom: var(--passt, 1); } }
html.messen .blatt, html.pdf .blatt { zoom: 1; }
.blatt {
  position: relative; box-sizing: content-box; width: 192mm; min-height: 279mm; margin: 0 auto 24px; padding: 9mm;
  background: linear-gradient(#FFFBFD, #FDF6FA); 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: 192mm; 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 below); 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 in the four corners, behind everything (colours as attributes in katalog/_ranke.html) */
.ranke { position: absolute; pointer-events: none; z-index: 0; width: 46mm; height: 19mm; overflow: visible; }
.ranke-ol { top: 0; left: 0; }
.ranke-or { top: 0; right: 0; transform: scaleX(-1); }
.ranke-ul { bottom: 0; left: 0; transform: scaleY(-1); }
.ranke-ur { bottom: 0; right: 0; transform: scale(-1, -1); }
.deko-herzen .ic { position: absolute; z-index: 0; width: 5.5mm; height: 5.5mm; color: #E9A3C3; stroke-width: 1.3; }
.herz-ol { top: 21mm; left: 6mm; } .herz-or { top: 3mm; right: 52mm; }
.herz-ul { bottom: 3mm; left: 52mm; } .herz-ur { bottom: 21mm; right: 6mm; }
html.zwei-seiten .deko-herzen { display: none; }

/* head: the wordmark in the middle between two fine lines, HOYA-STECKBRIEF spaced out below */
.kopf { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; margin: 0 0 .8rem; }
.kopf-logo { display: flex; align-items: center; gap: 4mm; width: 100%; }
.kopf-logo::before, .kopf-logo::after { content: ""; flex: 1; max-width: 30mm; margin: 0 auto; border-top: 1px solid var(--d-rose-hell); }
/* Sandra's wordmark as an image (09.10.2026, static/img/wortmarke-verlauf.png, ratio about 3.6 : 1) */
.kopf-logo img { display: block; height: 4.6rem; width: auto; }
.kopf-zeile { margin: .2rem 0 0; color: var(--d-name); font-size: .95rem; letter-spacing: .45em; font-weight: 400; margin-right: -.45em; }

/* top card: photo, name and Blütezeit left, the trait rows right */
.oben { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--d-rand); border-radius: 4mm; background: #FFFCFD; break-inside: avoid; }
.links { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: .7rem; border-right: 1px solid var(--d-rand); }
.rechts { min-width: 0; padding: .55rem; }

/* the photo whole, never cropped: its own shape, at most as high as the column is wide */
.foto { margin: 0; width: 100%; display: flex; justify-content: center; break-inside: avoid; }
.foto img { display: block; max-width: 100%; max-height: 34rem; width: auto; height: auto; border-radius: 4mm; }
.foto-leer { aspect-ratio: 1; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; border: 1px solid var(--d-rose-hell); border-radius: 4mm; 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; }

/* Sandra (12.10.2026): the name in a script (since 16.10.2026 Allura in the pink-lila of the website, see site.css); name, heart and Blütezeit
   sit in the middle of the space under the photo (the PDF in static/js/druck.js does the same) */
.kopf-name { margin: auto 0 0; padding-top: .8rem; text-align: center; font-family: "Allura", cursive; font-weight: 400; font-size: 2.25rem; line-height: 1.08;
  color: #A63A93; -webkit-text-stroke: .035em #A63A93; text-wrap: balance; }
/* Sandra (16.10.2026): the name was far too big. Sandra (17.10.2026): smaller still, at most two lines
   (druck.js measures, here by length) */
.kopf-name.lang { font-size: 1.8rem; }
.kopf-name.sehr-lang { font-size: 1.4rem; }
.links > :last-child { margin-bottom: auto; }
.trenner { display: flex; align-items: center; gap: .6rem; width: 75%; margin: .5rem 0 .6rem; color: var(--d-rose); }
.trenner::before, .trenner::after { content: ""; flex: 1; border-top: 1px solid var(--d-rose-hell); }
.trenner .ic { width: 1.6rem; height: 1.6rem; stroke-width: 1.4; }

/* Blütezeit: a rounded box, icon and title left, 6 × 2 months right, the legend underneath */
.zeit { display: grid; grid-template-columns: auto auto 1fr; align-items: center; column-gap: .6rem; width: 100%; padding: .55rem .7rem; border: 1px solid var(--d-rand); border-radius: 4mm; background: var(--d-karte); }
.zeit-titel { font-size: 1rem; color: var(--d-name); }
.zeit-monate { min-width: 0; }
.druck-a4 .zeit .monate { grid-template-columns: repeat(6, 1fr); gap: .22rem; margin: 0; }
.druck-a4 .monate i { font-size: .74rem; padding: .3rem 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: var(--sym-ink); border: 2px solid var(--sym-ink); color: #fff; font-weight: 700; padding: calc(.3rem - 1px) 0; }
.druck-a4 .monate-legende { grid-column: 1 / -1; font-size: .72rem; margin-top: .35rem; gap: .1rem 1rem; color: #6B6376; }
.druck-a4 .monate-legende i { width: .85rem; height: .85rem; border-radius: 50%; }
.druck-a4 .monate-legende i.on { background: #FDEAF1; border: 1px solid #E07FA6; }
.druck-a4 .monate-legende i.dok { background: var(--sym-ink); border: 2px solid var(--sym-ink); }

/* trait rows: icon · title · scale · value, the four columns shared by every row (subgrid) */
.karten { display: grid; grid-template-columns: auto auto auto 1fr; gap: .28rem 0; }
.karte { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; column-gap: .55rem; padding: .28rem .55rem; min-height: 2.5rem; border: 1px solid var(--d-rand); border-radius: 3mm; background: var(--d-karte); break-inside: avoid; }
.karte-ic { flex: none; width: 2.3rem; height: 2.3rem; 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-name)); }
.karte-ic .ic { width: 1.4rem; height: 1.4rem; fill: var(--sym, transparent); fill-opacity: .55; stroke-width: 1.7; }
.karte-ic .ic .wz { stroke: #fff; }
.karte-titel { font-size: .9rem; color: var(--d-name); white-space: nowrap; padding-right: .2rem; }
.karte-sym { display: flex; align-items: center; }
.karte .symbole { flex: none; }
.karte .symbole svg { width: 1.25rem; height: 1.25rem; }
.karte-wert { min-width: 0; font-size: .88rem; line-height: 1.22; color: var(--d-wert); }
.leer { color: var(--muted); }

/* text boxes two by two; Fun Fact and a box alone in its row across */
.texte { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-top: .6rem; }
.textbox.breit { grid-column: 1 / -1; }
.textbox { display: flex; gap: .65rem; align-items: flex-start; padding: .6rem .75rem .55rem; border: 1px solid var(--d-rand); border-radius: 3mm; background: #FFFCFD; break-inside: avoid; }
.tb-ic { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--tb-hell); color: var(--tb); margin-top: .05rem; }
.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.38; color: var(--d-wert); }
.tb-inhalt h2 { margin: 0 0 .2rem; font-family: var(--display); font-weight: 600; font-size: 1.35rem; color: var(--d-name); letter-spacing: -.005em; }
.tb-inhalt h3 { margin: .35rem 0 .1rem; font-size: .92rem; color: var(--d-name); }
.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; }

.dicht .karten { gap: .22rem 0; }
.dicht .karte { min-height: 0; padding: .22rem .5rem; }
.dicht .karte-ic { width: 2rem; height: 2rem; }
.dicht .texte { gap: .35rem; }
.dicht .textbox { padding: .4rem .6rem .35rem; }
.dicht .tb-inhalt { line-height: 1.28; }
.dicht .tb-inhalt p, .dicht .tb-inhalt ul { margin-bottom: .2rem; }

/* footer: the motto between two fine lines, the web address below; it sits at the bottom of the page */
.fuss { position: relative; z-index: 1; margin-top: auto; padding-top: .9rem; text-align: center; break-inside: avoid; }
.fuss p { margin: 0; }
.fuss-motto { display: flex; align-items: center; gap: 1.2rem; color: var(--d-wert); font-size: .76rem; letter-spacing: .3em; }
.fuss-motto::before, .fuss-motto::after { content: ""; flex: 1; max-width: 32mm; margin: 0 auto; border-top: 1px solid var(--d-rose-hell); }
.fuss-motto span { margin-right: -.3em; }
.fuss-web { margin-top: .3rem !important; color: var(--d-name); font-size: .82rem; font-weight: 700; letter-spacing: .3em; margin-right: -.3em !important; }