import {AbsoluteFill, useCurrentFrame, interpolate, Sequence, Img} from 'remotion'
import React from 'react'

export type Scene = {
  type: string
  heading: string
  text: string
  image: string
  items: string[]
  pexels_images?: string[]
}

export type Caption = {
  start: number
  end: number
  text: string
}

export type StoryVideoProps = {
  title: string
  domain: string
  scenes: Scene[]
  postUrl: string
  thumbnail?: string
  audioFile?: string
  audioDurationSeconds?: number
  captions?: Caption[]
}

const MOTION_PRESETS = [
  { sx: 1.00, ex: 1.15, tx0:   0, tx1:   0, ty0:   0, ty1:   0 },
  { sx: 1.15, ex: 1.00, tx0:   0, tx1:   0, ty0:   0, ty1:   0 },
  { sx: 1.09, ex: 1.09, tx0:  55, tx1: -55, ty0:   0, ty1:   0 },
  { sx: 1.09, ex: 1.09, tx0: -55, tx1:  55, ty0:   0, ty1:   0 },
  { sx: 1.09, ex: 1.09, tx0:   0, tx1:   0, ty0:  38, ty1: -38 },
  { sx: 1.09, ex: 1.09, tx0:   0, tx1:   0, ty0: -38, ty1:  38 },
  { sx: 1.00, ex: 1.13, tx0: -38, tx1:  12, ty0:   0, ty1:   0 },
  { sx: 1.13, ex: 1.00, tx0:  12, tx1: -38, ty0:   0, ty1:   0 },
  { sx: 1.00, ex: 1.13, tx0:   0, tx1:   0, ty0:  28, ty1: -28 },
  { sx: 1.13, ex: 1.00, tx0:   0, tx1:   0, ty0: -28, ty1:  28 },
  { sx: 1.00, ex: 1.13, tx0: -28, tx1:  28, ty0: -20, ty1:  20 },
  { sx: 1.13, ex: 1.00, tx0:  28, tx1: -28, ty0:  20, ty1: -20 },
] as const

const NUM_MOTIONS = MOTION_PRESETS.length
const INTRO = 45
const OUTRO = 30
const FPS = 30
const CROSSFADE_FRAMES = 10

const clamp = (v: number, lo: number, hi: number) => Math.max(lo, Math.min(hi, v))
const normalizeText = (v?: string) => (v ?? '').replace(/\s+/g, ' ').trim()

const normalizeScene = (s: Partial<Scene>): Scene => ({
  type: String(s.type ?? 'section'),
  heading: normalizeText(s.heading),
  text: normalizeText(s.text),
  image: String(s.image ?? ''),
  items: Array.isArray(s.items) ? s.items.map(i => normalizeText(String(i))).filter(Boolean) : [],
  pexels_images: Array.isArray(s.pexels_images) ? s.pexels_images.filter(Boolean) : [],
})

const getSafeScenes = (scenes: Scene[] | undefined): Scene[] => {
  if (!Array.isArray(scenes) || scenes.length === 0) {
    return [{type: 'section', heading: '', text: '', image: '', items: [], pexels_images: []}]
  }
  return scenes.map(normalizeScene)
}

function buildGlobalImagePlan(scenes: Scene[]): {
  scenePexels: string[][]
  globalStartIndex: number[]
} {
  const scenePexels: string[][] = []
  const globalStartIndex: number[] = []
  let cursor = 0

  for (const scene of scenes) {
    const imgs = (scene.pexels_images ?? []).filter(Boolean)
    scenePexels.push(imgs)
    globalStartIndex.push(cursor)
    cursor += imgs.length
  }

  return {scenePexels, globalStartIndex}
}

