/* Shared base styles used by every page: colors, typography, pill buttons, numbered labels, dark and sand cards, the top navigation,
   the dark shape behind hero visuals, the "sound familiar?" statements, numbered steps with screenshot panels, the simulation teaser,
   the booking card and the footer.
   Page-specific styles live in the stylesheet or <style> block of that page.
   Note: this file loads BEFORE the page styles. Do not add page-specific selectors to the media queries below. */
:root {
  --page: #f6f3ec;
  --sand: #ebe6db;
  --navy: #06122f;
  --navy-2: #0f2557;
  /* the dark shape behind hero visuals: equals the edge color of the foundry picture, so the picture blends into it */
  --shape: #011130;
  --ink: #111530;
  --muted: #5d6178;
  --muted-dark: #aab0d6;
  --orange: #f3902a;
  --orange-deep: #e8581c;
  /* small orange text on light backgrounds (links, labels): dark enough for a 4.5:1 contrast */
  --orange-text: #b93c0b;
  --red: #e2271d;
  --line: rgba(17, 21, 48, .12);
  /* same gradient as the dots in the logo (measured from the logo mark) */
  --drop: linear-gradient(180deg, #ee7621 0%, #df0d1c 100%);
  /* every row of a page (navigation, hero text, sections) starts at the same left edge: a fluid side inset,
     and on very wide screens a centered frame of at most --frame */
  --frame: 1520px;
  --gutter: max(clamp(22px, 4vw, 64px), calc((100vw - var(--frame)) / 2));
  /* inset of the content inside a rounded card (.band): the card itself is already inset by its margin */
  --gutter-in: max(22px, calc(var(--gutter) - 14px));
  /* width of the text column of a hero: the side inset plus two fifths of the frame; the visual takes the rest up to the page edge */
  --hero-text: calc(var(--gutter) + (100vw - 2 * var(--gutter)) * .4);
  /* outline of the dark shape: a soft point on the left, straight on the right where it leaves the page */
  --shape-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M15 0H100V100H27C24.6 100 23 99.2 21.6 97.2L1.6 63C.2 60.6-.1 58 .7 55.2L10.6 5.2C11.3 1.8 12.6 0 15 0Z'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--page); color: var(--ink); font-family: Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
/* height: auto is required: an image with width/height attributes would otherwise keep its fixed height and get squashed when it shrinks */
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 8px; }
.skip { position: absolute; left: 16px; top: -80px; z-index: 100; background: #fff; color: var(--ink); padding: 12px 18px; border-radius: 999px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 16px; }
.wrap { padding: 0 var(--gutter); }
.band .wrap { padding: 0 var(--gutter-in); }

/* shared typography: condensed bold headings in sentence case, a spaced label that ends in an orange dot, pill buttons */
h1, h2, h3 { font-family: "Barlow Condensed", Inter, sans-serif; font-weight: 700; letter-spacing: -.005em; }
/* keeps a single word from dropping to the last line of a heading; balances the last line of paragraphs */
h2, h3, .claim { text-wrap: balance; }
p { text-wrap: pretty; }
.kicker { font-family: Inter, system-ui, sans-serif; font-size: 12.5px; font-weight: 500; letter-spacing: .3em; line-height: 1.6; text-transform: uppercase; color: var(--ink); margin: 0 0 16px; }
/* the dot follows the last word, also when the label wraps */
.kicker::after { content: ""; display: inline-block; width: 9px; height: 9px; margin-left: .4em; border-radius: 50%; background: var(--orange-deep); }
.kicker a { text-decoration: none; color: var(--muted); }
.kicker a:hover { color: var(--orange-text); }
h2 { font-size: clamp(38px, 4.7vw, 70px); margin: 0 0 24px; }
h2 span { color: var(--orange-deep); }
/* the second sentence of a heading starts on a new line; as a block of its own it gets balanced line breaks too */
h2 .nl { display: block; }
/* accent part of a headline: plain orange, a lighter orange on dark cards */
.hot { color: var(--orange-deep); }
.band.dark .hot { color: var(--orange); }
.lead { font-size: 18px; line-height: 1.6; color: var(--muted); max-width: 620px; margin: 0; }
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 999px; padding: 15px 26px; font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; border: 2px solid transparent; }
.pill.orange { background: linear-gradient(135deg, var(--orange), var(--orange-deep)); color: #fff; box-shadow: 0 10px 26px rgba(232,88,28,.26); }
.pill.ghost { border-color: rgba(255,255,255,.45); color: #fff; }
.pill.ghost:hover { background: #fff; border-color: #fff; color: var(--ink); }
.pill.navy { background: var(--navy); color: #fff; }
/* outlined button on light backgrounds; .go adds an arrow */
.pill.line { border-color: var(--ink); color: var(--ink); }
.pill.line:hover { background: var(--ink); color: #fff; }
.pill.go::after { content: "→"; font-weight: 500; }
.num { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.num b { width: 42px; height: 42px; border-radius: 50%; background: var(--navy); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; flex: none; }
.num span { background: var(--navy); color: #fff; border-radius: 999px; padding: 10px 16px; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
/* rounded cards */
.band { margin: 14px; border-radius: 32px; }
.band.dark { color: #fff; background: radial-gradient(1100px 620px at 80% 30%, var(--navy-2) 0%, var(--navy) 62%); }
.band.dark .kicker { color: rgba(255,255,255,.86); }
.band.dark .kicker::after { background: var(--orange); }
.band.dark .lead { color: var(--muted-dark); }
.band.sand { background: var(--sand); }

/* ---------- Top navigation: a light bar above the page ---------- */
header.top { position: relative; z-index: 10; display: flex; align-items: center; gap: 22px; padding: 16px var(--gutter); color: var(--ink); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); flex: none; }
.brand img.mark { height: 44px; width: auto; }
.brand .words { display: flex; flex-direction: column; gap: 5px; }
.brand img.word { height: 19px; width: auto; align-self: flex-start; }
/* tagline: separated by a thin rule, wide letter spacing; "for foundries" in orange */
.brand small { display: flex; align-items: center; gap: 7px; font-size: 8.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.brand small::before { content: ""; width: 16px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--orange), var(--red)); }
.brand small b { color: var(--orange-text); font-weight: 600; }
nav.pillnav { margin: 0 auto; display: flex; gap: clamp(18px, 1.9vw, 36px); font-size: 16px; font-weight: 500; white-space: nowrap; }
nav.pillnav a { color: var(--ink); text-decoration: none; }
nav.pillnav a:hover, nav.pillnav a[aria-current] { color: var(--orange-text); }
.tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }
nav.pillnav + .tools { margin-left: 0; }
header.top .pill.book { box-shadow: none; }
/* language switch: always visible, the current language filled */
.langs-top { display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid rgba(17,21,48,.18); border-radius: 999px; }
.langs-top a { padding: 8px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: .04em; line-height: 1; color: var(--muted); text-decoration: none; }
.langs-top a:hover { color: var(--ink); }
.langs-top a[aria-current] { background: var(--ink); color: #fff; }
.menu-btn { display: none; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(17,21,48,.28); background: transparent; color: var(--ink); font: 600 15px/1 Inter, system-ui, sans-serif; cursor: pointer; }
.menu-btn svg { width: 16px; height: 16px; }
.mnav { position: absolute; left: 16px; right: 16px; top: calc(100% - 6px); background: #fff; color: var(--ink); border-radius: 24px; padding: 12px; box-shadow: 0 24px 60px rgba(17,21,48,.22); display: grid; gap: 2px; }
.mnav[hidden] { display: none; }
.mnav a { padding: 14px 16px; border-radius: 14px; text-decoration: none; font-weight: 600; font-size: 16px; }
.mnav a:hover { background: var(--page); }
.mnav .mlang { display: flex; gap: 6px; padding: 10px 6px 4px; margin-top: 6px; border-top: 1px solid var(--line); }
.mnav .mlang a { padding: 10px 14px; font-size: 14px; }
.mnav .mlang a[aria-current] { color: var(--orange-text); }
.mnav .pill { margin-top: 8px; }

/* ---------- Hero visual: a picture or screenshots on the dark shape that runs off the right page edge ---------- */
.hero-visual { position: relative; min-width: 0; display: flex; color: #fff; }
/* the mask trims the content as well, so nothing shows outside the shape */
.shape { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; background: var(--shape);
  -webkit-mask: var(--shape-mask) center / 100% 100% no-repeat; mask: var(--shape-mask) center / 100% 100% no-repeat; }

/* ---------- Screenshot panels: a crop of the real application on a dark or sand background ---------- */
.panel { border-radius: 28px; padding: 32px; background: radial-gradient(600px 300px at 70% 30%, var(--navy-2), var(--navy)); }
.panel.sand { background: var(--sand); }
.frag { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 18px 40px rgba(17,21,48,.2); }
/* a screenshot always fills its frame, also when the frame is wider than the picture file */
.frag img { width: 100%; }

/* ---------- "Sound familiar?" statements: dark situation, orange consequence, answer with a dot ---------- */
.claims { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1px solid var(--line); }
.claims li { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 38px 0; border-bottom: 1px solid var(--line); }
.claim { margin: 0; font-family: "Barlow Condensed", Inter, sans-serif; font-weight: 700; letter-spacing: -.005em; font-size: clamp(31px, 3.5vw, 54px); }
/* the second sentence always starts on a new line: dark situation, orange consequence */
.claim span { display: block; color: var(--orange-deep); }
.answer { position: relative; margin: 0; padding-left: 30px; font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 460px; }
.answer::before { content: ""; position: absolute; left: 0; top: .38em; width: 15px; height: 15px; border-radius: 50%; background: var(--drop); }
.answer b { display: block; color: var(--ink); font-weight: 600; }

/* ---------- Numbered step + screenshot panel (normal / reversed) ---------- */
/* minmax(0, ...): a long German word ("Kernschießmaschine") must not hold the column wider than a narrow phone */
.step { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; align-items: center; margin-bottom: 34px; }
.step h3 { font-size: 34px; margin: 0 0 10px; hyphens: auto; overflow-wrap: break-word; }
.step p { font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 440px; margin: 0; }

/* ---------- Simulation teaser ---------- */
.sim { padding: 70px var(--gutter) 30px; }
.sim-card { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 28px; padding: 32px; box-shadow: 0 20px 50px rgba(17,21,48,.06); }
.sim h3 { font-size: clamp(30px, 3vw, 44px); margin: 0 0 12px; }
.sim h3 span { color: var(--orange-deep); }
.sim p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 520px; }
/* the picture of the simulated foundry: the box has the proportions of the picture, so nothing is cropped */
.sim-art { aspect-ratio: 1560 / 600; border-radius: 18px; overflow: hidden; background: var(--shape); }
.sim-art img { width: 100%; height: 100%; }
.note { margin: 12px 4px 0; font-size: 12px; color: var(--muted); border: 1px dashed rgba(17,21,48,.3); border-radius: 12px; padding: 8px 12px; display: inline-block; }

/* ---------- Booking: dark card ---------- */
.final { padding: 90px 0; }
.final-grid { padding: 0 var(--gutter-in); display: grid; grid-template-columns: 1fr; gap: 50px; align-items: center; }
.final-mark { height: 64px; width: auto; margin-bottom: 28px; }
.final h2 { font-size: clamp(44px, 5.6vw, 88px); }
.final .sub { font-size: 18px; line-height: 1.55; color: var(--muted-dark); max-width: 500px; margin: 0 0 30px; }
.final .sub strong { color: #fff; font-weight: 600; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; }
/* the personal contact next to the closing text */
.person { display: flex; align-items: center; gap: 22px; padding: 24px 26px; border-radius: 24px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); }
.person img { width: 96px; height: 96px; flex: none; }
.person-k { margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); }
.person-name { margin: 0; font-family: "Barlow Condensed", Inter, sans-serif; font-weight: 700; font-size: 30px; line-height: 1.05; color: #fff; }
.person-role { margin: 4px 0 12px; font-size: 14px; color: var(--muted-dark); }
.person a { display: block; width: fit-content; margin-top: 4px; color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; }
.person a:hover { color: var(--orange); }
/* on very narrow screens the text moves below the photo instead of holding the card wider than the window */
.person { flex-wrap: wrap; }
.person > div { min-width: 0; }
.founder { margin: 0; max-width: 360px; }
.founder img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 24px; }
.founder blockquote { margin: 22px 0 14px; font-size: 18px; line-height: 1.5; }
.founder blockquote p { margin: 0; }
.founder figcaption { font-size: 14px; color: var(--muted-dark); }
.founder figcaption b { display: block; color: #fff; font-weight: 600; font-size: 15px; margin-bottom: 2px; }

/* ---------- Footer: all secondary pages, kept unobtrusive ---------- */
.foot { padding: 80px 0 34px; }
.foot-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
.foot h3 { font-family: Inter, system-ui, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin: 0 0 16px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.foot a { text-decoration: none; color: var(--ink); }
.foot a:hover, .foot a[aria-current] { color: var(--orange-text); }
.foot .muted { color: var(--muted); }
.foot address { font-style: normal; font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0 0 12px; }
/* the footer always shows the logo tagline; it may wrap, so it never pushes the page wider than the screen */
.foot .brand small { display: flex; flex-wrap: wrap; white-space: normal; row-gap: 3px; letter-spacing: .2em; }
.legal { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; margin-top: 60px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.legal a { color: var(--muted); }
.legal .langs { margin-left: auto; display: flex; gap: 14px; }
.legal .langs a[aria-current] { color: var(--orange-text); font-weight: 700; text-decoration: none; }

/* ---------- Breakpoints (shared parts only) ---------- */
@media (min-width: 700px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) {
  .step { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .step.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .step.flip .txt { order: 2; }
  .claims li { grid-template-columns: 7fr 5fr; gap: 60px; align-items: end; }
  .sim-card { grid-template-columns: 6fr 5fr auto; padding: 40px 44px; }
  /* 6:5, so the contact card keeps photo and text side by side at every desktop width */
  .final-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 80px; }
  /* next to the large closing headline the contact card grows with the window (photo up to 150 px) */
  .final .person { padding: clamp(24px, 2.4vw, 44px); gap: clamp(22px, 2vw, 34px); border-radius: 30px; }
  .final .person img { width: clamp(96px, 8vw, 150px); height: clamp(96px, 8vw, 150px); }
  .final .person-k { font-size: clamp(12px, .75vw, 13.5px); margin-bottom: 10px; }
  .final .person-name { font-size: clamp(30px, 2.5vw, 46px); }
  .final .person-role { font-size: clamp(14px, .95vw, 17px); margin: 6px 0 16px; }
  .final .person a { font-size: clamp(15px, 1.05vw, 19px); margin-top: 6px; }
}
/* five columns: the logo (its tagline wraps), the three areas and the contact column */
@media (min-width: 1100px) { .foot-grid { grid-template-columns: minmax(0, 1.1fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.15fr); gap: 30px; } }
/* below 1100 a hero stacks, so the shape becomes a rounded card */
@media (max-width: 1099px) { .shape { -webkit-mask: none; mask: none; border-radius: 28px; overflow: hidden; } }
/* the logo tagline is long: in the header it is shown on wide screens only (the footer always shows it) */
@media (max-width: 1599px) { header.top .brand small { display: none; } }
/* when the five navigation entries no longer fit, they collapse into the menu button; the language switch and the buttons then
   move to the right edge. Thresholds measured per language (header width needed + a margin): EN 1321, TR 1362, DE 1388 */
@media (max-width: 1359px) { nav.pillnav { display: none; } .menu-btn { display: inline-flex; } nav.pillnav + .tools { margin-left: auto; } }
@media (max-width: 1399px) { html[lang="tr"] nav.pillnav { display: none; } html[lang="tr"] .menu-btn { display: inline-flex; } html[lang="tr"] nav.pillnav + .tools { margin-left: auto; } }
@media (max-width: 1429px) { html[lang="de"] nav.pillnav { display: none; } html[lang="de"] .menu-btn { display: inline-flex; } html[lang="de"] nav.pillnav + .tools { margin-left: auto; } }
@media (max-width: 899px) {
  .brand small { display: none; }
  header.top { padding-top: 14px; padding-bottom: 14px; }
  .band { margin: 10px; border-radius: 26px; }
}
/* the meeting button moves into the menu panel below 641 px; with the German label the header needs that much room */
@media (max-width: 640px) { .tools .book { display: none; } }
/* up to 700 px the menu button shows its icon only (the label stays for screen readers), so logo, language switch and
   menu fit next to each other in every language */
@media (max-width: 700px) { .menu-btn { width: 44px; padding: 0; gap: 0; justify-content: center; font-size: 0; } }
@media (max-width: 600px) {
  .kicker { letter-spacing: .22em; }
  .person { padding: 20px; gap: 16px; }
  .person img { width: 72px; height: 72px; }
}
/* very narrow: the language switch moves into the menu panel, so the logo and the menu button fit */
@media (max-width: 419px) { .tools .langs-top { display: none; } }
/* very small phones: a smaller wordmark, so the logo and the menu button fit next to each other */
@media (max-width: 359px) {
  /* a long button label ("Unsere Softwarelösungen") or step label ("Nach der Wärmebehandlung") may take two lines instead of
     running out of the window */
  .pill { max-width: 100%; white-space: normal; text-align: center; }
  .num { max-width: 100%; }
  .num span { white-space: normal; }
  header.top { gap: 12px; padding-left: 14px; padding-right: 14px; }
  .brand { gap: 9px; }
  .brand img.mark { height: 38px; }
  .brand img.word { height: 16px; }
  /* headings one size smaller, so two-word lines still fit */
  h2 { font-size: 33px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Headings are set in sentence case: descenders (g, p, y) and the dots and cedillas of Ä, Ö, Ü, İ, Ç, Ş need room between the lines.
   This rule comes last and outranks the tighter values some page styles set for single-line headings. */
html[lang] :is(h1, h2, h3, .claim) { line-height: 1.05; }