const normalizeForMatch = (v?: string) =>
  (v ?? '')
    .toLowerCase()
    .normalize('NFD')
    .replace(/[\u0300-\u036f]/g, '')
    .replace(/[„“"‚‘'`´]/g, '')
    .replace(/[^a-z0-9äöüß\s]/gi, ' ')
    .replace(/\s+/g, ' ')
    .trim()

const wordsOf = (v?: string): string[] => normalizeForMatch(v).split(' ').filter(Boolean)

const buildSceneBlockText = (scene: Scene): string => {
  const parts: string[] = []
  if (scene.heading) parts.push(scene.heading)
  if (scene.text) parts.push(scene.text)
  if (scene.items.length) parts.push(scene.items.join('. '))
  return normalizeText(parts.join('. '))
}

const buildAnchors = (scene: Scene): string[] => {
  const anchors: string[] = []

  if (scene.heading) {
    const hw = wordsOf(scene.heading)
    if (hw.length >= 2) anchors.push(hw.slice(0, Math.min(5, hw.length)).join(' '))
  }

  if (scene.text) {
    const tw = wordsOf(scene.text)
    if (tw.length >= 3) anchors.push(tw.slice(0, Math.min(6, tw.length)).join(' '))
  }

  for (const item of scene.items.slice(0, 3)) {
    const iw = wordsOf(item)
    if (iw.length >= 2) anchors.push(iw.slice(0, Math.min(5, iw.length)).join(' '))
  }

  return anchors.filter(Boolean)
}

type SceneTiming = {
  from: number
  dur: number
  headingFrame: number
  itemsBaseFrame: number
  itemFrames: number[]
}

const fallbackSceneDurationInFrames = (scene: Scene) => {
  const combined = [scene.heading, scene.text, scene.items.join(' ')].filter(Boolean).join(' ')
  const words = combined.split(/\s+/).filter(Boolean).length
  const pauses = (combined.match(/[,:;.!?]/g) ?? []).length
  const bullets = scene.items.length * 10
  const headWords = scene.heading ? scene.heading.split(/\s+/).length : 0
  const headWeight = scene.heading ? Math.max(8, Math.round(headWords * 1.8)) : 0
  const bonus =
    scene.type === 'bullets'
      ? 12
      : scene.type === 'fazit'
      ? 8
      : 0
  const units = Math.max(12, words + pauses * 2 + bullets + headWeight + bonus)
  return clamp(Math.round((units / 2.7) * FPS), 84, 900)
}

const getFallbackSceneTimings = (scenes: Scene[], audioDurationSeconds?: number): SceneTiming[] => {
  const safe = getSafeScenes(scenes)
  let durs: number[]

  if (!audioDurationSeconds || audioDurationSeconds <= 0) {
    durs = safe.map(fallbackSceneDurationInFrames)
  } else {
    const raw = safe.map(fallbackSceneDurationInFrames)
    const availableFrames = Math.max(safe.length, Math.round(audioDurationSeconds * FPS))
    const total = raw.reduce((a, b) => a + b, 0) || 1
    durs = raw.map(v => Math.max(1, Math.floor((v / total) * availableFrames)))
    let rem = availableFrames - durs.reduce((a, b) => a + b, 0)
    for (let i = 0; rem > 0; i++, rem--) durs[i % durs.length] += 1
    durs[durs.length - 1] += availableFrames - durs.reduce((a, b) => a + b, 0)
  }

  let cursor = INTRO

  return safe.map((scene, idx) => {
    const dur = durs[idx]
    const headingWords = wordsOf(scene.heading).length
    const textWords = wordsOf(scene.text).length
    const allWords = wordsOf(buildSceneBlockText(scene)).length || 1
    const itemsBaseFrame = Math.max(10, Math.round(((headingWords + textWords) / allWords) * dur))

    const timing: SceneTiming = {
      from: cursor,
      dur,
      headingFrame: 0,
      itemsBaseFrame,
      itemFrames: scene.items.map((_, i) => itemsBaseFrame + i * 18),
    }

    cursor += dur
    return timing
  })
}

const cueContainsPhrase = (cue: Caption, phrase: string) => {
  if (!phrase) return false
  return normalizeForMatch(cue.text).includes(phrase)
}

const findAnchorCueIndex = (captions: Caption[], anchors: string[], fromIndex: number): number | null => {
  if (!anchors.length) return null

  for (let i = fromIndex; i < captions.length; i++) {
    for (const a of anchors) {
      if (cueContainsPhrase(captions[i], a)) return i
    }
  }

  return null
}

const buildSceneTimingsFromCaptions = (
  scenes: Scene[],
  captions: Caption[],
  audioDurationSeconds?: number
): SceneTiming[] => {
  const safeScenes = getSafeScenes(scenes)
  const fallback = getFallbackSceneTimings(safeScenes, audioDurationSeconds)

  if (!captions || captions.length === 0) return fallback

  const totalAudioFrames =
    audioDurationSeconds && audioDurationSeconds > 0
      ? Math.round(audioDurationSeconds * FPS)
      : Math.max(
          1,
          Math.round((captions[captions.length - 1]?.end ?? 0) * FPS)
        )

  const timings: SceneTiming[] = []
  let searchIndex = 0

  for (let s = 0; s < safeScenes.length; s++) {
    const scene = safeScenes[s]
    const nextScene = safeScenes[s + 1]
    const anchors = buildAnchors(scene)
    const startIdx = findAnchorCueIndex(captions, anchors, searchIndex)

    if (startIdx === null) {
      timings.push(fallback[s])
      continue
    }

    let endIdx = captions.length - 1

    if (nextScene) {
      const nextAnchors = buildAnchors(nextScene)
      const nextStartIdx = findAnchorCueIndex(captions, nextAnchors, startIdx + 1)
      if (nextStartIdx !== null) {
        endIdx = Math.max(startIdx, nextStartIdx - 1)
      }
    }

    const sceneStartFrame = INTRO + Math.round(captions[startIdx].start * FPS)
    const sceneEndFrame = INTRO + Math.round(captions[endIdx].end * FPS)
    const dur = Math.max(24, sceneEndFrame - sceneStartFrame)

    let itemsBaseFrame = Math.max(10, Math.round(dur * 0.45))
    const itemFrames: number[] = []

    for (const item of scene.items) {
      const iw = wordsOf(item)
      const phrase = iw.slice(0, Math.min(5, iw.length)).join(' ')
      let local = itemsBaseFrame

      if (phrase) {
        const hit = captions.findIndex((c, i) => i >= startIdx && i <= endIdx && cueContainsPhrase(c, phrase))
        if (hit !== -1) {
          local = Math.max(10, Math.round(captions[hit].start * FPS) + INTRO - sceneStartFrame)
        }
      }

      itemFrames.push(local)
    }

    if (itemFrames.length > 0) {
      itemsBaseFrame = itemFrames[0]
    }

    timings.push({
      from: sceneStartFrame,
      dur,
      headingFrame: 0,
      itemsBaseFrame,
      itemFrames,
    })

    searchIndex = Math.max(searchIndex, startIdx + 1)
  }

  for (let i = 0; i < timings.length; i++) {
    const cur = timings[i]
    const next = timings[i + 1]
    if (next) {
      cur.dur = Math.max(24, next.from - cur.from)
    } else {
      const endOfAudio = INTRO + totalAudioFrames
      cur.dur = Math.max(24, endOfAudio - cur.from)
    }
  }

  return timings
}

const CaptionOverlay: React.FC<{captions: Caption[]; fps: number}> = ({captions, fps}) => {
  const frame = useCurrentFrame()
  const currentSec = frame / fps
  const current = captions.find(c => currentSec >= c.start && currentSec < c.end)
  if (!current) return null
  const words = current.text.split(' ')
  const progress = (currentSec - current.start) / Math.max(0.1, current.end - current.start)
  const activeWord = Math.min(Math.floor(progress * words.length), words.length - 1)

  return (
    <div style={{
      position: 'absolute', bottom: 60, left: 60, right: 60,
      textAlign: 'center', zIndex: 100,
    }}>
      <div style={{lineHeight: 1.25, fontFamily: 'Arial Black, Arial, sans-serif', fontWeight: 900}}>
        {words.map((w, i) => (
          <span key={i} style={{
            color: i === activeWord ? '#FFE234' : '#FFFFFF',
            fontSize: 82,
            textTransform: 'uppercase' as const,
            WebkitTextStroke: '4px #000000',
            paintOrder: 'stroke fill' as const,
            textShadow: [
              '2px 2px 0px #000',
              '4px 4px 0px #000',
              '6px 6px 0px rgba(0,0,0,0.6)',
              '8px 8px 0px rgba(0,0,0,0.4)',
              '10px 10px 0px rgba(0,0,0,0.2)',
              '0 16px 32px rgba(0,0,0,0.9)',
            ].join(', '),
            marginRight: 10,
            display: 'inline-block',
          }}>{w}</span>
        ))}
      </div>
    </div>
  )
}

const PexelsSlideshow: React.FC<{
  images: string[]
  dur: number
  globalStartIndex: number
}> = ({images, dur}) => {
  const frame = useCurrentFrame()
  if (!images || images.length === 0) return null

  const numImages = images.length
  const framesPerImage = dur / numImages
  const imgIdx = Math.min(Math.floor(frame / framesPerImage), numImages - 1)
  const localFrame = frame - imgIdx * framesPerImage
  const src = images[imgIdx]
  const motionIdx = imgIdx % NUM_MOTIONS
  const m = MOTION_PRESETS[motionIdx]
  const t = localFrame / Math.max(framesPerImage, 1)
  const sc = m.sx + (m.ex - m.sx) * t
  const tx = m.tx0 + (m.tx1 - m.tx0) * t
  const ty = m.ty0 + (m.ty1 - m.ty0) * t

  const fade =
    localFrame < CROSSFADE_FRAMES
      ? interpolate(localFrame, [0, CROSSFADE_FRAMES], [0, 1], {extrapolateRight: 'clamp'})
      : 1

  return (
    <div style={{position: 'absolute', inset: 0, overflow: 'hidden', opacity: fade}}>
      <Img
        src={src}
        style={{
          width: '100%',
          height: '100%',
          objectFit: 'cover',
          transform: `translate(${tx}px, ${ty}px) scale(${sc})`,
          willChange: 'transform',
        }}
      />
    </div>
  )
}

const IntroVisual: React.FC<{thumbnail?: string; pexelImages: string[]}> = ({thumbnail, pexelImages}) => {
  const frame = useCurrentFrame()
  const opacity = interpolate(frame, [0, 16], [0, 1], {extrapolateRight: 'clamp'})
  const src = pexelImages[0] || thumbnail

  return (
    <AbsoluteFill style={{background: '#000', opacity}}>
      {src ? (
        <Img src={src} style={{width: '100%', height: '100%', objectFit: 'cover'}} />
      ) : null}
    </AbsoluteFill>
  )
}

const FAQOverlay: React.FC<{items: string[]; heading: string; dur: number}> = ({items, heading}) => {
  return (
    <div style={{
      position: 'absolute',
      top: 40,
      left: 70,
      right: 70,
      zIndex: 10,
      color: '#fff',
      fontFamily: 'Arial, sans-serif',
    }}>
      <div style={{fontSize: 52, fontWeight: 900, marginBottom: 24}}>{heading}</div>
      {items.map((it, i) => (
        <div key={i} style={{fontSize: 34, lineHeight: 1.35, marginBottom: 14}}>
          {it}
        </div>
      ))}
    </div>
  )
}

const BulletsOverlay: React.FC<{
  items: string[]
  heading: string
  dur: number
  headingFrame?: number
  itemsBaseFrame?: number
  itemFrames?: number[]
}> = ({items, heading, dur, headingFrame = 0, itemsBaseFrame = 10, itemFrames = []}) => {
  const frame = useCurrentFrame()
  const safeItems = items.slice(0, 8)
  const count = safeItems.length

  const itemFontSize = count <= 5 ? 42 : count <= 7 ? 36 : 32
  const gap = count <= 5 ? 14 : count <= 7 ? 10 : 8

  const availableFrames = Math.max(count * 12, dur - itemsBaseFrame - 20)
  const staggerFrames = Math.max(10, Math.floor(availableFrames / (count + 1)))
  const fadeDuration = Math.max(6, Math.min(14, staggerFrames - 2))

  const headOpacity = interpolate(
    frame,
    [headingFrame, headingFrame + 18],
    [0, 1],
    {extrapolateLeft: 'clamp', extrapolateRight: 'clamp'}
  )
  const headY = interpolate(
    frame,
    [headingFrame, headingFrame + 18],
    [20, 0],
    {extrapolateLeft: 'clamp', extrapolateRight: 'clamp'}
  )

  return (
    <div style={{
      position: 'absolute',
      top: 0,
      left: 0,
      right: 0,
      bottom: 160,
      zIndex: 10,
      background: 'transparent',
      padding: '28px 80px 0px 80px',
      display: 'flex',
      flexDirection: 'column',
      overflow: 'hidden',
    }}>
      <div style={{
        opacity: headOpacity,
        transform: `translateY(${headY}px)`,
        marginBottom: 16,
        borderLeft: '6px solid #FFD700',
        paddingLeft: 22,
        filter: 'drop-shadow(0px 6px 18px rgba(0,0,0,0.95))',
      }}>
        <div style={{
          color: '#FFFFFF',
          fontSize: 58,
          lineHeight: 1.08,
          fontWeight: 900,
          fontFamily: 'Arial Black, sans-serif',
          textTransform: 'uppercase',
          textShadow: '2px 2px 0px #000, 4px 4px 0px rgba(0,0,0,0.7), 0 8px 24px rgba(0,0,0,0.95)',
        }}>{heading}</div>
      </div>

      <div style={{display: 'flex', flexDirection: 'column', gap}}>
        {safeItems.map((item, i) => {
          const startF = itemFrames[i] ?? (itemsBaseFrame + i * staggerFrames)
          const op = interpolate(frame, [startF, startF + fadeDuration], [0, 1], {
            extrapolateLeft: 'clamp',
            extrapolateRight: 'clamp',
          })
          const tx = interpolate(frame, [startF, startF + fadeDuration], [-28, 0], {
            extrapolateLeft: 'clamp',
            extrapolateRight: 'clamp',
          })

          return (
            <div key={i} style={{
              display: 'flex',
              gap: 14,
              alignItems: 'flex-start',
              opacity: op,
              transform: `translateX(${tx}px)`,
              filter: 'drop-shadow(0px 4px 12px rgba(0,0,0,0.9))',
            }}>
              <div style={{
                background: '#FFD700',
                color: '#000',
                borderRadius: 6,
                minWidth: 46,
                height: 46,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontSize: 26,
                fontWeight: 900,
                fontFamily: 'Arial Black, sans-serif',
                flexShrink: 0,
                marginTop: 2,
                boxShadow: '2px 4px 10px rgba(0,0,0,0.7), 0 2px 0px rgba(0,0,0,0.5)',
              }}>{i + 1}</div>
              <div style={{
                color: '#FFFFFF',
                fontSize: itemFontSize,
                fontFamily: 'Arial, sans-serif',
                fontWeight: 600,
                lineHeight: 1.35,
                textShadow: '2px 2px 0px #000, 4px 4px 0px rgba(0,0,0,0.6), 0 6px 16px rgba(0,0,0,0.95)',
                paddingTop: 4,
              }}>{item}</div>
            </div>
          )
        })}
      </div>
    </div>
  )
}

const SceneVisual: React.FC<{
  scene: Scene
  dur: number
  sceneIndex: number
  thumbnail?: string
  pexelImages: string[]
  globalStartIndex: number
  timing: SceneTiming
}> = ({scene, dur, sceneIndex, thumbnail, pexelImages, globalStartIndex, timing}) => {
  const frame = useCurrentFrame()
  const fadeIn = interpolate(frame, [0, 14], [0, 1], {extrapolateRight: 'clamp'})
  const fadeOut = interpolate(frame, [dur - 14, dur], [1, 0], {extrapolateLeft: 'clamp'})
  const opacity = Math.min(fadeIn, fadeOut)
  const progressPct = clamp((frame / Math.max(dur, 1)) * 100, 0, 100)

  const hasPexels = pexelImages.length > 0
  const fallbackSrc = thumbnail || scene.image || null

  const motionIdx = sceneIndex % NUM_MOTIONS
  const m = MOTION_PRESETS[motionIdx]
  const t = frame / Math.max(dur, 1)
  const fbSc = m.sx + (m.ex - m.sx) * t
  const fbTx = m.tx0 + (m.tx1 - m.tx0) * t
  const fbTy = m.ty0 + (m.ty1 - m.ty0) * t

  return (
    <AbsoluteFill style={{opacity, background: '#070b12'}}>
      {hasPexels ? (
        <PexelsSlideshow
          images={pexelImages}
          dur={dur}
          globalStartIndex={globalStartIndex}
        />
      ) : fallbackSrc ? (
        <div style={{position: 'absolute', inset: 0, overflow: 'hidden'}}>
          <Img
            src={fallbackSrc}
            style={{
              width: '100%',
              height: '100%',
              objectFit: 'cover',
              transform: `translate(${fbTx}px, ${fbTy}px) scale(${fbSc})`,
              willChange: 'transform',
            }}
          />
        </div>
      ) : (
        <div style={{
          position: 'absolute',
          inset: 0,
          background: 'radial-gradient(circle at 22% 16%, rgba(15,85,145,0.42), transparent 38%), linear-gradient(135deg,#09111d 0%,#0a0f17 100%)',
        }} />
      )}

      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0,
        height: 4, background: 'rgba(255,255,255,0.10)', zIndex: 20,
      }}>
        <div style={{
          width: `${progressPct}%`, height: '100%',
          background: '#10b8ff',
          boxShadow: '0 0 14px rgba(16,184,255,0.85)',
        }} />
      </div>

      {scene.type === 'faq' && scene.items.length > 0 && (
        <FAQOverlay items={scene.items} heading={scene.heading} dur={dur} />
      )}

      {scene.type === 'bullets' && scene.items.length > 0 && (
        <BulletsOverlay
          items={scene.items}
          heading={scene.heading}
          dur={dur}
          headingFrame={timing.headingFrame}
          itemsBaseFrame={timing.itemsBaseFrame}
          itemFrames={timing.itemFrames}
        />
      )}
    </AbsoluteFill>
  )
}

const OutroVisual: React.FC = () => {
  const frame = useCurrentFrame()
  const opacity = interpolate(frame, [0, 22], [0, 1], {extrapolateRight: 'clamp'})
  const scale = interpolate(frame, [0, OUTRO], [1.04, 1.0], {extrapolateRight: 'clamp'})

  return (
    <AbsoluteFill style={{
      background: 'radial-gradient(circle at center,rgba(14,78,130,0.28),transparent 32%),linear-gradient(135deg,#070b12 0%,#09111d 100%)',
      opacity,
    }}>
      <div style={{position: 'absolute', inset: 0, transform: `scale(${scale})`}} />
    </AbsoluteFill>
  )
}

export const StoryVideo: React.FC<StoryVideoProps> = ({scenes, thumbnail, audioDurationSeconds, captions}) => {
  const rawScenes = getSafeScenes(scenes)

  const {scenePexels, globalStartIndex} = React.useMemo(
    () => buildGlobalImagePlan(rawScenes),
    [scenes]
  )

  const sceneTimings = React.useMemo(
    () => buildSceneTimingsFromCaptions(rawScenes, captions ?? [], audioDurationSeconds),
    [rawScenes, captions, audioDurationSeconds]
  )

  const introPexels = scenePexels[0]

  return (
    <AbsoluteFill style={{background: '#000'}}>
      {captions && captions.length > 0 && <CaptionOverlay captions={captions} fps={FPS} />}

      <Sequence from={0} durationInFrames={INTRO}>
        <IntroVisual thumbnail={thumbnail} pexelImages={introPexels} />
      </Sequence>

      {rawScenes.map((scene, idx) => {
        const timing = sceneTimings[idx]
        if (!timing || timing.dur <= 0) return null

        return (
          <Sequence key={idx} from={timing.from} durationInFrames={timing.dur}>
            <SceneVisual
              scene={scene}
              dur={timing.dur}
              sceneIndex={idx}
              thumbnail={thumbnail}
              pexelImages={scenePexels[idx] ?? []}
              globalStartIndex={globalStartIndex[idx] ?? 0}
              timing={timing}
            />
          </Sequence>
        )
      })}

      <Sequence
        from={INTRO + Math.round((audioDurationSeconds ?? 0) * FPS)}
        durationInFrames={OUTRO}
      >
        <OutroVisual />
      </Sequence>
    </AbsoluteFill>
  )
}

export const STORY_DURATION = (
  scenes: Scene[],
  audioDurationSeconds?: number
): number => {
  const safe = getSafeScenes(scenes)
  if (audioDurationSeconds && audioDurationSeconds > 0) {
    return INTRO + Math.round(audioDurationSeconds * FPS) + OUTRO
  }
  return INTRO + safe.reduce((sum, s) => sum + fallbackSceneDurationInFrames(s), 0) + OUTRO
}<!DOCTYPE html>
<html lang="de">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name='robots' content='max-image-preview:large, noindex, follow' />
	<title>WordPress &rsaquo; Fehler</title>
	<style type="text/css">
		html {
			background: #f1f1f1;
		}
		body {
			background: #fff;
			border: 1px solid #ccd0d4;
			color: #444;
			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
			margin: 2em auto;
			padding: 1em 2em;
			max-width: 700px;
			-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
			box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
		}
		h1 {
			border-bottom: 1px solid #dadada;
			clear: both;
			color: #666;
			font-size: 24px;
			margin: 30px 0 0 0;
			padding: 0;
			padding-bottom: 7px;
		}
		#error-page {
			margin-top: 50px;
		}
		#error-page p,
		#error-page .wp-die-message {
			font-size: 14px;
			line-height: 1.5;
			margin: 25px 0 20px;
		}
		#error-page code {
			font-family: Consolas, Monaco, monospace;
		}
		ul li {
			margin-bottom: 10px;
			font-size: 14px ;
		}
		a {
			color: #2271b1;
		}
		a:hover,
		a:active {
			color: #135e96;
		}
		a:focus {
			color: #043959;
			box-shadow: 0 0 0 2px #2271b1;
			outline: 2px solid transparent;
		}
		.button {
			background: #f3f5f6;
			border: 1px solid #016087;
			color: #016087;
			display: inline-block;
			text-decoration: none;
			font-size: 13px;
			line-height: 2;
			height: 28px;
			margin: 0;
			padding: 0 10px 1px;
			cursor: pointer;
			-webkit-border-radius: 3px;
			-webkit-appearance: none;
			border-radius: 3px;
			white-space: nowrap;
			-webkit-box-sizing: border-box;
			-moz-box-sizing:    border-box;
			box-sizing:         border-box;

			vertical-align: top;
		}

		.button.button-large {
			line-height: 2.30769231;
			min-height: 32px;
			padding: 0 12px;
		}

		.button:hover,
		.button:focus {
			background: #f1f1f1;
		}

		.button:focus {
			background: #f3f5f6;
			border-color: #007cba;
			-webkit-box-shadow: 0 0 0 1px #007cba;
			box-shadow: 0 0 0 1px #007cba;
			color: #016087;
			outline: 2px solid transparent;
			outline-offset: 0;
		}

		.button:active {
			background: #f3f5f6;
			border-color: #7e8993;
			-webkit-box-shadow: none;
			box-shadow: none;
		}

			</style>
</head>
<body id="error-page">
	<div class="wp-die-message">Technischer Fehler bei der Sitemap-Generierung. Bitte Log prüfen.</div></body>
</html>